From 40cfe6a805204c31d1704f720d5dd7e43f6a9691 Mon Sep 17 00:00:00 2001 From: arnonz Date: Wed, 7 Aug 2019 14:09:45 +0300 Subject: [PATCH 1/6] Initial commit --- src/components/picker/index.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/components/picker/index.js b/src/components/picker/index.js index 31dbf1025a..256dd22912 100644 --- a/src/components/picker/index.js +++ b/src/components/picker/index.js @@ -59,6 +59,10 @@ class Picker extends BaseComponent { * Render custom picker item */ renderItem: PropTypes.func, + /** + * Render custom picker modal + */ + renderExpandableModal: PropTypes.func, /** * Custom picker props (when using renderPicker, will apply on the button wrapper) */ @@ -241,9 +245,16 @@ class Picker extends BaseComponent { searchStyle, searchPlaceholder, renderCustomSearch, + renderExpandableModal, listProps} = this.getThemeProps(); const {showExpandableModal, selectedItemPosition} = this.state; + if (renderExpandableModal) { + const children = this.appendPropsToChildren(this.props.children) + + return renderExpandableModal(showExpandableModal, children) + } + return ( Date: Tue, 20 Aug 2019 01:47:34 +0300 Subject: [PATCH 2/6] Added support for cutom modal --- src/components/picker/index.js | 66 ++++++++++++++++++++-------------- 1 file changed, 39 insertions(+), 27 deletions(-) diff --git a/src/components/picker/index.js b/src/components/picker/index.js index 256dd22912..0d10ddb0a4 100644 --- a/src/components/picker/index.js +++ b/src/components/picker/index.js @@ -14,13 +14,12 @@ import NativePicker from './NativePicker'; import PickerModal from './PickerModal'; import PickerItem from './PickerItem'; - const PICKER_MODES = { SINGLE: 'SINGLE', - MULTI: 'MULTI', + MULTI: 'MULTI' }; const ItemType = PropTypes.shape({ - value: PropTypes.any, + value: PropTypes.any, label: PropTypes.string }); @@ -36,7 +35,13 @@ class Picker extends BaseComponent { /** * Picker current value in the shape of {value: ..., label: ...}, for custom shape use 'getItemValue' prop */ - value: PropTypes.oneOfType([ItemType, PropTypes.arrayOf(ItemType), PropTypes.object, PropTypes.string, PropTypes.number]), + value: PropTypes.oneOfType([ + ItemType, + PropTypes.arrayOf(ItemType), + PropTypes.object, + PropTypes.string, + PropTypes.number + ]), /** * Callback for when picker value change */ @@ -62,7 +67,7 @@ class Picker extends BaseComponent { /** * Render custom picker modal */ - renderExpandableModal: PropTypes.func, + renderCustomModal: PropTypes.func, /** * Custom picker props (when using renderPicker, will apply on the button wrapper) */ @@ -133,7 +138,6 @@ class Picker extends BaseComponent { this.state = { value: props.value, - showModal: false, selectedItemPosition: 0, }; @@ -157,7 +161,7 @@ class Picker extends BaseComponent { getLabel() { const {value} = this.state; - + if (_.isArray(value)) { return _.chain(value) .map('label') @@ -172,34 +176,34 @@ class Picker extends BaseComponent { handlePickerOnPress = () => { this.toggleExpandableModal(true); _.invoke(this.props, 'onPress'); - } + }; - toggleExpandableModal = (value) => { + toggleExpandableModal = value => { this.setState({showExpandableModal: value}); - } + }; - toggleItemSelection = (item) => { + toggleItemSelection = item => { const {value} = this.state; const newValue = _.xorBy(value, [item], 'value'); this.setState({ value: newValue, }); - } + }; cancelSelect = () => { this.setState({ value: this.props.value, }); this.toggleExpandableModal(false); - } + }; - onDoneSelecting = (item) => { + onDoneSelecting = item => { this.setState({searchValue: '', value: item}); // clean search when done selecting this.toggleExpandableModal(false); _.invoke(this.props, 'onChange', item); - } + }; - onSearchChange = (searchValue) => { + onSearchChange = searchValue => { this.setState({ searchValue, }); @@ -217,10 +221,10 @@ class Picker extends BaseComponent { appendPropsToChildren = () => { const {children, mode, getItemValue, showSearch, renderItem} = this.props; const {value, searchValue} = this.state; - const childrenWithProps = React.Children.map(children, (child) => { + const childrenWithProps = React.Children.map(children, child => { const childValue = PickerPresenter.getItemValue({getItemValue, ...child.props}); const childLabel = PickerPresenter.getItemLabel({...child.props, getLabel: child.props.getItemLabel}); - + if (!showSearch || _.isEmpty(searchValue) || _.includes(_.lowerCase(childLabel), _.lowerCase(searchValue))) { const selectedValue = PickerPresenter.getItemValue({value, getItemValue}); return React.cloneElement(child, { @@ -234,7 +238,7 @@ class Picker extends BaseComponent { }); return childrenWithProps; - } + }; renderExpandableModal = () => { const { @@ -245,14 +249,20 @@ class Picker extends BaseComponent { searchStyle, searchPlaceholder, renderCustomSearch, - renderExpandableModal, - listProps} = this.getThemeProps(); + renderCustomModal, + listProps + } = this.getThemeProps(); const {showExpandableModal, selectedItemPosition} = this.state; + const children = this.appendPropsToChildren(this.props.children); - if (renderExpandableModal) { - const children = this.appendPropsToChildren(this.props.children) + if (renderCustomModal) { + const modalProps = { + visible: showExpandableModal, + toggleModal: this.toggleExpandableModal, + children, + }; - return renderExpandableModal(showExpandableModal, children) + return renderCustomModal(modalProps); } return ( @@ -272,15 +282,17 @@ class Picker extends BaseComponent { renderCustomSearch={renderCustomSearch} listProps={listProps} > - {this.appendPropsToChildren(this.props.children)} + {children} ); - } + }; render() { const {useNativePicker, renderPicker, customPickerProps, testID} = this.props; - if (useNativePicker) return ; + if (useNativePicker) { + return ; + } if (_.isFunction(renderPicker)) { const {value} = this.state; From 59449bc82fba9adef7fa9798956d749a2ff03f36 Mon Sep 17 00:00:00 2001 From: arnonz Date: Tue, 20 Aug 2019 01:48:40 +0300 Subject: [PATCH 3/6] typo fix --- src/components/picker/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/picker/index.js b/src/components/picker/index.js index 0d10ddb0a4..1c0e81222c 100644 --- a/src/components/picker/index.js +++ b/src/components/picker/index.js @@ -149,7 +149,7 @@ class Picker extends BaseComponent { } if (props.useNativePicker && _.isPlainObject(props.value)) { - console.warn('UILib Picker: dont use object as value for native picker, use either string or a number'); + console.warn('UILib Picker: don\'t use object as value for native picker, use either string or a number'); } } From 23a89a6d0b9de83b775296a79be91592adce2117 Mon Sep 17 00:00:00 2001 From: arnonz Date: Tue, 20 Aug 2019 04:00:14 +0300 Subject: [PATCH 4/6] Added custom modal example --- .../screens/componentScreens/PickerScreen.js | 47 +++++++++++++++++-- 1 file changed, 44 insertions(+), 3 deletions(-) diff --git a/demo/src/screens/componentScreens/PickerScreen.js b/demo/src/screens/componentScreens/PickerScreen.js index 31f2e5ded7..ab3ecc1140 100644 --- a/demo/src/screens/componentScreens/PickerScreen.js +++ b/demo/src/screens/componentScreens/PickerScreen.js @@ -1,7 +1,7 @@ import _ from 'lodash'; import React, {Component} from 'react'; import {ScrollView, Image} from 'react-native'; -import {View, Colors, Text, Stepper, Typography, Picker, Avatar, Assets, TagsInput} from 'react-native-ui-lib'; //eslint-disable-line +import {View, Colors, Dialog, Text, Stepper, Typography, Picker, Avatar, Assets, TagsInput} from 'react-native-ui-lib'; //eslint-disable-line import contacts from '../../data/conversations'; import tagIcon from '../../assets/icons/tags.png'; import dropdown from '../../assets/icons/chevronDown.png'; @@ -29,6 +29,7 @@ export default class PickerScreen extends Component { // language: {value: 'java', label: 'Java'}, language: undefined, languages: [], + customModalValues: [], filter: filters[0], contact: contacts[0], tags: [{label: 'Amit'}, {label: 'Ethan'}], @@ -37,11 +38,34 @@ export default class PickerScreen extends Component { }; } + renderDialog = modalProps => { + const {visible, toggleModal, children} = modalProps; + + return ( + toggleModal(false)} + width="100%" + height="50%" + bottom + useSafeArea + style={{paddingTop: 20, backgroundColor: Colors.white}} + > + + + Custom modal + + {children} + + + ); + }; + render() { return ( - + Picker @@ -106,6 +131,22 @@ export default class PickerScreen extends Component { ))} + + this.setState({customModalValues: items})} + mode={Picker.modes.MULTI} + rightIconSource={dropdown} + renderCustomModal={this.renderDialog} + > + {_.map(options, option => ( + + ))} + + + Custom Picker: From ad1bc5f578d84631ed2349e10629bf9e7add69f2 Mon Sep 17 00:00:00 2001 From: arnonz Date: Tue, 20 Aug 2019 04:09:28 +0300 Subject: [PATCH 5/6] Cosmetics --- demo/src/screens/componentScreens/PickerScreen.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/demo/src/screens/componentScreens/PickerScreen.js b/demo/src/screens/componentScreens/PickerScreen.js index ab3ecc1140..2472806e27 100644 --- a/demo/src/screens/componentScreens/PickerScreen.js +++ b/demo/src/screens/componentScreens/PickerScreen.js @@ -46,13 +46,13 @@ export default class PickerScreen extends Component { visible={visible} onDismiss={() => toggleModal(false)} width="100%" - height="50%" + height="45%" bottom useSafeArea style={{paddingTop: 20, backgroundColor: Colors.white}} > - + Custom modal {children} From 2bc7beba54b8f4015e9b406f6c2bfb53c2dc3c60 Mon Sep 17 00:00:00 2001 From: Ethan Sharabi Date: Tue, 20 Aug 2019 16:52:10 +0300 Subject: [PATCH 6/6] Update index.js --- src/components/picker/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/picker/index.js b/src/components/picker/index.js index 1c0e81222c..63234858e9 100644 --- a/src/components/picker/index.js +++ b/src/components/picker/index.js @@ -65,7 +65,7 @@ class Picker extends BaseComponent { */ renderItem: PropTypes.func, /** - * Render custom picker modal + * Render custom picker modal (e.g ({visible, children, toggleModal}) => {...}) */ renderCustomModal: PropTypes.func, /**