feat: 🎸 switch add minimum props

aotuzuche · Aug 13, 2021 · 5640bfa · 5640bfa
1 parent 9e8dcb0
commit 5640bfa
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 11 deletions.
diff --git a/examples_src/src/auto-ui/components/switch/index.tsx b/examples_src/src/auto-ui/components/switch/index.tsx
@@ -11,6 +11,7 @@ interface IProps {
   type?: 'primary' | 'secondary' | 'danger'
   icon?: boolean
   mini?: boolean
+  minimum?: boolean
   disabled?: boolean
   className?: string
   children?: null
@@ -29,6 +30,7 @@ const Switch: React.FC<IProps> = props => {
     className,
     onChange,
     mini,
+    minimum,
     ...otherProps
   } = props
 
@@ -40,6 +42,7 @@ const Switch: React.FC<IProps> = props => {
       'x-switch--io': !mini && i && o,
       'x-switch--disabled': disabled,
       'x-switch--mini': mini,
+      'x-switch--minimum': minimum,
     },
     className,
   )

diff --git a/examples_src/src/auto-ui/components/switch/style/index.scss b/examples_src/src/auto-ui/components/switch/style/index.scss
@@ -3,25 +3,25 @@
 @import '../../theme.scss';
 
 .x-switch {
+  position: relative;
   display: inline-flex;
   width: px(100);
   height: px(54);
   background-color: var(--x-switch-bg-color);
   border-radius: px(27);
   transition: all 0.3s ease-out;
-  position: relative;
 
   > em {
+    position: absolute;
+    top: px(4);
+    left: px(4);
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
     width: px(46);
     height: px(46);
-    position: absolute;
-    left: px(4);
-    top: px(4);
     background-color: #fff;
+    border-radius: 50%;
     transition: all 0.3s ease-out;
 
     svg {
@@ -77,20 +77,20 @@
 
     sub,
     sup {
+      position: absolute;
+      top: 0;
+      left: 0;
       display: flex;
       align-items: center;
       justify-content: flex-start;
-      position: absolute;
-      left: 0;
-      top: 0;
       width: 100%;
       height: 100%;
-      font-style: normal;
-      color: #fff;
       padding: 0 px(20);
+      color: #fff;
       font-size: px(24);
-      transition: opacity 0.2s ease-out;
+      font-style: normal;
       opacity: 0;
+      transition: opacity 0.2s ease-out;
     }
 
     sub {
@@ -128,4 +128,20 @@
       }
     }
   }
+
+  &--minimum {
+    width: px(64);
+    height: px(34);
+
+    > em {
+      width: px(26);
+      height: px(26);
+    }
+
+    &.x-switch--active {
+      em {
+        transform: translate(px(30), 0);
+      }
+    }
+  }
 }
diff --git a/examples_src/src/pages/index.tsx b/examples_src/src/pages/index.tsx
@@ -32,6 +32,7 @@ const routes = [
   'switch_icon',
   'switch_io',
   'switch_mini',
+  'switch_minimum',
   'toast',
   'toast_close',
   'toast_duration',

diff --git a/examples_src/src/pages/switch_minimum.tsx b/examples_src/src/pages/switch_minimum.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { Layout, Space, Switch } from '../auto-ui'
+
+class Demo extends React.PureComponent {
+  state = { active: true }
+
+  render() {
+    return (
+      <Layout supportDarkMode={!!localStorage.getItem('darkMode')}>
+        <Layout.Body>
+          <Switch active={this.state.active} minimum onChange={this.onChange} />
+          <Space size={2} />
+          <Switch active={!this.state.active} minimum onChange={this.onChange} />
+        </Layout.Body>
+      </Layout>
+    )
+  }
+
+  private onChange = () => {
+    this.setState({ active: !this.state.active })
+  }
+}
+
+export default Demo
diff --git a/examples_src/src/routes/index.tsx b/examples_src/src/routes/index.tsx
@@ -78,6 +78,7 @@ import PageSwitchDisabled from '../pages/switch_disabled'
 import PageSwitchIcon from '../pages/switch_icon'
 import PageSwitchIO from '../pages/switch_io'
 import PageSwitchMini from '../pages/switch_mini'
+import PageSwitchMinimum from '../pages/switch_minimum'
 import PageSwitchType from '../pages/switch_type'
 import PageTabs from '../pages/tabs'
 import PageTimePicker from '../pages/time_picker'
@@ -119,6 +120,7 @@ const routes: any[] = [
   ['switch_icon', PageSwitchIcon],
   ['switch_io', PageSwitchIO],
   ['switch_mini', PageSwitchMini],
+  ['switch_minimum', PageSwitchMinimum],
   ['toast', PageToast],
   ['toast_callback', PageToastCallback],
   ['toast_close', PageToastClose],