fastlion-amis/lib/renderers/QuickEdit.js

一种MIS页面生成工具

"use strict";
/**
 * @file scoped.jsx.
 * @author fex
 */
Object.defineProperty(exports, "__esModule", { value: true });
exports.HocQuickEdit = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var react_dom_1 = require("react-dom");
var hoist_non_react_statics_1 = (0, tslib_1.__importDefault)(require("hoist-non-react-statics"));
var keycode_1 = (0, tslib_1.__importDefault)(require("keycode"));
var Overlay_1 = (0, tslib_1.__importDefault)(require("../components/Overlay"));
var PopOver_1 = (0, tslib_1.__importDefault)(require("../components/PopOver"));
var icons_1 = require("../components/icons");
var inited = false;
var currentOpened;
var HocQuickEdit = function (config) {
    if (config === void 0) { config = {}; }
    return function (Component) {
        var QuickEditComponent = /** @class */ (function (_super) {
            (0, tslib_1.__extends)(QuickEditComponent, _super);
            function QuickEditComponent(props) {
                var _this = _super.call(this, props) || this;
                _this.openQuickEdit = _this.openQuickEdit.bind(_this);
                _this.closeQuickEdit = _this.closeQuickEdit.bind(_this);
                _this.handleAction = _this.handleAction.bind(_this);
                _this.handleSubmit = _this.handleSubmit.bind(_this);
                _this.handleKeyUp = _this.handleKeyUp.bind(_this);
                _this.overlayRef = _this.overlayRef.bind(_this);
                _this.handleWindowKeyPress = _this.handleWindowKeyPress.bind(_this);
                _this.handleWindowKeyDown = _this.handleWindowKeyDown.bind(_this);
                _this.formRef = _this.formRef.bind(_this);
                _this.handleInit = _this.handleInit.bind(_this);
                _this.handleChange = _this.handleChange.bind(_this);
                _this.state = {
                    isOpened: false
                };
                return _this;
            }
            QuickEditComponent.prototype.componentWillUnmount = function () {
                inited = false;
                this.overlay = null;
                this.target = null;
                document.body.removeEventListener('keypress', this.handleWindowKeyPress);
                document.body.removeEventListener('keydown', this.handleWindowKeyDown);
            };
            QuickEditComponent.prototype.componentDidMount = function () {
                this.target = (0, react_dom_1.findDOMNode)(this);
                if (inited) {
                    return;
                }
                inited = true;
                document.body.addEventListener('keypress', this.handleWindowKeyPress);
                document.body.addEventListener('keydown', this.handleWindowKeyDown);
            };
            QuickEditComponent.prototype.formRef = function (ref) {
                var _a = this.props, quickEditFormRef = _a.quickEditFormRef, rowIndex = _a.rowIndex, colIndex = _a.colIndex;
                if (quickEditFormRef) {
                    while (ref && ref.getWrappedInstance) {
                        ref = ref.getWrappedInstance();
                    }
                    quickEditFormRef(ref, colIndex, rowIndex);
                }
            };
            QuickEditComponent.prototype.handleWindowKeyPress = function (e) {
                var ns = this.props.classPrefix;
                var el = e.target.closest("." + ns + "Field--quickEditable");
                if (!el) {
                    return;
                }
                var table = el.closest('table');
                if (!table) {
                    return;
                }
                if ((0, keycode_1.default)(e) === 'space' &&
                    !~['INPUT', 'TEXTAREA'].indexOf(el.tagName)) {
                    e.preventDefault();
                    e.stopPropagation();
                }
            };
            QuickEditComponent.prototype.handleWindowKeyDown = function (e) {
                var _a, _b, _c, _d, _e, _f, _g, _h;
                var code = (0, keycode_1.default)(e);
                if (code === 'esc' && currentOpened) {
                    currentOpened.closeQuickEdit(true);
                }
                else if (~['INPUT', 'TEXTAREA'].indexOf(e.target.tagName) ||
                    e.target.contentEditable === 'true' ||
                    !~['up', 'down', 'left', 'right', 'enter'].indexOf(code)) {
                    return;
                }
                e.stopPropagation();
                e.preventDefault();
                var ns = this.props.classPrefix;
                var el = e.target.closest("." + ns + "Field--quickEditable") ||
                    document.querySelector("." + ns + "Field--quickEditable");
                if (!el) {
                    return;
                }
                var table = el.closest('table');
                if (!table) {
                    return;
                }
                var current = table.querySelector("." + ns + "Field--quickEditable:focus");
                if (!current) {
                    var dom = table.querySelector("." + ns + "Field--quickEditable[tabindex]");
                    dom && dom.focus();
                }
                else {
                    var prevTr = void 0, nextTr = void 0, prevTd = void 0, nextTd = void 0;
                    // 获取下一个可以编辑的
                    var findNextQuickEditable_1 = function (_currentParent, dir) {
                        var _a, _b, _c, _d;
                        var curParent;
                        if (!_currentParent)
                            return _currentParent; // 如果没有找到对应的返回自身
                        switch (code) {
                            case 'up':
                                curParent = _currentParent.previousSibling;
                                break;
                            case 'down':
                                curParent = _currentParent.nextSibling;
                                break;
                        }
                        if (!curParent)
                            return _currentParent; // 如果没有找到对应的返回自身
                        // 如果对应的表格行的对应项有对应的编辑项 返回
                        if ((_d = (_c = (_b = (_a = curParent) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[current.cellIndex]) === null || _c === void 0 ? void 0 : _c.className) === null || _d === void 0 ? void 0 : _d.includes(ns + "Field--quickEditable"))
                            return curParent;
                        else
                            return findNextQuickEditable_1(curParent, dir);
                    };
                    switch (code) {
                        case 'up':
                            prevTr = findNextQuickEditable_1(current.parentNode, code);
                            if (prevTr) {
                                var index = current.cellIndex;
                                if (prevTr.children[index])
                                    (_a = prevTr.children[index]) === null || _a === void 0 ? void 0 : _a.focus();
                            }
                            break;
                        case 'down':
                            nextTr = findNextQuickEditable_1(current.parentNode, code);
                            if (nextTr) {
                                var index = current.cellIndex;
                                if (nextTr.children[index])
                                    (_b = nextTr.children[index]) === null || _b === void 0 ? void 0 : _b.focus();
                            }
                            break;
                        case 'left':
                            prevTd = current.previousElementSibling;
                            while (prevTd) {
                                if (prevTd.matches("." + ns + "Field--quickEditable[tabindex]")) {
                                    break;
                                }
                                prevTd = prevTd.previousElementSibling;
                            }
                            if (prevTd) {
                                (_c = prevTd) === null || _c === void 0 ? void 0 : _c.focus();
                            }
                            else if (current.parentNode.previousSibling) {
                                var tds = current.parentNode
                                    .previousSibling.querySelectorAll("." + ns + "Field--quickEditable[tabindex]");
                                if (tds.length) {
                                    (_d = tds[tds.length - 1]) === null || _d === void 0 ? void 0 : _d.focus();
                                }
                            }
                            break;
                        case 'right':
                            nextTd = current.nextSibling;
                            while (nextTd) {
                                if (nextTd.matches("." + ns + "Field--quickEditable[tabindex]")) {
                                    break;
                                }
                                nextTd = nextTd.nextSibling;
                            }
                            if (nextTd) {
                                (_e = nextTd) === null || _e === void 0 ? void 0 : _e.focus();
                            }
                            else if (current.parentNode.nextSibling) {
                                nextTd = current.parentNode.nextSibling.querySelector("." + ns + "Field--quickEditable[tabindex]");
                                if (nextTd) {
                                    (_f = nextTd) === null || _f === void 0 ? void 0 : _f.focus();
                                }
                            }
                            break;
                        case 'enter':
                            currentOpened === null || currentOpened === void 0 ? void 0 : currentOpened.closeQuickEdit(); // 如果有其他的先关闭其他的
                            (_h = (_g = current.querySelector('[class*="quickEditBtn"]')) === null || _g === void 0 ? void 0 : _g.click) === null || _h === void 0 ? void 0 : _h.call(_g);
                            break;
                    }
                }
            };
            // handleClickOutside() {
            //     this.closeQuickEdit();
            // }
            QuickEditComponent.prototype.overlayRef = function (ref) {
                this.overlay = ref;
            };
            QuickEditComponent.prototype.handleAction = function (e, action, ctx) {
                var onAction = this.props.onAction;
                if (action.actionType === 'cancel' || action.actionType === 'close') {
                    this.closeQuickEdit(true);
                    return;
                }
                onAction && onAction(e, action, ctx);
            };
            QuickEditComponent.prototype.handleSubmit = function (values) {
                var _a = this.props, onQuickChange = _a.onQuickChange, quickEdit = _a.quickEdit;
                this.closeQuickEdit(true);
                onQuickChange(values, quickEdit.saveImmediately, false, quickEdit.resetOnFailed);
                return false;
            };
            QuickEditComponent.prototype.handleInit = function (values) {
                var onQuickChange = this.props.onQuickChange;
                onQuickChange(values, false, false);
            };
            QuickEditComponent.prototype.handleChange = function (values) {
                var _a = this.props, onQuickChange = _a.onQuickChange, quickEdit = _a.quickEdit;
                onQuickChange(values, quickEdit.saveImmediately, false, quickEdit.resetOnFailed);
            };
            QuickEditComponent.prototype.openQuickEdit = function () {
                currentOpened = this;
                this.setState({
                    isOpened: true
                });
            };
            QuickEditComponent.prototype.closeQuickEdit = function (e) {
                var _this = this;
                if (!this.state.isOpened) {
                    return;
                }
                currentOpened = null;
                var ns = this.props.classPrefix;
                this.setState({
                    isOpened: false
                }, function () {
                    // 如果是手动点击的自动聚焦回去
                    if (e) {
                        var el = (0, react_dom_1.findDOMNode)(_this);
                        var table = el.closest('table');
                        ((table &&
                            table.querySelectorAll("td." + ns + "Field--quickEditable:focus")
                                .length) ||
                            el) &&
                            el.focus();
                    }
                });
            };
            QuickEditComponent.prototype.buildSchema = function () {
                var _a = this.props, quickEdit = _a.quickEdit, name = _a.name, label = _a.label, __ = _a.translate, defaultOpen = _a.defaultOpen, column = _a.column, data = _a.data;
                var schema;
                var domicile = {
                    column: column,
                    label: label,
                    data: data
                };
                if (quickEdit === true) {
                    schema = {
                        type: 'form',
                        title: '',
                        autoFocus: true,
                        body: [
                            {
                                type: 'input-text',
                                name: name,
                                placeholder: label,
                                label: false,
                                defaultOpen: defaultOpen,
                                domicile: domicile
                            }
                        ]
                    };
                }
                else if (quickEdit) {
                    if (quickEdit.body &&
                        !~['combo', 'group', 'panel', 'fieldSet', 'fieldset'].indexOf(quickEdit.type)) {
                        schema = (0, tslib_1.__assign)((0, tslib_1.__assign)({ title: '', autoFocus: quickEdit.mode !== 'inline' }, quickEdit), { mode: 'normal', type: 'form' });
                    }
                    else {
                        schema = {
                            title: '',
                            className: quickEdit.formClassName,
                            type: 'form',
                            autoFocus: quickEdit.mode !== 'inline',
                            mode: 'normal',
                            body: [
                                (0, tslib_1.__assign)((0, tslib_1.__assign)({ type: quickEdit.type || 'input-text', name: quickEdit.name || name }, quickEdit), { mode: undefined, defaultOpen: defaultOpen, domicile: domicile })
                            ]
                        };
                    }
                }
                if (schema) {
                    schema = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, schema), { wrapWithPanel: quickEdit.mode !== 'inline', actions: quickEdit.mode === 'inline'
                            ? []
                            : [
                                {
                                    type: 'button',
                                    label: __('cancel'),
                                    actionType: 'cancel'
                                },
                                {
                                    label: __('confirm'),
                                    type: 'submit',
                                    primary: true
                                }
                            ] });
                }
                return schema || 'error';
            };
            QuickEditComponent.prototype.handleKeyUp = function (e) {
                var code = (0, keycode_1.default)(e);
                if (code === 'space' &&
                    !~['INPUT', 'TEXTAREA'].indexOf(e.target.tagName)) {
                    e.preventDefault();
                    e.stopPropagation();
                    this.openQuickEdit();
                }
            };
            QuickEditComponent.prototype.renderPopOver = function () {
                var _this = this;
                var _a = this.props, quickEdit = _a.quickEdit, render = _a.render, popOverContainer = _a.popOverContainer, ns = _a.classPrefix, cx = _a.classnames, canAccessSuperData = _a.canAccessSuperData;
                var content = (react_1.default.createElement("div", { ref: this.overlayRef, className: cx(quickEdit.className) }, render('quick-edit-form', this.buildSchema(), {
                    value: undefined,
                    onSubmit: this.handleSubmit,
                    onAction: this.handleAction,
                    onChange: null,
                    formLazyChange: false,
                    ref: this.formRef,
                    popOverContainer: function () { return _this.overlay; },
                    canAccessSuperData: canAccessSuperData,
                    formStore: undefined
                })));
                popOverContainer = popOverContainer || (function () { return (0, react_dom_1.findDOMNode)(_this); });
                return (react_1.default.createElement(Overlay_1.default, { container: function () { return (0, react_dom_1.findDOMNode)(_this); }, target: function () { return _this.target; }, onHide: function () {
                        _this.closeQuickEdit(true);
                    }, placement: "left-top right-top left-bottom right-bottom left-top", show: true },
                    react_1.default.createElement(PopOver_1.default, { classPrefix: ns, className: cx(ns + "QuickEdit-popover", quickEdit.popOverClassName), onHide: function () {
                            _this.closeQuickEdit(true);
                        }, overlay: true }, content)));
            };
            QuickEditComponent.prototype.render = function () {
                var _a = this.props, onQuickChange = _a.onQuickChange, quickEdit = _a.quickEdit, quickEditEnabled = _a.quickEditEnabled, className = _a.className, cx = _a.classnames, render = _a.render, noHoc = _a.noHoc, canAccessSuperData = _a.canAccessSuperData, disabled = _a.disabled, prefix = _a.prefix;
                if (!quickEdit ||
                    !onQuickChange ||
                    quickEditEnabled === false ||
                    noHoc ||
                    disabled) {
                    return react_1.default.createElement(Component, (0, tslib_1.__assign)({}, this.props));
                }
                if (quickEdit.mode === 'inline') {
                    return (react_1.default.createElement(Component, (0, tslib_1.__assign)({}, this.props), render('inline-form', this.buildSchema(), {
                        value: undefined,
                        wrapperComponent: 'div',
                        className: cx('Form--quickEdit'),
                        ref: this.formRef,
                        prefix: prefix !== null && prefix !== void 0 ? prefix : quickEdit.prefix,
                        simpleMode: true,
                        onInit: this.handleInit,
                        onChange: this.handleChange,
                        formLazyChange: false,
                        quickEditForm: true,
                        canAccessSuperData: canAccessSuperData
                    })));
                }
                else {
                    return (react_1.default.createElement(Component, (0, tslib_1.__assign)({}, this.props, { className: cx("Field--quickEditable", className, {
                            in: this.state.isOpened
                        }), tabIndex: quickEdit.focusable === false
                            ? undefined
                            : '0', onKeyUp: this.handleKeyUp }),
                        react_1.default.createElement("div", { style: { display: 'flex' } },
                            react_1.default.createElement(Component, (0, tslib_1.__assign)({}, this.props, { wrapperComponent: '', noHoc: true })),
                            react_1.default.createElement("span", { key: "edit-btn", className: cx('Field-quickEditBtn'), onClick: this.openQuickEdit },
                                react_1.default.createElement(icons_1.Icon, { icon: "pencil", className: "icon" })),
                            this.state.isOpened ? this.renderPopOver() : null)));
                }
            };
            QuickEditComponent.ComposedComponent = Component;
            return QuickEditComponent;
        }(react_1.default.PureComponent));
        (0, hoist_non_react_statics_1.default)(QuickEditComponent, Component);
        return QuickEditComponent;
    };
};
exports.HocQuickEdit = HocQuickEdit;
exports.default = exports.HocQuickEdit;
//# sourceMappingURL=./renderers/QuickEdit.js.map