@dktunited-techoff/techoff-suite-ui 1.10.9 → 1.10.11

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 (17) hide show
  1. package/esm/components/TsTabs/TsTabs.css +11 -0
  2. package/esm/components/TsTabs/TsTabs.d.ts +1 -1
  3. package/esm/components/TsTabs/TsTabs.js +52 -11
  4. package/esm/components/TsTabs/TsTabs.js.map +1 -1
  5. package/esm/components/TsTabs/TsTabs.types.d.ts +3 -2
  6. package/esm/components/TsTabs/__stories__/TsTabs.stories.mdx +18 -9
  7. package/lib/components/TsTabs/TsTabs.css +11 -0
  8. package/lib/components/TsTabs/TsTabs.d.ts +1 -1
  9. package/lib/components/TsTabs/TsTabs.js +52 -11
  10. package/lib/components/TsTabs/TsTabs.js.map +1 -1
  11. package/lib/components/TsTabs/TsTabs.types.d.ts +3 -2
  12. package/lib/components/TsTabs/__stories__/TsTabs.stories.mdx +18 -9
  13. package/package.json +1 -1
  14. package/src/components/TsTabs/TsTabs.css +11 -0
  15. package/src/components/TsTabs/TsTabs.tsx +60 -10
  16. package/src/components/TsTabs/TsTabs.types.ts +3 -2
  17. package/src/components/TsTabs/__stories__/TsTabs.stories.mdx +18 -9
package/esm/components/TsTabs/TsTabs.css CHANGED
@@ -45,6 +45,17 @@
45
45
  border-radius: 50%;
46
46
  background: #3643ba;
47
47
  }
