feat(Button): 优化 Button 组件，完善 DEMO 页面

jd-opensource · Aug 6, 2018 · 21a04b0 · 21a04b0
1 parent 21df1a3
commit 21a04b0
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 73 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/basic/button/index.js b/src/pages/basic/button/index.js
@@ -34,13 +34,7 @@ export default class ButtonPage extends Taro.Component {
                 <AtButton type='primary'>主操作按钮</AtButton>
               </View>
               <View className='btn-item'>
-                <AtButton type='primary' loading>带loading</AtButton>
-              </View>
-              <View className='btn-item'>
-                <AtButton type='primary' icon='activity'>带icon</AtButton>
-              </View>
-              <View className='btn-item'>
-                <AtButton type='primary' active>点击态</AtButton>
+                <AtButton type='primary' loading>Loading</AtButton>
               </View>
               <View className='btn-item'>
                 <AtButton type='primary' disabled>不可操作</AtButton>
@@ -56,10 +50,7 @@ export default class ButtonPage extends Taro.Component {
                 <AtButton type='secondary'>次操作按钮</AtButton>
               </View>
               <View className='btn-item'>
-                <AtButton type='secondary' icon='activity'>带icon</AtButton>
-              </View>
-              <View className='btn-item'>
-                <AtButton type='secondary' active>点击态</AtButton>
+                <AtButton type='secondary' loading>Loading</AtButton>
               </View>
               <View className='btn-item'>
                 <AtButton type='secondary' disabled>不可操作</AtButton>
@@ -75,10 +66,7 @@ export default class ButtonPage extends Taro.Component {
                 <AtButton>次次要操作按钮</AtButton>
               </View>
               <View className='btn-item'>
-                <AtButton icon='activity'>带icon</AtButton>
-              </View>
-              <View className='btn-item'>
-                <AtButton active>点击态</AtButton>
+                <AtButton icon='activity' loading>Loading</AtButton>
               </View>
               <View className='btn-item'>
                 <AtButton disabled>不可操作</AtButton>
@@ -112,17 +100,6 @@ export default class ButtonPage extends Taro.Component {
                   <AtButton size='small' loading></AtButton>
                 </View>
               </View>
-              <View className='btn-item'>
-                <View className='subitem'>
-                  <AtButton type='primary' size='small' active>按钮</AtButton>
-                </View>
-                <View className='subitem'>
-                  <AtButton type='secondary' size='small' active>按钮</AtButton>
-                </View>
-                <View className='subitem'>
-                  <AtButton size='small' active>按钮</AtButton>
-                </View>
-              </View>
               <View className='btn-item'>
                 <View className='subitem'>
                   <AtButton type='primary' size='small' disabled>按钮</AtButton>
@@ -163,17 +140,6 @@ export default class ButtonPage extends Taro.Component {
                   <AtButton size='small' loading circle></AtButton>
                 </View>
               </View>
-              <View className='btn-item'>
-                <View className='subitem'>
-                  <AtButton type='primary' size='small' active circle>按钮</AtButton>
-                </View>
-                <View className='subitem'>
-                  <AtButton type='secondary' size='small' active circle>按钮</AtButton>
-                </View>
-                <View className='subitem'>
-                  <AtButton size='small' active circle>按钮</AtButton>
-                </View>
-              </View>
               <View className='btn-item'>
                 <View className='subitem'>
                   <AtButton type='primary' size='small' disabled circle>按钮</AtButton>

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;
+      }
     }
   }
 }
diff --git a/src/pages/basic/icon/icons.js b/src/pages/basic/icon/icons.js
@@ -54,7 +54,8 @@ export default {
     'tags',
     'trash',
     'upload',
-    'user'
+    'user',
+    'loading'
   ],
   'file': [
     'file-audio',

diff --git a/src/style/theme/default.scss b/src/style/theme/default.scss
@@ -3,7 +3,7 @@
  */
 @import '../mixins/index.scss';
 
-$hd: 1; // 基本单位
+$hd: 2; // 基本单位
 
 /* The Color of O2Team Brand */
 $color-brand: #6190E8;