@cloudtower/eagle 0.34.16 → 0.34.18

package/dist/cjs/core/Tab/Tab.js

@@ -0,0 +1,113 @@
+'use strict';
+
+var iconsReact = require('@cloudtower/icons-react');
+var core = require('@linaria/core');
+var antd = require('antd');
+var React = require('react');
+var index$1 = require('../Icon/index.js');
+var index = require('../Typo/index.js');
+var Tab_style = require('./Tab.style.js');
+var Tab_type = require('./Tab.type.js');
+var useTabAdaptiveLayout = require('./useTabAdaptiveLayout.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const getSelectedStyle = (key, type, selectedKey, activeTabType) => {
+  return key === selectedKey && activeTabType === type ? ["__selected", index.Typo.Label.l1_bold_title] : [index.Typo.Label.l1_regular];
+};
+const Tab = props => {
+  const {
+    className,
+    contentClassName,
+    tabs,
+    onChange,
+    selectedKey,
+    extraSlot,
+    size = "medium"
+  } = props;
+  const tabsRef = React.useRef(null);
+  const extraSlotRef = React.useRef(null);
+  const [isClickedMoreTabItem, setIsClickedMoreTabItem] = React.useState(false);
+  const allTabs = React.useMemo(() => {
+    return tabs.reduce((map, tab) => {
+      map.set(tab.key, tab);
+      return map;
+    }, /* @__PURE__ */new Map([]));
+  }, [tabs]);
+  const selectedTab = React.useMemo(() => allTabs.get(selectedKey), [allTabs, selectedKey]);
+  const moreTabs = useTabAdaptiveLayout.useTabAdaptiveLayout(tabs, tabsRef, extraSlotRef, selectedKey);
+  const activeTabType = React.useMemo(() => {
+    if (moreTabs == null ? void 0 : moreTabs.find(tab => tab.key === (selectedTab == null ? void 0 : selectedTab.key))) {
+      return Tab_type.ActiveTabType.More;
+    }
+    if ((selectedTab == null ? void 0 : selectedTab.key) && allTabs.get(selectedTab.key)) {
+      return Tab_type.ActiveTabType.Common;
+    }
+  }, [moreTabs, allTabs, selectedTab == null ? void 0 : selectedTab.key]);
+  React.useLayoutEffect(() => {
+    var _a;
+    if (!allTabs.get(selectedKey) && ((_a = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _a.key)) {
+      onChange == null ? void 0 : onChange(tabs[0].key);
+    }
+  }, [allTabs, onChange, selectedKey, tabs]);
+  return /* @__PURE__ */React__default.default.createElement(Tab_style.TabMenuWrapper, {
+    className: core.cx(className, size)
+  }, /* @__PURE__ */React__default.default.createElement("div", {
+    className: "tab-bar"
+  }, /* @__PURE__ */React__default.default.createElement("div", {
+    ref: tabsRef,
+    className: "common-tab-bar"
+  }, /* tab items */
+  tabs.map(tab => /* @__PURE__ */React__default.default.createElement("span", {
+    className: core.cx("tab-item-title", "common", ...getSelectedStyle(tab.key, Tab_type.ActiveTabType.Common, selectedKey, activeTabType)),
+    key: tab.key,
+    onClick: () => onChange == null ? void 0 : onChange(tab.key)
+  }, typeof tab.title === "function" ? tab.title({
+    isActive: tab.key === selectedKey
+  }) : tab.title)), /* more tab items */
+  moreTabs.length > 0 && /* @__PURE__ */React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */React__default.default.createElement(antd.Dropdown, {
+    trigger: ["click"],
+    overlayClassName: Tab_style.MoreThanTooltipStyle,
+    onVisibleChange: visible => setIsClickedMoreTabItem(visible),
+    getPopupContainer: triggerNode => document.querySelector(".tab-bar") || triggerNode,
+    overlay: /* @__PURE__ */React__default.default.createElement(antd.Menu, {
+      className: "menu-wrapper",
+      onClick: params => {
+        setIsClickedMoreTabItem(false);
+        onChange == null ? void 0 : onChange(params.key);
+      }
+    }, moreTabs.map(tab => {
+      return /* @__PURE__ */React__default.default.createElement(antd.Menu.Item, {
+        className: core.cx("tab-menu-item", ...getSelectedStyle(tab.key, Tab_type.ActiveTabType.More, selectedKey, activeTabType)),
+        key: tab.key
+      }, typeof tab.title === "function" ? tab.title({
+        isActive: tab.key === selectedKey
+      }) : tab.title);
+    }))
+  }, /* @__PURE__ */React__default.default.createElement("span", {
+    className: core.cx("tab-item-title", "more", Tab_style.TabTitleElStyle, activeTabType === Tab_type.ActiveTabType.More && "__selected", activeTabType === Tab_type.ActiveTabType.More ? index.Typo.Label.l1_bold_title : index.Typo.Label.l1_regular)
+  }, /* @__PURE__ */React__default.default.createElement(index$1, {
+    className: Tab_style.IconStyle,
+    hoverSrc: iconsReact.MoreMenu16BlueIcon,
+    src: iconsReact.MoreMenu16GrayIcon,
+    active: isClickedMoreTabItem
+  }), activeTabType === Tab_type.ActiveTabType.More && /* @__PURE__ */React__default.default.createElement("span", {
+    className: "tab-title-text"
+  }, typeof (selectedTab == null ? void 0 : selectedTab.title) === "function" ? selectedTab == null ? void 0 : selectedTab.title({
+    isActive: true
+  }) : selectedTab == null ? void 0 : selectedTab.title))), extraSlot && /* @__PURE__ */React__default.default.createElement("span", {
+    className: "E_ckaaqep"
+  }))), extraSlot && /* @__PURE__ */React__default.default.createElement("div", {
+    ref: extraSlotRef
+  }, extraSlot)), tabs.map(tab => /* @__PURE__ */React__default.default.createElement("div", {
+    style: {
+      display: tab.key === selectedKey ? "block" : "none"
+    },
+    key: tab.key,
+    className: contentClassName
+  }, tab == null ? void 0 : tab.children)));
+};
+
+exports.Tab = Tab;

