fix(taro-ui): 修复问题

jd-opensource · Aug 7, 2018 · df1ada1 · df1ada1
1 parent e24340a
commit df1ada1
Show file tree

Hide file tree

Showing 11 changed files with 124 additions and 96 deletions.
diff --git a/src/components/button/index.js b/src/components/button/index.js
@@ -1,6 +1,6 @@
 
 import Taro from '@tarojs/taro'
-import { View, Text } from '@tarojs/components'
+import { View } from '@tarojs/components'
 import PropTypes from 'prop-types'
 import AtIcon from '../icon/index'
 
@@ -35,9 +35,9 @@ export default class AtButton extends Taro.Component {
     const {
       size = 'normal',
       type = '',
-      circle = false,
-      loading = false,
-      disabled = false,
+      circle,
+      loading,
+      disabled,
     } = this.props
     let rootClassName = ['at-button']
     const sizeClass = SIZE_CLASS[size] || ''
@@ -61,7 +61,7 @@ export default class AtButton extends Taro.Component {
 
     return (
       <View className={rootClassName} onClick={this.onClick.bind(this)}>
-        {component}<Text className='at-button__text'>{this.props.children}</Text>
+        {component}<View className='at-button__text'>{this.props.children}</View>
       </View>
     )
   }

diff --git a/src/components/drawer/index.js b/src/components/drawer/index.js
@@ -1,7 +1,8 @@
 import Taro from '@tarojs/taro'
 import { View } from '@tarojs/components'
 import PropTypes from 'prop-types'
-import AtIcon from '../icon/index'
+import AtList from '../list/index'
+import AtListItem from '../list/item/index'
 
 import './index.scss'
 
@@ -72,9 +73,19 @@ export default class AtDrawer extends Taro.Component {
         <View className='at-drawer__mask' style={maskStyle} onClick={this.onMaskClick.bind(this)}></View>
 
         <View className='at-drawer__content' style={listStyle}>
-          <View className='at-drawer__list'>
-            {items.map((name, index) => <View className='at-drawer__list-item' key={index} data-index={index} onClick={this.onItemClick.bind(this, index)}>{name}<View className='at-drawer__list-icon'><AtIcon value='chevron-right' size='20' color='#C7C7CC'></AtIcon></View></View>)}
-          </View>
+          <AtList>
+            {
+              items.map((name, index) =>
+                <AtListItem
+                  key={index}
+                  data-index={index}
+                  onClick={this.onItemClick.bind(this, index)}
+                  title={name}
+                  arrow='right'
+                >
+                </AtListItem>)
+            }
+          </AtList>
         </View>
       </View>
     )

diff --git a/src/components/drawer/index.scss b/src/components/drawer/index.scss
@@ -26,27 +26,27 @@
     opacity: 0;
   }
 
