tntd 3.0.0-beta.1 → 3.0.0-beta.2

package/es/tntd-layout/OrgAppList.js

@@ -1,15 +1,19 @@
+import _get from "lodash/get";
 import React, { useState, useEffect } from 'react';
 import styled, { withTheme, createGlobalStyle } from 'styled-components';
-import { get } from 'lodash';
 import Input from '../input';
 import Select from '../select';
 import TreeSelect from '../tree-select';
-import { getCurrentAppStore, setCurrentAppStore, getCurrentOrgStore, setCurrentOrgStore, getCurrentOrgTreeStore, setCurrentOrgTreeStore, } from './storage';
+import { getCurrentAppStore, setCurrentAppStore, getCurrentOrgStore, setCurrentOrgStore, getCurrentOrgTreeStore, setCurrentOrgTreeStore } from './storage';
 import { traverseTree } from '../utils';
-const { Group: InputGroup } = Input;
-const { Option } = Select;
+const {
+  Group: InputGroup
+} = Input;
+const {
+  Option
+} = Select;
 // 机构+应用UI
-const OrgAppsInputGroup = styled(InputGroup) `
+const OrgAppsInputGroup = styled(InputGroup)`
   display: inline-block !important;
   width: auto !important;
   min-width: 260px;
@@ -63,7 +67,7 @@ const OrgAppsInputGroup = styled(InputGroup) `
 
     // 删除色系差异
     // .tnt-themeS3.hasHeaderTabs &{
-    //     background: ${(props) => `${props.theme.blueBgColor} !important`}; //#1D4295 !important;
+    //     background: ${props => `${props.theme.blueBgColor} !important`}; //#1D4295 !important;
     //     color: rgba(255,255,255,0.8);
     //     border-color: rgba(255,255,255,0.5);
     // }
@@ -87,7 +91,7 @@ const OrgAppsInputGroup = styled(InputGroup) `
   }
 `;
 // 只展示机构
-const AppTreeSelect = styled(TreeSelect) `
+const AppTreeSelect = styled(TreeSelect)`
   min-width: 160px;
   height: 28px;
   line-height: 28;
@@ -127,7 +131,7 @@ const AppTreeSelect = styled(TreeSelect) `
     // }
 
     // .tnt-themeS3.hasHeaderTabs &{
-    //     background: ${(props) => `${props.theme.blueBgColor} !important`}; //#1D4295
+    //     background: ${props => `${props.theme.blueBgColor} !important`}; //#1D4295
     //     color: rgba(255,255,255,0.8);
     //     border-color: rgba(255,255,255,0.5);
     // }
@@ -149,7 +153,7 @@ const AppTreeSelect = styled(TreeSelect) `
     margin-left: 20px;
   }
 `;
