fix: 修复完善组件

Summer-andy · Dec 18, 2019 · 53cea54 · 53cea54
1 parent 49a82b0
commit 53cea54
Show file tree

Hide file tree

Showing 10 changed files with 190 additions and 157 deletions.
diff --git a/README-zh-Hans.md b/README-zh-Hans.md
@@ -55,9 +55,9 @@ import { BoxLoading } from 'react-loadingg';
 | BlockLoading         | 🚧    | ✅    | ✅   | ✅    | 
 | BlockReserveLoading  | ✅    | ✅    | ✅   | ✅    | 
 | BoxLoading           | ✅    | ✅    | ✅   | ✅    | 
-| CircleLoading        | ✅    | ✅    | 🚧   | ✅    | 
+| CircleLoading        | ✅    | ✅    | ✅   | ✅    | 
 | CircleToBlockLoading | ✅    | ✅    | ✅   | ✅    | 
-| CommonLoading        | ✅    | 🚧    | 🚧   | ✅    | 
+| CommonLoading        | ✅    | ✅    | ✅   | ✅    | 
 | DisappearedLoading   | ✅    | ✅    | ✅   | ✅    | 
 | LoopCircleLoading    | ✅    | ✅    | ✅   | ✅    | 
 | NineCellLoading      | ✅    | ✅    | ✅   | ✅    | 
@@ -77,7 +77,7 @@ import { BoxLoading } from 'react-loadingg';
 | RollBoxLoading       | ✅    | ✅    | ✅   | ✅    |
 | RectGraduallyShowLoading   | ✅    | ✅    | ✅   | ✅    |
 | PointSpreadLoading   | ✅    | ✅    | ✅   | ✅    |
-| ThreeHorseLoading   | ✅    | ✅    | ✅   | ✅    |
+| ThreeHorseLoading   | ✅    | ✅    | 🚧   | ✅    |
 | PassThrouthLoading   | ✅    | ✅    | ✅   | ✅    |
 #### ⌨️ 组件开发
 

diff --git a/README.md b/README.md
@@ -57,9 +57,9 @@ import { BoxLoading } from 'react-loadingg';
 | BlockLoading         | 🚧    | ✅    | ✅   | ✅    | 
 | BlockReserveLoading  | ✅    | ✅    | ✅   | ✅    | 
 | BoxLoading           | ✅    | ✅    | ✅   | ✅    | 
-| CircleLoading        | ✅    | ✅    | 🚧   | ✅    | 
+| CircleLoading        | ✅    | ✅    | ✅   | ✅    | 
 | CircleToBlockLoading | ✅    | ✅    | ✅   | ✅    | 
-| CommonLoading        | ✅    | 🚧    | 🚧   | ✅    | 
+| CommonLoading        | ✅    | ✅    | ✅   | ✅    | 
 | DisappearedLoading   | ✅    | ✅    | ✅   | ✅    | 
 | LoopCircleLoading    | ✅    | ✅    | ✅   | ✅    | 
 | NineCellLoading      | ✅    | ✅    | ✅   | ✅    | 
@@ -79,7 +79,7 @@ import { BoxLoading } from 'react-loadingg';
 | RollBoxLoading       | ✅    | ✅    | ✅   | ✅    |
 | RectGraduallyShowLoading   | ✅    | ✅    | ✅   | ✅    |
 | PointSpreadLoading   | ✅    | ✅    | ✅   | ✅    |
-| ThreeHorseLoading   | ✅    | ✅    | ✅   | ✅    |
+| ThreeHorseLoading   | ✅    | ✅    | 🚧   | ✅    |
 | PassThrouthLoading   | ✅    | ✅    | ✅   | ✅    |
 #### ⌨️ Participate in development
 

diff --git a/src/components/CircleLoading/index.js b/src/components/CircleLoading/index.js
@@ -1,56 +1,57 @@
 import React from 'react';
 import styled, { keyframes } from 'styled-components';
-import { commonStyle } from '../utils/style';
+import { commonStyle , sizeItem} from '../utils/style';
 
-const animate = keyframes`
-  0% {
-    transform: rotate(0);
+const load = keyframes`
+  0%{
+    opacity: 1;
+    transform: scale(1);
   }
