Controls: Clean up arg unboxing and switch statements #14394
Conversation
shilman
changed the title
|
@ghengeveld can you take a look at the chromatic changes and let me know what you think? |
|
Those changes in chromatic look all right to me, this one seems a bit odd:
Looks like the default value for this arg is a function that returns a string. |
Nx Cloud ReportCI ran the following commands for commit 4400681. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this branch
Sent with 💌 from NxCloud. |
shilman
added
the
run e2e extended test suite
| const NoControl = () => <>-</>; | ||
|
|
||
| export const ArgControl: FC<ArgControlProps> = ({ row, arg, updateArgs }) => { | ||
| const { key, control } = row; | ||
|
|
||
| const [isFocused, setFocused] = useState(false); | ||
| // box because arg can be a fn (e.g. actions) and useState calls fn's | ||
| const [boxedValue, setBoxedValue] = useState({ value: arg }); | ||
| const [value, setValue] = useState(() => arg); |
There was a problem hiding this comment.
what's the point of doing this:
useState(() => arg);
There was a problem hiding this comment.
I "boxed" the arg because if the arg was a function it was getting executed, but the boxed version fixes that. However, the function is better than boxing because it doesn't allocate extra memory
There was a problem hiding this comment.
Please re-add a comment explaining why we're doing "lazy" state initialization here.
There was a problem hiding this comment.
| const [value, setValue] = useState(() => arg); | |
| // done this way because the value of `arg` can be a function | |
| const [value, setValue] = useState(() => arg); |
| @@ -28,28 +28,36 @@ const normalizeOptions = (options: Options, labels?: Record<any, string>) => { | |||
| return options; | |||
| }; | |||
|
|
|||
| const Controls: Record<string, FC> = { | |||
| check: CheckboxControl, | |||
| 'inline-check': CheckboxControl, | |||
There was a problem hiding this comment.
@shilman I think in the future we might want to rename these to check-inline, minor DX improvement maybe. Not 100% sure if it's worth it, but could be an addition so no breaking change, WDYT?
Issue:
What I did
Cleaned up the ArgControl and Options by unboxing the value and using a dict instead of a large switch case.
How to test
It's a minor implementation change and it works in all the examples/official-storybook actions stories.
Is this testable with Jest or Chromatic screenshots?
No
Does this need a new example in the kitchen sink apps?
No
Does this need an update to the documentation?
No