kedao/lib/components/FontFamily/index.js

Rich Text Editor Based On Draft.js

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 from 'react';
import { toggleSelectionFontFamily, selectionHasInlineStyle } from '../../utils';
import Menu from '../Menu';
import MenuItem from '../MenuItem';
import styles from "./style.module.css";
import { defaultFontFamilies } from '../../constants';
import loadable from '@loadable/component';
import useLanguage from '../../hooks/use-language';
const DropDown = loadable(() => __awaiter(void 0, void 0, void 0, function* () { return yield import('../DropDown'); }));
const cls = classNameParser(styles);
const FontFamilyPicker = ({ fontFamilies = defaultFontFamilies, editorState, defaultCaption, getContainerNode, onChange, onRequestFocus }) => {
    let caption = null;
    let currentIndex = null;
    let dropDownInstance = null;
    const language = useLanguage();
    fontFamilies.find((item, index) => {
        if (selectionHasInlineStyle(editorState, `FONTFAMILY-${item.name}`)) {
            caption = item.name;
            currentIndex = index;
            return true;
        }
        return false;
    });
    const toggleFontFamily = (event) => {
        const fontFamilyName = event.currentTarget.dataset.name;
        onChange(toggleSelectionFontFamily(editorState, fontFamilyName));
        onRequestFocus();
        return true;
    };
    return (React.createElement(DropDown, { caption: caption || defaultCaption, getContainerNode: getContainerNode, title: language.controls.fontFamily, autoHide: true, arrowActive: currentIndex === 0, 
        // eslint-disable-next-line no-return-assign
        ref: (instance) => (dropDownInstance = instance), className: cls('font-family-dropdown') },
        React.createElement(Menu, null, fontFamilies.map((item, index) => {
            return (React.createElement(MenuItem, { key: item.name, role: "presentation", className: cls(`font-family-item ${index === currentIndex ? 'active' : ''}`), "data-name": item.name, onClick: (event) => {
                    toggleFontFamily(event);
                    dropDownInstance.hide();
                } },
                React.createElement("span", { style: { fontFamily: item.family } }, item.name)));
        }))));
};
export default FontFamilyPicker;