From d818a66555a91c7bdf5e80f71ea0dc559707d997 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= Date: Wed, 27 Mar 2019 16:22:50 +0900 Subject: [PATCH] feat(geo): add TypeScript definitions --- Makefile | 1 + packages/core/src/components/Container.js | 5 - packages/core/src/hocs/withContainer.js | 2 + packages/core/src/tooltip/BasicTooltip.js | 2 + packages/core/src/tooltip/Chip.js | 2 + packages/core/src/tooltip/TableTooltip.js | 2 + packages/geo/index.d.ts | 129 ++++++++++++++++++++++ packages/geo/src/ChoroplethTooltip.js | 2 + packages/geo/src/GeoGraticule.js | 2 + packages/geo/src/GeoMapCanvas.js | 67 +++++------ packages/geo/src/GeoMapFeature.js | 21 +--- packages/geo/src/props.js | 8 +- tslint.json | 1 + 13 files changed, 178 insertions(+), 66 deletions(-) create mode 100644 packages/geo/index.d.ts diff --git a/Makefile b/Makefile index 5a0610cc7..05655addb 100644 --- a/Makefile +++ b/Makefile @@ -129,6 +129,7 @@ packages-tslint: ##@1 packages run tslint on all packages ./packages/bar/index.d.ts \ ./packages/calendar/index.d.ts \ ./packages/core/index.d.ts \ + ./packages/geo/index.d.ts \ ./packages/heatmap/index.d.ts \ ./packages/legends/index.d.ts \ ./packages/line/index.d.ts \ diff --git a/packages/core/src/components/Container.js b/packages/core/src/components/Container.js index 362f12693..db83c44be 100644 --- a/packages/core/src/components/Container.js +++ b/packages/core/src/components/Container.js @@ -22,11 +22,6 @@ const tooltipStyle = { zIndex: 10, } -const noopHandlers = { - showTooltip: noop, - hideTooltip: noop, -} - const Container = ({ children, theme, isInteractive = true }) => { const containerEl = useRef(null) const [state, setState] = useState({ diff --git a/packages/core/src/hocs/withContainer.js b/packages/core/src/hocs/withContainer.js index ea8b9ac54..e55029ec6 100644 --- a/packages/core/src/hocs/withContainer.js +++ b/packages/core/src/hocs/withContainer.js @@ -90,8 +90,10 @@ Container.propTypes = { } export const withContainer = WrappedComponent => { + // eslint-disable-next-line react/display-name return class extends Component { render() { + // eslint-disable-next-line react/prop-types const { theme, ...rest } = this.props return ( diff --git a/packages/core/src/tooltip/BasicTooltip.js b/packages/core/src/tooltip/BasicTooltip.js index ce58b1a21..8621054c3 100644 --- a/packages/core/src/tooltip/BasicTooltip.js +++ b/packages/core/src/tooltip/BasicTooltip.js @@ -60,4 +60,6 @@ BasicTooltip.defaultProps = { enableChip: false, } +BasicTooltip.displayName = 'BasicTooltip' + export default BasicTooltip diff --git a/packages/core/src/tooltip/Chip.js b/packages/core/src/tooltip/Chip.js index 2c3981ba3..db37de24e 100644 --- a/packages/core/src/tooltip/Chip.js +++ b/packages/core/src/tooltip/Chip.js @@ -24,4 +24,6 @@ Chip.defaultProps = { style: {}, } +Chip.displayName = 'Chip' + export default Chip diff --git a/packages/core/src/tooltip/TableTooltip.js b/packages/core/src/tooltip/TableTooltip.js index 6f64c05b1..28754f2be 100644 --- a/packages/core/src/tooltip/TableTooltip.js +++ b/packages/core/src/tooltip/TableTooltip.js @@ -53,4 +53,6 @@ TableTooltip.propTypes = { renderContent: PropTypes.func, } +TableTooltip.displayName = 'TableTooltip' + export default TableTooltip diff --git a/packages/geo/index.d.ts b/packages/geo/index.d.ts new file mode 100644 index 000000000..66d142287 --- /dev/null +++ b/packages/geo/index.d.ts @@ -0,0 +1,129 @@ +import * as React from 'react' +import { Dimensions, Theme, Box, BoxAlign } from '@nivo/core' + +declare module '@nivo/geo' { + /////////////////////////////////////////////////////////////////////////// + // Common + /////////////////////////////////////////////////////////////////////////// + + export type GeoProjectionType = + | 'azimuthalEqualArea' + | 'azimuthalEquidistant' + | 'gnomonic' + | 'orthographic' + | 'stereographic' + | 'equalEarth' + | 'equirectangular' + | 'mercator' + | 'transverseMercator' + | 'naturalEarth1' + + type FeatureAccessor = (feature: F) => T + + interface CommonProps { + features: any[] + + margin?: Partial + + projectionType?: GeoProjectionType + projectionScale?: number + projectionTranslation?: [number, number] + projectionRotation?: [number, number, number] + + enableGraticule?: boolean + graticuleLineWidth?: number + graticuleLineColor?: string + + isInteractive?: boolean + + theme?: Partial + } + + /////////////////////////////////////////////////////////////////////////// + // GeoMap + /////////////////////////////////////////////////////////////////////////// + + export type GeoMapTooltip = React.FunctionComponent<{ + feature: any + }> + + export type GeoMapEventHandler = (feature: any, event: React.MouseEvent) => void + + interface GeoMapCommonProps extends CommonProps { + fillColor?: string | FeatureAccessor + borderWidth?: number | FeatureAccessor + borderColor?: string | FeatureAccessor + + onMouseEnter?: GeoMapEventHandler + onMouseMove?: GeoMapEventHandler + onMouseLeave?: GeoMapEventHandler + onClick?: GeoMapEventHandler + + tooltip?: GeoMapTooltip + } + + export interface GeoMapProps extends GeoMapCommonProps {} + export interface GeoMapCanvasProps extends GeoMapCommonProps { + pixelRatio?: number + } + + export class GeoMap extends React.Component {} + export class ResponsiveGeoMap extends React.Component {} + export class GeoMapCanvas extends React.Component {} + export class ResponsiveGeoMapCanvas extends React.Component {} + + /////////////////////////////////////////////////////////////////////////// + // Choropleth + /////////////////////////////////////////////////////////////////////////// + + export interface ChoroplethBoundFeature { + label: string + value: number + formattedValue: 'string | number' + color: string + data: any + } + + export type ChoroplethEventHandler = ( + feature: ChoroplethBoundFeature, + event: React.MouseEvent + ) => void + + export type ChoroplethTooltip = React.FunctionComponent<{ + feature: ChoroplethBoundFeature + }> + + type DatumMatcher = (...args: any[]) => boolean + + interface ChoroplethCommonProps extends CommonProps { + data: any[] + + match?: string | DatumMatcher + label?: string | FeatureAccessor + value?: string | FeatureAccessor + valueFormat?: string | FeatureAccessor + colors?: string | string[] | FeatureAccessor + unknownColor?: string + + fillColor?: string | FeatureAccessor + borderWidth?: number | FeatureAccessor + borderColor?: string | FeatureAccessor + + tooltip?: ChoroplethTooltip + + onMouseEnter?: ChoroplethEventHandler + onMouseMove?: ChoroplethEventHandler + onMouseLeave?: ChoroplethEventHandler + onClick?: ChoroplethEventHandler + } + + export interface ChoroplethProps extends ChoroplethCommonProps {} + export interface ChoroplethCanvasProps extends ChoroplethCommonProps { + pixelRatio?: number + } + + export class Choropleth extends React.Component {} + export class ResponsiveChoropleth extends React.Component {} + export class ChoroplethCanvas extends React.Component {} + export class ResponsiveChoroplethCanvas extends React.Component {} +} diff --git a/packages/geo/src/ChoroplethTooltip.js b/packages/geo/src/ChoroplethTooltip.js index cfb20da6c..862141787 100644 --- a/packages/geo/src/ChoroplethTooltip.js +++ b/packages/geo/src/ChoroplethTooltip.js @@ -27,4 +27,6 @@ ChoroplethTooltip.propTypes = { feature: PropTypes.object.isRequired, } +ChoroplethTooltip.displayName = 'ChoroplethTooltip' + export default ChoroplethTooltip diff --git a/packages/geo/src/GeoGraticule.js b/packages/geo/src/GeoGraticule.js index 51c5c830b..b2513262e 100644 --- a/packages/geo/src/GeoGraticule.js +++ b/packages/geo/src/GeoGraticule.js @@ -20,4 +20,6 @@ GeoGraticule.propTypes = { lineColor: PropTypes.string.isRequired, } +GeoGraticule.displayName = 'GeoGraticule' + export default GeoGraticule diff --git a/packages/geo/src/GeoMapCanvas.js b/packages/geo/src/GeoMapCanvas.js index 314e2b33f..73c0a1a30 100644 --- a/packages/geo/src/GeoMapCanvas.js +++ b/packages/geo/src/GeoMapCanvas.js @@ -18,32 +18,34 @@ const getFeatureFromMouseEvent = (event, el, features, projection) => { return features.find(f => geoContains(f, projection.invert([x, y]))) } -const GeoMapCanvas = ({ - width, - height, - margin: partialMargin, - pixelRatio, - features, - layers, - - projectionType, - projectionScale, - projectionTranslation, - projectionRotation, - - fillColor, - borderWidth, - borderColor, - - enableGraticule, - graticuleLineWidth, - graticuleLineColor, - - isInteractive, - onClick, - onMouseMove, - tooltip: Tooltip, -}) => { +const GeoMapCanvas = props => { + const { + width, + height, + margin: partialMargin, + pixelRatio, + features, + layers, + + projectionType, + projectionScale, + projectionTranslation, + projectionRotation, + + fillColor, + borderWidth, + borderColor, + + enableGraticule, + graticuleLineWidth, + graticuleLineColor, + + isInteractive, + onClick, + onMouseMove, + tooltip: Tooltip, + } = props + const canvasEl = useRef(null) const theme = useTheme() const { margin, outerWidth, outerHeight } = useDimensions(width, height, partialMargin) @@ -164,16 +166,3 @@ GeoMapCanvas.propTypes = GeoMapCanvasPropTypes GeoMapCanvas.defaultProps = GeoMapCanvasDefaultProps export default withContainer(GeoMapCanvas) - -/* -handleClick = event => { - const { isInteractive, onClick } = this.props - - if (isInteractive !== true) return - - const feature = this.getFeatureFromMouseEvent(event) - if (feature) { - onClick(feature, event) - } -} -*/ diff --git a/packages/geo/src/GeoMapFeature.js b/packages/geo/src/GeoMapFeature.js index 81c050e40..02c058097 100644 --- a/packages/geo/src/GeoMapFeature.js +++ b/packages/geo/src/GeoMapFeature.js @@ -6,7 +6,7 @@ * For the full copyright and license information, please view the LICENSE * file that was distributed with this source code. */ -import React, { memo, useCallback } from 'react' +import React, { memo } from 'react' import PropTypes from 'prop-types' const GeoMapFeature = memo( @@ -57,21 +57,6 @@ GeoMapFeature.propTypes = { onClick: PropTypes.func.isRequired, } -export default GeoMapFeature - -/* -handleMouseEnter = event => { - const { onMouseEnter, feature } = this.props - onMouseEnter(feature, event) -} +GeoMapFeature.displayName = 'GeoMapFeature' -handleMouseMove = event => { - const { onMouseMove, feature } = this.props - onMouseMove(feature, event) -} - -handleMouseLeave = event => { - const { onMouseLeave, feature } = this.props - onMouseLeave(feature, event) -} -*/ +export default GeoMapFeature diff --git a/packages/geo/src/props.js b/packages/geo/src/props.js index 23d511aa1..5c576312c 100644 --- a/packages/geo/src/props.js +++ b/packages/geo/src/props.js @@ -26,14 +26,14 @@ const commonPropTypes = { projectionTranslation: PropTypes.arrayOf(PropTypes.number).isRequired, projectionRotation: PropTypes.arrayOf(PropTypes.number).isRequired, - enableGraticule: PropTypes.bool.isRequired, - graticuleLineWidth: PropTypes.number.isRequired, - graticuleLineColor: PropTypes.string.isRequired, - fillColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, borderWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired, borderColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, + enableGraticule: PropTypes.bool.isRequired, + graticuleLineWidth: PropTypes.number.isRequired, + graticuleLineColor: PropTypes.string.isRequired, + isInteractive: PropTypes.bool.isRequired, onMouseEnter: PropTypes.func.isRequired, onMouseMove: PropTypes.func.isRequired, diff --git a/tslint.json b/tslint.json index 63204e33f..35d6d6acd 100644 --- a/tslint.json +++ b/tslint.json @@ -6,6 +6,7 @@ "ordered-imports": false, "max-classes-per-file": false, "interface-name": false, + "no-empty-interface": false, "trailing-comma": [ true, {