@react-financial-charts/interactive/lib/wrapper/EachInteractiveYCoordinate.js

Interactive features for react-financial-charts

import * as React from "react";
import { isHover, saveNodeType } from "../utils";
import { ClickableShape, InteractiveYCoordinate } from "../components";
export class EachInteractiveYCoordinate extends React.Component {
    constructor(props) {
        super(props);
        this.handleCloseIconHover = (_, moreProps) => {
            if (this.state.closeIconHover !== moreProps.hovering) {
                this.setState({
                    closeIconHover: moreProps.hovering,
                });
            }
        };
        this.handleHover = (e, moreProps) => {
            if (this.state.hover !== moreProps.hovering) {
                this.setState({
                    hover: moreProps.hovering,
                    closeIconHover: moreProps.hovering ? this.state.closeIconHover : false,
                });
            }
        };
        this.handleDelete = (e, moreProps) => {
            const { index, onDelete } = this.props;
            if (onDelete !== undefined) {
                onDelete(e, index, moreProps);
            }
        };
        this.handleDrag = (e, moreProps) => {
            const { index, onDrag } = this.props;
            if (onDrag === undefined) {
                return;
            }
            const { mouseXY: [, mouseY], chartConfig: { yScale }, } = moreProps;
            const { dy } = this.dragStartPosition;
            const newYValue = yScale.invert(mouseY - dy);
            onDrag(e, index, newYValue);
        };
        this.handleDragStart = (_, moreProps) => {
            const { yValue } = this.props;
            const { mouseXY } = moreProps;
            const { chartConfig: { yScale }, } = moreProps;
            const [, mouseY] = mouseXY;
            const dy = mouseY - yScale(yValue);
            this.dragStartPosition = {
                yValue,
                dy,
            };
        };
        this.isHover = isHover.bind(this);
        this.saveNodeType = saveNodeType.bind(this);
        this.state = {
            hover: false,
            closeIconHover: false,
        };
    }
    render() {
        const { yValue, bgFill, textFill, fontFamily, fontSize, fontWeight, fontStyle, text, selected, onDragComplete, stroke, strokeDasharray, strokeWidth, edge, textBox, draggable, } = this.props;
        const { hover, closeIconHover } = this.state;
        const hoverHandler = {
            onHover: this.handleHover,
            onUnHover: this.handleHover,
        };
        const dragProps = draggable
            ? {
                onDragStart: this.handleDragStart,
                onDrag: this.handleDrag,
                onDragComplete,
            }
            : {};
        return (React.createElement("g", null,
            React.createElement(InteractiveYCoordinate, Object.assign({ ref: this.saveNodeType("priceCoordinate"), selected: selected && !closeIconHover, hovering: hover || closeIconHover, interactiveCursorClass: "react-financial-charts-move-cursor" }, hoverHandler, dragProps, { yValue: yValue, bgFillStyle: bgFill, textFill: textFill, fontFamily: fontFamily, fontStyle: fontStyle, fontWeight: fontWeight, fontSize: fontSize, strokeStyle: stroke, strokeDasharray: strokeDasharray, strokeWidth: strokeWidth, text: text, textBox: textBox, edge: edge })),
            React.createElement(ClickableShape, { show: true, hovering: closeIconHover, text: text, yValue: yValue, fontFamily: fontFamily, fontStyle: fontStyle, fontWeight: fontWeight, fontSize: fontSize, textBox: textBox, strokeStyle: stroke, onHover: this.handleCloseIconHover, onUnHover: this.handleCloseIconHover, onClick: this.handleDelete })));
    }
}
EachInteractiveYCoordinate.defaultProps = {
    strokeWidth: 1,
    selected: false,
    draggable: false,
};
//# sourceMappingURL=EachInteractiveYCoordinate.js.map