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

A ubb editor component based on react

import { __extends } from "tslib";
import { faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon as Icon } from '@fortawesome/react-fontawesome';
import React from 'react';
import createAction from '../createAction';
import { ExtendValueType } from '../types';
import Button from './styles/Button';
import Divider from './styles/Divider';
import ExtendRoot from './styles/ExtendRoot';
import Input from './styles/Input';
var Extends = /** @class */ (function (_super) {
    __extends(Extends, _super);
    function Extends() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.handleFormSubmit = function (e) {
            e.preventDefault();
            var _a = _this.props, dispatch = _a.dispatch, config = _a.extendConfig;
            var payload = {
                subValues: [],
            };
            var formData = Array.from(e.target.querySelectorAll('input'));
            for (var _i = 0, formData_1 = formData; _i < formData_1.length; _i++) {
                var item = formData_1[_i];
                switch (parseInt(item.dataset.editor, 10)) {
                    case ExtendValueType.Content:
                        payload.content = item.value;
                        break;
                    case ExtendValueType.Main:
                        payload.mainValue = item.value;
                        break;
                    case ExtendValueType.Sub:
                        payload.subValues.push({
                            key: item.name,
                            value: item.value,
                        });
                        break;
                }
            }
            dispatch(createAction(config, payload));
        };
        _this.renderFormItem = function (item, config) {
            var key = "" + config.tagName + item.key + item.type;
            return (React.createElement(React.Fragment, { key: key },
                React.createElement(Input, { "data-editor": item.type, name: item.key === '' ? undefined : item.key, placeholder: item.label, valueType: item.type }),
                React.createElement(Divider, { margin: "0 5px" })));
        };
        _this.renderContent = function (config) {
            if (!config)
                return null;
            var _a = _this.props, dispatch = _a.dispatch, message = _a.message;
            var ExtraComponent = config.ExtraComponent;
            return (React.createElement(React.Fragment, null,
                React.createElement("form", { onSubmit: _this.handleFormSubmit },
                    config.inputs.map(function (item) { return _this.renderFormItem(item, config); }),
                    React.createElement(Button, { type: "submit" },
                        React.createElement(Icon, { icon: faCheck })),
                    React.createElement(Button, { type: "reset" },
                        React.createElement(Icon, { icon: faTimes }))),
                ExtraComponent && React.createElement(ExtraComponent, { message: message, dispatch: dispatch })));
        };
        return _this;
    }
    Extends.prototype.render = function () {
        var extendConfig = this.props.extendConfig;
        return React.createElement(ExtendRoot, { isShown: !!extendConfig }, this.renderContent(extendConfig));
    };
    return Extends;
}(React.PureComponent));
export default Extends;