@kedao/editor/lib/components/common/DropDown/index.js

Rich Text Editor Based On Draft.js

import React from 'react';
import mergeClassNames from 'merge-class-names';
import ResponsiveHelper from '../../../helpers/responsive';
import './style.scss';
class DropDown extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            active: false,
            offset: 0
        };
        this.responsiveResolveId = React.createRef();
        this.dropDownHandlerElement = React.createRef();
        this.dropDownContentElement = React.createRef();
        this.fixDropDownPosition = () => {
            var _a, _b;
            const viewRect = this.props.getContainerNode().getBoundingClientRect();
            const handlerRect = (_a = this.dropDownHandlerElement.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
            const contentRect = (_b = this.dropDownContentElement.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
            let offset = 0;
            let right = handlerRect.right - handlerRect.width / 2 + contentRect.width / 2;
            let left = handlerRect.left + handlerRect.width / 2 - contentRect.width / 2;
            right = viewRect.right - right;
            left -= viewRect.left;
            if (right < 10) {
                offset = right - 10;
            }
            else if (left < 10) {
                offset = left * -1 + 10;
            }
            if (offset !== this.state.offset) {
                this.setState({ offset });
            }
        };
        this.registerClickEvent = (event) => {
            var _a, _b;
            const { autoHide } = this.props;
            const { active } = this.state;
            if (((_a = this.dropDownContentElement.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) ||
                ((_b = this.dropDownHandlerElement.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))) {
                return false;
            }
            if (autoHide && active) {
                this.hide();
            }
            return true;
        };
        this.toggle = () => {
            this.setState((prevState) => ({
                active: !prevState.active
            }));
        };
        this.show = () => {
            this.setState({ active: true });
        };
        this.hide = () => {
            this.setState({ active: false });
        };
    }
    componentDidMount() {
        if (document) {
            document.body.addEventListener('click', this.registerClickEvent);
            this.responsiveResolveId = ResponsiveHelper.resolve(this.fixDropDownPosition);
        }
    }
    // eslint-disable-next-line camelcase
    UNSAFE_componentWillReceiveProps(next) {
        if (!this.props.disabled && next.disabled) {
            this.hide();
        }
    }
    componentDidUpdate(prevState) {
        if (!prevState.active && this.state.active) {
            this.fixDropDownPosition();
        }
    }
    componentWillUnmount() {
        if (document) {
            document.body.removeEventListener('click', this.registerClickEvent);
            ResponsiveHelper.unresolve(this.responsiveResolveId);
        }
    }
    render() {
        const { active, offset } = this.state;
        const { caption, htmlCaption, title, disabled, showArrow, arrowActive, className, children } = this.props;
        return (React.createElement("div", { className: mergeClassNames('bf-dropdown', !disabled && active && 'active', disabled && 'disabled', className) },
            htmlCaption
                ? (React.createElement("button", { type: "button", className: "dropdown-handler", "data-title": title, "aria-label": "Button", onClick: this.toggle, dangerouslySetInnerHTML: htmlCaption ? { __html: htmlCaption } : null, ref: this.dropDownHandlerElement }))
                : (React.createElement("button", { type: "button", className: "dropdown-handler", "data-title": title, onClick: this.toggle, ref: this.dropDownHandlerElement },
                    React.createElement("span", null, caption),
                    showArrow !== false ? React.createElement("i", { className: "bfi-drop-down" }) : null)),
            React.createElement("div", { className: "dropdown-content", style: { marginLeft: offset }, ref: this.dropDownContentElement },
                React.createElement("i", { style: { marginLeft: offset * -1 }, className: mergeClassNames('dropdown-arrow', arrowActive && 'active') }),
                React.createElement("div", { className: "dropdown-content-inner" }, children))));
    }
}
export default DropDown;
//# sourceMappingURL=index.js.map