From a6b5b92695630ffc3519cb249c36720034965d03 Mon Sep 17 00:00:00 2001 From: plouc Date: Mon, 28 Dec 2020 10:03:32 +0900 Subject: [PATCH] feat(sunburst): simplify types --- packages/sunburst/src/Arcs.tsx | 20 +++---- packages/sunburst/src/ResponsiveSunburst.tsx | 15 +++-- packages/sunburst/src/Sunburst.tsx | 15 ++++- packages/sunburst/src/hooks.ts | 14 +++-- packages/sunburst/src/types.ts | 56 ++++++++----------- .../sunburst/stories/sunburst.stories.tsx | 2 + packages/sunburst/tests/Sunburst.test.tsx | 1 + 7 files changed, 66 insertions(+), 57 deletions(-) diff --git a/packages/sunburst/src/Arcs.tsx b/packages/sunburst/src/Arcs.tsx index 369bba3aa0..656d0a68c3 100644 --- a/packages/sunburst/src/Arcs.tsx +++ b/packages/sunburst/src/Arcs.tsx @@ -1,21 +1,21 @@ import React, { createElement, useMemo } from 'react' import { ArcGenerator, ArcsLayer } from '@nivo/arcs' -import { ComputedDatum, CompleteSvgProps } from './types' +import { ComputedDatum, SunburstCommonProps, MouseHandlers } from './types' import { useTooltip } from '@nivo/tooltip' interface ArcsProps { center: [number, number] data: ComputedDatum[] arcGenerator: ArcGenerator - borderWidth: CompleteSvgProps['borderWidth'] - borderColor: CompleteSvgProps['borderColor'] - isInteractive: CompleteSvgProps['isInteractive'] - onClick?: CompleteSvgProps['onClick'] - onMouseEnter?: CompleteSvgProps['onMouseEnter'] - onMouseMove?: CompleteSvgProps['onMouseMove'] - onMouseLeave?: CompleteSvgProps['onMouseLeave'] - tooltip: CompleteSvgProps['tooltip'] - transitionMode: CompleteSvgProps['transitionMode'] + borderWidth: SunburstCommonProps['borderWidth'] + borderColor: SunburstCommonProps['borderColor'] + isInteractive: SunburstCommonProps['isInteractive'] + onClick?: MouseHandlers['onClick'] + onMouseEnter?: MouseHandlers['onMouseEnter'] + onMouseMove?: MouseHandlers['onMouseMove'] + onMouseLeave?: MouseHandlers['onMouseLeave'] + tooltip: SunburstCommonProps['tooltip'] + transitionMode: SunburstCommonProps['transitionMode'] } export const Arcs = ({ diff --git a/packages/sunburst/src/ResponsiveSunburst.tsx b/packages/sunburst/src/ResponsiveSunburst.tsx index 8231645875..41d4def109 100644 --- a/packages/sunburst/src/ResponsiveSunburst.tsx +++ b/packages/sunburst/src/ResponsiveSunburst.tsx @@ -1,14 +1,17 @@ import React from 'react' import { ResponsiveWrapper } from '@nivo/core' import { Sunburst } from './Sunburst' -import { SvgProps } from './types' +import { SunburstSvgProps } from './types' -export const ResponsiveSunburst = ( - props: Omit, 'width' | 'height'> -) => ( +type ResponsiveSunburstProps = Partial< + Omit, 'data' | 'width' | 'height'> +> & + Pick, 'data'> + +export const ResponsiveSunburst = (props: ResponsiveSunburstProps) => ( - {({ width, height }: Required, 'width' | 'height'>>) => ( - + {({ width, height }: { width: number; height: number }) => ( + width={width} height={height} {...props} /> )} ) diff --git a/packages/sunburst/src/Sunburst.tsx b/packages/sunburst/src/Sunburst.tsx index eedd9c8053..0a71fac8c2 100644 --- a/packages/sunburst/src/Sunburst.tsx +++ b/packages/sunburst/src/Sunburst.tsx @@ -9,9 +9,17 @@ import { import { ArcLabelsLayer } from '@nivo/arcs' import { defaultProps } from './props' import { useSunburst, useSunburstLayerContext } from './hooks' -import { SvgProps, SunburstLayerId, SunburstLayer, ComputedDatum } from './types' +import { SunburstSvgProps, SunburstLayerId, SunburstLayer, ComputedDatum } from './types' import { Arcs } from './Arcs' +type InnerSunburstProps = Partial< + Omit< + SunburstSvgProps, + 'data' | 'width' | 'height' | 'isInteractive' | 'animate' | 'motionConfig' + > +> & + Pick, 'data' | 'width' | 'height' | 'isInteractive'> + const InnerSunburst = ({ data, id = defaultProps.id, @@ -56,7 +64,7 @@ const InnerSunburst = ({ onMouseEnter, onMouseLeave, onMouseMove, -}: SvgProps) => { +}: InnerSunburstProps) => { const { innerHeight, innerWidth, margin, outerHeight, outerWidth } = useDimensions( width, height, @@ -164,7 +172,8 @@ export const Sunburst = ({ motionConfig = defaultProps.motionConfig, theme, ...otherProps -}: SvgProps) => ( +}: Partial, 'data' | 'width' | 'height'>> & + Pick, 'data' | 'width' | 'height'>) => ( isInteractive={isInteractive} {...otherProps} /> diff --git a/packages/sunburst/src/hooks.ts b/packages/sunburst/src/hooks.ts index 3977ccea41..c7216ac5fd 100644 --- a/packages/sunburst/src/hooks.ts +++ b/packages/sunburst/src/hooks.ts @@ -5,7 +5,13 @@ import { usePropertyAccessor, useTheme, useValueFormatter } from '@nivo/core' import { Arc, useArcGenerator } from '@nivo/arcs' import { useOrdinalColorScale, useInheritedColor } from '@nivo/colors' import { partition as d3Partition, hierarchy as d3Hierarchy } from 'd3-hierarchy' -import { CommonProps, ComputedDatum, DataProps, DatumId, SunburstCustomLayerProps } from './types' +import { + SunburstCommonProps, + ComputedDatum, + DataProps, + DatumId, + SunburstCustomLayerProps, +} from './types' import { defaultProps } from './props' export const useSunburst = ({ @@ -23,9 +29,9 @@ export const useSunburst = ({ value?: DataProps['value'] valueFormat?: DataProps['valueFormat'] radius: number - cornerRadius?: CommonProps['cornerRadius'] - colors?: CommonProps['colors'] - childColor?: CommonProps['childColor'] + cornerRadius?: SunburstCommonProps['cornerRadius'] + colors?: SunburstCommonProps['colors'] + childColor?: SunburstCommonProps['childColor'] }) => { const theme = useTheme() const getColor = useOrdinalColorScale, 'color' | 'fill'>>( diff --git a/packages/sunburst/src/types.ts b/packages/sunburst/src/types.ts index 95a66af47c..8563b576e5 100644 --- a/packages/sunburst/src/types.ts +++ b/packages/sunburst/src/types.ts @@ -2,7 +2,6 @@ import { Arc, ArcGenerator, ArcLabelsProps, ArcTransitionMode } from '@nivo/arcs import { OrdinalColorScaleConfig, InheritedColorConfig } from '@nivo/colors' import { Theme, - Dimensions, Box, ValueFormat, SvgDefsAndFill, @@ -54,53 +53,42 @@ export interface ComputedDatum { parent?: ComputedDatum } -export type CommonProps = { - layers: SunburstLayer[] - - margin: Box - +export type SunburstCommonProps = { + data: RawDatum + id: PropertyAccessor + value: PropertyAccessor + valueFormat?: ValueFormat + width: number + height: number + margin?: Box cornerRadius: number - + theme: Theme colors: OrdinalColorScaleConfig, 'color' | 'fill'>> + childColor: InheritedColorConfig> borderWidth: number borderColor: string - - childColor: InheritedColorConfig> - enableArcLabels: boolean - + layers: SunburstLayer[] role: string - - theme: Theme - transitionMode: ArcTransitionMode - isInteractive: boolean tooltip: (props: ComputedDatum) => JSX.Element + animate: boolean + motionConfig: ModernMotionProps['motionConfig'] } & ArcLabelsProps> -export type MouseEventHandler = ( +export type MouseHandler = ( datum: ComputedDatum, - event: React.MouseEvent + event: React.MouseEvent ) => void -export type MouseEventHandlers = Partial<{ - onClick: MouseEventHandler - onMouseEnter: MouseEventHandler - onMouseLeave: MouseEventHandler - onMouseMove: MouseEventHandler +export type MouseHandlers = Partial<{ + onClick: MouseHandler + onMouseEnter: MouseHandler + onMouseLeave: MouseHandler + onMouseMove: MouseHandler }> -export type SvgProps = DataProps & - Dimensions & - SvgDefsAndFill & - MouseEventHandlers & - ModernMotionProps & - Partial> - -export type CompleteSvgProps = DataProps & - Dimensions & +export type SunburstSvgProps = SunburstCommonProps & SvgDefsAndFill & - MouseEventHandlers & - ModernMotionProps & - CommonProps + MouseHandlers diff --git a/packages/sunburst/stories/sunburst.stories.tsx b/packages/sunburst/stories/sunburst.stories.tsx index af7d313c58..46c1d44267 100644 --- a/packages/sunburst/stories/sunburst.stories.tsx +++ b/packages/sunburst/stories/sunburst.stories.tsx @@ -4,7 +4,9 @@ import { action } from '@storybook/addon-actions' import { withKnobs, boolean, select } from '@storybook/addon-knobs' // @ts-ignore import { linearGradientDef, patternDotsDef, useTheme } from '@nivo/core' +// @ts-ignore import { generateLibTree } from '@nivo/generators' +// @ts-ignore import { Sunburst, ComputedDatum, SunburstCustomLayerProps } from '../src' interface RawDatum { diff --git a/packages/sunburst/tests/Sunburst.test.tsx b/packages/sunburst/tests/Sunburst.test.tsx index b40a162857..47526b03d1 100644 --- a/packages/sunburst/tests/Sunburst.test.tsx +++ b/packages/sunburst/tests/Sunburst.test.tsx @@ -2,6 +2,7 @@ import React from 'react' import { mount } from 'enzyme' // @ts-ignore import { linearGradientDef, patternDotsDef } from '@nivo/core' +// @ts-ignore import { Sunburst } from '../src' interface CustomSampleData {