feat: add progress

jd-opensource · Jul 15, 2018 · 45e41c7 · 45e41c7
1 parent 3066193
commit 45e41c7
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 63 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -4,6 +4,7 @@
     "no-unused-vars": ["error", { "varsIgnorePattern": "Taro" }],
     "quotes": [2, "single"],
     "react/self-closing-comp": "off",
+    "semi": [2,"never"],
     "react/jsx-closing-bracket-location": [
       "error",
       {

diff --git a/src/app.scss b/src/app.scss
@@ -1,3 +1,21 @@
-#app{
-  background-color: #f8f8f8;
+#app {
+    background-color: #f8f8f8;
 }
+
+// 实例模板
+.example {
+    padding: 20px;
+    margin-bottom: 50px;
+    &:not(:first-child) {
+        border-top: 40px solid #f5f5f5;
+    }
+    &__header {
+        padding-bottom: 10px;
+        border-bottom: 1px solid rgba($color: #E5E5E5, $alpha: 1);
+        &-title {
+            color: #999;
+            font-size: 28px;
+        }
+    }
+    &__body{}
+}
diff --git a/src/components/activity-indicator/index.js b/src/components/activity-indicator/index.js
@@ -1,47 +1,54 @@
-import Taro from '@tarojs/taro'
-import { View, Text } from '@tarojs/components'
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
 
-import './index.scss'
+import './index.scss';
 
 export default class ActivityIndicator extends Taro.Component {
   constructor() {
-    super(...arguments)
+    super(...arguments);
     this.state = {
       views: new Array(12).fill()
-    }
+    };
   }
 
   render() {
-    const { views } = this.state
-    const { color, size = 100, mode, text } = this.props
-    const realSize = size / 2
-    const scaleSize = size / 200
+    const { views } = this.state;
+    const { color, size , mode , content } = this.props;
+    const realSize = size / 2;
+    const scaleSize = size / 200;
 
-    const rootStyle = {
+    const indicatorStyle = {
       width: +size,
       height: +size,
       transform: `translate(-${realSize}px, -${realSize}px) scale(${scaleSize}) translate(${realSize}px,${realSize}px)`
-    }
+    };
+
     const style = {
       background: color
-    }
+    };
+
+    const rootClassName = {
+      'at-activity-indicator': true,
+      'at-activity-indicator--center': mode == 'center'
+    };
 
-    const rootClassName = ['at-activity-indicator__body', `at-activity-indicator__body--${mode}`]
 
     return (
-      <View className='at-activity-indicator'>
-        <View className={rootClassName} style={rootStyle}>
+      <View className={rootClassName} >
+        <View className='at-activity-indicator__body' style={indicatorStyle}>
           {views.map((item, index) => {
             return (
               <View
                 key={index}
                 className='at-activity-indicator__body-item'
                 style={style} />
-            )
+            );
           })}
         </View>
-        <View>{text}</View>
+        {content && (
+          <View className='at-activity-indicator__content'>{content}</View>
+        )}
       </View>
-    )
+    );
   }
 }
diff --git a/src/components/activity-indicator/index.scss b/src/components/activity-indicator/index.scss
@@ -1,4 +1,5 @@
 /*postcss-pxtransform disable*/
