Merge branch 'dev' of github.com:koppthe/taro-ui into dev

jd-opensource · Aug 6, 2018 · cb29641 · cb29641
2 parents fa7a9c2 + e257c40
commit cb29641
Show file tree

Hide file tree

Showing 12 changed files with 93 additions and 105 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 } from '@tarojs/components'
+import { View, Text } from '@tarojs/components'
 import PropTypes from 'prop-types'
 import AtIcon from '../icon/index'
 
@@ -26,9 +26,7 @@ export default class AtButton extends Taro.Component {
   }
 
   onClick () {
-    console.log('click====', this.props)
     if (!this.props.disabled) {
-      console.log('click====', this.props)
       this.props.onClick(...arguments)
     }
   }
@@ -37,34 +35,30 @@ export default class AtButton extends Taro.Component {
     const {
       size = 'normal',
       type = '',
-      icon = '',
       circle = false,
-      active = false,
       loading = false,
       disabled = false,
     } = this.props
     let rootClassName = ['at-button']
     const sizeClass = SIZE_CLASS[size] || ''
     const disabledClass = disabled ? 'at-button--disabled' : ''
     const typeClass = TYPE_CLASS[type] ? `at-button--${type}` : ''
-    const activeClass = active ? 'at-button--active' : ''
     const circleClass = circle ? 'at-button--circle' : ''
 
-    rootClassName.push(`at-button--${sizeClass}`, typeClass, activeClass, circleClass, disabledClass)
+    rootClassName.push(`at-button--${sizeClass}`, typeClass, circleClass, disabledClass)
     rootClassName = rootClassName.filter(str => str !== '')
 
     let component
-    // const _style = {
-    //   marginRight: '5px',
-    // }
-    if (icon) {
-      component = <AtIcon value={icon} size='20'></AtIcon>
-    } else if (loading) {
-      component = <AtIcon value='clock' size='20'></AtIcon>
+    if (loading) {
+      component = <View className='at-button__icon'><AtIcon value='loading' size='20'></AtIcon></View>
+      rootClassName.push('at-button--icon')
     }
+
+    console.log(this.props.children)
+
     return (
       <View className={rootClassName} onClick={this.onClick.bind(this)}>
-        {component}{this.props.children}
+        {component}<Text className='at-button__text'>{this.props.children}</Text>
       </View>
     )
   }
@@ -73,19 +67,15 @@ export default class AtButton extends Taro.Component {
 AtButton.defaultProps = {
   size: 'normal',
   type: '',
-  icon: '',
   circle: false,
-  active: false,
   loading: false,
   disabled: false,
 }
 
 AtButton.propTypes = {
   size: PropTypes.oneOf(['normal', 'small']),
   type: PropTypes.oneOf(['primary', 'secondary']),
-  icon: PropTypes.string,
   circle: PropTypes.bool,
-  active: PropTypes.bool,
   loading: PropTypes.bool,
   disabled: PropTypes.bool,
 }
diff --git a/src/components/button/index.scss b/src/components/button/index.scss
@@ -1,22 +1,37 @@
+@import '../../style/theme/default.scss';
+@import '../../style/mixins/index.scss';
+
+$at-button-height: 92px;
+$at-button-height-sm: 60px;
+
 .at-button {
+  margin: 0 auto;
+  padding: 0 $spacing-h-lg;
   width: 710px;
-  height: 92px;
-  line-height: 92px;
+  height: $at-button-height;
+  color: $color-text-base;
+  font-size: $font-size-lg;
+  line-height: $at-button-height - 4;
   text-align: center;
-  border-radius: 8px;
-  font-size: 32px;
-  margin: 0 auto;
-  border: 2px solid #ccc;
-  background-color: #fff;
-  color: #333;
+  border-radius: $border-radius-md;
+  border: 2px solid $color-border-base;
   box-sizing: border-box;
+  @include ellipsis();
+
+  &:active {
+    opacity: 0.6;
+  }
 
   &--active {
     opacity: 0.6;
   }
 
   &--disabled {
     opacity: 0.3;
+
+    &:active {
+      opacity: 0.3;
+    }
   }
 
   &--primary {
@@ -32,11 +47,14 @@
   }
 
   &--small {
-    width: 120px;
-    height: 60px;
-    line-height: 60px;
     display: inline-block;
-    font-size: 28px;
+    padding: 0 $spacing-h-md;
+    width: auto;
+    min-width: 120px;
+    max-width: 710px;
+    height: $at-button-height-sm;
+    font-size: $font-size-base;
+    line-height: $at-button-height-sm - 4;
   }
 
   &--circle {
@@ -45,7 +63,13 @@
     background-clip: border-box;
   }
 
-  .at-icon {
-    margin: 0 10px;
+  &--icon {
+    .at-button__text {
+      margin-left: 20px;
+    }
+  }
+
+  &__icon {
+    display: inline-block;
   }
 }
diff --git a/src/components/icon/index.scss b/src/components/icon/index.scss
diff --git a/src/pages/action/modal/index.js b/src/pages/action/modal/index.js
@@ -14,7 +14,7 @@ import './index.scss'
 
 export default class ModalPage extends Taro.Component {
   config = {
-    navigationBarTitleText: 'Modal Page'
+    navigationBarTitleText: 'Taro UI'
   }
 
   constructor () {

diff --git a/src/pages/action/progress/index.js b/src/pages/action/progress/index.js
@@ -11,7 +11,7 @@ const OFFSET = 15
 
 export default class ProgressPage extends Taro.Component {
   config = {
-    navigationBarTitleText: 'Progress Page'
+    navigationBarTitleText: 'Taro UI'
   }
 
   constructor () {
@@ -46,7 +46,7 @@ export default class ProgressPage extends Taro.Component {
     return (
       <View className='page'>
         {/* S Header */}
-        <DocsHeader title='进度条'></DocsHeader>
+        <DocsHeader title='Progress 进度条'></DocsHeader>
         {/* E Header */}
 
         {/* S Body */}

diff --git a/src/pages/action/toast/index.js b/src/pages/action/toast/index.js
@@ -17,7 +17,7 @@ const INIT_STATE = {
 
 export default class ToastPage extends Component {
   config = {
-    navigationBarTitleText: 'Toast Page'
+    navigationBarTitleText: 'Taro UI'
   }
 
   constructor () {

diff --git a/src/pages/basic/button/index.js b/src/pages/basic/button/index.js
@@ -21,7 +21,7 @@ export default class ButtonPage extends Taro.Component {
     return (
       <View className='page'>
         {/* S Header */}
-        <DocsHeader title='按钮'></DocsHeader>
+        <DocsHeader title='Button 按钮'></DocsHeader>
         {/* E Header */}
 
         {/* S Body */}
@@ -31,19 +31,13 @@ export default class ButtonPage extends Taro.Component {
             <View className='panel__title'>主操作</View>
             <View className='panel__content'>
               <View className='btn-item'>
-                <AtButton type='primary' onClick={this.onButtonClick.bind(this)}>主操作按钮</AtButton>
+                <AtButton type='primary'>主操作按钮</AtButton>
               </View>
               <View className='btn-item'>
-                <AtButton type='primary' loading onClick={this.onButtonClick.bind(this)}>带loading</AtButton>
+                <AtButton type='primary' loading>Loading</AtButton>
               </View>
               <View className='btn-item'>
-                <AtButton type='primary' icon='activity' onClick={this.onButtonClick.bind(this)}>带icon</AtButton>
-              </View>
-              <View className='btn-item'>
-                <AtButton type='primary' active onClick={this.onButtonClick.bind(this)}>点击态</AtButton>
-              </View>
-              <View className='btn-item'>
-                <AtButton type='primary' disabled onClick={this.onButtonClick.bind(this)}>不可操作</AtButton>
+                <AtButton type='primary' disabled>不可操作</AtButton>
               </View>
             </View>
           </View>
@@ -53,16 +47,13 @@ export default class ButtonPage extends Taro.Component {
             <View className='panel__title'>次要操作</View>
             <View className='panel__content'>
               <View className='btn-item'>
-                <AtButton type='secondary' onClick={this.onButtonClick.bind(this)}>次操作按钮</AtButton>
-              </View>
-              <View className='btn-item'>
-                <AtButton type='secondary' icon='activity' onClick={this.onButtonClick.bind(this)}>带icon</AtButton>
+                <AtButton type='secondary'>次操作按钮</AtButton>
               </View>
               <View className='btn-item'>
-                <AtButton type='secondary' active onClick={this.onButtonClick.bind(this)}>点击态</AtButton>
+                <AtButton type='secondary' loading>Loading</AtButton>
               </View>
               <View className='btn-item'>
-                <AtButton type='secondary' disabled onClick={this.onButtonClick.bind(this)}>不可操作</AtButton>
+                <AtButton type='secondary' disabled>不可操作</AtButton>
               </View>
             </View>
           </View>
@@ -72,16 +63,13 @@ export default class ButtonPage extends Taro.Component {
             <View className='panel__title'>次次要操作</View>
             <View className='panel__content'>
               <View className='btn-item'>
-                <AtButton onClick={this.onButtonClick.bind(this)}>次次要操作按钮</AtButton>
+                <AtButton>次次要操作按钮</AtButton>
               </View>
               <View className='btn-item'>
-                <AtButton icon='activity' onClick={this.onButtonClick.bind(this)}>带icon</AtButton>
+                <AtButton icon='activity' loading>Loading</AtButton>
               </View>
               <View className='btn-item'>
-                <AtButton active onClick={this.onButtonClick.bind(this)}>点击态</AtButton>
-              </View>
-              <View className='btn-item'>
-                <AtButton disabled onClick={this.onButtonClick.bind(this)}>不可操作</AtButton>
+                <AtButton disabled>不可操作</AtButton>
               </View>
             </View>
           </View>
@@ -92,46 +80,35 @@ export default class ButtonPage extends Taro.Component {
             <View className='panel__content'>
               <View className='btn-item'>
                 <View className='subitem'>
-                  <AtButton type='primary' size='small' onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-                </View>
-                <View className='subitem'>
-                  <AtButton type='secondary' size='small' onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-                </View>
-                <View className='subitem'>
-                  <AtButton size='small' onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-                </View>
-              </View>
-              <View className='btn-item'>
-                <View className='subitem'>
-                  <AtButton type='primary' size='small' loading onClick={this.onButtonClick.bind(this)}></AtButton>
+                  <AtButton type='primary' size='small'>按钮</AtButton>
                 </View>
                 <View className='subitem'>
-                  <AtButton type='secondary' size='small' loading onClick={this.onButtonClick.bind(this)}></AtButton>
+                  <AtButton type='secondary' size='small'>按钮</AtButton>
                 </View>
                 <View className='subitem'>
-                  <AtButton size='small' loading onClick={this.onButtonClick.bind(this)}></AtButton>
+                  <AtButton size='small'>按钮</AtButton>
                 </View>
               </View>
               <View className='btn-item'>
                 <View className='subitem'>
-                  <AtButton type='primary' size='small' active onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                  <AtButton type='primary' size='small' loading></AtButton>
                 </View>
                 <View className='subitem'>
-                  <AtButton type='secondary' size='small' active onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                  <AtButton type='secondary' size='small' loading></AtButton>
                 </View>
                 <View className='subitem'>
-                  <AtButton size='small' active onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                  <AtButton size='small' loading></AtButton>
                 </View>
               </View>
               <View className='btn-item'>
                 <View className='subitem'>
-                  <AtButton type='primary' size='small' disabled onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                  <AtButton type='primary' size='small' disabled>按钮</AtButton>
                 </View>
                 <View className='subitem'>
-                  <AtButton type='secondary' size='small' disabled onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                  <AtButton type='secondary' size='small' disabled>按钮</AtButton>
                 </View>
                 <View className='subitem'>
-                  <AtButton size='small' disabled onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                  <AtButton size='small' disabled>按钮</AtButton>
                 </View>
               </View>
             </View>
@@ -143,46 +120,35 @@ export default class ButtonPage extends Taro.Component {
             <View className='panel__content'>
               <View className='btn-item'>
                 <View className='subitem'>
-                  <AtButton type='primary' size='small' circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-                </View>
-                <View className='subitem'>
-                  <AtButton type='secondary' size='small' circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-                </View>
-                <View className='subitem'>
-                  <AtButton size='small' circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-                </View>
-              </View>
-              <View className='btn-item'>
-                <View className='subitem'>
-                  <AtButton type='primary' size='small' loading circle onClick={this.onButtonClick.bind(this)}></AtButton>
+                  <AtButton type='primary' size='small' circle>按钮</AtButton>
                 </View>
                 <View className='subitem'>
-                  <AtButton type='secondary' size='small' loading circle onClick={this.onButtonClick.bind(this)}></AtButton>
+                  <AtButton type='secondary' size='small' circle>按钮</AtButton>
                 </View>
                 <View className='subitem'>
-                  <AtButton size='small' loading circle onClick={this.onButtonClick.bind(this)}></AtButton>
+                  <AtButton size='small' circle>按钮</AtButton>
                 </View>
               </View>
               <View className='btn-item'>
                 <View className='subitem'>
-                  <AtButton type='primary' size='small' active circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                  <AtButton type='primary' size='small' loading circle></AtButton>
                 </View>
                 <View className='subitem'>
-                  <AtButton type='secondary' size='small' active circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                  <AtButton type='secondary' size='small' loading circle></AtButton>
                 </View>
                 <View className='subitem'>
-                  <AtButton size='small' active circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                  <AtButton size='small' loading circle></AtButton>
                 </View>
               </View>
               <View className='btn-item'>
                 <View className='subitem'>
-                  <AtButton type='primary' size='small' disabled circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                  <AtButton type='primary' size='small' disabled circle>按钮</AtButton>
                 </View>
                 <View className='subitem'>
-                  <AtButton type='secondary' size='small' disabled circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                  <AtButton type='secondary' size='small' disabled circle>按钮</AtButton>
                 </View>
                 <View className='subitem'>
-                  <AtButton size='small' disabled circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                  <AtButton size='small' disabled circle>按钮</AtButton>
                 </View>
               </View>
             </View>

diff --git a/src/pages/basic/button/index.scss b/src/pages/basic/button/index.scss
@@ -9,6 +9,10 @@
     .subitem {
       display: inline-block;
       margin-left: 24px;
+
+      &:first-child {
+        margin-left: 0;
+      }
     }
   }
 }