From 135f93a0c81804e0a0af1d456a3fe8d0b35c28e7 Mon Sep 17 00:00:00 2001 From: leekeunhwan Date: Sun, 23 Jun 2019 16:33:26 +0900 Subject: [PATCH] add listView Style Property --- components/ModalDropdown.js | 308 ++++++++++++++++++++---------------- 1 file changed, 172 insertions(+), 136 deletions(-) diff --git a/components/ModalDropdown.js b/components/ModalDropdown.js index 4dc5342..24e626d 100644 --- a/components/ModalDropdown.js +++ b/components/ModalDropdown.js @@ -2,11 +2,9 @@ * Created by sohobloo on 16/9/13. */ -'use strict'; +"use strict"; -import React, { - Component, -} from 'react'; +import React, { Component } from "react"; import { StyleSheet, @@ -19,16 +17,16 @@ import { TouchableOpacity, TouchableHighlight, Modal, - ActivityIndicator, -} from 'react-native'; + ActivityIndicator +} from "react-native"; -import PropTypes from 'prop-types'; +import PropTypes from "prop-types"; const TOUCHABLE_ELEMENTS = [ - 'TouchableHighlight', - 'TouchableOpacity', - 'TouchableWithoutFeedback', - 'TouchableNativeFeedback' + "TouchableHighlight", + "TouchableOpacity", + "TouchableWithoutFeedback", + "TouchableNativeFeedback" ]; export default class ModalDropdown extends Component { @@ -44,11 +42,36 @@ export default class ModalDropdown extends Component { showsVerticalScrollIndicator: PropTypes.bool, keyboardShouldPersistTaps: PropTypes.string, - style: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]), - textStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]), - dropdownStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]), - dropdownTextStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]), - dropdownTextHighlightStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]), + style: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.object, + PropTypes.array + ]), + textStyle: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.object, + PropTypes.array + ]), + dropdownStyle: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.object, + PropTypes.array + ]), + dropdownTextStyle: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.object, + PropTypes.array + ]), + dropdownTextHighlightStyle: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.object, + PropTypes.array + ]), + listStyle: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.object, + PropTypes.array + ]), adjustFrame: PropTypes.func, renderRow: PropTypes.func, @@ -64,11 +87,14 @@ export default class ModalDropdown extends Component { disabled: false, scrollEnabled: true, defaultIndex: -1, - defaultValue: 'Please select...', + defaultValue: "Please select...", options: null, animated: true, showsVerticalScrollIndicator: true, - keyboardShouldPersistTaps: 'never' + keyboardShouldPersistTaps: "never", + listStyle: { + // flexGrow: 1, + } }; constructor(props) { @@ -89,8 +115,8 @@ export default class ModalDropdown extends Component { } componentWillReceiveProps(nextProps) { - let {buttonText, selectedIndex} = this.state; - const {defaultIndex, defaultValue, options} = nextProps; + let { buttonText, selectedIndex } = this.state; + const { defaultIndex, defaultValue, options } = nextProps; buttonText = this._nextValue == null ? buttonText : this._nextValue; selectedIndex = this._nextIndex == null ? selectedIndex : this._nextIndex; if (selectedIndex < 0) { @@ -121,7 +147,7 @@ export default class ModalDropdown extends Component { _updatePosition(callback) { if (this._button && this._button.measure) { this._button.measure((fx, fy, width, height, px, py) => { - this._buttonFrame = {x: px, y: py, w: width, h: height}; + this._buttonFrame = { x: px, y: py, w: width, h: height }; callback && callback(); }); } @@ -142,7 +168,12 @@ export default class ModalDropdown extends Component { } select(idx) { - const {defaultValue, options, defaultIndex, renderButtonText} = this.props; + const { + defaultValue, + options, + defaultIndex, + renderButtonText + } = this.props; let value = defaultValue; if (idx == null || !options || idx >= options.length) { @@ -150,7 +181,9 @@ export default class ModalDropdown extends Component { } if (idx >= 0) { - value = renderButtonText ? renderButtonText(options[idx]) : options[idx].toString(); + value = renderButtonText + ? renderButtonText(options[idx]) + : options[idx].toString(); } this._nextValue = value; @@ -163,55 +196,58 @@ export default class ModalDropdown extends Component { } _renderButton() { - const {disabled, accessible, children, textStyle} = this.props; - const {buttonText} = this.state; + const { disabled, accessible, children, textStyle } = this.props; + const { buttonText } = this.state; return ( - this._button = button} - disabled={disabled} - accessible={accessible} - onPress={this._onButtonPress} + (this._button = button)} + disabled={disabled} + accessible={accessible} + onPress={this._onButtonPress} > - { - children || - ( - - - {buttonText} - - - ) - } + {children || ( + + + {buttonText} + + + )} ); } _onButtonPress = () => { - const {onDropdownWillShow} = this.props; - if (!onDropdownWillShow || - onDropdownWillShow() !== false) { + const { onDropdownWillShow } = this.props; + if (!onDropdownWillShow || onDropdownWillShow() !== false) { this.show(); } }; _renderModal() { - const {animated, accessible, dropdownStyle} = this.props; - const {showDropdown, loading} = this.state; + const { animated, accessible, dropdownStyle } = this.props; + const { showDropdown, loading } = this.state; if (showDropdown && this._buttonFrame) { const frameStyle = this._calcPosition(); - const animationType = animated ? 'fade' : 'none'; + const animationType = animated ? "fade" : "none"; return ( - - @@ -225,30 +261,37 @@ export default class ModalDropdown extends Component { } _calcPosition() { - const {dropdownStyle, style, adjustFrame} = this.props; + const { dropdownStyle, style, adjustFrame } = this.props; - const dimensions = Dimensions.get('window'); + const dimensions = Dimensions.get("window"); const windowWidth = dimensions.width; const windowHeight = dimensions.height; - const dropdownHeight = (dropdownStyle && StyleSheet.flatten(dropdownStyle).height) || + const dropdownHeight = + (dropdownStyle && StyleSheet.flatten(dropdownStyle).height) || StyleSheet.flatten(styles.dropdown).height; - const bottomSpace = windowHeight - this._buttonFrame.y - this._buttonFrame.h; + const bottomSpace = + windowHeight - this._buttonFrame.y - this._buttonFrame.h; const rightSpace = windowWidth - this._buttonFrame.x; - const showInBottom = bottomSpace >= dropdownHeight || bottomSpace >= this._buttonFrame.y; + const showInBottom = + bottomSpace >= dropdownHeight || bottomSpace >= this._buttonFrame.y; const showInLeft = rightSpace >= this._buttonFrame.x; const positionStyle = { height: dropdownHeight, - top: showInBottom ? this._buttonFrame.y + this._buttonFrame.h : Math.max(0, this._buttonFrame.y - dropdownHeight), + top: showInBottom + ? this._buttonFrame.y + this._buttonFrame.h + : Math.max(0, this._buttonFrame.y - dropdownHeight) }; if (showInLeft) { positionStyle.left = this._buttonFrame.x; } else { - const dropdownWidth = (dropdownStyle && StyleSheet.flatten(dropdownStyle).width) || - (style && StyleSheet.flatten(style).width) || -1; + const dropdownWidth = + (dropdownStyle && StyleSheet.flatten(dropdownStyle).width) || + (style && StyleSheet.flatten(style).width) || + -1; if (dropdownWidth !== -1) { positionStyle.width = dropdownWidth; } @@ -259,44 +302,47 @@ export default class ModalDropdown extends Component { } _onRequestClose = () => { - const {onDropdownWillHide} = this.props; - if (!onDropdownWillHide || - onDropdownWillHide() !== false) { + const { onDropdownWillHide } = this.props; + if (!onDropdownWillHide || onDropdownWillHide() !== false) { this.hide(); } }; _onModalPress = () => { - const {onDropdownWillHide} = this.props; - if (!onDropdownWillHide || - onDropdownWillHide() !== false) { + const { onDropdownWillHide } = this.props; + if (!onDropdownWillHide || onDropdownWillHide() !== false) { this.hide(); } }; _renderLoading() { - return ( - - ); + return ; } _renderDropdown() { - const {scrollEnabled, renderSeparator, showsVerticalScrollIndicator, keyboardShouldPersistTaps} = this.props; + const { + scrollEnabled, + renderSeparator, + showsVerticalScrollIndicator, + keyboardShouldPersistTaps, + listStyle + } = this.props; return ( - ); } get _dataSource() { - const {options} = this.props; + const { options } = this.props; const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); @@ -304,54 +350,54 @@ export default class ModalDropdown extends Component { } _renderRow = (rowData, sectionID, rowID, highlightRow) => { - const {renderRow, dropdownTextStyle, dropdownTextHighlightStyle, accessible} = this.props; - const {selectedIndex} = this.state; + const { + renderRow, + dropdownTextStyle, + dropdownTextHighlightStyle, + accessible + } = this.props; + const { selectedIndex } = this.state; const key = `row_${rowID}`; const highlighted = rowID == selectedIndex; - const row = !renderRow ? - ( {rowData} - ) : - renderRow(rowData, rowID, highlighted); + + ) : ( + renderRow(rowData, rowID, highlighted) + ); const preservedProps = { key, accessible, - onPress: () => this._onRowPress(rowData, sectionID, rowID, highlightRow), + onPress: () => this._onRowPress(rowData, sectionID, rowID, highlightRow) }; if (TOUCHABLE_ELEMENTS.find(name => name == row.type.displayName)) { - const props = {...row.props}; + const props = { ...row.props }; props.key = preservedProps.key; props.onPress = preservedProps.onPress; - const {children} = row.props; + const { children } = row.props; switch (row.type.displayName) { - case 'TouchableHighlight': { - return ( - - {children} - - ); + case "TouchableHighlight": { + return {children}; } - case 'TouchableOpacity': { - return ( - - {children} - - ); + case "TouchableOpacity": { + return {children}; } - case 'TouchableWithoutFeedback': { + case "TouchableWithoutFeedback": { return ( {children} ); } - case 'TouchableNativeFeedback': { + case "TouchableNativeFeedback": { return ( {children} @@ -362,18 +408,15 @@ export default class ModalDropdown extends Component { break; } } - return ( - - {row} - - ); + return {row}; }; _onRowPress(rowData, sectionID, rowID, highlightRow) { - const {onSelect, renderButtonText, onDropdownWillHide} = this.props; + const { onSelect, renderButtonText, onDropdownWillHide } = this.props; if (!onSelect || onSelect(rowID, rowData) !== false) { highlightRow(sectionID, rowID); - const value = renderButtonText && renderButtonText(rowData) || rowData.toString(); + const value = + (renderButtonText && renderButtonText(rowData)) || rowData.toString(); this._nextValue = value; this._nextIndex = rowID; this.setState({ @@ -390,17 +433,13 @@ export default class ModalDropdown extends Component { _renderSeparator = (sectionID, rowID, adjacentRowHighlighted) => { const key = `spr_${rowID}`; - return ( - - ); + return ; }; } const styles = StyleSheet.create({ button: { - justifyContent: 'center' + justifyContent: "center" }, buttonText: { fontSize: 12 @@ -409,33 +448,30 @@ const styles = StyleSheet.create({ flexGrow: 1 }, dropdown: { - position: 'absolute', + position: "absolute", height: (33 + StyleSheet.hairlineWidth) * 5, borderWidth: StyleSheet.hairlineWidth, - borderColor: 'lightgray', + borderColor: "lightgray", borderRadius: 2, - backgroundColor: 'white', - justifyContent: 'center' + backgroundColor: "white", + justifyContent: "center" }, loading: { - alignSelf: 'center' - }, - list: { - //flexGrow: 1, + alignSelf: "center" }, rowText: { paddingHorizontal: 6, paddingVertical: 10, fontSize: 11, - color: 'gray', - backgroundColor: 'white', - textAlignVertical: 'center' + color: "gray", + backgroundColor: "white", + textAlignVertical: "center" }, highlightedRowText: { - color: 'black' + color: "black" }, separator: { height: StyleSheet.hairlineWidth, - backgroundColor: 'lightgray' + backgroundColor: "lightgray" } });