feat(customize-theme): 调整代码结构，更改 css 命名

jd-opensource · Dec 25, 2018 · b98c4eb · b98c4eb
1 parent bf0f891
commit b98c4eb
Show file tree

Hide file tree

Showing 24 changed files with 611 additions and 526 deletions.
diff --git a/src/components/progress/index.js b/src/components/progress/index.js
@@ -1,19 +1,15 @@
 import Taro from '@tarojs/taro'
-import { View } from '@tarojs/components'
+import { View, Text } from '@tarojs/components'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-
-import AtIcon from '../icon/index'
 import AtComponent from '../../common/component'
 
 export default class AtProgress extends AtComponent {
   render () {
+    const { color } = this.props
     let { percent } = this.props
-    let { color } = this.props
     const { strokeWidth, status, isHidePercent } = this.props
 
-    let iconInfo = {}
-
     if (percent < 0) {
       percent = 0
     } else if (percent > 100) {
@@ -27,20 +23,10 @@ export default class AtProgress extends AtComponent {
       },
       this.props.className
     )
-
-    if (status === 'error') {
-      iconInfo = {
-        color: '#FF4949',
-        value: 'close-circle'
-      }
-      color = '#FF4949'
-    } else if (status === 'success') {
-      iconInfo = {
-        color: '#13CE66',
-        value: 'check-circle'
-      }
-      color = '#13CE66'
-    }
+    const iconClass = classNames('at-icon', {
+      'at-icon-close-circle': status === 'error',
+      'at-icon-check-circle': status === 'success',
+    })
 
     const progressStyle = {
       width: percent && `${+percent}%`,
@@ -61,11 +47,7 @@ export default class AtProgress extends AtComponent {
 
         {!isHidePercent && (
           <View className='at-progress__content'>
-            {!status || status === 'progress' ? (
-              percent + '%' /* eslint-disable-line prefer-template */
-            ) : (
-              <AtIcon customStyle={{ fontSize: '18px' }} value={iconInfo.value} color={iconInfo.color} />
-            )}
+            {!status || status === 'progress' ? `${percent}%` : <Text className={iconClass}></Text>}
           </View>
         )}
       </View>

diff --git a/src/components/radio/index.js b/src/components/radio/index.js
@@ -1,34 +1,10 @@
 import Taro from '@tarojs/taro'
-import { View } from '@tarojs/components'
+import { View, Text } from '@tarojs/components'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-
-import AtIcon from '../../components/icon/index'
 import AtComponent from '../../common/component'
 
 export default class AtRadio extends AtComponent {
-  static defaultProps = {
-    customStyle: '',
-    className: '',
-    value: '',
-    options: [],
-    onClick: () => { }
-  }
-
-  static propTypes = {
-    customStyle: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string
-    ]),
-    className: PropTypes.oneOfType([
-      PropTypes.array,
-      PropTypes.string
-    ]),
-    value: PropTypes.string,
-    options: PropTypes.array,
-    onClick: PropTypes.func,
-  }
-
   handleClick (option) {
     if (option.disabled) return
     this.props.onClick(option.value, ...arguments)
@@ -63,8 +39,8 @@ export default class AtRadio extends AtComponent {
               })
             }
           >
-            <View className='at-radio__option_wrap'>
-              <View className='at-radio__option_container'>
+            <View className='at-radio__option-wrap'>
+              <View className='at-radio__option-container'>
                 <View className='at-radio__title'>{option.label}</View>
                 <View
                   className={
@@ -74,18 +50,36 @@ export default class AtRadio extends AtComponent {
                     })
                   }
                 >
-                  <AtIcon customStyle={{ fontSize: '16px' }} value='check' color='#6190E8' />
+                  <Text className='at-icon at-icon-check'></Text>
                 </View>
               </View>
-              {
-                option.desc
-                  ? <View className='at-radio__desc'>{option.desc}</View>
-                  : null
-              }
+              {option.desc && <View className='at-radio__desc'>{option.desc}</View>}
             </View>
           </View>)
         }
       </View>
     )
   }
 }
+
+AtRadio.defaultProps = {
+  customStyle: '',
+  className: '',
+  value: '',
+  options: [],
+  onClick: () => {},
+}
+
+AtRadio.propTypes = {
+  customStyle: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string
+  ]),
+  className: PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.string
+  ]),
+  value: PropTypes.string,
+  options: PropTypes.array,
+  onClick: PropTypes.func,
+}
diff --git a/src/components/range/index.js b/src/components/range/index.js
@@ -2,56 +2,9 @@ import Taro from '@tarojs/taro'
 import PropTypes from 'prop-types'
 import { View } from '@tarojs/components'
 import classNames from 'classnames'
-
 import AtComponent from '../../common/component'
 
