feat(radio): complete radio component

.storybook/preview.js

@@ -28,6 +28,7 @@ const loaderFn = () => {
         require('../src/components/Button/button.stories.mdx'),
         require('../src/components/Input/input.stories.mdx'),
         require('../src/components/Switch/switch.stories.mdx'),
+        require('../src/components/Radio/radio.stories.mdx'),
         require('../src/components/Select/select.stories.mdx'),
         require('../src/components/MultiSelect/multiselect.stories.mdx'),
         require('../src/components/AutoComplete/autocomplete.stories.mdx'),

CHANGELOG.md

@@ -1,9 +1,10 @@
-## 0.1.10 (2020-06-03)
+## 0.1.11 (2020-06-03)
 
 
 ### Bug Fixes
 
 * **message:** fix message componenet dom remove bug ([547a77c](https://github.com/yehuozhili/bigbear-ui/commit/547a77cc5c0bc9df9fae5ebc354847472ac45f34))
+* **submenu:** fix submenu animation bug ([96edbf7](https://github.com/yehuozhili/bigbear-ui/commit/96edbf78f2babdc7199a6de8f5c4a1ddbac4c2d5))
 * ghpage decorator bug ([8e36b73](https://github.com/yehuozhili/bigbear-ui/commit/8e36b7308635b7a4bf9278b7996b9cab8279b1fe))
 
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "bigbear-ui",
-  "version": "0.1.10",
-  "description": "Neumorphism component library for React",
+  "version": "0.1.11",
+  "description": "Neumorphic component library for React",
   "keywords": [
     "component",
     "ui",

src/components/Radio/_style.scss

@@ -0,0 +1,45 @@
+.bigbear-radio-wrapper{
+    @include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);
+    display: inline-block;
+    padding: 5px;
+    .bigbear-radio-label {
+        position: relative;
+        margin:0;
+        cursor: pointer;
+        margin-left:5px;
+        margin-right: 5px;
+        .bigbear-radio-input{
+            position: absolute;
+            opacity: 0;
+        }
+        .bigbear-radio-dot {
+            position: relative;
+            @include square(20px);
+            @include ringwrapper($white,$neu-whiteshadow1,$neu-whiteshadow2);
+            border-radius: 50%;
+            display: inline-block;
+            vertical-align: sub;
+
+        }
+        .bigbear-radio-dot.radio-active::after{
+            content: '';
+            position: absolute;
+            @include square(10px);
+            border-radius:50%;
+            @include neufactory-noactive($primary,$neu-blueshadow1,$neu-blueshadow2);
+            top:5px;
+            left:5px;
+        }
+        .bigbear-radio-value{
+            padding:5px;
+            text-shadow: 1px 1px 4px $neu-whiteshadow1, -1px -1px 4px $neu-whiteshadow2;
+        }
+        .radio-active ~ .bigbear-radio-value{
+            color:$primary;
+        }
+        &.radio-disabled{
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+    }
+}

src/components/Radio/index.tsx

@@ -0,0 +1,3 @@
+import Radio from "./radio";
+
+export default Radio;

src/components/Radio/radio.stories.mdx

@@ -0,0 +1,47 @@
+import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
+import Radio from './radio';
+import Icon from '../Icon'
+
+<Meta title='Display|Radio 单选按钮' component={Radio} />
+
+<br/>
+
+# Radio 单选按钮
+
+<br/>
+
+## 基本使用
+
+不同于别的组件库封装，直接传个数组就可以使用，大大节约代码量。
+
+
+<Preview>
+    <Story name='Radio'>
+        <Radio data={['radio1','radio2','radio3']} callback={(v)=>console.log(v)}></Radio>
+    </Story>
+</Preview>
+
+## 默认选中 defaultIndex
+
+<Preview>
+    <Story name='defaUltvalue'>
+        <Radio data={['radio1','radio2','radio3']} defaultIndex={2}></Radio>
+    </Story>
+</Preview>
+
+
+## 禁用 disableIndex
+
+禁用传入想禁的序号即可，不用一个个组件写disabled了。
+
+<Preview>
+    <Story name='disabled'>
+        <Radio data={['radio1','radio2','radio3','radio4','radio5']} disableIndex={[2,3]}></Radio>
+    </Story>
+</Preview>
+
+
+
+## 属性详情
+
+<Props of={Radio} />

src/components/Radio/radio.tsx

@@ -0,0 +1,58 @@
+import React, { useState, PropsWithChildren, useRef } from 'react';
+import classnames from 'classnames'
+
+interface RadioProps{
+    /** 数据*/
+    data:Array<string>
+    /** 默认选中索引*/
+    defaultIndex?:number;
+     /** 回调值 */
+    callback?:(arr:Array<boolean>)=>void;
+     /** 额外类名 */
+    className?:string;
+      /** 禁用索引 */
+    disableIndex?:Array<number>
+}
+
+
+
+function Radio(props:PropsWithChildren<RadioProps>){
+    const {defaultIndex,callback,data,className,disableIndex}=props
+    const disableRef=useRef(new Array(data.length).fill(false))
+    if(disableIndex){
+        disableIndex.forEach((v)=>disableRef.current[v]=true)
+    }
+    const classes = classnames('bigbear-radio-wrapper',className)
+    const [state,setState]=useState(new Array(data.length).fill(false).map((v,i)=>i===defaultIndex?true:v))
+    return (
+        <div className={classes}>
+            {
+                data.map((value,index)=>{
+                    return(
+                        <label className={`bigbear-radio-label ${disableRef.current[index]?'radio-disabled':''}`} key={index}>
+                            <input type='radio' className='bigbear-radio-input' checked={state[index]} 
+                            onClick={()=>{
+                                if(!disableRef.current[index]){
+                                    let newState=new Array(data.length).fill(false)
+                                    newState[index]=true;
+                                    setState(newState)
+                                    if(callback)callback(newState)
+                                }
+                            }} onChange={()=>{}} ></input>
+                            <span className={`bigbear-radio-dot ${state[index]?'radio-active':''}`}></span>
+                            <span className={'bigbear-radio-value'}>{value}</span>
+                        </label>
+                    )
+                })
+            }
+
+        </div>
+    )
+}
+
+
+Radio.defaultProps={
+    data:[],
+}
+
+export default Radio;

src/index.tsx

@@ -15,7 +15,7 @@ export {default as Badge} from './components/Badge';
 export {default as Switch} from './components/Switch';
 export {default as Select} from './components/Select';
 export {default as MultiSelect} from './components/MultiSelect';
-
+export {default as Radio} from './components/Radio';
 
 export {default as useClickOutside}from './hooks/useClickOutside';
 export {default as useDebounce}from './hooks/useDebounce';

src/styles/index.scss

@@ -56,4 +56,8 @@
 @import "../components/Select/style";
 
 //multiselect
-@import "../components/MultiSelect/style";
+@import "../components/MultiSelect/style";
+
+
+//radio
+@import "../components/Radio/style";