feat: 组件可以传递color属性

Summer-andy · Nov 15, 2019 · be2de89 · be2de89
1 parent e578c11
commit be2de89
Show file tree

Hide file tree

Showing 12 changed files with 118 additions and 130 deletions.
diff --git a/README.md b/README.md
@@ -22,6 +22,19 @@ import { BoxLoading } from 'react-loadingg'
 <BoxLoading />
 ```
 
+#### 🎉 组件API
+
+| 组件   | color| speed | style | 
+|  ----  | ----  | ---- |---- |
+| BlockLoading  | ✅ | ✅  | ✅ |
+| BoxLoading  | ✅ | 🚧  | ✅ |
+| CircleLoading  | ✅ | 🚧  | ✅ |
+| CommonLoading  | ✅ |  🚧 | ✅ |
+| LoopCircleLoading  |✅  |  🚧 | ✅ |
+| TransverseLoading  | ✅ |  🚧 | ✅ |
+| WaveLoading  |  ✅| 🚧  |  ✅ |
+| CircleToBlockLoading  | ✅ | 🚧 | ✅ |
+
 #### ❤️  组件列表
 
 - [x]  BlockLoading 

diff --git a/src/components/BoxLoading/index.js b/src/components/BoxLoading/index.js
@@ -4,12 +4,6 @@ import styled from 'styled-components';
 const LoadContainer = styled.div`
     width: 50px;
     height: 50px;
-    margin: auto;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
     &:before {
       content: '';
       width: 50px;
@@ -26,7 +20,7 @@ const LoadContainer = styled.div`
       content: '';
       width: 50px;
       height: 50px;
-      background: #00adb5;
+      background: ${props => props.color || '#00adb5'};
       animation: ${shadow} 0.5s linear infinite;
       position: absolute;
       top: 0;
@@ -35,9 +29,9 @@ const LoadContainer = styled.div`
     }
 `;
 
-const BoxLoading = ({ style }) => {
+const BoxLoading = ({ style, color }) => {
   return (
-    <LoadContainer></LoadContainer>
+    <LoadContainer style={style} color={color}></LoadContainer>
   );
 };
 

diff --git a/src/components/CircleLoading/index.js b/src/components/CircleLoading/index.js
@@ -30,7 +30,7 @@ const LoadingContainer = styled.div`
     content: '';
     width: 70px;
     height: 70px;
-    background-color: #00adb5;
+    background-color: ${props => props.color || '#00adb5'};
     position: absolute;
     left: 50%;
     bottom: 50%;
@@ -54,9 +54,9 @@ const LoadingContainer = styled.div`
   }
 `;
 
-const CircleLoading = ({ style }) => {
+const CircleLoading = ({ style, color }) => {
   return (
-    <LoadingContainer style={style} />
+    <LoadingContainer style={style} color={color} />
   );
 };
 

diff --git a/src/components/CircleToBlockLoading/index.js b/src/components/CircleToBlockLoading/index.js
@@ -16,12 +16,6 @@ const changeSharp = keyframes`
 const LoadContainer = styled.div`
   height: 100px;
   width: 100px;
-  margin: auto;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
   display: flex;
   justify-content: space-between;
   flex-wrap: nowrap;
@@ -31,7 +25,7 @@ const LoadContainer = styled.div`
 const Item = styled.div`
     height: 20px;
     width: 20px;
-    background-color: #00adb5;
+    background-color:  ${props => props.color || '#00adb5' };
     position: absolute;
     margin: auto;
     border-radius: 2px;
@@ -51,12 +45,12 @@ const ItemThree = styled(Item)`
  animation-delay:  calc(3s * 4 / -1.5);
 `
 
-const CircleToBlockLoading = ({ style }) => {
+const CircleToBlockLoading = ({ style, color }) => {
   return (
     <LoadContainer style={style}>
-      <ItemFirst />
-      <ItemTwo />
-      <ItemThree />
+      <ItemFirst color={color} />
+      <ItemTwo color={color}  />
+      <ItemThree color={color}  />
     </LoadContainer>
   );
 };

diff --git a/src/components/CommonLoading/index.js b/src/components/CommonLoading/index.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import './style.scss';
-const CommonLoading = ({ style }) => {
+const CommonLoading = ({ style, color }) => {
   return (
       <svg id="load" x="0px" y="0px" viewBox="0 0 150 150" style={style}>
-        <circle id="loading-inner" cx="75" cy="75" r="60" />
+        <circle id="loading-inner" cx="75" cy="75" r="60" stroke={color || '#00adb5'}  />
       </svg>
   );
 };

diff --git a/src/components/CommonLoading/style.scss b/src/components/CommonLoading/style.scss
@@ -1,10 +1,4 @@
 #load {
-  margin: auto;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
   width: 75px;
   animation: loading 3s linear infinite;
   #loading-inner {
@@ -16,7 +10,6 @@
       linecap: round;
     }
     animation: loading-circle 2s linear infinite;
-    stroke: #00adb5;
     fill: transparent;
   }
 }

