Remove usage of defaultProps from functional components (#2679)

Co-authored-by: Charlie Brown <[email protected]>
FormidableLabs · Dec 21, 2023 · ce87132 · ce87132 · vercel · Dec 21, 2023
1 parent 1e58a0b
commit ce87132
Show file tree

Hide file tree

Showing 24 changed files with 194 additions and 172 deletions.
diff --git a/.changeset/eleven-waves-attend.md 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
@@ -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
@@ -6,9 +6,12 @@ import ReactDOMServer from "react-dom/server";
 import { transform } from "babel-standalone";
 
 const PreviewWrapper = styled.div``;
-
+const defaultProps = {
+  previewComponent: "div",
+}
 // <Preview> 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
@@ -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
@@ -92,11 +92,18 @@ const evaluateProps = (props: AreaProps) => {
   return assign({}, props, { ariaLabel, desc, id, style, tabIndex });
 };
 
+const defaultProps = {
+  groupComponent: <g />,
+  pathComponent: <Path />,
+  role: "presentation",
+  shapeRendering: "auto",
+};
+
 /**
  * The area primitive used by VictoryArea
  */
 export const Area: React.FC<AreaProps> = (props) => {
-  props = evaluateProps(props);
+  props = evaluateProps({ ...defaultProps, ...props });
   const {
     ariaLabel,
     role,
@@ -177,13 +184,6 @@ Area.propTypes = {
   pathComponent: PropTypes.element,
 };
 
-Area.defaultProps = {
-  groupComponent: <g />,
-  pathComponent: <Path />,
-  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
@@ -41,9 +41,15 @@ const evaluateProps = (props) => {
   });
 };
 
+const defaultProps = {
+  defaultBarWidth: 8,
+  pathComponent: <Path />,
+  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: <Path />,
-  role: "presentation",
-  shapeRendering: "auto",
-};
-
 export default Bar;
diff --git a/packages/victory-candlestick/src/candle.js b/packages/victory-candlestick/src/candle.js
@@ -89,8 +89,16 @@ const evaluateProps = (props) => {
   });
 };
 
+const defaultProps = {
+  groupComponent: <g />,
+  lineComponent: <Line />,
+  rectComponent: <Rect />,
+  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: <g />,
-  lineComponent: <Line />,
-  rectComponent: <Rect />,
-  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
@@ -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
@@ -36,7 +36,24 @@ const fallbackProps = {
   padding: 50,
 };
 
+const defaultProps = {
+  backgroundComponent: <Background />,
+  containerComponent: <VictoryContainer />,
+  defaultAxes: {
+    independent: <VictoryAxis />,
+    dependent: <VictoryAxis dependentAxis />,
+  },
+  defaultPolarAxes: {
+    independent: <VictoryPolarAxis />,
+    dependent: <VictoryPolarAxis dependentAxis />,
+  },
+  groupComponent: <g />,
+  standalone: true,
+  theme: VictoryTheme.grayscale,
+};
+
 const VictoryChartImpl: React.FC<VictoryChartProps> = (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: <Background />,
-  containerComponent: <VictoryContainer />,
-  defaultAxes: {
-    independent: <VictoryAxis />,
-    dependent: <VictoryAxis dependentAxis />,
-  },
-  defaultPolarAxes: {
-    independent: <VictoryPolarAxis />,
-    dependent: <VictoryPolarAxis dependentAxis />,
-  },
-  groupComponent: <g />,
-  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
@@ -572,11 +572,20 @@ const renderLabel = (calculatedProps, tspanValues) => {
   return React.cloneElement(textComponent, textProps, tspans);
 };
 
+const defaultProps = {
+  backgroundComponent: <Rect />,
+  groupComponent: <g />,
+  direction: "inherit",
+  textComponent: <Text />,
+  tspanComponent: <TSpan />,
+  capHeight: 0.71, // Magic number from d3.
+  lineHeight: 1,
+};
 export const VictoryLabel: {
   role: string;
   defaultStyles: typeof defaultStyles;
 } & React.FC<VictoryLabelProps> = (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: <Rect />,
-  groupComponent: <g />,
-  direction: "inherit",
-  textComponent: <Text />,
-  tspanComponent: <TSpan />,
-  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
@@ -62,8 +62,14 @@ const evaluateProps = (props) => {
   return assign({}, props, { ariaLabel, desc, id, style, tabIndex });
 };
 
+const defaultProps = {
+  pathComponent: <Path />,
+  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: <Path />,
-  role: "presentation",
-  shapeRendering: "auto",
-};
diff --git 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: <Circle />,
+  rectComponent: <Rect />,
+  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: <Circle />,
-  rectComponent: <Rect />,
-  role: "presentation",
-  shapeRendering: "auto",
-};
diff --git 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: <Rect />,
+  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: <Rect />,
-  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
@@ -38,8 +38,14 @@ const evaluateProps = (props) => {
   return assign({}, props, { ariaLabel, desc, id, style, tabIndex });
 };
 
+const defaultProps = {
+  lineComponent: <Line />,
+  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: <Line />,
-  role: "presentation",
-  shapeRendering: "auto",
-};