From a1a1ad7acf14d521a4a58bc6c60704b2ba20b514 Mon Sep 17 00:00:00 2001 From: Oleg Date: Wed, 21 Mar 2018 18:54:18 +0200 Subject: [PATCH 1/3] form wip --- src/containers/Forms/AuthForm/AuthForm.js | 55 ++-- src/containers/Forms/AuthForm/CountryCodes.js | 236 ++++++++++++++++++ src/core/store/Configure.dev.store.js | 2 +- 3 files changed, 276 insertions(+), 17 deletions(-) create mode 100644 src/containers/Forms/AuthForm/CountryCodes.js diff --git a/src/containers/Forms/AuthForm/AuthForm.js b/src/containers/Forms/AuthForm/AuthForm.js index 2b183fba9..75e02b4d4 100644 --- a/src/containers/Forms/AuthForm/AuthForm.js +++ b/src/containers/Forms/AuthForm/AuthForm.js @@ -12,6 +12,10 @@ import { formValueSelector } from 'redux-form' import arrowImage from '../../../assets/img/icons/red_arrow.svg'; import countryIcon from '../../../assets/img/icons/ic_country.svg'; import phoneIcon from '../../../assets/img/icons/ic_phone.svg'; +import _ from 'lodash'; +import { change, reset } from 'redux-form'; +import { bindActionCreators } from 'redux'; +import CountryCodes from './CountryCodes'; const styles = theme => (stylesFunc(theme, arrowImage, countryIcon, phoneIcon)); @@ -19,9 +23,10 @@ const selector = formValueSelector('AuthForm') @connect((state) => ({ - countryState: selector(state,'Country') + countryStoreData: selector(state,'Country'), + countryCodeData: selector(state,'CodeNumber') -})) +}),dispatch => bindActionCreators({}, dispatch) ) class AuthForm extends Component { static propTypes = { @@ -30,40 +35,58 @@ class AuthForm extends Component { super(props); this.state = { isButtonActive: true, - + ResetSelect: true }; } + componentWillReceiveProps(newProps){ + if(newProps.countryStoreData && + !_.isEqual(newProps.countryStoreData,this.props.countryStoreData)) + { + this.props.dispatch(change('AuthForm', 'CodeNumber', newProps.countryStoreData.value.code)); + this.props.dispatch(change('AuthForm', 'PhoneNumber', '')); + } + if(this.props.countryCodeData && newProps.countryCodeData && !_.isEqual(newProps.countryCodeData ,this.props.countryCodeData) ){ + const result = _.find(CountryCodes, (country)=>{ + return country.value.code.trim() === newProps.countryCodeData.trim() + }); + this.props.dispatch(change('AuthForm', 'Country',result)); + } + } + shouldComponentUpdate(nextProps){ + return !_.isEqual(nextProps.countryStoreData,this.props.countryStoreData) + } render() { - const { classes } = this.props; - const { isButtonActive, countryState } = this.state; - console.log(countryState); + const { classes,countryStoreData } = this.props; + const { isButtonActive } = this.state; const maskedCodeInput = (inputRedux )=> { return + value={inputRedux.input.value} + placeholderChar=" " {...inputRedux.input} /> }; const maskedPhoneInput = (inputRedux )=> { return }; const ReactSelect = (inputRedux) => { - const options = [ - { value: {code:'381',mask:'11 111 1111'}, label: 'Serbia (RS)' }, - { value: {code:'380',mask:'11 111 11 11'}, label: 'Ukraine (UA)' }, - ]; + return + className={'cust-btn btn1' + (isButtonActive ? '' : ' disabled')}> Next -- GitLab