fix: 修复组件内容过长, 更新文档

Summer-andy · Dec 7, 2019 · 669dfe7 · 669dfe7
1 parent e7c39bd
commit 669dfe7
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 25 deletions.
diff --git a/README-zh-Hans.md b/README-zh-Hans.md
@@ -59,7 +59,7 @@ import { BoxLoading } from 'react-loadingg';
 | CommonLoading        | ✅    | 🚧    | 🚧   | ✅    | 
 | DisappearedLoading   | ✅    | ✅    | ✅   | ✅    | 
 | LoopCircleLoading    | ✅    | ✅    | ✅   | ✅    | 
-| NineCellLoading      | ✅    | ✅    | 🚧   | ✅    | 
+| NineCellLoading      | ✅    | ✅    | ✅   | ✅    | 
 | TouchBallLoading     | ✅    | ✅    | ✅   | ✅    | 
 | TransverseLoading    | ✅    | ✅    | ✅   | ✅    | 
 | WaveLoading          | ✅    | ✅    | ✅   | ✅    | 

diff --git a/README.md b/README.md
@@ -62,7 +62,7 @@ import { BoxLoading } from 'react-loadingg';
 | CommonLoading        | ✅    | 🚧    | 🚧   | ✅    | 
 | DisappearedLoading   | ✅    | ✅    | ✅   | ✅    | 
 | LoopCircleLoading    | ✅    | ✅    | ✅   | ✅    | 
-| NineCellLoading      | ✅    | ✅    | 🚧   | ✅    | 
+| NineCellLoading      | ✅    | ✅    | ✅   | ✅    | 
 | TouchBallLoading     | ✅    | ✅    | ✅   | ✅    | 
 | TransverseLoading    | ✅    | ✅    | ✅   | ✅    | 
 | WaveLoading          | ✅    | ✅    | ✅   | ✅    | 

diff --git a/src/components/CircleToBlockLoading/index.js b/src/components/CircleToBlockLoading/index.js
@@ -3,13 +3,13 @@ import styled, { keyframes } from 'styled-components';
 import { commonStyle, sizeContainer } from '../utils/style';
 const changeSharp = keyframes`
   0% {
-    transform: translateX(0) rotate(45deg) scale(0);
+    transform: translateX(-50%) rotate(45deg) scale(0);
   }
   50% {
-    transform: translateX(250%) rotate(45deg) scale(1);
+    transform: translateX(125%) rotate(45deg) scale(1);
   }
   100% {
-    transform: translateX(500%) rotate(45deg) scale(0);
+    transform: translateX(300%) rotate(45deg) scale(0);
   }
 `;
 

diff --git a/src/components/NineCellLoading/index.js b/src/components/NineCellLoading/index.js
@@ -1,15 +1,15 @@
 import React from 'react';
 import styled, { keyframes } from 'styled-components';
-
+import { commonStyle, sizeContainer } from '../utils/style';
 const animate = keyframes`
   to {
     opacity: 0.3;
   }
 `;
 
 const LoadContainer = styled.div`
-  width: 5em;
-  height: 5em;
+   height: calc( ${props => sizeContainer[props.size] || sizeContainer['default']} * 2) ;
+    width: calc( ${props => sizeContainer[props.size] || sizeContainer['default']} * 2) ;
   display: grid;
   grid-template-rows: repeat(3, 1fr);
   grid-template-columns: repeat(3, 1fr);
@@ -33,18 +33,18 @@ const LoadContainer = styled.div`
 `;
 
 const Item = styled.div`
-  width: 0.8em;
-  height: 0.8em;
+   height: calc( ${props => sizeContainer[props.size] || sizeContainer['default']} / 4) ;
+    width:calc( ${props => sizeContainer[props.size] || sizeContainer['default']} / 4) ;
   background-color: ${props => props.color || '#00adb5'};
   border-radius: 50%;
 animation: ${animate} ${props => props.speed || 1.5}s alternate ease-in-out infinite;
 `;
 
-const NineCellLoading = ({ style, color, speed }) => {
+const NineCellLoading = ({ style = commonStyle, color, size="default", speed }) => {
   return (
     <LoadContainer style={style} speed={speed}>
       {
-       Array.from(Array(9)).map((item, index) => <Item color={color} speed={speed} key={index}/>)
+       Array.from(Array(9)).map((item, index) => <Item size={size} color={color} speed={speed} key={index}/>)
       }
     </LoadContainer>
   );

diff --git a/src/components/PointSpreadLoading/index.js b/src/components/PointSpreadLoading/index.js
@@ -18,8 +18,8 @@ const Container = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 400px;
-  width: 400px;
+  height: 120px;
+  width: 120px;
   overflow: hidden;
   animation-delay: 1s;
 `;
@@ -29,7 +29,7 @@ const Item = styled.div`
   height: ${props => sizeItem[props.size] || sizeItem['default']};
   border-radius: 50%;
   background-color: ${props => props.color || '#00adb5'};
-  margin: 7px;
+  margin:  7px;
   display: flex;
   justify-content: center;
   align-items: center;

diff --git a/src/components/ThreeHorseLoading/index.js b/src/components/ThreeHorseLoading/index.js
@@ -11,11 +11,8 @@ const animation = keyframes`
 `;
 
 const Container = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 500px;
-  width: 500px;
+  height: 150px;
+  width: 150px;
   overflow: hidden;
   animation-delay: 1s;
 `;
@@ -26,7 +23,7 @@ const Item = styled.div`
     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: #00adb5;
+    border-top-color: ${props => props.color || '#00adb5'};
     animation: ${animation} ${props => props.speed / 2 || 1.5}s linear infinite;
   &:before {
     content: "";
@@ -37,7 +34,7 @@ const Item = styled.div`
     bottom: 5px;
     border-radius: 50%;
     border: 3px solid transparent;
-    border-top-color: #00adb5;
+    border-top-color: ${props => props.color || '#00adb5'};
     animation: ${animation}  ${props => props.speed || 3}s linear infinite;
   }
   &:after {
@@ -49,14 +46,14 @@ const Item = styled.div`
     bottom: 15px;
     border-radius: 50%;
     border: 3px solid transparent;
-    border-top-color: #00adb5;
+    border-top-color: ${props => props.color || '#00adb5'};
     animation: ${animation}  ${props => props.speed / 3 || 1}s linear infinite;
   }
 `;
 const ThreeHorseLoading = ({ speed, color, size="default", style = commonStyle }) => {
   return (
-    <Container style={style}>
-      <Item speed={speed} size={size} />
+    <Container style={style} size={size}>
+      <Item speed={speed} size={size} style={style} color={color} />
     </Container>
   );
 };