diff --git a/.changeset/clean-needles-grow.md b/.changeset/clean-needles-grow.md new file mode 100644 index 000000000..393f7dcc9 --- /dev/null +++ b/.changeset/clean-needles-grow.md @@ -0,0 +1,5 @@ +--- +"victory-core": patch +--- + +Correctly type props in Victory Primitives diff --git a/packages/victory-core/src/victory-primitives/circle.tsx b/packages/victory-core/src/victory-primitives/circle.tsx index 6ab394c1e..2d9f45897 100644 --- a/packages/victory-core/src/victory-primitives/circle.tsx +++ b/packages/victory-core/src/victory-primitives/circle.tsx @@ -1,16 +1,26 @@ -import React from "react"; +import React, { forwardRef } from "react"; +import { evaluateProp } from "../victory-util/helpers"; import { VictoryPrimitiveShapeProps } from "./types"; -export const Circle = (props: VictoryPrimitiveShapeProps) => { - // eslint-disable-next-line react/prop-types - const { desc, ...rest } = props; - return desc ? ( - // @ts-expect-error FIXME: "id cannot be a number" - - {desc} - - ) : ( - // @ts-expect-error FIXME: "id cannot be a number" - - ); -}; +export const Circle = forwardRef( + (props, ref) => { + /* eslint-disable-next-line @typescript-eslint/no-unused-vars -- + * origin conflicts with the SVG element's origin attribute + */ + const { desc, id, tabIndex, origin, ...rest } = props; + + const svgProps: React.SVGProps = { + vectorEffect: "non-scaling-stroke", + id: evaluateProp(id, props)?.toString(), + tabIndex: evaluateProp(tabIndex, props), + ...rest, + }; + return desc ? ( + + {desc} + + ) : ( + + ); + }, +); diff --git a/packages/victory-core/src/victory-primitives/clip-path.tsx b/packages/victory-core/src/victory-primitives/clip-path.tsx index 57a62205c..708feb60e 100644 --- a/packages/victory-core/src/victory-primitives/clip-path.tsx +++ b/packages/victory-core/src/victory-primitives/clip-path.tsx @@ -1,5 +1,4 @@ import React from "react"; -import PropTypes from "prop-types"; import { VictoryCommonPrimitiveProps } from "../victory-util/common-props"; export interface ClipPathProps extends VictoryCommonPrimitiveProps { @@ -9,17 +8,6 @@ export interface ClipPathProps extends VictoryCommonPrimitiveProps { export const ClipPath = (props: ClipPathProps) => ( - { - // @ts-expect-error FIXME: "id cannot be a number" - {props.children} - } + {{props.children}} ); - -ClipPath.propTypes = { - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node, - ]), - clipId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), -}; diff --git a/packages/victory-core/src/victory-primitives/line.tsx b/packages/victory-core/src/victory-primitives/line.tsx index b62689406..51e876179 100644 --- a/packages/victory-core/src/victory-primitives/line.tsx +++ b/packages/victory-core/src/victory-primitives/line.tsx @@ -1,16 +1,27 @@ -import React from "react"; +import React, { forwardRef } from "react"; +import { evaluateProp } from "../victory-util/helpers"; import { VictoryPrimitiveShapeProps } from "./types"; -export const Line = (props: VictoryPrimitiveShapeProps) => { - // eslint-disable-next-line react/prop-types - const { desc, ...rest } = props; - return desc ? ( - // @ts-expect-error FIXME: "id cannot be a number" - - {desc} - - ) : ( - // @ts-expect-error FIXME: "id cannot be a number" - - ); -}; +export const Line = forwardRef( + (props, ref) => { + /* eslint-disable-next-line @typescript-eslint/no-unused-vars -- + * origin conflicts with the SVG element's origin attribute + */ + const { desc, id, tabIndex, origin, ...rest } = props; + + const svgProps: React.SVGProps = { + vectorEffect: "non-scaling-stroke", + id: evaluateProp(id, props)?.toString(), + tabIndex: evaluateProp(tabIndex, props), + ...rest, + }; + + return desc ? ( + + {desc} + + ) : ( + + ); + }, +); diff --git a/packages/victory-core/src/victory-primitives/path.tsx b/packages/victory-core/src/victory-primitives/path.tsx index c32f7aa13..98f3577f0 100644 --- a/packages/victory-core/src/victory-primitives/path.tsx +++ b/packages/victory-core/src/victory-primitives/path.tsx @@ -1,20 +1,26 @@ import React, { forwardRef } from "react"; +import { evaluateProp } from "../victory-util/helpers"; import { VictoryPrimitiveShapeProps } from "./types"; -// eslint-disable-next-line prefer-arrow-callback -export const Path = forwardRef(function Path( - props: VictoryPrimitiveShapeProps, - ref, -) { - // eslint-disable-next-line react/prop-types - const { desc, ...rest } = props; - return desc ? ( - // @ts-expect-error FIXME: "id cannot be a number" - - {desc} - - ) : ( - // @ts-expect-error FIXME: "id cannot be a number" - - ); -}); +export const Path = forwardRef( + (props, ref) => { + /* eslint-disable-next-line @typescript-eslint/no-unused-vars -- + * origin conflicts with the SVG element's origin attribute + */ + const { desc, id, tabIndex, origin, ...rest } = props; + + const svgProps: React.SVGProps = { + id: evaluateProp(id, props)?.toString(), + tabIndex: evaluateProp(tabIndex, props), + ...rest, + }; + + return desc ? ( + + {desc} + + ) : ( + + ); + }, +); diff --git a/packages/victory-core/src/victory-primitives/rect.tsx b/packages/victory-core/src/victory-primitives/rect.tsx index 7db46bbbd..d4f688cbc 100644 --- a/packages/victory-core/src/victory-primitives/rect.tsx +++ b/packages/victory-core/src/victory-primitives/rect.tsx @@ -1,16 +1,27 @@ -import React from "react"; +import React, { forwardRef } from "react"; +import { evaluateProp } from "../victory-util/helpers"; import { VictoryPrimitiveShapeProps } from "./types"; -export const Rect = (props: VictoryPrimitiveShapeProps) => { - // eslint-disable-next-line react/prop-types - const { desc, ...rest } = props; - return desc ? ( - // @ts-expect-error FIXME: "id cannot be a number" - - {desc} - - ) : ( - // @ts-expect-error FIXME: "id cannot be a number" - - ); -}; +export const Rect = forwardRef( + (props, ref) => { + /* eslint-disable-next-line @typescript-eslint/no-unused-vars -- + * origin conflicts with the SVG element's origin attribute + */ + const { desc, id, tabIndex, origin, ...rest } = props; + + const svgProps: React.SVGProps = { + vectorEffect: "non-scaling-stroke", + id: evaluateProp(id, props)?.toString(), + tabIndex: evaluateProp(tabIndex, props), + ...rest, + }; + + return desc ? ( + + {desc} + + ) : ( + + ); + }, +); diff --git a/packages/victory-core/src/victory-primitives/text.tsx b/packages/victory-core/src/victory-primitives/text.tsx index c617b3d16..301055ec2 100644 --- a/packages/victory-core/src/victory-primitives/text.tsx +++ b/packages/victory-core/src/victory-primitives/text.tsx @@ -1,5 +1,5 @@ import React from "react"; -import PropTypes from "prop-types"; +import { evaluateProp } from "../victory-util/helpers"; import { VictoryCommonPrimitiveProps } from "../victory-util/common-props"; export interface TextProps extends VictoryCommonPrimitiveProps { @@ -9,19 +9,22 @@ export interface TextProps extends VictoryCommonPrimitiveProps { } export const Text = (props: TextProps) => { - const { children, title, desc, ...rest } = props; + /* eslint-disable-next-line @typescript-eslint/no-unused-vars -- + * origin conflicts with the SVG element's origin attribute + */ + const { children, desc, id, origin, tabIndex, title, ...rest } = props; + + const svgProps: React.SVGProps = { + id: evaluateProp(id, props)?.toString(), + tabIndex: evaluateProp(tabIndex, props), + ...rest, + }; + return ( - // @ts-expect-error FIXME: "id cannot be a number" - + {title && {title}} {desc && {desc}} {children} ); }; - -Text.propTypes = { - children: PropTypes.node, - desc: PropTypes.string, - title: PropTypes.string, -}; diff --git a/packages/victory-core/src/victory-primitives/tspan.tsx b/packages/victory-core/src/victory-primitives/tspan.tsx index 13ea27fae..48936dd60 100644 --- a/packages/victory-core/src/victory-primitives/tspan.tsx +++ b/packages/victory-core/src/victory-primitives/tspan.tsx @@ -1,7 +1,18 @@ import React from "react"; +import { evaluateProp } from "../victory-util/helpers"; import { VictoryCommonPrimitiveProps } from "../victory-util/common-props"; -export const TSpan = (props: VictoryCommonPrimitiveProps) => ( - // @ts-expect-error FIXME: "id cannot be a number" - -); +export const TSpan = (props: VictoryCommonPrimitiveProps) => { + /* eslint-disable-next-line @typescript-eslint/no-unused-vars -- + * origin conflicts with the SVG element's origin attribute + */ + const { desc, id, tabIndex, origin, ...rest } = props; + + const svgProps: React.SVGProps = { + id: evaluateProp(id, props)?.toString(), + tabIndex: evaluateProp(tabIndex, props), + ...rest, + }; + + return ; +}; diff --git a/packages/victory-core/src/victory-util/user-props.ts b/packages/victory-core/src/victory-util/user-props.ts index dd75b5df3..2e86ca01a 100644 --- a/packages/victory-core/src/victory-util/user-props.ts +++ b/packages/victory-core/src/victory-util/user-props.ts @@ -1,4 +1,5 @@ import * as React from "react"; +import { evaluateProp } from "./helpers"; /* USER_PROPS_SAFELIST is to contain any string deemed safe for user props. @@ -54,19 +55,6 @@ const testIfSafeProp = (key: string): key is SafeAttribute => { return false; }; -/** - * Gets the value from props if a function value is provided - * @param {any} value: maybe function value - * @param {Object} props: props object - * @returns {any} newValue - */ -const getValue = (value, props) => { - if (typeof value === "function") { - return value(props); - } - return value; -}; - /** * getSafeUserProps - function that takes in a props object and removes any * key-value entries that do not match filter strings in the USER_PROPS_SAFELIST @@ -83,7 +71,7 @@ export const getSafeUserProps = ( Object.entries(propsToFilter) .filter(([key]) => testIfSafeProp(key)) .map(([key, value]) => { - return [key, getValue(value, props)]; + return [key, evaluateProp(value, props)]; }), ); };