perf(docs): optimize ComponentProps #2012
Conversation
Codecov Report
@@ Coverage Diff @@
## master #2012 +/- ##
=======================================
Coverage 99.76% 99.76%
=======================================
Files 148 148
Lines 2561 2561
=======================================
Hits 2555 2555
Misses 6 6Continue to review full report at Codecov.
|
layershifter
changed the title
layershifter
changed the title
There was a problem hiding this comment.
@levithomason I wanted to add there changes that will affect ComponentExample, but later I understood that it has already enough changes. So, it's ready for review.
docs/app/HOC/pure.js
Outdated
| } | ||
| } | ||
|
|
||
| export default pure |
There was a problem hiding this comment.
I believe this can be replaced by extending React.PureComponent, correct?
| {...item} | ||
| key={item.name} | ||
| showEnums={showEnumsFor[item.name]} | ||
| onToggleEnum={this.toggleEnumsFor(item.name)} |
There was a problem hiding this comment.
Since the showEnums state is only needed within ComponentPropsRow, I think we can push it down another level. The parent doesn't need to re-render when the child shows/hides enums.
| @@ -7,7 +7,9 @@ import ComponentPropsExtra from './ComponentPropsExtra' | |||
| import ComponentPropsToggle from './ComponentPropsEnumToggle' | |||
| import ComponentPropsValue from './ComponentPropsEnumValue' | |||
|
|
|||
| const ComponentPropsEnum = ({ limit, showAll, toggle, values }) => { | |||
| const ComponentPropsEnum = ({ limit, showAll, toggle, type, values }) => { | |||
There was a problem hiding this comment.
The limit was added because of the Icon names and Flag names. However, those props do not show enums as they are {custom}. I almost want to just show all enums and do away with the state.
At the least, let's increase the limit to 50. Most examples have much less than 50 enums, and 50 will still fit OK. Here are a few examples of our larger lists that show we can easily work with a limit of 50:
Grid.Row
color is especially funny as it a very common prop and we hide only 3 of them 😂
Transition
There was a problem hiding this comment.
Thanks for reminding, customPropTypes.suggest should be also parsed as enum, I will update it separate PR.
…React into perf/docs-stage2 # Conflicts: # docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js
…toggleEnums logic down
|
💥 |
|
Released in |
* perf(docs): optimize ComponentProps * fix(HOC): use PureComponent for pure() HOC * fix(ComponentProps): update `limit` value * feat(ComponentProps): make ComponentProps functional component, move toggleEnums logic down
ComponentProps
Components was splitted to multiple sub-components. Props info transforms was moved to our gulp doc plugin.
Before
After