package/dist/cjs/core/Tab/Tab.style.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var react = require('@linaria/react');
+
+const TabMenuWrapper = /*#__PURE__*/react.styled('div')({
+  name: "TabMenuWrapper",
+  class: "E_t1tbywr9",
+  propsAsIs: false
+});
+const TabTitleElStyle = "E_ti12z2";
+const MoreThanTooltipStyle = "E_m19lu3v";
+const IconStyle = "E_i1bmwe2m";
+
+exports.IconStyle = IconStyle;
+exports.MoreThanTooltipStyle = MoreThanTooltipStyle;
+exports.TabMenuWrapper = TabMenuWrapper;
+exports.TabTitleElStyle = TabTitleElStyle;

package/dist/cjs/core/Tab/Tab.type.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var ActiveTabType = /* @__PURE__ */ ((ActiveTabType2) => {
+  ActiveTabType2[ActiveTabType2["Common"] = 0] = "Common";
+  ActiveTabType2[ActiveTabType2["More"] = 1] = "More";
+  return ActiveTabType2;
+})(ActiveTabType || {});
+
+exports.ActiveTabType = ActiveTabType;

package/dist/cjs/core/Tab/useTabAdaptiveLayout.js

@@ -0,0 +1,73 @@
+'use strict';
+
+var _ = require('lodash');
+var React = require('react');
+
+const getPlacementWidth = (el) => {
+  if (!el) {
+    return 0;
+  }
+  const computedStyle = window.getComputedStyle(el);
+  const width = el.offsetWidth;
+  const marginLeft = parseInt(computedStyle.marginLeft || "0");
+  const marginRight = parseInt(computedStyle.marginRight || "0");
+  return width + marginLeft + marginRight;
+};
+const useTabAdaptiveLayout = (tabs, tabsRef, extraSlotRef, selectedKey) => {
+  const [moreTabs, setMoreTabs] = React.useState([]);
+  const doAdapt = React.useCallback(() => {
+    if (!tabsRef.current)
+      return;
+    const tabBarEl = tabsRef.current;
+    const tabNodeList = tabBarEl.querySelectorAll(".tab-item-title.common");
+    const moreTabNode = tabBarEl.querySelector(
+      ".tab-item-title.more"
+    );
+    const moreTabPlacementWidth = getPlacementWidth(moreTabNode);
+    tabNodeList.forEach((tab) => tab.classList.remove("__hidden"));
+    const maxContentWidth = getPlacementWidth(tabBarEl.parentElement) - getPlacementWidth(extraSlotRef.current) - moreTabPlacementWidth;
+    let tabsTotalWidth = 24;
+    const hiddenItems = [];
+    let endIndex = Infinity;
+    for (let i = 0; i < tabNodeList.length; i++) {
+      const tab = tabNodeList[i];
+      const tabWidth = getPlacementWidth(tab);
+      if (maxContentWidth >= tabsTotalWidth + tabWidth) {
+        tabsTotalWidth += tabWidth;
+      } else {
+        endIndex = i;
+        break;
+      }
+    }
+    while (endIndex <= tabNodeList.length - 1) {
+      tabNodeList[endIndex].classList.add("__hidden");
+      hiddenItems.push(tabs[endIndex]);
+      endIndex++;
+    }
+    setMoreTabs((prevMoreTabs) => {
+      if (!_.isEqual(hiddenItems, prevMoreTabs)) {
+        return hiddenItems;
+      }
+      return prevMoreTabs;
+    });
+  }, [tabs, tabsRef, extraSlotRef]);
+  React.useEffect(() => {
+    doAdapt();
+  }, [doAdapt, selectedKey]);
+  React.useEffect(() => {
+    var _a;
+    const parentElement = (_a = tabsRef.current) == null ? void 0 : _a.parentElement;
+    if (!parentElement)
+      return;
+    const resizeObserver = new ResizeObserver(() => {
+      doAdapt();
+    });
+    resizeObserver.observe(parentElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [doAdapt, tabsRef]);
+  return moreTabs;
+};
+
+exports.useTabAdaptiveLayout = useTabAdaptiveLayout;

package/dist/cjs/index.js

@@ -119,6 +119,7 @@ var SmallDialog = require('./core/SmallDialog/SmallDialog.js');
 var SmallDialog_style = require('./core/SmallDialog/SmallDialog.style.js');
 var index$1j = require('./core/StepProgress/index.js');
 var index$1k = require('./core/Styled/index.js');
+var Tab = require('./core/Tab/Tab.js');
 var common = require('./core/Table/common.js');
 var TableSkeleton = require('./core/Table/TableSkeleton.js');
 var TableWidget = require('./core/Table/TableWidget.js');
@@ -563,6 +564,7 @@ exports.UnitStyle = index$1k.UnitStyle;
 exports.WarningAlert = index$1k.WarningAlert;
 exports.WizardBody = index$1k.WizardBody;
 exports.radioStyle = index$1k.radioStyle;
+exports.Tab = Tab.Tab;
 exports.useTableBodyHasScrollBar = common.useTableBodyHasScrollBar;
 exports.TableSkeleton = TableSkeleton.TableSkeleton;
 exports.ColumnTitle = TableWidget.ColumnTitle;