feat(progress): complete progress componenet

.storybook/preview.js

@@ -37,15 +37,16 @@ const loaderFn = () => {
         require('../src/components/Form/form.stories.mdx'),
         require('../src/components/List/list.stories.mdx'),
         require('../src/components/VirtualList/virtuallist.stories.mdx'),
+        require('../src/components/Icon/icon.stories.mdx'),
+        require('../src/components/Pagination/pagination.stories.mdx'),
+        require('../src/components/Table/table.stories.mdx'),
         require('../src/components/Modal/modal.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/Pagination/pagination.stories.mdx'),
-        require('../src/components/Table/table.stories.mdx'),
-        require('../src/components/Transition/transition.stories.mdx'),
+        require('../src/components/Progress/progress.stories.mdx'),
         require('../src/components/Message/message.stories.mdx'),
+        require('../src/components/Transition/transition.stories.mdx'),
         require('../src/hooks/useForm.stories.mdx'),
         require('../src/hooks/useClickOutside.stories.mdx'),
         require('../src/hooks/useDebounce.stories.mdx'),

src/components/Progress/_style.scss

@@ -0,0 +1,52 @@
+.bigbear-progress-wrapper{
+    width: 100%;
+    display:flex;
+    align-items: center;
+    padding:5px;
+    .bigbear-progress-bar{
+        position: relative;
+        width: 100%;
+        @include ringwrapper($white,$neu-whiteshadow1,$neu-whiteshadow2);
+        border-radius: $porgress-radius;
+        padding: 1px;
+        flex:1;
+        .bigbear-progress-inner{
+            background-color: $primary;
+            border-radius: $porgress-radius;
+            transition:all .4s cubic-bezier(.08,.82,.17,1) 0s ;
+            @include neufactory-noactive($primary,$neu-blueshadow1,$neu-blueshadow2);
+            background-image: linear-gradient(to right, $primary, $info);
+            &::before{
+                position: absolute;
+                top:0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                background: $white;
+                border-radius: 10px;
+                content: '';
+                opacity: 0;
+                animation: bigbear-progress-active 2.4s cubic-bezier(.23,1,.32,1) infinite;
+            }
+
+        }
+    }
+    .bigbear-progress-number{
+        min-width: 50px;
+        display: inline-block;
+        margin-left: 10px;
+        text-align: center;
+        padding: 5px;
+        font-weight: $font-weight-bold;
+        @include neu-textshadow($neu-whiteshadow1,$neu-whiteshadow2);
+    }
+}
+
+@keyframes bigbear-progress-active{
+    0% { width: 0px; opacity: 0.1; }
+    20% { width: 0px; opacity: 0.5; } 
+    100% { width: 100%; opacity: 0; }
+}
+
+
+

src/components/Progress/index.tsx

@@ -0,0 +1,3 @@
+import Progress from "./progress";
+
+export default Progress;

src/components/Progress/progress.example.tsx

@@ -0,0 +1,18 @@
+import React, { useState } from "react";
+import Button from "../Button";
+import Progress from "./progress";
+
+
+
+export function ProgressExample(){
+    const [count,setCount]=useState(30)
+    return (
+        <div>
+            <Button onClick={()=>setCount(count+1)}>+1</Button>
+            <Button onClick={()=>setCount(count-1)}>-1</Button>
+            <Button onClick={()=>setCount(count+10)}>+10</Button>
+            <Button onClick={()=>setCount(count-10)}>-10</Button>
+            <Progress count={count}></Progress>
+        </div>
+    )
+}

src/components/Progress/progress.stories.mdx

@@ -0,0 +1,58 @@
+import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
+import  Progress  from './progress';
+import {ProgressExample}from './progress.example';
+
+
+
+<Meta title='REACTION |Progress 进度条' component={Progress} />
+
+<br/>
+
+# Progress 进度条
+<br/>
+
+## 基本使用
+
+
+<Preview>
+    <Story name='progress'>
+        <Progress count={22}></Progress>
+    </Story>
+</Preview>
+
+## 可操作
+
+```tsx
+export function ProgressExample(){
+    const [count,setCount]=useState(30)
+    return (
+        <div>
+            <Button onClick={()=>setCount(count+1)}>+1</Button>
+            <Button onClick={()=>setCount(count-1)}>-1</Button>
+            <Button onClick={()=>setCount(count+10)}>+10</Button>
+            <Button onClick={()=>setCount(count-10)}>-10</Button>
+            <Progress count={count}></Progress>
+        </div>
+    )
+}
+```
+
+<Preview>
+    <Story name='progress dynamic'>
+        <ProgressExample count={22}></ProgressExample>
+    </Story>
+</Preview>
+
+## 不要文字
+
+
+<Preview>
+    <Story name='progress notext'>
+        <Progress count={99} countNumber={false}></Progress>
+    </Story>
+</Preview>
+
+
+## 属性详情
+
+<Props of={Progress} />

src/components/Progress/progress.tsx

@@ -1,14 +1,44 @@
-import React from 'react';
+import React, { useState, useMemo } from 'react';
 
 
+interface ProgressType{
+    /** 传入数字*/
+    count:number,
+      /** 是否要末尾计数文本*/
+    countNumber?:boolean;
+      /** 进度条高度*/
+    height?:number;
+}
 
+function Progress(props:ProgressType){
+    const {count,countNumber,height}=props;
+    const [state,setState]=useState(0)
+    useMemo(()=>{
+        if(count<0){
+            setState(0)
+        }else if(count>100){
+            setState(100)
+        }else{
+            setState(count)
+        }
+    },[count])
 
-function Progress(){
     return(
-        <div></div>
+        <div className='bigbear-progress-wrapper'>
+
+            <div className='bigbear-progress-bar'>
+                <div className='bigbear-progress-inner' style={{width:`${state}%`,height:`${height?height:8}px`}}>
+                </div>
+            </div>
+            {countNumber&&<div className="bigbear-progress-number" style={{lineHeight:`${height?height:8}px`}}>{state}%</div>}
+        </div>
     )
 }
 
+Progress.defaultProps={
+    countNumber:true
+}
+
 
 
 export default Progress;

src/index.tsx

@@ -21,6 +21,7 @@ export { default as Pagination } from "./components/Pagination";
 export { default as Carousel } from "./components/Carousel";
 export { default as Table } from "./components/Table";
 export {default as Modal} from "./components/Modal";
+export {default as Progress} from './components/Progress';
 
 export { default as useClickOutside } from "./hooks/useClickOutside";
 export { default as useDebounce } from "./hooks/useDebounce";

src/styles/_variables.scss

@@ -319,4 +319,8 @@ $switch-border-radius-sm:$switch-border-radius-default*0.6;
 
 
 //modal
-$modal-padding:8px !default;
+$modal-padding:8px !default;
+
+//progress
+$progress-number-height:30px;
+$porgress-radius:100px;

src/styles/index.scss

@@ -38,7 +38,6 @@
 @import "../components/Badge/style";
 
 //switch
-
 @import "../components/Switch/style";
 
 //select
@@ -68,3 +67,5 @@
 //modal
 @import "../components/Modal/style";
 
+//progress
+@import "../components/Progress/style";

src/styles/mixin/_index.scss

@@ -112,11 +112,13 @@
     inset (-$btn-neu-normal)  (-$btn-neu-normal)  $btn-neu-normal*2 $shadow2
 }
 
-
-
 @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;
 }
+
+@mixin  neu-textshadow( $shadow1,$shadow2) {
+    text-shadow: 1px 1px 4px $shadow1, -1px -1px 4px $shadow2;
+}