tntd
Version:
tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
336 lines (334 loc) • 17.9 kB
JavaScript
"use strict";
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 _input = _interopRequireDefault(require("../input"));
var _select = _interopRequireDefault(require("../select"));
var _treeSelect = _interopRequireDefault(require("../tree-select"));
var _storage = require("./storage");
var _utils = require("../utils");
var _templateObject, _templateObject2, _templateObject3;
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 InputGroup = _input["default"].Group;
var Option = _select["default"].Option;
// 机构+应用UI
var OrgAppsInputGroup = (0, _styledComponents["default"])(InputGroup)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: inline-block !important;\n width: auto !important;\n min-width: 260px;\n height: 28px;\n line-height: 28;\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n\n &.ant-input-group.ant-input-group-compact::before,\n &.ant-input-group.ant-input-group-compact::after {\n content: '';\n display: none;\n }\n\n .ant-select-selection,\n .ant-select-selection__rendered {\n line-height: 28px;\n height: 28px;\n }\n .ant-select-selection--multiple {\n padding-bottom: 0;\n overflow: auto;\n min-height: 28px;\n }\n\n .ant-select-selection {\n .hasHeaderTabs & {\n border-radius: 14px;\n font-size: 12px;\n // \u5220\u9664\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\u6539\u4E3A\u6D45\u8272\n background: #fff !important;\n border-color: #c9d2dd !important;\n color: #8b919e !important;\n\n .ant-select-selection__placeholder,\n .ant-select-search__field__placeholder {\n color: #8b919e;\n }\n }\n // \u5220\u9664\u8272\u7CFB\u5DEE\u5F02\n // .tnt-themeS1.hasHeaderTabs & {\n // background: #fff;\n // border-color: #c9d2dd;\n // color: #8b919e;\n // }\n\n // \u5220\u9664\u8272\u7CFB\u5DEE\u5F02\n // .tnt-themeS3.hasHeaderTabs &{\n // background: ", "; //#1D4295 !important;\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"])(_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 .ant-select-selection--multiple {\n padding-bottom: 0;\n overflow: auto;\n min-height: 28px;\n }\n .ant-select-selection {\n .hasHeaderTabs & {\n border-radius: 14px;\n font-size: 12px;\n // \u5220\u9664\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\n background: #fff !important;\n border-color: #c9d2dd !important;\n color: #8b919e !important;\n }\n // \u4E0D\u9700\u8981\u533A\u5206\u8272\u7CFB\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 .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 GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .org-tree-select {\n &.ant-select-tree-dropdown .ant-select-dropdown-search{\n padding: 10px;\n .ant-select-search__field{\n padding: 0 7px;\n height:28px;\n line-height: 28px;\n }\n }\n .ant-select-tree {\n margin-top:0;\n padding: 0 10px 0 4px;\n li{\n margin:4px 0 ;\n .ant-select-tree-switcher{\n height: 30px;\n line-height: 30px;\n float: left;\n }\n .ant-select-tree-node-content-wrapper{\n height: 30px;\n line-height:30px;\n padding: 0;\n border-radius: 0;\n &.ant-select-tree-node-selected{\n background: #E7F0FE;\n }\n }\n .ant-select-tree-node-content-wrapper:hover{\n background: #E7F0FE;\n }\n .ant-select-tree-title{\n font-family: PingFangSC-Regular;\n color: #17233D;\n padding-left: 4px;\n padding-right: 4px;\n display: block;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n }\n }\n }\n .org-tree-check-select {\n .ant-select-tree {\n margin-top:0;\n padding: 0 10px 0 4px;\n li{\n margin:4px 0 ;\n .ant-select-tree-switcher{\n height: 30px;\n line-height: 30px;\n vertical-align: top;\n }\n\n .ant-select-tree-checkbox{\n vertical-align: super;\n }\n \n .ant-select-tree-node-content-wrapper{\n height: 30px;\n line-height:30px;\n padding: 0;\n border-radius: 0;\n &.ant-select-tree-node-selected{\n background: #E7F0FE;\n }\n }\n .ant-select-tree-node-content-wrapper:hover{\n background: #E7F0FE;\n }\n .ant-select-tree-title{\n font-family: PingFangSC-Regular;\n color: #17233D;\n padding-left: 4px;\n padding-right: 4px;\n display: block;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n }\n }\n }\n"])));
var _default = exports["default"] = (0, _styledComponents.withTheme)(function (props) {
var orgAppShow = props.orgAppShow,
selectedOrgKey = props.selectedOrgKey,
orgList = props.orgList,
orgTreeConfig = props.orgTreeConfig,
onOrgChange = props.onOrgChange,
selectedAppKey = props.selectedAppKey,
_props$orgAppList = props.orgAppList,
orgAppList = _props$orgAppList === void 0 ? [] : _props$orgAppList,
onAppChange = props.onAppChange,
headerTabs = props.headerTabs;
var orgListFormatData = (0, _utils.traverseTree)([orgList], function (item) {
item.title = item.name;
item.value = item.uuid;
item.key = item.uuid;
});
// 初始化数据函数
var getInitialSelected = function getInitialSelected(selectedKey, currentStore, dataList, type) {
var findByKey = function findByKey(selectedKey) {
var find;
(0, _utils.traverseTree)(dataList, function (item) {
if (item.key === selectedKey) {
find = item;
return false;
}
});
return find;
};
var current = findByKey(selectedKey || (0, _get2["default"])(currentStore, 'key'));
if (type) {
return current;
}
return current || dataList[0];
};
// 初始化数据函数机构树
var getInitialSelectedTree = function getInitialSelectedTree(selecteds, dataList) {
if (selecteds.length) {
return selecteds;
} else {
var temp = dataList.map(function (res) {
return {
label: res.title,
value: res.uuid
};
});
(0, _storage.setCurrentOrgTreeStore)(temp);
return temp;
}
};
// 初始化值
// 机构
var _useState = (0, _react.useState)(getInitialSelected(selectedOrgKey, (0, _storage.getCurrentOrgStore)(), orgListFormatData)),
_useState2 = _slicedToArray(_useState, 2),
selectedOrg = _useState2[0],
setSelectedOrg = _useState2[1];
// 机构树
var _useState3 = (0, _react.useState)(getInitialSelectedTree((0, _storage.getCurrentOrgTreeStore)(), orgListFormatData)),
_useState4 = _slicedToArray(_useState3, 2),
selectedOrgTree = _useState4[0],
setSelectedOrgTree = _useState4[1];
// 应用
var _useState5 = (0, _react.useState)(getInitialSelected(selectedAppKey, (0, _storage.getCurrentAppStore)(), orgAppList, 'default')),
_useState6 = _slicedToArray(_useState5, 2),
selectedApp = _useState6[0],
setSelectedApp = _useState6[1];
// org变化事件
var changeOrg = function changeOrg() {
var org = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
setSelectedOrg(org);
(0, _storage.setCurrentOrgStore)({
name: org === null || org === void 0 ? void 0 : org.name,
key: org === null || org === void 0 ? void 0 : org.key,
code: org === null || org === void 0 ? void 0 : org.code
});
onOrgChange && onOrgChange(org);
};
var changeOrgTree = function changeOrgTree() {
var val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
if (!val.length) {
val = orgListFormatData.map(function (res) {
return {
label: res.title,
value: res.uuid
};
});
}
setSelectedOrgTree(val);
(0, _storage.setCurrentOrgTreeStore)(val);
onOrgChange && onOrgChange(val);
};
// app变化事件
var changeApp = function changeApp(app) {
setSelectedApp(app);
(0, _storage.setCurrentAppStore)(app);
onAppChange && onAppChange(app);
};
(0, _react.useEffect)(function () {
// 监听org机构
var newOrg = getInitialSelected(selectedOrgKey, (0, _storage.getCurrentOrgStore)(), orgListFormatData);
if ((newOrg === null || newOrg === void 0 ? void 0 : newOrg.key) !== (selectedOrg === null || selectedOrg === void 0 ? void 0 : selectedOrg.key)) {
changeOrg(newOrg);
}
// 监听应用
var newApp = getInitialSelected(selectedAppKey, (0, _storage.getCurrentAppStore)(), orgAppList);
if ((newApp === null || newApp === void 0 ? void 0 : newApp.key) !== (selectedApp === null || selectedApp === void 0 ? void 0 : selectedApp.key)) {
changeApp(newApp);
}
}, [orgList, selectedOrgKey, selectedAppKey, orgAppList]);
// 如果是多签页的模式 则居右对齐
var treeSelectPosition = {},
selectPosition = {};
if (headerTabs) {
treeSelectPosition = {
dropdownPopupAlign: {
points: ['tr', 'br']
}
};
selectPosition = {
dropdownAlign: {
points: ['tr', 'br']
}
};
}
var orgTreeConfigProp = {};
if (orgTreeConfig) {
orgTreeConfigProp = Object.assign({
dropdownClassName: 'org-tree-check-select',
treeCheckable: true,
treeCheckStrictly: true,
onChange: function onChange(val) {
changeOrgTree(val);
},
value: selectedOrgTree
}, orgTreeConfig);
} else {
orgTreeConfigProp = {
dropdownClassName: 'org-tree-select',
onChange: function onChange(orgKey) {
var findItem;
(0, _utils.traverseTree)(orgListFormatData, function (node) {
if (node.key === orgKey) {
findItem = node;
return false;
}
});
changeOrg(findItem);
},
value: (0, _get2["default"])(selectedOrg, 'key')
};
}
if (!orgAppShow) {
return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(AppTreeSelect, Object.assign({
placeholder: "\u9009\u62E9\u673A\u6784",
searchPlaceholder: "\u673A\u6784\u540D\u79F0",
treeNodeFilterProp: "title",
showSearch: true,
treeData: orgListFormatData,
treeDefaultExpandAll: true
}, treeSelectPosition, {
style: {
width: 160,
height: 28,
lineHeight: 28
},
dropdownStyle: {
maxHeight: 300,
overflow: 'auto',
width: 320
}
}, orgTreeConfigProp)), _react["default"].createElement(GlobalStyle, null));
}
return _react["default"].createElement(OrgAppsInputGroup, {
compact: true
}, _react["default"].createElement(_treeSelect["default"], Object.assign({
placeholder: "\u9009\u62E9\u673A\u6784",
searchPlaceholder: "\u673A\u6784\u540D\u79F0",
treeNodeFilterProp: "title",
showSearch: true,
treeData: orgListFormatData,
treeDefaultExpandAll: true,
style: {
width: 130,
height: 28,
lineHeight: 28
},
dropdownStyle: {
maxHeight: 300,
overflow: 'auto',
width: 320
}
}, orgTreeConfigProp)), _react["default"].createElement(GlobalStyle, null), _react["default"].createElement(_select["default"], {
placeholder: "\u8BF7\u9009\u62E9",
showSearch: true,
optionFilterProp: "children",
onChange: function onChange(appKey) {
changeApp(orgAppList.find(function (_ref) {
var key = _ref.key;
return key === appKey;
}));
},
value: (0, _get2["default"])(selectedApp, 'key'),
style: {
width: 130,
height: 28,
lineHeight: 28
}
}, orgAppList.map(function (_ref2) {
var key = _ref2.key,
name = _ref2.name;
return _react["default"].createElement(Option, {
key: key,
value: key,
title: name
}, name);
})));
});