@antscorp/antsomi-ui 1.3.5-beta.321 → 1.3.5-beta.323

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/es/components/molecules/EditorTab/EditorTab.d.ts +0 -1
  2. package/es/components/molecules/EditorTab/EditorTab.js +40 -24
  3. package/package.json +1 -1
package/es/components/molecules/EditorTab/EditorTab.d.ts CHANGED
@@ -14,7 +14,6 @@ interface EditorTabProps {
14
14
  showArrow?: boolean;
15
15
  showDropdown?: boolean;
16
16
  editNameOnConfigure?: boolean;
17
- disabledScroll?: boolean;
18
17
  showComposeNewQuery?: boolean;
19
18
  className?: string;
20
19
  leftBlockClassName?: string;
package/es/components/molecules/EditorTab/EditorTab.js CHANGED
@@ -11,7 +11,9 @@ import { handleError } from '@antscorp/antsomi-ui/es/utils';
11
11
  const PATH = 'src/components/EditorTab/index.jsx';
12
12
  export const EditorTab = props => {
13
13
  var _a;
14
- const { listTab = [], activeId = '', defaultActiveId, showArrow, showDropdown, editNameOnConfigure, disabledScroll, onCloseTab, onActiveTab, onAddTab, onConfigure, onSaveName, showComposeNewQuery, className, leftBlockClassName, tabItemClassName, } = props;
14
+ const { listTab = [], activeId = '', defaultActiveId, showArrow, showDropdown, editNameOnConfigure,
15
+ // disabledScroll,
16
+ onCloseTab, onActiveTab, onAddTab, onConfigure, onSaveName, showComposeNewQuery, className, leftBlockClassName, tabItemClassName, } = props;
15
17
  const [activeTabId, setActiveTabId] = useState(defaultActiveId || activeId || ((_a = listTab === null || listTab === void 0 ? void 0 : listTab[0]) === null || _a === void 0 ? void 0 : _a.id));
16
18
  const [arrTabs, setArrTabs] = useState(listTab || []);
17
19
  const [isEditable, setIsEditable] = useState();
@@ -23,23 +25,24 @@ export const EditorTab = props => {
23
25
  setActiveTabId(listTab[listTab.length - 1].id);
24
26
  }
25
27
  setArrTabs(listTab);
26
- }, [listTab, arrTabs.length]);
28
+ // eslint-disable-next-line react-hooks/exhaustive-deps
29
+ }, [listTab]);
30
+ // useEffect(() => {
31
+ // if (onActiveTab) onActiveTab(activeTabId);
32
+ // // eslint-disable-next-line react-hooks/exhaustive-deps
33
+ // }, [activeTabId]);
27
34
  useEffect(() => {
28
- onActiveTab(activeTabId);
29
- setTimeout(() => {
30
- if (!disabledScroll) {
31
- const tabEl = document.getElementById(`tab-${activeTabId}`);
32
- if (tabEl) {
33
- tabEl.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' });
34
- }
35
- }
36
- }, 500);
37
- }, [activeTabId, disabledScroll, onActiveTab]);
38
- useEffect(() => {
39
- if (activeId && activeTabId !== activeId) {
40
- setActiveTabId(activeId);
35
+ const tabEl = document.getElementById(`tab-${activeTabId}`);
36
+ if (tabEl) {
37
+ tabEl.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' });
41
38
  }
42
- }, [activeId, activeTabId]);
39
+ }, [activeTabId]);
40
+ useEffect(() => {
41
+ // if (activeId && activeTabId !== activeId) {
42
+ // setActiveTabId(activeId);
43
+ // }
44
+ setActiveTabId(prev => (activeId && prev !== activeId ? activeId : prev));
45
+ }, [activeId]);
43
46
  const handleAddNew = () => {
44
47
  onAddTab();
45
48
  };
@@ -51,20 +54,29 @@ export const EditorTab = props => {
51
54
  if (activeTabId === tab.id) {
52
55
  if (idx === arrTabs.length - 1) {
53
56
  setActiveTabId(arrTabs[idx - 1].id);
57
+ if (onActiveTab)
58
+ onActiveTab(arrTabs[idx - 1].id);
54
59
  }
55
60
  else if (arrTabs.length > 1) {
56
61
  setActiveTabId(arrTabs[idx + 1].id);
62
+ if (onActiveTab)
63
+ onActiveTab(arrTabs[idx - 1].id);
57
64
  }
58
65
  }
59
- setArrTabs(prevTabs => {
60
- const newTabs = [...prevTabs];
61
- newTabs.splice(idx, 1);
62
- onCloseTab(tab, idx, newTabs);
63
- return newTabs;
64
- });
66
+ const newTabs = [...arrTabs];
67
+ newTabs.splice(idx, 1);
68
+ onCloseTab(tab, idx, newTabs);
69
+ // setArrTabs(prevTabs => {
70
+ // const newTabs = [...prevTabs];
71
+ // newTabs.splice(idx, 1);
72
+ // onCloseTab(tab, idx, newTabs);
73
+ // return newTabs;
74
+ // });
65
75
  };
66
- const handleActiveTab = (tab, idx) => {
76
+ const handleActiveTab = tab => {
67
77
  setActiveTabId(tab.id);
78
+ if (onActiveTab)
79
+ onActiveTab(tab.id);
68
80
  };
69
81
  const onWheelLeftBlock = event => {
70
82
  try {
@@ -90,12 +102,16 @@ export const EditorTab = props => {
90
102
  return;
91
103
  }
92
104
  setActiveTabId(arrTabs[idx - 1].id);
105
+ if (onActiveTab)
106
+ onActiveTab(arrTabs[idx - 1].id);
93
107
  break;
94
108
  case 'right':
95
109
  if (idx === arrTabs.length - 1) {
96
110
  return;
97
111
  }
98
112
  setActiveTabId(arrTabs[idx + 1].id);
113
+ if (onActiveTab)
114
+ onActiveTab(arrTabs[idx + 1].id);
99
115
  break;
100
116
  default:
101
117
  break;
@@ -111,7 +127,7 @@ export const EditorTab = props => {
111
127
  ? arrTabs.map((tab, idx) => {
112
128
  const { showIcon = true, closeable = true } = tab;
113
129
  // const { showIcon = true, showDropdown = true, closeable = true } = tab;
114
- return (React.createElement("div", { key: tab.id, id: `tab-${tab.id}`, onClick: () => handleActiveTab(tab, idx), className: classnames('tab-item', tabItemClassName, {
130
+ return (React.createElement("div", { key: tab.id, id: `tab-${tab.id}`, onClick: () => handleActiveTab(tab), className: classnames('tab-item', tabItemClassName, {
115
131
  active: tab.id === activeTabId,
116
132
  }) },
117
133
  showIcon &&
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antscorp/antsomi-ui",
3
- "version": "1.3.5-beta.321",
3
+ "version": "1.3.5-beta.323",
4
4
  "description": "An enterprise-class UI design language and React UI library.",
5
5
  "sideEffects": [
6
6
  "dist/*",