-const GlobalStyle = createGlobalStyle `
+const GlobalStyle = createGlobalStyle`
     .org-tree-select {
         &.ant-select-tree-dropdown .ant-select-dropdown-search{
             padding: 10px;
@@ -236,141 +240,206 @@ const GlobalStyle = createGlobalStyle `
         }
     }
 `;
-export default withTheme((props) => {
-    const { orgAppShow, selectedOrgKey, orgList, orgTreeConfig, onOrgChange, selectedAppKey, orgAppList = [], onAppChange, headerTabs, } = props;
-    const orgListFormatData = traverseTree([orgList], (item) => {
-        item.title = item.name;
-        item.value = item.uuid;
-        item.key = item.uuid;
-    });
-    // 初始化数据函数
-    const getInitialSelected = (selectedKey, currentStore, dataList, type) => {
-        const findByKey = (selectedKey) => {
-            let find;
-            traverseTree(dataList, (item) => {
-                if (item.key === selectedKey) {
-                    find = item;
-                    return false;
-                }
-            });
-            return find;
-        };
-        const current = findByKey(selectedKey || get(currentStore, 'key'));
-        if (type) {
-            return current;
-        }
-        return current || dataList[0];
-    };
-    // 初始化数据函数机构树
-    const getInitialSelectedTree = (selecteds, dataList) => {
-        if (selecteds.length) {
-            return selecteds;
-        }
-        else {
-            const temp = dataList.map((res) => {
-                return {
-                    label: res.title,
-                    value: res.uuid,
-                };
-            });
-            setCurrentOrgTreeStore(temp);
-            return temp;
+export default withTheme(props => {
+  const {
+    orgAppShow,
+    selectedOrgKey,
+    orgList,
+    orgTreeConfig,
+    onOrgChange,
+    selectedAppKey,
+    orgAppList = [],
+    onAppChange,
+    headerTabs
+  } = props;
+  const orgListFormatData = traverseTree([orgList], item => {
+    item.title = item.name;
+    item.value = item.uuid;
+    item.key = item.uuid;
+  });
+  // 初始化数据函数
+  const getInitialSelected = (selectedKey, currentStore, dataList, type) => {
+    const findByKey = selectedKey => {
+      let find;
+      traverseTree(dataList, item => {
+        if (item.key === selectedKey) {
+          find = item;
+          return false;
         }
+      });
+      return find;
     };
-    // 初始化值
-    // 机构
-    const [selectedOrg, setSelectedOrg] = useState(getInitialSelected(selectedOrgKey, getCurrentOrgStore(), orgListFormatData));
-    // 机构树
-    const [selectedOrgTree, setSelectedOrgTree] = useState(getInitialSelectedTree(getCurrentOrgTreeStore(), orgListFormatData));
-    // 应用
-    const [selectedApp, setSelectedApp] = useState(getInitialSelected(selectedAppKey, getCurrentAppStore(), orgAppList, 'default'));
-    // org变化事件
-    const changeOrg = (org = {}) => {
-        setSelectedOrg(org);
-        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);
-    };
-    const changeOrgTree = (val = []) => {
-        if (!val.length) {
-            val = orgListFormatData.map((res) => {
-                return {
-                    label: res.title,
-                    value: res.uuid,
-                };
-            });
-        }
-        setSelectedOrgTree(val);
-        setCurrentOrgTreeStore(val);
-        onOrgChange && onOrgChange(val);
-    };
-    // app变化事件
-    const changeApp = (app) => {
-        setSelectedApp(app);
-        setCurrentAppStore(app);
-        onAppChange && onAppChange(app);
-    };
-    useEffect(() => {
-        // 监听org机构
-        const newOrg = getInitialSelected(selectedOrgKey, getCurrentOrgStore(), orgListFormatData);
-        if ((newOrg === null || newOrg === void 0 ? void 0 : newOrg.key) !== (selectedOrg === null || selectedOrg === void 0 ? void 0 : selectedOrg.key)) {
-            changeOrg(newOrg);
-        }
-        // 监听应用
-        const newApp = getInitialSelected(selectedAppKey, 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]);
-    // 如果是多签页的模式 则居右对齐
-    let [treeSelectPosition, selectPosition] = [{}, {}];
-    if (headerTabs) {
-        treeSelectPosition = {
-            dropdownPopupAlign: {
-                points: ['tr', 'br'],
-            },
+    const current = findByKey(selectedKey || _get(currentStore, 'key'));
+    if (type) {
+      return current;
+    }
+    return current || dataList[0];
+  };
+  // 初始化数据函数机构树
+  const getInitialSelectedTree = (selecteds, dataList) => {
+    if (selecteds.length) {
+      return selecteds;
+    } else {
+      const temp = dataList.map(res => {
+        return {
+          label: res.title,
+          value: res.uuid
         };
-        selectPosition = {
-            dropdownAlign: {
-                points: ['tr', 'br'],
-            },
+      });
+      setCurrentOrgTreeStore(temp);
+      return temp;
+    }
+  };
+  // 初始化值
+  // 机构
+  const [selectedOrg, setSelectedOrg] = useState(getInitialSelected(selectedOrgKey, getCurrentOrgStore(), orgListFormatData));
+  // 机构树
+  const [selectedOrgTree, setSelectedOrgTree] = useState(getInitialSelectedTree(getCurrentOrgTreeStore(), orgListFormatData));
+  // 应用
+  const [selectedApp, setSelectedApp] = useState(getInitialSelected(selectedAppKey, getCurrentAppStore(), orgAppList, 'default'));
+  // org变化事件
+  const changeOrg = (org = {}) => {
+    setSelectedOrg(org);
+    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);
+  };
+  const changeOrgTree = (val = []) => {
+    if (!val.length) {
+      val = orgListFormatData.map(res => {
+        return {
+          label: res.title,
+          value: res.uuid
         };
+      });
     }
-    let orgTreeConfigProp = {};
-    if (orgTreeConfig) {
-        orgTreeConfigProp = Object.assign({ dropdownClassName: 'org-tree-check-select', treeCheckable: true, treeCheckStrictly: true, onChange: (val) => {
-                changeOrgTree(val);
-            }, value: selectedOrgTree }, orgTreeConfig);
+    setSelectedOrgTree(val);
+    setCurrentOrgTreeStore(val);
+    onOrgChange && onOrgChange(val);
+  };
+  // app变化事件
+  const changeApp = app => {
+    setSelectedApp(app);
+    setCurrentAppStore(app);
+    onAppChange && onAppChange(app);
+  };
+  useEffect(() => {
+    // 监听org机构
+    const newOrg = getInitialSelected(selectedOrgKey, getCurrentOrgStore(), orgListFormatData);
+    if ((newOrg === null || newOrg === void 0 ? void 0 : newOrg.key) !== (selectedOrg === null || selectedOrg === void 0 ? void 0 : selectedOrg.key)) {
+      changeOrg(newOrg);
     }
-    else {
-        orgTreeConfigProp = {
-            dropdownClassName: 'org-tree-select',
-            onChange: (orgKey) => {
-                let findItem;
-                traverseTree(orgListFormatData, (node) => {
-                    if (node.key === orgKey) {
-                        findItem = node;
-                        return false;
-                    }
-                });
-                changeOrg(findItem);
-            },
-            value: get(selectedOrg, 'key'),
-        };
+    // 监听应用
+    const newApp = getInitialSelected(selectedAppKey, 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]);
+  // 如果是多签页的模式 则居右对齐
+  let [treeSelectPosition, selectPosition] = [{}, {}];
+  if (headerTabs) {
+    treeSelectPosition = {
+      dropdownPopupAlign: {
+        points: ['tr', 'br']
+      }
+    };
+    selectPosition = {
+      dropdownAlign: {
+        points: ['tr', 'br']
+      }
+    };
+  }
+  let orgTreeConfigProp = {};
+  if (orgTreeConfig) {
+    orgTreeConfigProp = Object.assign({
+      dropdownClassName: 'org-tree-check-select',
+      treeCheckable: true,
+      treeCheckStrictly: true,
+      onChange: val => {
+        changeOrgTree(val);
+      },
+      value: selectedOrgTree
+    }, orgTreeConfig);
+  } else {
+    orgTreeConfigProp = {
+      dropdownClassName: 'org-tree-select',
+      onChange: orgKey => {
+        let findItem;
+        traverseTree(orgListFormatData, node => {
+          if (node.key === orgKey) {
+            findItem = node;
+            return false;
+          }
+        });
+        changeOrg(findItem);
+      },
+      value: _get(selectedOrg, 'key')
+    };
+  }
+  if (!orgAppShow) {
+    return React.createElement(React.Fragment, null, React.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.createElement(GlobalStyle, null));
+  }
+  return React.createElement(OrgAppsInputGroup, {
+    compact: true
+  }, React.createElement(TreeSelect, 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
     }
-    if (!orgAppShow) {
-        return (React.createElement(React.Fragment, null,
-            React.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.createElement(GlobalStyle, null)));
+  }, orgTreeConfigProp)), React.createElement(GlobalStyle, null), React.createElement(Select, {
+    placeholder: "\u8BF7\u9009\u62E9",
+    showSearch: true,
+    optionFilterProp: "children",
+    onChange: appKey => {
+      changeApp(orgAppList.find(({
+        key
+      }) => key === appKey));
+    },
+    value: _get(selectedApp, 'key'),
+    style: {
+      width: 130,
+      height: 28,
+      lineHeight: 28
     }
-    return (React.createElement(OrgAppsInputGroup, { compact: true },
-        React.createElement(TreeSelect, 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.createElement(GlobalStyle, null),
-        React.createElement(Select, { placeholder: "\u8BF7\u9009\u62E9", showSearch: true, optionFilterProp: "children", onChange: (appKey) => {
-                changeApp(orgAppList.find(({ key }) => key === appKey));
-            }, value: get(selectedApp, 'key'), style: { width: 130, height: 28, lineHeight: 28 } }, orgAppList.map(({ key, name }) => (React.createElement(Option, { key: key, value: key, title: name }, name))))));
-});
-//# sourceMappingURL=OrgAppList.js.map
+  }, orgAppList.map(({
+    key,
+    name
+  }) => React.createElement(Option, {
+    key: key,
+    value: key,
+    title: name
+  }, name))));
+});