48
+ .ts-tabs-sub-item {
49
+ display: flex;
50
+ margin-left: 8px;
51
+ }
52
+ .ts-tabs-sub-item--label {
53
+ margin-left: 4px;
54
+ color: #101010;
55
+ }
56
+ .ts-tabs-sub-item--selected {
57
+ color: #3643ba;
58
+ }
48
59
  .ts-tabs-actions {
49
60
  display: flex;
50
61
  align-items: center;
package/esm/components/TsTabs/TsTabs.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import * as React from 'react';
2
2
  import { TsTabsProps } from './TsTabs.types';
3
3
  import './TsTabs.css';
4
- export declare const TsTabs: ({ defaultSelectedTabId, tabs }: TsTabsProps) => React.JSX.Element;
4
+ export declare const TsTabs: ({ value, tabs }: TsTabsProps) => React.JSX.Element;
package/esm/components/TsTabs/TsTabs.js CHANGED
@@ -2,20 +2,53 @@ import * as React from 'react';
2
2
  import { useEffect, useState } from 'react';
3
3
  import { TsIcon } from '../TsIcon/TsIcon';
4
4
  import './TsTabs.css';
5
- export const TsTabs = ({ defaultSelectedTabId, tabs }) => {
6
- const [selectedTab, setSelectedTab] = useState(tabs.find(t => t.id === defaultSelectedTabId) ?? tabs[0]);
5
+ export const TsTabs = ({ value, tabs }) => {
6
+ const [selectedTab, setSelectedTab] = useState(tabs.find(t => t.id === value) ?? tabs[0]);
7
+ const [selectedSubTab, setSelectedSubTab] = useState();
8
+ const [renderedElement, setRenderedElement] = useState();
7
9
  // ########
8
10
  // Handlers
9
- const handleSelectTab = (tab) => {
10
- setSelectedTab(tab);
11
+ const handleSelectTab = (tab, type) => {
12
+ if (type === 'main')
13
+ setSelectedTab(tab);
14
+ else if (type === 'sub')
15
+ setSelectedSubTab(tab);
11
16
  tab.onClick?.();
12
17
  };
13
18
  // #########
14
19
  // Wathchers
15
20
  useEffect(() => {
16
- if (defaultSelectedTabId)
17
- setSelectedTab(tabs.find(t => t.id === defaultSelectedTabId) ?? tabs[0]);
18
- }, [defaultSelectedTabId]);
21
+ if (value) {
22
+ const tab = tabs.find(t => t.id === value);
23
+ if (tab) {
24
+ setSelectedTab(tab);
25
+ }
26
+ else {
27
+ const tabWithSubTab = tabs.find(t => t.subTabs?.find(st => st.id === value));
28
+ if (tabWithSubTab) {
29
+ const subTab = tabWithSubTab.subTabs?.find(st => st.id === value);
30
+ setSelectedTab(tabWithSubTab);
31
+ setSelectedSubTab(subTab);
32
+ }
33
+ else {
34
+ setSelectedTab(tabs[0]);
35
+ }
36
+ }
37
+ }
38
+ }, [value]);
39
+ useEffect(() => {
40
+ if (selectedTab.subTabs) {
41
+ setSelectedSubTab(selectedTab.subTabs[0]);
42
+ }
43
+ else {
44
+ setSelectedSubTab(undefined);
45
+ setRenderedElement(selectedTab.element);
46
+ }
47
+ }, [selectedTab]);
48
+ useEffect(() => {
49
+ if (selectedSubTab)
50
+ setRenderedElement(selectedSubTab.element);
51
+ }, [selectedSubTab]);
19
52
  // #########
20
53
  // Rendering
21
54
  return (React.createElement("div", { className: "ts-tabs" },
@@ -24,13 +57,21 @@ export const TsTabs = ({ defaultSelectedTabId, tabs }) => {
24
57
  React.createElement("div", { className: "ts-tabs-items" }, tabs.map(tab => (React.createElement("div", { key: tab.id, className: `
25
58
  ts-tabs-item
26
59
  ${tab.id === selectedTab.id ? 'ts-tabs-item--selected' : ''}
27
- ${tab.disabled ? 'ts-tabs-item--disabled' : ''}
28
- `, onClick: () => !tab.disabled && handleSelectTab(tab) },
60
+ ${tab.disabled ? 'ts-tabs-item--disabled' : ''}
61
+ `, onClick: () => !tab.disabled && handleSelectTab(tab, 'main') },
29
62
  tab.icon && (React.createElement("div", { className: "ts-tabs-item--icon" },
30
63
  React.createElement(TsIcon, { name: tab.icon }))),
31
64
  React.createElement("div", { className: "ts-tabs-item--label" }, tab.label),
32
- tab.id === selectedTab.id && React.createElement("div", { className: "ts-tabs-item--selected-pin" })))))),
65
+ tab.id === selectedTab.id && React.createElement("div", { className: "ts-tabs-item--selected-pin" }),
66
+ tab.id === selectedTab.id &&
67
+ tab.subTabs?.map(subTab => (React.createElement("div", { key: subTab.id, className: "ts-tabs-sub-item", onClick: () => !subTab.disabled && handleSelectTab(subTab, 'sub') },
68
+ React.createElement(TsIcon, { name: "chevron-right" }),
69
+ React.createElement("div", { className: `
70
+ ts-tabs-sub-item--label
71
+ ${subTab.id === selectedSubTab?.id ? 'ts-tabs-sub-item--selected' : ''}
72
+ ${subTab.disabled ? 'ts-tabs-item--disabled' : ''}
73
+ ` }, subTab.label))))))))),
33
74
  selectedTab?.actions && React.createElement("div", { className: "ts-tabs-actions" }, selectedTab?.actions)),
34
- React.createElement("div", { className: "ts-tabs-container" }, selectedTab?.element)));
75
+ React.createElement("div", { className: "ts-tabs-container" }, renderedElement)));
35
76
  };
36
77
  //# sourceMappingURL=TsTabs.js.map
package/esm/components/TsTabs/TsTabs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsTabs.js","sourceRoot":"","sources":["../../../src/components/TsTabs/TsTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,oBAAoB,EAAE,IAAI,EAAe,EAAE,EAAE;IACpE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,oBAAoB,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAElH,WAAW;IACX,WAAW;IACX,MAAM,eAAe,GAAG,CAAC,GAAY,EAAE,EAAE;QACvC,cAAc,CAAC,GAAG,CAAC,CAAC;QACpB,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,YAAY;IACZ,YAAY;IACZ,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,oBAAoB;YAAE,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,oBAAoB,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IACrG,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAE3B,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,SAAS;QACtB,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,6BAAK,SAAS,EAAC,yBAAyB;gBACtC,6BAAK,SAAS,EAAC,eAAe,IAC3B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,6BACE,GAAG,EAAE,GAAG,CAAC,EAAE,EACX,SAAS,EAAE;;oBAEP,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;oBACzD,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;iBAC/C,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,IAAI,eAAe,CAAC,GAAG,CAAC;oBAEnD,GAAG,CAAC,IAAI,IAAI,CACX,6BAAK,SAAS,EAAC,oBAAoB;wBACjC,oBAAC,MAAM,IAAC,IAAI,EAAE,GAAG,CAAC,IAAI,GAAI,CACtB,CACP;oBACD,6BAAK,SAAS,EAAC,qBAAqB,IAAE,GAAG,CAAC,KAAK,CAAO;oBACrD,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,IAAI,6BAAK,SAAS,EAAC,4BAA4B,GAAG,CACxE,CACP,CAAC,CACE,CACF;YAEL,WAAW,EAAE,OAAO,IAAI,6BAAK,SAAS,EAAC,iBAAiB,IAAE,WAAW,EAAE,OAAO,CAAO,CAClF;QAEN,6BAAK,SAAS,EAAC,mBAAmB,IAAE,WAAW,EAAE,OAAO,CAAO,CAC3D,CACP,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"TsTabs.js","sourceRoot":"","sources":["../../../src/components/TsTabs/TsTabs.tsx"],"names":[],"mappings":"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"}
package/esm/components/TsTabs/TsTabs.types.d.ts CHANGED
@@ -4,11 +4,12 @@ export type TabItem = {
4
4
  id: string;
5
5
  label: string;
6
6
  disabled?: boolean;
7
- element: ReactElement;
7
+ element?: ReactElement;
8
+ subTabs?: TabItem[];
8
9
  actions?: ReactElement;
9
10
  onClick?: () => void;
10
11
  };
11
12
  export type TsTabsProps = {
12
- defaultSelectedTabId?: string;
13
+ value?: string;
13
14
  tabs: TabItem[];
14
15
  };
package/esm/components/TsTabs/__stories__/TsTabs.stories.mdx CHANGED
@@ -22,6 +22,20 @@ Tabs are used to move from one content to another within the same context.
22
22
  id: '1',
23
23
  label: 'Tab item 1',
24
24
  element: <p>Tab item 1 content</p>,
25
+ },
26
+ {
27
+ id: '2',
28
+ label: 'Tab item 2',
29
+ subTabs: [
30
+ { id: '2.1', label: 'Sub tab item 2.1', element: <p>Sub tab item 2.1 content</p> },
31
+ { id: '2.2', label: 'Sub tab item 2.2', element: <p>Sub tab item 2.2 content</p> },
32
+ ],
33
+ },
34
+ { id: 'disabled', label: 'Tab item disabled', disabled: true, element: <></> },
35
+ {
36
+ id: '3',
37
+ label: 'Tab item with actions',
38
+ element: <p>Tab item 3 content</p>,
25
39
  actions: (
26
40
  <>
27
41
  <TsButton>Action 1</TsButton>
@@ -29,19 +43,14 @@ Tabs are used to move from one content to another within the same context.
29
43
  </>
30
44
  ),
31
45
  },
32
- { id: '2', label: 'Tab item 2', element: <p>Tab item 2 content</p> },
33
- { id: 'disabled', label: 'Tab item disabled', disabled: true, element: <></> },
34
- {
35
- id: '3',
36
- label: 'Tab item 3',
37
- element: <p>Tab item 3 content</p>,
38
- actions: <TsButton icon="add">Action</TsButton>,
39
- },
40
46
  ],
41
47
  }}
42
48
  argTypes={tabsArgTypes}
43
- >
49
+
50
+ >
51
+
44
52
  {args => <TsTabs {...args} />}
53
+
45
54
  </Story>
46
55
  </Canvas>
47
56
 
package/lib/components/TsTabs/TsTabs.css CHANGED
@@ -45,6 +45,17 @@
45
45
  border-radius: 50%;
46
46
  background: #3643ba;
47
47
  }
48
+ .ts-tabs-sub-item {
49
+ display: flex;
50
+ margin-left: 8px;
51
+ }
52
+ .ts-tabs-sub-item--label {
53
+ margin-left: 4px;
54
+ color: #101010;
55
+ }
56
+ .ts-tabs-sub-item--selected {
57
+ color: #3643ba;
58
+ }
48
59
  .ts-tabs-actions {
49
60
  display: flex;
50
61
  align-items: center;
package/lib/components/TsTabs/TsTabs.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import * as React from 'react';
2
2
  import { TsTabsProps } from './TsTabs.types';
3
3
  import './TsTabs.css';
4
- export declare const TsTabs: ({ defaultSelectedTabId, tabs }: TsTabsProps) => React.JSX.Element;
4
+ export declare const TsTabs: ({ value, tabs }: TsTabsProps) => React.JSX.Element;
package/lib/components/TsTabs/TsTabs.js CHANGED
@@ -5,20 +5,53 @@ const React = require("react");
5
5
  const react_1 = require("react");
6
6
  const TsIcon_1 = require("../TsIcon/TsIcon");
7
7
  require("./TsTabs.css");
8
- const TsTabs = ({ defaultSelectedTabId, tabs }) => {
9
- const [selectedTab, setSelectedTab] = (0, react_1.useState)(tabs.find(t => t.id === defaultSelectedTabId) ?? tabs[0]);
8
+ const TsTabs = ({ value, tabs }) => {
9
+ const [selectedTab, setSelectedTab] = (0, react_1.useState)(tabs.find(t => t.id === value) ?? tabs[0]);
10
+ const [selectedSubTab, setSelectedSubTab] = (0, react_1.useState)();
11
+ const [renderedElement, setRenderedElement] = (0, react_1.useState)();
10
12
  // ########
11
13
  // Handlers
12
- const handleSelectTab = (tab) => {
13
- setSelectedTab(tab);
14
+ const handleSelectTab = (tab, type) => {
15
+ if (type === 'main')
16
+ setSelectedTab(tab);
17
+ else if (type === 'sub')
18
+ setSelectedSubTab(tab);
14
19
  tab.onClick?.();
15
20
  };
16
21
  // #########
17
22
  // Wathchers
18
23
  (0, react_1.useEffect)(() => {
19
- if (defaultSelectedTabId)
20
- setSelectedTab(tabs.find(t => t.id === defaultSelectedTabId) ?? tabs[0]);
21
- }, [defaultSelectedTabId]);
24
+ if (value) {
25
+ const tab = tabs.find(t => t.id === value);
26
+ if (tab) {
27
+ setSelectedTab(tab);
28
+ }
29
+ else {
30
+ const tabWithSubTab = tabs.find(t => t.subTabs?.find(st => st.id === value));
31
+ if (tabWithSubTab) {
32
+ const subTab = tabWithSubTab.subTabs?.find(st => st.id === value);
33
+ setSelectedTab(tabWithSubTab);
34
+ setSelectedSubTab(subTab);
35
+ }
36
+ else {
37
+ setSelectedTab(tabs[0]);
38
+ }
39
+ }
40
+ }
41
+ }, [value]);
42
+ (0, react_1.useEffect)(() => {
43
+ if (selectedTab.subTabs) {
44
+ setSelectedSubTab(selectedTab.subTabs[0]);
45
+ }
46
+ else {
47
+ setSelectedSubTab(undefined);
48
+ setRenderedElement(selectedTab.element);
49
+ }
50
+ }, [selectedTab]);
51
+ (0, react_1.useEffect)(() => {
52
+ if (selectedSubTab)
53
+ setRenderedElement(selectedSubTab.element);
54
+ }, [selectedSubTab]);
22
55
  // #########
23
56
  // Rendering
24
57
  return (React.createElement("div", { className: "ts-tabs" },
@@ -27,14 +60,22 @@ const TsTabs = ({ defaultSelectedTabId, tabs }) => {
27
60
  React.createElement("div", { className: "ts-tabs-items" }, tabs.map(tab => (React.createElement("div", { key: tab.id, className: `
28
61
  ts-tabs-item
29
62
  ${tab.id === selectedTab.id ? 'ts-tabs-item--selected' : ''}
30
- ${tab.disabled ? 'ts-tabs-item--disabled' : ''}
31
- `, onClick: () => !tab.disabled && handleSelectTab(tab) },
63
+ ${tab.disabled ? 'ts-tabs-item--disabled' : ''}
64
+ `, onClick: () => !tab.disabled && handleSelectTab(tab, 'main') },
32
65
  tab.icon && (React.createElement("div", { className: "ts-tabs-item--icon" },
33
66
  React.createElement(TsIcon_1.TsIcon, { name: tab.icon }))),
34
67
  React.createElement("div", { className: "ts-tabs-item--label" }, tab.label),
35
- tab.id === selectedTab.id && React.createElement("div", { className: "ts-tabs-item--selected-pin" })))))),
68
+ tab.id === selectedTab.id && React.createElement("div", { className: "ts-tabs-item--selected-pin" }),
69
+ tab.id === selectedTab.id &&
70
+ tab.subTabs?.map(subTab => (React.createElement("div", { key: subTab.id, className: "ts-tabs-sub-item", onClick: () => !subTab.disabled && handleSelectTab(subTab, 'sub') },
71
+ React.createElement(TsIcon_1.TsIcon, { name: "chevron-right" }),
72
+ React.createElement("div", { className: `
73
+ ts-tabs-sub-item--label
74
+ ${subTab.id === selectedSubTab?.id ? 'ts-tabs-sub-item--selected' : ''}
75
+ ${subTab.disabled ? 'ts-tabs-item--disabled' : ''}
76
+ ` }, subTab.label))))))))),
36
77
  selectedTab?.actions && React.createElement("div", { className: "ts-tabs-actions" }, selectedTab?.actions)),
