diff --git a/README.md b/README.md index b2ea1bb..28ec2c4 100755 --- a/README.md +++ b/README.md @@ -25,11 +25,18 @@ react-native run-android **Tips: In the Android system, the animations is not smooth, switch to the release mode can be resolved.** ## iPhoneX -Add the following code to support iPhoneX -```javascript -Theme.set ({fitIPhoneX: true}); +iPhoneX and iPhoneXS are fully supported after 0.6.0, and this option is **true** by default. + +If SafeAreaView is used, please use ```Theme.set({fitIPhoneX: false})``` to manually turn off it. + +## Redux +If you use Redux, you need to use the `````` package container (thanks [@Alexorz](https://github.com/Alexorz) ). + +``` +import { TopView } from 'teaset'; + +container => () => {container} ``` -** Note: This option is false by default, don't open it if SafeAreaView is used. ** # Documentation The document is being written, please refer to the example source code. diff --git a/components/ActionPopover/ActionPopoverItem.js b/components/ActionPopover/ActionPopoverItem.js index 5d55239..c2a6bef 100644 --- a/components/ActionPopover/ActionPopoverItem.js +++ b/components/ActionPopover/ActionPopoverItem.js @@ -21,16 +21,8 @@ export default class ActionPopoverItem extends Component { ...TouchableOpacity.defaultProps, }; - buildProps() { - let {style, title, leftSeparator, rightSeparator, ...others} = this.props; - - style = [{ - paddingVertical: Theme.apItemPaddingVertical, - paddingHorizontal: Theme.apItemPaddingHorizontal, - borderColor: Theme.apSeparatorColor, - borderLeftWidth: leftSeparator ? Theme.apSeparatorWidth : 0, - borderRightWidth: rightSeparator ? Theme.apSeparatorWidth : 0, - }].concat(style); + renderTitle() { + let {title} = this.props; if ((title || title === '' || title === 0) && !React.isValidElement(title)) { let textStyle = { @@ -41,16 +33,23 @@ export default class ActionPopoverItem extends Component { title = {title}; } - this.props = {style, title, leftSeparator, rightSeparator, ...others}; + return title; } render() { - this.buildProps(); + let {style, title, leftSeparator, rightSeparator, ...others} = this.props; + + style = [{ + paddingVertical: Theme.apItemPaddingVertical, + paddingHorizontal: Theme.apItemPaddingHorizontal, + borderColor: Theme.apSeparatorColor, + borderLeftWidth: leftSeparator ? Theme.apSeparatorWidth : 0, + borderRightWidth: rightSeparator ? Theme.apSeparatorWidth : 0, + }].concat(style); - let {title, ...others} = this.props; return ( - - {title} + + {this.renderTitle()} ); } diff --git a/components/ActionPopover/ActionPopoverView.js b/components/ActionPopover/ActionPopoverView.js index d7438ec..c9e88ac 100644 --- a/components/ActionPopover/ActionPopoverView.js +++ b/components/ActionPopover/ActionPopoverView.js @@ -34,9 +34,9 @@ export default class ActionPopoverView extends Overlay.PopoverView { item.onPress && item.onPress(); } - buildProps() { - let {popoverStyle, directionInsets, items, children, ...others} = this.props; - + buildPopoverStyle() { + this.defaultDirectionInsets = Theme.apDirectionInsets; + let {popoverStyle, arrow} = super.buildPopoverStyle(); popoverStyle = [{ backgroundColor: Theme.apColor, paddingVertical: Theme.apPaddingVertical, @@ -44,15 +44,15 @@ export default class ActionPopoverView extends Overlay.PopoverView { borderRadius: Theme.apBorderRadius, flexDirection: 'row', }].concat(popoverStyle); + return {popoverStyle, arrow}; + } - if (!directionInsets && directionInsets !== 0) { - directionInsets = Theme.apDirectionInsets; - } - - children = []; + renderContent() { + let {items} = this.props; + let list = []; for (let i = 0; items && i < items.length; ++i) { let item = items[i]; - children.push( + list.push( ); } - - this.props = {popoverStyle, directionInsets, items, children, ...others} ; - - super.buildProps(); + return super.renderContent(list); } + } diff --git a/components/ActionSheet/ActionSheetItem.js b/components/ActionSheet/ActionSheetItem.js index 2a2f7ae..ccf5738 100644 --- a/components/ActionSheet/ActionSheetItem.js +++ b/components/ActionSheet/ActionSheetItem.js @@ -27,9 +27,8 @@ export default class ActionSheetItem extends Component { disabled: false, }; - buildProps() { - let {style, type, title, topSeparator, bottomSeparator, disabled, activeOpacity, onPress, ...others} = this.props; - + buildStyle() { + let {style, type} = this.props; style = [{ backgroundColor: type === 'cancel' ? Theme.asCancelItemColor : Theme.asItemColor, paddingLeft: Theme.asItemPaddingLeft, @@ -40,8 +39,40 @@ export default class ActionSheetItem extends Component { overflow: 'hidden', justifyContent: 'center', }].concat(style); + return style; + } + + renderSeparator(separator) { + let {type} = this.props; + + let indentViewStyle = { + backgroundColor: 'rgba(0,0,0,0)', + paddingLeft: Theme.asItemPaddingLeft, + } + let separatorStyle; + if (type === 'cancel') { + separatorStyle = { + backgroundColor: Theme.asCancelItemSeparatorColor, + height: Theme.asCancelItemSeparatorLineWidth, + } + } else { + separatorStyle = { + backgroundColor: Theme.asItemSeparatorColor, + height:Theme.asItemSeparatorLineWidth, + } + } + switch (separator) { + case 'full': return ; + case 'indent': return ; + default: return null; + } + } + + renderTitle() { + let {type, title, disabled} = this.props; + if (title === null || title === undefined || React.isValidElement(title)) return title; - let textStyle, separatorStyle; + let textStyle; if (type === 'cancel') { textStyle = { backgroundColor: 'rgba(0, 0, 0, 0)', @@ -51,10 +82,6 @@ export default class ActionSheetItem extends Component { opacity: disabled ? Theme.asItemDisabledOpacity : 1, overflow: 'hidden', }; - separatorStyle = { - backgroundColor:Theme.asCancelItemSeparatorColor, - height: Theme.asCancelItemSeparatorLineWidth, - } } else { textStyle = { backgroundColor: 'rgba(0, 0, 0, 0)', @@ -64,69 +91,22 @@ export default class ActionSheetItem extends Component { opacity: disabled ? Theme.asItemDisabledOpacity : 1, overflow: 'hidden', }; - separatorStyle = { - backgroundColor: Theme.asItemSeparatorColor, - height:Theme.asItemSeparatorLineWidth, - } } - - if ((title || title === '' || title === 0) && !React.isValidElement(title)) { - title = {title}; - } - - let indentViewStyle = { - backgroundColor: StyleSheet.flatten(style).backgroundColor, - paddingLeft: Theme.asItemPaddingLeft, - } - switch (topSeparator) { - case 'none': - topSeparator = null; - break; - case 'full': - topSeparator = ; - break; - case 'indent': - topSeparator = ( - - - - ); - break; - } - switch (bottomSeparator) { - case 'none': - bottomSeparator = null; - break; - case 'full': - bottomSeparator = ; - break; - case 'indent': - bottomSeparator = ( - - - - ); - break; - } - - if (disabled) activeOpacity = 1; - - this.props = {style, type, title, topSeparator, bottomSeparator, disabled, activeOpacity, onPress, ...others}; + return {title}; } render() { - this.buildProps(); - - let {style, title, topSeparator, bottomSeparator, ...others} = this.props; + let {style, children, type, title, topSeparator, bottomSeparator, disabled, activeOpacity, ...others} = this.props; return ( - {topSeparator} - - {title} + {this.renderSeparator(topSeparator)} + + {this.renderTitle()} - {bottomSeparator} + {this.renderSeparator(bottomSeparator)} ); } } + diff --git a/components/ActionSheet/ActionSheetView.js b/components/ActionSheet/ActionSheetView.js index 08aa92a..132777c 100644 --- a/components/ActionSheet/ActionSheetView.js +++ b/components/ActionSheet/ActionSheetView.js @@ -46,15 +46,13 @@ export default class ActionSheetView extends Overlay.PullView { this.close(true); } - buildProps() { - super.buildProps(); + renderContent() { + let {items, cancelItem} = this.props; - let {items, cancelItem, children, ...others} = this.props; - - children = []; + let list = []; for (let i = 0; items && i < items.length; ++i) { let item = items[i]; - children.push( + list.push( ); } - children.push( + list.push( ); - this.props = {items, cancelItem, children, ...others}; + return super.renderContent(list); } } diff --git a/components/AlbumView/AlbumSheet.js b/components/AlbumView/AlbumSheet.js index fabaee2..c3c8f4b 100644 --- a/components/AlbumView/AlbumSheet.js +++ b/components/AlbumView/AlbumSheet.js @@ -270,11 +270,19 @@ export default class AlbumSheet extends TransformView { }); } - buildProps() { - let {style, image, thumb, load, children, onLayout, ...others} = this.props; - let {position, imageLoaded, thumbLoaded, fitWidth, fitHeight} = this.state; + buildStyle() { + return [{backgroundColor: 'rgba(0, 0, 0, 0)'}].concat(super.buildStyle()); + } - style = [{backgroundColor: 'rgba(0, 0, 0, 0)'}].concat(style); + onLayout(e) { + let {width, height} = e.nativeEvent.layout; + this.layoutChange(width, height); + super.onLayout(e); + } + + renderContent() { + let {image, thumb, children} = this.props; + let {position, imageLoaded, thumbLoaded, fitWidth, fitHeight} = this.state; let childrenStyle = {width: fitWidth, height: fitHeight}; if (React.isValidElement(image)) { @@ -287,15 +295,7 @@ export default class AlbumSheet extends TransformView { } } - let saveOnLayout = onLayout; - onLayout = e => { - let {width, height} = e.nativeEvent.layout; - this.layoutChange(width, height); - saveOnLayout && saveOnLayout(e); - }; - - this.props = {style, image, thumb, load, children, onLayout, ...others}; - super.buildProps(); + return children; } } diff --git a/components/Badge/Badge.js b/components/Badge/Badge.js index c400016..74c9ad6 100644 --- a/components/Badge/Badge.js +++ b/components/Badge/Badge.js @@ -24,8 +24,8 @@ export default class Badge extends Component { maxCount: 99, }; - buildProps() { - let {style, type, count, countStyle, maxCount, children, ...others} = this.props; + buildStyle() { + let {style, type, count} = this.props; let width, height, minWidth, borderRadius, borderWidth, padding; switch (type) { @@ -68,25 +68,35 @@ export default class Badge extends Component { flexDirection: 'row', }].concat(style); - if (type === 'dot') children = null; + return style; + } + + renderInner() { + let {type, count, countStyle, maxCount, children} = this.props; + + if (type === 'dot') return null; else if (count || count === 0) { countStyle = [{ color: Theme.badgeTextColor, fontSize: Theme.badgeFontSize, }].concat(countStyle); - children = ( + return ( {count > maxCount ? maxCount + '+' : count} ); + } else { + return children; } - - this.props = {style, type, count, countStyle, maxCount, children, ...others}; } render() { - this.buildProps(); - return ; + let {style, children, type, count, countStyle, maxCount, ...others} = this.props; + return ( + + {this.renderInner()} + + ); } } diff --git a/components/BasePage/BasePage.js b/components/BasePage/BasePage.js index f67b853..e3c8b64 100644 --- a/components/BasePage/BasePage.js +++ b/components/BasePage/BasePage.js @@ -33,8 +33,8 @@ export default class BasePage extends Component { constructor(props) { super(props); this.didMount = false; //代替被废弃的isMounted + this.isFocused = false; //this.state.isFocused move to this.isFocused this.state = { - isFocused: false, }; } @@ -67,7 +67,7 @@ export default class BasePage extends Component { //Call after the scene transition by Navigator.onDidFocus onDidFocus() { - if (!this.state.isFocused) this.setState({isFocused: true}); + this.isFocused = true; } //Call before the scene transition by Navigator.onWillFocus @@ -86,13 +86,13 @@ export default class BasePage extends Component { return false; } - buildProps() { - let {style, ...others} = this.props; + buildStyle() { + let {style} = this.props; style = [{ flex: 1, backgroundColor: Theme.pageColor, }].concat(style); - return ({style, ...others}); + return style; } renderPage() { @@ -100,13 +100,12 @@ export default class BasePage extends Component { } render() { - let {autoKeyboardInsets, keyboardTopInsets, ...others} = this.buildProps(); + let {style, children, scene, autoKeyboardInsets, keyboardTopInsets, ...others} = this.props; return ( - + {this.renderPage()} {autoKeyboardInsets ? : null} ); } } - diff --git a/components/Button/Button.js b/components/Button/Button.js index 187ca2f..d9d374d 100644 --- a/components/Button/Button.js +++ b/components/Button/Button.js @@ -4,7 +4,7 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; -import {StyleSheet, View, Text, TouchableOpacity} from 'react-native'; +import {StyleSheet, Text, TouchableOpacity} from 'react-native'; import Theme from 'teaset/themes/Theme'; @@ -35,67 +35,56 @@ export default class Button extends TouchableOpacity { } } - buildProps() { - let {style, type, size, title, titleStyle, activeOpacity, disabled, children, ...others} = this.props; + buildStyle() { + let {style, type, size, disabled} = this.props; let backgroundColor, borderColor, borderWidth, borderRadius, paddingVertical, paddingHorizontal; - let textColor, textFontSize; switch (type) { case 'primary': backgroundColor = Theme.btnPrimaryColor; borderColor = Theme.btnPrimaryBorderColor; - textColor = Theme.btnPrimaryTitleColor; break; case 'secondary': backgroundColor = Theme.btnSecondaryColor; borderColor = Theme.btnSecondaryBorderColor; - textColor = Theme.btnSecondaryTitleColor; break; case 'danger': backgroundColor = Theme.btnDangerColor; borderColor = Theme.btnDangerBorderColor; - textColor = Theme.btnDangerTitleColor; break; case 'link': backgroundColor = Theme.btnLinkColor; borderColor = Theme.btnLinkBorderColor; - textColor = Theme.btnLinkTitleColor; break; default: backgroundColor = Theme.btnColor; borderColor = Theme.btnBorderColor; - textColor = Theme.btnTitleColor; } switch (size) { case 'xl': borderRadius = Theme.btnBorderRadiusXL; paddingVertical = Theme.btnPaddingVerticalXL; paddingHorizontal = Theme.btnPaddingHorizontalXL; - textFontSize = Theme.btnFontSizeXL; break; case 'lg': borderRadius = Theme.btnBorderRadiusLG; paddingVertical = Theme.btnPaddingVerticalLG; paddingHorizontal = Theme.btnPaddingHorizontalLG; - textFontSize = Theme.btnFontSizeLG; break; case 'sm': borderRadius = Theme.btnBorderRadiusSM; paddingVertical = Theme.btnPaddingVerticalSM; paddingHorizontal = Theme.btnPaddingHorizontalSM; - textFontSize = Theme.btnFontSizeSM; break; case 'xs': borderRadius = Theme.btnBorderRadiusXS; paddingVertical = Theme.btnPaddingVerticalXS; paddingHorizontal = Theme.btnPaddingHorizontalXS; - textFontSize = Theme.btnFontSizeXS; break; default: borderRadius = Theme.btnBorderRadiusMD; paddingVertical = Theme.btnPaddingVerticalMD; paddingHorizontal = Theme.btnPaddingHorizontalMD; - textFontSize = Theme.btnFontSizeMD; } borderWidth = Theme.btnBorderWidth; @@ -117,7 +106,28 @@ export default class Button extends TouchableOpacity { } this.state.anim._value = style.opacity === undefined ? 1 : style.opacity; + return style; + } + + renderTitle() { + let {type, size, title, titleStyle, children} = this.props; + if (!React.isValidElement(title) && (title || title === '' || title === 0)) { + let textColor, textFontSize; + switch (type) { + case 'primary': textColor = Theme.btnPrimaryTitleColor; break; + case 'secondary': textColor = Theme.btnSecondaryTitleColor; break; + case 'danger': textColor = Theme.btnDangerTitleColor; break; + case 'link': textColor = Theme.btnLinkTitleColor; break; + default: textColor = Theme.btnTitleColor; + } + switch (size) { + case 'xl': textFontSize = Theme.btnFontSizeXL; break; + case 'lg': textFontSize = Theme.btnFontSizeLG; break; + case 'sm': textFontSize = Theme.btnFontSizeSM; break; + case 'xs': textFontSize = Theme.btnFontSizeXS; break; + default: textFontSize = Theme.btnFontSizeMD; + } titleStyle = [{ color: textColor, fontSize: textFontSize, @@ -125,13 +135,16 @@ export default class Button extends TouchableOpacity { }].concat(titleStyle); title = {title}; } - if (title) children = title; - this.props = {style, type, size, title, titleStyle, activeOpacity, disabled, children, ...others}; + return title ? title : children; } render() { - this.buildProps(); - return super.render(); + let {style, type, size, title, titleStyle, children, ...others} = this.props; + return ( + + {this.renderTitle()} + + ); } } diff --git a/components/Checkbox/Checkbox.js b/components/Checkbox/Checkbox.js index 64817b9..73e8a46 100644 --- a/components/Checkbox/Checkbox.js +++ b/components/Checkbox/Checkbox.js @@ -4,7 +4,7 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; -import {View, Text, Image, TouchableOpacity} from 'react-native'; +import {StyleSheet, Text, Image, TouchableOpacity} from 'react-native'; import Theme from 'teaset/themes/Theme'; @@ -46,29 +46,18 @@ export default class Checkbox extends TouchableOpacity { this.setState({checked: nextProps.checked}); } } + if (nextProps.disabled != this.props.disabled) { + let opacity = Theme.cbDisabledOpacity; + if (!nextProps.disabled) { + let fs = StyleSheet.flatten(nextProps.style); + opacity = fs && (fs.opacity || fs.opacity === 0) ? fs.opacity : 1; + } + this.state.anim.setValue(opacity); + } } - buildProps() { - let {style, size, title, checkedIcon, uncheckedIcon, titleStyle, checkedIconStyle, uncheckedIconStyle, children, onPress, onChange, ...others} = this.props; - let {checked} = this.state; - - let iconSize, textFontSize, textPaddingLeft; - switch (size) { - case 'lg': - iconSize = Theme.cbIconSizeLG; - textFontSize = Theme.cbFontSizeLG; - textPaddingLeft = Theme.cbTitlePaddingLeftLG; - break; - case 'sm': - iconSize = Theme.cbIconSizeSM; - textFontSize = Theme.cbFontSizeSM; - textPaddingLeft = Theme.cbTitlePaddingLeftSM; - break; - default: - iconSize = Theme.cbIconSizeMD; - textFontSize = Theme.cbFontSizeMD; - textPaddingLeft = Theme.cbTitlePaddingLeftMD; - } + buildStyle() { + let {style, disabled} = this.props; style = [{ backgroundColor: 'rgba(0, 0, 0, 0)', @@ -76,31 +65,68 @@ export default class Checkbox extends TouchableOpacity { flexDirection: 'row', alignItems: 'center', }].concat(style); + style = StyleSheet.flatten(style); + if (disabled) { + style.opacity = Theme.cbDisabledOpacity; + } + this.state.anim._value = style.opacity === undefined ? 1 : style.opacity; + + return style; + } + + renderIcon() { + let {size, checkedIcon, uncheckedIcon, checkedIconStyle, uncheckedIconStyle} = this.props; + let {checked} = this.state; + + let iconSize; + switch (size) { + case 'lg': iconSize = Theme.cbIconSizeLG; break; + case 'sm': iconSize = Theme.cbIconSizeSM; break; + default: iconSize = Theme.cbIconSizeMD; + } + let iconStyle = [{ tintColor: checked ? Theme.cbCheckedTintColor : Theme.cbUncheckedTintColor, width: iconSize, height: iconSize, }].concat(checked ? checkedIconStyle : uncheckedIconStyle); - let textStyle = [{ - color: Theme.cbTitleColor, - fontSize: textFontSize, - overflow: 'hidden', - paddingLeft: textPaddingLeft, - }].concat(titleStyle); - if (React.isValidElement(checkedIcon)) { - checkedIcon = React.cloneElement(checkedIcon, {key: 'icon'}); - } else if (checkedIcon || checkedIcon === 0) { + if (!React.isValidElement(checkedIcon) && (checkedIcon || checkedIcon === 0)) { checkedIcon = ; } - if (React.isValidElement(uncheckedIcon)) { - uncheckedIcon = React.cloneElement(uncheckedIcon, {key: 'icon'}); - } else if (uncheckedIcon || uncheckedIcon === 0) { + if (!React.isValidElement(uncheckedIcon) && (uncheckedIcon || uncheckedIcon === 0)) { uncheckedIcon = ; } - if (React.isValidElement(title)) { - title = React.cloneElement(title, {key: 'title'}); - } else if ((title || title === '' || title === 0)) { + + return checked ? checkedIcon : uncheckedIcon; + } + + renderTitle() { + let {size, title, titleStyle} = this.props; + + if (!React.isValidElement(title) && (title || title === '' || title === 0)) { + let textFontSize, textPaddingLeft; + switch (size) { + case 'lg': + textFontSize = Theme.cbFontSizeLG; + textPaddingLeft = Theme.cbTitlePaddingLeftLG; + break; + case 'sm': + textFontSize = Theme.cbFontSizeSM; + textPaddingLeft = Theme.cbTitlePaddingLeftSM; + break; + default: + textFontSize = Theme.cbFontSizeMD; + textPaddingLeft = Theme.cbTitlePaddingLeftMD; + } + + let textStyle = [{ + color: Theme.cbTitleColor, + fontSize: textFontSize, + overflow: 'hidden', + paddingLeft: textPaddingLeft, + }].concat(titleStyle); + title = ( {title} @@ -108,30 +134,25 @@ export default class Checkbox extends TouchableOpacity { ); } - children = [ - checked ? checkedIcon : uncheckedIcon, - title ? title : null, - ]; - - onPress = () => { - this.setState({checked: !checked}); - onChange && onChange(!checked); - }; - - this.props = {style, size, title, checkedIcon, uncheckedIcon, titleStyle, checkedIconStyle, uncheckedIconStyle, children, onPress, onChange, ...others}; + return title; } render() { - this.buildProps(); - - if (this.props.disabled) { - return ( - - {super.render()} - - ); - } else { - return super.render(); - } + let {style, children, checked, defaultChecked, size, title, titleStyle, checkedIcon, checkedIconStyle, uncheckedIcon, uncheckedIconStyle, onChange, onPress, ...others} = this.props; + + return ( + { + this.setState({checked: !checked}); + onChange && onChange(!checked); + onPress && onPress(e); + }} + {...others} + > + {this.renderIcon()} + {this.renderTitle()} + + ); } } diff --git a/components/Input/Input.js b/components/Input/Input.js index 6957765..ed760b6 100644 --- a/components/Input/Input.js +++ b/components/Input/Input.js @@ -23,8 +23,8 @@ export default class Input extends TextInput { underlineColorAndroid: 'rgba(0, 0, 0, 0)', }; - buildProps() { - let {style, size, disabled, placeholderTextColor, pointerEvents, opacity, ...others} = this.props; + buildStyle() { + let {style, size} = this.props; let borderRadius, fontSize, paddingVertical, paddingHorizontal, height; switch (size) { @@ -61,18 +61,20 @@ export default class Input extends TextInput { height: height, }].concat(style); - if (!placeholderTextColor) placeholderTextColor = Theme.inputPlaceholderTextColor; - if (disabled) { - pointerEvents = 'none'; - opacity = Theme.inputDisabledOpacity; - } - - this.props = {style, size, disabled, placeholderTextColor, pointerEvents, opacity, ...others}; + return style; } render() { - this.buildProps(); - return super.render(); + let {style, size, disabled, placeholderTextColor, pointerEvents, opacity, ...others} = this.props; + return ( + + ); } } diff --git a/components/Label/Label.js b/components/Label/Label.js index ae77eab..a766960 100644 --- a/components/Label/Label.js +++ b/components/Label/Label.js @@ -24,8 +24,8 @@ export default class Label extends Component { numberOfLines: 1, }; - buildProps() { - let {type, size, style, text, children, ...others} = this.props; + buildStyle() { + let {type, size, style} = this.props; let color, fontSize; switch (size) { @@ -58,15 +58,15 @@ export default class Label extends Component { overflow: 'hidden', }].concat(style); - if (text || text === '' || text === 0) children = text; - - return {type, size, style, text, children, ...others}; + return style; } render() { - let props = this.buildProps(); + let {style, type, size, text, children, ...others} = this.props; return ( - + + {(text || text === '' || text === 0) ? text : children} + ); } } diff --git a/components/ListRow/ListRow.js b/components/ListRow/ListRow.js index 6374039..eabfe97 100644 --- a/components/ListRow/ListRow.js +++ b/components/ListRow/ListRow.js @@ -59,10 +59,9 @@ export default class ListRow extends Component { this.refs.containerView && this.refs.containerView.timingClose(); } - buildProps() { - let {style, activeOpacity, onPress, title, detail, titleStyle, detailStyle, detailMultiLine, icon, accessory, topSeparator, bottomSeparator, titlePlace, contentStyle, ...others} = this.props; + buildStyle() { + let {style} = this.props; - //style style = [{ backgroundColor: Theme.rowColor, paddingLeft: Theme.rowPaddingLeft, @@ -75,121 +74,23 @@ export default class ListRow extends Component { alignItems: 'center', }].concat(style); - //activeOpacity - if (!activeOpacity && activeOpacity !== 0) activeOpacity = onPress ? 0.2 : 1; - - //contentStyle - contentStyle = { - flex: 1, - overflow: 'hidden', - flexDirection: titlePlace === 'top' ? 'column' : 'row', - alignItems: titlePlace === 'top' ? 'stretch' : 'center', - justifyContent: 'space-between', - } - - //title - if (titlePlace === 'none') { - title = null; - } - if (typeof title === 'string' || typeof title === 'number') { - let textStyle = (!detail && titlePlace === 'left') ? {flexGrow: 1, flexShrink: 1} : null; - title =