-  50% {
-    transform: rotate(180deg);
+  100%{
+      opacity: 0;
+      transform: rotate(90deg) scale(.3);
   }
-  100% {
-    transform: rotate(360deg);
-  }
-`
+`;
 
 const LoadingContainer = styled.div`
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  overflow: hidden;
-  background-color: rgba(0, 169, 178, 0.2);
-  &::before {
-    content: '';
-    width: 25px;
-    height: 25px;
-    background-color: ${props => props.color || '#00adb5'};
-    position: absolute;
-    left: 50%;
-    bottom: 50%;
-    z-index: 1;
-    transform-origin: left bottom;
-    animation: ${animate} ${props => props.speed || 1}s infinite linear;
-  }
-  &::after {
-    content: '';
-    width: 40px;
-    height: 40px;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-    background-color:  ${props => props.inColor || '#fff'};
-    z-index: 2;
-    border-radius: 50%;
-  }
+  width: 100px;
+  height: 100px;
+`;
+
+const ItemSpan = styled.span`
+  display: inline-block;
+  height: ${props => sizeItem[props.size] || sizeItem['default']};
+  width: ${props => sizeItem[props.size]|| sizeItem['default']};
+  margin-top: 50%;
+  margin-right: 5px;
+  background: ${props => props.color || '#00adb5'};
+  transform-origin: right bottom;
+  animation: ${load} ${props => props.speed || 2}s ease infinite;
+`;
+
+const ItemSpan1 = styled(ItemSpan)`
+  animation-delay: 0.2s;
+`;
+
+const ItemSpan2 = styled(ItemSpan)`
+  animation-delay: 0.4s;
+`;
+
+const ItemSpan3 = styled(ItemSpan)`
+  animation-delay: 0.6s;
+`;
+const ItemSpan4 = styled(ItemSpan)`
+  animation-delay: 0.8s;
 `;
 
-const CircleLoading = ({ style = commonStyle, color, inColor, speed }) => {
+const CircleLoading = ({ style = commonStyle, color, speed, size = 'default' }) => {
   return (
-    <LoadingContainer style={style} color={color} inColor={inColor} speed={speed} />
+    <LoadingContainer style={style}>
+      <ItemSpan1 color={color} speed={speed} size={size} />
+      <ItemSpan2 color={color} speed={speed} size={size} />
+      <ItemSpan3 color={color} speed={speed} size={size} />
+      <ItemSpan4 color={color} speed={speed} size={size} />
+    </LoadingContainer>
   );
 };
 

diff --git a/src/components/CommonLoading/index.js b/src/components/CommonLoading/index.js
@@ -1,13 +1,89 @@
 import React from 'react';
-import './style.scss';
-import { commonStyle } from '../utils/style';
-const CommonLoading = ({ style = commonStyle, color }) => {
+import styled, { keyframes } from 'styled-components';
+import { commonStyle, sizeItem } from '../utils/style';
+
+const load = keyframes`
+       0%{
+            transform: rotate(0deg);
+        }
+        10%{
+            transform: rotate(45deg);
+        }
+        50%{
+            opacity: 1;
+            transform: rotate(160deg);
+        }
+        62%{
+            opacity: 0;
+        }
+        65%{
+            opacity: 0;
+            transform: rotate(200deg);
+        }
+        90%{
+            transform: rotate(340deg);
+        }
+        100%{
+            transform: rotate(360deg);
+        }
+`;
+
+const Container = styled.div`
+  width: 50px;
+  height: 50px;
+`;
+
+const ItemDiv = styled.div`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  animation: ${load} ${props => props.speed || 2}s linear infinite;
+`;
+
+const ItemDiv1 = styled(ItemDiv)`
+  animation-delay: 0.2s;
+`;
+
+const ItemDiv2 = styled(ItemDiv)`
+  animation-delay: 0.4s;
+`;
+
+const ItemDiv3 = styled(ItemDiv)`
+  animation-delay: 0.6s;
+`;
+
+const ItemDiv4 = styled(ItemDiv)`
+  animation-delay: 0.8s;
+`;
+
+const ItemSpan = styled.span`
+  display: inline-block;
+  height: ${props => sizeItem[props.size] || sizeItem['default']};
+  width: ${props => sizeItem[props.size] || sizeItem['default']};
+  border-radius: 50%;
+  background: ${props => props.color || '#00adb5'};
+  position: absolute;
+  left: 50%;
+  margin-top: -10px;
+  margin-left: -10px;
+`;
+
+const CommonLoading = ({ style = commonStyle, speed, color, size = 'default' }) => {
   return (
-    <div style={{ width: 50, height: 50, ...style}}>
-      <svg id="load" x="0px" y="0px" viewBox="0 0 150 150"  >
-        <circle id="loading-inner" cx="75" cy="75" r="60" stroke={color || '#00adb5'}  />
-      </svg>
-    </div>
+    <Container {...{ style, speed, color, size }}>
+      <ItemDiv1 speed={speed}>
+        <ItemSpan color={color} size={size} />
+      </ItemDiv1>
+      <ItemDiv2 speed={speed}>
+        <ItemSpan color={color} size={size} />
+      </ItemDiv2>
+      <ItemDiv3 speed={speed}>
+        <ItemSpan color={color} size={size} />
+      </ItemDiv3>
+      <ItemDiv4 speed={speed}>
+        <ItemSpan color={color} size={size} />
+      </ItemDiv4>
+    </Container>
   );
 };
 

diff --git a/src/components/CommonLoading/style.scss b/src/components/CommonLoading/style.scss
diff --git a/src/components/ThreeHorseLoading/index.js b/src/components/ThreeHorseLoading/index.js
@@ -2,58 +2,41 @@ import React from 'react';
 import styled, { keyframes } from 'styled-components';
 import { commonStyle } from '../utils/style';
 const animation = keyframes`
-    0%   {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
+    0%{
+                transform: translate(-120px);
+            }
+            50%{
+                transform: translate(0);
+            }
+            100%{
+                transform: translate(120px);
+            }
 `;
 
 const Container = styled.div`
-  height: 150px;
-  width: 150px;
+  width: 120px;
+  height: 8px;
+  border-radius: 4px;
+  margin: 0 auto;
+  margin-top: 100px;
+  position: relative;
+  background: #fff;
   overflow: hidden;
-  animation-delay: 1s;
 `;
 
-const Item = styled.div`
-    width:  ${props => props.size === 'small' ? 50 : (props.size === 'large' ? 150 : 100)}px;
-    height: ${props => props.size === 'small' ? 50 : (props.size === 'large' ? 150 : 100)}px;
-    margin: ${props => props.size === 'small' ? -20 : (props.size === 'large' ? -75 : -50)}px 0 0 ${props => props.size === 'small' ? -20 : (props.size === 'large' ? -75 : -50)}px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: ${props => props.color || '#00adb5'};
-    animation: ${animation} ${props => props.speed / 2 || 1.5}s linear infinite;
-  &:before {
-    content: "";
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    right: 5px;
-    bottom: 5px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: ${props => props.color || '#00adb5'};
-    animation: ${animation}  ${props => props.speed || 3}s linear infinite;
-  }
-  &:after {
-    content: "";
-    position: absolute;
-    top: 15px;
-    left: 15px;
-    right: 15px;
-    bottom: 15px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: ${props => props.color || '#00adb5'};
-    animation: ${animation}  ${props => props.speed / 3 || 1}s linear infinite;
-  }
+const ItemSpan = styled.span`
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 3px;
+  background: ${props => props.color || '#00adb5'};
+  animation: ${animation} ${props => props.speed || 2}s linear infinite;
 `;
-const ThreeHorseLoading = ({ speed, color, size="default", style = commonStyle }) => {
+
+const ThreeHorseLoading = ({ speed, color, style = commonStyle }) => {
   return (
-    <Container style={style} size={size}>
-      <Item speed={speed} size={size} style={style} color={color} />
+    <Container style={style} color={color}>
+      <ItemSpan speed={speed} style={style} color={color} />
     </Container>
   );
 };

diff --git a/src/stories/CircleLoading.stories.js b/src/stories/CircleLoading.stories.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withKnobs, number, text } from '@storybook/addon-knobs';
+import { withKnobs, number, text, radios } from '@storybook/addon-knobs';
 import { CircleLoading } from '~/components';
 import Container from './compoment/Container';
 storiesOf('CircleLoading', module)
@@ -12,9 +12,18 @@ storiesOf('CircleLoading', module)
       let color = '';
       speed = number('动画速度(s)')
       color = text('颜色')
+      let size = radios(
+        '动画尺寸',
+        {
+          'small': 'small',
+          'default': 'default',
+          'large': 'large'
+        },
+        'default'
+      );
       return (
         <Container>
-          <CircleLoading speed={speed} color={color}></CircleLoading>
+          <CircleLoading speed={speed} color={color} size={size}></CircleLoading>
         </Container>
       );
     }