@kedao/editor/lib/components/business/TextColor/index.js

Rich Text Editor Based On Draft.js

import React from 'react';
import { ContentUtils } from '@kedao/utils';
import DropDown from '../../common/DropDown';
import BuiltinColorPicker from '../../common/ColorPicker';
import './style.scss';
class TextColor extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            colorType: 'color'
        };
        this.dropDownInstance = React.createRef();
        this.switchColorType = ({ currentTarget }) => {
            this.setState({
                colorType: currentTarget.dataset.type
            });
        };
        this.toggleColor = (color, closePicker) => {
            var _a;
            if (color) {
                let newColor = color;
                const hookReturns = this.props.hooks(`toggle-text-${this.state.colorType}`, newColor)(newColor);
                if (hookReturns === false) {
                    return false;
                }
                if (typeof hookReturns === 'string') {
                    newColor = hookReturns;
                }
                if (this.state.colorType === 'color') {
                    this.props.editor.setValue(ContentUtils.toggleSelectionColor(this.props.editorState, newColor));
                }
                else {
                    this.props.editor.setValue(ContentUtils.toggleSelectionBackgroundColor(this.props.editorState, newColor));
                }
            }
            if (closePicker) {
                (_a = this.dropDownInstance.current) === null || _a === void 0 ? void 0 : _a.hide();
                this.props.editor.requestFocus();
            }
            return true;
        };
    }
    render() {
        const captionStyle = {};
        let currentColor = null;
        const { colorType } = this.state;
        const selectionStyles = this.props.editorState
            .getCurrentInlineStyle()
            .toJS();
        selectionStyles.forEach((style) => {
            if (style.indexOf('COLOR-') === 0) {
                captionStyle.color = `#${style.split('-')[1]}`;
                if (colorType === 'color') {
                    currentColor = captionStyle.color;
                }
            }
            if (style.indexOf('BGCOLOR-') === 0) {
                captionStyle.backgroundColor = `#${style.split('-')[1]}`;
                if (colorType === 'background-color') {
                    currentColor = captionStyle.backgroundColor;
                }
            }
        });
        const caption = (React.createElement("i", { style: captionStyle, className: "bfi-text-color" },
            React.createElement("span", { className: "path1" }),
            React.createElement("span", { className: "path2" })));
        const ColorPicker = this.props.colorPicker || BuiltinColorPicker;
        return (React.createElement(DropDown, { caption: caption, title: this.props.language.controls.color, showArrow: false, autoHide: this.props.autoHide, theme: this.props.theme, getContainerNode: this.props.getContainerNode, ref: this.dropDownInstance, className: "control-item dropdown text-color-dropdown" },
            React.createElement("div", { className: "bf-text-color-picker-wrap" },
                React.createElement("div", { className: "bf-color-switch-buttons", style: this.props.enableBackgroundColor ? {} : { display: 'none' } },
                    React.createElement("button", { type: "button", "data-type": "color", className: colorType === 'color' ? 'active' : '', onClick: this.switchColorType }, this.props.language.controls.textColor),
                    React.createElement("button", { type: "button", "data-type": "background-color", className: colorType === 'background-color' ? 'active' : '', onClick: this.switchColorType }, this.props.language.controls.backgroundColor)),
                React.createElement(ColorPicker, { width: 200, color: currentColor, disableAlpha: true, presetColors: this.props.colors, onChange: this.toggleColor }))));
    }
}
export default TextColor;
//# sourceMappingURL=index.js.map