@cc98/react-ubb-editor/lib/components/index.js

A ubb editor component based on react

import { __assign, __extends } from "tslib";
// @ts-ignore there's no types for rc-notification
import Notification from 'rc-notification';
import React from 'react';
import { withConfig } from '../context';
import defaultHandler from '../defaultHandler';
import Buttons from './buttons';
import Extend from './extend';
import Textarea from './textarea';
import NoticeContainer from './styles/NoticeContainer';
import Root from './styles/Root';
var Core = /** @class */ (function (_super) {
    __extends(Core, _super);
    function Core(props) {
        var _this = _super.call(this, props) || this;
        _this.redo = function () {
            _this.customTextarea.redo();
        };
        _this.undo = function () {
            _this.customTextarea.undo();
        };
        _this.focusAndSelectTextarea = function (start, end) {
            if (start === void 0) { start = _this.state.start; }
            if (end === void 0) { end = _this.state.end; }
            var newState = { start: start, end: end };
            _this.customTextarea.textarea.focus();
            _this.customTextarea.textarea.setSelectionRange(start, end);
            _this.setState(newState);
        };
        _this.clearExtendAndCustom = function () {
            _this.setState({
                customTagName: '',
                extendConfig: null,
            });
        };
        _this.changePreviewing = function () {
            _this.setState(function (prevState) { return ({
                isPreviewing: !prevState.isPreviewing,
            }); });
        };
        _this.notice = function (message) {
            _this.message.notice({
                content: message,
                style: {
                    right: 0,
                },
            });
        };
        _this.reduce = function (action) {
            var handler = _this.getHandlerByTagName(action.tagName);
            var nextState = handler(_this.state, action);
            _this.setState(function (prevState) { return handler(prevState, action); });
            _this.props.onChange(nextState.value);
            _this.focusAndSelectTextarea();
            _this.clearExtendAndCustom();
        };
        _this.getHandlerByTagName = function (tagName) {
            var config = _this.getConfigByTagName(tagName);
            if (config && config.handler)
                return config.handler;
            return defaultHandler;
        };
        _this.getConfigByTagName = function (tagName) {
            var configs = _this.props.config.configs;
            return configs[tagName];
        };
        _this.handleTextareaChange = function (value) {
            _this.setState({
                value: value,
            });
            _this.props.onChange(value);
        };
        _this.handleExtendButtonClick = function (extendTagName) {
            _this.setState(function (prevState) { return ({
                extendConfig: prevState.extendConfig && prevState.extendConfig.tagName === extendTagName
                    ? null
                    : _this.getConfigByTagName(extendTagName),
                customTagName: '',
            }); });
        };
        _this.handleCustomButtonClick = function (customTagName) {
            _this.setState(function (prevState) { return ({
                customTagName: prevState.customTagName === customTagName ? '' : customTagName,
                extendConfig: null,
            }); });
        };
        _this.handleTextareaBlur = function (e) {
            var _a = e.target, start = _a.selectionStart, end = _a.selectionEnd;
            _this.setState({ start: start, end: end });
        };
        _this.handleFocus = function (e) {
            _this.clearExtendAndCustom();
            if (_this.props.onFocus)
                _this.props.onFocus(e, _this.reduce, _this.notice);
        };
        _this.handleRootBlur = function () {
            _this.timer = setTimeout(function () {
                _this.clearExtendAndCustom();
            });
        };
        _this.handleRootFocus = function () {
            clearTimeout(_this.timer);
        };
        _this.state = {
            customTagName: '',
            end: 0,
            extendConfig: null,
            isPreviewing: false,
            message: '',
            start: 0,
            value: props.value || props.defaultValue,
            fromProps: false,
        };
        return _this;
    }
    Core.getDerivedStateFromProps = function (nextProps, prevState) {
        var value = nextProps.value;
        if (value !== undefined && prevState.value !== value) {
            return {
                value: value,
                end: value.length,
                start: value.length,
                fromProps: true,
            };
        }
        return null;
    };
    Core.prototype.componentDidMount = function () {
        var _this = this;
        Notification.newInstance({
            getContainer: function () { return _this.root; },
        }, function (n) { return (_this.message = n); });
        var wrappedComponentRef = this.props.wrappedComponentRef;
        if (wrappedComponentRef)
            wrappedComponentRef(this);
    };
    Core.prototype.componentDidUpdate = function () {
        // select after change value from props
        if (this.state.fromProps) {
            this.focusAndSelectTextarea();
            this.setState({
                fromProps: false,
            });
        }
    };
    Core.prototype.render = function () {
        var _this = this;
        var _a = this.state, customTagName = _a.customTagName, isPreviewing = _a.isPreviewing, extendConfig = _a.extendConfig, value = _a.value;
        var config = this.props.config;
        var UbbContainer = config.UbbContainer;
        var props = new Proxy(__assign({}, this.props), {
            get: function (props, key) {
                if (typeof props[key] === 'function') {
                    return function (e) {
                        ;
                        props[key](e, _this.reduce, _this.notice);
                    };
                }
                return props[key];
            },
        });
        return (React.createElement(Root, { onFocus: this.handleRootFocus, onBlur: this.handleRootBlur },
            React.createElement(Buttons, { customTagName: customTagName, dispatch: this.reduce, onExtendButtonClick: this.handleExtendButtonClick, onCustomButtonClick: this.handleCustomButtonClick, redo: this.redo, undo: this.undo, message: this.notice, changePreviewing: this.changePreviewing, isPreviewing: isPreviewing }),
            React.createElement(Extend, { dispatch: this.reduce, message: this.notice, extendConfig: extendConfig }),
            !isPreviewing && (React.createElement(Textarea, __assign({}, props, { ref: function (it) { return (_this.customTextarea = it); }, onChange: this.handleTextareaChange, onBlur: this.handleTextareaBlur, onFocus: this.handleFocus, value: this.props.value || value }))),
            isPreviewing && UbbContainer && React.createElement(UbbContainer, { value: this.props.value || value }),
            React.createElement(NoticeContainer, { ref: function (it) { return (_this.root = it); } })));
    };
    Core.defaultProps = {
        onChange: function () { return null; },
        defaultValue: '',
    };
    return Core;
}(React.PureComponent));
export { Core };
export default withConfig(Core);