-
-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(src): change style and add alert message component
- Loading branch information
1 parent
2094eba
commit 21590e7
Showing
37 changed files
with
892 additions
and
118 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| .bigbear-alert{ | ||
| display: flex; | ||
| justify-content: center; | ||
| flex-direction: column; | ||
| position: relative; | ||
| padding:10px; | ||
| >span{ | ||
| &:nth-child(1){ | ||
| font-size: $font-size-lg; | ||
| font-weight: $font-weight-bold; | ||
| } | ||
| svg{ | ||
| margin-right: 10px; | ||
| } | ||
| } | ||
| >button{ | ||
| position:absolute; | ||
| right:0; | ||
| top:0 | ||
| } | ||
| } | ||
| @each $key,$val in $theme-colors{ | ||
| .bigbear-alert-#{$key}{ | ||
| color:#{nth($val,2)}; | ||
| @include neufactory-noactive(nth($val,1),nth($val,3),nth($val,4)); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks'; | ||
| import Alert from './alert'; | ||
| import Icon from '../Icon' | ||
|
|
||
| <Meta title='Component|Alert 提示框' component={Alert} /> | ||
|
|
||
| <br/> | ||
|
|
||
| # Alert 提示框 | ||
| <br/> | ||
|
|
||
| ## 基本用法 | ||
|
|
||
| <Preview> | ||
| <Story name='alert'> | ||
| <Alert title='我是标题'/> | ||
| </Story> | ||
| </Preview> | ||
|
|
||
| ## close 与 type | ||
|
|
||
| <Preview> | ||
| <Story name='alert2'> | ||
| <Alert title='我是标题' close={true} type='light'/> | ||
| </Story> | ||
| <Story name='alert3'> | ||
| <Alert title='我是标题' close={true} type="danger" /> | ||
| </Story> | ||
| </Preview> | ||
|
|
||
| <Preview> | ||
| <Story name='alert6'> | ||
| <Alert title='我是标题' close={true} type='info'/> | ||
| </Story> | ||
| <Story name='alert5'> | ||
| <Alert title='我是标题' close={true} type="warning" className='extra class' /> | ||
| </Story> | ||
| </Preview> | ||
|
|
||
| ## 带图标使用 | ||
|
|
||
| <Preview> | ||
| <Story name='alert7'> | ||
| <Alert title='我是标题' close={true} type='dark' icon={<Icon icon='info-circle' theme='light'></Icon>}/> | ||
| </Story> | ||
| <Story name='alert8'> | ||
| <Alert title='我是标题' close type="secondary" className='extra class' icon={<Icon icon='question-circle' theme='light'></Icon>} /> | ||
| </Story> | ||
| </Preview> | ||
|
|
||
| ## description 描述 | ||
|
|
||
| <Preview> | ||
| <Story name='alert4'> | ||
| <Alert title='我是标题' close={true} type='light' | ||
| description ='我是长文字我是长文字我是长文字 | ||
| 我是长文字我是长文字我是长文字我是长文字我是 | ||
| 长文字我是长文字我是长文字我是长文字我是 | ||
| 长文字我是长文字我是长文 | ||
| 字我是长文字我是长文字我是长文字我是长 | ||
| 文字我是长文字我是长文字我是长文字 | ||
| 我是长文字我是长文字我是长文字我是长文字我是 | ||
| 长文字我是长文字我是长文字我是长文字我是 | ||
| 长文字我是长文字我是长文 | ||
| 字我是长文字我是长文字我是长文字我是长 | ||
| 文字我是长文字我是长文字我是长文字 | ||
| ' | ||
|
|
||
|
|
||
| /> | ||
| </Story> | ||
| </Preview> | ||
|
|
||
| <Props of={Alert} /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,79 @@ | ||
| import React from 'react' | ||
| import React, { FC, useState, useEffect, ReactNode } from 'react' | ||
| import classNames from 'classnames'; | ||
| import Button from '../Button'; | ||
| import Icon from '../Icon'; | ||
| import Transition from '../Transition'; | ||
| import { AnimationName } from '../Transition/transition'; | ||
|
|
||
|
|
||
| const Alert = function(){ | ||
| export interface AlertProps{ | ||
| /** 标题 */ | ||
| title?:string; | ||
| /** 类型*/ | ||
| type?:'primary' | 'default' | 'danger'|'secondary'|'success'|'info'|'light'|'warning'|'dark' | ||
| /**是否有关闭按钮*/ | ||
| close?:boolean; | ||
| /** 内容*/ | ||
| description?:string|null; | ||
| /** 动画方向 */ | ||
| directions?:'left'|'top'|'right'|'bottom'; | ||
| /** 自动关闭延时时间，0表示不自动关闭 */ | ||
| autoclosedelay?:number, | ||
| /** 额外类名 */ | ||
| className?:string, | ||
| /** 图标 */ | ||
| icon?:ReactNode; | ||
| /**启用开场动画 */ | ||
| initAnimate?:boolean, | ||
| /**是否套一层div */ | ||
| wrapper?:boolean; | ||
| } | ||
|
|
||
| export const Alert:FC<AlertProps> = function(props:AlertProps){ | ||
| const {title,type,description,directions,autoclosedelay,className,initAnimate,wrapper}=props | ||
| const classes = classNames('bigbear-alert',`bigbear-alert-${type}`,className?className:'') | ||
| const [state,setState]=useState(!initAnimate) | ||
| useEffect(()=>{ | ||
| if(initAnimate){ | ||
| setState(true) | ||
| } | ||
| if(autoclosedelay){ | ||
| setTimeout(() => { | ||
| setState(false) | ||
| }, autoclosedelay); | ||
| } | ||
| },[autoclosedelay,initAnimate]) | ||
| return( | ||
| <div>xx</div> | ||
| <Transition in={state} animation={`zoom-in-${directions}` as AnimationName} | ||
| timeout={300} wrapper={wrapper} > | ||
| <div className={classes} > | ||
|
|
||
| <span> | ||
| { | ||
| props.icon&&props.icon | ||
| } | ||
| {title}</span> | ||
| { | ||
| description&&<span>{description}</span> | ||
| } | ||
| { | ||
| props.close&&<Button btnType={type} onClick={()=>setState(false)}><Icon icon='times'></Icon></Button> | ||
|
|
||
| } | ||
| </div> | ||
| </Transition> | ||
| ) | ||
| } | ||
|
|
||
| export default Alert | ||
| Alert.defaultProps={ | ||
| title:'', | ||
| type:'default', | ||
| close:false, | ||
| description:null, | ||
| directions:'top', | ||
| autoclosedelay:0, | ||
| initAnimate:false, | ||
| wrapper:false | ||
| } | ||
|
|
||
| export default Alert; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| import Alert from './alert' | ||
| export default Alert; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.