diff --git a/packages/vx-geo/package.json b/packages/vx-geo/package.json index b873a3837..6554be57b 100644 --- a/packages/vx-geo/package.json +++ b/packages/vx-geo/package.json @@ -34,6 +34,7 @@ "@types/geojson": "*", "@types/react": "*", "@vx/group": "0.0.199", + "@vx/primitives": "0.0.199", "classnames": "^2.2.5", "d3-geo": "^1.11.3", "prop-types": "^15.5.10" diff --git a/packages/vx-geo/src/graticule/Graticule.tsx b/packages/vx-geo/src/graticule/Graticule.tsx index 24fe746c7..ccec8c764 100644 --- a/packages/vx-geo/src/graticule/Graticule.tsx +++ b/packages/vx-geo/src/graticule/Graticule.tsx @@ -3,6 +3,7 @@ import { Group } from '@vx/group'; import { geoGraticule, GeoGraticuleGenerator } from 'd3-geo'; // eslint-disable-next-line import/no-unresolved import { LineString, MultiLineString, Polygon } from 'geojson'; +import { G, Path } from '@vx/primitives'; export type GraticuleProps = { /** @@ -67,16 +68,16 @@ export default function Graticule({ return ( {graticule && ( - + )} {lines && currGraticule.lines().map((line, i) => ( - - - + + + ))} {outline && ( - + )} ); diff --git a/packages/vx-geo/src/projections/Projection.tsx b/packages/vx-geo/src/projections/Projection.tsx index c6d850fea..0e9690791 100644 --- a/packages/vx-geo/src/projections/Projection.tsx +++ b/packages/vx-geo/src/projections/Projection.tsx @@ -15,6 +15,7 @@ import { // this is just for types // eslint-disable-next-line import/no-unresolved import { LineString, Polygon, MultiLineString } from 'geojson'; +import { Platform, G, Path } from '@vx/primitives'; import Graticule, { GraticuleProps } from '../graticule/Graticule'; import { GeoPermissibleObjects, ProjectionPreset, Projection as ProjectionShape } from '../types'; @@ -173,15 +174,15 @@ export default function Projection({ )} {features.map((feature, i) => ( - - + {centroid && centroid(feature.centroid, feature)} - + ))} {/* TODO: Maybe find a different way to pass projection function to use for example invert */} diff --git a/packages/vx-gradient/package.json b/packages/vx-gradient/package.json index f9cfc595d..e93d4c85e 100644 --- a/packages/vx-gradient/package.json +++ b/packages/vx-gradient/package.json @@ -29,7 +29,8 @@ "homepage": "https://github.com/hshoff/vx#readme", "dependencies": { "@types/react": "*", - "prop-types": "^15.5.7" + "prop-types": "^15.5.7", + "@vx/primitives": "^0.0.199" }, "peerDependencies": { "react": "^15.0.0-0 || ^16.0.0-0" diff --git a/packages/vx-gradient/src/gradients/LinearGradient.tsx b/packages/vx-gradient/src/gradients/LinearGradient.tsx index e8caa5977..1398af3b4 100644 --- a/packages/vx-gradient/src/gradients/LinearGradient.tsx +++ b/packages/vx-gradient/src/gradients/LinearGradient.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Stop, Defs, LinearGradient as SvgLinearGradient } from '@vx/primitives'; type LinearGradientOwnProps = { /** Unique id for the gradient. Should be unique across all page elements. */ @@ -65,8 +66,8 @@ export default function LinearGradient({ y2 = '1'; } return ( - - + {!!children && children} - {!children && } - {!children && } - - + {!children && } + {!children && } + + ); } diff --git a/packages/vx-gradient/src/gradients/RadialGradient.tsx b/packages/vx-gradient/src/gradients/RadialGradient.tsx index 6c730df4a..d5c5a284e 100644 --- a/packages/vx-gradient/src/gradients/RadialGradient.tsx +++ b/packages/vx-gradient/src/gradients/RadialGradient.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { LinearGradientProps } from './LinearGradient'; +import { Stop, Defs, RadialGradient as SvgRadialGradient } from '@vx/primitives'; export type RadialGradientProps = Pick< LinearGradientProps, @@ -30,16 +31,16 @@ export default function RadialGradient({ ...restProps }: RadialGradientProps) { return ( - - + {!!children && children} - {!children && } - {!children && } - - + {!children && } + {!children && } + + ); } diff --git a/packages/vx-group/package.json b/packages/vx-group/package.json index ab50d8aa6..f315a01b2 100644 --- a/packages/vx-group/package.json +++ b/packages/vx-group/package.json @@ -35,7 +35,8 @@ "@types/classnames": "^2.2.9", "@types/react": "*", "classnames": "^2.2.5", - "prop-types": "^15.6.2" + "prop-types": "^15.6.2", + "@vx/primitives": "^0.0.199" }, "publishConfig": { "access": "public" diff --git a/packages/vx-group/src/Group.tsx b/packages/vx-group/src/Group.tsx index b8e9a9248..c9bdc3bc0 100644 --- a/packages/vx-group/src/Group.tsx +++ b/packages/vx-group/src/Group.tsx @@ -1,5 +1,6 @@ import React from 'react'; import cx from 'classnames'; +import { Platform, G } from '@vx/primitives'; type GroupProps = { /** Top offset applied to ``. */ @@ -25,13 +26,13 @@ export default function Group({ ...restProps }: GroupProps & Omit, keyof GroupProps>) { return ( - {children} - + ); } diff --git a/packages/vx-primitives/.npmrc b/packages/vx-primitives/.npmrc new file mode 100644 index 000000000..9cf949503 --- /dev/null +++ b/packages/vx-primitives/.npmrc @@ -0,0 +1 @@ +package-lock=false \ No newline at end of file diff --git a/packages/vx-primitives/Readme.md b/packages/vx-primitives/Readme.md new file mode 100644 index 000000000..a5d584c61 --- /dev/null +++ b/packages/vx-primitives/Readme.md @@ -0,0 +1,15 @@ +# @vx/group + + + + + +`` provides a simplified API for SVG `` elements, which are containers for other SVG +objects. You may pass in a `top` and `left` margin (instead of `transform={translate(...)}`) and a +`className`. + +## Installation + +``` +npm install --save @vx/primitives +``` diff --git a/packages/vx-primitives/package.json b/packages/vx-primitives/package.json new file mode 100644 index 000000000..669d00a17 --- /dev/null +++ b/packages/vx-primitives/package.json @@ -0,0 +1,46 @@ +{ + "name": "@vx/primitives", + "version": "0.0.199", + "description": "vx primitives", + "sideEffects": false, + "main": "lib/index.js", + "module": "esm/index.js", + "files": [ + "lib", + "esm" + ], + "types": "lib/index.d.ts", + "repository": { + "type": "git", + "url": "git+https://github.com/hshoff/vx.git" + }, + "keywords": [ + "vx", + "react", + "d3", + "visualizations", + "charts", + "svg" + ], + "author": "@macintoshhelper", + "license": "MIT", + "bugs": { + "url": "https://github.com/hshoff/vx/issues" + }, + "homepage": "https://github.com/hshoff/vx#readme", + "peerDependencies": { + "react": "^15.0.0-0 || ^16.0.0-0" + }, + "dependencies": { + "@types/classnames": "^2.2.9", + "@types/react": "*", + "classnames": "^2.2.5", + "prop-types": "^15.6.2" + }, + "devDependencies": { + "react-native-svg": "^12.1.0" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/vx-primitives/src/@types/react-native-web/index.d.ts b/packages/vx-primitives/src/@types/react-native-web/index.d.ts new file mode 100644 index 000000000..78f55c37e --- /dev/null +++ b/packages/vx-primitives/src/@types/react-native-web/index.d.ts @@ -0,0 +1,581 @@ +import * as React from 'react'; +// import * as ReactNative from './@types/react-native/'; +// import { GestureResponderEvent } from 'react-native'; + +type GestureResponderHandlers = any; +type GestureResponderEvent = any; +// type RN = { ImageProps: any }; + +declare namespace RN { + export type ImageProps = any; + export type ViewProperties = any; +} + +// Common props +export type NumberProp = string | number; +export type NumberArray = NumberProp[] | NumberProp; + +export type FillRule = 'evenodd' | 'nonzero'; +export type Units = 'userSpaceOnUse' | 'objectBoundingBox'; + +export type TextAnchor = 'start' | 'middle' | 'end'; +export type FontStyle = 'normal' | 'italic' | 'oblique'; +export type FontVariant = 'normal' | 'small-caps'; +export type FontWeight = + | NumberProp + | 'normal' + | 'bold' + | 'bolder' + | 'lighter' + | '100' + | '200' + | '300' + | '400' + | '500' + | '600' + | '700' + | '800' + | '900'; +export type FontStretch = + | 'normal' + | 'wider' + | 'narrower' + | 'ultra-condensed' + | 'extra-condensed' + | 'condensed' + | 'semi-condensed' + | 'semi-expanded' + | 'expanded' + | 'extra-expanded' + | 'ultra-expanded'; +export type TextDecoration = + | 'none' + | 'underline' + | 'overline' + | 'line-through' + | 'blink'; +export type FontVariantLigatures = 'normal' | 'none'; +export type AlignmentBaseline = + | 'baseline' + | 'text-bottom' + | 'alphabetic' + | 'ideographic' + | 'middle' + | 'central' + | 'mathematical' + | 'text-top' + | 'bottom' + | 'center' + | 'top' + | 'text-before-edge' + | 'text-after-edge' + | 'before-edge' + | 'after-edge' + | 'hanging'; +export type BaselineShift = + | 'sub' + | 'super' + | 'baseline' + | ReadonlyArray + | NumberProp; +export type LengthAdjust = 'spacing' | 'spacingAndGlyphs'; + +export type TextPathMethod = 'align' | 'stretch'; +export type TextPathSpacing = 'auto' | 'exact'; +export type TextPathMidLine = 'sharp' | 'smooth'; + +export type Linecap = 'butt' | 'square' | 'round'; +export type Linejoin = 'miter' | 'bevel' | 'round'; + +export interface TouchableProps { + disabled?: boolean; + onPress?: (event: GestureResponderEvent) => void; + onPressIn?: (event: GestureResponderEvent) => void; + onPressOut?: (event: GestureResponderEvent) => void; + onLongPress?: (event: GestureResponderEvent) => void; + delayPressIn?: number; + delayPressOut?: number; + delayLongPress?: number; +} + +export interface ResponderProps extends GestureResponderHandlers { + pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto'; +} + +// rgba values inside range 0 to 1 inclusive +// rgbaArray = [r, g, b, a] +export type rgbaArray = ReadonlyArray; + +// argb values inside range 0x00 to 0xff inclusive +// int32ARGBColor = 0xaarrggbb +export type int32ARGBColor = number; + +export type Color = int32ARGBColor | rgbaArray | string; + +export interface FillProps { + fill?: Color; + fillOpacity?: NumberProp; + fillRule?: FillRule; +} + +export interface ClipProps { + clipRule?: FillRule; + clipPath?: string; +} + +export interface VectorEffectProps { + vectorEffect?: + | 'none' + | 'non-scaling-stroke' + | 'nonScalingStroke' + | 'default' + | 'inherit' + | 'uri'; +} + +export interface DefinitionProps { + id?: string; +} + +export interface StrokeProps { + stroke?: Color; + strokeWidth?: NumberProp; + strokeOpacity?: NumberProp; + strokeDasharray?: ReadonlyArray | NumberProp; + strokeDashoffset?: NumberProp; + strokeLinecap?: Linecap; + strokeLinejoin?: Linejoin; + strokeMiterlimit?: NumberProp; +} + +export interface FontObject { + fontStyle?: FontStyle; + fontVariant?: FontVariant; + fontWeight?: FontWeight; + fontStretch?: FontStretch; + fontSize?: NumberProp; + fontFamily?: string; + textAnchor?: TextAnchor; + textDecoration?: TextDecoration; + letterSpacing?: NumberProp; + wordSpacing?: NumberProp; + kerning?: NumberProp; + fontFeatureSettings?: string; + fontVariantLigatures?: FontVariantLigatures; + fontVariationSettings?: string; +} + +export interface FontProps extends FontObject { + font?: FontObject; +} + +export interface TransformObject { + translate?: NumberArray; + translateX?: NumberProp; + translateY?: NumberProp; + origin?: NumberArray; + originX?: NumberProp; + originY?: NumberProp; + scale?: NumberArray; + scaleX?: NumberProp; + scaleY?: NumberProp; + skew?: NumberArray; + skewX?: NumberProp; + skewY?: NumberProp; + rotation?: NumberProp; + x?: NumberArray; + y?: NumberArray; +} + +/* + + ColumnMajorTransformMatrix + + [a, b, c, d, tx, ty] + + This matrix can be visualized as: + + ╔═ ═╗ + ║ a c tx ║ + ║ b d ty ║ + ║ 0 0 1 ║ + ╚═ ═╝ + +*/ +export type ColumnMajorTransformMatrix = [ + number, + number, + number, + number, + number, + number, +]; + +export interface TransformProps extends TransformObject { + transform?: ColumnMajorTransformMatrix | string | TransformObject; +} + +export interface CommonMaskProps { + mask?: string; +} + +export interface CommonMarkerProps { + marker?: string; + markerStart?: string; + markerMid?: string; + markerEnd?: string; +} + +export interface CommonPathProps + extends FillProps, + StrokeProps, + ClipProps, + TransformProps, + VectorEffectProps, + ResponderProps, + TouchableProps, + DefinitionProps, + CommonMarkerProps, + CommonMaskProps {} + +// Element props +export interface CircleProps extends CommonPathProps { + cx?: NumberProp; + cy?: NumberProp; + opacity?: NumberProp; + r?: NumberProp; +} +export const Circle: React.ComponentClass; +export type Circle = React.ComponentClass; + +export interface ClipPathProps { + id?: string; +} +export const ClipPath: React.ComponentClass; +export type ClipPath = React.ComponentClass; + +export const Defs: React.ComponentClass<{}>; +export type Defs = React.ComponentClass<{}>; + +export interface EllipseProps extends CommonPathProps { + cx?: NumberProp; + cy?: NumberProp; + opacity?: NumberProp; + rx?: NumberProp; + ry?: NumberProp; +} +export const Ellipse: React.ComponentClass; +export type Ellipse = React.ComponentClass; + +export interface GProps extends CommonPathProps { + opacity?: NumberProp; +} +export const G: React.ComponentClass; +export type G = React.ComponentClass; + +export interface ForeignObjectProps { + x?: NumberProp; + y?: NumberProp; + width?: NumberProp; + height?: NumberProp; +} +export const ForeignObject: React.ComponentClass; +export type ForeignObject = React.ComponentClass; + +export interface ImageProps + extends ResponderProps, + CommonMaskProps, + ClipProps, + TouchableProps { + x?: NumberProp; + y?: NumberProp; + width?: NumberProp; + height?: NumberProp; + xlinkHref?: RN.ImageProps['source']; + href?: RN.ImageProps['source']; + preserveAspectRatio?: string; + opacity?: NumberProp; + clipPath?: string; + id?: string; +} +export const Image: React.ComponentClass; +export type Image = React.ComponentClass; + +export interface LineProps extends CommonPathProps { + opacity?: NumberProp; + x1?: NumberProp; + x2?: NumberProp; + y1?: NumberProp; + y2?: NumberProp; +} +export const Line: React.ComponentClass; +export type Line = React.ComponentClass; + +export interface LinearGradientProps { + x1?: NumberProp; + x2?: NumberProp; + y1?: NumberProp; + y2?: NumberProp; + gradientUnits?: Units; + gradientTransform?: ColumnMajorTransformMatrix | string; + id?: string; +} +export const LinearGradient: React.ComponentClass; +export type LinearGradient = React.ComponentClass; + +export interface PathProps extends CommonPathProps { + d?: string; + opacity?: NumberProp; +} +export const Path: React.ComponentClass; +export type Path = React.ComponentClass; + +export interface PatternProps { + id?: string; + x?: NumberProp; + y?: NumberProp; + width?: NumberProp; + height?: NumberProp; + patternTransform?: ColumnMajorTransformMatrix | string; + patternUnits?: Units; + patternContentUnits?: Units; + viewBox?: string; + preserveAspectRatio?: string; +} +export const Pattern: React.ComponentClass; +export type Pattern = React.ComponentClass; + +export interface PolygonProps extends CommonPathProps { + opacity?: NumberProp; + points?: string | ReadonlyArray; +} +export const Polygon: React.ComponentClass; +export type Polygon = React.ComponentClass; + +export interface PolylineProps extends CommonPathProps { + opacity?: NumberProp; + points?: string | ReadonlyArray; +} +export const Polyline: React.ComponentClass; +export type Polyline = React.ComponentClass; + +export interface RadialGradientProps { + fx?: NumberProp; + fy?: NumberProp; + rx?: NumberProp; + ry?: NumberProp; + cx?: NumberProp; + cy?: NumberProp; + r?: NumberProp; + gradientUnits?: Units; + gradientTransform?: ColumnMajorTransformMatrix | string; + id?: string; +} +export const RadialGradient: React.ComponentClass; +export type RadialGradient = React.ComponentClass; + +export interface RectProps extends CommonPathProps { + x?: NumberProp; + y?: NumberProp; + width?: NumberProp; + height?: NumberProp; + rx?: NumberProp; + ry?: NumberProp; + opacity?: NumberProp; +} +export const Rect: React.ComponentClass; +export type Rect = React.ComponentClass; + +export interface StopProps { + stopColor?: Color; + stopOpacity?: NumberProp; + offset?: NumberProp; +} +export const Stop: React.ComponentClass; +export type Stop = React.ComponentClass; + +export interface SvgProps extends GProps, RN.ViewProperties { + width?: NumberProp; + height?: NumberProp; + viewBox?: string; + preserveAspectRatio?: string; + color?: Color; + title?: string; +} + +// Svg is both regular and default exported +export const Svg: React.ComponentClass; +export type Svg = React.ComponentClass; +export default Svg; + +export interface SymbolProps { + id?: string; + viewBox?: string; + preserveAspectRatio?: string; + opacity?: NumberProp; +} +export const Symbol: React.ComponentClass; +export type Symbol = React.ComponentClass; + +export interface TSpanProps extends CommonPathProps, FontProps { + x?: NumberArray; + y?: NumberArray; + dx?: NumberArray; + dy?: NumberArray; + rotate?: NumberArray; + inlineSize?: NumberProp; +} +export const TSpan: React.ComponentClass; +export type TSpan = React.ComponentClass; + +export interface TextSpecificProps extends CommonPathProps, FontProps { + alignmentBaseline?: AlignmentBaseline; + baselineShift?: BaselineShift; + verticalAlign?: NumberProp; + lengthAdjust?: LengthAdjust; + textLength?: NumberProp; + fontData?: null | { [name: string]: unknown }; + fontFeatureSettings?: string; +} + +export interface TextProps extends TextSpecificProps { + x?: NumberArray; + y?: NumberArray; + dx?: NumberArray; + dy?: NumberArray; + rotate?: NumberArray; + opacity?: NumberProp; + inlineSize?: NumberProp; +} +export const Text: React.ComponentClass; +export type Text = React.ComponentClass; + +export interface TextPathProps extends TextSpecificProps { + xlinkHref?: string; + href?: string; + startOffset?: NumberProp; + method?: TextPathMethod; + spacing?: TextPathSpacing; + midLine?: TextPathMidLine; +} +export const TextPath: React.ComponentClass; +export type TextPath = React.ComponentClass; + +export interface UseProps extends CommonPathProps { + xlinkHref?: string; + href?: string; + width?: NumberProp; + height?: NumberProp; + x?: NumberProp; + y?: NumberProp; + opacity?: NumberProp; +} +export const Use: React.ComponentClass; +export type Use = React.ComponentClass; + +export enum EMaskUnits { + USER_SPACE_ON_USE = 'userSpaceOnUse', + OBJECT_BOUNDING_BOX = 'objectBoundingBox', +} + +export type TMaskUnits = + | EMaskUnits.USER_SPACE_ON_USE + | EMaskUnits.OBJECT_BOUNDING_BOX; + +export interface MaskProps extends CommonPathProps { + id?: string; + x?: NumberProp; + y?: NumberProp; + width?: NumberProp; + height?: NumberProp; + maskTransform?: ColumnMajorTransformMatrix | string; + maskUnits?: TMaskUnits; + maskContentUnits?: TMaskUnits; +} +export const Mask: React.ComponentClass; +export type Mask = React.ComponentClass; + +export enum MarkerUnits { + STROKE_WIDTH = 'strokeWidth', + USER_SPACE_ON_USE = 'userSpaceOnUse', +} + +export enum Orient { + AUTO = 'auto', + AUTO_START_REVERSE = 'auto-start-reverse', +} + +export interface MarkerProps { + id?: string; + viewBox?: string; + preserveAspectRatio?: string; + refX?: NumberProp; + refY?: NumberProp; + markerWidth?: NumberProp; + markerHeight?: NumberProp; + markerUnits?: MarkerUnits; + orient?: Orient | NumberProp; +} +export const Marker: React.ComponentClass; +export type Marker = React.ComponentClass; + +export type Styles = { [property: string]: string }; + +export interface AST { + tag: string; + style?: Styles; + styles?: string; + priority?: Map; + parent: AST | null; + children: (AST | string)[] | (JSX.Element | string)[]; + props: { + [prop: string]: Styles | string | undefined; + }; + Tag: React.ComponentType; +} + +export interface XmlAST extends AST { + children: (XmlAST | string)[]; + parent: XmlAST | null; +} + +export interface JsxAST extends AST { + children: (JSX.Element | string)[]; +} + +export interface UriProps extends SvgProps { + uri: string | null; + override?: SvgProps; +} +export type UriState = { xml: string | null }; + +export interface XmlProps extends SvgProps { + xml: string | null; + override?: SvgProps; +} +export type XmlState = { ast: JsxAST | null }; + +export interface AstProps extends SvgProps { + ast: JsxAST | null; + override?: SvgProps; +} + +export type Middleware = (ast: XmlAST) => XmlAST; + +export function parse(source: string, middleware?: Middleware): JsxAST | null; + +export const SvgAst: React.FunctionComponent; + +export const SvgXml: React.FunctionComponent; +export const SvgFromXml: React.ComponentClass; + +export const SvgUri: React.FunctionComponent; +export const SvgFromUri: React.ComponentClass; + +export const SvgCss: React.FunctionComponent; +export const SvgWithCss: React.ComponentClass; + +export const SvgCssUri: React.FunctionComponent; +export const SvgWithCssUri: React.ComponentClass; + +export const inlineStyles: Middleware; diff --git a/packages/vx-primitives/src/@types/react-native/index.d.ts b/packages/vx-primitives/src/@types/react-native/index.d.ts new file mode 100644 index 000000000..bcf66abf0 --- /dev/null +++ b/packages/vx-primitives/src/@types/react-native/index.d.ts @@ -0,0 +1,314 @@ +declare module 'react-native' { + const a: any; + + export default a; + export const GestureResponderHandlers: any; + export const ImageProps: any; + export interface ViewProperties { [key: string]: any } + + type NodeHandle = number; + + + type Falsy = undefined | null | false; + interface RecursiveArray extends Array | RecursiveArray> { } + /** Keep a brand of 'T' so that calls to `StyleSheet.flatten` can take `RegisteredStyle` and return `T`. */ + type RegisteredStyle = number & { __registeredStyleBrand: T }; + export type StyleProp = T | RegisteredStyle | RecursiveArray | Falsy> | Falsy; + + /** + * @see https://facebook.github.io/react-native/docs/image.html + */ + export interface ImagePropsBase { + /** + * onLayout function + * + * Invoked on mount and layout changes with + * + * {nativeEvent: { layout: {x, y, width, height} }}. + */ + onLayout?: (event: any) => void; + + /** + * Invoked on load error with {nativeEvent: {error}} + */ + onError?: (error: NativeSyntheticEvent) => void; + + /** + * Invoked when load completes successfully + * { source: { url, height, width } }. + */ + onLoad?: (event: NativeSyntheticEvent) => void; + + /** + * Invoked when load either succeeds or fails + */ + onLoadEnd?: () => void; + + /** + * Invoked on load start + */ + onLoadStart?: () => void; + + progressiveRenderingEnabled?: boolean; + + borderRadius?: number; + + borderTopLeftRadius?: number; + + borderTopRightRadius?: number; + + borderBottomLeftRadius?: number; + + borderBottomRightRadius?: number; + + /** + * Determines how to resize the image when the frame doesn't match the raw + * image dimensions. + * + * 'cover': Scale the image uniformly (maintain the image's aspect ratio) + * so that both dimensions (width and height) of the image will be equal + * to or larger than the corresponding dimension of the view (minus padding). + * + * 'contain': Scale the image uniformly (maintain the image's aspect ratio) + * so that both dimensions (width and height) of the image will be equal to + * or less than the corresponding dimension of the view (minus padding). + * + * 'stretch': Scale width and height independently, This may change the + * aspect ratio of the src. + * + * 'repeat': Repeat the image to cover the frame of the view. + * The image will keep it's size and aspect ratio. (iOS only) + * + * 'center': Scale the image down so that it is completely visible, + * if bigger than the area of the view. + * The image will not be scaled up. + */ + resizeMode?: any; + + /** + * The mechanism that should be used to resize the image when the image's dimensions + * differ from the image view's dimensions. Defaults to `auto`. + * + * - `auto`: Use heuristics to pick between `resize` and `scale`. + * + * - `resize`: A software operation which changes the encoded image in memory before it + * gets decoded. This should be used instead of `scale` when the image is much larger + * than the view. + * + * - `scale`: The image gets drawn downscaled or upscaled. Compared to `resize`, `scale` is + * faster (usually hardware accelerated) and produces higher quality images. This + * should be used if the image is smaller than the view. It should also be used if the + * image is slightly bigger than the view. + * + * More details about `resize` and `scale` can be found at http://frescolib.org/docs/resizing-rotating.html. + * + * @platform android + */ + resizeMethod?: 'auto' | 'resize' | 'scale'; + + /** + * The image source (either a remote URL or a local file resource). + * + * This prop can also contain several remote URLs, specified together with their width and height and potentially with scale/other URI arguments. + * The native side will then choose the best uri to display based on the measured size of the image container. + * A cache property can be added to control how networked request interacts with the local cache. + * + * The currently supported formats are png, jpg, jpeg, bmp, gif, webp (Android only), psd (iOS only). + */ + source: any; + + /** + * similarly to `source`, this property represents the resource used to render + * the loading indicator for the image, displayed until image is ready to be + * displayed, typically after when it got downloaded from network. + */ + loadingIndicatorSource?: any; + + /** + * A unique identifier for this element to be used in UI Automation testing scripts. + */ + testID?: string; + + /** + * A static image to display while downloading the final image off the network. + */ + defaultSource?: any | number; + } + + /** + * Image style + * @see https://facebook.github.io/react-native/docs/image.html#style + * @see https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageStylePropTypes.js + */ + export interface ImageStyle { + resizeMode?: any; + backfaceVisibility?: 'visible' | 'hidden'; + borderBottomLeftRadius?: number; + borderBottomRightRadius?: number; + backgroundColor?: string; + borderColor?: string; + borderWidth?: number; + borderRadius?: number; + borderTopLeftRadius?: number; + borderTopRightRadius?: number; + overflow?: 'visible' | 'hidden'; + overlayColor?: string; + tintColor?: string; + opacity?: number; + } + + export interface ImageProps extends ImagePropsBase { + /** + * + * Style + */ + style?: StyleProp; + } + + + export interface NativeSyntheticEvent extends React.BaseSyntheticEvent { } + + + export interface NativeTouchEvent { + /** + * Array of all touch events that have changed since the last event + */ + changedTouches: NativeTouchEvent[]; + + /** + * The ID of the touch + */ + identifier: string; + + /** + * The X position of the touch, relative to the element + */ + locationX: number; + + /** + * The Y position of the touch, relative to the element + */ + locationY: number; + + /** + * The X position of the touch, relative to the screen + */ + pageX: number; + + /** + * The Y position of the touch, relative to the screen + */ + pageY: number; + + /** + * The node id of the element receiving the touch event + */ + target: string; + + /** + * A time identifier for the touch, useful for velocity calculation + */ + timestamp: number; + + /** + * Array of all current touches on the screen + */ + touches: NativeTouchEvent[]; + } + + export interface GestureResponderEvent extends NativeSyntheticEvent { } + + + export interface GestureResponderHandlers { + /** + * A view can become the touch responder by implementing the correct negotiation methods. + * There are two methods to ask the view if it wants to become responder: + */ + + /** + * Does this view want to become responder on the start of a touch? + */ + onStartShouldSetResponder?: (event: GestureResponderEvent) => boolean; + + /** + * Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsiveness? + */ + onMoveShouldSetResponder?: (event: GestureResponderEvent) => boolean; + + /** + * If the View returns true and attempts to become the responder, one of the following will happen: + */ + + onResponderEnd?: (event: GestureResponderEvent) => void; + + /** + * The View is now responding for touch events. + * This is the time to highlight and show the user what is happening + */ + onResponderGrant?: (event: GestureResponderEvent) => void; + + /** + * Something else is the responder right now and will not release it + */ + onResponderReject?: (event: GestureResponderEvent) => void; + + /** + * If the view is responding, the following handlers can be called: + */ + + /** + * The user is moving their finger + */ + onResponderMove?: (event: GestureResponderEvent) => void; + + /** + * Fired at the end of the touch, ie "touchUp" + */ + onResponderRelease?: (event: GestureResponderEvent) => void; + + onResponderStart?: (event: GestureResponderEvent) => void; + + /** + * Something else wants to become responder. + * Should this view release the responder? Returning true allows release + */ + onResponderTerminationRequest?: (event: GestureResponderEvent) => boolean; + + /** + * The responder has been taken from the View. + * Might be taken by other views after a call to onResponderTerminationRequest, + * or might be taken by the OS without asking (happens with control center/ notification center on iOS) + */ + onResponderTerminate?: (event: GestureResponderEvent) => void; + + /** + * onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, + * where the deepest node is called first. + * That means that the deepest component will become responder when multiple Views return true for *ShouldSetResponder handlers. + * This is desirable in most cases, because it makes sure all controls and buttons are usable. + * + * However, sometimes a parent will want to make sure that it becomes responder. + * This can be handled by using the capture phase. + * Before the responder system bubbles up from the deepest component, + * it will do a capture phase, firing on*ShouldSetResponderCapture. + * So if a parent View wants to prevent the child from becoming responder on a touch start, + * it should have a onStartShouldSetResponderCapture handler which returns true. + */ + onStartShouldSetResponderCapture?: (event: GestureResponderEvent) => boolean; + + /** + * onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, + * where the deepest node is called first. + * That means that the deepest component will become responder when multiple Views return true for *ShouldSetResponder handlers. + * This is desirable in most cases, because it makes sure all controls and buttons are usable. + * + * However, sometimes a parent will want to make sure that it becomes responder. + * This can be handled by using the capture phase. + * Before the responder system bubbles up from the deepest component, + * it will do a capture phase, firing on*ShouldSetResponderCapture. + * So if a parent View wants to prevent the child from becoming responder on a touch start, + * it should have a onStartShouldSetResponderCapture handler which returns true. + */ + onMoveShouldSetResponderCapture?: (event: GestureResponderEvent) => boolean; + } +} diff --git a/packages/vx-primitives/src/VxPrimitives.ts b/packages/vx-primitives/src/VxPrimitives.ts new file mode 100644 index 000000000..ee7149b30 --- /dev/null +++ b/packages/vx-primitives/src/VxPrimitives.ts @@ -0,0 +1,126 @@ +import { ReactNode } from 'react'; + +import Platform from './modules/Platform'; + +type Primitives = { + Svg: null | ReactNode | string; + Circle: null | ReactNode | string; + ClipPath: null | ReactNode | string; + Defs: null | ReactNode | string; + Ellipse: null | ReactNode | string; + G: null | ReactNode | string; + Image: null | ReactNode | string; + Line: null | ReactNode | string; + LinearGradient: null | ReactNode | string; + Path: null | ReactNode | string; + Pattern: null | ReactNode | string; + Polygon: null | ReactNode | string; + Polyline: null | ReactNode | string; + RadialGradient: null | ReactNode | string; + Rect: null | ReactNode | string; + Stop: null | ReactNode | string; + Symbol: null | ReactNode | string; + Text: null | ReactNode | string; + TextPath: null | ReactNode | string; + TSpan: null | ReactNode | string; + Use: null | ReactNode | string; + Platform: { + OS: string; + Version: number; + } & { + select?: ((_: any) => void) | undefined; + inject?: ((_: { OS: string; Version: number }) => void) | undefined; + }; + inject: ( + api: { + [key: string]: any; + } & { + Platform: { + OS: string; + Version: number; + }; + }, + ) => void; +}; + +type SvgElement = + | 'Svg' + | 'Circle' + | 'Ellipse' + | 'G' + | 'LinearGradient' + | 'RadialGradient' + | 'Line' + | 'Path' + | 'Polygon' + | 'Polyline' + | 'Rect' + | 'Symbol' + | 'Text' + | 'Use' + | 'Defs' + | 'Stop'; + +const VxPrimitives: Primitives = { + /* Svg primitives: */ + Svg: null, + + Circle: null, + ClipPath: null, + Defs: null, + Ellipse: null, + G: null, + Image: null, + Line: null, + LinearGradient: null, + Path: null, + Pattern: null, + Polygon: null, + Polyline: null, + RadialGradient: null, + Rect: null, + Stop: null, + Symbol: null, + Text: null, + TextPath: null, + TSpan: null, + Use: null, + + // Touchable: null, + // View: null, + // Text: null, + // Dimensions: null, + // PixelRatio: require('./modules/PixelRatio'), + Platform, + inject: (api: { [key: string]: any } & { Platform: { OS: string; Version: number } }) => { + [ + 'Svg', + 'Circle', + 'Ellipse', + 'G', + 'LinearGradient', + 'RadialGradient', + 'Line', + 'Path', + 'Polygon', + 'Polyline', + 'Rect', + 'Symbol', + 'Text', + 'Use', + 'Defs', + 'Stop', + // @ts-ignore + ].forEach((k: SvgElement) => { + if (api[k]) { + VxPrimitives[k] = api[k]; + } + }); + if (api.Platform) { + // @ts-ignore + VxPrimitives['Platform'].inject(api.Platform); + } + }, +}; + +export default VxPrimitives; diff --git a/packages/vx-primitives/src/core.native.ts b/packages/vx-primitives/src/core.native.ts new file mode 100644 index 000000000..8f6265a81 --- /dev/null +++ b/packages/vx-primitives/src/core.native.ts @@ -0,0 +1,56 @@ +import { + Svg, + Circle, + ClipPath, + Defs, + Ellipse, + G, + Image, + Line, + LinearGradient, + Path, + Pattern, + Polygon, + Polyline, + RadialGradient, + Rect, + Stop, + Symbol, + Text, + TextPath, + TSpan, + Use, + // @ts-ignore +} from 'react-native-svg'; + +import VxPrimitives from './VxPrimitives'; + +VxPrimitives.inject({ + Svg, + Circle, + ClipPath, + Ellipse, + G, + Image, + LinearGradient, + RadialGradient, + Line, + Path, + Pattern, + Polygon, + Polyline, + Rect, + Symbol, + Text, + TextPath, + TSpan, + Use, + Defs, + Stop, + Platform: { + OS: 'native', + Version: 1, + }, +}); + +module.exports = VxPrimitives; \ No newline at end of file diff --git a/packages/vx-primitives/src/core.sketch.ts b/packages/vx-primitives/src/core.sketch.ts new file mode 100644 index 000000000..4db1a57c4 --- /dev/null +++ b/packages/vx-primitives/src/core.sketch.ts @@ -0,0 +1,57 @@ +// @ts-ignore +import { Svg } from 'react-sketchapp'; + +const { + Circle, + ClipPath, + Defs, + Ellipse, + G, + Image, + Line, + LinearGradient, + Path, + Pattern, + Polygon, + Polyline, + RadialGradient, + Rect, + Stop, + Symbol, + Text, + TextPath, + TSpan, + Use, +} = Svg; + +import VxPrimitives from './VxPrimitives'; + +VxPrimitives.inject({ + Svg, + Circle, + ClipPath, + Ellipse, + G, + Image, + LinearGradient, + RadialGradient, + Line, + Path, + Pattern, + Polygon, + Polyline, + Rect, + Symbol, + Text, + TextPath, + TSpan, + Use, + Defs, + Stop, + Platform: { + OS: 'sketch', + Version: 1, + }, +}); + +module.exports = VxPrimitives; diff --git a/packages/vx-primitives/src/core.ts b/packages/vx-primitives/src/core.ts new file mode 100644 index 000000000..e9b7cb114 --- /dev/null +++ b/packages/vx-primitives/src/core.ts @@ -0,0 +1,2 @@ +// Default to web implementation if there is no platform extension resolver +module.exports = require('./core.web'); diff --git a/packages/vx-primitives/src/core.web.ts b/packages/vx-primitives/src/core.web.ts new file mode 100644 index 000000000..127434551 --- /dev/null +++ b/packages/vx-primitives/src/core.web.ts @@ -0,0 +1,33 @@ +import 'react-dom'; + +import VxPrimitives from './VxPrimitives'; + +VxPrimitives.inject({ + Svg: 'svg', + Circle: 'circle', + ClipPath: 'clipPath', + Ellipse: 'ellipse', + G: 'g', + Image: 'image', + LinearGradient: 'linearGradient', + RadialGradient: 'radialGradient', + Line: 'line', + Path: 'path', + Pattern: 'pattern', + Polygon: 'polygon', + Polyline: 'polyline', + Rect: 'rect', + Symbol: 'symbol', + Text: 'text', + TextPath: 'textPath', + TSpan: 'tspan', + Use: 'use', + Defs: 'defs', + Stop: 'stop', + Platform: { + OS: 'web', + Version: 1, + }, +}); + +module.exports = VxPrimitives; diff --git a/packages/vx-primitives/src/index.ts b/packages/vx-primitives/src/index.ts new file mode 100644 index 000000000..ee11e5d15 --- /dev/null +++ b/packages/vx-primitives/src/index.ts @@ -0,0 +1,74 @@ +declare module '@vx/primitives' { + import { ReactNode, FunctionComponent } from 'react'; + import { + CommonPathProps, + ImageProps, + LineProps, + LinearGradientProps, + PathProps, + PatternProps, + EllipseProps, + DefinitionProps, + CircleProps, + SvgProps, + PolygonProps, + PolylineProps, + RadialGradientProps, + RectProps, + StopProps, + SymbolProps, + TextProps, + TextPathProps, + TSpanProps, + UseProps, + GProps, + // @ts-ignore + } from 'react-native-svg'; + + // type BaseSvgElement = FunctionComponent<{ className?: string | undefined, children?: ReactNode }> + // type BaseProps = { className?: string; ref?: React.Ref }; + type BaseProps = any; + + export const Defs: FunctionComponent; + export const Ellipse: FunctionComponent; + export const G: FunctionComponent; + export const Image: FunctionComponent; + export const Line: FunctionComponent; + export const LinearGradient: FunctionComponent; + export const Path: FunctionComponent; + export const Pattern: FunctionComponent; + export const Polygon: FunctionComponent; + export const Polyline: FunctionComponent; + export const RadialGradient: FunctionComponent; + export const Rect: FunctionComponent; + export const Stop: FunctionComponent; + export const Circle: FunctionComponent; + export const Symbol: FunctionComponent; + export const Text: FunctionComponent; + export const TextPath: FunctionComponent; + export const TSpan: FunctionComponent; + export const Use: FunctionComponent; + + export const Platform: { + OS: string; + Version: number; + } & { + select?: ((_: any) => void) | undefined; + inject?: ((_: { OS: string; Version: number }) => void) | undefined; + }; + + export const inject: ( + api: { + [key: string]: any; + } & { + Platform: { + OS: string; + Version: number; + }; + }, + ) => void; +} + +const _core = require('./core'); + +module.exports = _core; \ No newline at end of file diff --git a/packages/vx-primitives/src/modules/Platform.ts b/packages/vx-primitives/src/modules/Platform.ts new file mode 100644 index 000000000..5f490a57a --- /dev/null +++ b/packages/vx-primitives/src/modules/Platform.ts @@ -0,0 +1,25 @@ +const { hasOwnProperty } = Object.prototype; + +type PlatformType = { + OS: string; + Version: number; +}; + +const Platform: PlatformType & { select?: (_: any) => void; inject?: (_: PlatformType) => void } = { + OS: 'unknown', + Version: 0, + select: obj => { + if (hasOwnProperty.call(obj, Platform.OS)) { + return obj[Platform.OS]; + } + return obj.default; + }, + inject: platform => { + // Use bracket accessor notation as workaround for + // https://github.com/facebook/metro-bundler/issues/27 + Platform['OS'] = platform.OS; // eslint-disable-line dot-notation + Platform['Version'] = platform.Version; // eslint-disable-line dot-notation + }, +}; + +export default Platform; diff --git a/packages/vx-shape/package.json b/packages/vx-shape/package.json index eb9da64e7..35f97ecc6 100644 --- a/packages/vx-shape/package.json +++ b/packages/vx-shape/package.json @@ -29,6 +29,7 @@ "@vx/curve": "0.0.199", "@vx/group": "0.0.199", "@vx/scale": "0.0.199", + "@vx/primitives": "0.0.199", "classnames": "^2.2.5", "d3-path": "^1.0.5", "d3-shape": "^1.2.0", diff --git a/packages/vx-shape/src/shapes/Arc.tsx b/packages/vx-shape/src/shapes/Arc.tsx index b310b96af..d63de5406 100644 --- a/packages/vx-shape/src/shapes/Arc.tsx +++ b/packages/vx-shape/src/shapes/Arc.tsx @@ -1,6 +1,8 @@ import React from 'react'; import cx from 'classnames'; import { Arc as ArcType } from 'd3-shape'; +import { Platform, Path } from '@vx/primitives'; + import { $TSFIXME, AddSVGProps, ArcPathConfig } from '../types'; import { arc } from '../util/D3ShapeFactories'; @@ -44,6 +46,6 @@ export default function Arc({ if (!data) return null; return ( - + ); } diff --git a/packages/vx-shape/src/shapes/Area.tsx b/packages/vx-shape/src/shapes/Area.tsx index 4d98d9ff8..cb4221b18 100644 --- a/packages/vx-shape/src/shapes/Area.tsx +++ b/packages/vx-shape/src/shapes/Area.tsx @@ -1,5 +1,7 @@ import React from 'react'; import cx from 'classnames'; +import { Platform, Path } from '@vx/primitives'; + import { AddSVGProps, BaseAreaProps } from '../types'; import { area } from '../util/D3ShapeFactories'; @@ -24,6 +26,6 @@ export default function Area({ // eslint-disable-next-line react/jsx-no-useless-fragment if (children) return <>{children({ path })}; return ( - + ); } diff --git a/packages/vx-shape/src/shapes/AreaClosed.tsx b/packages/vx-shape/src/shapes/AreaClosed.tsx index c19343c12..7ac7693f9 100644 --- a/packages/vx-shape/src/shapes/AreaClosed.tsx +++ b/packages/vx-shape/src/shapes/AreaClosed.tsx @@ -1,5 +1,7 @@ import React from 'react'; import cx from 'classnames'; +import { Platform, Path } from '@vx/primitives'; + import { PositionScale, AddSVGProps, BaseAreaProps } from '../types'; import setNumOrAccessor from '../util/setNumberOrNumberAccessor'; import { area } from '../util/D3ShapeFactories'; @@ -39,9 +41,9 @@ export default function AreaClosed({ // eslint-disable-next-line react/jsx-no-useless-fragment if (children) return <>{children({ path })}; return ( - diff --git a/packages/vx-shape/src/shapes/AreaStack.tsx b/packages/vx-shape/src/shapes/AreaStack.tsx index 96f53333c..5bd097874 100644 --- a/packages/vx-shape/src/shapes/AreaStack.tsx +++ b/packages/vx-shape/src/shapes/AreaStack.tsx @@ -1,5 +1,7 @@ import React from 'react'; import cx from 'classnames'; +import { Platform, Path } from '@vx/primitives'; + import Stack, { StackProps } from './Stack'; import { AddSVGProps, StackKey } from '../types'; @@ -67,8 +69,8 @@ export default function AreaStack({ {children || (({ stacks, path }) => stacks.map((series, i) => ( - ) { - return ; + return ; } diff --git a/packages/vx-shape/src/shapes/BarGroup.tsx b/packages/vx-shape/src/shapes/BarGroup.tsx index c64a144f4..0aa229db8 100644 --- a/packages/vx-shape/src/shapes/BarGroup.tsx +++ b/packages/vx-shape/src/shapes/BarGroup.tsx @@ -2,6 +2,8 @@ import React from 'react'; import cx from 'classnames'; import { Group } from '@vx/group'; import { ScaleInput } from '@vx/scale'; +import { Platform } from '@vx/primitives'; + import Bar from './Bar'; import { PositionScale, @@ -117,7 +119,7 @@ export default function BarGroupComponent< if (children) return <>{children(barGroups)}; return ( - + {barGroups.map(barGroup => ( {barGroup.bars.map(bar => ( diff --git a/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx b/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx index 9d2b5486c..8a83905f9 100644 --- a/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx +++ b/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx @@ -2,6 +2,8 @@ import React from 'react'; import cx from 'classnames'; import { Group } from '@vx/group'; import { ScaleInput } from '@vx/scale'; +import { Platform } from '@vx/primitives'; + import Bar from './Bar'; import { PositionScale, @@ -82,7 +84,7 @@ export default function BarGroupHorizontalComponent< if (children) return <>{children(barGroups)}; return ( - + {barGroups.map(barGroup => ( {barGroup.bars.map(bar => ( diff --git a/packages/vx-shape/src/shapes/BarRounded.tsx b/packages/vx-shape/src/shapes/BarRounded.tsx index bb6a1f6c8..a1ebe4c8f 100644 --- a/packages/vx-shape/src/shapes/BarRounded.tsx +++ b/packages/vx-shape/src/shapes/BarRounded.tsx @@ -1,5 +1,7 @@ import React from 'react'; import cx from 'classnames'; +import { Platform, Path } from '@vx/primitives'; + import { AddSVGProps } from '../types'; export type BarRoundedProps = { @@ -78,6 +80,6 @@ z` .join(''); return ( - + ); } diff --git a/packages/vx-shape/src/shapes/BarStack.tsx b/packages/vx-shape/src/shapes/BarStack.tsx index 0e520b4c2..5a1f9902f 100644 --- a/packages/vx-shape/src/shapes/BarStack.tsx +++ b/packages/vx-shape/src/shapes/BarStack.tsx @@ -3,6 +3,8 @@ import cx from 'classnames'; import { stack as d3stack, SeriesPoint } from 'd3-shape'; import { Group } from '@vx/group'; import { ScaleInput } from '@vx/scale'; +import { Platform } from '@vx/primitives'; + import { PositionScale, AddSVGProps, @@ -95,7 +97,7 @@ export default function BarStackComponent< if (children) return <>{children(barStacks)}; return ( - + {barStacks.map(barStack => barStack.bars.map(bar => ( {children(barStacks)}; return ( - + {barStacks.map(barStack => barStack.bars.map(bar => ( ) { - return ; + return ; } diff --git a/packages/vx-shape/src/shapes/Line.tsx b/packages/vx-shape/src/shapes/Line.tsx index e736fc955..9c74eafd9 100644 --- a/packages/vx-shape/src/shapes/Line.tsx +++ b/packages/vx-shape/src/shapes/Line.tsx @@ -1,5 +1,7 @@ import React from 'react'; import cx from 'classnames'; +import { Platform, Line as SvgLine } from '@vx/primitives'; + import { AddSVGProps } from '../types'; interface Point { @@ -29,9 +31,9 @@ export default function Line({ ...restProps }: AddSVGProps) { return ( - ({ // eslint-disable-next-line react/jsx-no-useless-fragment if (children) return <>{children({ path })}; return ( - ({ // eslint-disable-next-line react/jsx-no-useless-fragment if (children) return <>{children({ path })}; return ( - ({ return ( {arcs.map((arc, i) => ( - - + + {centroid?.(path.centroid(arc), arc)} - + ))} ); diff --git a/packages/vx-shape/src/shapes/Polygon.tsx b/packages/vx-shape/src/shapes/Polygon.tsx index 2a596a2aa..53f3270a6 100644 --- a/packages/vx-shape/src/shapes/Polygon.tsx +++ b/packages/vx-shape/src/shapes/Polygon.tsx @@ -1,5 +1,7 @@ import React from 'react'; import cx from 'classnames'; +import { Platform, Polygon as SvgPolygon } from '@vx/primitives'; + import { degreesToRadians } from '../util/trigonometry'; import { AddSVGProps } from '../types'; @@ -78,9 +80,9 @@ export default function Polygon({ if (children) return <>{children({ points })}; return ( - diff --git a/packages/vx-shape/src/shapes/Stack.tsx b/packages/vx-shape/src/shapes/Stack.tsx index 38eebe4b2..2bd92edb3 100644 --- a/packages/vx-shape/src/shapes/Stack.tsx +++ b/packages/vx-shape/src/shapes/Stack.tsx @@ -2,6 +2,8 @@ import React from 'react'; import cx from 'classnames'; import { Group } from '@vx/group'; import { Area as AreaType, Stack as StackType, SeriesPoint, Series } from 'd3-shape'; +import { Platform, Path } from '@vx/primitives'; + import { $TSFIXME, AddSVGProps, @@ -72,8 +74,8 @@ export default function Stack({ return ( {stacks.map((series, i) => ( - ({ const pathGen = path || pathHorizontalCurve({ source, target, x, y, percent }); if (children) return <>{children({ path: pathGen })}; return ( - diff --git a/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx b/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx index bf23b6657..ee26d4a60 100644 --- a/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx +++ b/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx @@ -1,6 +1,8 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; +import { Platform, Path } from '@vx/primitives'; + import { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types'; import { getX, getY, getSource, getTarget } from '../../../util/accessors'; @@ -64,9 +66,9 @@ export default function LinkRadialCurve({ const pathGen = path || pathRadialCurve({ source, target, x, y, percent }); if (children) return <>{children({ path: pathGen })}; return ( - diff --git a/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx b/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx index 7f0a75074..8071d2843 100644 --- a/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx +++ b/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx @@ -1,6 +1,8 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; +import { Platform, Path } from '@vx/primitives'; + import { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types'; import { getX, getY, getSource, getTarget } from '../../../util/accessors'; @@ -54,9 +56,9 @@ export default function LinkVerticalCurve({ const pathGen = path || pathVerticalCurve({ source, target, x, y, percent }); if (children) return <>{children({ path: pathGen })}; return ( - diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx index 13d8738dd..b86ddc88e 100644 --- a/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx +++ b/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx @@ -1,6 +1,8 @@ import React from 'react'; import cx from 'classnames'; import { linkHorizontal } from 'd3-shape'; +import { Platform, Path } from '@vx/primitives'; + import { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types'; import { getY, getX, getSource, getTarget } from '../../../util/accessors'; @@ -38,9 +40,9 @@ export default function LinkHorizontalDiagonal({ const pathGen = path || pathHorizontalDiagonal({ source, target, x, y }); if (children) return <>{children({ path: pathGen })}; return ( - diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx index ea8a76f6f..b35f45d2b 100644 --- a/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx +++ b/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx @@ -1,6 +1,8 @@ import React from 'react'; import cx from 'classnames'; import { linkRadial } from 'd3-shape'; +import { Platform, Path } from '@vx/primitives'; + import { SharedLinkProps, RadialAccessorProps, AddSVGProps } from '../../../types'; import { getX, getY, getSource, getTarget } from '../../../util/accessors'; @@ -41,9 +43,9 @@ export default function LinkRadialDiagonal({ const pathGen = path || pathRadialDiagonal({ source, target, angle, radius }); if (children) return <>{children({ path: pathGen })}; return ( - diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx index 2d55f62f4..ae87a4a09 100644 --- a/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx +++ b/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx @@ -1,6 +1,8 @@ import React from 'react'; import cx from 'classnames'; import { linkVertical } from 'd3-shape'; +import { Platform, Path } from '@vx/primitives'; + import { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types'; import { getX, getY, getSource, getTarget } from '../../../util/accessors'; @@ -37,9 +39,9 @@ export default function LinkVerticalDiagonal({ const pathGen = path || pathVerticalDiagonal({ source, target, x, y }); if (children) return <>{children({ path: pathGen })}; return ( - diff --git a/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx b/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx index 0cac194f8..34786d86b 100644 --- a/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx +++ b/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx @@ -1,6 +1,8 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; +import { Platform, Path } from '@vx/primitives'; + import { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types'; import { getY, getX, getSource, getTarget } from '../../../util/accessors'; @@ -44,9 +46,9 @@ export default function LinkHorizontalLine({ const pathGen = path || pathHorizontalLine({ source, target, x, y }); if (children) return <>{children({ path: pathGen })}; return ( - diff --git a/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx b/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx index 9522ae7d1..4d8de417d 100644 --- a/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx +++ b/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx @@ -1,6 +1,8 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; +import { Platform, Path } from '@vx/primitives'; + import { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types'; import { getX, getY, getSource, getTarget } from '../../../util/accessors'; @@ -49,9 +51,9 @@ export default function LinkRadialLine({ const pathGen = path || pathRadialLine({ source, target, x, y }); if (children) return <>{children({ path: pathGen })}; return ( - diff --git a/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx b/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx index d37b78aa8..935c0763a 100644 --- a/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx +++ b/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx @@ -1,6 +1,8 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; +import { Platform, Path } from '@vx/primitives'; + import { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types'; import { getX, getY, getSource, getTarget } from '../../../util/accessors'; @@ -44,9 +46,9 @@ export default function LinkVerticalLine({ const pathGen = path || pathVerticalLine({ source, target, x, y }); if (children) return <>{children({ path: pathGen })}; return ( - diff --git a/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx b/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx index 9396563c5..e4c6654cd 100644 --- a/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx +++ b/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx @@ -1,6 +1,8 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; +import { Platform, Path } from '@vx/primitives'; + import { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types'; import { getX, getY, getSource, getTarget } from '../../../util/accessors'; @@ -51,9 +53,9 @@ export default function LinkHorizontalStep({ const pathGen = path || pathHorizontalStep({ source, target, x, y, percent }); if (children) return <>{children({ path: pathGen })}; return ( - diff --git a/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx b/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx index 417371e6f..522d11099 100644 --- a/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx +++ b/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx @@ -1,5 +1,7 @@ import React from 'react'; import cx from 'classnames'; +import { Platform, Path } from '@vx/primitives'; + import { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types'; import { getX, getY, getSource, getTarget } from '../../../util/accessors'; @@ -57,9 +59,9 @@ export default function LinkRadialStep({ const pathGen = path || pathRadialStep({ source, target, x, y }); if (children) return <>{children({ path: pathGen })}; return ( - diff --git a/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx b/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx index 60e7a1038..990a08071 100644 --- a/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx +++ b/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx @@ -1,6 +1,8 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; +import { Platform, Path } from '@vx/primitives'; + import { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types'; import { getX, getY, getSource, getTarget } from '../../../util/accessors'; @@ -51,9 +53,9 @@ export default function LinkVerticalStep({ const pathGen = path || pathVerticalStep({ source, target, x, y, percent }); if (children) return <>{children({ path: pathGen })}; return ( -