kedao
Version:
Rich Text Editor Based On Draft.js
78 lines (77 loc) • 4.45 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { classNameParser } from '../../utils/style';
import React, { useRef, useState, useEffect } from 'react';
import { toggleSelectionBackgroundColor, toggleSelectionColor } from '../../utils';
import ColorPicker from '../ColorPicker';
import styles from "./style.module.css";
import loadable from '@loadable/component';
import useLanguage from '../../hooks/use-language';
import { defaultColors, tablerIconProps } from '../../constants';
import TextColorIcon from 'tabler-icons-react/dist/icons/text-color';
const DropDown = loadable(() => __awaiter(void 0, void 0, void 0, function* () { return yield import('../DropDown'); }));
const cls = classNameParser(styles);
const TextColorPicker = ({ editorState, getContainerNode, enableBackgroundColor, onChange, disabled, onRequestFocus }) => {
const [colorType, setColorType] = useState('color');
const dropDownInstance = useRef(null);
const [captionStyle, setCaptionStyle] = useState({});
const [currentColor, setCurrentColor] = useState(null);
const switchColorType = ({ currentTarget }) => {
setColorType(currentTarget.dataset.type);
};
const toggleColor = (color, closePicker) => {
var _a;
if (color) {
if (colorType === 'color') {
onChange(toggleSelectionColor(editorState, color));
}
else {
onChange(toggleSelectionBackgroundColor(editorState, color));
}
}
if (closePicker) {
(_a = dropDownInstance.current) === null || _a === void 0 ? void 0 : _a.hide();
onRequestFocus();
}
return true;
};
useEffect(() => {
const selectionStyles = editorState
.getCurrentInlineStyle()
.toJS();
const newCaptionStyle = {};
let newCurrentColor = null;
selectionStyles.forEach(style => {
if (style.indexOf('COLOR-') === 0) {
newCaptionStyle.color = `#${style.split('-')[1]}`;
if (colorType === 'color') {
newCurrentColor = newCaptionStyle.color;
}
}
if (style.indexOf('BGCOLOR-') === 0) {
newCaptionStyle.backgroundColor = `#${style.split('-')[1]}`;
if (colorType === 'background-color') {
newCurrentColor = newCaptionStyle.backgroundColor;
}
}
});
setCaptionStyle(newCaptionStyle);
setCurrentColor(newCurrentColor);
}, [editorState]);
const caption = (React.createElement(TextColorIcon, Object.assign({}, tablerIconProps, { style: captionStyle })));
const language = useLanguage();
return (React.createElement(DropDown, { caption: caption, title: language.controls.color, showArrow: false, autoHide: true, getContainerNode: getContainerNode, ref: dropDownInstance, disabled: disabled, className: cls('text-color-dropdown') },
React.createElement("div", { className: cls('kedao-text-color-picker-wrap') },
React.createElement("div", { className: cls('kedao-color-switch-buttons'), style: enableBackgroundColor ? {} : { display: 'none' } },
React.createElement("button", { type: 'button', "data-type": 'color', className: cls(colorType === 'color' ? 'active' : ''), onClick: switchColorType }, language.controls.textColor),
React.createElement("button", { type: 'button', "data-type": 'background-color', className: cls(colorType === 'background-color' ? 'active' : ''), onClick: switchColorType }, language.controls.backgroundColor)),
React.createElement(ColorPicker, { color: currentColor, presetColors: defaultColors, onChange: toggleColor }))));
};
export default TextColorPicker;