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

Interactive features for react-financial-charts

import * as React from "react";
import { ChartContext, GenericChartComponent, getMouseCanvas, isDefined, noop } from "@react-financial-charts/core";
import { HoverTextNearMouse } from "./components";
import { getValueFromOverride, isHoverForInteractiveType, saveNodeType, terminate } from "./utils";
import { EachText } from "./wrapper";
export class InteractiveText extends React.Component {
    constructor(props) {
        super(props);
        this.handleDraw = (e, moreProps) => {
            const { enabled } = this.props;
            if (enabled) {
                const { mouseXY: [, mouseY], chartConfig: { yScale }, xAccessor, currentItem, } = moreProps;
                const { defaultText, onChoosePosition } = this.props;
                if (onChoosePosition !== undefined) {
                    const xyValue = [xAccessor(currentItem), yScale.invert(mouseY)];
                    const newText = Object.assign(Object.assign({}, defaultText), { position: xyValue });
                    onChoosePosition(e, newText, moreProps);
                }
            }
        };
        this.handleDragComplete = (e, moreProps) => {
            const { override } = this.state;
            if (isDefined(override)) {
                const { textList } = this.props;
                const newTextList = textList.map((each, idx) => {
                    const selected = idx === override.index;
                    return selected
                        ? Object.assign(Object.assign({}, each), { position: override.position, selected }) : Object.assign(Object.assign({}, each), { selected });
                });
                this.setState({
                    override: null,
                }, () => {
                    const { onDragComplete } = this.props;
                    if (onDragComplete !== undefined) {
                        onDragComplete(e, newTextList, moreProps);
                    }
                });
            }
        };
        this.handleDrag = (_, index, position) => {
            this.setState({
                override: {
                    index,
                    position,
                },
            });
        };
        this.terminate = terminate.bind(this);
        this.saveNodeType = saveNodeType.bind(this);
        this.getSelectionState = isHoverForInteractiveType("textList").bind(this);
        this.state = {};
    }
    render() {
        const { textList, defaultText, hoverText } = this.props;
        const { override } = this.state;
        return (React.createElement("g", null,
            textList.map((each, idx) => {
                const defaultHoverText = InteractiveText.defaultProps.hoverText;
                const props = Object.assign(Object.assign(Object.assign({}, defaultText), each), { hoverText: Object.assign(Object.assign(Object.assign({}, defaultHoverText), hoverText), (each.hoverText || {})) });
                return (React.createElement(EachText, Object.assign({ key: idx, ref: this.saveNodeType(idx), index: idx }, props, { selected: each.selected, position: getValueFromOverride(override, idx, "position", each.position), onDrag: this.handleDrag, onDragComplete: this.handleDragComplete, edgeInteractiveCursor: "react-financial-charts-move-cursor" })));
            }),
            React.createElement(GenericChartComponent, { onClick: this.handleDraw, canvasToDraw: getMouseCanvas, drawOn: ["mousemove", "pan"] }),
            ";"));
    }
}
InteractiveText.defaultProps = {
    onSelect: noop,
    defaultText: {
        bgFill: "#D3D3D3",
        bgOpacity: 1,
        bgStrokeWidth: 1,
        textFill: "#F10040",
        fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
        fontSize: 12,
        fontStyle: "normal",
        fontWeight: "normal",
        text: "Lorem ipsum...",
    },
    hoverText: Object.assign(Object.assign({}, HoverTextNearMouse.defaultProps), { enable: true, bgHeight: "auto", bgWidth: "auto", text: "Click to select object", selectedText: "" }),
    textList: [],
};
InteractiveText.contextType = ChartContext;
//# sourceMappingURL=InteractiveText.js.map