fix: 修复Toast loading 问题 + list 边框没对齐问题

jd-opensource · Aug 19, 2018 · 1b296c2 · 1b296c2
1 parent 471e0ad
commit 1b296c2
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 12 deletions.
diff --git a/src/components/list/index.scss b/src/components/list/index.scss
@@ -22,7 +22,7 @@
   &::before {
     content: " ";
     left: 0;
-    width: $spacing-h-xl;
+    width: $spacing-v-lg;
     z-index: 100;
     position: absolute;
     background-color: transparent;

diff --git a/src/components/list/item/index.scss b/src/components/list/item/index.scss
@@ -29,11 +29,11 @@ $item-horizontal-padding: 24px;
   &::after {
     content: " ";
     position: absolute;
-    width: calc(100% - #{$spacing-h-xl});
+    width: calc(100% - #{$spacing-h-lg});
     height: 1px;
     background-color: $color-border-lighter;
     bottom: 0;
-    left: $spacing-h-xl;
+    left: $spacing-h-lg;
   }
 
   &--thumb {

diff --git a/src/components/toast/index.js b/src/components/toast/index.js
@@ -33,6 +33,9 @@ export default class AtToast extends Taro.Component {
   }
 
   makeTimer (duration) {
+    if (duration === 0) {
+      return
+    }
     this._timer = setTimeout(() => {
       this.setState({
         isOpened: false
@@ -65,7 +68,10 @@ export default class AtToast extends Taro.Component {
   }
 
   handleClick = () => {
-    const { onClickToast } = this.props
+    const { onClickToast, status } = this.props
+    if (status === 'loading') {
+      return
+    }
     if (onClickToast) {
       return onClickToast()
     }
@@ -125,7 +131,7 @@ export default class AtToast extends Taro.Component {
 }
 
 AtToast.defaultProps = {
-  duration: 30000,
+  duration: 3000,
   isOpened: false
 }
 

diff --git a/src/pages/action/toast/index.js b/src/pages/action/toast/index.js
@@ -12,6 +12,7 @@ const INIT_STATE = {
   icon: '',
   text: '',
   status: '',
+  duration: 3000,
   hasMask: false,
   isOpened: false
 }
@@ -58,10 +59,32 @@ export default class ToastPage extends Component {
             <View className='panel__title'>基本案例</View>
             <View className='panel__content'>
               <View className='example-item'>
-                <AtButton onClick={this.handleClick.bind(this, '文本内容', '', '', false, '')}>文本 Toast</AtButton>
+                <AtButton
+                  onClick={this.handleClick.bind(
+                    this,
+                    '文本内容',
+                    '',
+                    '',
+                    false,
+                    ''
+                  )}
+                >
+                  文本 Toast
+                </AtButton>
               </View>
               <View className='example-item'>
-                <AtButton onClick={this.handleClick.bind(this, '文本内容', 'loading', '', false, '')}>文本 + ICON</AtButton>
+                <AtButton
+                  onClick={this.handleClick.bind(
+                    this,
+                    '文本内容',
+                    'loading',
+                    '',
+                    false,
+                    ''
+                  )}
+                >
+                  文本 + ICON
+                </AtButton>
               </View>
             </View>
           </View>
@@ -70,7 +93,18 @@ export default class ToastPage extends Component {
             <View className='panel__title'>自定义图片</View>
             <View className='panel__content'>
               <View className='example__item'>
-                <AtButton onClick={this.handleClick.bind(this, '凹凸实验室', '', 'http://storage.360buyimg.com/mtd/home/group-21533885306540.png', false, '')}>自定义图片 Toast</AtButton>
+                <AtButton
+                  onClick={this.handleClick.bind(
+                    this,
+                    '凹凸实验室',
+                    '',
+                    'http://storage.360buyimg.com/mtd/home/group-21533885306540.png',
+                    false,
+                    ''
+                  )}
+                >
+                  自定义图片 Toast
+                </AtButton>
               </View>
             </View>
           </View>
@@ -79,7 +113,18 @@ export default class ToastPage extends Component {
             <View className='panel__title'>添加遮罩层</View>
             <View className='panel__content'>
               <View className='example__item'>
-                <AtButton onClick={this.handleClick.bind(this, '透明遮罩层的作用在于不可点击下面的元素', '', '', true, '')}>添加遮罩层 Toast</AtButton>
+                <AtButton
+                  onClick={this.handleClick.bind(
+                    this,
+                    '透明遮罩层的作用在于不可点击下面的元素',
+                    '',
+                    '',
+                    true,
+                    ''
+                  )}
+                >
+                  添加遮罩层 Toast
+                </AtButton>
               </View>
             </View>
           </View>
@@ -88,7 +133,18 @@ export default class ToastPage extends Component {
             <View className='panel__title'>Error Toast</View>
             <View className='panel__content'>
               <View className='example__item'>
-                <AtButton onClick={this.handleClick.bind(this, '错误提示', '', '', true, 'error')}>错误提示 Toast</AtButton>
+                <AtButton
+                  onClick={this.handleClick.bind(
+                    this,
+                    '错误提示',
+                    '',
+                    '',
+                    true,
+                    'error'
+                  )}
+                >
+                  错误提示 Toast
+                </AtButton>
               </View>
             </View>
           </View>
@@ -97,7 +153,18 @@ export default class ToastPage extends Component {
             <View className='panel__title'>Success Toast</View>
             <View className='panel__content'>
               <View className='example__item'>
-                <AtButton onClick={this.handleClick.bind(this, '正确提示', '', '', true, 'success')}>正确提示 Toast</AtButton>
+                <AtButton
+                  onClick={this.handleClick.bind(
+                    this,
+                    '正确提示',
+                    '',
+                    '',
+                    true,
+                    'success'
+                  )}
+                >
+                  正确提示 Toast
+                </AtButton>
               </View>
             </View>
           </View>
@@ -106,7 +173,18 @@ export default class ToastPage extends Component {
             <View className='panel__title'>Loading Toast</View>
             <View className='panel__content'>
               <View className='example__item'>
-                <AtButton onClick={this.handleClick.bind(this, '正在加载…', '', '', true, 'loading')}>加载中 Toast</AtButton>
+                <AtButton
+                  onClick={this.handleClick.bind(
+                    this,
+                    '正在加载…',
+                    '',
+                    '',
+                    true,
+                    'loading'
+                  )}
+                >
+                  加载中 Toast
+                </AtButton>
               </View>
             </View>
           </View>