37
- React.createElement("div", { className: "ts-tabs-container" }, selectedTab?.element)));
78
+ React.createElement("div", { className: "ts-tabs-container" }, renderedElement)));
38
79
  };
39
80
  exports.TsTabs = TsTabs;
40
81
  //# sourceMappingURL=TsTabs.js.map
package/lib/components/TsTabs/TsTabs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsTabs.js","sourceRoot":"","sources":["../../../src/components/TsTabs/TsTabs.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAA4C;AAC5C,6CAA0C;AAE1C,wBAAsB;AAEf,MAAM,MAAM,GAAG,CAAC,EAAE,oBAAoB,EAAE,IAAI,EAAe,EAAE,EAAE;IACpE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAU,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,oBAAoB,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAElH,WAAW;IACX,WAAW;IACX,MAAM,eAAe,GAAG,CAAC,GAAY,EAAE,EAAE;QACvC,cAAc,CAAC,GAAG,CAAC,CAAC;QACpB,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,YAAY;IACZ,YAAY;IACZ,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,oBAAoB;YAAE,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,oBAAoB,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IACrG,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAE3B,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,SAAS;QACtB,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,6BAAK,SAAS,EAAC,yBAAyB;gBACtC,6BAAK,SAAS,EAAC,eAAe,IAC3B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,6BACE,GAAG,EAAE,GAAG,CAAC,EAAE,EACX,SAAS,EAAE;;oBAEP,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;oBACzD,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;iBAC/C,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,IAAI,eAAe,CAAC,GAAG,CAAC;oBAEnD,GAAG,CAAC,IAAI,IAAI,CACX,6BAAK,SAAS,EAAC,oBAAoB;wBACjC,oBAAC,eAAM,IAAC,IAAI,EAAE,GAAG,CAAC,IAAI,GAAI,CACtB,CACP;oBACD,6BAAK,SAAS,EAAC,qBAAqB,IAAE,GAAG,CAAC,KAAK,CAAO;oBACrD,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,IAAI,6BAAK,SAAS,EAAC,4BAA4B,GAAG,CACxE,CACP,CAAC,CACE,CACF;YAEL,WAAW,EAAE,OAAO,IAAI,6BAAK,SAAS,EAAC,iBAAiB,IAAE,WAAW,EAAE,OAAO,CAAO,CAClF;QAEN,6BAAK,SAAS,EAAC,mBAAmB,IAAE,WAAW,EAAE,OAAO,CAAO,CAC3D,CACP,CAAC;AACJ,CAAC,CAAC;AAnDW,QAAA,MAAM,UAmDjB"}
1
+ {"version":3,"file":"TsTabs.js","sourceRoot":"","sources":["../../../src/components/TsTabs/TsTabs.tsx"],"names":[],"mappings":"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"}
package/lib/components/TsTabs/TsTabs.types.d.ts CHANGED
@@ -4,11 +4,12 @@ export type TabItem = {
4
4
  id: string;
5
5
  label: string;
6
6
  disabled?: boolean;
7
- element: ReactElement;
7
+ element?: ReactElement;
8
+ subTabs?: TabItem[];
8
9
  actions?: ReactElement;
9
10
  onClick?: () => void;
10
11
  };
