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

jd-opensource · Dec 24, 2018 · 8ab1764 · 8ab1764
1 parent b12fe13
commit 8ab1764
Show file tree

Hide file tree

Showing 19 changed files with 417 additions and 335 deletions.
diff --git a/src/components/list/item/index.js b/src/components/list/item/index.js
@@ -1,10 +1,8 @@
 import Taro from '@tarojs/taro'
-import { View, Image, Switch } from '@tarojs/components'
+import { View, Image, Switch, Text } from '@tarojs/components'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import _isFunction from 'lodash/isFunction'
-
-import AtIcon from '../../icon/index'
 import AtComponent from '../../../common/component'
 
 export default class AtListItem extends AtComponent {
@@ -50,35 +48,39 @@ export default class AtListItem extends AtComponent {
       },
       this.props.className
     )
+    const iconClass = classNames(
+      iconInfo.prefixClass || 'at-icon',
+      {
+        [`${iconInfo.prefixClass || 'at-icon'}-${iconInfo.value}`]: iconInfo.value,
+      },
+      iconInfo.className
+    )
 
     return (
       <View className={rootClass} onClick={this.handleClick}>
         <View className='at-list__item-container'>
-          {thumb ? (
+          {thumb && (
             <View className='at-list__item-thumb item-thumb'>
               <Image
                 className='item-thumb__info'
                 mode='scaleToFill'
                 src={thumb}
               />
             </View>
-          ) : null}
-          {iconInfo.value ? (
+          )}
+          {iconInfo.value && (
             <View className='at-list__item-icon item-icon'>
-              <AtIcon
-                customStyle={
-                  this.mergeStyle(
-                    { fontSize: `${iconInfo.size || 24}px` },
-                    iconInfo.customStyle
-                  )
+              <Text
+                className={iconClass}
+                style={
+                  this.mergeStyle({
+                    color: iconInfo.color || '',
+                    fontSize: `${iconInfo.size || 24}px`,
+                  }, iconInfo.customStyle)
                 }
-                value={iconInfo.value}
-                color={iconInfo.color}
-                className={iconInfo.className}
-                prefixClass={iconInfo.prefixClass}
-              />
+              ></Text>
             </View>
-          ) : null}
+          )}
           <View className='at-list__item-content item-content'>
             <View className='item-content__info'>
               <View className='item-content__info-title'>{title}</View>
@@ -114,7 +116,7 @@ export default class AtListItem extends AtComponent {
 
             {arrow && (
               <View className='item-extra__icon'>
-                <AtIcon customStyle={{ fontSize: '24px' }} value={`chevron-${arrow}`} color='#c7c7cc' />
+                <Text className={classNames('at-icon', { [`at-icon-chevron-${arrow}`]: arrow }, 'item-extra__icon-arrow')}></Text>
               </View>
             )}
           </View>

diff --git a/src/components/load-more/index.js b/src/components/load-more/index.js
@@ -8,42 +8,6 @@ import AtButton from '../../components/button/index'
 import AtComponent from '../../common/component'
 
 export default class AtLoadMore extends AtComponent {
-  static defaultProps = {
-    customStyle: '',
-    className: '',
-    noMoreTextStyle: '',
-    moreBtnStyle: '',
-    status: 'more',
-    loadingText: '加载中',
-    moreText: '查看更多',
-    noMoreText: '没有更多',
-    onClick: () => {}
-  }
-
-  static propTypes = {
-    customStyle: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string
-    ]),
-    className: PropTypes.oneOfType([
-      PropTypes.array,
-      PropTypes.string
-    ]),
-    noMoreTextStyle: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string
-    ]),
-    moreBtnStyle: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string
-    ]),
-    status: PropTypes.oneOf(['more', 'loading', 'noMore']),
-    loadingText: PropTypes.string,
-    moreText: PropTypes.string,
-    noMoreText: PropTypes.string,
-    onClick: PropTypes.func
-  }
-
   onClick () {
     this.props.onClick(...arguments)
   }
@@ -90,3 +54,39 @@ export default class AtLoadMore extends AtComponent {
     )
   }
 }