diff --git a/src/components/LoopCircleLoading/index.js b/src/components/LoopCircleLoading/index.js
@@ -15,12 +15,7 @@ const bouncedelay = keyframes`
 `;
 
 const LoadContainer = styled.div`
-  margin: auto;
   position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
   width: 48px;
   height: 48px;
 `;
@@ -34,7 +29,7 @@ const container = styled.div`
 const circle = styled.div`
   width: 12px;
   height: 12px;
-  background-color: #00adb5;
+  background-color: ${props => props.color || '#00adb5'} ;
   border-radius: 100%;
   position: absolute;
   animation: ${bouncedelay} 1.2s infinite ease-in-out;
@@ -122,26 +117,26 @@ const CircleFour2 = styled(circle)`
   bottom: 0;
 `;
 
-const LoopCircleLoading = ({ style }) => {
+const LoopCircleLoading = ({ style, color }) => {
   return (
     <LoadContainer style={style}>
       <ContainerFirst>
-        <CircleFirst />
-        <CircleTwo />
-        <CircleThree />
-        <CircleFour />
+        <CircleFirst color={color} />
+        <CircleTwo color={color} />
+        <CircleThree color={color} />
+        <CircleFour color={color} />
       </ContainerFirst>
       <ContainerTwo>
-        <CircleFirst1 />
-        <CircleTwo1 />
-        <CircleThree1 />
-        <CircleFour1 />
+        <CircleFirst1 color={color} />
+        <CircleTwo1 color={color} />
+        <CircleThree1 color={color} />
+        <CircleFour1 color={color} />
       </ContainerTwo>
       <ContainerThree>
-        <CircleFirst2 />
-        <CircleTwo2 />
-        <CircleThree2 />
-        <CircleFour2 />
+        <CircleFirst2 color={color} />
+        <CircleTwo2 color={color} />
+        <CircleThree2 color={color} />
+        <CircleFour2 color={color} />
       </ContainerThree>
     </LoadContainer>
   );

diff --git a/src/components/TransverseLoading/index.js b/src/components/TransverseLoading/index.js
@@ -13,15 +13,14 @@ const bouncedelay = keyframes`
 `
 
 const LoadingContainer = styled.div`
-  margin: 50px auto;
   width: 150px;
   text-align: center;
 `;
 
 const load = styled.div`
   width: 20px;
   height: 20px;
-  background-color: #00adb5;
+  background-color: ${props => props.color || '#00adb5;'};
   border-radius: 100%;
   display: inline-block;
   animation: ${bouncedelay} 1.4s infinite ease-in-out;
@@ -41,12 +40,12 @@ const LoadThree = styled(load)`
 
 `
 
-const TransverseLoading = ({ style }) => {
+const TransverseLoading = ({ style, color }) => {
   return (
     <LoadingContainer style={style}>
-        <LoadFirst />
-        <LoadTwo />
-        <LoadThree />
+        <LoadFirst color={color} />
+        <LoadTwo color={color} />
+        <LoadThree  color={color}/>
     </LoadingContainer>
   );
 };

diff --git a/src/components/WaveLoading/index.js b/src/components/WaveLoading/index.js
@@ -20,7 +20,7 @@ const LoadContainer = styled.div`
 `;
 
 const box = styled.div`
-  background-color: #00adb5;
+  background-color: ${props => props.color || '#00adb5'};
   height: 100%;
   width: 6px;
   display: inline-block;
@@ -48,14 +48,14 @@ const BoxLoadingFive = styled(box)`
   animation-delay: -0.8s;
 `;
 
-const WaveLoading = ({ style }) => {
+const WaveLoading = ({ style, color }) => {
   return (
     <LoadContainer style={style}>
-      <BoxLoadingFirst />
-      <BoxLoadingTwo />
-      <BoxLoadingThree />
-      <BoxLoadingFour />
-      <BoxLoadingFive />
+      <BoxLoadingFirst color={color} />
+      <BoxLoadingTwo color={color} />
+      <BoxLoadingThree color={color} />
+      <BoxLoadingFour color={color} />
+      <BoxLoadingFive color={color} />
     </LoadContainer>
   );
 };

diff --git a/src/stories/Demo.stories.js b/src/stories/Demo.stories.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import DemoContainer from './compoment/DemoContainer';
+storiesOf('Demo', module)
+  .addDecorator(withKnobs)
+  .add(
+    'Demo',
+    () => {
+      return (
+        <DemoContainer />
+      );
+    }
+  );
diff --git a/src/stories/compoment/DemoContainer.js b/src/stories/compoment/DemoContainer.js
@@ -10,6 +10,16 @@ import {
 } from '~/components';
 import './style.scss';
 const DemoContainer = () => {
+
+  const style = {
+    margin: 'auto',
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  }
+
   return (
     <div className="demo-container">
       <div className="top-container"></div>
@@ -20,62 +30,57 @@ const DemoContainer = () => {
       <div className="title-area">
         <h1>THE LOADING COMPONENT BASE ON REACT</h1>
         <p>
-          Our goal is to make waiting more interesting。We only focus on loading。Welcome to our
-          team。
+          Our goal is to make waiting more interesting.We only focus on loading.Welcome to our
+          team.
           <br />
           Completely open source and MIT licensed.
         </p>
       </div>
-      <div className="author-area">
-        <div>
-          <img alt="theme" src={require('./theme.jpeg')} />
-          <div>
-            <p>Andy&Rabbit</p>
-          </div>
-        </div>
-      </div>
       <div className="component">
         <div className="item">
-          <CommonLoading />
+          <CommonLoading style={style} />
+        </div>
+        <div className="item">
+          <WaveLoading style={style} />
         </div>
         <div className="item">
-          <WaveLoading style={{ margin: '28px auto' }} />
+          <BlockLoading style={style} />
         </div>
         <div className="item">
-          <BlockLoading />
+          <BoxLoading  style={style} />
         </div>
         <div className="item">
-          <BoxLoading style={{ margin: '25px auto' }} />
+          <CircleToBlockLoading style={style} />
         </div>
         <div className="item">
-          <CircleToBlockLoading />
+          <LoopCircleLoading style={style} />
         </div>
         <div className="item">
-          <LoopCircleLoading />
+          <TransverseLoading style={{...style, marginTop: 60}} />
         </div>
         <div className="item">
-          <TransverseLoading />
+          <BoxLoading style={style} />
         </div>
         <div className="item">
-          <BoxLoading style={{ margin: '25px auto' }} />
+          <CommonLoading style={style} />
         </div>
         <div className="item">
-          <CommonLoading />
+          <LoopCircleLoading style={style} />
         </div>
         <div className="item">
-          <LoopCircleLoading />
+          <TransverseLoading style={{...style, marginTop: 60}} />
         </div>
         <div className="item">
-          <TransverseLoading />
+          <WaveLoading style={style} />
         </div>
         <div className="item">
-          <WaveLoading style={{ margin: '28px auto' }}  />
+          <CommonLoading style={style} />
         </div>
         <div className="item">
-          <CommonLoading />
+          <BlockLoading style={style} />
         </div>
         <div className="item">
-          <BlockLoading />
+          <CircleToBlockLoading style={style} />
         </div>
       </div>
     </div>