From 1cfeceb1752d88f7bd30912a25860889c5cb04ec Mon Sep 17 00:00:00 2001 From: KovalM Date: Thu, 7 Sep 2017 20:16:52 +0300 Subject: [PATCH] fix(common): RNUIK-16 Rewrite rkChoice. Will be refactored --- examples/ExplorerApp/screens/ChoiceScreen.js | 63 +++++++++++++----- src/components/choiceGroup/rkChoiceGroup.js | 67 +++++++++++++------- 2 files changed, 90 insertions(+), 40 deletions(-) diff --git a/examples/ExplorerApp/screens/ChoiceScreen.js b/examples/ExplorerApp/screens/ChoiceScreen.js index f23b860af..9514d28e9 100755 --- a/examples/ExplorerApp/screens/ChoiceScreen.js +++ b/examples/ExplorerApp/screens/ChoiceScreen.js @@ -4,8 +4,6 @@ import { StyleSheet, ScrollView, TouchableOpacity, - TouchableHighlight, - Text, } from 'react-native'; import { RkText, @@ -13,12 +11,11 @@ import { RkChoice, RkTheme, RkSeparator, - RkPicker + RkButton, } from 'react-native-ui-kitten'; import {UtilStyles} from '../style/styles'; import Icon from 'react-native-vector-icons/FontAwesome'; - export class ChoiceScreen extends React.Component { static navigationOptions = { title: 'Selectable components' @@ -32,34 +29,68 @@ export class ChoiceScreen extends React.Component { name: 'Option 1' }, pikerVisible: false, - pickedValue: 'Pick Value' + pickedValue: 'Pick Value', + selectedOption: 0, }; + this.options = [ + { + id: 0, + name: "Option 0", + }, + { + id: 1, + name: "Option 1", + }, + { + id: 2, + name: "Option 2", + }, + { + id: 3, + name: "Option 3", + }, + ]; this.hidePicker = this.hidePicker.bind(this) this.handlePickedValue = this.handlePickedValue.bind(this) } - showPicker(){ - this.setState({ pikerVisible: true }) - }; - - hidePicker(){ - this.setState({ pikerVisible: false }); + hidePicker() { + this.setState({pikerVisible: false}); } - handlePickedValue(date){ + handlePickedValue(date) { this.setState({pickedValue: date}); this.hidePicker(); }; - generateArrayFromRange(start, finish){ - return Array.apply(null, Array(finish-start+1)).map(function (_, i) {return start + i;}); - } - render() { return ( + + + Choice from event + + { + this.options.map((option) => { + return + + + {option.name} + + + }) + } + + this.setState({selectedOption: (this.state.selectedOption + 1) % this.options.length})}> + Next + + + Classic selectable components diff --git a/src/components/choiceGroup/rkChoiceGroup.js b/src/components/choiceGroup/rkChoiceGroup.js index 689e9577e..3acecd268 100644 --- a/src/components/choiceGroup/rkChoiceGroup.js +++ b/src/components/choiceGroup/rkChoiceGroup.js @@ -102,30 +102,33 @@ export class RkChoiceGroup extends RkComponent { constructor(props) { super(props); - let values = {}; + this.values = {}; if (props.selectedIndex !== undefined) { - values[+props.selectedIndex] = true; + this.values[+props.selectedIndex] = true; + } + this.state = { + selectionWasUpdated: false, } - this.state = {values} } componentWillMount() { - let values = this.state.values; let index = 0; let process = (child) => { - if (child.type === RkChoice && values[index] === undefined) { - values[index++] = !!child.props.selected; + if (child.type === RkChoice && this.values[index] === undefined) { + this.values[index++] = child.props.selected; } else if (child.props && child.props.children) { React.Children.map(child.props.children, process) } }; React.Children.map(this.props.children, process); - this.setState({values}); } render() { + console.log(this.values); let {container} = this.defineStyles(); let children = this._processChildren(); + console.log(this.values); + this.state.selectionWasUpdated = false; return ( {children} @@ -134,20 +137,18 @@ export class RkChoiceGroup extends RkComponent { } _onSelect(index) { - let values = this.state.values; - if (this.props.radio) { - for (let key in values) { - values[key] = false + for (let key in this.values) { + this.values[key] = false } - values[index] = true; + this.values[index] = true; this.props.onChange && this.props.onChange(index); } else { - values[index] = !values[index]; - this.props.onChange && this.props.onChange(values); + this.values[index] = !this.values[index]; + this.props.onChange && this.props.onChange(index); } - this.setState({values}); + this.setState({selectionWasUpdated: true}); } _processChildren() { @@ -162,15 +163,32 @@ export class RkChoiceGroup extends RkComponent { let props = {}; if (child.type === RkChoice) { props.inTrigger = true; - props.selected = this.state.values[index]; + if (!this.state.selectionWasUpdated) { + if (this.props.radio) { + if (child.props.selected){ + for (let key in this.values) { + this.values[key] = false + } + this.values[index] = true; + this.props.onChange && this.props.onChange(index); + } else { + this.values[index] = index === this.props.selectedIndex ? true : child.props.selected; + this.props.onChange && child.props.selected && this.props.onChange(index); + } + } else { + this.values[index] = index === this.props.selectedIndex ? true : child.props.selected; + this.props.onChange && this.values[index] && this.props.onChange(index); + } + } + props.selected = this.values[index]; appendChoiceProps(props, child); } else if (child.props && child.props.children) { - props.children = _.isArray(child.props.children) ? - React.Children.map(child.props.children, (child) => processTrigger(child, index)) : - processTrigger(child.props.children, index); + props.children = + _.isArray(child.props.children) + ? React.Children.map(child.props.children, (child) => processTrigger(child, index)) + : processTrigger(child.props.children, index); } return typeof child === 'string' ? child : React.cloneElement(child, props); - }; let process = (child) => { @@ -178,16 +196,17 @@ export class RkChoiceGroup extends RkComponent { if (child.type === RkChoice) { let choiceIndex = index++; passProps.onPress = () => this._onSelect(choiceIndex); - passProps.selected = this.state.values[choiceIndex]; + passProps.selected = this.values[choiceIndex]; appendChoiceProps(passProps, child); } else if (child.props && child.props.choiceTrigger) { let choiceIndex = index++; passProps.onPress = () => this._onSelect(choiceIndex); passProps.children = processTrigger(child.props.children, choiceIndex) } else if (child.props && child.props.children) { - passProps.children = _.isArray(child.props.children) ? - React.Children.map(child.props.children, process) : - process(child.props.children); + passProps.children = + _.isArray(child.props.children) + ? React.Children.map(child.props.children, process) + : process(child.props.children); } return typeof child === 'string' ? child : React.cloneElement(child, passProps); };