fastlion-amis/lib/mobile/Matrix.js

一种MIS页面生成工具

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MatrixRenderer = void 0;
var tslib_1 = require("tslib");
/**
 * 移动端九宫格组件
 */
var antd_1 = require("antd");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var factory_1 = require("../factory");
var utils_1 = require("../utils/utils");
var font_1 = (0, tslib_1.__importDefault)(require("../icons/font"));
var helper_1 = require("../utils/helper");
var lodash_1 = require("lodash");
var Scoped_1 = require("../Scoped");
var service_1 = require("../store/service");
var Matrix = /** @class */ (function (_super) {
    (0, tslib_1.__extends)(Matrix, _super);
    function Matrix(props) {
        var _this = _super.call(this, props) || this;
        _this.handleClick = function (_a, defaultSelect) {
            var _b;
            var _c, _d, _e, _f, _g;
            var icon = _a.icon, title = _a.title, body = _a.body, index = _a.index, matrixId = _a.matrixId, hashmatrixId = _a.hashmatrixId, name = _a.name;
            var matrixKeyListStr = sessionStorage.getItem('matrixKeyList');
            if (matrixKeyListStr) {
                var matrixKeyList = JSON.parse(matrixKeyListStr);
                matrixKeyList.push((0, lodash_1.isNil)(name) ? index : name);
                sessionStorage.setItem('matrixKeyList', JSON.stringify(matrixKeyList));
            }
            else {
                sessionStorage.setItem('matrixKeyList', JSON.stringify([(0, lodash_1.isNil)(name) ? index : name]));
            }
            var str = sessionStorage.getItem('matrixMap');
            var menuPath = ((_e = (_d = (_c = location.hash.split('#')) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : location.hash) !== null && _e !== void 0 ? _e : location.href) + '/' + (matrixId ? hashmatrixId : "Matrix" + hashmatrixId);
            var matrixMap = str ? JSON.parse(str) : {};
            var newKeyList = undefined;
            var nodeList = menuPath.split('/');
            if (!nodeList[nodeList.length - 1].includes('Matrix')) {
                var newNodeList = (0, tslib_1.__spreadArray)([], nodeList, true);
                newNodeList.pop();
                var prevMenuPath = newNodeList.join('/');
                var prevTabItem = matrixMap[prevMenuPath];
                if (((_f = prevTabItem === null || prevTabItem === void 0 ? void 0 : prevTabItem.keyList) === null || _f === void 0 ? void 0 : _f.length) > 0) {
                    newKeyList = (0, tslib_1.__spreadArray)([(0, lodash_1.isNil)(name) ? index : name], prevTabItem.keyList, true);
                }
            }
            var currentTabItem = {
                pageTitle: title,
                icon: icon,
                schemaApi: body.schemaApi.url,
                appId: sessionStorage.getItem('appId'),
                path: _this.props.$path,
                keyList: newKeyList && (newKeyList === null || newKeyList === void 0 ? void 0 : newKeyList.length) > 0 ? newKeyList : (sessionStorage.getItem('matrixKeyList') ? JSON.parse((_g = sessionStorage.getItem('matrixKeyList')) !== null && _g !== void 0 ? _g : '') : undefined),
                isTab: true,
                title: title,
                tabKey: index,
                tabName: name,
                itemName: name
            };
            matrixMap = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, matrixMap), (_b = {}, _b[menuPath] = currentTabItem, _b));
            sessionStorage.setItem('matrixMap', JSON.stringify(matrixMap));
            var _h = _this.props, env = _h.env, onPageLink = _h.onPageLink, data = _h.data;
            if (defaultSelect) {
                (env === null || env === void 0 ? void 0 : env.onPageLink) ? env === null || env === void 0 ? void 0 : env.onPageLink(matrixId ? hashmatrixId : "Matrix" + hashmatrixId, "Matrix", title, { schema: body }, data)
                    : onPageLink === null || onPageLink === void 0 ? void 0 : onPageLink(matrixId ? hashmatrixId : "Matrix" + hashmatrixId, "Matrix", title, { schema: body }, data);
            }
        };
        _this.onChange = function (e) {
            var items = _this.props.items;
            var newItems = e.target.value ? items.filter(function (item) { return item.title.includes(e.target.value); }) : [];
            _this.setState({ searchValue: e.target.value, filterItems: newItems });
        };
        _this.contentRef = function (ref) {
            var cx = _this.props.classnames;
            if (ref === null || ref === void 0 ? void 0 : ref.closest("." + cx('Drawer'))) {
                _this.setState({ targetElement: true });
            }
            _this.Ref = ref;
        };
        var activeKey = undefined;
        var tabs = props.items;
        var collectedActiveTab = sessionStorage.getItem('collectedActiveTab');
        if (!(0, lodash_1.isNil)(collectedActiveTab)) {
            var collectedContent_1 = JSON.parse(collectedActiveTab);
            var keyList = collectedContent_1.keyList;
            if (keyList.length) {
                var targetKey_1 = keyList.pop();
                //这里需要处理name不存在的情况，因为name是新加的，这是为了兼容之前收藏的节点
                if ((0, lodash_1.isNil)(tabs[0].name)) {
                    if (typeof targetKey_1 == 'number' && tabs[targetKey_1]) {
                        //name不存在且收藏的是下标，那就只能设置当前的key了，这是兼容以前收藏的节点
                        activeKey = targetKey_1;
                    }
                    else {
                        antd_1.message.info('该节点不存在，请检查是否已被删除');
                        keyList = [];
                    }
                }
                else {
                    //如果查询到了，说明是使用tabName收藏
                    var targetIndex = tabs.findIndex(function (item) { return item.name === targetKey_1; });
                    if (targetIndex === -1) {
                        //这里判断tabName没有定位到的情况，要么是被删除，要么是使用下标进行收藏
                        if (typeof targetKey_1 == 'number' && tabs[targetKey_1]) {
                            //说明定位成功
                            if (tabs[targetKey_1].name === collectedContent_1.itemName) {
                                activeKey = targetKey_1;
                            }
                            else {
                                //顺序改变，导致定位失败，则查找打开相同tabName的tab
                                var getIndex = tabs.findIndex(function (item) { return item.name === collectedContent_1.itemName; });
                                activeKey = getIndex !== -1 ? getIndex : targetKey_1;
                            }
                        }
                        else {
                            antd_1.message.info('该节点不存在，请检查是否已被删除');
                            keyList = [];
                        }
                    }
                    else {
                        activeKey = targetIndex;
                    }
                }
                if (keyList.length > 0) {
                    sessionStorage.setItem('collectedActiveTab', JSON.stringify((0, tslib_1.__assign)((0, tslib_1.__assign)({}, collectedContent_1), { keyList: keyList })));
                }
                else {
                    sessionStorage.removeItem('collectedActiveTab');
                }
            }
        }
        _this.state = {
            searchValue: '',
            filterItems: [],
            targetElement: false,
            defaultKey: activeKey
        };
        return _this;
    }
    Matrix.prototype.componentDidMount = function () {
        var _a, _b;
        var defaultKey = this.state.defaultKey;
        if (!(0, lodash_1.isNil)(defaultKey)) {
            var _c = this.props, items = _c.items, matrixId = _c.matrixId;
            var item = items[defaultKey];
            if (item) {
                var hashNum = (0, utils_1.getHashCode)(item.title) % 54 || 0;
                var url = (_b = (_a = item === null || item === void 0 ? void 0 : item.body) === null || _a === void 0 ? void 0 : _a.schemaApi) === null || _b === void 0 ? void 0 : _b.url;
                var hashmatrixId = url ? (0, utils_1.getHashCode)(url).toString() : (0, utils_1.getHashCode)(item.body.name).toString();
                var targetIcon = font_1.default[hashNum];
                this.handleClick((0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { icon: item.icon || targetIcon.icon, index: defaultKey, matrixId: matrixId, hashmatrixId: hashmatrixId }), true);
            }
        }
    };
    Matrix.prototype.componentWillUnmount = function () {
        var matrixKeyListStr = sessionStorage.getItem('matrixKeyList');
        if (matrixKeyListStr) {
            var matrixKeyList = JSON.parse(matrixKeyListStr);
            if (matrixKeyList.length > 0)
                matrixKeyList.pop();
            if (matrixKeyList.length > 0) {
                sessionStorage.setItem('matrixKeyList', JSON.stringify(matrixKeyList));
            }
            else {
                sessionStorage.removeItem('matrixKeyList');
            }
        }
    };
    // 当itemaction触发的时候 subpath query ctx 都会有 走的是this.receive的逻辑
    Matrix.prototype.reload = function (subpath, query, ctx, isItemAction) {
        var _a, _b;
        // 我被触发了
        (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.store) === null || _b === void 0 ? void 0 : _b.updateData(ctx);
    };
    Matrix.prototype.render = function () {
        var _this = this;
        var _a, _b;
        var _c = this.props, _d = _c.items, items = _d === void 0 ? [] : _d, render = _c.render, cx = _c.classnames, data = _c.data, env = _c.env, matrixId = _c.matrixId, linkPage = _c.linkPage, onPageLink = _c.onPageLink, _e = _c.showSearch, showSearch = _e === void 0 ? true : _e, columnNum = _c.columnNum;
        var _f = this.state, searchValue = _f.searchValue, filterItems = _f.filterItems, targetElement = _f.targetElement;
        var len = filterItems.length || ((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0);
        var clearBot = len - (len % 4 || 4) - 1;
        return (react_1.default.createElement("div", { className: cx('Matrix-container'), ref: this.contentRef },
            showSearch && items.length > 12 && (react_1.default.createElement("div", { className: cx('Matrix-Search') },
                react_1.default.createElement(antd_1.Input, { placeholder: "\u641C\u7D22\u6A21\u677F\u540D\u79F0", value: searchValue, onChange: this.onChange }))),
            react_1.default.createElement("div", { className: cx('Matrix-group') }, (_b = (filterItems.length ? filterItems : items)) === null || _b === void 0 ? void 0 : _b.map(function (item, index) {
                var _a, _b;
                var hashNum = (0, utils_1.getHashCode)(item.title) % 54 || 0;
                var url = (_b = (_a = item === null || item === void 0 ? void 0 : item.body) === null || _a === void 0 ? void 0 : _a.schemaApi) === null || _b === void 0 ? void 0 : _b.url;
                var hashmatrixId = url ? (0, utils_1.getHashCode)(url).toString() : (0, utils_1.getHashCode)(item.body.name).toString();
                var targetIcon = font_1.default[hashNum];
                var _c = item.icon, icon = _c === void 0 ? targetIcon.icon : _c, name = item.name, title = item.title, hiddenOn = item.hiddenOn, hidden = item.hidden, body = item.body, _d = item.color, color = _d === void 0 ? '#fff' : _d, _e = item.bgColor, bgColor = _e === void 0 ? '#6599ef' : _e;
                var martrixBody = [
                    {
                        type: 'icon',
                        icon: icon,
                        color: color,
                        bgColor: bgColor,
                        badge: item.badge ? (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item.badge), { offset: [0, 10] }) : undefined
                    },
                    {
                        type: 'tpl',
                        tpl: title
                    },
                ];
                return react_1.default.createElement("div", { onClick: function () { return _this.handleClick({ icon: icon, title: title, body: body, index: index, matrixId: matrixId, hashmatrixId: hashmatrixId, name: name }); }, className: cx('Matrix-item', { 'clear-bot': index > clearBot, hidden: hidden || (hiddenOn && !(0, helper_1.isVisible)({ hiddenOn: hiddenOn }, data)) }), key: index, style: { width: columnNum ? 100 / (columnNum <= 0 ? 4 : columnNum) + "%" : undefined } }, (!linkPage && !targetElement && ((env === null || env === void 0 ? void 0 : env.onPageLink) || onPageLink)) ? render('action', {
                    type: 'action',
                    body: martrixBody,
                }, {
                    className: 'matrix-action',
                    onClick: function () {
                        var _a, _b, _c;
                        if ((0, helper_1.isMobile)()) {
                            (env === null || env === void 0 ? void 0 : env.onPageLink) ? env === null || env === void 0 ? void 0 : env.onPageLink(matrixId ? hashmatrixId : "Matrix" + hashmatrixId, "Matrix", title, { schema: body }, data)
                                : onPageLink === null || onPageLink === void 0 ? void 0 : onPageLink(matrixId ? hashmatrixId : "Matrix" + hashmatrixId, "Matrix", title, { schema: body }, data);
                        }
                        else {
                            (_a = env.onPageLink) === null || _a === void 0 ? void 0 : _a.call(env, (_b = item.name) !== null && _b !== void 0 ? _b : (0, utils_1.getHashCode)(item.title).toString(), (_c = item.name) !== null && _c !== void 0 ? _c : '', item.title, { schema: item.body }, null);
                        }
                    }
                })
                    :
                        item.clickAction ? render('clickAction', (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item.clickAction), { type: 'action', body: martrixBody }), { className: 'matrix-action' }) : render('action', { type: 'action', actionType: 'drawer', body: martrixBody, drawer: { title: title, body: body, actions: null, } }, { className: 'matrix-action' }));
            }))));
    };
    return Matrix;
}(react_1.default.Component));
var MatrixRenderer = /** @class */ (function (_super) {
    (0, tslib_1.__extends)(MatrixRenderer, _super);
    function MatrixRenderer(props, context) {
        var _this = _super.call(this, props) || this;
        var scoped = context;
        scoped.registerComponent(_this);
        return _this;
    }
    MatrixRenderer.prototype.componentWillUnmount = function () {
        _super.prototype.componentWillUnmount.call(this);
        var scoped = this.context;
        scoped.unRegisterComponent(this);
    };
    MatrixRenderer.prototype.reload = function (subpath, query, ctx, isItemAction) {
        var scoped = this.context;
        if (subpath) {
            return scoped.reload(query ? subpath + "?" + (0, helper_1.qsstringify)(query) : subpath, ctx);
        }
        return _super.prototype.reload.call(this, subpath, query, ctx, isItemAction);
    };
    var _a;
    MatrixRenderer.contextType = Scoped_1.ScopedContext;
    MatrixRenderer = (0, tslib_1.__decorate)([
        (0, factory_1.Renderer)({
            type: 'matrix',
            storeType: service_1.ServiceStore.name,
        }),
        (0, tslib_1.__metadata)("design:paramtypes", [Object, typeof (_a = typeof Scoped_1.IScopedContext !== "undefined" && Scoped_1.IScopedContext) === "function" ? _a : Object])
    ], MatrixRenderer);
    return MatrixRenderer;
}(Matrix));
exports.MatrixRenderer = MatrixRenderer;
//# sourceMappingURL=./mobile/Matrix.js.map