Advanced prop type definitions #105
Conversation
| <div>{'>'}</div> | ||
| </div> | ||
| ) : ( | ||
| <PropTypeInfo type={itemTypes} /> |
There was a problem hiding this comment.
recursive react! never thought about doing this but this is super cool
There was a problem hiding this comment.
Yes! Its not often that you need it (I can only think of 1 other time I've done this), but super useful when you do need it. It helped me so much here.
| @@ -45,8 +137,15 @@ PropList.propTypes = { | |||
| PropTypes.shape({ | |||
| name: PropTypes.string.isRequired, | |||
| description: PropTypes.string, | |||
| deprecation: PropTypes.shape({ | |||
There was a problem hiding this comment.
if a PropType doesn't take the shape value (for example there's no deprecation) will this value be null/undefined?
There was a problem hiding this comment.
That is correct! You can see it set explicitly to null here: https://github.com/newrelic/developer-website/pull/105/files#diff-0645d45905de3e0b87864beb8891fb71R182
I don't set the isRequired on this shape since I know that it can be null.
| propName, | ||
| type.isOneOf, | ||
| staticName | ||
| return Object.entries(component.propTypes || {}).map(([name, propType]) => |
There was a problem hiding this comment.
if this is component.propTypes, wouldn't it just run the map on an empty array? like the same as
component.propTypes && Object.entries.map(([name,propType)=>...
There was a problem hiding this comment.
The reason why I opted not to do something like component.propTypes && Object.entries is because of the return value I wanted here. In the event that component.propTypes is falsey (undefined, null, 0, false, empty string), the left hand side of the boolean operation is returned (i.e. null && Object.entries(...) === null). This is not something I wanted, but rather I wanted to return an empty array in case there were no prop types: Object.entries({}).map(...) => []
| ]; | ||
|
|
||
| const getArgs = (propType) => | ||
| propType.__reflect__.find(({ args }) => args)?.args; |
There was a problem hiding this comment.
This must be something that the tool generating the docs in the SDK sets for our use. I'm not actually sure of the mechanics of it, but we are using it to get access to the underlying structures for the prop types (for example, the args).
Let's say the prop type is set to the following:
space: PropTypes.oneOf(['sm', 'md', 'lg'])
The __reflect__ property gets me access to things like the name of the prop type used (oneOf), the args passed to it (['sm', 'md', 'lg']), etc. Does that help? I know Java has a way of introspecting underlying type info and stuff in a process called Reflection. Maybe the name comes from that?
| <div>{'<One of'}</div> | ||
| <div className={styles.arg}> | ||
| {type.meta.constants.map((constant) => ( | ||
| <div key={constant}>{constant},</div> |
There was a problem hiding this comment.
We might want to trim off the , on the last item in this list. Maybe we could do a .join(',) on an array of divs and then slice or something?
There was a problem hiding this comment.
The only reason I didn't do that was only because One Core has trailing commas:
This isn't to say this is our desired result for the new dev site, but just the reason I did this to begin with. Should we do the same? Or remove the last comma?
FYI, .join() unfortunately doesn't work on the <div /> call since the return value of <div /> is an object (since its calling React.createElement under the hood). Calling .join unfortunately results in an [object Object] rendered to the screen. That being said, we can use indexes to determine whether to render the comma or or not depending on if its the last item.
|
🎉 This PR is included in version 1.0.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Description
Adds deprecation messages, additional info about complex prop types, and prop type examples.
Reviewer Notes
There is 1 minor inconsistency with the SDK docs for the
EntityCountQueryfiltersprop type. You will notice the value isoneOf, but nothing is rendered for the constants. We will need to address this on the SDK itself.Related Issue(s) / Ticket(s)
If there are any related GitHub Issues or JIRA tickets, add links to them here.
Screenshot(s)