-
Notifications
You must be signed in to change notification settings - Fork 525
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added functionality to be able to pass user props to components. 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.
- Loading branch information
1 parent
7c5bfd6
commit c5ee839
Showing
13 changed files
with
204 additions
and
54 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import React from "react"; | ||
| import { VictoryStack } from "@packages/victory-stack/src/index"; | ||
| import { VictoryArea } from "@packages/victory-area/src/index"; | ||
|
|
||
| class App extends React.Component { | ||
|
|
||
| render() { | ||
| return ( | ||
| <div> | ||
| <h3 style={{textAlign: 'center'}}>Standalone Stack</h3> | ||
| <VictoryStack | ||
| aria-label="Victory Stack Demo" | ||
| data-some-user-prop="TESTING 123" | ||
| > | ||
| <VictoryArea | ||
| data={[{x: "a", y: 2}, {x: "b", y: 3}, {x: "c", y: 5}]} | ||
| /> | ||
| <VictoryArea | ||
| data={[{x: "a", y: 1}, {x: "b", y: 4}, {x: "c", y: 5}]} | ||
| /> | ||
| <VictoryArea | ||
| data={[{x: "a", y: 3}, {x: "b", y: 2}, {x: "c", y: 6}]} | ||
| /> | ||
| </VictoryStack> | ||
| </div> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| /* | ||
| USER_PROPS_SAFELIST is to contain any string deemed safe for user props. | ||
| The startsWidth array will contain the start of any accepted user-prop that | ||
| starts with these characters. | ||
| The exactMatch will contain a list of exact prop names that are accepted. | ||
| */ | ||
| const USER_PROPS_SAFELIST = { | ||
| startsWith: ["data-", "aria-"], | ||
| exactMatch: [] | ||
| }; | ||
|
|
||
| /** | ||
| * doesPropStartWith: Function that takes a prop's key and runs it against all | ||
| * options in the USER_PROPS_SAFELIST and checks to see if it starts with any | ||
| * of those options. | ||
| * @param {string} key: prop key to be tested against whitelist | ||
| * @returns {Boolean}: returns true if the key starts with an option or false if | ||
| * otherwise | ||
| */ | ||
| const doesPropStartWith = (key) => { | ||
| let startsWith = false; | ||
|
|
||
| USER_PROPS_SAFELIST.startsWith.forEach((starterString) => { | ||
| const regex = new RegExp(`\\b(${starterString})(\\w|-)+`, "g"); | ||
| if (regex.test(key)) startsWith = true; | ||
| }); | ||
|
|
||
| return startsWith; | ||
| }; | ||
|
|
||
| /** | ||
| * isExactMatch: checks to see if the given key matches any of the 'exactMatch' | ||
| * items in the whitelist | ||
| * @param {String} key: prop key to be tested against the whitelist-exact match | ||
| * array. | ||
| * @returns {Boolean}: return true if whitelist contains that key, otherwise | ||
| * returns false. | ||
| */ | ||
| const isExactMatch = (key) => USER_PROPS_SAFELIST.exactMatch.includes(key); | ||
|
|
||
| /** | ||
| * testIfSafeProp: tests prop's key against both startsWith and exactMatch values | ||
| * @param {String} key: prop key to be tested against the whitelist | ||
| * @returns {Boolean}: returns true if found in whitelist, otherwise returns false | ||
| */ | ||
| const testIfSafeProp = (key) => { | ||
| if (doesPropStartWith(key) || isExactMatch(key)) return true; | ||
| return false; | ||
| }; | ||
|
|
||
| /** | ||
| * getSafeUserProps - function that takes in a props object and removes any | ||
| * key-value entries that do not match filter strings in the USER_PROPS_SAFELIST | ||
| * object. | ||
| * | ||
| * @param {Object} props: props to be filtered against USER_PROPS_SAFELIST | ||
| * @returns {Object}: object containing remaining acceptable props | ||
| */ | ||
| export const getSafeUserProps = (props) => { | ||
| const propsToFilter = { ...props }; | ||
| return Object.fromEntries( | ||
| Object.entries(propsToFilter).filter(([key]) => testIfSafeProp(key)) | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.