feat(switch): complete switch component

.storybook/preview.js

@@ -27,6 +27,7 @@ const loaderFn = () => {
         require('../src/components/Badge/badge.stories.mdx'),
         require('../src/components/Button/button.stories.mdx'),
         require('../src/components/Input/input.stories.mdx'),
+        require('../src/components/Switch/switch.stories.mdx'),
         require('../src/components/AutoComplete/autocomplete.stories.mdx'),
         require('../src/components/List/list.stories.mdx'),
         require('../src/components/VirtualList/virtuallist.stories.mdx'),

CHANGELOG.md

@@ -1,4 +1,4 @@
-## 0.1.7 (2020-05-31)
+## 0.1.8 (2020-06-01)
 
 
 ### Bug Fixes
@@ -11,6 +11,7 @@
 
 * **autocomplete:** complete autocomplete component ([5eb3650](https://github.com/yehuozhili/bigbear-ui/commit/5eb36500c4bed975dc73fba0c144675afaa0328a))
 * **avatar&list:** complete avatar and list ; change menu style ; fix alert bug ; ([407cc83](https://github.com/yehuozhili/bigbear-ui/commit/407cc830d62a6a710493f53d58e7ca93264faf16))
+* **badge:** complete badge component ([cd5a84e](https://github.com/yehuozhili/bigbear-ui/commit/cd5a84eb6df426e1a8cb0fd499bbccc12b25648f))
 * **button:** complete button component ([616d66e](https://github.com/yehuozhili/bigbear-ui/commit/616d66e66751d0a5a403f5ec93a377cee63fb8b2))
 * **input:** compelet input component ([c8284cc](https://github.com/yehuozhili/bigbear-ui/commit/c8284cc6138aa882fd4873674dfb3616b6b7b791))
 * **menu:** initial implement menu component ([33a29c7](https://github.com/yehuozhili/bigbear-ui/commit/33a29c77471183a3fcb14ddf742e351576c8d3b0))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bigbear-ui",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Neumorphism component library for React",
   "keywords": [
     "component",

src/components/Message/message.stories.mdx

@@ -28,6 +28,8 @@ import Icon from '../Icon'
 
 ## message 函数调用
 
+第一个参数文本，第二个参数是图标，可以不传或者undefined来使用默认图标，第三个参数是方位。
+
 <Preview>
   <Story name='message3'>
       <div>

src/components/Switch/_style.scss

@@ -0,0 +1,88 @@
+
+.bigbear-switch-label{
+    position: relative;
+    cursor: pointer;
+    input{
+        opacity: 0;
+    }
+}
+
+.bigbear-switch-label-disabled{
+    opacity: 60%;
+    cursor: not-allowed;
+}
+
+
+.bigbear-switch-label-size-default{
+    width: $switch-width-default;
+    height: $switch-height-default;
+    input:checked~ .bigbear-switch-btn-size-default{
+        left:calc(100% - #{$switch-height-default})
+    }
+}
+.bigbear-switch-check-size-default{
+    border-radius: $switch-border-radius-default;
+}
+.bigbear-switch-btn-size-default{
+    width: $switch-height-default;
+    height: $switch-height-default;
+}
+
+
+.bigbear-switch-label-size-lg{
+    width: $switch-width-lg;
+    height: $switch-height-lg;
+    input:checked~ .bigbear-switch-btn-size-lg{
+        left:calc(100% - #{$switch-height-lg})
+    }
+}
+.bigbear-switch-check-size-lg{
+    border-radius: $switch-border-radius-lg;
+}
+.bigbear-switch-btn-size-lg{
+    width: $switch-height-lg;
+    height: $switch-height-lg;
+}
+
+
+
+
+@each $key,$val in $theme-colors{
+    .bigbear-switch-check-#{$key}{
+       color:#{nth($val,2)};
+       position: absolute;
+       top: 0;
+       left: 0;
+       width: 100%;
+       height: 100%;
+       padding: 1px;
+       @include switch-neu(nth($val, 1),nth($val,3),nth($val,4));
+    }
+}
+@each $key,$val in $theme-colors{
+    .bigbear-switch-btn-#{$key}{
+        @include neufactory-noactive(nth($val, 1),nth($val,3),nth($val,4));
+        display: inline-block;
+        position: absolute;
+        border-radius: 50%;
+        left:0;
+        transition:all .36s cubic-bezier(.78,.14,.15,.86);
+    }
+
+}
+
+.bigbear-switch-label-size-sm{
+    width: $switch-width-sm;
+    height: $switch-height-sm;
+    input:checked~ .bigbear-switch-btn-size-sm{
+        left:calc(100% - #{$switch-height-sm})
+    }
+}
+.bigbear-switch-check-size-sm{
+    border-radius: $switch-border-radius-sm;
+    padding: 0;
+}
+.bigbear-switch-btn-size-sm{
+    width: $switch-height-sm;
+    height: $switch-height-sm;
+}

src/components/Switch/index.tsx

@@ -0,0 +1,3 @@
+import Switch from "./switch";
+
+export default Switch;

src/components/Switch/switch.stories.mdx

@@ -0,0 +1,81 @@
+import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
+import Button from '../Button'
+import Switch from './switch'
+
+<Meta title='DISPLAY|Switch 开关' component={Switch} />
+
+<br/>
+
+# Switch 开关
+<br/>
+
+## 基本使用
+
+底座和按钮都可以根据喜好换颜色！
+
+<Preview>
+    <Story name='switch'>
+        <div>
+   <Switch></Switch>
+   <Switch bottomType='primary'  defaultState={true} ></Switch>
+   <Switch bottomType='danger'></Switch>
+    <Switch bottomType='warning' btnType='warning'></Switch>
+   <Switch bottomType='success' btnType='success'></Switch>
+   <Switch bottomType='info' btnType='info'></Switch>
+   <Switch bottomType='dark' btnType='danger'></Switch>
+        </div>
+    </Story>
+</Preview>
+
+## 大小 switchSize
+
+有大中小3种
+
+<Preview>
+    <Story name='switchsizelg'>
+        <div>
+     <Switch switchSize='lg' ></Switch>
+   <Switch switchSize='lg' bottomType='primary'></Switch>
+   <Switch switchSize='lg' bottomType='danger' defaultState={true} ></Switch>
+    <Switch switchSize='lg' bottomType='warning' btnType='warning'></Switch>
+   <Switch switchSize='lg' bottomType='success' btnType='secondary'></Switch>
+   <Switch switchSize='lg' bottomType='info' btnType='info'></Switch>
+   <Switch switchSize='lg' bottomType='dark' btnType='danger'></Switch>
+        </div>
+    </Story>
+</Preview>
+
+<Preview>
+    <Story name='switchsizesm'>
+        <div>
+     <Switch switchSize='sm' ></Switch>
+   <Switch switchSize='sm' bottomType='primary'></Switch>
+   <Switch switchSize='sm' bottomType='danger'></Switch>
+    <Switch switchSize='sm' bottomType='warning' btnType='warning'></Switch>
+   <Switch switchSize='sm' bottomType='success' btnType='success'></Switch>
+   <Switch switchSize='sm' bottomType='info' btnType='info'></Switch>
+   <Switch switchSize='sm' bottomType='dark' btnType='danger'></Switch>
+        </div>
+    </Story>
+</Preview>
+
+## 禁用 disabled
+
+<Preview>
+    <Story name='switchdisable'>
+        <div>
+     <Switch disabled={true} ></Switch>
+   <Switch disabled={true} bottomType='primary'></Switch>
+   <Switch disabled={true} bottomType='danger'></Switch>
+    <Switch disabled={true} bottomType='warning' btnType='warning'></Switch>
+   <Switch disabled={true} bottomType='success' btnType='success'></Switch>
+   <Switch disabled={true} bottomType='info' btnType='info'></Switch>
+   <Switch disabled={true} bottomType='dark' btnType='danger'></Switch>
+        </div>
+    </Story>
+</Preview>
+
+## 属性详情
+
+
+<Props of={Switch} />

src/components/Switch/switch.tsx

@@ -0,0 +1,64 @@
+import React, {  useState, PropsWithChildren } from 'react'
+import classNames from 'classnames'
+
+export interface SwitchProps{
+    /** 底座颜色*/
+    bottomType?:"primary" | "default" | "danger" | "secondary" | "success" | "info" | "light" | "warning" | "dark"  ;
+    /** 按钮颜色*/
+    btnType?:"primary" | "default" | "danger" | "secondary" | "success" | "info" | "light" | "warning" | "dark"  ;
+    /** 大小*/
+    switchSize?:"default"|"sm"| "lg"
+    /** 禁用*/
+    disabled:boolean;
+    /** 默认开关*/
+    defaultState:boolean;
+    /** 选择后回调 */
+    callback?:(v:boolean)=>void
+    /** 改变状态前回调,需要返回状态值 */
+    beforeChange?:(v:boolean)=>boolean
+}
+
+
+
+export function Switch (props:PropsWithChildren<SwitchProps>){
+    const {bottomType,btnType,switchSize,disabled,defaultState,callback,beforeChange}=props
+    const [checked,setChecked]=useState(defaultState)
+    const labelClassName=classNames('bigbear-switch-label',{
+        [`bigbear-switch-label-${bottomType}`]:bottomType,
+        [`bigbear-switch-label-size-${switchSize}`]:switchSize,
+        [`bigbear-switch-label-disabled`]:disabled
+    })
+    const switchCheckName=classNames('bigbear-switch-check',{
+        [`bigbear-switch-check-${bottomType}`]:bottomType,
+        [`bigbear-switch-check-size-${switchSize}`]:switchSize
+    })
+    const btnClassName =classNames('bigbear-switch-btn',{
+        [`bigbear-switch-btn-${btnType}`]:btnType,
+        [`bigbear-switch-btn-size-${switchSize}`]:switchSize
+    })
+    return(
+        <label className={labelClassName} >
+            <input type='checkbox' checked={checked} disabled={disabled} onChange={()=>{
+                let value=!checked;
+                if(beforeChange)value=beforeChange(value)
+                setChecked(value)
+                if(callback)callback(value)
+            }} ></input>
+            <span className={switchCheckName}>
+            </span>
+            <span className={btnClassName}></span>
+        </label>
+    )
+}
+
+Switch.defaultProps={
+    bottomType:'default',
+    btnType:'default',
+    switchSize:'default',
+    disabled:false,
+    defaultState:false
+};
+
+
+
+export default Switch;

src/index.tsx

@@ -12,6 +12,8 @@ export {default as List} from './components/List';
 export {default as Avatar} from './components/Avatar';
 export {default as VirtualList} from './components/VirtualList';
 export {default as Badge} from './components/Badge';
+export {default as Switch} from './components/Switch';
+
 
 
 

src/styles/_variables.scss

@@ -53,7 +53,7 @@ $theme-colors:
   "success":    ($success,$white,#62b234,#84f046),
   "info":       ($info,$white,#2eb0ab,#3eeee7),
   "warning":    ($warning,$gray-7,#d9c934,#ffff46),
-  "danger":     ($danger,$white,#d94143,#ff595b),
+  "danger":     ($danger,$white,#c33b3c,#ff595b),
   "light":      ($light,$gray-7,#d5d5d5, #ffffff),
   "dark":       ($dark,$white,#393939,#4d4d4d)
 );
@@ -301,4 +301,18 @@ $avatar-fontsize-sm:$font-size-base*0.5 !default;
 //badge
 $badge-padding:2px 6px 2px 6px !default;
 $badge-font-size: $font-size-sm !default;
-$badge-border-radius:5px !default;
+$badge-border-radius:5px !default;
+
+
+//switch
+$switch-width-default: 40px;
+$switch-height-default: 15px;
+$switch-border-radius-default:40px;
+
+$switch-width-lg: $switch-width-default*1.5;
+$switch-height-lg: $switch-height-default*1.5;
+$switch-border-radius-lg:$switch-border-radius-default*1.5;
+
+$switch-width-sm: $switch-width-default*0.6;
+$switch-height-sm: $switch-height-default*0.6;
+$switch-border-radius-sm:$switch-border-radius-default*0.6;

src/styles/index.scss

@@ -44,4 +44,8 @@
 @import "../components/VirtualList/style";
 
 //badge
-@import "../components/Badge/style"
+@import "../components/Badge/style";
+
+//switch
+
+@import "../components/Switch/style";

src/styles/mixin/_index.scss

@@ -114,4 +114,9 @@
 
 
 
-
+@mixin switch-neu($bgcolor,$shadow1,$shadow2){
+    background:$bgcolor;
+    box-shadow: inset $btn-neu-normal $btn-neu-normal $btn-neu-normal*2 $shadow1, 
+    inset (-$btn-neu-normal)  (-$btn-neu-normal)  $btn-neu-normal*2 $shadow2,
+    $btn-neu-normal $btn-neu-normal $btn-neu-normal*2 $shadow1;
+}