tntd
Version:
tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
376 lines (374 loc) • 16.8 kB
JavaScript
;
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _utils = require("../../utils");
var _Iconfont = _interopRequireDefault(require("../Iconfont"));
require("../../locale");
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
function _getRequireWildcardCache(e) {
if ("function" != typeof WeakMap) return null;
var r = new WeakMap(),
t = new WeakMap();
return (_getRequireWildcardCache = function _getRequireWildcardCache(e) {
return e ? t : r;
})(e);
}
function _interopRequireWildcard(e, r) {
if (!r && e && e.__esModule) return e;
if (null === e || "object" != _typeof(e) && "function" != typeof e) return {
"default": e
};
var t = _getRequireWildcardCache(r);
if (t && t.has(e)) return t.get(e);
var n = {
__proto__: null
},
a = Object.defineProperty && Object.getOwnPropertyDescriptor;
for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) {
var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;
i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];
}
return n["default"] = e, t && t.set(e, n), n;
}
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
"default": e
};
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _taggedTemplateLiteral(e, t) {
return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
raw: {
value: Object.freeze(t)
}
}));
}
var SearchArea = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n font-size: 14px;\n margin-bottom: 20px;\n color: ", ";\n &.active {\n color: ", ";\n input {\n border-color: ", ";\n }\n }\n .tnt-icon {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n line-height: 1em;\n &[type='close'] {\n right: 0;\n top: 0;\n font-size: 18px;\n cursor: pointer;\n }\n }\n input {\n border-width: 0 0 1px;\n border-style: solid;\n border-color: ", ";\n width: 100%;\n padding: 4px 20px;\n line-height: 20px;\n background-color: transparent;\n outline: none;\n }\n"])), function (props) {
return props.theme.secondaryTextColor;
}, function (props) {
return props.theme.primaryColor;
}, function (props) {
return props.theme.primaryColor;
}, function (props) {
return props.theme.borderColor;
});
var ApplicationTabs = _styledComponents["default"].ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border: 1px solid ", ";\n color: ", ";\n line-height: 32px;\n margin: 0 0 16px;\n padding: 0;\n display: inline-block;\n\n & > li {\n padding: 0 20px;\n display: inline-block;\n cursor: pointer;\n &:not(:last-child) {\n border-right: 1px solid ", ";\n }\n &.active {\n background-color: ", ";\n color: #fff;\n }\n }\n"])), function (props) {
return props.theme.borderColor;
}, function (props) {
return props.theme.primaryTextColor;
}, function (props) {
return props.theme.borderColor;
}, function (props) {
return props.theme.primaryColor;
});
var GroupMenus = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n height: ", ";\n overflow: auto;\n & > div {\n width: 200px;\n margin-right: 10px;\n display: inline-block;\n vertical-align: top;\n }\n"])), function (props) {
return props.isLevel3 ? 'calc(100% - 80px)' : 'calc(100% - 50px)';
});
var GroupMenuItem = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n margin-bottom: 20px;\n & > h5 {\n line-height: 20px;\n margin: 0;\n margin-bottom: 6px;\n }\n"])));
var MenuList = _styledComponents["default"].ul(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n list-style: none;\n padding: 0;\n margin: 0;\n"])));
var MenuItem = _styledComponents["default"].li(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: block;\n line-height: 30px;\n font-size: 12px;\n cursor: pointer;\n a {\n color: ", ";\n &:hover {\n color: ", " !important;\n }\n }\n &.active a {\n color: ", ";\n }\n"])), function (props) {
return props.theme.secondaryTextColor;
}, function (props) {
return props.theme.secondaryColor;
}, function (props) {
return props.theme.primaryColor;
});
var ListBox = _styledComponents["default"].ul(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n background: #fff;\n max-height: 320px;\n overflow-y: auto;\n margin: 0;\n padding: 6px 0;\n list-style: none;\n font-size: 13px;\n position: absolute;\n top: 29px;\n width: 100%;\n box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),\n 0 9px 28px 8px rgba(0, 0, 0, 0.05);\n li {\n cursor: pointer;\n line-height: 32px;\n padding: 0 10px;\n color: ", ";\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n }\n"])), function (props) {
return props.theme.primaryTextColor;
}, function (props) {
return props.theme.secondaryColor;
}, function (props) {
return props.theme.lightBgColor;
});
var SearchList = function SearchList(_ref) {
var items = _ref.items,
onSelectMenu = _ref.onSelectMenu,
theme = _ref.theme;
return _react["default"].createElement(ListBox, {
theme: theme
}, items === null || items === void 0 ? void 0 : items.map(function (item) {
return _react["default"].createElement("li", {
onClick: function onClick() {
return onSelectMenu(item);
}
}, item === null || item === void 0 ? void 0 : item.menuName);
}));
};
var _default = exports["default"] = function _default(_ref2) {
var theme = _ref2.theme,
_ref2$menus = _ref2.menus,
menus = _ref2$menus === void 0 ? [] : _ref2$menus,
close = _ref2.close,
actions = _ref2.actions,
popupRef = _ref2.popupRef,
containerRef = _ref2.containerRef;
var _useState = (0, _react.useState)(false),
_useState2 = _slicedToArray(_useState, 2),
active = _useState2[0],
setActive = _useState2[1];
var _useState3 = (0, _react.useState)(),
_useState4 = _slicedToArray(_useState3, 2),
searchValue = _useState4[0],
setSearchValue = _useState4[1];
var language = actions === null || actions === void 0 ? void 0 : actions.getLanguage();
var isLevel3 = (0, _utils.hasLevel3)(menus);
var _useState5 = (0, _react.useState)(isLevel3 ? menus === null || menus === void 0 ? void 0 : menus[0] : null),
_useState6 = _slicedToArray(_useState5, 2),
activeTopMenu = _useState6[0],
setActiveTopMenu = _useState6[1];
var selectedMenuKey = actions.getSelectedMenuKey();
var calcGroupMenus = function calcGroupMenus(menus) {
menus = menus === null || menus === void 0 ? void 0 : menus.reduce(function (acc, cur) {
var _a;
// 分组
if ((_a = cur === null || cur === void 0 ? void 0 : cur.children) === null || _a === void 0 ? void 0 : _a.length) {
acc.push(cur);
} else {
var defaultGroup = acc.find(function (_ref3) {
var isDefaultGroup = _ref3.isDefaultGroup;
return isDefaultGroup;
});
if (!defaultGroup) {
acc.unshift({
isDefaultGroup: true,
children: [cur]
});
} else {
defaultGroup.children.push(cur);
}
}
return acc;
}, []);
return menus === null || menus === void 0 ? void 0 : menus.reduce(function (acc, cur) {
var _a;
var column = Math.max(1, ~~((containerRef.current.clientWidth - 32) / 210));
if (!acc.length) {
acc.push([cur]);
} else {
var calcGroupHeight = function calcGroupHeight(group) {
var _a;
return 46 + (((_a = group === null || group === void 0 ? void 0 : group.children) === null || _a === void 0 ? void 0 : _a.length) || 0) * 30;
};
var calcColumnHeight = function calcColumnHeight(columnGroups) {
return columnGroups === null || columnGroups === void 0 ? void 0 : columnGroups.reduce(function (acc, cur) {
acc += calcGroupHeight(cur);
return acc;
}, 0);
};
var currentColumnHeight = calcColumnHeight(acc[acc.length - 1]);
var nextGroupHeight = calcGroupHeight(cur);
var findMinHeightGroup = function findMinHeightGroup(groups) {
var minHeight = Infinity;
var index = 0;
for (var i = 0; i < groups.length; i++) {
var height = calcColumnHeight(groups[i]);
if (height < minHeight) {
index = i;
minHeight = height;
}
}
return groups[index];
};
if (acc.length >= column) {
var minHeightGroup = findMinHeightGroup(acc);
minHeightGroup === null || minHeightGroup === void 0 ? void 0 : minHeightGroup.push(cur);
} else {
if (currentColumnHeight + nextGroupHeight > 440) {
acc.push([cur]);
} else {
(_a = acc[(acc === null || acc === void 0 ? void 0 : acc.length) - 1]) === null || _a === void 0 ? void 0 : _a.push(cur);
}
}
}
return acc;
}, []);
};
var groupMenus = calcGroupMenus((activeTopMenu === null || activeTopMenu === void 0 ? void 0 : activeTopMenu.children) || menus);
var _useState7 = (0, _react.useState)([]),
_useState8 = _slicedToArray(_useState7, 2),
searchedMenus = _useState8[0],
setSearchedMenus = _useState8[1];
var onMenuClick = function onMenuClick(menu) {
actions.emit('menuSelect', {
key: menu.code,
data: menu
});
setSearchValue('');
setSearchedMenus([]);
close();
};
var debounceSearch = (0, _debounce2["default"])(function (evt) {
var _a;
var value = (_a = evt.target.value) === null || _a === void 0 ? void 0 : _a.trim();
var matchedMenus = [];
if (value) {
(0, _utils.traverseTree)(menus, function (node) {
var _a;
if (node.path && ((_a = node === null || node === void 0 ? void 0 : node.menuName) === null || _a === void 0 ? void 0 : _a.includes(value))) {
matchedMenus.push(node);
}
});
}
setSearchedMenus(matchedMenus);
}, 100);
var onSearchChange = function onSearchChange(evt) {
evt.persist();
setSearchValue(evt.target.value);
debounceSearch(evt);
};
var onSelectAppTab = function onSelectAppTab(menu) {
setActiveTopMenu(menu);
};
(0, _react.useEffect)(function () {
var clickOutside = function clickOutside(evt) {
var clientX = evt.clientX,
clientY = evt.clientY,
pageX = evt.pageX,
pageY = evt.pageY;
var isOutside = function isOutside(evt, popup) {
if (popup === null || popup === void 0 ? void 0 : popup.contains) {
return !(popup === null || popup === void 0 ? void 0 : popup.contains(evt.target));
}
var _popup$getBoundingCli = popup.getBoundingClientRect(),
x = _popup$getBoundingCli.x,
y = _popup$getBoundingCli.y,
height = _popup$getBoundingCli.height,
width = _popup$getBoundingCli.width;
x += window.scrollX;
y += window.scrollY;
return pageX < x || pageX > x + width || pageY < y || pageY > y + height;
};
if (isOutside(evt, popupRef.current)) {
setSearchValue('');
setSearchedMenus([]);
close();
}
};
document.addEventListener('click', clickOutside);
return function () {
return document.removeEventListener('click', clickOutside);
};
}, []);
return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(SearchArea, {
theme: theme,
className: (0, _classnames["default"])({
active: active
})
}, _react["default"].createElement(_Iconfont["default"], {
type: "search"
}), _react["default"].createElement("input", {
placeholder: actions === null || actions === void 0 ? void 0 : actions.getText('menuSearch'),
value: searchValue,
onChange: onSearchChange,
onFocus: function onFocus() {
return setActive(true);
},
onBlur: function onBlur() {
return setActive(false);
}
}), _react["default"].createElement(_Iconfont["default"], {
type: "close",
onClick: close
}), (searchedMenus === null || searchedMenus === void 0 ? void 0 : searchedMenus.length) > 0 && _react["default"].createElement(SearchList, {
items: searchedMenus,
theme: theme,
onSelectMenu: onMenuClick
})), isLevel3 && _react["default"].createElement(ApplicationTabs, {
theme: theme
}, menus === null || menus === void 0 ? void 0 : menus.map(function (menu) {
return _react["default"].createElement("li", {
className: (0, _classnames["default"])({
active: menu.code === (activeTopMenu === null || activeTopMenu === void 0 ? void 0 : activeTopMenu.code)
}),
onClick: function onClick() {
return onSelectAppTab(menu);
}
}, menu === null || menu === void 0 ? void 0 : menu[language === 'cn' ? 'groupName' : 'enName']);
})), _react["default"].createElement(GroupMenus, {
theme: theme,
isLevel3: isLevel3
}, groupMenus === null || groupMenus === void 0 ? void 0 : groupMenus.map(function (groups) {
return _react["default"].createElement("div", null, groups === null || groups === void 0 ? void 0 : groups.map(function (group) {
return _react["default"].createElement(GroupMenuItem, {
theme: theme
}, _react["default"].createElement("h5", null, group === null || group === void 0 ? void 0 : group[language === 'cn' ? 'groupName' : 'enName']), _react["default"].createElement(MenuList, null, (group.children || []).map(function (menu) {
return _react["default"].createElement(MenuItem, {
key: menu.code,
className: (0, _classnames["default"])({
active: selectedMenuKey === menu.code
}),
theme: theme,
onClick: function onClick() {
return onMenuClick(menu);
}
}, _react["default"].createElement("a", {
href: menu.path,
onClick: function onClick(evt) {
return evt.preventDefault();
}
}, menu === null || menu === void 0 ? void 0 : menu[language === 'cn' ? 'menuName' : 'enName']));
})));
}));
})));
};