11
12
  export type TsTabsProps = {
12
- defaultSelectedTabId?: string;
13
+ value?: string;
13
14
  tabs: TabItem[];
14
15
  };
package/lib/components/TsTabs/__stories__/TsTabs.stories.mdx CHANGED
@@ -22,6 +22,20 @@ Tabs are used to move from one content to another within the same context.
22
22
  id: '1',
23
23
  label: 'Tab item 1',
24
24
  element: <p>Tab item 1 content</p>,
25
+ },
26
+ {
27
+ id: '2',
28
+ label: 'Tab item 2',
29
+ subTabs: [
30
+ { id: '2.1', label: 'Sub tab item 2.1', element: <p>Sub tab item 2.1 content</p> },
31
+ { id: '2.2', label: 'Sub tab item 2.2', element: <p>Sub tab item 2.2 content</p> },
32
+ ],
33
+ },
34
+ { id: 'disabled', label: 'Tab item disabled', disabled: true, element: <></> },
35
+ {
36
+ id: '3',
37
+ label: 'Tab item with actions',
38
+ element: <p>Tab item 3 content</p>,
25
39
  actions: (
26
40
  <>
27
41
  <TsButton>Action 1</TsButton>
@@ -29,19 +43,14 @@ Tabs are used to move from one content to another within the same context.
29
43
  </>
30
44
  ),
31
45
  },
