From b4c34c18956c456edb40049e64b90cf3e075565d Mon Sep 17 00:00:00 2001 From: Dan Labrecque Date: Thu, 19 Sep 2024 10:57:15 -0400 Subject: [PATCH] fix(charts): defaultProps deprecation warning (#11019) --- .../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} > - + { - props = evaluateProps(props); + props = evaluateProps({ + pathComponent: , + role: 'presentation', + shapeRendering: 'auto', + ...props + }); return React.cloneElement(props.pathComponent, { ...props.events, @@ -125,10 +130,4 @@ const ChartCursorFlyout = (props: ChartCursorFlyoutProps) => { }); }; -ChartCursorFlyout.defaultProps = { - pathComponent: , - 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 = ; - container.defaultProps.cursorComponent = ( - - ); - } - if (isVoronoi) { - container.defaultProps.labelComponent = ; - } - return container; + const containerWrapper = (props: any) => { + const containerProps = { + ...(isCursor && { + cursorLabelComponent: , + cursorComponent: ( + + ) + }), + ...(isVoronoi && { labelComponent: }), + ...props + }; + return ; + }; + 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