+
+AtLoadMore.defaultProps = {
+  customStyle: '',
+  className: '',
+  noMoreTextStyle: '',
+  moreBtnStyle: '',
+  status: 'more',
+  loadingText: '加载中',
+  moreText: '查看更多',
+  noMoreText: '没有更多',
+  onClick: () => {},
+}
+
+AtLoadMore.propTypes = {
+  customStyle: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string
+  ]),
+  className: PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.string
+  ]),
+  noMoreTextStyle: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string
+  ]),
+  moreBtnStyle: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string
+  ]),
+  status: PropTypes.oneOf(['more', 'loading', 'noMore']),
+  loadingText: PropTypes.string,
+  moreText: PropTypes.string,
+  noMoreText: PropTypes.string,
+  onClick: PropTypes.func,
+}
diff --git a/src/components/loading/index.js b/src/components/loading/index.js
@@ -1,26 +1,9 @@
 import Taro from '@tarojs/taro'
 import PropTypes from 'prop-types'
 import { View } from '@tarojs/components'
-
 import AtComponent from '../../common/component'
 
 export default class AtLoading extends AtComponent {
-  static defaultProps = {
-    size: '18',
-    color: '#fff'
-  }
-
-  static propTypes = {
-    size: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number
-    ]),
-    color: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number
-    ])
-  }
-
   render () {
     const { color, size } = this.props
     const sizeStyle = {
@@ -42,3 +25,19 @@ export default class AtLoading extends AtComponent {
     )
   }
 }
+
+AtLoading.defaultProps = {
+  size: '18',
+  color: '#fff',
+}
+
+AtLoading.propTypes = {
+  size: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
+  color: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
+}
diff --git a/src/components/message/index.js b/src/components/message/index.js
@@ -2,26 +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'
 
 export default class AtMessage extends AtComponent {
-  static defaultProps = {
-    customStyle: '',
-    className: ''
-  }
-
-  static propTypes = {
-    customStyle: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string
-    ]),
-    className: PropTypes.oneOfType([
-      PropTypes.array,
-      PropTypes.string
-    ]),
-  }
-
   constructor () {
     super(...arguments)
     this.state = {
@@ -92,3 +75,19 @@ export default class AtMessage extends AtComponent {
     )
   }
 }
+
+AtMessage.defaultProps = {
+  customStyle: '',
+  className: '',
+}
+
+AtMessage.propTypes = {
+  customStyle: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string
+  ]),
+  className: PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.string
+  ]),
+}
diff --git a/src/components/modal/action/index.js b/src/components/modal/action/index.js
@@ -7,23 +7,27 @@ import AtComponent from '../../../common/component'
 export default class AtModalAction extends AtComponent {
   render () {
     const rootClass = classNames(
-      'at-modal-footer',
+      'at-modal__footer',
       {
-        'at-modal-footer--simple': this.props.isSimple
+        'at-modal__footer--simple': this.props.isSimple
       },
       this.props.className
     )
 
     return (
       <View className={rootClass}>
-        <View className='at-modal-footer__action at-modal-action'>
+        <View className='at-modal__action'>
           {this.props.children}
         </View>
       </View>
     )
   }
 }
 
+AtModalAction.defaultProps = {
+  isSimple: false,
+}
+
 AtModalAction.propTypes = {
-  isSimple: PropTypes.bool
+  isSimple: PropTypes.bool,
 }
diff --git a/src/components/modal/content/index.js b/src/components/modal/content/index.js
@@ -5,7 +5,7 @@ import AtComponent from '../../../common/component'
 
 export default class AtModalContent extends AtComponent {
   render () {
-    const rootClass = classNames('at-modal-content', this.props.className)
+    const rootClass = classNames('at-modal__content', this.props.className)
     return <View className={rootClass}>{this.props.children}</View>
   }
 }
diff --git a/src/components/modal/header/index.js b/src/components/modal/header/index.js
@@ -5,7 +5,7 @@ import AtComponent from '../../../common/component'
 
 export default class AtModalHeader extends AtComponent {
   render () {
-    const rootClass = classNames('at-modal-header', this.props.className)
+    const rootClass = classNames('at-modal__header', this.props.className)
     return <View className={rootClass}>{this.props.children}</View>
   }
 }