From 9b9a7ba16aeb23d19421a0b2cc1742a0cefe428b Mon Sep 17 00:00:00 2001 From: Dan Labrecque <dlabrecq@redhat.com> Date: Thu, 19 Sep 2024 13:36:42 -0400 Subject: [PATCH] fix(charts): defaultProps deprecation warning (#11019) (#11028) --- .../ChartArea/examples/ChartArea.md | 2 +- .../ChartCursorContainer.tsx | 1 - .../ChartCursorTooltip/ChartCursorFlyout.tsx | 13 +++--- .../components/ChartUtils/chart-container.tsx | 41 +++++++++++-------- .../components/ChartUtils/chart-tooltip.ts | 4 +- .../ChartVoronoiContainer.tsx | 1 - 6 files changed, 32 insertions(+), 30 deletions(-) diff --git a/packages/react-charts/src/components/ChartArea/examples/ChartArea.md b/packages/react-charts/src/components/ChartArea/examples/ChartArea.md index 6041a95f4d2..cba89769979 100644 --- a/packages/react-charts/src/components/ChartArea/examples/ChartArea.md +++ b/packages/react-charts/src/components/ChartArea/examples/ChartArea.md @@ -127,7 +127,7 @@ class BottomAlignedLegend extends React.Component { themeColor={ChartThemeColor.cyan} width={650} > - <ChartAxis label="Years"/> + <ChartAxis label="Years" fixAxisLabelHeight /> <ChartAxis dependentAxis showGrid/> <ChartGroup> <ChartArea diff --git a/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx b/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx index 19ce90ca2a9..020215b07f3 100644 --- a/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx +++ b/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx @@ -239,7 +239,6 @@ export const ChartCursorContainer: React.FunctionComponent<ChartCursorContainerP ); }; ChartCursorContainer.displayName = 'ChartCursorContainer'; -ChartCursorContainer.defaultProps = (VictoryCursorContainer as any).defaultProps; // Note: VictoryCursorContainer.defaultEvents & VictoryContainer.role must be hoisted hoistNonReactStatics(ChartCursorContainer, VictoryCursorContainer); diff --git a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.tsx b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.tsx index d088b02a83f..d2a135c0812 100644 --- a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.tsx +++ b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.tsx @@ -111,7 +111,12 @@ interface ChartCursorFlyoutProps extends VictoryCommonPrimitiveProps { } const ChartCursorFlyout = (props: ChartCursorFlyoutProps) => { - props = evaluateProps(props); + props = evaluateProps({ + pathComponent: <Path />, + role: 'presentation', + shapeRendering: 'auto', + ...props + }); return React.cloneElement(props.pathComponent, { ...props.events, @@ -125,10 +130,4 @@ const ChartCursorFlyout = (props: ChartCursorFlyoutProps) => { }); }; -ChartCursorFlyout.defaultProps = { - pathComponent: <Path />, - role: 'presentation', - shapeRendering: 'auto' -}; - export { ChartCursorFlyout }; diff --git a/packages/react-charts/src/components/ChartUtils/chart-container.tsx b/packages/react-charts/src/components/ChartUtils/chart-container.tsx index 189e508afe3..c3e58f0b1db 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-container.tsx +++ b/packages/react-charts/src/components/ChartUtils/chart-container.tsx @@ -26,25 +26,30 @@ import { LineSegment } from 'victory-core'; * @public */ export const createContainer = (behaviorA: ContainerType, behaviorB: ContainerType) => { - const container: any = victoryCreateContainer(behaviorA, behaviorB); + const Container: any = victoryCreateContainer(behaviorA, behaviorB); const isCursor = behaviorA === 'cursor' || behaviorB === 'cursor'; const isVoronoi = behaviorA === 'voronoi' || behaviorB === 'voronoi'; - if (!container?.defaultProps) { - container.defaultProps = {}; - } - if (isCursor) { - container.defaultProps.cursorLabelComponent = <ChartLabel textAnchor="start" />; - container.defaultProps.cursorComponent = ( - <LineSegment - style={{ - stroke: chart_container_cursor_line_Fill.var - }} - /> - ); - } - if (isVoronoi) { - container.defaultProps.labelComponent = <ChartCursorTooltip />; - } - return container; + const containerWrapper = (props: any) => { + const containerProps = { + ...(isCursor && { + cursorLabelComponent: <ChartLabel textAnchor="start" />, + cursorComponent: ( + <LineSegment + style={{ + stroke: chart_container_cursor_line_Fill.var + }} + /> + ) + }), + ...(isVoronoi && { labelComponent: <ChartCursorTooltip /> }), + ...props + }; + return <Container {...containerProps} />; + }; + containerWrapper.defaultEvents = Container.defaultEvents; + containerWrapper.displayName = Container.displayName; + containerWrapper.role = Container.role; + + return containerWrapper; }; diff --git a/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts b/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts index 1be193feb2f..fe7c369365f 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts @@ -92,7 +92,7 @@ export const getCursorTooltipPoniterOrientation = ({ * Returns props associated with legend data * @private */ -export const getLegendTooltipDataProps = (defaultProps: ChartLegendProps) => +export const getLegendTooltipDataProps = (props: ChartLegendProps) => merge( { borderPadding: 0, @@ -112,7 +112,7 @@ export const getLegendTooltipDataProps = (defaultProps: ChartLegendProps) => } } }, - { ...defaultProps } + { ...props } ); /** diff --git a/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx b/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx index 307ff55014b..1c8f1040ba6 100644 --- a/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx +++ b/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx @@ -249,7 +249,6 @@ export const ChartVoronoiContainer: React.FunctionComponent<ChartVoronoiContaine ); }; ChartVoronoiContainer.displayName = 'ChartVoronoiContainer'; -ChartVoronoiContainer.defaultProps = (VictoryVoronoiContainer as any).defaultProps; // Note: VictoryVoronoiContainer.defaultEvents & VictoryContainer.role must be hoisted hoistNonReactStatics(ChartVoronoiContainer, VictoryVoronoiContainer);