kedao/lib/components/TextAlign/index.js

Rich Text Editor Based On Draft.js

import { classNameParser } from '../../utils/style';
import React, { useState, useEffect } from 'react';
import { getSelectionBlockData, toggleSelectionAlignment } from '../../utils';
import mergeClassNames from 'merge-class-names';
import ControlGroup from '../ControlGroup';
import styles from "../ControlBar/style.module.css";
import Button from '../Button';
import useLanguage from '../../hooks/use-language';
import AlignCenterIcon from 'tabler-icons-react/dist/icons/align-center';
import AlignLeftIcon from 'tabler-icons-react/dist/icons/align-left';
import AlignRightIcon from 'tabler-icons-react/dist/icons/align-right';
import AlignJustifiedIcon from 'tabler-icons-react/dist/icons/align-justified';
import { tablerIconProps } from '../../constants';
const cls = classNameParser(styles);
const iconMap = {
    left: React.createElement(AlignLeftIcon, Object.assign({}, tablerIconProps)),
    center: React.createElement(AlignCenterIcon, Object.assign({}, tablerIconProps)),
    right: React.createElement(AlignRightIcon, Object.assign({}, tablerIconProps)),
    justify: React.createElement(AlignJustifiedIcon, Object.assign({}, tablerIconProps))
};
const defaultTextAligns = ['left', 'center', 'right', 'justify'];
const TextAlign = ({ editorState, textAligns = defaultTextAligns, onChange, disabled, onRequestFocus }) => {
    const [currentAlignment, setCurrentAlignment] = useState(undefined);
    useEffect(() => {
        setCurrentAlignment(getSelectionBlockData(editorState, 'textAlign'));
    }, [editorState]);
    const setAlignment = (event) => {
        const { alignment } = event.currentTarget.dataset;
        onChange(toggleSelectionAlignment(editorState, alignment));
        onRequestFocus();
    };
    const language = useLanguage();
    const textAlignmentTitles = [
        language.controls.alignLeft,
        language.controls.alignCenter,
        language.controls.alignRight,
        language.controls.alignJustify
    ];
    return (React.createElement(ControlGroup, null, textAligns.map((item, index) => {
        var _a;
        return (React.createElement(Button, { type: "button", key: item, disabled: disabled, "data-title": textAlignmentTitles[index], "data-alignment": item, className: cls(mergeClassNames(item === currentAlignment && 'active')), onClick: setAlignment }, (_a = iconMap[item]) !== null && _a !== void 0 ? _a : null));
    })));
};
export default TextAlign;