refactor: use hooks #957
refactor: use hooks #957
Conversation
| @@ -54,7 +54,7 @@ storiesOf('Components|Fields', module) | |||
| isRequired={boolean('isRequired', false)} | |||
| touched={boolean('touched', false)} | |||
| name={text('name', '')} | |||
| value={text('value', value)} | |||
There was a problem hiding this comment.
this was annoying, it's better to use the value so that the user can type into the field itself and not into the knob.
|
Nice. So UIKit will have the same React version as a peer dep as app-kit and this will be released as breaking or did we include that in the last release? |
|
@tdeekens we included in the last breaking UI-Kit version (10) the requirement for version 16.7 of React and version 3 of react-intl |
| ? intl.formatMessage(messages.hide) | ||
| : intl.formatMessage(messages.show) | ||
| } | ||
| onClick={() => setIsPasswordVisible(!isPasswordVisible)} |
There was a problem hiding this comment.
Nit: could be a tiny memoized fn togglePasswordVisibility.
There was a problem hiding this comment.
| } | ||
| PasswordField.defaultProps = { | ||
| horizontalConstraint: 'scale', | ||
| }; |
There was a problem hiding this comment.
Assuming these just moved.
| // values were removed only. So we have to treat any array we receive as | ||
| // a signal of the field having been touched. | ||
| static isTouched = touched => Boolean(touched); | ||
| const AsyncCreatableSelectInput = props => { |
There was a problem hiding this comment.
Nice to see them all being React.FCs.
| }, | ||
| info | ||
| ); | ||
| }} |
There was a problem hiding this comment.
It is hard to trace changes but I assume it is all about the top.
| // { label: 'Flavours', options: flavourOptions }, | ||
| // ]; | ||
| // So we "ungroup" the options by merging them all into one list first. | ||
| const optionsWithoutGroups = flatMap(props.options, option => |
There was a problem hiding this comment.
In L40 this has been replaced without using state. Why was this in a gDSFP before?
There was a problem hiding this comment.
I'm not really sure why it was there in the first place. We were using a gDSFP without a condition, so it always updated "state" to the new value on every render (including first render), and then we never set the state or did anything with it. Same thing in the other components.
There was a problem hiding this comment.
Odd. We might just have adopted it cause it was the new thing.
There was a problem hiding this comment.
It's possible that our first implementation of the component had setState happening but then we refactored it out but left the gDSFP 🤷♂ ?
|
Yeah most of the diffs came from moving the proptypes + default props + etc outside of the class component |
| @@ -24,6 +24,10 @@ const PasswordField = props => { | |||
| const id = getFieldId(props, {}, sequentialId); | |||
| const hasError = props.touched && hasErrors(props.errors); | |||
|
|
|||
| const togglePasswordVisibility = React.useCallback(() => { | |||
Summary
Refactors the
selectcomponents to use hooks, as well asPasswordFieldand some smaller components.