@dktunited-techoff/techoff-suite-ui 1.15.8 → 1.15.10
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.
- package/esm/components/TsTabs/TsTabs.css +3 -0
- package/esm/components/TsTabs/TsTabs.d.ts +1 -1
- package/esm/components/TsTabs/TsTabs.js +3 -4
- package/esm/components/TsTabs/TsTabs.js.map +1 -1
- package/esm/components/TsTabs/TsTabs.types.d.ts +2 -2
- package/lib/components/TsTabs/TsTabs.css +3 -0
- package/lib/components/TsTabs/TsTabs.d.ts +1 -1
- package/lib/components/TsTabs/TsTabs.js +3 -4
- package/lib/components/TsTabs/TsTabs.js.map +1 -1
- package/lib/components/TsTabs/TsTabs.types.d.ts +2 -2
- package/package.json +1 -1
- package/src/components/TsTabs/TsTabs.css +3 -0
- package/src/components/TsTabs/TsTabs.tsx +3 -7
- package/src/components/TsTabs/TsTabs.types.ts +2 -3
|
@@ -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: ({ value, tabs }: TsTabsProps) => React.JSX.Element;
|
|
4
|
+
export declare const TsTabs: ({ value, onChange, tabs }: TsTabsProps) => React.JSX.Element;
|
|
@@ -2,7 +2,7 @@ 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 = ({ value, tabs }) => {
|
|
5
|
+
export const TsTabs = ({ value, onChange, tabs }) => {
|
|
6
6
|
const [selectedTab, setSelectedTab] = useState(tabs.find(t => t.id === value) ?? tabs[0]);
|
|
7
7
|
const [selectedSubTab, setSelectedSubTab] = useState();
|
|
8
8
|
const [renderedElement, setRenderedElement] = useState();
|
|
@@ -17,7 +17,7 @@ export const TsTabs = ({ value, tabs }) => {
|
|
|
17
17
|
else if (type === 'sub') {
|
|
18
18
|
setSelectedSubTab(tab);
|
|
19
19
|
}
|
|
20
|
-
tab.
|
|
20
|
+
onChange?.(tab.id);
|
|
21
21
|
};
|
|
22
22
|
// #########
|
|
23
23
|
// Wathchers
|
|
@@ -60,9 +60,8 @@ export const TsTabs = ({ value, tabs }) => {
|
|
|
60
60
|
${tab.id === selectedTab.id ? 'ts-tabs-item--selected' : ''}
|
|
61
61
|
${tab.disabled ? 'ts-tabs-item--disabled' : ''}
|
|
62
62
|
`, onClick: e => !tab.disabled && handleSelectTab(e, tab, 'main') },
|
|
63
|
-
tab.icon && (React.createElement("div", { className: "ts-tabs-item--icon" },
|
|
64
|
-
React.createElement(TsIcon, { name: tab.icon }))),
|
|
65
63
|
React.createElement("div", { className: "ts-tabs-item--label" }, tab.label),
|
|
64
|
+
tab.icon && React.createElement("div", { className: "ts-tabs-item--icon" }, tab.icon),
|
|
66
65
|
tab.id === selectedTab.id && React.createElement("div", { className: "ts-tabs-item--selected-pin" }),
|
|
67
66
|
tab.id === selectedTab.id &&
|
|
68
67
|
tab.subTabs?.map(subTab => (React.createElement("div", { key: subTab.id, className: "ts-tabs-sub-item", onClick: e => !subTab.disabled && handleSelectTab(e, subTab, 'sub') },
|
|
@@ -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,EAA4B,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAe,EAAE,EAAE;
|
|
1
|
+
{"version":3,"file":"TsTabs.js","sourceRoot":"","sources":["../../../src/components/TsTabs/TsTabs.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
2
|
export type TabItem = {
|
|
3
|
-
icon?:
|
|
3
|
+
icon?: ReactElement;
|
|
4
4
|
id: string;
|
|
5
5
|
label: string;
|
|
6
6
|
disabled?: boolean;
|
|
7
7
|
element?: ReactElement;
|
|
8
8
|
subTabs?: TabItem[];
|
|
9
9
|
actions?: ReactElement;
|
|
10
|
-
onClick?: () => void;
|
|
11
10
|
};
|
|
12
11
|
export type TsTabsProps = {
|
|
13
12
|
value?: string;
|
|
13
|
+
onChange?: (tabId: string) => void;
|
|
14
14
|
tabs: TabItem[];
|
|
15
15
|
};
|
|
@@ -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: ({ value, tabs }: TsTabsProps) => React.JSX.Element;
|
|
4
|
+
export declare const TsTabs: ({ value, onChange, tabs }: TsTabsProps) => React.JSX.Element;
|
|
@@ -5,7 +5,7 @@ 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 = ({ value, tabs }) => {
|
|
8
|
+
const TsTabs = ({ value, onChange, tabs }) => {
|
|
9
9
|
const [selectedTab, setSelectedTab] = (0, react_1.useState)(tabs.find(t => t.id === value) ?? tabs[0]);
|
|
10
10
|
const [selectedSubTab, setSelectedSubTab] = (0, react_1.useState)();
|
|
11
11
|
const [renderedElement, setRenderedElement] = (0, react_1.useState)();
|
|
@@ -20,7 +20,7 @@ const TsTabs = ({ value, tabs }) => {
|
|
|
20
20
|
else if (type === 'sub') {
|
|
21
21
|
setSelectedSubTab(tab);
|
|
22
22
|
}
|
|
23
|
-
tab.
|
|
23
|
+
onChange?.(tab.id);
|
|
24
24
|
};
|
|
25
25
|
// #########
|
|
26
26
|
// Wathchers
|
|
@@ -63,9 +63,8 @@ const TsTabs = ({ value, tabs }) => {
|
|
|
63
63
|
${tab.id === selectedTab.id ? 'ts-tabs-item--selected' : ''}
|
|
64
64
|
${tab.disabled ? 'ts-tabs-item--disabled' : ''}
|
|
65
65
|
`, onClick: e => !tab.disabled && handleSelectTab(e, tab, 'main') },
|
|
66
|
-
tab.icon && (React.createElement("div", { className: "ts-tabs-item--icon" },
|
|
67
|
-
React.createElement(TsIcon_1.TsIcon, { name: tab.icon }))),
|
|
68
66
|
React.createElement("div", { className: "ts-tabs-item--label" }, tab.label),
|
|
67
|
+
tab.icon && React.createElement("div", { className: "ts-tabs-item--icon" }, tab.icon),
|
|
69
68
|
tab.id === selectedTab.id && React.createElement("div", { className: "ts-tabs-item--selected-pin" }),
|
|
70
69
|
tab.id === selectedTab.id &&
|
|
71
70
|
tab.subTabs?.map(subTab => (React.createElement("div", { key: subTab.id, className: "ts-tabs-sub-item", onClick: e => !subTab.disabled && handleSelectTab(e, subTab, 'sub') },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TsTabs.js","sourceRoot":"","sources":["../../../src/components/TsTabs/TsTabs.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAsE;AACtE,6CAA0C;AAE1C,wBAAsB;AAEf,MAAM,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAe,EAAE,EAAE;
|
|
1
|
+
{"version":3,"file":"TsTabs.js","sourceRoot":"","sources":["../../../src/components/TsTabs/TsTabs.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
2
|
export type TabItem = {
|
|
3
|
-
icon?:
|
|
3
|
+
icon?: ReactElement;
|
|
4
4
|
id: string;
|
|
5
5
|
label: string;
|
|
6
6
|
disabled?: boolean;
|
|
7
7
|
element?: ReactElement;
|
|
8
8
|
subTabs?: TabItem[];
|
|
9
9
|
actions?: ReactElement;
|
|
10
|
-
onClick?: () => void;
|
|
11
10
|
};
|
|
12
11
|
export type TsTabsProps = {
|
|
13
12
|
value?: string;
|
|
13
|
+
onChange?: (tabId: string) => void;
|
|
14
14
|
tabs: TabItem[];
|
|
15
15
|
};
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@ import { TsIcon } from '../TsIcon/TsIcon';
|
|
|
4
4
|
import { TabItem, TsTabsProps } from './TsTabs.types';
|
|
5
5
|
import './TsTabs.css';
|
|
6
6
|
|
|
7
|
-
export const TsTabs = ({ value, tabs }: TsTabsProps) => {
|
|
7
|
+
export const TsTabs = ({ value, onChange, tabs }: TsTabsProps) => {
|
|
8
8
|
const [selectedTab, setSelectedTab] = useState<TabItem>(tabs.find(t => t.id === value) ?? tabs[0]);
|
|
9
9
|
const [selectedSubTab, setSelectedSubTab] = useState<TabItem>();
|
|
10
10
|
const [renderedElement, setRenderedElement] = useState<ReactElement>();
|
|
@@ -21,7 +21,7 @@ export const TsTabs = ({ value, tabs }: TsTabsProps) => {
|
|
|
21
21
|
setSelectedSubTab(tab);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
tab.
|
|
24
|
+
onChange?.(tab.id);
|
|
25
25
|
};
|
|
26
26
|
|
|
27
27
|
// #########
|
|
@@ -67,12 +67,8 @@ export const TsTabs = ({ value, tabs }: TsTabsProps) => {
|
|
|
67
67
|
`}
|
|
68
68
|
onClick={e => !tab.disabled && handleSelectTab(e, tab, 'main')}
|
|
69
69
|
>
|
|
70
|
-
{tab.icon && (
|
|
71
|
-
<div className="ts-tabs-item--icon">
|
|
72
|
-
<TsIcon name={tab.icon} />
|
|
73
|
-
</div>
|
|
74
|
-
)}
|
|
75
70
|
<div className="ts-tabs-item--label">{tab.label}</div>
|
|
71
|
+
{tab.icon && <div className="ts-tabs-item--icon">{tab.icon}</div>}
|
|
76
72
|
{tab.id === selectedTab.id && <div className="ts-tabs-item--selected-pin" />}
|
|
77
73
|
|
|
78
74
|
{tab.id === selectedTab.id &&
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
2
|
|
|
3
3
|
export type TabItem = {
|
|
4
|
-
icon?:
|
|
4
|
+
icon?: ReactElement;
|
|
5
5
|
id: string;
|
|
6
6
|
label: string;
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
element?: ReactElement;
|
|
9
9
|
subTabs?: TabItem[];
|
|
10
10
|
actions?: ReactElement;
|
|
11
|
-
onClick?: () => void;
|
|
12
11
|
};
|
|
13
|
-
export type TsTabsProps = { value?: string; tabs: TabItem[] };
|
|
12
|
+
export type TsTabsProps = { value?: string; onChange?: (tabId: string) => void; tabs: TabItem[] };
|