fastlion-amis
Version:
一种MIS页面生成工具
71 lines (70 loc) • 3.51 kB
JavaScript
"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 Matrix = /** @class */ (function (_super) {
(0, tslib_1.__extends)(Matrix, _super);
function Matrix(props) {
var _this = _super.call(this, props) || this;
_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.state = {
searchValue: '',
filterItems: []
};
return _this;
}
Matrix.prototype.render = function () {
var _a = this.props, items = _a.items, render = _a.render, cx = _a.classnames;
var _b = this.state, searchValue = _b.searchValue, filterItems = _b.filterItems;
var len = filterItems.length || items.length;
var clearBot = len - (len % 3 || 3) - 1;
return (react_1.default.createElement("div", { className: cx('Matrix-container') },
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') }, (filterItems.length ? filterItems : items).map(function (item, index) {
var hashNum = (0, utils_1.getHashCode)(item.title) % 54 || 0;
var targetIcon = font_1.default[hashNum];
var _a = item.icon, icon = _a === void 0 ? targetIcon.icon : _a, title = item.title, body = item.body, _b = item.color, color = _b === void 0 ? '#fff' : _b, _c = item.bgColor, bgColor = _c === void 0 ? targetIcon.color : _c;
var martrixBody = [
{
type: 'icon',
icon: icon,
color: color,
bgColor: bgColor
},
{
type: 'tpl',
tpl: title
},
];
return react_1.default.createElement("div", { className: cx('Matrix-item', { 'clear-bot': index > clearBot }) }, 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() {
return _super !== null && _super.apply(this, arguments) || this;
}
MatrixRenderer = (0, tslib_1.__decorate)([
(0, factory_1.Renderer)({
type: 'matrix'
})
], MatrixRenderer);
return MatrixRenderer;
}(Matrix));
exports.MatrixRenderer = MatrixRenderer;
//# sourceMappingURL=./mobile/Matrix.js.map