(Refactor) Use final form step three #767
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import React from 'react' | ||
| import { Field } from 'react-final-form' | ||
|
|
||
| const defaultErrorStyles = { | ||
| color: 'red', | ||
| fontWeight: 'bold', | ||
| fontSize: '12px', | ||
| width: '100%', | ||
| height: '20px', | ||
| } | ||
|
|
||
| export const Error = ({ name, errorStyle }) => ( | ||
| <Field | ||
| name={name} | ||
| subscription={{ touched: true, pristine: true, error: true }} | ||
| render={({ meta: { touched, pristine, error } }) => { | ||
| const errors = [].concat(error) | ||
|
|
||
| return ( | ||
| <span> | ||
| { | ||
| errors.length | ||
| ? errors.map((error, index) => ( | ||
| <p className="error" key={index} style={errorStyle || defaultErrorStyles}>{(!pristine || touched) && error}</p> | ||
| )) | ||
| : null | ||
| } | ||
| </span> | ||
| ) | ||
| }} | ||
| /> | ||
| ) | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,19 @@ | ||
| import React from 'react' | ||
| import { Error } from './Error' | ||
|
|
||
| export const InputField2 = (props) => ( | ||
| <div className={props.side}> | ||
| <label htmlFor={props.input.name} className="label">{props.label}</label> | ||
| <input | ||
| autoComplete="off" | ||
| className="input" | ||
| type={props.type} | ||
| disabled={props.disabled} | ||
| id={props.input.name} | ||
| {...props.input} | ||
| /> | ||
| <p className="description">{props.description}</p> | ||
| <Error name={props.input.name} errorStyle={props.errorStyle}/> | ||
| </div> | ||
| ) | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,197 @@ | ||
| import React from 'react' | ||
| import { Field } from 'react-final-form' | ||
| import { OnChange } from 'react-final-form-listeners' | ||
| import { InputField2 } from './InputField2' | ||
| import { WhitelistInputBlock } from './WhitelistInputBlock' | ||
| import { | ||
| composeValidators, | ||
| isDateInFuture, | ||
| isDateLaterThan, | ||
| isDatePreviousThan, | ||
| isDateSameOrLaterThan, | ||
| isDateSameOrPreviousThan, | ||
| isInteger, | ||
| isLessOrEqualThan, | ||
| isPositive, | ||
| isRequired, | ||
| validateTokenName, | ||
| } from '../../utils/validations' | ||
| import { DESCRIPTION, TEXT_FIELDS } from '../../utils/constants' | ||
|
|
||
| const { | ||
| ALLOWMODIFYING, | ||
| CROWDSALE_SETUP_NAME, | ||
| START_TIME, | ||
| END_TIME, | ||
| RATE, | ||
| SUPPLY | ||
| } = TEXT_FIELDS | ||
|
|
||
| const inputErrorStyle = { | ||
| color: 'red', | ||
| fontWeight: 'bold', | ||
| fontSize: '12px', | ||
| width: '100%', | ||
| height: '20px', | ||
| } | ||
|
|
||
| export const TierBlock = ({ fields, ...props }) => { | ||
| const validateTierName = (value) => validateTokenName(value) | ||
|
|
||
| const validateTierStartDate = (index) => (value, values) => { | ||
| const listOfValidations = [ | ||
| isRequired(), | ||
| isDateInFuture(), | ||
| isDatePreviousThan("Should be previous than same tier's End Time")(values.tiers[index].endTime), | ||
| ] | ||
|
|
||
| if (index > 0) { | ||
| listOfValidations.push(isDateSameOrLaterThan("Should be same or later than previous tier's End Time")(values.tiers[index - 1].endTime)) | ||
| } | ||
|
|
||
| return composeValidators(...listOfValidations)(value) | ||
| } | ||
|
|
||
| const validateTierEndDate = (index) => (value, values) => { | ||
| const listOfValidations = [ | ||
| isRequired(), | ||
| isDateInFuture(), | ||
| isDateLaterThan("Should be later than same tier's Start Time")(values.tiers[index].startTime), | ||
| ] | ||
|
|
||
| if (index < values.tiers.length - 1) { | ||
| listOfValidations.push(isDateSameOrPreviousThan("Should be same or previous than next tier's Start Time")(values.tiers[index + 1].startTime)) | ||
| } | ||
|
|
||
| return composeValidators(...listOfValidations)(value) | ||
| } | ||
|
|
||
| return ( | ||
| <div> | ||
| {fields.map((name, index) => ( | ||
| <div style={{ marginTop: '40px' }} className='steps-content container' key={index}> | ||
| <div className="hidden"> | ||
| <div className="input-block-container"> | ||
| <Field | ||
| name={`${name}.tier`} | ||
| validate={validateTierName} | ||
| errorStyle={inputErrorStyle} | ||
| component={InputField2} | ||
| type="text" | ||
| side="left" | ||
| label={CROWDSALE_SETUP_NAME} | ||
| description={DESCRIPTION.CROWDSALE_SETUP_NAME} | ||
| /> | ||
|
|
||
| <Field | ||
| name={`${name}.updatable`} | ||
| render={({ input }) => ( | ||
| <div className='right'> | ||
| <label className="label">{ALLOWMODIFYING}</label> | ||
| <div className='radios-inline'> | ||
| <label className='radio-inline'> | ||
| <input | ||
| type='radio' | ||
| checked={input.value === 'on'} | ||
| onChange={() => input.onChange('on')} | ||
| value='on' | ||
| /> | ||
| <span className='title'>on</span> | ||
| </label> | ||
| <label className='radio-inline'> | ||
| <input | ||
| type='radio' | ||
| checked={input.value === 'off'} | ||
| value='off' | ||
| onChange={() => input.onChange('off')} | ||
| /> | ||
| <span className='title'>off</span> | ||
| </label> | ||
| </div> | ||
| <p className='description'>{DESCRIPTION.ALLOW_MODIFYING}</p> | ||
| </div> | ||
| )} | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="input-block-container"> | ||
| <Field | ||
| name={`${name}.startTime`} | ||
| component={InputField2} | ||
| validate={validateTierStartDate(index)} | ||
| errorStyle={inputErrorStyle} | ||
| type="datetime-local" | ||
| side="left" | ||
| label={START_TIME} | ||
| description={DESCRIPTION.START_TIME} | ||
| /> | ||
| <Field | ||
| name={`${name}.endTime`} | ||
| component={InputField2} | ||
| validate={validateTierEndDate(index)} | ||
| errorStyle={inputErrorStyle} | ||
| type="datetime-local" | ||
| side="right" | ||
| label={END_TIME} | ||
| description={DESCRIPTION.END_TIME} | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="input-block-container"> | ||
| <Field | ||
| name={`${name}.rate`} | ||
| component={InputField2} | ||
| validate={composeValidators( | ||
| isPositive(), | ||
| isInteger(), | ||
| isLessOrEqualThan('Should not be greater than 1 quintillion (10^18)')('1e18') | ||
| )} | ||
| errorStyle={inputErrorStyle} | ||
| type="text" | ||
| side="left" | ||
| label={RATE} | ||
| description={DESCRIPTION.RATE} | ||
| /> | ||
| <Field | ||
| name={`${name}.supply`} | ||
| component={InputField2} | ||
| validate={isPositive()} | ||
| errorStyle={inputErrorStyle} | ||
| type="text" | ||
| side="right" | ||
| label={SUPPLY} | ||
| description={DESCRIPTION.SUPPLY} | ||
| /> | ||
| { | ||
| /* | ||
| * TODO: REVIEW. I'm not sure about this approach. | ||
| * But it worked for me to keep the error messages properly updated for the minCap field. | ||
| */ | ||
| } | ||
| <Field name="minCap" subscription={{}}> | ||
|
There was a problem hiding this comment. Same here thing (as in the Error component). Is the Field necessary? Can't we use the There was a problem hiding this comment.
Whereas keeping the current approach makes easier for us to extend this sole component, without needing to modify any parent component. |
||
| {({ input: { onChange } }) => ( | ||
| <OnChange name={`${name}.supply`}> | ||
| {() => { | ||
| onChange(0) | ||
| onChange(props.minCap) | ||
| }} | ||
| </OnChange> | ||
| )} | ||
| </Field> | ||
| </div> | ||
| </div> | ||
| { | ||
| props.tierStore.tiers[0].whitelistEnabled === 'yes' ? ( | ||
| <div> | ||
| <div className="section-title"> | ||
| <p className="title">Whitelist</p> | ||
| </div> | ||
| <WhitelistInputBlock num={index}/> | ||
| </div> | ||
| ) : null | ||
| } | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ) | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import React from 'react' | ||
| import { Field } from 'react-final-form' | ||
| import { OnChange } from 'react-final-form-listeners' | ||
|
|
||
| export const WhenFieldChanges = ({ field, becomes, set, to }) => ( | ||
| <Field name={set} subscription={{}}> | ||
| {( | ||
| // No subscription. We only use Field to get to the change function | ||
| { input: { onChange } } | ||
| ) => ( | ||
| <OnChange name={field}> | ||
| {value => { | ||
| if (value === becomes) { | ||
| onChange(to) | ||
| } | ||
| }} | ||
| </OnChange> | ||
| )} | ||
| </Field> | ||
| ) | ||
|
|
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure I understand this. Is the
Fieldcomponent really necessary? Couldn't we just receive the wholemetaobject from props and use that?If I'm understanding this correctly, this means that we'll have two
Fields with the samenameattribute, but one of them is used only to show errors. It doesn't sound right to me, is there a good reason for this approach?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's a way to make the
Errorcomponent react only to a subset of items' changes (subscription) for the specified field.