feat(avatar&list): complete avatar and list ; change menu style ; fix…

… alert bug ;
yehuozhili · May 30, 2020 · 407cc83 · 407cc83
1 parent d0519b9
commit 407cc83
Show file tree

Hide file tree

Showing 36 changed files with 556 additions and 48 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -22,16 +22,20 @@ addParameters({
 const loaderFn = () => {
     return [
         require('../src/stories/Welcome.stories.mdx'),
+        require('../src/components/Avatar/avatar.stories.mdx'),
         require('../src/components/Button/button.stories.mdx'),
         require('../src/components/Input/input.stories.mdx'),
         require('../src/components/AutoComplete/autocomplete.stories.mdx'),
         require('../src/components/Alert/alert.stories.mdx'),
+        require('../src/components/List/list.stories.mdx'),
         require('../src/components/Menu/menu.stories.mdx'),
         require('../src/components/Menu/menuitem.stories.mdx'),
         require('../src/components/Menu/submenu.stories.mdx'),
         require('../src/components/Icon/icon.stories.mdx'),
         require('../src/components/Transition/transition.stories.mdx'),
         require('../src/components/Message/message.stories.mdx'),
+        require('../src/hooks/useClickOutside.stories.mdx'),
+        require('../src/hooks/useDebounce.stories.mdx'),
     ]
 }
 configure(loaderFn, module);
diff --git a/src/components/Alert/alert.stories.mdx b/src/components/Alert/alert.stories.mdx
@@ -2,7 +2,7 @@ import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
 import Alert from './alert';
 import Icon from '../Icon'
 
-<Meta title='Component|Alert 提示框' component={Alert} />
+<Meta title='Display|Alert 提示框' component={Alert} />
 
 <br/>
 
@@ -71,4 +71,6 @@ import Icon from '../Icon'
   </Story>
 </Preview>
 
+## 属性详情
+
 <Props of={Alert} />
diff --git a/src/components/Alert/alert.tsx b/src/components/Alert/alert.tsx
@@ -37,11 +37,13 @@ export const Alert:FC<AlertProps> = function(props:AlertProps){
         if(initAnimate){
             setState(true)
         }
+        let handler:number;
         if(autoclosedelay){
-            setTimeout(() => {
+            handler=window.setTimeout(() => {
                 setState(false)
             }, autoclosedelay);
         }
+        return ()=>clearTimeout(handler)
     },[autoclosedelay,initAnimate])
     return(
         <Transition in={state} animation={`zoom-in-${directions}` as AnimationName}

diff --git a/src/components/AutoComplete/_style.scss b/src/components/AutoComplete/_style.scss
@@ -11,16 +11,20 @@
             margin:5px;
             cursor: pointer;
             @include neufactory($white,$neu-whiteshadow1,$neu-whiteshadow2);
+            @include neufactory-hover($info,$neu-infoshadow1,$neu-infoshadow2);
+            &:hover{
+                color:white;
+            }
         }
         .autocomplete-item-highlight{
             @include neufactory($primary,$neu-blueshadow1,$neu-blueshadow2);
+            @include neufactory-hover($primary,$neu-blueshadow1,$neu-blueshadow2);
             color:white;
         }
     }
     .bigbear-autocomplete-spin{
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
+       @include absolut-middle();
+        z-index: 10;
     }
 
 }
diff --git a/src/components/AutoComplete/autocomplete.stories.mdx b/src/components/AutoComplete/autocomplete.stories.mdx
@@ -4,7 +4,7 @@ import AutoComplete from './autocomplete';
 import AutocompleteExample,{ToUseTemplete,AsyncTest} from './autocomplete.example';
 
 
-<Meta title='Component|AutoComplete 自动补全' component={AutoComplete} />
+<Meta title='REACTION|AutoComplete 自动补全' component={AutoComplete} />
 
 <br/>
 
@@ -92,4 +92,8 @@ export const AsyncTest=()=>{
 </Preview>
 
 
+<br/>
+
+## 属性详情 
+
 <Props of={AutoComplete} />
diff --git a/src/components/AutoComplete/autocomplete.tsx b/src/components/AutoComplete/autocomplete.tsx
@@ -11,7 +11,7 @@ interface DataSourceObject{
 export type DataSourceType<T={}>=T&DataSourceObject
 
 
-interface AutoCompleteType extends InputProps{
+export interface AutoCompleteType extends InputProps{
     /**筛选函数  */
     renderFilter:(keyword:string)=>DataSourceType[]|Promise<DataSourceType[]>;
     /**下拉菜单选择后的回调 */

diff --git a/src/components/AutoComplete/index.tsx b/src/components/AutoComplete/index.tsx
@@ -0,0 +1,2 @@
+import AutoComplete from './autocomplete'
+export default AutoComplete;
diff --git a/src/components/Avatar/_style.scss b/src/components/Avatar/_style.scss
@@ -0,0 +1,62 @@
+.bigbear-avatar{
+    overflow: hidden;
+    >img{
+        @include square(100%);
+        vertical-align: top;
+    }
+    >svg.bigbear-icon{
+        @include square(100%);
+        vertical-align: top;
+    }
+
+    >div{
+        @include square(100%);
+        vertical-align: top;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+
+@each $key,$val in $theme-colors{
+    .bigbear-avatar-type-#{$key}{
+        color:#{nth($val,2)};
+        display: inline-block;
+        @include square(100%);
+        @include neufactory-noactive(nth($val,1),nth($val,3),nth($val,4));
+    }
+}
+
+@each $key,$val in $theme-colors{
+    .bigbear-avatar-wrapper-#{$key}{
+        display: inline-block;
+        @include ringwrapper(nth($val,1),nth($val,3),nth($val,4));
+    }
+}
+
+.bigbear-avatar-size-default{
+    display: inline-block;
+    @include square($avatar-size-default);
+    padding:$avatar-padding-default;
+    overflow: hidden;
+}
+.bigbear-avatar-size-lg{
+    padding:$avatar-padding-lg;
+    font-size: $avatar-fontsize-lg;
+    display: inline-block;
+    @include square($avatar-size-lg);
+    overflow: hidden;
+}
+.bigbear-avatar-size-sm{  
+    font-size:  $avatar-fontsize-sm;
+    padding:$avatar-padding-sm;
+    display: inline-block;
+    @include square($avatar-size-sm);
+    overflow: hidden;
+}
+.isround{
+    border-radius: 50%;
+    >.bigbear-avatar{
+        border-radius: 50%;
+    }
+}
diff --git a/src/components/Avatar/avatar.stories.mdx b/src/components/Avatar/avatar.stories.mdx
@@ -0,0 +1,90 @@
+import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
+import  Icon  from '../Icon';
+import Avatar from './avatar'
+
+<Meta title='DISPLAY|Avatar 头像' component={Avatar} />
+
+<br/>
+
+# Avatar 头像
+<br/>
+
+如果想使用文字，需要用div包裹一下。
+Icon如果使用别的地方的，可能需要稍微自行调一下样式。
+
+## 类型 type
+
+<Preview>
+<Story name='Avatar'> 
+    <div>
+ <Avatar><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+ <Avatar type='primary'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+    <Avatar type='danger'><div>User</div></Avatar>
+    <Avatar type='info'><div>U</div></Avatar>
+   <Avatar type='success'><Icon icon="user" theme='warning'   /></Avatar>
+   <Avatar type='secondary'><Icon icon="coffee"  /></Avatar>
+    <Avatar type='light'><Icon icon="spinner" spin theme='danger' /></Avatar>
+    <Avatar type='warning'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+<Avatar type='dark'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+</div>
+</Story>
+</Preview>
+
+## 圆形 round
+
+<Preview>
+<Story name='Avatarround'> 
+    <div>
+ <Avatar round={true} ><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+ <Avatar round={true} type='primary'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+    <Avatar round={true}  type='danger'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+    <Avatar round={true} type='info'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+   <Avatar  round={true} type='success'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+   <Avatar round={true} type='secondary'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+    <Avatar round={true} type='light'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+    <Avatar round={true} type='warning'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+<Avatar round={true} type='dark'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+</div>
+</Story>
+</Preview>
+
+## 大小 size 
+
+
+<Preview>
+<Story name='Avatarsizelg'> 
+    <div>
+    <Avatar size='lg'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+    <Avatar size='lg' type='primary'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+    <Avatar size='lg' type='danger'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+    <Avatar size='lg' type='info'><div>U</div></Avatar>
+   <Avatar size='lg' type='success'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+   <Avatar size='lg' type='secondary'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+    <Avatar size='lg' type='light'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+    <Avatar size='lg' type='warning'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+    <Avatar size='lg' type='dark'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+</div>
+</Story>
+</Preview>
+
+
+<Preview>
+<Story name='Avatarsizesm'> 
+    <div>
+    <Avatar size='sm'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+    <Avatar size='sm' type='primary'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+    <Avatar size='sm' type='danger'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+    <Avatar size='sm' type='info'><div>U</div></Avatar>
+   <Avatar size='sm' type='success'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+   <Avatar size='sm' type='secondary'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+    <Avatar size='sm' type='light'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+    <Avatar size='sm' type='warning'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+    <Avatar size='sm' type='dark'><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/></Avatar>
+</div>
+</Story>
+</Preview>
+
+
+## 属性详情
+
+<Props of={Avatar}/>
diff --git a/src/components/Avatar/avatar.tsx b/src/components/Avatar/avatar.tsx
@@ -0,0 +1,32 @@
+import React, { FC } from 'react';
+import classNames from 'classnames'
+
+
+interface AvatarProps{
+    /** 大小*/
+    size?:'lg'|'sm'|'default'
+    /** 圆形 */
+    round?:boolean;
+    /** 颜色 */
+    type?:"primary" | "default" | "danger" | "secondary" | "success" | "info" | "light" | "warning" | "dark";
+}
+
+export const Avatar:FC<AvatarProps> = (props)=>{
+    const {size,round,type}=props;
+    const cnames= classNames('bigbear-avatar',`bigbear-avatar-type-${type}`)
+    const wrappernames = classNames(`bigbear-avatar-wrapper-${type} bigbear-avatar-size-${size}`,{
+        'isround':round
+    })
+    return(
+        <span className={wrappernames}>
+            <span className={cnames}>{props.children?props.children:null}</span>
+        </span>
+    )
+}
+Avatar.defaultProps={
+    size:'default',
+    round:false,
+    type:'default'
+}
+
+export default Avatar;
diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx
@@ -0,0 +1,3 @@
+import Avatar from "./avatar";
+
+export default Avatar;
diff --git a/src/components/Button/button.stories.mdx b/src/components/Button/button.stories.mdx
@@ -2,7 +2,7 @@ import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
 import  Button  from './button';
 import NeuWdown,{NeuWclick,Ringclick} from './button.example'
 
-<Meta title='Component|Button 按钮' component={Button} />
+<Meta title='DISPLAY |Button 按钮' component={Button} />
 
 <br/>
 
@@ -69,7 +69,6 @@ import NeuWdown,{NeuWclick,Ringclick} from './button.example'
 
 ## 按钮大小 size
 
-#### 大号 lg
 
 <Preview>
   <Story name='default-lg' >
@@ -102,7 +101,6 @@ import NeuWdown,{NeuWclick,Ringclick} from './button.example'
   </Story>
 </Preview>
 
-#### 小号 sm
 
 <Preview>
   <Story name='default-sm' >
@@ -260,7 +258,7 @@ export function Ringclick(props:PropsWithChildren<{callback:()=>void,style?:CSSP
 
 <br/>
 
-## 属性详情 Props
+## 属性详情 
 
 <Props of={Button} />
 

diff --git a/src/components/Icon/icon.stories.mdx b/src/components/Icon/icon.stories.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
 import  Icon  from './icon';
 
-<Meta title='Component|Icon 图标' component={Icon} />
+<Meta title='DISPLAY|Icon 图标' component={Icon} />
 
 <br/>
 
@@ -13,7 +13,16 @@ https://fontawesome.com/icons?d=gallery&s=solid&m=free
 
 <br/>
 
-## 主题颜色 theme
+## 基础使用
+
+<Preview>
+  <Story name='base' >
+        <Icon icon='search' ></Icon>
+  </Story>
+</Preview>
+
+
+## 主题颜色与大小
 <br/>
 
 <Preview>
@@ -50,6 +59,6 @@ library.add(...some icons)
 https://fontawesome.com/how-to-use/javascript-api/other/tree-shaking
 
 
-## 属性详情 Props
+## 属性详情
 
 <Props of={Icon} />
diff --git a/src/components/Input/_style.scss b/src/components/Input/_style.scss
@@ -1,7 +1,7 @@
 .bigbear-input-wrapper{
     display: flex;
     align-items: center;
-    margin:20px;
+    margin:$input-margin;
     box-shadow: $input-box-shadow;
     overflow: hidden;
     position: relative;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import AutoComplete from './autocomplete'
		export default AutoComplete;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Avatar from "./avatar";

		export default Avatar;