superdesk-ui-framework 3.0.24 → 3.0.27
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/app/styles/form-elements/_checkbox.scss +8 -6
- package/app-typescript/components/TabCustom.tsx +32 -21
- package/dist/examples.bundle.js +5 -11
- package/dist/superdesk-ui.bundle.css +4 -0
- package/dist/superdesk-ui.bundle.js +4 -10
- package/package.json +1 -1
- package/react/components/TabCustom.d.ts +2 -1
- package/react/components/TabCustom.js +4 -10
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// CHECKBOX & RADIO BUTTONS : form-elements/checkbox.scss
|
|
2
2
|
// --------------
|
|
3
3
|
|
|
4
|
-
// Custom checkox & Radio buttons
|
|
4
|
+
// Custom checkox & Radio buttons
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
$checkBoxBorderColor: var(--color-checkbox-border);
|
|
@@ -149,7 +149,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
|
|
|
149
149
|
color: $white;
|
|
150
150
|
}
|
|
151
151
|
}
|
|
152
|
-
.sd-label--disabled {
|
|
152
|
+
.sd-label--disabled {
|
|
153
153
|
opacity: 1 !important;
|
|
154
154
|
cursor: not-allowed !important;
|
|
155
155
|
}
|
|
@@ -186,7 +186,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
|
|
|
186
186
|
margin-inline-start: 0.8rem;
|
|
187
187
|
}
|
|
188
188
|
}
|
|
189
|
-
.sd-label--disabled {
|
|
189
|
+
.sd-label--disabled {
|
|
190
190
|
opacity: 0.40;
|
|
191
191
|
}
|
|
192
192
|
}
|
|
@@ -371,7 +371,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
|
|
|
371
371
|
box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
|
|
372
372
|
}
|
|
373
373
|
}
|
|
374
|
-
.sd-label--disabled {
|
|
374
|
+
.sd-label--disabled {
|
|
375
375
|
opacity: 1 !important;
|
|
376
376
|
cursor: not-allowed !important;
|
|
377
377
|
}
|
|
@@ -381,6 +381,8 @@ $checkButtonBorderRadius: $border-radius__base--small;
|
|
|
381
381
|
.sd-check-button__group {
|
|
382
382
|
display: flex;
|
|
383
383
|
flex-direction: row;
|
|
384
|
+
flex-grow: 1;
|
|
385
|
+
flex-wrap: wrap;
|
|
384
386
|
align-items: center;
|
|
385
387
|
gap: $sd-base-increment * 1;
|
|
386
388
|
flex: 0;
|
|
@@ -435,7 +437,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
|
|
|
435
437
|
.sd-radio-new + label:empty {
|
|
436
438
|
margin: 0 !important;
|
|
437
439
|
}
|
|
438
|
-
.sd-label--disabled {
|
|
440
|
+
.sd-label--disabled {
|
|
439
441
|
opacity: 0.40;
|
|
440
442
|
}
|
|
441
443
|
&[label-position="left"], &[label-position="start"] {
|
|
@@ -609,7 +611,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
|
|
|
609
611
|
box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, 0.2), 0 0 0 3px $sd-colour--focus-shadow;
|
|
610
612
|
}
|
|
611
613
|
}
|
|
612
|
-
|
|
614
|
+
|
|
613
615
|
}
|
|
614
616
|
}
|
|
615
617
|
|
|
@@ -6,6 +6,7 @@ interface ITabs {
|
|
|
6
6
|
ariaLabel?: string;
|
|
7
7
|
children: Array<any>;
|
|
8
8
|
onClick(i: number): void;
|
|
9
|
+
initiallySelectedIndex?: number;
|
|
9
10
|
}
|
|
10
11
|
|
|
11
12
|
interface ITabLabel {
|
|
@@ -24,14 +25,14 @@ interface ITabPanel {
|
|
|
24
25
|
children: any;
|
|
25
26
|
}
|
|
26
27
|
|
|
27
|
-
export const TabLabel = ({
|
|
28
|
+
export const TabLabel = ({label}: ITabLabel) => {
|
|
28
29
|
return (
|
|
29
30
|
<span>{label}</span>
|
|
30
31
|
);
|
|
31
32
|
};
|
|
32
33
|
|
|
33
|
-
export const Tabs = ({ size, theme, ariaLabel, children, onClick
|
|
34
|
-
const [index, setIndex] = React.useState(0);
|
|
34
|
+
export const Tabs = ({initiallySelectedIndex, size, theme, ariaLabel, children, onClick}: ITabs) => {
|
|
35
|
+
const [index, setIndex] = React.useState(initiallySelectedIndex ?? 0);
|
|
35
36
|
|
|
36
37
|
function handleSelected(i: number) {
|
|
37
38
|
setIndex(i);
|
|
@@ -46,37 +47,47 @@ export const Tabs = ({ size, theme, ariaLabel, children, onClick }: ITabs) => {
|
|
|
46
47
|
[`sd-nav-tabs--${size}`]: size && size !== undefined,
|
|
47
48
|
'sd-nav-tabs--ui-dark': theme === 'dark',
|
|
48
49
|
});
|
|
50
|
+
|
|
49
51
|
return (
|
|
50
52
|
<div className={classes} role='tablist' aria-label={ariaLabel ? ariaLabel : 'tabs'}>
|
|
51
|
-
{
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
53
|
+
{
|
|
54
|
+
children.map((item, i) => (
|
|
55
|
+
<button
|
|
56
|
+
key={i}
|
|
57
|
+
aria-controls={'tabpanel-' + i}
|
|
58
|
+
className={'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : '')}
|
|
59
|
+
onClick={() => handleSelected(i)}
|
|
60
|
+
role='tab'
|
|
61
|
+
aria-selected={index === i ? 'true' : 'false'}
|
|
62
|
+
>
|
|
63
|
+
{item}
|
|
64
|
+
</button>
|
|
65
|
+
))
|
|
61
66
|
}
|
|
62
67
|
</div>
|
|
63
68
|
);
|
|
64
69
|
};
|
|
65
70
|
|
|
66
|
-
export const TabContent = ({
|
|
71
|
+
export const TabContent = ({theme, children, activePanel}: ITabContent) => {
|
|
67
72
|
return (
|
|
68
|
-
<div className={'sd-nav-tabs__content' +
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
+
<div className={'sd-nav-tabs__content' + (theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '')}>
|
|
74
|
+
{
|
|
75
|
+
children.map((panel: any, i: number) => panel.props.indexValue === activePanel && (
|
|
76
|
+
<div
|
|
77
|
+
className='sd-nav-tabs__pane'
|
|
78
|
+
role='tabpanel'
|
|
79
|
+
aria-labelledby={'tab-' + activePanel}
|
|
80
|
+
key={i}
|
|
81
|
+
>
|
|
73
82
|
{panel}
|
|
74
|
-
</div>
|
|
83
|
+
</div>
|
|
84
|
+
))
|
|
85
|
+
}
|
|
75
86
|
</div>
|
|
76
87
|
);
|
|
77
88
|
};
|
|
78
89
|
|
|
79
|
-
export const TabPanel = ({
|
|
90
|
+
export const TabPanel = ({children, indexValue}: ITabPanel) => {
|
|
80
91
|
return (
|
|
81
92
|
<React.Fragment key={indexValue}>
|
|
82
93
|
{children}
|
package/dist/examples.bundle.js
CHANGED
|
@@ -80246,8 +80246,8 @@ var TabLabel = function (_a) {
|
|
|
80246
80246
|
exports.TabLabel = TabLabel;
|
|
80247
80247
|
var Tabs = function (_a) {
|
|
80248
80248
|
var _b;
|
|
80249
|
-
var size = _a.size, theme = _a.theme, ariaLabel = _a.ariaLabel, children = _a.children, onClick = _a.onClick;
|
|
80250
|
-
var _c = React.useState(0), index = _c[0], setIndex = _c[1];
|
|
80249
|
+
var initiallySelectedIndex = _a.initiallySelectedIndex, size = _a.size, theme = _a.theme, ariaLabel = _a.ariaLabel, children = _a.children, onClick = _a.onClick;
|
|
80250
|
+
var _c = React.useState(initiallySelectedIndex !== null && initiallySelectedIndex !== void 0 ? initiallySelectedIndex : 0), index = _c[0], setIndex = _c[1];
|
|
80251
80251
|
function handleSelected(i) {
|
|
80252
80252
|
setIndex(i);
|
|
80253
80253
|
handleClick(i);
|
|
@@ -80259,18 +80259,12 @@ var Tabs = function (_a) {
|
|
|
80259
80259
|
_b["sd-nav-tabs--".concat(size)] = size && size !== undefined,
|
|
80260
80260
|
_b['sd-nav-tabs--ui-dark'] = theme === 'dark',
|
|
80261
80261
|
_b));
|
|
80262
|
-
return (React.createElement("div", { className: classes, role: 'tablist', "aria-label": ariaLabel ? ariaLabel : 'tabs' }, children.map(function (item, i) {
|
|
80263
|
-
return React.createElement("button", { key: i, "aria-controls": 'tabpanel-' + i, className: 'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : ''), onClick: function () { return handleSelected(i); }, role: 'tab', "aria-selected": index === i ? 'true' : 'false' }, item);
|
|
80264
|
-
})));
|
|
80262
|
+
return (React.createElement("div", { className: classes, role: 'tablist', "aria-label": ariaLabel ? ariaLabel : 'tabs' }, children.map(function (item, i) { return (React.createElement("button", { key: i, "aria-controls": 'tabpanel-' + i, className: 'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : ''), onClick: function () { return handleSelected(i); }, role: 'tab', "aria-selected": index === i ? 'true' : 'false' }, item)); })));
|
|
80265
80263
|
};
|
|
80266
80264
|
exports.Tabs = Tabs;
|
|
80267
80265
|
var TabContent = function (_a) {
|
|
80268
80266
|
var theme = _a.theme, children = _a.children, activePanel = _a.activePanel;
|
|
80269
|
-
return (React.createElement("div", { className: 'sd-nav-tabs__content' +
|
|
80270
|
-
(theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '') }, children.map(function (panel, i) {
|
|
80271
|
-
return panel.props.indexValue === activePanel ?
|
|
80272
|
-
React.createElement("div", { className: 'sd-nav-tabs__pane', role: 'tabpanel', "aria-labelledby": 'tab-' + activePanel, key: i }, panel) : null;
|
|
80273
|
-
})));
|
|
80267
|
+
return (React.createElement("div", { className: 'sd-nav-tabs__content' + (theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '') }, children.map(function (panel, i) { return panel.props.indexValue === activePanel && (React.createElement("div", { className: 'sd-nav-tabs__pane', role: 'tabpanel', "aria-labelledby": 'tab-' + activePanel, key: i }, panel)); })));
|
|
80274
80268
|
};
|
|
80275
80269
|
exports.TabContent = TabContent;
|
|
80276
80270
|
var TabPanel = function (_a) {
|
|
@@ -142954,7 +142948,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
|
|
|
142954
142948
|
/* 681 */
|
|
142955
142949
|
/***/ (function(module, exports) {
|
|
142956
142950
|
|
|
142957
|
-
module.exports = {"name":"superdesk-ui-framework","version":"3.0.
|
|
142951
|
+
module.exports = {"name":"superdesk-ui-framework","version":"3.0.27","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-10","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
|
|
142958
142952
|
|
|
142959
142953
|
/***/ }),
|
|
142960
142954
|
/* 682 */
|
|
@@ -49591,6 +49591,8 @@ textarea.sd-media-carousel__media-title {
|
|
|
49591
49591
|
.sd-check-button__group {
|
|
49592
49592
|
display: flex;
|
|
49593
49593
|
flex-direction: row;
|
|
49594
|
+
flex-grow: 1;
|
|
49595
|
+
flex-wrap: wrap;
|
|
49594
49596
|
align-items: center;
|
|
49595
49597
|
gap: 0.8rem;
|
|
49596
49598
|
flex: 0; }
|
|
@@ -62259,6 +62261,8 @@ i.sd-sidetab-menu__helper-icon {
|
|
|
62259
62261
|
.sd-check-button__group {
|
|
62260
62262
|
display: flex;
|
|
62261
62263
|
flex-direction: row;
|
|
62264
|
+
flex-grow: 1;
|
|
62265
|
+
flex-wrap: wrap;
|
|
62262
62266
|
align-items: center;
|
|
62263
62267
|
gap: 0.8rem;
|
|
62264
62268
|
flex: 0; }
|
|
@@ -79507,8 +79507,8 @@ var TabLabel = function (_a) {
|
|
|
79507
79507
|
exports.TabLabel = TabLabel;
|
|
79508
79508
|
var Tabs = function (_a) {
|
|
79509
79509
|
var _b;
|
|
79510
|
-
var size = _a.size, theme = _a.theme, ariaLabel = _a.ariaLabel, children = _a.children, onClick = _a.onClick;
|
|
79511
|
-
var _c = React.useState(0), index = _c[0], setIndex = _c[1];
|
|
79510
|
+
var initiallySelectedIndex = _a.initiallySelectedIndex, size = _a.size, theme = _a.theme, ariaLabel = _a.ariaLabel, children = _a.children, onClick = _a.onClick;
|
|
79511
|
+
var _c = React.useState(initiallySelectedIndex !== null && initiallySelectedIndex !== void 0 ? initiallySelectedIndex : 0), index = _c[0], setIndex = _c[1];
|
|
79512
79512
|
function handleSelected(i) {
|
|
79513
79513
|
setIndex(i);
|
|
79514
79514
|
handleClick(i);
|
|
@@ -79520,18 +79520,12 @@ var Tabs = function (_a) {
|
|
|
79520
79520
|
_b["sd-nav-tabs--".concat(size)] = size && size !== undefined,
|
|
79521
79521
|
_b['sd-nav-tabs--ui-dark'] = theme === 'dark',
|
|
79522
79522
|
_b));
|
|
79523
|
-
return (React.createElement("div", { className: classes, role: 'tablist', "aria-label": ariaLabel ? ariaLabel : 'tabs' }, children.map(function (item, i) {
|
|
79524
|
-
return React.createElement("button", { key: i, "aria-controls": 'tabpanel-' + i, className: 'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : ''), onClick: function () { return handleSelected(i); }, role: 'tab', "aria-selected": index === i ? 'true' : 'false' }, item);
|
|
79525
|
-
})));
|
|
79523
|
+
return (React.createElement("div", { className: classes, role: 'tablist', "aria-label": ariaLabel ? ariaLabel : 'tabs' }, children.map(function (item, i) { return (React.createElement("button", { key: i, "aria-controls": 'tabpanel-' + i, className: 'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : ''), onClick: function () { return handleSelected(i); }, role: 'tab', "aria-selected": index === i ? 'true' : 'false' }, item)); })));
|
|
79526
79524
|
};
|
|
79527
79525
|
exports.Tabs = Tabs;
|
|
79528
79526
|
var TabContent = function (_a) {
|
|
79529
79527
|
var theme = _a.theme, children = _a.children, activePanel = _a.activePanel;
|
|
79530
|
-
return (React.createElement("div", { className: 'sd-nav-tabs__content' +
|
|
79531
|
-
(theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '') }, children.map(function (panel, i) {
|
|
79532
|
-
return panel.props.indexValue === activePanel ?
|
|
79533
|
-
React.createElement("div", { className: 'sd-nav-tabs__pane', role: 'tabpanel', "aria-labelledby": 'tab-' + activePanel, key: i }, panel) : null;
|
|
79534
|
-
})));
|
|
79528
|
+
return (React.createElement("div", { className: 'sd-nav-tabs__content' + (theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '') }, children.map(function (panel, i) { return panel.props.indexValue === activePanel && (React.createElement("div", { className: 'sd-nav-tabs__pane', role: 'tabpanel', "aria-labelledby": 'tab-' + activePanel, key: i }, panel)); })));
|
|
79535
79529
|
};
|
|
79536
79530
|
exports.TabContent = TabContent;
|
|
79537
79531
|
var TabPanel = function (_a) {
|
package/package.json
CHANGED
|
@@ -4,6 +4,7 @@ interface ITabs {
|
|
|
4
4
|
ariaLabel?: string;
|
|
5
5
|
children: Array<any>;
|
|
6
6
|
onClick(i: number): void;
|
|
7
|
+
initiallySelectedIndex?: number;
|
|
7
8
|
}
|
|
8
9
|
interface ITabLabel {
|
|
9
10
|
label: string;
|
|
@@ -19,7 +20,7 @@ interface ITabPanel {
|
|
|
19
20
|
children: any;
|
|
20
21
|
}
|
|
21
22
|
export declare const TabLabel: ({ label }: ITabLabel) => JSX.Element;
|
|
22
|
-
export declare const Tabs: ({ size, theme, ariaLabel, children, onClick }: ITabs) => JSX.Element;
|
|
23
|
+
export declare const Tabs: ({ initiallySelectedIndex, size, theme, ariaLabel, children, onClick }: ITabs) => JSX.Element;
|
|
23
24
|
export declare const TabContent: ({ theme, children, activePanel }: ITabContent) => JSX.Element;
|
|
24
25
|
export declare const TabPanel: ({ children, indexValue }: ITabPanel) => JSX.Element;
|
|
25
26
|
export {};
|
|
@@ -36,8 +36,8 @@ var TabLabel = function (_a) {
|
|
|
36
36
|
exports.TabLabel = TabLabel;
|
|
37
37
|
var Tabs = function (_a) {
|
|
38
38
|
var _b;
|
|
39
|
-
var size = _a.size, theme = _a.theme, ariaLabel = _a.ariaLabel, children = _a.children, onClick = _a.onClick;
|
|
40
|
-
var _c = React.useState(0), index = _c[0], setIndex = _c[1];
|
|
39
|
+
var initiallySelectedIndex = _a.initiallySelectedIndex, size = _a.size, theme = _a.theme, ariaLabel = _a.ariaLabel, children = _a.children, onClick = _a.onClick;
|
|
40
|
+
var _c = React.useState(initiallySelectedIndex !== null && initiallySelectedIndex !== void 0 ? initiallySelectedIndex : 0), index = _c[0], setIndex = _c[1];
|
|
41
41
|
function handleSelected(i) {
|
|
42
42
|
setIndex(i);
|
|
43
43
|
handleClick(i);
|
|
@@ -49,18 +49,12 @@ var Tabs = function (_a) {
|
|
|
49
49
|
_b["sd-nav-tabs--".concat(size)] = size && size !== undefined,
|
|
50
50
|
_b['sd-nav-tabs--ui-dark'] = theme === 'dark',
|
|
51
51
|
_b));
|
|
52
|
-
return (React.createElement("div", { className: classes, role: 'tablist', "aria-label": ariaLabel ? ariaLabel : 'tabs' }, children.map(function (item, i) {
|
|
53
|
-
return React.createElement("button", { key: i, "aria-controls": 'tabpanel-' + i, className: 'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : ''), onClick: function () { return handleSelected(i); }, role: 'tab', "aria-selected": index === i ? 'true' : 'false' }, item);
|
|
54
|
-
})));
|
|
52
|
+
return (React.createElement("div", { className: classes, role: 'tablist', "aria-label": ariaLabel ? ariaLabel : 'tabs' }, children.map(function (item, i) { return (React.createElement("button", { key: i, "aria-controls": 'tabpanel-' + i, className: 'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : ''), onClick: function () { return handleSelected(i); }, role: 'tab', "aria-selected": index === i ? 'true' : 'false' }, item)); })));
|
|
55
53
|
};
|
|
56
54
|
exports.Tabs = Tabs;
|
|
57
55
|
var TabContent = function (_a) {
|
|
58
56
|
var theme = _a.theme, children = _a.children, activePanel = _a.activePanel;
|
|
59
|
-
return (React.createElement("div", { className: 'sd-nav-tabs__content' +
|
|
60
|
-
(theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '') }, children.map(function (panel, i) {
|
|
61
|
-
return panel.props.indexValue === activePanel ?
|
|
62
|
-
React.createElement("div", { className: 'sd-nav-tabs__pane', role: 'tabpanel', "aria-labelledby": 'tab-' + activePanel, key: i }, panel) : null;
|
|
63
|
-
})));
|
|
57
|
+
return (React.createElement("div", { className: 'sd-nav-tabs__content' + (theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '') }, children.map(function (panel, i) { return panel.props.indexValue === activePanel && (React.createElement("div", { className: 'sd-nav-tabs__pane', role: 'tabpanel', "aria-labelledby": 'tab-' + activePanel, key: i }, panel)); })));
|
|
64
58
|
};
|
|
65
59
|
exports.TabContent = TabContent;
|
|
66
60
|
var TabPanel = function (_a) {
|