ukelli-ui
Version:
Base on React's UI lib. Make frontend's dev simpler and faster.
175 lines (174 loc) • 8.35 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
/* eslint-disable consistent-return */
import React from 'react';
import { Call } from 'basic-helper';
import DropdownWrapper from './dropdown-wrapper';
import { Icon } from '../icon';
import { UkeComponent } from '../utils/uke-component';
var LinkSelector = /** @class */ (function (_super) {
__extends(LinkSelector, _super);
function LinkSelector(props) {
var _this = _super.call(this, props) || this;
_this.extendsDOM = [];
_this.activeItems = [];
// componentDidUpdate() {
// this.dropWrapper && this.dropWrapper.updateNodeRef();
// }
_this.itemMapFilter = function (item) {
var mappers = _this.props.mappers;
if (mappers) {
var child = mappers.child, code = mappers.code, title = mappers.title, _a = mappers.icon, icon = _a === void 0 ? '' : _a;
return __assign(__assign({}, item), { child: item[child], code: item[code], title: item[title], icon: item[icon] });
}
};
_this.getMenuLinkerDOM = function (options) {
var key = options.key, onClick = options.onClick, menuText = options.menuText, icon = options.icon;
return (React.createElement("div", { key: key, className: "menu", onClick: function (e) { return Call(onClick, key); } },
!icon ? (React.createElement("span", { className: "menu-tip" }, "-")) : (React.createElement(Icon, { n: icon, classNames: ['mr10'] })),
_this.$T(menuText)));
};
_this.selectItem = function (foldIdx, activeIdx) {
_this.setState(function (_a) {
var selectedIndexMap = _a.selectedIndexMap;
var data = _this.props.data;
var nextIndexMap = __spreadArrays(selectedIndexMap);
var nextActiveGroup = [];
nextIndexMap.splice(foldIdx + 1);
nextIndexMap[foldIdx] = activeIdx;
var recursive = function (currDataGroup, level) {
var idx = nextIndexMap[level];
var currData = currDataGroup[idx];
if (!currData)
return;
var item = _this.itemMapFilter(currData);
var child = item.child;
nextActiveGroup.push(item);
if (child && level < nextIndexMap.length)
recursive(child, level + 1);
};
recursive(data, 0);
return {
selectedIndexMap: nextIndexMap,
selectedItems: nextActiveGroup
};
});
};
_this.getAllSet = function (initDataList) {
_this.extendsDOM = [];
_this.activeItems = [];
if (!initDataList || !Array.isArray(initDataList))
return;
var selectedIndexMap = _this.state.selectedIndexMap;
var recursive = function (currSelectedIdx, currDataList) {
var currDOMSets = [];
var nextSelectedIdx = currSelectedIdx + 1;
var activeItemIdx = selectedIndexMap[currSelectedIdx];
currDataList.forEach(function (item, currDataIdx) {
if (!item)
return;
var isActive = activeItemIdx === currDataIdx;
var _item = _this.itemMapFilter(item);
var child = _item.child, title = _item.title, code = _item.code, icon = _item.icon;
var hasChildren = child && child.length > 0;
if (isActive)
_this.activeItems.push(_item);
if (hasChildren && isActive) {
var childDOM = recursive.call(_this, nextSelectedIdx, currDataList[activeItemIdx].child);
_this.extendsDOM.unshift(childDOM);
}
var dom = (React.createElement("div", { key: currDataIdx, className: "folder" + (isActive ? ' active' : '') },
React.createElement("div", { className: "fold-title", onClick: function (e) { return _this.selectItem(currSelectedIdx, currDataIdx); } },
title,
hasChildren && (React.createElement(Icon, { n: "angle-right" })))));
currDOMSets.push(dom);
});
return currDOMSets;
};
return recursive.call(_this, 0, initDataList);
};
_this.getSelectedTitle = function () {
var selectedItems = _this.state.selectedItems;
if (selectedItems.length > 0) {
return (React.createElement("div", null, selectedItems.map(function (item, idx) {
var code = item.code, title = item.title;
var isLastest = idx === selectedItems.length - 1;
return (React.createElement("span", { key: code + title },
title,
!isLastest && ' > '));
})));
}
return _this.$T_UKE('请选择');
};
_this.saveDropWrapper = function (e) {
_this.dropWrapper = e;
};
_this.state = {
/** 递归结构选中的索引 */
selectedIndexMap: [
// 0, 1, 0
],
selectedItems: []
};
return _this;
}
LinkSelector.prototype.render = function () {
var _this = this;
var _a = this.props, data = _a.data, propsForDropWrapper = __rest(_a, ["data"]);
var selectedTitle = this.getSelectedTitle();
return (React.createElement(DropdownWrapper, __assign({ ref: this.saveDropWrapper }, propsForDropWrapper, { menuTitle: selectedTitle, overlay: function (helper) { return (React.createElement("div", { className: "__link-selector", style: { width: 400 } },
React.createElement("div", { className: "items" },
React.createElement("div", { className: "wrapper" }, _this.getAllSet(data)),
__spreadArrays(_this.extendsDOM).map(function (item, idx) { return (React.createElement("div", { className: "wrapper", key: idx }, item)); })))); } })));
};
LinkSelector.defaultProps = {
mappers: {
child: 'child',
code: 'code',
title: 'title',
icon: 'icon',
}
};
return LinkSelector;
}(UkeComponent));
export default LinkSelector;