Skip to content
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 ability to forward refs in Bar and Path components #2673

Merged
merged 3 commits into from
Nov 15, 2023

Conversation

Cperez2187
Copy link
Contributor

@Cperez2187 Cperez2187 commented Nov 13, 2023

This will allow the user to pass in a ref to the <Bar /> component when using the custom dataComponent prop for <VictoryBar />. This will allow users to set individual refs for each bar in their data set as well if they use a ref map and ref callback, allowing for better accessibility options.

See "Focus With Refs" story under VictoryBar stories when running Storybook

ex.

const GetThemBars = (props) => {
...
const itemsRef = useRef(null);

  const getMap = () => {
    if (!itemsRef.current) {
      // Initialize the Map on first usage.
      itemsRef.current = new Map();
    }
    return itemsRef.current;
  };

  const focusOnBar = (id) => {
    const map = getMap();
    const node = map.get(id);
    node.focus();
  };
  
  return (
  <VictoryBar
  ...
  // add event handler to call focusOnBar()
  dataComponent={
    <Bar
      tabIndex={0}
      ref={(node) => {
        const map = getMap();
        if (node) {
          map.set(node.attributes.index.value, node);
        } else {
          map.delete(node.attributes.index.value);
        }
      }}
    />
  }
  />
  )
  ...
}

Copy link

changeset-bot bot commented Nov 13, 2023

🦋 Changeset detected

Latest commit: fe32014

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 30 packages
Name Type
victory-bar Minor
victory-core Minor
victory-area Minor
victory-axis Minor
victory-box-plot Minor
victory-brush-container Minor
victory-brush-line Minor
victory-candlestick Minor
victory-canvas Minor
victory-chart Minor
victory-create-container Minor
victory-cursor-container Minor
victory-errorbar Minor
victory-group Minor
victory-histogram Minor
victory-legend Minor
victory-line Minor
victory-native Minor
victory-pie Minor
victory-polar-axis Minor
victory-scatter Minor
victory-selection-container Minor
victory-shared-events Minor
victory-stack Minor
victory-tooltip Minor
victory-vendor Minor
victory-voronoi-container Minor
victory-voronoi Minor
victory-zoom-container Minor
victory Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

vercel bot commented Nov 13, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
victory ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 15, 2023 4:25pm

@Cperez2187 Cperez2187 marked this pull request as draft November 13, 2023 16:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

How can I programmatically change focus with ref? Or at least change a tabIndex order?
2 participants