tntd
Version:
tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
265 lines (263 loc) • 12.2 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 _get2 = _interopRequireDefault(require("lodash/get"));
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _dropdown = _interopRequireDefault(require("../dropdown"));
var _menu = _interopRequireDefault(require("../menu"));
var _input = _interopRequireDefault(require("../input"));
var _select = _interopRequireDefault(require("../select"));
var _treeSelect = _interopRequireDefault(require("../tree-select"));
var _tntdIcon = _interopRequireDefault(require("../tntd-icon"));
var _storage = require("./storage");
var _utils = require("../utils");
var _templateObject,
_templateObject2,
_templateObject3,
_templateObject4,
_this = void 0;
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 Option = _select["default"].Option;
var MenuList = (0, _styledComponents["default"])(_menu["default"])(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border-radius: 0;\n min-width: 250px;\n max-height: 350px;\n overflow-y: auto;\n border: 1px solid #ccc;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;\n .ant-dropdown-menu-item {\n padding: 0 20px;\n height: 44px;\n line-height: 44px;\n &:hover {\n background: rgba(0, 0, 0, 0.1);\n }\n &.app-search-warp {\n padding: 0;\n &:hover {\n background: none;\n }\n .ant-input-affix-wrapper {\n height: 100%;\n }\n .ant-input {\n border: none;\n border-bottom: 1px dashed #dcdcdc;\n box-shadow: none;\n padding: 0 20px;\n }\n }\n i {\n margin-right: 0 !important;\n margin-left: 6px !important;\n }\n }\n .isInIframe & {\n margin-left: 20px;\n }\n"])));
// 新版UI
var AppsSelect = (0, _styledComponents["default"])(_select["default"])(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n min-width: 160px;\n height: 28px;\n line-height: 28;\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n .ant-select-selection,\n .ant-select-selection__rendered {\n line-height: 28px;\n height: 28px;\n }\n\n .ant-select-selection {\n .hasHeaderTabs & {\n border-radius: 14px;\n font-size: 12px;\n // \u53BB\u6389\u9ED8\u8BA4\u9ED1\u8272\n // background: #191D29;\n // border: 1px solid rgba(186,189,197,0.60);\n // color: rgba(255,255,255,.8);\n // \u7EDF\u4E00\u4E3A\u6D45\u8272\u8C03\n background: #fff !important;\n border-color: #c9d2dd !important;\n color: #8b919e !important;\n }\n // \u7EDF\u4E00\u8272\u8C03\n // .tnt-themeS1.hasHeaderTabs & {\n // /* background: #141825; */\n // /* color: rgba(255,255,255,.85); */\n // background: #fff;\n // border-color: #c9d2dd;\n // color: #8b919e;\n // }\n\n // .tnt-themeS3.hasHeaderTabs &{\n // background: ", "; //#1D4295\n // color: rgba(255,255,255,0.8);\n // border-color: rgba(255,255,255,0.5);\n // }\n }\n\n .ant-select-arrow {\n .hasHeaderTabs & {\n color: #b2becd;\n }\n .tnt-themeS1 & {\n /* color: rgba(255,255,255,.85); */\n }\n }\n\n .tnt-themeS1 & {\n border-radius: 2px;\n }\n\n .isInIframe & {\n margin-left: 20px;\n }\n"])), function (props) {
return "".concat(props.theme.blueBgColor, " !important");
});
var AppTreeSelect = (0, _styledComponents["default"])(_treeSelect["default"])(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n min-width: 160px;\n height: 28px;\n line-height: 28;\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n"])));
var SwitchAppMenu = _styledComponents["default"].a(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: block;\n color: #666;\n line-height: ", ";\n font-size: ", ";\n\n .tnt-themeS1 & {\n color: rgba(255, 255, 255, 0.85);\n }\n &:hover {\n color: #666;\n }\n i {\n margin-left: 12px;\n }\n"])), function (props) {
return "".concat(props.theme.headerHeight, "px");
}, function (props) {
return "".concat(props.theme.size === 'large' ? 16 : 14, "px");
});
var _default = exports["default"] = (0, _styledComponents.withTheme)(function (props) {
var selectedKey = props.selectedKey,
_props$items = props.items,
items = _props$items === void 0 ? [] : _props$items,
onChange = props.onChange;
var getInitialSelectedApp = function getInitialSelectedApp() {
var currentAppStore = (0, _storage.getCurrentAppStore)();
var findAppByKey = function findAppByKey(selectedKey) {
var findApp;
(0, _utils.traverseTree)(items, function (item) {
if (item.key === selectedKey) {
findApp = item;
return false;
}
});
return findApp;
};
var currentApp = findAppByKey(selectedKey || (0, _get2["default"])(currentAppStore, 'key'));
return currentApp || items[0];
};
var changeApp = function changeApp(app) {
setSelectedApp(app);
(0, _storage.setCurrentAppStore)(app);
onChange && onChange(app);
};
var _useState = (0, _react.useState)(),
_useState2 = _slicedToArray(_useState, 2),
searchValue = _useState2[0],
setSearchValue = _useState2[1];
var _useState3 = (0, _react.useState)(getInitialSelectedApp()),
_useState4 = _slicedToArray(_useState3, 2),
selectedApp = _useState4[0],
setSelectedApp = _useState4[1];
var Menus = _react["default"].createElement(MenuList, {
selectedKeys: [(0, _get2["default"])(selectedApp, 'key')]
}, _react["default"].createElement(_menu["default"].Item, {
className: "app-search-warp",
key: "search",
disabled: true
}, _react["default"].createElement(_input["default"], {
allowClear: true,
placeholder: "\u8F93\u5165\u5173\u952E\u8BCD\u641C\u7D22",
value: searchValue,
onChange: function onChange(evt) {
setSearchValue(evt.target.value);
}
})), items.filter(function () {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
key = _ref.key,
name = _ref.name;
var regExp = new RegExp(searchValue, 'i');
if (searchValue) {
return regExp.test(key) || regExp.test(name);
}
return true;
}).map(function (item) {
return _react["default"].createElement(_menu["default"].Item, {
key: item.key,
onClick: changeApp.bind(_this, item)
}, item.name);
}));
(0, _react.useEffect)(function () {
var newApp = getInitialSelectedApp();
if ((newApp === null || newApp === void 0 ? void 0 : newApp.key) !== (selectedApp === null || selectedApp === void 0 ? void 0 : selectedApp.key)) {
changeApp(newApp);
}
}, [items, selectedKey]);
if (!props.theme.compatible) {
if (items === null || items === void 0 ? void 0 : items.some(function (item) {
var _a;
return (_a = item.children) === null || _a === void 0 ? void 0 : _a.length;
})) {
return _react["default"].createElement(AppTreeSelect, {
placeholder: "\u8BF7\u9009\u62E9",
showSearch: true,
treeNodeFilterProp: "title",
treeDefaultExpandAll: true,
dropdownClassName: "tnt-layout-header-app-tree-select",
dropdownStyle: {
maxHeight: 560
},
value: (0, _get2["default"])(selectedApp, 'key'),
treeData: (0, _utils.traverseTree)(items, function (item) {
item.title = item.name;
item.value = item.key;
item.selectable = !item.children;
item.disabled = !!item.children;
}),
onChange: function onChange(appKey) {
var findItem;
(0, _utils.traverseTree)(items, function (node) {
if (node.key === appKey) {
findItem = node;
return false;
}
});
changeApp(findItem);
},
style: {
minWidth: 160,
height: 28,
lineHeight: 28
}
});
}
return _react["default"].createElement(AppsSelect, {
placeholder: "\u8BF7\u9009\u62E9",
showSearch: true,
optionFilterProp: "children",
value: (0, _get2["default"])(selectedApp, 'key'),
onChange: function onChange(appKey) {
changeApp(items.find(function (_ref2) {
var key = _ref2.key;
return key === appKey;
}));
},
style: {
minWidth: 160,
height: 28,
lineHeight: 28
}
}, items.map(function (_ref3) {
var key = _ref3.key,
name = _ref3.name;
return _react["default"].createElement(Option, {
key: key,
value: key
}, name);
}));
}
return _react["default"].createElement(_dropdown["default"], {
overlay: Menus,
trigger: ['click']
}, _react["default"].createElement(SwitchAppMenu, null, _react["default"].createElement("span", null, (0, _get2["default"])(selectedApp, 'name', '请选择')), _react["default"].createElement(_tntdIcon["default"], {
type: "caret-down"
})));
});