32
- { id: '2', label: 'Tab item 2', element: <p>Tab item 2 content</p> },
33
- { id: 'disabled', label: 'Tab item disabled', disabled: true, element: <></> },
34
- {
35
- id: '3',
36
- label: 'Tab item 3',
37
- element: <p>Tab item 3 content</p>,
38
- actions: <TsButton icon="add">Action</TsButton>,
39
- },
40
46
  ],
41
47
  }}
42
48
  argTypes={tabsArgTypes}
43
- >
49
+
50
+ >
51
+
44
52
  {args => <TsTabs {...args} />}
53
+
45
54
  </Story>
46
55
  </Canvas>
47
56
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dktunited-techoff/techoff-suite-ui",
3
- "version": "1.10.9",
3
+ "version": "1.10.11",
4
4
  "main": "lib/index.js",
5
5
  "types": "./lib",
6
6
  "module": "esm/index.js",
package/src/components/TsTabs/TsTabs.css CHANGED
@@ -45,6 +45,17 @@
45
45
  border-radius: 50%;
46
46
  background: #3643ba;
47
47
  }
48
+ .ts-tabs-sub-item {
49
+ display: flex;
50
+ margin-left: 8px;
51
+ }
52
+ .ts-tabs-sub-item--label {
53
+ margin-left: 4px;
54
+ color: #101010;
55
+ }
56
+ .ts-tabs-sub-item--selected {
57
+ color: #3643ba;
58
+ }
48
59
  .ts-tabs-actions {
49
60
  display: flex;
50
61
  align-items: center;
package/src/components/TsTabs/TsTabs.tsx CHANGED
@@ -1,24 +1,54 @@
1
1
  import * as React from 'react';
2
- import { useEffect, useState } from 'react';
2
+ import { ReactElement, useEffect, useState } from 'react';
3
3
  import { TsIcon } from '../TsIcon/TsIcon';
4
4
  import { TabItem, TsTabsProps } from './TsTabs.types';
5
5
  import './TsTabs.css';
6
6
 
7
- export const TsTabs = ({ defaultSelectedTabId, tabs }: TsTabsProps) => {
8
- const [selectedTab, setSelectedTab] = useState<TabItem>(tabs.find(t => t.id === defaultSelectedTabId) ?? tabs[0]);
7
+ export const TsTabs = ({ value, tabs }: TsTabsProps) => {
8
+ const [selectedTab, setSelectedTab] = useState<TabItem>(tabs.find(t => t.id === value) ?? tabs[0]);
9
+ const [selectedSubTab, setSelectedSubTab] = useState<TabItem>();
10
+ const [renderedElement, setRenderedElement] = useState<ReactElement>();
9
11
 
10
12
  // ########
11
13
  // Handlers
12
- const handleSelectTab = (tab: TabItem) => {
13
- setSelectedTab(tab);
14
+ const handleSelectTab = (tab: TabItem, type: 'main' | 'sub') => {
15
+ if (type === 'main') setSelectedTab(tab);
16
+ else if (type === 'sub') setSelectedSubTab(tab);
14
17
  tab.onClick?.();
15
18
  };
16
19
 
17
20
  // #########
18
21
  // Wathchers
19
22
  useEffect(() => {
20
- if (defaultSelectedTabId) setSelectedTab(tabs.find(t => t.id === defaultSelectedTabId) ?? tabs[0]);
21
- }, [defaultSelectedTabId]);
23
+ if (value) {
24
+ const tab = tabs.find(t => t.id === value);
25
+
26
+ if (tab) {
27
+ setSelectedTab(tab);
28
+ } else {
29
+ const tabWithSubTab = tabs.find(t => t.subTabs?.find(st => st.id === value));
30
+
31
+ if (tabWithSubTab) {
32
+ const subTab = tabWithSubTab.subTabs?.find(st => st.id === value);
33
+ setSelectedTab(tabWithSubTab);
34
+ setSelectedSubTab(subTab);
35
+ } else {
36
+ setSelectedTab(tabs[0]);
37
+ }
38
+ }
39
+ }
40
+ }, [value]);
41
+ useEffect(() => {
42
+ if (selectedTab.subTabs) {
43
+ setSelectedSubTab(selectedTab.subTabs[0]);
44
+ } else {
45
+ setSelectedSubTab(undefined);
46
+ setRenderedElement(selectedTab.element);
47
+ }
48
+ }, [selectedTab]);
49
+ useEffect(() => {
50
+ if (selectedSubTab) setRenderedElement(selectedSubTab.element);
51
+ }, [selectedSubTab]);
22
52
 
23
53
  // #########
24
54
  // Rendering
@@ -33,9 +63,9 @@ export const TsTabs = ({ defaultSelectedTabId, tabs }: TsTabsProps) => {
33
63
  className={`
34
64
  ts-tabs-item
35
65
  ${tab.id === selectedTab.id ? 'ts-tabs-item--selected' : ''}
36
- ${tab.disabled ? 'ts-tabs-item--disabled' : ''}
66
+ ${tab.disabled ? 'ts-tabs-item--disabled' : ''}
37
67
  `}
38
- onClick={() => !tab.disabled && handleSelectTab(tab)}
68
+ onClick={() => !tab.disabled && handleSelectTab(tab, 'main')}
39
69
  >
40
70
  {tab.icon && (
41
71
  <div className="ts-tabs-item--icon">
@@ -44,6 +74,26 @@ export const TsTabs = ({ defaultSelectedTabId, tabs }: TsTabsProps) => {
44
74
  )}
45
75
  <div className="ts-tabs-item--label">{tab.label}</div>
46
76
  {tab.id === selectedTab.id && <div className="ts-tabs-item--selected-pin" />}
77
+
78
+ {tab.id === selectedTab.id &&
79
+ tab.subTabs?.map(subTab => (
80
+ <div
81
+ key={subTab.id}
82
+ className="ts-tabs-sub-item"
83
+ onClick={() => !subTab.disabled && handleSelectTab(subTab, 'sub')}
84
+ >
85
+ <TsIcon name="chevron-right" />
86
+ <div
87
+ className={`
88
+ ts-tabs-sub-item--label
89
+ ${subTab.id === selectedSubTab?.id ? 'ts-tabs-sub-item--selected' : ''}
90
+ ${subTab.disabled ? 'ts-tabs-item--disabled' : ''}
91
+ `}
92
+ >
93
+ {subTab.label}
94
+ </div>
95
+ </div>
96
+ ))}
47
97
  </div>
48
98
  ))}
49
99
  </div>
@@ -52,7 +102,7 @@ export const TsTabs = ({ defaultSelectedTabId, tabs }: TsTabsProps) => {
52
102
  {selectedTab?.actions && <div className="ts-tabs-actions">{selectedTab?.actions}</div>}
53
103
  </div>
54
104
 
55
- <div className="ts-tabs-container">{selectedTab?.element}</div>
105
+ <div className="ts-tabs-container">{renderedElement}</div>
56
106
  </div>
57
107
  );
58
108
  };