-const defaultFunc = () => {}
-
 export default class AtRange extends AtComponent {
-  static defaultProps = {
-    customStyle: '',
-    className: '',
-    sliderStyle: '',
-    railStyle: '',
-    trackStyle: '',
-    value: [0, 0],
-    min: 0,
-    max: 100,
-    disabled: false,
-    blockSize: 28,
-    onChange: defaultFunc,
-    onAfterChange: defaultFunc
-  }
-
-  static propTypes = {
-    customStyle: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string
-    ]),
-    className: PropTypes.oneOfType([
-      PropTypes.array,
-      PropTypes.string
-    ]),
-    sliderStyle: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string
-    ]),
-    railStyle: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string
-    ]),
-    trackStyle: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string
-    ]),
-    value: PropTypes.array,
-    min: PropTypes.number,
-    max: PropTypes.number,
-    disabled: PropTypes.bool,
-    blockSize: PropTypes.number,
-    onChange: PropTypes.func
-  }
-
   constructor (props) {
     super(...arguments)
     const { max, min } = props
@@ -188,9 +141,9 @@ export default class AtRange extends AtComponent {
 
     const { slider1X, slider2X } = this.state
     const sliderCommonStyle = {
-      width: `${blockSize}PX`,
-      height: `${blockSize}PX`,
-      marginLeft: `${-blockSize / 2}PX`
+      width: blockSize ? `${blockSize}PX` : '',
+      height: blockSize ? `${blockSize}PX` : '',
+      marginLeft: blockSize ? `${-blockSize / 2}PX` : '',
     }
     const slider1Style = {
       ...sliderCommonStyle,
@@ -201,7 +154,7 @@ export default class AtRange extends AtComponent {
       left: `${slider2X}%`
     }
     const containerStyle = {
-      height: `${blockSize}PX`,
+      height: blockSize ? `${blockSize}PX` : '',
     }
 
     const smallX = slider1X > slider2X ? slider2X : slider1X
@@ -254,3 +207,48 @@ export default class AtRange extends AtComponent {
     )
   }
 }
+
+AtRange.defaultProps = {
+  customStyle: '',
+  className: '',
+  sliderStyle: '',
+  railStyle: '',
+  trackStyle: '',
+  value: [0, 0],
+  min: 0,
+  max: 100,
+  disabled: false,
+  blockSize: 0,
+  onChange: () => {},
+  onAfterChange: () => {},
+}
+
+AtRange.propTypes = {
+  customStyle: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string
+  ]),
+  className: PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.string
+  ]),
+  sliderStyle: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string
+  ]),
+  railStyle: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string
+  ]),
+  trackStyle: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string
+  ]),
+  value: PropTypes.array,
+  min: PropTypes.number,
+  max: PropTypes.number,
+  disabled: PropTypes.bool,
+  blockSize: PropTypes.number,
+  onChange: PropTypes.func,
+  onAfterChange: PropTypes.func,
+}
diff --git a/src/components/rate/index.js b/src/components/rate/index.js
@@ -1,42 +1,10 @@
 import Taro from '@tarojs/taro'
-import { View } from '@tarojs/components'
+import { View, Text } from '@tarojs/components'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-
-import AtIcon from '../../components/icon/index'
 import AtComponent from '../../common/component'
 
 export default class AtRate extends AtComponent {
-  static defaultProps = {
-    isTest: false,
-    customStyle: '',
-    className: '',
-    size: 20,
-    value: 0,
-    max: 5,
-    margin: 5,
-    onChange: () => { }
-  }
-
-  static propTypes = {
-    customStyle: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string
-    ]),
-    className: PropTypes.oneOfType([
-      PropTypes.array,
-      PropTypes.string
-    ]),
-    size: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number
-    ]),
-    value: PropTypes.number,
-    max: PropTypes.number,
-    margin: PropTypes.number,
-    onChange: PropTypes.func
-  }
-
   constructor () {
     super(...arguments)
     if (process.env.NODE_ENV === 'test') {
@@ -61,6 +29,10 @@ export default class AtRate extends AtComponent {
     const iconStyle = {
       marginRight: Taro.pxTransform(margin)
     }
+    const starIconStyle = {
+      fontSize: size ? `${size}px` : '',
+    }
+
     // 生成星星颜色 className 数组，方便在jsx中直接map
     const classNameArr = []
     const floorValue = Math.floor(value)
@@ -87,13 +59,43 @@ export default class AtRate extends AtComponent {
             style={iconStyle}
             onClick={this.handleClick.bind(this, i + 1)}
           >
-            <AtIcon customStyle={{ fontSize: `${size}px` }} value='star-2' />
+            <Text className='at-icon at-icon-star-2' style={starIconStyle}></Text>
             <View className='at-rate__left'>
-              <AtIcon customStyle={{ fontSize: `${size}px` }} value='star-2' />
+              <Text className='at-icon at-icon-star-2' style={starIconStyle}></Text>
             </View>
           </View>)
         }
       </View>
     )
   }
 }
+
+AtRate.defaultProps = {
+  isTest: false,
+  customStyle: '',
+  className: '',
+  size: 0,
+  value: 0,
+  max: 5,
+  margin: 5,
+  onChange: () => {},
+}
+
+AtRate.propTypes = {
+  customStyle: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string
+  ]),
+  className: PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.string
+  ]),
+  size: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
+  value: PropTypes.number,
+  max: PropTypes.number,
+  margin: PropTypes.number,
+  onChange: PropTypes.func,
+}