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

jd-opensource · Dec 26, 2018 · c57e64f · c57e64f
1 parent ce3456e
commit c57e64f
Show file tree

Hide file tree

Showing 10 changed files with 286 additions and 248 deletions.
diff --git a/src/components/tabs-pane/index.js b/src/components/tabs-pane/index.js
@@ -2,32 +2,9 @@ import Taro from '@tarojs/taro'
 import { View } from '@tarojs/components'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-
 import AtComponent from '../../common/component'
 
 export default class AtTabsPane extends AtComponent {
-  static defaultProps = {
-    customStyle: '',
-    className: '',
-    tabDirection: 'horizontal',
-    index: 0,
-    current: 0
-  }
-
-  static propTypes = {
-    customStyle: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string
-    ]),
-    className: PropTypes.oneOfType([
-      PropTypes.array,
-      PropTypes.string
-    ]),
-    tabDirection: PropTypes.oneOf(['horizontal', 'vertical']),
-    index: PropTypes.number,
-    current: PropTypes.number
-  }
-
   render () {
     const {
       customStyle,
@@ -54,3 +31,26 @@ export default class AtTabsPane extends AtComponent {
     )
   }
 }
+
+
+AtTabsPane.defaultProps = {
+  customStyle: '',
+  className: '',
+  tabDirection: 'horizontal',
+  index: 0,
+  current: 0,
+}
+
+AtTabsPane.propTypes = {
+  customStyle: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string
+  ]),
+  className: PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.string
+  ]),
+  tabDirection: PropTypes.oneOf(['horizontal', 'vertical']),
+  index: PropTypes.number,
+  current: PropTypes.number,
+}
diff --git a/src/components/textarea/index.js b/src/components/textarea/index.js
@@ -2,79 +2,9 @@ import Taro from '@tarojs/taro'
 import { View, Textarea } from '@tarojs/components'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-
 import AtComponent from '../../common/component'
 
-const defaultFunc = () => { }
-
 export default class AtTextarea extends AtComponent {
-  static defaultProps = {
-    isTest: false,
-    customStyle: '',
-    className: '',
-    value: '',
-    cursorSpacing: 100,
-    maxlength: 200,
-    placeholder: '',
-    disabled: false,
-    autoFocus: false,
-    focus: false,
-    showConfirmBar: false,
-    selectionStart: -1,
-    selectionEnd: -1,
-    count: true,
-    fixed: false,
-    height: '',
-    textOverflowForbidden: true,
-    onLinechange: defaultFunc,
-    onChange: defaultFunc,
-    onFocus: defaultFunc,
-    onBlur: defaultFunc,
-    onConfirm: defaultFunc
-  }
-
-  static propTypes = {
-    customStyle: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string
-    ]),
-    className: PropTypes.oneOfType([
-      PropTypes.array,
-      PropTypes.string
-    ]),
-    value: PropTypes.string.isRequired,
-    cursorSpacing: PropTypes.number,
-    maxlength: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number
-    ]),
-    placeholderClass: PropTypes.string,
-    placeholderStyle: PropTypes.string,
-    placeholder: PropTypes.string,
-    disabled: PropTypes.bool,
-    autoFocus: PropTypes.bool,
-    focus: PropTypes.bool,
-    showConfirmBar: PropTypes.bool,
-    selectionStart: PropTypes.number,
-    selectionEnd: PropTypes.number,
-    count: PropTypes.bool,
-    textOverflowForbidden: PropTypes.bool,
-    fixed: PropTypes.bool,
-    height: PropTypes.string,
-    onLinechange: PropTypes.func,
-    onChange: PropTypes.func.isRequired,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-    onConfirm: PropTypes.func
-  }
-
-  constructor () {
-    super(...arguments)
-    if (process.env.NODE_ENV === 'test') {
-      Taro.initPxTransform({ designWidth: 750 })
-    }
-  }
-
   handleInput () {
     this.props.onChange(...arguments)
   }
@@ -170,3 +100,62 @@ export default class AtTextarea extends AtComponent {
     )
   }
 }
+
+AtTextarea.defaultProps = {
+  customStyle: '',
+  className: '',
+  value: '',
+  cursorSpacing: 100,
+  maxlength: 200,
+  placeholder: '',
+  disabled: false,
+  autoFocus: false,
+  focus: false,
+  showConfirmBar: false,
+  selectionStart: -1,
+  selectionEnd: -1,
+  count: true,
+  fixed: false,
+  height: '',
+  textOverflowForbidden: true,
+  onLinechange: () => {},
+  onChange: () => {},
+  onFocus: () => {},
+  onBlur: () => {},
+  onConfirm: () => {},
+}
+
+AtTextarea.propTypes = {
+  customStyle: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string
+  ]),
+  className: PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.string
+  ]),
+  value: PropTypes.string.isRequired,
+  cursorSpacing: PropTypes.number,
+  maxlength: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
+  placeholderClass: PropTypes.string,
+  placeholderStyle: PropTypes.string,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.bool,
+  autoFocus: PropTypes.bool,
+  focus: PropTypes.bool,
+  showConfirmBar: PropTypes.bool,
+  selectionStart: PropTypes.number,
+  selectionEnd: PropTypes.number,
+  count: PropTypes.bool,
+  textOverflowForbidden: PropTypes.bool,
+  fixed: PropTypes.bool,
+  height: PropTypes.string,
+  onLinechange: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onConfirm: PropTypes.func,
+}
diff --git a/src/components/timeline/index.js b/src/components/timeline/index.js
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types'
 import Taro from '@tarojs/taro'
