From fa152f5cc8b050eaec3e3a8bb89b8acaf1faf43f Mon Sep 17 00:00:00 2001 From: plouc Date: Tue, 7 Sep 2021 09:59:12 +0900 Subject: [PATCH] feat(network): remove prop-types --- packages/network/package.json | 1 - packages/network/src/AnimatedLinks.tsx | 15 +++---- packages/network/src/AnimatedNodes.tsx | 26 ++++++----- packages/network/src/Link.tsx | 23 +++++----- packages/network/src/Network.tsx | 3 +- packages/network/src/NetworkCanvas.tsx | 4 +- packages/network/src/NetworkNodeTooltip.tsx | 21 +++++---- packages/network/src/Node.tsx | 30 ++++++------- packages/network/src/StaticLinks.tsx | 15 +++---- packages/network/src/StaticNodes.tsx | 21 +++++---- packages/network/src/props.ts | 50 --------------------- packages/network/src/types.ts | 35 +++++++++++++++ 12 files changed, 112 insertions(+), 132 deletions(-) diff --git a/packages/network/package.json b/packages/network/package.json index c3e54e3403..ba7eed30e8 100644 --- a/packages/network/package.json +++ b/packages/network/package.json @@ -42,7 +42,6 @@ }, "peerDependencies": { "@nivo/core": "0.76.0", - "prop-types": ">= 15.5.10 < 16.0.0", "react": ">= 16.14.0 < 18.0.0" }, "publishConfig": { diff --git a/packages/network/src/AnimatedLinks.tsx b/packages/network/src/AnimatedLinks.tsx index 3a2199e45e..737ac8bc35 100644 --- a/packages/network/src/AnimatedLinks.tsx +++ b/packages/network/src/AnimatedLinks.tsx @@ -1,5 +1,4 @@ import { memo } from 'react' -import PropTypes from 'prop-types' import { TransitionMotion, spring } from 'react-motion' import { useMotionConfig } from '@nivo/core' import Link from './Link' @@ -16,7 +15,13 @@ const willEnter = ({ style, data }) => { } } -const AnimatedLinks = ({ links, linkThickness, linkColor }) => { +interface AnimatedLinksProps { + // links: PropTypes.array.isRequired, + // linkThickness: PropTypes.func.isRequired, + // linkColor: PropTypes.func.isRequired, +} + +const AnimatedLinks = ({ links, linkThickness, linkColor }: AnimatedLinksProps) => { const { springConfig } = useMotionConfig() return ( @@ -55,10 +60,4 @@ const AnimatedLinks = ({ links, linkThickness, linkColor }) => { ) } -AnimatedLinks.propTypes = { - links: PropTypes.array.isRequired, - linkThickness: PropTypes.func.isRequired, - linkColor: PropTypes.func.isRequired, -} - export default memo(AnimatedLinks) diff --git a/packages/network/src/AnimatedNodes.tsx b/packages/network/src/AnimatedNodes.tsx index ec71271e2e..91db63a19b 100644 --- a/packages/network/src/AnimatedNodes.tsx +++ b/packages/network/src/AnimatedNodes.tsx @@ -1,5 +1,4 @@ import { memo } from 'react' -import PropTypes from 'prop-types' import { TransitionMotion, spring } from 'react-motion' import { useMotionConfig } from '@nivo/core' import Node from './Node' @@ -20,7 +19,21 @@ const willLeave = scale: spring(0, springConfig), }) -const AnimatedNodes = ({ nodes, color, borderColor, ...props }) => { +interface AnimatedNodesProps { + // nodes: PropTypes.array.isRequired, + nodes: any[] + // color: PropTypes.func.isRequired, + color: Function + borderWidth: number + // borderColor: PropTypes.func.isRequired, + borderColor: Function + // handleNodeHover: PropTypes.func.isRequired, + handleNodeHover: Function + // handleNodeLeave: PropTypes.func.isRequired, + handleNodeLeave: Function +} + +const AnimatedNodes = ({ nodes, color, borderColor, ...props }: AnimatedNodesProps) => { const { springConfig } = useMotionConfig() return ( @@ -61,13 +74,4 @@ const AnimatedNodes = ({ nodes, color, borderColor, ...props }) => { ) } -AnimatedNodes.propTypes = { - nodes: PropTypes.array.isRequired, - color: PropTypes.func.isRequired, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.func.isRequired, - handleNodeHover: PropTypes.func.isRequired, - handleNodeLeave: PropTypes.func.isRequired, -} - export default memo(AnimatedNodes) diff --git a/packages/network/src/Link.tsx b/packages/network/src/Link.tsx index cbff29b458..197181e1f0 100644 --- a/packages/network/src/Link.tsx +++ b/packages/network/src/Link.tsx @@ -1,7 +1,16 @@ import { memo } from 'react' -import PropTypes from 'prop-types' -const Link = ({ sourceX, sourceY, targetX, targetY, thickness, color }) => { +interface LinkProps { + link: any + sourceX: number + sourceY: number + targetX: number + targetY: number + thickness: number + color: string +} + +const Link = ({ sourceX, sourceY, targetX, targetY, thickness, color }: LinkProps) => { return ( { ) } -Link.propTypes = { - link: PropTypes.object.isRequired, - sourceX: PropTypes.number.isRequired, - sourceY: PropTypes.number.isRequired, - targetX: PropTypes.number.isRequired, - targetY: PropTypes.number.isRequired, - thickness: PropTypes.number.isRequired, - color: PropTypes.string.isRequired, -} - export default memo(Link) diff --git a/packages/network/src/Network.tsx b/packages/network/src/Network.tsx index 92f8a4131c..ef836ac500 100644 --- a/packages/network/src/Network.tsx +++ b/packages/network/src/Network.tsx @@ -2,7 +2,7 @@ import { createElement, Fragment, useCallback } from 'react' import { withContainer, useDimensions, SvgWrapper, useTheme, useMotionConfig } from '@nivo/core' import { useInheritedColor } from '@nivo/colors' import { useTooltip } from '@nivo/tooltip' -import { NetworkPropTypes, NetworkDefaultProps } from './props' +import { NetworkDefaultProps } from './props' import { useNetwork, useNodeColor, useLinkThickness } from './hooks' import AnimatedNodes from './AnimatedNodes' import StaticNodes from './StaticNodes' @@ -120,7 +120,6 @@ const Network = props => { ) } -Network.propTypes = NetworkPropTypes Network.defaultProps = NetworkDefaultProps export default withContainer(Network) diff --git a/packages/network/src/NetworkCanvas.tsx b/packages/network/src/NetworkCanvas.tsx index 591a435a63..d4be12b130 100644 --- a/packages/network/src/NetworkCanvas.tsx +++ b/packages/network/src/NetworkCanvas.tsx @@ -1,10 +1,9 @@ import { useCallback, useRef, useEffect } from 'react' - import * as React from 'react' import { getDistance, getRelativeCursor, withContainer, useDimensions, useTheme } from '@nivo/core' import { useInheritedColor } from '@nivo/colors' import { useTooltip } from '@nivo/tooltip' -import { NetworkCanvasPropTypes, NetworkCanvasDefaultProps } from './props' +import { NetworkCanvasDefaultProps } from './props' import { useNetwork, useNodeColor, useLinkThickness } from './hooks' import NetworkNodeTooltip from './NetworkNodeTooltip' @@ -187,7 +186,6 @@ const NetworkCanvas = props => { ) } -NetworkCanvas.propTypes = NetworkCanvasPropTypes NetworkCanvas.defaultProps = NetworkCanvasDefaultProps export default withContainer(NetworkCanvas) diff --git a/packages/network/src/NetworkNodeTooltip.tsx b/packages/network/src/NetworkNodeTooltip.tsx index 3e5960f378..8553b3d618 100644 --- a/packages/network/src/NetworkNodeTooltip.tsx +++ b/packages/network/src/NetworkNodeTooltip.tsx @@ -1,8 +1,16 @@ import { memo } from 'react' -import PropTypes from 'prop-types' import { BasicTooltip } from '@nivo/tooltip' -const NetworkNodeTooltip = ({ node, format, tooltip }) => ( +interface NetworkNodeTooltipProps { + // node: PropTypes.shape({ + // id: PropTypes.string.isRequired, + // color: PropTypes.string.isRequired, + // }).isRequired, + // format: PropTypes.func, + // tooltip: PropTypes.func, +} + +const NetworkNodeTooltip = ({ node, format, tooltip }: NetworkNodeTooltipProps) => ( ( /> ) -NetworkNodeTooltip.propTypes = { - node: PropTypes.shape({ - id: PropTypes.string.isRequired, - color: PropTypes.string.isRequired, - }).isRequired, - format: PropTypes.func, - tooltip: PropTypes.func, -} - export default memo(NetworkNodeTooltip) diff --git a/packages/network/src/Node.tsx b/packages/network/src/Node.tsx index 148b3ee0c4..465d156ef4 100644 --- a/packages/network/src/Node.tsx +++ b/packages/network/src/Node.tsx @@ -1,5 +1,18 @@ import { memo } from 'react' -import PropTypes from 'prop-types' + +interface NodeProps { + node: any + x: number + y: number + radius: number + color: string + borderWidth: number + borderColor: string + scale?: number + handleNodeClick: Function + handleNodeHover: Function + handleNodeLeave: Function +} const Node = ({ node, @@ -13,7 +26,7 @@ const Node = ({ handleNodeClick, handleNodeHover, handleNodeLeave, -}) => { +}: NodeProps) => { return ( { +interface StaticLinksProps { + // links: PropTypes.array.isRequired, + // linkThickness: PropTypes.func.isRequired, + // linkColor: PropTypes.func.isRequired, +} + +const StaticLinks = ({ links, linkThickness, linkColor }: StaticLinksProps) => { return links.map(link => { return ( { }) } -StaticLinks.propTypes = { - links: PropTypes.array.isRequired, - linkThickness: PropTypes.func.isRequired, - linkColor: PropTypes.func.isRequired, -} - export default memo(StaticLinks) diff --git a/packages/network/src/StaticNodes.tsx b/packages/network/src/StaticNodes.tsx index 16b43afca0..57ffcd718b 100644 --- a/packages/network/src/StaticNodes.tsx +++ b/packages/network/src/StaticNodes.tsx @@ -1,8 +1,16 @@ import { memo } from 'react' -import PropTypes from 'prop-types' import Node from './Node' -const StaticNodes = ({ nodes, color, borderColor, ...props }) => { +interface StaticNodesProps { + nodes: any[] + color: Function + borderWidth: number + borderColor: Function + handleNodeHover: Function + handleNodeLeave: Function +} + +const StaticNodes = ({ nodes, color, borderColor, ...props }: StaticNodesProps) => { return nodes.map(node => { return ( { }) } -StaticNodes.propTypes = { - nodes: PropTypes.array.isRequired, - color: PropTypes.func.isRequired, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.func.isRequired, - handleNodeHover: PropTypes.func.isRequired, - handleNodeLeave: PropTypes.func.isRequired, -} - export default memo(StaticNodes) diff --git a/packages/network/src/props.ts b/packages/network/src/props.ts index a7d1f34cbd..ce246a7cdc 100644 --- a/packages/network/src/props.ts +++ b/packages/network/src/props.ts @@ -1,53 +1,3 @@ -import PropTypes from 'prop-types' -import { motionPropTypes } from '@nivo/core' -import { inheritedColorPropType } from '@nivo/colors' - -const commonPropTypes = { - nodes: PropTypes.arrayOf( - PropTypes.shape({ - id: PropTypes.string.isRequired, - }) - ).isRequired, - links: PropTypes.arrayOf( - PropTypes.shape({ - source: PropTypes.string.isRequired, - target: PropTypes.string.isRequired, - }) - ).isRequired, - - layers: PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.oneOf(['links', 'nodes']), PropTypes.func]) - ).isRequired, - - linkDistance: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.number]) - .isRequired, - repulsivity: PropTypes.number.isRequired, - distanceMin: PropTypes.number.isRequired, - distanceMax: PropTypes.number.isRequired, - iterations: PropTypes.number.isRequired, - - nodeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - nodeBorderWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired, - nodeBorderColor: inheritedColorPropType.isRequired, - - linkThickness: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired, - linkColor: inheritedColorPropType.isRequired, - - isInteractive: PropTypes.bool.isRequired, - onClick: PropTypes.func, -} - -export const NetworkPropTypes = { - ...commonPropTypes, - role: PropTypes.string.isRequired, - ...motionPropTypes, -} - -export const NetworkCanvasPropTypes = { - pixelRatio: PropTypes.number.isRequired, - ...commonPropTypes, -} - const commonDefaultProps = { layers: ['links', 'nodes'], diff --git a/packages/network/src/types.ts b/packages/network/src/types.ts index ecd96e355c..282dab1c15 100644 --- a/packages/network/src/types.ts +++ b/packages/network/src/types.ts @@ -43,6 +43,41 @@ export interface NetworkCustomLayerProps { } export type NetworkCustomLayer = FunctionComponent +/* +nodes: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.string.isRequired, + }) +).isRequired, +links: PropTypes.arrayOf( + PropTypes.shape({ + source: PropTypes.string.isRequired, + target: PropTypes.string.isRequired, + }) +).isRequired, + +layers: PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.oneOf(['links', 'nodes']), PropTypes.func]) +).isRequired, + +linkDistance: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.number]) + .isRequired, +repulsivity: PropTypes.number.isRequired, +distanceMin: PropTypes.number.isRequired, +distanceMax: PropTypes.number.isRequired, +iterations: PropTypes.number.isRequired, + +nodeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, +nodeBorderWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired, +nodeBorderColor: inheritedColorPropType.isRequired, + +linkThickness: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired, +linkColor: inheritedColorPropType.isRequired, + +isInteractive: PropTypes.bool.isRequired, +onClick: PropTypes.func, +*/ + export interface NetworkCommonProps { margin: Box