diff --git a/.changeset/eleven-waves-attend.md b/.changeset/eleven-waves-attend.md new file mode 100644 index 000000000..177529684 --- /dev/null +++ b/.changeset/eleven-waves-attend.md @@ -0,0 +1,17 @@ +--- +"victory-area": patch +"victory-bar": patch +"victory-candlestick": patch +"victory-chart": patch +"victory-core": patch +"victory-errorbar": patch +"victory-group": patch +"victory-line": patch +"victory-native": patch +"victory-pie": patch +"victory-stack": patch +"victory-tooltip": patch +"victory-voronoi": patch +--- + +Remove usage of defaultProps from components diff --git a/docs/src/pages/gallery.js b/docs/src/pages/gallery.js index 85ccfe066..b7916f155 100644 --- a/docs/src/pages/gallery.js +++ b/docs/src/pages/gallery.js @@ -78,7 +78,13 @@ const Divider = styled.hr` margin: 3rem 0; `; -const Gallery = ({ gallery, sidebarContent }) => { +const defaultProps = { + params : null +} + +const Gallery = (props) => { + props={...defaultProps, ...props} + let {gallery,sidebarContent} = props; const parseRaw = (str) => { const playground = "playground_norender"; const start = str.indexOf(playground) + playground.length; @@ -148,8 +154,4 @@ Gallery.propTypes = { sidebarContent: PropTypes.array, }; -Gallery.defaultProps = { - params: null, -}; - export default withRouteData(Gallery); diff --git a/docs/src/partials/gallery/preview.js b/docs/src/partials/gallery/preview.js index 90339adfc..2ba4af090 100644 --- a/docs/src/partials/gallery/preview.js +++ b/docs/src/partials/gallery/preview.js @@ -6,9 +6,12 @@ import ReactDOMServer from "react-dom/server"; import { transform } from "babel-standalone"; const PreviewWrapper = styled.div``; - +const defaultProps = { + previewComponent: "div", +} // component from component-playground without updating -const Preview = (props) => { +const Preview = (_props) => { + const props = {...defaultProps,_props} let ref = useRef(); const compileCode = () => { @@ -84,10 +87,6 @@ const Preview = (props) => { ); }; -Preview.defaultProps = { - previewComponent: "div", -}; - Preview.propTypes = { codeText: PropTypes.string.isRequired, context: PropTypes.object, diff --git a/docs/src/partials/sidebar/index.js b/docs/src/partials/sidebar/index.js index fe2cc1801..d86817599 100644 --- a/docs/src/partials/sidebar/index.js +++ b/docs/src/partials/sidebar/index.js @@ -107,8 +107,13 @@ const getMatchTree = (link, filterTerm) => { } return []; }; +const defaultProps = { + className:"" +} -const Sidebar = ({ className, content, onCloseClick }) => { +const Sidebar = (_props) => { + const props = {...defaultProps,_props} + const { className, content, onCloseClick } = props const location = useLocation(); const [filteredResults, setFilteredResults] = useState(content); const [filterTerm, setFilterTerm] = useState(""); @@ -257,8 +262,4 @@ Sidebar.propTypes = { onCloseClick: PropTypes.func, }; -Sidebar.defaultProps = { - className: "", -}; - export default withRouteData(Sidebar); diff --git a/packages/victory-area/src/area.tsx b/packages/victory-area/src/area.tsx index 79d55cd14..527de1ee7 100644 --- a/packages/victory-area/src/area.tsx +++ b/packages/victory-area/src/area.tsx @@ -92,11 +92,18 @@ const evaluateProps = (props: AreaProps) => { return assign({}, props, { ariaLabel, desc, id, style, tabIndex }); }; +const defaultProps = { + groupComponent: , + pathComponent: , + role: "presentation", + shapeRendering: "auto", +}; + /** * The area primitive used by VictoryArea */ export const Area: React.FC = (props) => { - props = evaluateProps(props); + props = evaluateProps({ ...defaultProps, ...props }); const { ariaLabel, role, @@ -177,13 +184,6 @@ Area.propTypes = { pathComponent: PropTypes.element, }; -Area.defaultProps = { - groupComponent: , - pathComponent: , - role: "presentation", - shapeRendering: "auto", -}; - export interface AreaProps extends VictoryCommonPrimitiveProps { horizontal?: VictoryCommonThemeProps["horizontal"]; groupComponent?: React.ReactElement; diff --git a/packages/victory-bar/src/bar.js b/packages/victory-bar/src/bar.js index ccc5e73cc..20024ad83 100644 --- a/packages/victory-bar/src/bar.js +++ b/packages/victory-bar/src/bar.js @@ -41,9 +41,15 @@ const evaluateProps = (props) => { }); }; +const defaultProps = { + defaultBarWidth: 8, + pathComponent: , + role: "presentation", + shapeRendering: "auto", +}; // eslint-disable-next-line prefer-arrow-callback const Bar = forwardRef(function Bar(props, ref) { - props = evaluateProps(props); + props = evaluateProps({ ...defaultProps, ...props }); const { polar, origin, style, barWidth, cornerRadius } = props; const path = polar @@ -95,11 +101,4 @@ Bar.propTypes = { y0: PropTypes.number, }; -Bar.defaultProps = { - defaultBarWidth: 8, - pathComponent: , - role: "presentation", - shapeRendering: "auto", -}; - export default Bar; diff --git a/packages/victory-candlestick/src/candle.js b/packages/victory-candlestick/src/candle.js index 44b15b06f..ba8d591d2 100644 --- a/packages/victory-candlestick/src/candle.js +++ b/packages/victory-candlestick/src/candle.js @@ -89,8 +89,16 @@ const evaluateProps = (props) => { }); }; +const defaultProps = { + groupComponent: , + lineComponent: , + rectComponent: , + role: "presentation", + shapeRendering: "auto", +}; + const Candle = (props) => { - props = evaluateProps(props); + props = evaluateProps({ ...defaultProps, ...props }); const { ariaLabel, events, @@ -147,12 +155,4 @@ Candle.propTypes = { x: PropTypes.number, }; -Candle.defaultProps = { - groupComponent: , - lineComponent: , - rectComponent: , - role: "presentation", - shapeRendering: "auto", -}; - export default Candle; diff --git a/packages/victory-candlestick/src/victory-candlestick.test.js b/packages/victory-candlestick/src/victory-candlestick.test.js index a50a27183..c3e6601d1 100644 --- a/packages/victory-candlestick/src/victory-candlestick.test.js +++ b/packages/victory-candlestick/src/victory-candlestick.test.js @@ -225,8 +225,9 @@ describe("components/victory-candlestick", () => { const presentationElements = screen.getAllByRole("presentation"); - // Each data point is 3 (rect and 2 lines) for 9 total, plus the container element - expect(presentationElements).toHaveLength(10); + // Each data point is 4 (container, rect and 2 lines) for 12 total + // plus the chart container element + expect(presentationElements).toHaveLength(13); }); it("adds an aria-label and tabIndex to Candle primitive", () => { diff --git a/packages/victory-chart/src/victory-chart.tsx b/packages/victory-chart/src/victory-chart.tsx index c49f3cc50..f4a10c605 100644 --- a/packages/victory-chart/src/victory-chart.tsx +++ b/packages/victory-chart/src/victory-chart.tsx @@ -36,7 +36,24 @@ const fallbackProps = { padding: 50, }; +const defaultProps = { + backgroundComponent: , + containerComponent: , + defaultAxes: { + independent: , + dependent: , + }, + defaultPolarAxes: { + independent: , + dependent: , + }, + groupComponent: , + standalone: true, + theme: VictoryTheme.grayscale, +}; + const VictoryChartImpl: React.FC = (initialProps) => { + initialProps = { ...defaultProps, ...initialProps }; const role = "chart"; const { getAnimationProps, setAnimationState, getProps } = Hooks.useAnimationState(); @@ -201,22 +218,6 @@ VictoryChartImpl.propTypes = { startAngle: PropTypes.number, }; -VictoryChartImpl.defaultProps = { - backgroundComponent: , - containerComponent: , - defaultAxes: { - independent: , - dependent: , - }, - defaultPolarAxes: { - independent: , - dependent: , - }, - groupComponent: , - standalone: true, - theme: VictoryTheme.grayscale, -}; - export const VictoryChart = React.memo(VictoryChartImpl, isEqual); VictoryChart.displayName = "VictoryChart"; diff --git a/packages/victory-core/src/victory-label/victory-label.tsx b/packages/victory-core/src/victory-label/victory-label.tsx index 4bf2b095a..3b671a6a9 100644 --- a/packages/victory-core/src/victory-label/victory-label.tsx +++ b/packages/victory-core/src/victory-label/victory-label.tsx @@ -572,11 +572,20 @@ const renderLabel = (calculatedProps, tspanValues) => { return React.cloneElement(textComponent, textProps, tspans); }; +const defaultProps = { + backgroundComponent: , + groupComponent: , + direction: "inherit", + textComponent: , + tspanComponent: , + capHeight: 0.71, // Magic number from d3. + lineHeight: 1, +}; export const VictoryLabel: { role: string; defaultStyles: typeof defaultStyles; } & React.FC = (props) => { - props = evaluateProps(props); + props = evaluateProps({ ...defaultProps, ...props }); if (props.text === null || props.text === undefined) { return null; @@ -713,13 +722,3 @@ VictoryLabel.propTypes = { // @ts-expect-error Number is not assignable to string y: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), }; - -VictoryLabel.defaultProps = { - backgroundComponent: , - groupComponent: , - direction: "inherit", - textComponent: , - tspanComponent: , - capHeight: 0.71, // Magic number from d3. - lineHeight: 1, -}; diff --git a/packages/victory-core/src/victory-primitives/arc.tsx b/packages/victory-core/src/victory-primitives/arc.tsx index 214947279..39e69bb13 100644 --- a/packages/victory-core/src/victory-primitives/arc.tsx +++ b/packages/victory-core/src/victory-primitives/arc.tsx @@ -62,8 +62,14 @@ const evaluateProps = (props) => { return assign({}, props, { ariaLabel, desc, id, style, tabIndex }); }; +const defaultProps = { + pathComponent: , + role: "presentation", + shapeRendering: "auto", +}; + export const Arc = (props: ArcProps) => { - props = evaluateProps(props); + props = evaluateProps({ ...defaultProps, ...props }); return React.cloneElement(props.pathComponent!, { ...props.events, @@ -91,9 +97,3 @@ Arc.propTypes = { r: PropTypes.number, startAngle: PropTypes.number, }; - -Arc.defaultProps = { - pathComponent: , - role: "presentation", - shapeRendering: "auto", -}; diff --git a/packages/victory-core/src/victory-primitives/background.tsx b/packages/victory-core/src/victory-primitives/background.tsx index 5a9ece2ad..b9f073437 100644 --- a/packages/victory-core/src/victory-primitives/background.tsx +++ b/packages/victory-core/src/victory-primitives/background.tsx @@ -30,8 +30,15 @@ const evaluateProps = (props) => { return assign({}, props, { id }); }; +const defaultProps = { + circleComponent: , + rectComponent: , + role: "presentation", + shapeRendering: "auto", +}; + export const Background = (props: BackgroundProps) => { - props = evaluateProps(props); + props = evaluateProps({ ...defaultProps, ...props }); return props.polar ? React.cloneElement(props.circleComponent!, { @@ -70,10 +77,3 @@ Background.propTypes = { x: PropTypes.number, y: PropTypes.number, }; - -Background.defaultProps = { - circleComponent: , - rectComponent: , - role: "presentation", - shapeRendering: "auto", -}; diff --git a/packages/victory-core/src/victory-primitives/border.tsx b/packages/victory-core/src/victory-primitives/border.tsx index a1bf37822..6c34fc592 100644 --- a/packages/victory-core/src/victory-primitives/border.tsx +++ b/packages/victory-core/src/victory-primitives/border.tsx @@ -37,8 +37,14 @@ const evaluateProps = (props) => { return assign({}, props, { ariaLabel, desc, id, style, tabIndex }); }; +const defaultProps = { + rectComponent: , + role: "presentation", + shapeRendering: "auto", +}; + export const Border = (props: BorderProps) => { - props = evaluateProps(props); + props = evaluateProps({ ...defaultProps, ...props }); return React.cloneElement(props.rectComponent!, { ...props.events, @@ -66,9 +72,3 @@ Border.propTypes = { x: PropTypes.number, y: PropTypes.number, }; - -Border.defaultProps = { - rectComponent: , - role: "presentation", - shapeRendering: "auto", -}; diff --git a/packages/victory-core/src/victory-primitives/line-segment.tsx b/packages/victory-core/src/victory-primitives/line-segment.tsx index 7473799a8..d7d13e3d7 100644 --- a/packages/victory-core/src/victory-primitives/line-segment.tsx +++ b/packages/victory-core/src/victory-primitives/line-segment.tsx @@ -38,8 +38,14 @@ const evaluateProps = (props) => { return assign({}, props, { ariaLabel, desc, id, style, tabIndex }); }; +const defaultProps = { + lineComponent: , + role: "presentation", + shapeRendering: "auto", +}; + export const LineSegment = (props: LineSegmentProps) => { - props = evaluateProps(props); + props = evaluateProps({ ...defaultProps, ...props }); return React.cloneElement(props.lineComponent!, { ...props.events, @@ -68,9 +74,3 @@ LineSegment.propTypes = { y1: PropTypes.number, y2: PropTypes.number, }; - -LineSegment.defaultProps = { - lineComponent: , - role: "presentation", - shapeRendering: "auto", -}; diff --git a/packages/victory-core/src/victory-primitives/point.tsx b/packages/victory-core/src/victory-primitives/point.tsx index e68dcebb2..92adf21aa 100644 --- a/packages/victory-core/src/victory-primitives/point.tsx +++ b/packages/victory-core/src/victory-primitives/point.tsx @@ -66,8 +66,14 @@ const evaluateProps = (props) => { }); }; +const defaultProps = { + pathComponent: , + role: "presentation", + shapeRendering: "auto", +}; + export const Point = (props: PointProps) => { - props = evaluateProps(props); + props = evaluateProps({ ...defaultProps, ...props }); const userProps = UserProps.getSafeUserProps(props); return React.cloneElement(props.pathComponent!, { @@ -109,9 +115,3 @@ Point.propTypes = { x: PropTypes.number, y: PropTypes.number, }; - -Point.defaultProps = { - pathComponent: , - role: "presentation", - shapeRendering: "auto", -}; diff --git a/packages/victory-core/src/victory-primitives/whisker.tsx b/packages/victory-core/src/victory-primitives/whisker.tsx index 35b251fb7..ddb610559 100644 --- a/packages/victory-core/src/victory-primitives/whisker.tsx +++ b/packages/victory-core/src/victory-primitives/whisker.tsx @@ -40,8 +40,15 @@ const evaluateProps = (props) => { return assign({}, props, { ariaLabel, desc, id, style, tabIndex }); }; +const defaultProps = { + groupComponent: , + lineComponent: , + role: "presentation", + shapeRendering: "auto", +}; + export const Whisker = (props: WhiskerProps) => { - props = evaluateProps(props); + props = evaluateProps({ ...defaultProps, ...props }); const { ariaLabel, groupComponent, @@ -107,10 +114,3 @@ Whisker.propTypes = { y2: PropTypes.number, }), }; - -Whisker.defaultProps = { - groupComponent: , - lineComponent: , - role: "presentation", - shapeRendering: "auto", -}; diff --git a/packages/victory-errorbar/src/error-bar.tsx b/packages/victory-errorbar/src/error-bar.tsx index fc6734334..b172fcb58 100644 --- a/packages/victory-errorbar/src/error-bar.tsx +++ b/packages/victory-errorbar/src/error-bar.tsx @@ -109,8 +109,15 @@ export interface ErrorProps { // eslint-disable-next-line @typescript-eslint/no-empty-interface interface ErrorBar extends EventsMixinClass {} +const defaultProps = { + groupComponent: , + lineComponent: , + role: "presentation", + shapeRendering: "auto", +}; + export const ErrorBar = (props: ErrorBarProps & typeof ErrorBar.default) => { - props = evaluateProps(props); + props = evaluateProps({ ...defaultProps, ...props }); const { groupComponent } = props; const userProps = UserProps.getSafeUserProps(props); const { tabIndex, ariaLabel } = props; @@ -151,10 +158,3 @@ ErrorBar.propTypes = { x: PropTypes.number, y: PropTypes.number, }; - -ErrorBar.defaultProps = { - groupComponent: , - lineComponent: , - role: "presentation", - shapeRendering: "auto", -}; diff --git a/packages/victory-group/src/victory-group.tsx b/packages/victory-group/src/victory-group.tsx index 063381dc9..f81cba9ec 100644 --- a/packages/victory-group/src/victory-group.tsx +++ b/packages/victory-group/src/victory-group.tsx @@ -54,11 +54,20 @@ export interface VictoryGroupProps displayName?: string; } +const defaultProps = { + containerComponent: , + groupComponent: , + samples: 50, + standalone: true, + theme: VictoryTheme.grayscale, +}; + const VictoryGroupBase: React.FC = (initialProps) => { // eslint-disable-next-line no-use-before-define const role = VictoryGroup?.role; const { getAnimationProps, setAnimationState, getProps } = Hooks.useAnimationState(); + initialProps = { ...defaultProps, ...initialProps }; const props = getProps(initialProps); const modifiedProps = Helpers.modifyProps(props, fallbackProps, role); @@ -188,15 +197,6 @@ VictoryGroupBase.propTypes = { offset: PropTypes.number, }; -VictoryGroupBase.defaultProps = { - containerComponent: , - groupComponent: , - samples: 50, - sortOrder: "ascending", - standalone: true, - theme: VictoryTheme.grayscale, -}; - const componentConfig: VictoryComponentConfiguration = { role: "group", expectedComponents: [ diff --git a/packages/victory-line/src/curve.tsx b/packages/victory-line/src/curve.tsx index 81c0d3c5e..3c9a77114 100644 --- a/packages/victory-line/src/curve.tsx +++ b/packages/victory-line/src/curve.tsx @@ -35,8 +35,14 @@ const evaluateProps = (props) => { return assign({}, props, { ariaLabel, id, style, tabIndex }); }; +const defaultProps = { + pathComponent: , + role: "presentation", + shapeRendering: "auto", +}; + export const Curve: React.FC = (props) => { - props = evaluateProps(props); + props = evaluateProps({ ...defaultProps, ...props }); const userProps = UserProps.getSafeUserProps(props); const { polar, origin } = props; const lineFunction = LineHelpers.getLineFunction(props); @@ -71,12 +77,6 @@ Curve.propTypes = { polar: PropTypes.bool, }; -Curve.defaultProps = { - pathComponent: , - role: "presentation", - shapeRendering: "auto", -}; - export interface CurveProps extends VictoryCommonPrimitiveProps { ariaLabel?: StringOrCallback; // eslint-disable-next-line @typescript-eslint/ban-types diff --git a/packages/victory-native/src/helpers/wrap-core-component.js b/packages/victory-native/src/helpers/wrap-core-component.js index 6d3f8f05b..a0dec81d7 100644 --- a/packages/victory-native/src/helpers/wrap-core-component.js +++ b/packages/victory-native/src/helpers/wrap-core-component.js @@ -7,7 +7,10 @@ import React from "react"; * @returns {React.FC} WrappedComponent Wrapped component (passes props through) */ export const wrapCoreComponent = ({ Component, defaultProps }) => { - const WrappedComponent = (props) => ; + const WrappedComponent = (props) => { + props = { ...defaultProps, ...props }; + return ; + }; /** * Any static properties existing on Component class @@ -18,7 +21,6 @@ export const wrapCoreComponent = ({ Component, defaultProps }) => { WrappedComponent[prop] = Component[prop]; } } - WrappedComponent.defaultProps = defaultProps; return WrappedComponent; }; diff --git a/packages/victory-pie/src/slice.js b/packages/victory-pie/src/slice.js index 715c70e4e..cde7fe05b 100644 --- a/packages/victory-pie/src/slice.js +++ b/packages/victory-pie/src/slice.js @@ -68,8 +68,14 @@ const evaluateProps = (props) => { }); }; +const defaultProps = { + pathComponent: , + role: "presentation", + shapeRendering: "auto", +}; + const Slice = (props) => { - props = evaluateProps(props); + props = evaluateProps({ ...defaultProps, ...props }); const defaultTransform = props.origin ? `translate(${props.origin.x}, ${props.origin.y})` : undefined; @@ -102,10 +108,4 @@ Slice.propTypes = { sliceStartAngle: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), }; -Slice.defaultProps = { - pathComponent: , - role: "presentation", - shapeRendering: "auto", -}; - export default Slice; diff --git a/packages/victory-stack/src/victory-stack.tsx b/packages/victory-stack/src/victory-stack.tsx index d60c6c5e1..376a7807c 100644 --- a/packages/victory-stack/src/victory-stack.tsx +++ b/packages/victory-stack/src/victory-stack.tsx @@ -52,9 +52,18 @@ export interface VictoryStackProps xOffset?: number; } +const defaultProps = { + containerComponent: , + groupComponent: , + standalone: true, + theme: VictoryTheme.grayscale, + fillInMissingData: true, +}; + const VictoryStackBase = (initialProps: VictoryStackProps) => { // eslint-disable-next-line no-use-before-define const { role } = VictoryStack; + initialProps = { ...defaultProps, ...initialProps }; const { setAnimationState, getAnimationProps, getProps } = Hooks.useAnimationState(); @@ -226,14 +235,6 @@ VictoryStackBase.propTypes = { xOffset: PropTypes.number, }; -VictoryStackBase.defaultProps = { - containerComponent: , - groupComponent: , - standalone: true, - theme: VictoryTheme.grayscale, - fillInMissingData: true, -}; - const componentConfig: VictoryComponentConfiguration = { role: "stack", expectedComponents: [ diff --git a/packages/victory-tooltip/src/flyout.js b/packages/victory-tooltip/src/flyout.js index 72500b19a..df5dc0fe7 100644 --- a/packages/victory-tooltip/src/flyout.js +++ b/packages/victory-tooltip/src/flyout.js @@ -85,8 +85,14 @@ const evaluateProps = (props) => { return assign({}, props, { id, style }); }; +const defaultProps = { + pathComponent: , + role: "presentation", + shapeRendering: "auto", +}; + const Flyout = (props) => { - props = evaluateProps(props); + props = evaluateProps({ ...defaultProps, ...props }); const userProps = UserProps.getSafeUserProps(props); return React.cloneElement(props.pathComponent, { @@ -119,10 +125,4 @@ Flyout.propTypes = { y: PropTypes.number, }; -Flyout.defaultProps = { - pathComponent: , - role: "presentation", - shapeRendering: "auto", -}; - export default Flyout; diff --git a/packages/victory-voronoi/src/voronoi.js b/packages/victory-voronoi/src/voronoi.js index c813ca727..af69f1910 100644 --- a/packages/victory-voronoi/src/voronoi.js +++ b/packages/victory-voronoi/src/voronoi.js @@ -35,8 +35,17 @@ const evaluateProps = (props) => { return assign({}, props, { ariaLabel, id, size, style, tabIndex }); }; +const defaultProps = { + pathComponent: , + circleComponent: , + clipPathComponent: , + groupComponent: , + role: "presentation", + shapeRendering: "auto", +}; + const Voronoi = (props) => { - props = evaluateProps(props); + props = evaluateProps({ ...defaultProps, ...props }); const { ariaLabel, @@ -105,13 +114,4 @@ Voronoi.propTypes = { y: PropTypes.number, }; -Voronoi.defaultProps = { - pathComponent: , - circleComponent: , - clipPathComponent: , - groupComponent: , - role: "presentation", - shapeRendering: "auto", -}; - export default Voronoi;