-import { View } from '@tarojs/components'
+import { View, Text } from '@tarojs/components'
 import classNames from 'classnames'
-
-import AtIcon from '../icon/index'
 import AtComponent from '../../common/component'
 
 export default class AtTimeline extends AtComponent {
@@ -29,24 +27,29 @@ export default class AtTimeline extends AtComponent {
         content = [],
       } = item
 
-      const itemRootClassName = ['at-timelineitem']
-      if (color) itemRootClassName.push(`at-timelineitem--${color}`)
+      const iconClass = classNames({
+        'at-icon': true,
+        [`at-icon-${icon}`]: icon,
+      })
+
+      const itemRootClassName = ['at-timeline-item']
+      if (color) itemRootClassName.push(`at-timeline-item--${color}`)
 
-      const dotClass = ['at-timelineitem__dot']
-      if (icon) dotClass.push('at-timelineitem__icon')
+      const dotClass = ['at-timeline-item__dot']
+      if (icon) dotClass.push('at-timeline-item__icon')
 
       return (
         <View className={classNames(itemRootClassName)} key={index}>
-          <View className='at-timelineitem__tail'></View>
+          <View className='at-timeline-item__tail'></View>
           <View className={classNames(dotClass)}>
-            {icon && <AtIcon customStyle={{ fontSize: '16px' }} value={icon} ></AtIcon>}
+            {icon && <Text className={iconClass}></Text>}
           </View>
-          <View className='at-timelineitem__content'>
-            <View className='at-timelineitem__content-item'>{title}</View>
+          <View className='at-timeline-item__content'>
+            <View className='at-timeline-item__content-item'>{title}</View>
             {
               content.map((sub, subIndex) => (
                 <View
-                  className='at-timelineitem__content-item at-timelineitem__content--sub'
+                  className='at-timeline-item__content-item at-timeline-item__content--sub'
                   key={subIndex}
                 >
                   {sub}

diff --git a/src/components/toast/index.js b/src/components/toast/index.js
@@ -3,8 +3,6 @@ import { View, Text, Image } 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'
 import statusImg from './img.json'
 
@@ -95,14 +93,18 @@ export default class AtToast extends AtComponent {
     const isRenderIcon = !!(icon && !(image || statusImg[status]))
 
     const bodyClass = classNames('toast-body', {
-      'at-toast-body--custom-image': image,
+      'at-toast__body--custom-image': image,
       'toast-body--text': !realImg && !icon,
-      [`at-toast-body--${status}`]: !!status
+      [`at-toast__body--${status}`]: !!status
+    })
+
+    const iconClass = classNames('at-icon', {
+      [`at-icon-${icon}`]: icon,
     })
 
     return _isOpened ? (
       <View className={classNames('at-toast', this.props.className)}>
-        {hasMask && <View className='at-toast-overlay' />}
+        {hasMask && <View className='at-toast__overlay' />}
         <View className={bodyClass} onClick={this.handleClick}>
           <View className='toast-body-content'>
             {realImg && (
@@ -116,7 +118,7 @@ export default class AtToast extends AtComponent {
             )}
             {isRenderIcon && (
               <View className='toast-body-content__icon'>
-                <AtIcon customStyle={{ fontSize: '50px' }} value={icon} color='white' />
+                <Text className={iconClass}></Text>
               </View>
             )}
             {text && (

diff --git a/src/pages/form/textarea/index.js b/src/pages/form/textarea/index.js
@@ -42,7 +42,7 @@ export default class Index extends Taro.Component {
                 <AtTextarea
                   value={this.state.value1}
                   onChange={this.handleChange.bind(this, 'value1')}
-                  maxLength={200}
+                  maxlength={200}
                   placeholder='你的问题是...'
                 />
               </View>
@@ -56,7 +56,7 @@ export default class Index extends Taro.Component {
                   count={false}
                   value={this.state.value2}
                   onChange={this.handleChange.bind(this, 'value2')}
-                  maxLength={200}
+                  maxlength={200}
                   placeholder='你的问题是...'
                 />
               </View>
@@ -70,7 +70,7 @@ export default class Index extends Taro.Component {
                   textOverflowForbidden={false}
                   value={this.state.value3}
                   onChange={this.handleChange.bind(this, 'value3')}
-                  maxLength={200}
+                  maxlength={200}
                   placeholder='你的问题是...'
                 />
               </View>
@@ -84,7 +84,7 @@ export default class Index extends Taro.Component {
                   height='300'
                   value={this.state.value4}
                   onChange={this.handleChange.bind(this, 'value4')}
-                  maxLength={200}
+                  maxlength={200}
                   placeholder='你的问题是...'
                 />
               </View>