converted all functional components to use default params instead of …

…defaultProps
FormidableLabs · Nov 24, 2023 · 5e60998 · 5e60998
1 parent c9991c7
commit 5e60998
Show file tree

Hide file tree

Showing 22 changed files with 167 additions and 171 deletions.
diff --git a/docs/src/pages/gallery.js b/docs/src/pages/gallery.js
@@ -77,7 +77,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;
@@ -147,8 +153,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
@@ -51,7 +51,7 @@ const Preview = (props) => {
 
   const executeCode = () => {
     const mountNode = ref;
-    const { scope, noRender, previewComponent } = props;
+    const { scope, noRender, previewComponent="div" } = props;
     const tempScope = [];
 
     Object.keys(scope).forEach((s) => tempScope.push(scope[s]));
@@ -84,10 +84,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
@@ -108,7 +108,7 @@ const getMatchTree = (link, filterTerm) => {
   return [];
 };
 
-const Sidebar = ({ className, content, onCloseClick }) => {
+const Sidebar = ({ className="", content, onCloseClick }) => {
   const location = useLocation();
   const [filteredResults, setFilteredResults] = useState(content);
   const [filterTerm, setFilterTerm] = useState("");
@@ -257,8 +257,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
@@ -99,15 +99,15 @@ export const Area: React.FC<AreaProps> = (props) => {
   props = evaluateProps(props);
   const {
     ariaLabel,
-    role,
-    shapeRendering,
+    role="presentation",
+    shapeRendering="auto",
     className,
     polar,
     origin,
     data,
-    pathComponent,
+    pathComponent=<Path />,
     events,
-    groupComponent,
+    groupComponent=<g />,
     clipPath,
     id,
     style,
@@ -137,7 +137,7 @@ export const Area: React.FC<AreaProps> = (props) => {
   };
 
   const area = React.cloneElement(
-    pathComponent!,
+    pathComponent,
     assign(
       {
         key: `${id}-area`,
@@ -153,7 +153,7 @@ export const Area: React.FC<AreaProps> = (props) => {
 
   const line = renderLine
     ? React.cloneElement(
-        pathComponent!,
+        pathComponent,
         assign(
           {
             key: `${id}-area-stroke`,
@@ -166,7 +166,7 @@ export const Area: React.FC<AreaProps> = (props) => {
     : null;
 
   return renderLine
-    ? React.cloneElement(groupComponent!, userProps, [area, line])
+    ? React.cloneElement(groupComponent, userProps, [area, line])
     : area;
 };
 
@@ -177,13 +177,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-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!, {
@@ -71,9 +78,3 @@ Background.propTypes = {
   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,
@@ -65,10 +71,4 @@ Border.propTypes = {
   width: PropTypes.number,
   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",
-};
diff --git 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: <Path />,
+  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!, {
@@ -110,8 +116,3 @@ Point.propTypes = {
   y: PropTypes.number,
 };
 
-Point.defaultProps = {
-  pathComponent: <Path />,
-  role: "presentation",
-  shapeRendering: "auto",
-};