package/src/components/TsTabs/TsTabs.types.ts CHANGED
@@ -5,8 +5,9 @@ export type TabItem = {
5
5
  id: string;
6
6
  label: string;
7
7
  disabled?: boolean;
8
- element: ReactElement;
8
+ element?: ReactElement;
9
+ subTabs?: TabItem[];
9
10
  actions?: ReactElement;
10
11
  onClick?: () => void;
11
12
  };
12
- export type TsTabsProps = { defaultSelectedTabId?: string; tabs: TabItem[] };
13
+ export type TsTabsProps = { value?: string; tabs: TabItem[] };
package/src/components/TsTabs/__stories__/TsTabs.stories.mdx CHANGED
@@ -22,6 +22,20 @@ Tabs are used to move from one content to another within the same context.
22
22
  id: '1',
23
23
  label: 'Tab item 1',
24
24
  element: <p>Tab item 1 content</p>,
25
+ },
26
+ {
27
+ id: '2',
28
+ label: 'Tab item 2',
29
+ subTabs: [
30
+ { id: '2.1', label: 'Sub tab item 2.1', element: <p>Sub tab item 2.1 content</p> },
31
+ { id: '2.2', label: 'Sub tab item 2.2', element: <p>Sub tab item 2.2 content</p> },
32
+ ],
33
+ },
34
+ { id: 'disabled', label: 'Tab item disabled', disabled: true, element: <></> },
35
+ {
36
+ id: '3',
37
+ label: 'Tab item with actions',
38
+ element: <p>Tab item 3 content</p>,
25
39
  actions: (
26
40
  <>
27
41
  <TsButton>Action 1</TsButton>
@@ -29,19 +43,14 @@ Tabs are used to move from one content to another within the same context.
29
43
  </>
30
44
  ),
31
45
  },
32
- { id: '2', label: 'Tab item 2', element: <p>Tab item 2 content</p> },
33
- { id: 'disabled', label: 'Tab item disabled', disabled: true, element: <></> },
34
- {
35
- id: '3',
36
- label: 'Tab item 3',
37
- element: <p>Tab item 3 content</p>,
38
- actions: <TsButton icon="add">Action</TsButton>,
39
- },
40
46
  ],
41
47
  }}
42
48
  argTypes={tabsArgTypes}
43
- >
49
+
50
+ >
51
+
44
52
  {args => <TsTabs {...args} />}
53
+
45
54
  </Story>
46
55
  </Canvas>
47
56