feat(select): complete select component

.storybook/main.js

@@ -13,7 +13,8 @@ module.exports = {
       options: {
         configureJSX: true,
       },
-    }
+    },
+    '@storybook/addon-viewport/register'
   ],
   managerWebpack: async (config) => {
     config.optimization.splitChunks = { chunks: 'all', maxSize: maxAssetSize }

CHANGELOG.md

@@ -1,4 +1,4 @@
-## 0.1.8 (2020-06-01)
+## 0.1.9 (2020-06-02)
 
 
 ### Bug Fixes
@@ -17,6 +17,7 @@
 * **menu:** initial implement menu component ([33a29c7](https://github.com/yehuozhili/bigbear-ui/commit/33a29c77471183a3fcb14ddf742e351576c8d3b0))
 * **menu:** menu component inital complete ([2094eba](https://github.com/yehuozhili/bigbear-ui/commit/2094eba806ead1cb7ea03b8f9aaef9163fe9c0a4))
 * **src:** change style and add alert message component ([21590e7](https://github.com/yehuozhili/bigbear-ui/commit/21590e7ea989c9c2f685a791dcfc26b3cd0239f2))
+* **switch:** complete switch component ([2393b24](https://github.com/yehuozhili/bigbear-ui/commit/2393b242efb6c3b769d8c9e70d9071c946b8cf3e))
 * **virtuallist:** complete virtuallist ([8e6b44a](https://github.com/yehuozhili/bigbear-ui/commit/8e6b44a0b9d2ed3d6478d8da6a93f843dc1439c5))
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bigbear-ui",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Neumorphism component library for React",
   "keywords": [
     "component",
@@ -78,6 +78,7 @@
     "@storybook/addon-actions": "^5.3.18",
     "@storybook/addon-docs": "^5.3.18",
     "@storybook/addon-links": "^5.3.18",
+    "@storybook/addon-viewport": "^5.3.19",
     "@storybook/addons": "^5.3.18",
     "@storybook/preset-create-react-app": "^2.1.1",
     "@storybook/react": "5.3.18",

src/components/Input/_style.scss

@@ -11,9 +11,11 @@
         font-size: $input-fontsize;
         border:none;
         outline: none;
-        flex:1;
+        flex-grow:1;
+        flex-shrink: 0;
         padding:0px 10px;
         color:$gray-7;
+        width: 10px;
     }
     input:disabled{
         background-color: $gray-2;
@@ -28,6 +30,7 @@
         display: flex;
         justify-content: flex-start;
         align-items: center;
+        flex-shrink: 1;
     }
     .bigbear-input-group-append{
         @include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);
@@ -36,5 +39,6 @@
         display: flex;
         justify-content: flex-end;
         align-items: center;
+        flex-shrink: 1;
     }
 }

src/components/List/_style.scss

@@ -7,6 +7,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    flex-wrap: wrap;
 }
 .list-withoveractive{
     &:hover,&:active{

src/components/Menu/index.tsx

@@ -7,11 +7,11 @@ export type IMenuComponent = FC<MenuProps> & {
   MenuItem: FC<MenuItemProps>,
   SubMenu: FC<SubMenuProps>
 }
-const TransMenu = Menu as IMenuComponent
+const TransMenu = Menu as IMenuComponent;
 
-TransMenu.MenuItem = MenuItem
-TransMenu.SubMenu = SubMenu
+TransMenu.MenuItem = MenuItem;
+TransMenu.SubMenu = SubMenu;
 
-export default TransMenu
+export default TransMenu;
 
-export {SubMenu,MenuItem}
+export {SubMenu,MenuItem};

src/components/Select/_style.scss

@@ -0,0 +1,51 @@
+.bigbear-select{
+    display: inline-block;
+    vertical-align: bottom;
+    margin: 10px;
+    width: 120px;
+    position: relative;
+    cursor: pointer;
+    .bigbear-select-display{
+        height: 30px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-left: 10px;
+        padding-right: 10px;
+
+        @include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);
+        .bigbear-select-displaytext{
+            padding-left: 2px;
+            padding-right: 2px;
+            flex-grow: 1;
+            width: 100%;
+            height: 80%;
+            overflow: hidden;
+            @include ringwrapper($white,$neu-whiteshadow1,$neu-whiteshadow2)
+        }
+        .bigbear-select-icon{
+            margin-left: 5px;
+        }
+    }
+    .bigbear-select-options{
+        z-index: 200;
+        position: absolute;
+        left:10px;
+        @include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);
+        >div{
+            padding-left:10px;
+            padding-right: 10px;
+            height: 30px;
+            cursor: pointer;
+            @include neufactory-hover($primary,$neu-blueshadow1,$neu-blueshadow2);
+            &:hover{
+                color:$white;
+            }
+        }
+    }
+    &.disabled{
+        cursor: not-allowed;
+        opacity: .5;
+    }
+}
+

src/components/Select/index.tsx

@@ -0,0 +1,3 @@
+import Select from "./select";
+
+export default Select;

src/components/Select/select.stories.mdx

@@ -0,0 +1,49 @@
+import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
+import  Select  from './select';
+
+
+
+
+
+<Meta title='DISPLAY| Select 选择框' component={Select} />
+
+<br/>
+
+ # Select 选择框
+
+<br/>
+
+## 基本使用
+
+如果长文字显示不全且想显示全的，可以自行设定select的宽或者调整字体大小。
+
+<Preview>
+<Story name='select'>
+    <div style={{height:'200px'}}>
+     <Select data={['options1','options2','options3','options4']} callback={(state)=>console.log(state)}></Select>
+     <Select data={['options1','options2','options3','options4']} icon={null} defaultValue='defaultValue'></Select>
+     <Select data={['options1longlonglonglong','选项2','选项3333','options4选项4']} icon={null} defaultValue='longlonglonglonglonglonglonglong'></Select>
+      <Select data={['options1longlonglonglong','选项2','选项3333','options4选项4']} icon={null} defaultValue='longlonglonglonglonglonglonglong' disabled ></Select>
+    </div>
+</Story>
+</Preview>
+
+## 使用模板
+
+css会将option下的div选中设置样式，如果不想用默认样式，可以不用div做第一级子标签。
+
+使用模板渲染，记得选中时使用setState设置值，之后使用setOpen关闭选框。
+
+<Preview>
+<Story name='selectrenderTemplate'>
+    <div style={{height:'200px'}}>
+     <Select data={['options1','options2','options3','options4']}  
+     renderTemplate={(item,index,setState,setOpen)=><div 
+     onClick={()=>{setState(`${index}:${item}`);setOpen(false)}} key={index}>{index}:{item}</div>}></Select>
+    </div>
+</Story>
+</Preview>
+
+
+
+<Props of={Select} ></Props>

src/components/Select/select.tsx

@@ -0,0 +1,67 @@
+import React, { useState, ReactNode, useRef, PropsWithChildren, useEffect } from 'react';
+import  useClickOutside from '../../hooks/useClickOutside';
+import Icon from '../Icon';
+import Transition from '../Transition/index';
+
+
+interface SelectProps{
+    /** 选框中数据 */
+    data:Array<string>
+    /** 使用模板渲染，setState是设置展示元素的方法 setOpen控制开关*/
+    renderTemplate?:(item:string,index:number,setState:React.Dispatch<React.SetStateAction<string>>,setOpen:React.Dispatch<React.SetStateAction<boolean>>)=>ReactNode;
+    /** 展示右侧的图标 */
+    icon?:ReactNode;
+    /** 选框中初始值 */
+    defaultValue?:string
+    /** 下拉动画时间*/
+    timeout?:number,
+    /**选择的回调值 */
+    callback?:(v:string)=>void;
+    /** 禁用*/
+    disabled?:boolean;
+}
+
+
+
+function Select(props:PropsWithChildren<SelectProps>){
+    const {icon,defaultValue,timeout,renderTemplate,callback,data,disabled}=props;
+    const [state,setState]=useState<string>(defaultValue!)
+    const [open,setOpen]=useState(false)
+    const ref= useRef(null)
+    useClickOutside(ref,()=>setOpen(false))
+    useEffect(()=>{
+        if(callback)callback(state)
+    },[callback, state])
+    return(
+        <div className={`bigbear-select ${disabled?'disabled':''}`} ref={ref}>
+            <div className='bigbear-select-display' onClick={()=>{if(!disabled)setOpen(!open)}} >
+                <div className='bigbear-select-displaytext'>{state}</div>
+                {icon?<div className='bigbear-select-icon'>{icon}</div>:null}
+            </div>
+            <Transition in={open} animation='zoom-in-top' timeout={timeout!} >
+            <div className='bigbear-select-options' >
+                {   
+                    data.map((item,index)=>{
+                        let renderRes = renderTemplate?renderTemplate(item,index,setState,setOpen):<div onClick={()=>{setState(item);setOpen(false)}} key={index}> {item}</div>
+                        return renderRes
+                    })
+                }
+            </div>
+            </Transition>
+
+        </div>
+    )
+}
+
+
+Select.defaultProps={
+    icon:<Icon icon='angle-down'></Icon>,
+    defaultValue:'',
+    timeout:300,
+    data:[],
+    disabled:false
+}
+
+
+
+export default Select;

src/components/VirtualList/virtuallist.example.tsx

@@ -32,9 +32,11 @@ function DoubleVirtual(){
     },[])
     return (
     <div  style={{overflow:'scroll',height:'500px'}} ref={cRef}>
-        <VirtualList itemHeight={39} insightNumber={22} scrollDom={state} scrollbar={34} columnNumber={2} style={{display:'flex',flexWrap:'wrap'}}>
+        <VirtualList itemHeight={44} insightNumber={22} scrollDom={state} scrollbar={14} columnNumber={2} style={{display:'flex',flexWrap:'wrap'}}>
         { new Array(100).fill(1).map((x,y)=>(
-            <div className={'bigbear-list-item'} key={y} style={{height:'34px',width:'48%'}} >{y}</div>
+            <div style={{width:'50%'}} key={y}>
+            <div className={'bigbear-list-item'}   >{y}</div>
+            </div>
         ))}
         </VirtualList>
     </div>

src/components/VirtualList/virtuallist.stories.mdx

@@ -60,9 +60,11 @@ function DoubleVirtual(){
     },[])
     return (
     <div  style={{overflow:'scroll',height:'500px'}} ref={cRef}>
-        <VirtualList itemHeight={39} insightNumber={22} scrollDom={state} scrollbar={34} columnNumber={2} style={{display:'flex',flexWrap:'wrap'}}>
+        <VirtualList itemHeight={44} insightNumber={22} scrollDom={state} scrollbar={14} columnNumber={2} style={{display:'flex',flexWrap:'wrap'}}>
         { new Array(100).fill(1).map((x,y)=>(
-            <div className={'bigbear-list-item'} key={y} style={{height:'34px',width:'48%'}} >{y}</div>
+            <div style={{width:'50%'}} key={y}>
+            <div className={'bigbear-list-item'} >{y}</div>
+            </div>
         ))}
         </VirtualList>
     </div>

src/index.tsx

@@ -13,7 +13,7 @@ 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';
-
+export {default as Select} from './components/Select';
 
 
 

src/styles/index.scss

@@ -48,4 +48,9 @@
 
 //switch
 
-@import "../components/Switch/style";
+@import "../components/Switch/style";
+
+
+//select
+
+@import "../components/Select/style";

src/styles/mixin/_size.scss

@@ -7,6 +7,6 @@
 }
 @mixin absolut-middle() {
     position: absolute;
-    transform: translateY(-50%);
+    transform: translateX(-50%);
     left: 50%;
 }