@react-financial-charts/interactive/lib/InteractiveYCoordinate.js

Interactive features for react-financial-charts

import { format } from "d3-format";
import * as React from "react";
import { ChartContext, isDefined } from "@react-financial-charts/core";
import { HoverTextNearMouse } from "./components";
import { getValueFromOverride, isHoverForInteractiveType, saveNodeType, terminate } from "./utils";
import { EachInteractiveYCoordinate } from "./wrapper";
export class InteractiveYCoordinate extends React.Component {
    constructor(props) {
        super(props);
        this.handleDelete = (e, index, moreProps) => {
            const { onDelete, yCoordinateList } = this.props;
            if (onDelete !== undefined && index !== undefined) {
                onDelete(e, yCoordinateList[index], moreProps);
            }
        };
        this.handleDragComplete = (e, moreProps) => {
            const { override } = this.state;
            if (isDefined(override)) {
                const { yCoordinateList } = this.props;
                const newAlertList = yCoordinateList.map((each, idx) => {
                    const selected = idx === override.index;
                    return selected
                        ? Object.assign(Object.assign({}, each), { yValue: override.yValue, selected }) : Object.assign(Object.assign({}, each), { selected });
                });
                const draggedAlert = newAlertList[override.index];
                this.setState({
                    override: null,
                }, () => {
                    const { onDragComplete } = this.props;
                    if (onDragComplete !== undefined) {
                        onDragComplete(e, newAlertList, moreProps, draggedAlert);
                    }
                });
            }
        };
        this.handleDrag = (_, index, yValue) => {
            this.setState({
                override: {
                    index,
                    yValue,
                },
            });
        };
        this.terminate = terminate.bind(this);
        this.saveNodeType = saveNodeType.bind(this);
        this.getSelectionState = isHoverForInteractiveType("yCoordinateList").bind(this);
        this.state = {};
    }
    render() {
        const { yCoordinateList } = this.props;
        const { override } = this.state;
        return (React.createElement("g", null, yCoordinateList.map((each, idx) => {
            const props = each;
            return (React.createElement(EachInteractiveYCoordinate, Object.assign({ key: each.id, ref: this.saveNodeType(idx), index: idx }, props, { selected: each.selected, yValue: getValueFromOverride(override, idx, "yValue", each.yValue), onDelete: this.handleDelete, onDrag: this.handleDrag, onDragComplete: this.handleDragComplete, edgeInteractiveCursor: "react-financial-charts-move-cursor" })));
        })));
    }
}
InteractiveYCoordinate.defaultProps = {
    defaultPriceCoordinate: {
        bgFill: "#FFFFFF",
        bgOpacity: 1,
        stroke: "#6574CD",
        strokeOpacity: 1,
        strokeDasharray: "ShortDash2",
        strokeWidth: 1,
        textFill: "#6574CD",
        fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
        fontSize: 12,
        fontStyle: "normal",
        fontWeight: "normal",
        text: "Alert",
        textBox: {
            height: 24,
            left: 20,
            padding: { left: 10, right: 5 },
            closeIcon: {
                padding: { left: 5, right: 8 },
                width: 8,
            },
        },
        edge: {
            stroke: "#6574CD",
            strokeOpacity: 1,
            strokeWidth: 1,
            fill: "#FFFFFF",
            fillOpacity: 1,
            orient: "right",
            at: "right",
            arrowWidth: 10,
            dx: 0,
            rectWidth: 50,
            rectHeight: 20,
            displayFormat: format(".2f"),
        },
    },
    hoverText: Object.assign(Object.assign({}, HoverTextNearMouse.defaultProps), { enable: true, bgHeight: 18, bgWidth: 175, text: "Click and drag the edge circles" }),
    yCoordinateList: [],
};
InteractiveYCoordinate.contextType = ChartContext;
//# sourceMappingURL=InteractiveYCoordinate.js.map