Skip to content

Commit

Permalink
Migrate victory-zoom-container to TypeScript (#2730)
Browse files Browse the repository at this point in the history
KenanYusuf authored Jan 23, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 2f9e081 commit 1856276
Showing 6 changed files with 51 additions and 101 deletions.
5 changes: 5 additions & 0 deletions .changeset/silver-weeks-attend.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"victory-zoom-container": patch
---

Migrate victory-zoom-container to TypeScript
57 changes: 0 additions & 57 deletions packages/victory-zoom-container/src/index.d.ts

This file was deleted.

5 changes: 0 additions & 5 deletions packages/victory-zoom-container/src/index.js

This file was deleted.

2 changes: 2 additions & 0 deletions packages/victory-zoom-container/src/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from "./victory-zoom-container";
export * from "./zoom-helpers";
Original file line number Diff line number Diff line change
@@ -1,39 +1,43 @@
import PropTypes from "prop-types";
import React from "react";
import { defaults, isFunction } from "lodash";
import ZoomHelpers from "./zoom-helpers";
import { ZoomHelpers } from "./zoom-helpers";
import {
VictoryContainer,
VictoryClipContainer,
Data,
PropTypes as CustomPropTypes,
VictoryContainerProps,
DomainTuple,
} from "victory-core";

const DEFAULT_DOWNSAMPLE = 150;

export const zoomContainerMixin = (base) =>
class VictoryZoomContainer extends base {
export type ZoomDimensionType = "x" | "y";

export interface VictoryZoomContainerProps extends VictoryContainerProps {
allowPan?: boolean;
allowZoom?: boolean;
clipContainerComponent?: React.ReactElement;
disable?: boolean;
downsample?: number | boolean;
minimumZoom?: { x?: number; y?: number };
onZoomDomainChange?: (
domain: { x: DomainTuple; y: DomainTuple },
props: VictoryZoomContainerProps,
) => void;
zoomDimension?: ZoomDimensionType;
zoomDomain?: { x?: DomainTuple; y?: DomainTuple };
}

type ComponentClass<TProps> = { new (props: TProps): React.Component<TProps> };

export function zoomContainerMixin<
TBase extends ComponentClass<TProps>,
TProps extends VictoryZoomContainerProps,
>(Base: TBase) {
// @ts-expect-error "TS2545: A mixin class must have a constructor with a single rest parameter of type 'any[]'."
return class VictoryZoomContainer extends Base {
static displayName = "VictoryZoomContainer";

static propTypes = {
...VictoryContainer.propTypes,
allowPan: PropTypes.bool,
allowZoom: PropTypes.bool,
clipContainerComponent: PropTypes.element.isRequired,
disable: PropTypes.bool,
downsample: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
minimumZoom: PropTypes.shape({
x: PropTypes.number,
y: PropTypes.number,
}),
onZoomDomainChange: PropTypes.func,
zoomDimension: PropTypes.oneOf(["x", "y"]),
zoomDomain: PropTypes.shape({
x: CustomPropTypes.domain,
y: CustomPropTypes.domain,
}),
};

static defaultProps = {
...VictoryContainer.defaultProps,
clipContainerComponent: <VictoryClipContainer />,
@@ -42,7 +46,7 @@ export const zoomContainerMixin = (base) =>
zoomActive: false,
};

static defaultEvents = (props) => {
static defaultEvents = (props: TProps) => {
return [
{
target: "parent",
@@ -100,7 +104,7 @@ export const zoomContainerMixin = (base) =>
];
};

clipDataComponents(children, props) {
clipDataComponents(children: React.ReactElement[], props) {
const { scale, clipContainerComponent, polar, origin, horizontal } =
props;
const rangeX = horizontal ? scale.y.range() : scale.x.range();
@@ -122,7 +126,9 @@ export const zoomContainerMixin = (base) =>
if (!Data.isDataComponent(child)) {
return child;
}
return React.cloneElement(child, { groupComponent });
return React.cloneElement(child as React.ReactElement, {
groupComponent,
});
});
}

@@ -179,10 +185,12 @@ export const zoomContainerMixin = (base) =>
}

modifyChildren(props) {
const childComponents = React.Children.toArray(props.children);
// eslint-disable-next-line max-statements
const childComponents = React.Children.toArray(
props.children,
) as React.ReactElement[];

return childComponents.map((child) => {
const role = child.type && child.type.role;
const role = child.type && (child.type as any).role;
const isDataComponent = Data.isDataComponent(child);
const { currentDomain, zoomActive, allowZoom } = props;
const originalDomain = defaults({}, props.originalDomain, props.domain);
@@ -227,13 +235,12 @@ export const zoomContainerMixin = (base) =>
}

// Overrides method in VictoryContainer
getChildren(props) {
getChildren(props: TProps) {
const children = this.modifyChildren(props);
return this.clipDataComponents(children, props);
}
};
}

export default zoomContainerMixin(VictoryContainer);
// @ts-expect-error IMPORTANT: when converting this file to TypeScript, you must export the type as well:
// export const VictoryZoomContainer = zoomContainerMixin(VictoryContainer);
// export type VictoryZoomContainer = typeof VictoryZoomContainer;
export const VictoryZoomContainer = zoomContainerMixin(VictoryContainer);
export type VictoryZoomContainer = typeof VictoryZoomContainer;
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@ import { Children } from "react";
import { Selection, Collection, Wrapper } from "victory-core";
import { throttle, isFunction, defaults, delay } from "lodash";

const RawZoomHelpers = {
export const RawZoomHelpers = {
checkDomainEquality(a, b) {
const checkDimension = (dim) => {
const val1 = a && a[dim];
@@ -361,9 +361,7 @@ const RawZoomHelpers = {
},
};

export { RawZoomHelpers }; // allow victory-native to extend these helpers

export default {
export const ZoomHelpers = {
checkDomainEquality: RawZoomHelpers.checkDomainEquality.bind(RawZoomHelpers),
onMouseDown: RawZoomHelpers.onMouseDown.bind(RawZoomHelpers),
onMouseUp: RawZoomHelpers.onMouseUp.bind(RawZoomHelpers),

1 comment on commit 1856276

@vercel
Copy link

@vercel vercel bot commented on 1856276 Jan 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.