+@import '../../style/mixins';
 
 @keyframes lds-spinner {
   0% {
@@ -20,12 +21,16 @@
 
 .at-activity-indicator {
   display: inline-block;
+
+  &--center{
+    @include absolute-center;
+  }
+
   &__body {
-    width: 200px;
-    height: 200px;
+    width: 100px;
+    height: 100px;
     position: relative;
-    display: inline-block;
-    transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
+    transform: translate(-50px, -50px) scale(.5) translate(50px, 50px);
 
     &-item {
       left: 94px;
@@ -45,4 +50,8 @@
       }
     }
   }
+  &__content{
+    text-align: center;
+    font-size: 16px;
+  }
 }
diff --git a/src/components/progress/index.js b/src/components/progress/index.js
@@ -0,0 +1,14 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+
+import './index.scss'
+
+export default class Progress extends Taro.Component {
+  constructor() {
+    super(...arguments)
+  }
+
+  render() {
+    return <View>11</View>
+  }
+}
diff --git a/src/components/progress/index.scss b/src/components/progress/index.scss
diff --git a/src/pages/action/activity-indicator/index.js b/src/pages/action/activity-indicator/index.js
@@ -44,7 +44,7 @@ export default class ActivityIndicatorPage extends Taro.Component {
             <Text className='example__header-title'>自定义文字</Text>
           </View>
           <View className='example__body example__body--custom'>
-            <ActivityIndicator text='加载中...' />
+            <ActivityIndicator content='加载中...' />
           </View>
         </View>
         <View className='example example--center'>
@@ -54,6 +54,9 @@ export default class ActivityIndicatorPage extends Taro.Component {
           <View className='example__body example__body--center'>
             <ActivityIndicator mode='center' />
           </View>
+          <View className='example__body example__body--center'>
+            <ActivityIndicator mode='center' content='Loading...' />
+          </View>
         </View>
       </View>
     )

diff --git a/src/pages/action/activity-indicator/index.scss b/src/pages/action/activity-indicator/index.scss
@@ -1,29 +1,12 @@
 @import "../../../style/variables";
-
 .activity-indicator__page {
-  .example {
-    padding: 20px;
-    margin-bottom: 50px;
-    &:not(:first-child) {
-      border-top: 20PX solid #f5f5f5;
+    .example__body {
+        &--list {}
+        &--center {
+            height: 375px;
+            position: relative;
+            background-color: #f8f8f8;
+            margin-bottom: 20px;
+        }
     }
-    &__header {
-      padding-bottom: 10px;
-      margin-bottom: 30px;
-      border-bottom: 1PX solid rgba($color: #E5E5E5, $alpha: 1);
-      &-title {
-        color: #999;
-        font-size: 14PX;
-      }
-    }
-    &__body {
-      &--list {
-      }
-      &--center {
-        height: 375px;
-        position: relative;
-        background-color: #f8f8f8;
-      }
-    }
-  }
-}
+}
diff --git a/src/pages/action/progress/index.js b/src/pages/action/progress/index.js
@@ -1,9 +1,11 @@
 import Taro from '@tarojs/taro'
-import { View } from '@tarojs/components'
+import { View,Text } from '@tarojs/components'
+
+import Progress from '../../../components/progress/index'
 
 import './index.scss'
 
-export default class Index extends Taro.Component {
+export default class ProgressPage extends Taro.Component {
   config = {
     navigationBarTitleText: 'Taro UI'
   }
@@ -16,13 +18,26 @@ export default class Index extends Taro.Component {
 
   render() {
     return (
-      <View className='index-page'>
-
-        <View>
-          <View>Taro UI Modal</View>
-          <View>Alert Modal</View>
-          <View>Confirm Modal</View>
-          <View>Custom Modal</View>
+      <View className='progress__page'>
+        <View className='example'>
+          <View className='example__header'>
+            <Text className='example__header-title'>任意尺寸</Text>
+          </View>
+          <View className='example__body example__body--list'>
+            <Progress size='50' />
+            <Progress size='75' />
+            <Progress size='100' />
+          </View>
+        </View>
+        <View className='example'>
+          <View className='example__header'>
+            <Text className='example__header-title'>任意尺寸</Text>
+          </View>
+          <View className='example__body example__body--list'>
+            <Progress size='50' />
+            <Progress size='75' />
+            <Progress size='100' />
+          </View>
         </View>
       </View>
     )

diff --git a/src/style/mixins.scss b/src/style/mixins.scss
@@ -1,3 +1,6 @@
-@mixin fontSize($num) {
-  font-size: $num;
-}
+@mixin absolute-center {
+  top: 50%;
+  left: 50%;
+  position: absolute;
+  transform: translate(-50%,-50%);
+}