-
Notifications
You must be signed in to change notification settings - Fork 525
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Added functionality to be able to pass user props to components. Safe… #2151
Conversation
Will be making additional PRs into this branch for the remaining components to break up the work and keep the PRs manageable. |
…list currently allows props starting with 'aria-' and 'data-'. VictoryChart, VictoryGroup, VictoryStack, and VictoryContainer have all been wired up to allow these user props. More components to follow.
ac15507
to
c5ee839
Compare
@@ -88,17 +89,21 @@ const VictoryGroup = (initialProps) => { | |||
name | |||
]); | |||
|
|||
const userProps = React.useMemo(() => UserProps.getSafeUserProps(initialProps), [initialProps]); |
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 whether this useMemo
is doing any good here. Since initialProps
isn't stored in a state or ref value, I believe useProps
will be re-calculated on every render. There is a fairly good explanation here on how to compare objects in hooks. https://stackoverflow.com/questions/54095994/react-useeffect-comparing-objects
For now, I wouldn't stress too much about memoizing this value since it isn't a very expensive function call. Unless you can see a performance difference, let's just remove the useMemo
for now.
if (parentProps.events) { | ||
this.globalEvents = Events.getGlobalEvents(parentProps.events); | ||
parentProps.events = Events.omitGlobalEvents(parentProps.events); | ||
} | ||
return React.cloneElement(component, parentProps, children); | ||
|
||
const componentProps = { ...parentProps, ...parentProps.userProps }; |
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.
Where is parentProps.userProps
coming from? Is this outdated, or are we still setting this somewhere in a getComponentProps
function?
I have a couple questions and comments here, but let's merge this work into |
Description:
Passed missing 'title' and 'desc' props to VictoryContainer component from VictoryChart component. Added functionality for users to pass other attributes to the container SVG that pass the whitelist test (defined in victory/packages/victory-core/src/victory-util/user-props.js). Safe-list currently allows props starting with 'aria-' and 'data-'. VictoryChart, VictoryGroup, VictoryStack, and VictoryContainer have all been wired up to allow these user props. More components to follow.
Currently the whitelist contains 2 arrays called "startsWith" and "exactMatch". Any props will be run against these two to see if they start with any of the items in the startsWith array or they match exactly with items from the exactMatch array.
Testing:
Start this branch with
yarn start
and navigate to the Chart example.Test 1
Test 2