kedao/lib/components/TextIndent/index.js

Rich Text Editor Based On Draft.js

import { classNameParser } from '../../utils/style';
import React, { useState, useEffect } from 'react';
import { decreaseSelectionIndent, increaseSelectionIndent, getSelectionBlockData } from '../../utils';
import ControlGroup from '../ControlGroup';
import styles from "../ControlBar/style.module.css";
import Button from '../Button';
import useLanguage from '../../hooks/use-language';
import IndentDecreaseIcon from 'tabler-icons-react/dist/icons/indent-decrease';
import IndentIncreaseIcon from 'tabler-icons-react/dist/icons/indent-increase';
import { tablerIconProps } from '../../constants';
const cls = classNameParser(styles);
const TextIndent = ({ editorState, onChange, disabled, onRequestFocus }) => {
    const [currentIndent, setCurrentIndent] = useState(0);
    useEffect(() => {
        setCurrentIndent(getSelectionBlockData(editorState, 'textIndent') || 0);
    }, [editorState]);
    const increaseIndent = () => {
        onChange(increaseSelectionIndent(editorState));
        onRequestFocus();
    };
    const decreaseIndent = () => {
        onChange(decreaseSelectionIndent(editorState));
        onRequestFocus();
    };
    const language = useLanguage();
    return (React.createElement(ControlGroup, null,
        React.createElement(Button, { key: 0, type: "button", "data-title": language.controls.increaseIndent, disabled: disabled || currentIndent >= 6, className: cls(`button-indent-increase${currentIndent > 0 && currentIndent < 6 ? ' active' : ''}`), onClick: increaseIndent },
            React.createElement(IndentIncreaseIcon, Object.assign({}, tablerIconProps))),
        React.createElement(Button, { key: 1, type: "button", "data-title": language.controls.decreaseIndent, disabled: disabled || currentIndent <= 0, className: cls('button-indent-decrease'), onClick: decreaseIndent },
            React.createElement(IndentDecreaseIcon, Object.assign({}, tablerIconProps)))));
};
export default TextIndent;