-  &__list {
-    margin: 0 0 0 18px;
-    max-height: 100%;
-    overflow-y: scroll;
+  // &__list {
+  //   margin: 0 0 0 18px;
+  //   max-height: 100%;
+  //   overflow-y: scroll;
 
-    &-icon {
-      position: absolute;
-      right: 20px;
-      top: 50%;
-      transform: translateY(-50%);
-    }
+  //   &-icon {
+  //     position: absolute;
+  //     right: 20px;
+  //     top: 50%;
+  //     transform: translateY(-50%);
+  //   }
 
-    &-item {
-      height: 90px;
-      line-height: 90px;
-      font-size: 34px;
-      color: $color-black-0;
-      border-bottom: 1px solid #ddd;
-      position: relative;
-    }
-  }
+  //   &-item {
+  //     height: 90px;
+  //     line-height: 90px;
+  //     font-size: 34px;
+  //     color: $color-black-0;
+  //     border-bottom: 1px solid #ddd;
+  //     position: relative;
+  //   }
+  // }
 
   &.at-drawer--left {
     .at-drawer__content {

diff --git a/src/components/list/item/index.js b/src/components/list/item/index.js
@@ -9,13 +9,15 @@ import AtIcon from '../../icon/index'
 import './index.scss'
 
 export default class AtListItem extends Component {
+  onClick () {
+    this.props.onClick(...arguments)
+  }
   render () {
     const {
       note,
       arrow,
       title,
       thumb,
-      onClick,
       isSwitch,
       extraText,
       extraThumb
@@ -32,7 +34,7 @@ export default class AtListItem extends Component {
     }
 
     return (
-      <View className={rootClass} onClick={onClick}>
+      <View className={rootClass} onClick={this.onClick.bind(this)}>
         {thumb && (
           <View className='at-list__item-thumb item-thumb'>
             <Image className='item-thumb-info' mode='scaleToFill' src={thumb} />
@@ -68,7 +70,7 @@ export default class AtListItem extends Component {
 
           {arrow && (
             <View className='item-extra__icon'>
-              <AtIcon value='narrow' color='#c7c7cc' />
+              <AtIcon value={`chevron-${arrow}`} color='#c7c7cc' />
             </View>
           )}
         </View>

diff --git a/src/components/noticebar/index.scss b/src/components/noticebar/index.scss
@@ -1,4 +1,4 @@
-
+@import "../../style/theme/default.scss";
 @import "../../style/mixins.scss";
 
 .at-noticebar {
@@ -34,7 +34,7 @@
   }
 
   &__more {
-    color: #999;
+    color: $color-grey-2;
     position: absolute;
     right: 18px;
     top: 15px;

diff --git a/src/components/pagination/index.js b/src/components/pagination/index.js
@@ -2,6 +2,7 @@ import Taro from '@tarojs/taro'
 import { View, Text } from '@tarojs/components'
 import PropTypes from 'prop-types'
 import AtButton from '../button/index'
+import AtIcon from '../icon/index'
 
 import './index.scss'
 
@@ -42,12 +43,12 @@ export default class AtPagination extends Taro.Component {
     const {
       current,
       icon,
-      simple,
+      // simple,
       maxPage,
     } = this.state
 
     let rootClassName = ['at-pagination']
-    if (simple) rootClassName.push('at-pagination--simple')
+    // if (simple) rootClassName.push('at-pagination--simple')
     if (icon) rootClassName.push('at-pagination--icon')
     rootClassName = rootClassName.filter(str => str !== '')
 
@@ -56,16 +57,18 @@ export default class AtPagination extends Taro.Component {
         <View className='at-pagination__operate'>
           <View className='at-pagination__btns'>
             <View className='at-pagination__btns-prev'>
-              <AtButton onClick={this.onPrev.bind(this)} size='small' icon={icon ? 'chevron-left' : ''} _disabled={current === 1}>{icon ? '' : '上一页'}</AtButton>
+              {icon && <AtButton onClick={this.onPrev.bind(this)} size='small' disabled={current === 1}><AtIcon value='chevron-left' color='#000' size='20'></AtIcon></AtButton>}
+              {!icon && <AtButton onClick={this.onPrev.bind(this)} size='small' disabled={current === 1}>上一页</AtButton>}
             </View>
             <View className='at-pagination__btns-next'>
-              <AtButton onClick={this.onNext.bind(this)} size='small' icon={icon ? 'chevron-right' : ''} _disabled={current === maxPage}>{icon ? '' : '下一页'}</AtButton>
+              {icon && <AtButton onClick={this.onNext.bind(this)} size='small' disabled={current === maxPage}><AtIcon value='chevron-right' color='#000' size='20'></AtIcon></AtButton>}
+              {!icon && <AtButton onClick={this.onNext.bind(this)} size='small' disabled={current === maxPage}>下一页</AtButton>}
             </View>
           </View>
         </View>
-        {!simple && <View className='at-pagination__number'>
+        <View className='at-pagination__number'>
           <Text className='at-pagination__number-current'>{current}</Text>/{ maxPage }
-        </View>}
+        </View>
 
       </View>
     )
@@ -77,13 +80,13 @@ AtPagination.defaultProps = {
   total: 0,
   pageSize: 20,
   icon: false,
-  simple: false,
+  // simple: false,
 }
 
 AtPagination.propTypes = {
   current: PropTypes.number,
   total: PropTypes.number,
   pageSize: PropTypes.number,
   icon: PropTypes.bool,
-  simple: PropTypes.bool,
+  // simple: PropTypes.bool,
 }
diff --git a/src/components/pagination/index.scss b/src/components/pagination/index.scss
@@ -1,3 +1,4 @@
+@import "../../style/theme/default.scss";
 
 .at-pagination {
   font-size: 0;
@@ -34,7 +35,7 @@
     transform: translateX(-50%);
 
     &-current {
-      color: #6190E8;
+      color: $color-brand;
     }
   }
 }

diff --git a/src/components/tag/index.scss b/src/components/tag/index.scss
@@ -1,40 +1,45 @@
+@import '../../style/theme/default.scss';
 
 .at-tag {
-    height: 60px;
-    line-height: 60px;
-    padding: 0 30px;
-    text-align: center;
-    border-radius: 8px;
-    font-size: 28px;
-    display: inline-block;
-
-    border: 2px solid #F7F7F7;
-    background-color: #F7F7F7;
-    color: #666;
-    box-sizing: border-box;
-    vertical-align: middle;
-    &--active {
-        border: 2px solid #77A1F7;
-        background-color: #fff;
-        color: #77A1F7;
-        &.at-tag--primary {
-            background-color: #769EFA;
-            color: #fff;
-            border: 2px solid #769EFA;;
-        }
-    }
-    &--disabled {
-        opacity: .3;
-    }
-    &--small {
-        height: 40px;
-        line-height: 40px;
-        padding: 0 15px;
-        font-size: 20px;
-    }
-    &--circle {
-        border-radius: 100px;
-        overflow: hidden;
-        background-clip: border-box;
+  height: 60px;
+  line-height: 56px;
+  padding: 0 $spacing-h-lg;
+  text-align: center;
+  border-radius: $border-radius-md;
+  font-size: $font-size-base;
+  display: inline-block;
+  border: 2px solid $color-grey-6;
+  background-color: $color-bg-grey;
+  color: $color-grey-1;
+  box-sizing: border-box;
+  vertical-align: middle;
+
+  &--active {
+    border: 2px solid #77A1F7;
+    background-color: $color-bg;
+    color: #77A1F7;
+
+    &.at-tag--primary {
+      background-color: #769EFA;
+      color: $color-text-base-inverse;
+      border: 2px solid #769EFA;
     }
-}
+  }
+
+  &--disabled {
+    opacity: $opacity-disabled;
+  }
+
+  &--small {
+    height: 40px;
+    line-height: 36px;
+    padding: 0 $spacing-h-md;
+    font-size: $font-size-xs;
+  }
+
+  &--circle {
+    border-radius: 100px;
+    overflow: hidden;
+    background-clip: border-box;
+  }
+}
diff --git a/src/components/timeline/index.scss b/src/components/timeline/index.scss
@@ -1,11 +1,12 @@
+@import '../../style/theme/default.scss';
 
 .at-timelineitem {
   position: relative;
   padding: 0 0 12px;
 
   &__content {
-    font-size: 28px;
-    color: #333;
+    font-size: $font-size-base;
+    color: $color-black-1;
     text-align: left;
     margin-left: 36px;
     height: 50px;
@@ -29,12 +30,12 @@
     &::after {
       content: '';
       width: 20px;
-      height: 18px;
+      height: 20px;
       display: inline-block;
       box-sizing: border-box;
       border: 2px solid transparent;
       border-radius: 50%;
-      border-color: #78A4FA;
+      border-color: $color-info;
       margin-top: 5px;
     }
 
@@ -48,7 +49,7 @@
   &__icon {
     left: -5px;
     // top: 7px;
-    color: #78A4FA;
+    color: $color-info;
     // padding-top: 2px;
   }
 

diff --git a/src/pages/navigation/pagination/index.js b/src/pages/navigation/pagination/index.js
@@ -49,15 +49,6 @@ export default class PaginationPage extends Taro.Component {
               </View>
             </View>
           </View>
-
-          <View className='panel'>
-            <View className='panel__title'>隐藏页码</View>
-            <View className='panel__content'>
-              <View className='example-item'>
-                <AtPagination icon total='50' pageSize='10' current='1' simple></AtPagination>
-              </View>
-            </View>
-          </View>
         </View>
       </View>
     )