feat: Migrated to new React context API

markmcdowell · Jul 12, 2022 · bec345b · bec345b
1 parent ac17021
commit bec345b
Show file tree

Hide file tree

Showing 17 changed files with 368 additions and 436 deletions.
diff --git a/packages/annotations/src/Label.tsx b/packages/annotations/src/Label.tsx
@@ -1,6 +1,5 @@
-import { GenericComponent, functor } from "@react-financial-charts/core";
+import { GenericComponent, functor, ChartCanvasContext } from "@react-financial-charts/core";
 import { ScaleContinuousNumeric } from "d3-scale";
-import * as PropTypes from "prop-types";
 import * as React from "react";
 
 export interface LabelProps {
@@ -33,12 +32,7 @@ export class Label extends React.Component<LabelProps> {
         selectCanvas: (canvases: any) => canvases.bg,
     };
 
-    public static contextTypes = {
-        canvasOriginX: PropTypes.number,
-        canvasOriginY: PropTypes.number,
-        margin: PropTypes.object.isRequired,
-        ratio: PropTypes.number.isRequired,
-    };
+    public static contextType = ChartCanvasContext;
 
     public render() {
         const { selectCanvas } = this.props;

diff --git a/packages/axes/src/XAxis.tsx b/packages/axes/src/XAxis.tsx
@@ -1,5 +1,4 @@
-import { strokeDashTypes } from "@react-financial-charts/core";
-import * as PropTypes from "prop-types";
+import { ChartContext, strokeDashTypes } from "@react-financial-charts/core";
 import * as React from "react";
 import { Axis } from "./Axis";
 
@@ -67,10 +66,7 @@ export class XAxis<T extends number | Date> extends React.Component<XAxisProps<T
         zoomCursorClassName: "react-financial-charts-ew-resize-cursor",
     };
 
-    public static contextTypes = {
-        chartConfig: PropTypes.object.isRequired,
-        xAxisZoom: PropTypes.func.isRequired,
-    };
+    public static contextType = ChartContext;
 
     public render() {
         const {

diff --git a/packages/axes/src/YAxis.tsx b/packages/axes/src/YAxis.tsx
@@ -1,5 +1,4 @@
-import { strokeDashTypes } from "@react-financial-charts/core";
-import * as PropTypes from "prop-types";
+import { ChartContext, strokeDashTypes } from "@react-financial-charts/core";
 import * as React from "react";
 import { Axis } from "./Axis";
 
@@ -67,11 +66,7 @@ export class YAxis extends React.Component<YAxisProps> {
         zoomCursorClassName: "react-financial-charts-ns-resize-cursor",
     };
 
-    public static contextTypes = {
-        yAxisZoom: PropTypes.func.isRequired,
-        chartId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-        chartConfig: PropTypes.object.isRequired,
-    };
+    public static contextType = ChartContext;
 
     public render() {
         const {

diff --git a/packages/coordinates/src/CrossHairCursor.tsx b/packages/coordinates/src/CrossHairCursor.tsx
@@ -1,10 +1,10 @@
-import * as PropTypes from "prop-types";
 import * as React from "react";
 import {
     getStrokeDasharrayCanvas,
     strokeDashTypes,
     GenericComponent,
     getMouseCanvas,
+    ChartCanvasContext,
 } from "@react-financial-charts/core";
 
 const defaultCustomX = (props: CrossHairCursorProps, moreProps: any) => {
@@ -31,10 +31,7 @@ export class CrossHairCursor extends React.Component<CrossHairCursorProps> {
         strokeWidth: 1,
     };
 
-    public static contextTypes = {
-        margin: PropTypes.object.isRequired,
-        ratio: PropTypes.number.isRequired,
-    };
+    public static contextType = ChartCanvasContext;
 
     public render() {
         return (

diff --git a/packages/coordinates/src/Cursor.tsx b/packages/coordinates/src/Cursor.tsx
@@ -1,12 +1,12 @@
 import {
+    ChartCanvasContext,
     first,
-    getStrokeDasharrayCanvas,
     GenericComponent,
     getMouseCanvas,
+    getStrokeDasharrayCanvas,
     last,
     strokeDashTypes,
 } from "@react-financial-charts/core";
-import * as PropTypes from "prop-types";
 import * as React from "react";
 
 export interface CursorProps {
@@ -39,10 +39,7 @@ export class Cursor extends React.Component<CursorProps> {
         xCursorShapeStrokeStyle: "rgba(0, 0, 0, 0.5)",
     };
 
-    public static contextTypes = {
-        margin: PropTypes.object.isRequired,
-        ratio: PropTypes.number.isRequired,
-    };
+    public static contextType = ChartCanvasContext;
 
     public render() {
         return (

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -48,7 +48,7 @@
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "react": "^16.0.0 || ^17.0.0",
-    "react-dom": "^16.0.0 || ^17.0.0"
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
   }
 }
diff --git a/packages/core/src/Chart.tsx b/packages/core/src/Chart.tsx
@@ -1,7 +1,17 @@
-import { scaleLinear, ScaleContinuousNumeric } from "d3-scale";
-import * as PropTypes from "prop-types";
+import { ScaleContinuousNumeric, scaleLinear } from "d3-scale";
 import * as React from "react";
-import { PureComponent } from "./utils";
+import { ChartCanvasContext, chartCanvasContextDefaultValue, ChartCanvasContextType } from "./ChartCanvas";
+import { ChartConfig } from "./utils/ChartDataUtil";
+
+export type ChartContextType = Omit<ChartCanvasContextType<number | Date>, "chartConfig"> & {
+    chartConfig: ChartConfig;
+};
+export const ChartContext = React.createContext<ChartContextType>({
+    ...chartCanvasContextDefaultValue,
+    // @ts-ignore
+    chartConfig: {},
+    chartId: 0,
+});
 
 export interface ChartProps {
     readonly flipYScale?: boolean;
@@ -24,91 +34,89 @@ export interface ChartProps {
     readonly yScale?: ScaleContinuousNumeric<number, number>;
 }
 
-export class Chart extends PureComponent<ChartProps> {
-    public static defaultProps = {
-        flipYScale: false,
-        id: 0,
-        origin: [0, 0],
-        padding: 0,
-        yPan: true,
-        yPanEnabled: false,
-        yScale: scaleLinear(),
-    };
-
-    public static contextTypes = {
-        chartConfig: PropTypes.array,
-        subscribe: PropTypes.func.isRequired,
-        unsubscribe: PropTypes.func.isRequired,
-    };
+export const Chart = React.memo((props: React.PropsWithChildren<ChartProps>) => {
+    const {
+        // flipYScale = false,
+        id = 0,
+        // origin = [0, 0],
+        // padding = 0,
+        // yPan = true,
+        // yPanEnabled = false,
+        // yScale = scaleLinear(),
+        onContextMenu,
+        onDoubleClick,
+    } = props;
+
+    const chartCanvasContextValue = React.useContext(ChartCanvasContext);
+    const { subscribe, unsubscribe, chartConfig } = chartCanvasContextValue;
+
+    const listener = React.useCallback(
+        (type: string, moreProps: any, _: any, e: React.MouseEvent) => {
+            switch (type) {
+                case "contextmenu": {
+                    if (onContextMenu === undefined) {
+                        return;
+                    }
+
+                    const { currentCharts } = moreProps;
+                    if (currentCharts.indexOf(id) > -1) {
+                        onContextMenu(e, moreProps);
+                    }
+
+                    break;
+                }
+                case "dblclick": {
+                    if (onDoubleClick === undefined) {
+                        return;
+                    }
 
-    public static childContextTypes = {
-        chartConfig: PropTypes.object.isRequired,
-        chartId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    };
+                    const { currentCharts } = moreProps;
+                    if (currentCharts.indexOf(id) > -1) {
+                        onDoubleClick(e, moreProps);
+                    }
 
-    public componentDidMount() {
-        const { id } = this.props;
-        const { subscribe } = this.context;
+                    break;
+                }
+            }
+        },
+        [onContextMenu, onDoubleClick, id],
+    );
 
+    React.useEffect(() => {
         subscribe(`chart_${id}`, {
-            listener: this.listener,
+            listener,
         });
-    }
-
-    public componentWillUnmount() {
-        const { id } = this.props;
-        const { unsubscribe } = this.context;
-
-        unsubscribe(`chart_${id}`);
-    }
-
-    public getChildContext() {
-        const { id: chartId } = this.props;
-
-        const chartConfig = this.context.chartConfig.find(({ id }: any) => id === chartId);
+        return () => unsubscribe(`chart_${id}`);
+    }, [subscribe, unsubscribe, id, listener]);
 
+    const config = chartConfig.find(({ id }) => id === props.id)!;
+    const contextValue = React.useMemo(() => {
         return {
-            chartId,
-            chartConfig,
+            ...chartCanvasContextValue,
+            chartId: id,
+            chartConfig: config,
         };
-    }
-
-    public render() {
-        const { origin } = this.context.chartConfig.find(({ id }: any) => id === this.props.id);
-
-        const [x, y] = origin;
-
-        return <g transform={`translate(${x}, ${y})`}>{this.props.children}</g>;
-    }
-
-    private readonly listener = (type: string, moreProps: any, _: any, e: React.MouseEvent) => {
-        const { id, onContextMenu, onDoubleClick } = this.props;
-
-        switch (type) {
-            case "contextmenu": {
-                if (onContextMenu === undefined) {
-                    return;
-                }
-
-                const { currentCharts } = moreProps;
-                if (currentCharts.indexOf(id) > -1) {
-                    onContextMenu(e, moreProps);
-                }
-
-                break;
-            }
-            case "dblclick": {
-                if (onDoubleClick === undefined) {
-                    return;
-                }
-
-                const { currentCharts } = moreProps;
-                if (currentCharts.indexOf(id) > -1) {
-                    onDoubleClick(e, moreProps);
-                }
-
-                break;
-            }
-        }
-    };
-}
+    }, [id, config, chartCanvasContextValue]);
+
+    const {
+        origin: [x, y],
+    } = config;
+
+    return (
+        <ChartContext.Provider value={contextValue}>
+            <g transform={`translate(${x}, ${y})`}>{props.children}</g>
+        </ChartContext.Provider>
+    );
+});
+
+export const ChartDefaultConfig = {
+    flipYScale: false,
+    id: 0,
+    origin: [0, 0],
+    padding: 0,
+    yPan: true,
+    yPanEnabled: false,
+    yScale: scaleLinear(),
+};
+
+Chart.displayName = "Chart";