feat(taro-ui): 增加customStyle

jd-opensource · Sep 13, 2018 · c38b0a5 · c38b0a5
1 parent 329e5b4
commit c38b0a5
Show file tree

Hide file tree

Showing 14 changed files with 42 additions and 0 deletions.
diff --git a/@types/avatar.d.ts b/@types/avatar.d.ts
@@ -11,6 +11,8 @@ export interface AtAvatarProps {
   openData?: object
 
   className?: string | Array<string>
+
+  customStyle?: object | string
 }
 
 declare const AtAvatar: ComponentClass<AtAvatarProps>

diff --git a/@types/badge.d.ts b/@types/badge.d.ts
@@ -9,6 +9,8 @@ export interface AtBadgeProps {
   maxValue?: number
 
   className?: string | Array<string>
+
+  customStyle?: object | string
 }
 
 declare const AtBadge: ComponentClass<AtBadgeProps>

diff --git a/@types/button.d.ts b/@types/button.d.ts
@@ -14,6 +14,8 @@ export interface AtButtonProps {
 
   className?: string | Array<string>
 
+  customStyle?: object | string
+
   onClick?: (event: BaseEventFunction) => void
 
   // start Button props

diff --git a/@types/noticebar.d.ts b/@types/noticebar.d.ts
@@ -18,6 +18,8 @@ export interface AtNoticeBarProps {
 
   className?: string | Array<string>
 
+  customStyle?: object | string
+
   onClose?: (event: BaseEventFunction) => void
 
   onGotoMore?: (event: BaseEventFunction) => void

diff --git a/@types/pagination.d.ts b/@types/pagination.d.ts
@@ -14,6 +14,8 @@ export interface AtPaginationProps {
 
   className?: string | Array<string>
 
+  customStyle?: object | string
+
   onPageChange?: (data: {type: 'prev' | 'next', current: number}) => void
 }
 

diff --git a/@types/tag.d.ts b/@types/tag.d.ts
@@ -14,6 +14,8 @@ export interface AtTagProps {
 
   className?: string | Array<string>
 
+  customStyle?: object | string
+
   onClick?: (event: BaseEventFunction) => void
 }
 

diff --git a/@types/timeline.d.ts b/@types/timeline.d.ts
@@ -17,6 +17,8 @@ export interface AtTimeLineProps {
   items: Array<Item>
 
   className?: string | Array<string>
+
+  customStyle?: object | string
 }
 
 declare const AtTimeLine: ComponentClass<AtTimeLineProps>

diff --git a/src/components/avatar/index.js b/src/components/avatar/index.js
@@ -30,6 +30,7 @@ export default class AtAvatar extends AtComponent {
       image,
       text,
       openData,
+      customStyle,
     } = this.props
     let rootClassName = ['at-avatar']
     const sizeClass = SIZE_CLASS[size] || ''
@@ -52,6 +53,7 @@ export default class AtAvatar extends AtComponent {
     return (
       <View
         className={this.getClassName(rootClassName, this.props.className)}
+        style={customStyle}
       >{elem}</View>
     )
   }
@@ -62,11 +64,13 @@ AtAvatar.defaultProps = {
   circle: false,
   image: '',
   openData: {},
+  customStyle: {},
 }
 
 AtAvatar.propTypes = {
   size: PropTypes.oneOf(['large', 'normal', 'small']),
   circle: PropTypes.bool,
   image: PropTypes.string,
   openData: PropTypes.object,
+  customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
 }
diff --git a/src/components/badge/index.js b/src/components/badge/index.js
@@ -27,6 +27,7 @@ export default class AtBadge extends AtComponent {
       dot,
       value,
       maxValue,
+      customStyle,
     } = this.props
     const rootClassName = ['at-badge']
 
@@ -35,6 +36,7 @@ export default class AtBadge extends AtComponent {
     return (
       <View
         className={this.getClassName(rootClassName, this.props.className)}
+        style={customStyle}
       >
         {this.props.children}
         {dot ? <View className='at-badge__dot'></View> : val !== '' && <View className='at-badge__num'>{val}</View>}
@@ -47,6 +49,7 @@ AtBadge.defaultProps = {
   dot: false,
   value: '',
   maxValue: 99,
+  customStyle: {},
 }
 
 AtBadge.propTypes = {
@@ -56,4 +59,5 @@ AtBadge.propTypes = {
     PropTypes.number
   ]),
   maxValue: PropTypes.number,
+  customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
 }
diff --git a/src/components/button/index.js b/src/components/button/index.js
@@ -53,6 +53,7 @@ export default class AtButton extends AtComponent {
       circle,
       loading,
       disabled,
+      customStyle,
 
       formType,
       openType,
@@ -86,6 +87,7 @@ export default class AtButton extends AtComponent {
     return (
       <View
         className={this.getClassName(rootClassName, this.props.className)}
+        style={customStyle}
         onClick={this.onClick.bind(this)}
       >
         {isWEAPP && !disabled && <Button className='at-button__wxbutton'
@@ -117,6 +119,7 @@ AtButton.defaultProps = {
   circle: false,
   loading: false,
   disabled: false,
+  customStyle: {},
   onClick: () => {},
   // Button props
   formType: '',
@@ -142,6 +145,7 @@ AtButton.propTypes = {
   loading: PropTypes.bool,
   disabled: PropTypes.bool,
   onClick: PropTypes.func,
+  customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
 
   formType: PropTypes.oneOf(['submit', 'reset']),
   openType: PropTypes.oneOf(['contact', 'share', 'getUserInfo', 'getPhoneNumber', 'launchApp', 'openSetting', 'feedback', 'getRealnameAuthInfo']),

diff --git a/src/components/noticebar/index.js b/src/components/noticebar/index.js
@@ -68,6 +68,7 @@ export default class AtNoticebar extends AtComponent {
       single,
       icon,
       marquee,
+      customStyle,
     } = this.props
     let {
       showMore,
@@ -100,6 +101,7 @@ export default class AtNoticebar extends AtComponent {
       this.state.show &&
       <View
         className={this.getClassName(rootClassName, this.props.className)}
+        style={customStyle}
       >
         {close && <View className='at-noticebar__close' onClick={this.onClose.bind(this)}><AtIcon value='close' size='16' color='#ccc'></AtIcon></View>}
         <View className='at-noticebar__content'>
@@ -122,6 +124,7 @@ AtNoticebar.defaultProps = {
   moreText: '查看详情',
   showMore: false,
   icon: '',
+  customStyle: {},
   onClose: () => {},
   onGotoMore: () => {},
 }
@@ -134,6 +137,7 @@ AtNoticebar.propTypes = {
   moreText: PropTypes.string,
   showMore: PropTypes.bool,
   icon: PropTypes.string,
+  customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   onClose: PropTypes.func,
   onGotoMore: PropTypes.func,
 }
diff --git a/src/components/pagination/index.js b/src/components/pagination/index.js
@@ -79,6 +79,7 @@ export default class AtPagination extends AtComponent {
     const {
       icon,
       pickerSelect,
+      customStyle,
     } = this.props
     const { current, maxPage } = this.state
 
@@ -90,6 +91,7 @@ export default class AtPagination extends AtComponent {
     return (
       <View
         className={this.getClassName(rootClassName, this.props.className)}
+        style={customStyle}
       >
         <View className='at-pagination__operate'>
           <View className='at-pagination__btns'>
@@ -122,6 +124,7 @@ AtPagination.defaultProps = {
   pageSize: 20,
   icon: false,
   pickerSelect: false,
+  customStyle: {},
   onPageChange: () => {},
 }
 
@@ -131,5 +134,6 @@ AtPagination.propTypes = {
   pageSize: PropTypes.number,
   icon: PropTypes.bool,
   pickerSelect: PropTypes.bool,
+  customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   onPageChange: PropTypes.func,
 }
diff --git a/src/components/tag/index.js b/src/components/tag/index.js
@@ -34,6 +34,7 @@ export default class AtTag extends AtComponent {
       circle = false,
       disabled = false,
       active = false,
+      customStyle,
     } = this.props
     let rootClassName = ['at-tag']
     const sizeClass = SIZE_CLASS[size] || ''
@@ -48,6 +49,7 @@ export default class AtTag extends AtComponent {
     return (
       <View
         className={this.getClassName(rootClassName, this.props.className)}
+        style={customStyle}
         onClick={this.onClick.bind(this)}
       >
         {this.props.children}
@@ -63,6 +65,7 @@ AtTag.defaultProps = {
   circle: false,
   active: false,
   disabled: false,
+  customStyle: {},
   onClick: () => {},
 }
 
@@ -73,5 +76,6 @@ AtTag.propTypes = {
   circle: PropTypes.bool,
   active: PropTypes.bool,
   disabled: PropTypes.bool,
+  customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   onClick: PropTypes.func,
 }
diff --git a/src/components/timeline/index.js b/src/components/timeline/index.js
@@ -10,6 +10,7 @@ export default class AtTimeline extends AtComponent {
     const {
       pending,
       items,
+      customStyle,
     } = this.props
 
     const rootClassName = ['at-timeline']
@@ -54,6 +55,7 @@ export default class AtTimeline extends AtComponent {
     return (
       <View
         className={this.getClassName(rootClassName, this.props.className)}
+        style={customStyle}
       >
         {itemElems}
       </View>
@@ -64,9 +66,11 @@ export default class AtTimeline extends AtComponent {
 AtTimeline.defaultProps = {
   pending: false,
   items: [],
+  customStyle: {},
 }
 
 AtTimeline.propTypes = {
   pending: PropTypes.bool,
   items: PropTypes.arrayOf(PropTypes.object),
+  customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,6 +14,8 @@ export interface AtPaginationProps { @@
       className?: string | Array<string>
+      customStyle?: object | string
       onPageChange?: (data: {type: 'prev' | 'next', current: number}) => void
     }
@@ Expand Down @@