@trilogy-ds/react 4.0.0 → 4.0.1-beta-1
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/lib/components/badge/Badge.d.ts +2 -2
- package/lib/components/badge/Badge.js +2 -2
- package/lib/components/badge/Badge.native.d.ts +10 -3
- package/lib/components/badge/Badge.native.js +78 -8
- package/lib/components/button/Button.d.ts +2 -2
- package/lib/components/button/Button.js +17 -16
- package/lib/components/card/Card.d.ts +0 -1
- package/lib/components/card/Card.js +1 -2
- package/lib/components/card/Card.native.d.ts +0 -1
- package/lib/components/card/Card.native.js +1 -2
- package/lib/components/enumsComponentsName.d.ts +2 -0
- package/lib/components/enumsComponentsName.js +3 -1
- package/lib/components/icon/Icon.native.d.ts +2 -2
- package/lib/components/icon/Icon.native.js +19 -11
- package/lib/components/input/Input.native.js +21 -23
- package/lib/components/modal/Modal.js +47 -46
- package/lib/components/modal/Modal.native.d.ts +2 -2
- package/lib/components/modal/Modal.native.js +8 -13
- package/lib/components/modal/ModalProps.d.ts +3 -3
- package/lib/components/modal/ModalPropsDefaults.js +4 -1
- package/lib/components/modal/footer/ModalFooter.js +4 -4
- package/lib/components/otp/Otp.js +6 -6
- package/lib/components/progress/Progress.native.d.ts +6 -4
- package/lib/components/progress/Progress.native.js +35 -26
- package/lib/components/progress/radial/ProgressRadial.native.d.ts +1 -1
- package/lib/components/progress/radial/ProgressRadial.native.js +3 -3
- package/lib/components/radio/Radio.d.ts +2 -2
- package/lib/components/radio/Radio.js +17 -15
- package/lib/components/radio/Radio.native.d.ts +5 -12
- package/lib/components/radio/Radio.native.js +22 -142
- package/lib/components/radio/tiles/RadioTiles.d.ts +5 -2
- package/lib/components/radio/tiles/RadioTiles.js +8 -5
- package/lib/components/radio/tiles/RadioTiles.native.d.ts +15 -0
- package/lib/components/radio/tiles/RadioTiles.native.js +35 -0
- package/lib/components/radio/tiles/tile/RadioTile.d.ts +14 -4
- package/lib/components/radio/tiles/tile/RadioTile.js +31 -20
- package/lib/components/radio/tiles/tile/RadioTile.native.d.ts +22 -0
- package/lib/components/radio/tiles/tile/RadioTile.native.js +118 -0
- package/lib/components/select/Select.native.js +9 -7
- package/lib/components/select/option/SelectOption.native.js +10 -9
- package/lib/components/tabs/Tabs.d.ts +3 -6
- package/lib/components/tabs/Tabs.js +11 -12
- package/lib/components/tabs/context/index.d.ts +7 -0
- package/lib/components/tabs/context/index.js +6 -0
- package/lib/components/tabs/tab-list/TabList.d.ts +1 -1
- package/lib/components/tabs/tab-list/TabList.js +11 -6
- package/lib/components/tabs/tab-list/tab/Tab.d.ts +2 -1
- package/lib/components/tabs/tab-list/tab/Tab.js +25 -33
- package/lib/components/tabs/tab-panels/TabPanels.d.ts +1 -1
- package/lib/components/tabs/tab-panels/TabPanels.js +10 -5
- package/lib/components/tabs/tab-panels/tab-panel/TabPanel.d.ts +1 -1
- package/lib/components/tabs/tab-panels/tab-panel/TabPanel.js +9 -5
- package/lib/components/text/Text.d.ts +0 -1
- package/lib/components/text/Text.js +1 -2
- package/lib/components/text/Text.native.d.ts +0 -1
- package/lib/components/text/Text.native.js +1 -2
- package/lib/components/textarea/Textarea.native.js +3 -3
- package/lib/components/timeline/content/TimelineContent.native.d.ts +1 -1
- package/lib/components/timeline/content/TimelineContent.native.js +7 -7
- package/lib/components/timeline/item/TimelineItem.native.d.ts +2 -2
- package/lib/components/timeline/item/TimelineItem.native.js +3 -3
- package/lib/components/timeline/marker/TimelineMarker.native.d.ts +1 -1
- package/lib/components/timeline/marker/TimelineMarker.native.js +8 -6
- package/lib/events/OnClickEvent.d.ts +1 -1
- package/lib/objects/Typography/TypographyColor.js +9 -5
- package/lib/version.d.ts +1 -1
- package/lib/version.js +2 -2
- package/package.json +1 -1
|
@@ -1,10 +1,20 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { RadioTileProps } from '
|
|
2
|
+
import { RadioTileProps } from '../../../../components/radio/tiles/tile/RadioTileProps';
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
5
|
-
* @param
|
|
4
|
+
* radioTile Component
|
|
5
|
+
* @param checked {boolean} Checked radio
|
|
6
|
+
* @param disabled {boolean} Disabled
|
|
7
|
+
* @param readOnly {boolean} readonly radio
|
|
8
|
+
* @param id {string} Id for button, by default id is generate
|
|
9
|
+
* @param label {string} Label for radio
|
|
10
|
+
* @param description {ReactNode} Description for radio
|
|
11
|
+
* @param onChange {ChangeEvent}
|
|
12
|
+
* @param name {string} Name for radio
|
|
13
|
+
* @param value {string} Value for radio
|
|
14
|
+
* @param icon {IconName} icon for radio
|
|
15
|
+
* @param horizontal Horizontal radio
|
|
6
16
|
* - -------------------------- WEB PROPERTIES -------------------------------
|
|
7
|
-
* @param className {string} Additionnal
|
|
17
|
+
* @param className {string} Additionnal css classes (ONLY FOR WEB)
|
|
8
18
|
*/
|
|
9
19
|
declare const RadioTile: ({ checked, className, disabled, readonly, id, label, onChange, name, value, description, icon, horizontal, ...others }: RadioTileProps) => JSX.Element;
|
|
10
20
|
export default RadioTile;
|
|
@@ -1,29 +1,40 @@
|
|
|
1
|
-
import { __assign,
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import { useEffect, useState } from 'react';
|
|
4
|
-
import clsx from 'clsx';
|
|
5
|
-
import { is } from '../../../../services/classify';
|
|
6
|
-
import { hashClass } from '../../../../helpers';
|
|
7
|
-
import { useTrilogyContext } from '../../../../context';
|
|
1
|
+
import { __assign, __rest } from "tslib";
|
|
8
2
|
import { Icon, IconSize } from '../../../../components/icon';
|
|
9
|
-
import
|
|
3
|
+
import { useTrilogyContext } from '../../../../context';
|
|
4
|
+
import { hashClass } from '../../../../helpers/hashClassesHelpers';
|
|
5
|
+
import { is } from '../../../../services/classify';
|
|
6
|
+
import clsx from 'clsx';
|
|
7
|
+
import React from 'react';
|
|
10
8
|
/**
|
|
11
|
-
*
|
|
12
|
-
* @param
|
|
9
|
+
* radioTile Component
|
|
10
|
+
* @param checked {boolean} Checked radio
|
|
11
|
+
* @param disabled {boolean} Disabled
|
|
12
|
+
* @param readOnly {boolean} readonly radio
|
|
13
|
+
* @param id {string} Id for button, by default id is generate
|
|
14
|
+
* @param label {string} Label for radio
|
|
15
|
+
* @param description {ReactNode} Description for radio
|
|
16
|
+
* @param onChange {ChangeEvent}
|
|
17
|
+
* @param name {string} Name for radio
|
|
18
|
+
* @param value {string} Value for radio
|
|
19
|
+
* @param icon {IconName} icon for radio
|
|
20
|
+
* @param horizontal Horizontal radio
|
|
13
21
|
* - -------------------------- WEB PROPERTIES -------------------------------
|
|
14
|
-
* @param className {string} Additionnal
|
|
22
|
+
* @param className {string} Additionnal css classes (ONLY FOR WEB)
|
|
15
23
|
*/
|
|
16
24
|
var RadioTile = function (_a) {
|
|
17
|
-
var checked = _a.checked, className = _a.className, disabled = _a.disabled, readonly = _a.readonly, _b = _a.id, id = _b === void 0 ?
|
|
25
|
+
var checked = _a.checked, className = _a.className, disabled = _a.disabled, readonly = _a.readonly, _b = _a.id, id = _b === void 0 ? React.useId() : _b, label = _a.label, onChange = _a.onChange, name = _a.name, value = _a.value, description = _a.description, icon = _a.icon, horizontal = _a.horizontal, others = __rest(_a, ["checked", "className", "disabled", "readonly", "id", "label", "onChange", "name", "value", "description", "icon", "horizontal"]);
|
|
18
26
|
var styled = useTrilogyContext().styled;
|
|
19
|
-
var _c = __read(useState(checked || false), 2), _checked = _c[0], setChecked = _c[1];
|
|
20
|
-
useEffect(function () {
|
|
21
|
-
if (!readonly) {
|
|
22
|
-
setChecked(checked || false);
|
|
23
|
-
}
|
|
24
|
-
}, [checked, readonly]);
|
|
25
27
|
return (React.createElement("div", { className: hashClass(styled, clsx('radio-tile', horizontal && is('horizontal'), className)) },
|
|
26
|
-
React.createElement("input", __assign({ type: 'radio', readOnly: readonly, id: id, disabled: disabled, name: name, value: value, checked:
|
|
28
|
+
React.createElement("input", __assign({ type: 'radio', readOnly: readonly, id: id, disabled: disabled, name: name, value: value, checked: checked, onChange: function (e) {
|
|
29
|
+
if (onChange && !disabled && !readonly) {
|
|
30
|
+
onChange({
|
|
31
|
+
radioId: e.target.id,
|
|
32
|
+
radioValue: e.target.value,
|
|
33
|
+
radioName: e.target.name,
|
|
34
|
+
radioChecked: e.target.checked,
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
} }, others)),
|
|
27
38
|
React.createElement("label", { htmlFor: id, className: hashClass(styled, clsx('radio-label')) },
|
|
28
39
|
icon && React.createElement(Icon, { name: icon, size: IconSize.MEDIUM }),
|
|
29
40
|
horizontal ? (React.createElement("span", null,
|
|
@@ -33,4 +44,4 @@ var RadioTile = function (_a) {
|
|
|
33
44
|
description && React.createElement("span", { className: hashClass(styled, clsx('radio-description')) }, description))))));
|
|
34
45
|
};
|
|
35
46
|
export default RadioTile;
|
|
36
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
47
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFkaW9UaWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vY29tcG9uZW50cy9yYWRpby90aWxlcy90aWxlL1JhZGlvVGlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFFbEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDeEMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6Qjs7Ozs7Ozs7Ozs7Ozs7O0dBZUc7QUFDSCxJQUFNLFNBQVMsR0FBRyxVQUFDLEVBY0Y7SUFiZixJQUFBLE9BQU8sYUFBQSxFQUNQLFNBQVMsZUFBQSxFQUNULFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLFVBQWtCLEVBQWxCLEVBQUUsbUJBQUcsS0FBSyxDQUFDLEtBQUssRUFBRSxLQUFBLEVBQ2xCLEtBQUssV0FBQSxFQUNMLFFBQVEsY0FBQSxFQUNSLElBQUksVUFBQSxFQUNKLEtBQUssV0FBQSxFQUNMLFdBQVcsaUJBQUEsRUFDWCxJQUFJLFVBQUEsRUFDSixVQUFVLGdCQUFBLEVBQ1AsTUFBTSxjQWJRLGlJQWNsQixDQURVO0lBRUQsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsT0FBTyxDQUNMLDZCQUFLLFNBQVMsRUFBRSxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxZQUFZLEVBQUUsVUFBVSxJQUFJLEVBQUUsQ0FBQyxZQUFZLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQztRQUM5Rix3Q0FDRSxJQUFJLEVBQUMsT0FBTyxFQUNaLFFBQVEsRUFBRSxRQUFRLEVBQ2xCLEVBQUUsRUFBRSxFQUFFLEVBQ04sUUFBUSxFQUFFLFFBQVEsRUFDbEIsSUFBSSxFQUFFLElBQUksRUFDVixLQUFLLEVBQUUsS0FBSyxFQUNaLE9BQU8sRUFBRSxPQUFPLEVBQ2hCLFFBQVEsRUFBRSxVQUFDLENBQUM7Z0JBQ1YsSUFBSSxRQUFRLElBQUksQ0FBQyxRQUFRLElBQUksQ0FBQyxRQUFRLEVBQUU7b0JBQ3RDLFFBQVEsQ0FBQzt3QkFDUCxPQUFPLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxFQUFFO3dCQUNwQixVQUFVLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxLQUFLO3dCQUMxQixTQUFTLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxJQUFJO3dCQUN4QixZQUFZLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxPQUFPO3FCQUMvQixDQUFDLENBQUE7aUJBQ0g7WUFDSCxDQUFDLElBQ0csTUFBTSxFQUNWO1FBQ0YsK0JBQU8sT0FBTyxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7WUFDbEUsSUFBSSxJQUFJLG9CQUFDLElBQUksSUFBQyxJQUFJLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxRQUFRLENBQUMsTUFBTSxHQUFJO1lBQ25ELFVBQVUsQ0FBQyxDQUFDLENBQUMsQ0FDWjtnQkFDRSw4QkFBTSxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsSUFBRyxLQUFLLENBQVE7Z0JBQ3RFLFdBQVcsSUFBSSw4QkFBTSxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsbUJBQW1CLENBQUMsQ0FBQyxJQUFHLFdBQVcsQ0FBUSxDQUM5RixDQUNSLENBQUMsQ0FBQyxDQUFDLENBQ0Y7Z0JBQ0UsOEJBQU0sU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDLElBQUcsS0FBSyxDQUFRO2dCQUN0RSxXQUFXLElBQUksOEJBQU0sU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLG1CQUFtQixDQUFDLENBQUMsSUFBRyxXQUFXLENBQVEsQ0FDbEcsQ0FDSixDQUNLLENBQ0osQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxTQUFTLENBQUEifQ==
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ComponentName } from '../../../../components/enumsComponentsName';
|
|
3
|
+
import { RadioTileProps } from '../../../../components/radio/tiles/tile/RadioTileProps';
|
|
4
|
+
/**
|
|
5
|
+
* radioTile Component
|
|
6
|
+
* @param checked {boolean} Checked radio
|
|
7
|
+
* @param disabled {boolean} Disabled
|
|
8
|
+
* @param readOnly {boolean} readonly radio
|
|
9
|
+
* @param id {string} Id for button, by default id is generate
|
|
10
|
+
* @param label {string} Label for radio
|
|
11
|
+
* @param description {ReactNode} Description for radio
|
|
12
|
+
* @param onChange {ChangeEvent}
|
|
13
|
+
* @param name {string} Name for radio
|
|
14
|
+
* @param value {string} Value for radio
|
|
15
|
+
* @param icon {IconName} icon for radio
|
|
16
|
+
* @param horizontal Horizontal radio
|
|
17
|
+
*/
|
|
18
|
+
declare const RadioTile: {
|
|
19
|
+
({ checked, disabled, id, label, onChange, name, value, description, icon, horizontal, readonly, ...others }: RadioTileProps): JSX.Element;
|
|
20
|
+
displayName: ComponentName;
|
|
21
|
+
};
|
|
22
|
+
export default RadioTile;
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import { __assign, __rest } from "tslib";
|
|
2
|
+
import { ComponentName } from '../../../../components/enumsComponentsName';
|
|
3
|
+
import { Icon, IconSize } from '../../../../components/icon';
|
|
4
|
+
import { SpacerSize } from '../../../../components/spacer';
|
|
5
|
+
import { Text, TextLevels } from '../../../../components/text';
|
|
6
|
+
import { getColorStyle, TrilogyColor } from '../../../../objects/facets/Color';
|
|
7
|
+
import { TypographyAlign, TypographyColor } from '../../../../objects/Typography';
|
|
8
|
+
import { TypographyBold } from '../../../../objects/Typography/TypographyBold';
|
|
9
|
+
import React, { useCallback, useMemo } from 'react';
|
|
10
|
+
import { StyleSheet, TouchableOpacity, View } from 'react-native';
|
|
11
|
+
/**
|
|
12
|
+
* radioTile Component
|
|
13
|
+
* @param checked {boolean} Checked radio
|
|
14
|
+
* @param disabled {boolean} Disabled
|
|
15
|
+
* @param readOnly {boolean} readonly radio
|
|
16
|
+
* @param id {string} Id for button, by default id is generate
|
|
17
|
+
* @param label {string} Label for radio
|
|
18
|
+
* @param description {ReactNode} Description for radio
|
|
19
|
+
* @param onChange {ChangeEvent}
|
|
20
|
+
* @param name {string} Name for radio
|
|
21
|
+
* @param value {string} Value for radio
|
|
22
|
+
* @param icon {IconName} icon for radio
|
|
23
|
+
* @param horizontal Horizontal radio
|
|
24
|
+
*/
|
|
25
|
+
var RadioTile = function (_a) {
|
|
26
|
+
var checked = _a.checked, disabled = _a.disabled, _b = _a.id, id = _b === void 0 ? React.useId() : _b, label = _a.label, onChange = _a.onChange, name = _a.name, value = _a.value, description = _a.description, icon = _a.icon, horizontal = _a.horizontal, readonly = _a.readonly, others = __rest(_a, ["checked", "disabled", "id", "label", "onChange", "name", "value", "description", "icon", "horizontal", "readonly"]);
|
|
27
|
+
var styles = useMemo(function () {
|
|
28
|
+
return StyleSheet.create({
|
|
29
|
+
container: {
|
|
30
|
+
flexDirection: horizontal ? 'row' : 'column',
|
|
31
|
+
width: horizontal ? '100%' : undefined,
|
|
32
|
+
borderWidth: checked ? 2 : 1,
|
|
33
|
+
alignItems: 'center',
|
|
34
|
+
gap: SpacerSize.TWO,
|
|
35
|
+
borderRadius: 6,
|
|
36
|
+
padding: !checked ? SpacerSize.FOUR : SpacerSize.FOUR - 1,
|
|
37
|
+
maxWidth: horizontal ? undefined : '50%',
|
|
38
|
+
backgroundColor: getColorStyle(disabled ? TrilogyColor.DISABLED_FADE : TrilogyColor.BACKGROUND),
|
|
39
|
+
borderColor: getColorStyle(disabled ? TrilogyColor.DISABLED : checked ? TrilogyColor.MAIN : TrilogyColor.NEUTRAL),
|
|
40
|
+
},
|
|
41
|
+
icon: {
|
|
42
|
+
width: 'auto',
|
|
43
|
+
},
|
|
44
|
+
content: {
|
|
45
|
+
width: 'auto',
|
|
46
|
+
gap: SpacerSize.ONE,
|
|
47
|
+
maxWidth: horizontal ? '80%' : undefined,
|
|
48
|
+
},
|
|
49
|
+
});
|
|
50
|
+
}, [horizontal, checked, disabled]);
|
|
51
|
+
var typoTitle = useMemo(function () {
|
|
52
|
+
var typos = [TypographyBold.TEXT_WEIGHT_SEMIBOLD];
|
|
53
|
+
if (!horizontal)
|
|
54
|
+
typos.push(TypographyAlign.TEXT_CENTERED);
|
|
55
|
+
if (disabled)
|
|
56
|
+
typos.push(TypographyColor.TEXT_DISABLED);
|
|
57
|
+
return typos;
|
|
58
|
+
}, [disabled, horizontal]);
|
|
59
|
+
var typoText = useMemo(function () {
|
|
60
|
+
var typos = [];
|
|
61
|
+
if (!horizontal)
|
|
62
|
+
typos.push(TypographyAlign.TEXT_CENTERED);
|
|
63
|
+
if (disabled)
|
|
64
|
+
typos.push(TypographyColor.TEXT_DISABLED);
|
|
65
|
+
return typos;
|
|
66
|
+
}, [horizontal, disabled]);
|
|
67
|
+
var handleChange = useCallback(function () {
|
|
68
|
+
if (onChange && !readonly && !disabled)
|
|
69
|
+
onChange({
|
|
70
|
+
radioValue: value || '',
|
|
71
|
+
radioName: name || '',
|
|
72
|
+
radioChecked: true,
|
|
73
|
+
radioId: id,
|
|
74
|
+
});
|
|
75
|
+
}, [value, name, id, disabled, readonly, onChange]);
|
|
76
|
+
return (React.createElement(TouchableOpacity, __assign({ disabled: disabled, style: [styles.container], onPress: handleChange }, others),
|
|
77
|
+
!horizontal && React.createElement(InputRadio, { checked: checked, disabled: disabled }),
|
|
78
|
+
icon && (React.createElement(View, { style: [styles.icon] },
|
|
79
|
+
React.createElement(Icon, { size: IconSize.SMALL, name: icon }))),
|
|
80
|
+
React.createElement(View, { style: [styles.content] },
|
|
81
|
+
label && (React.createElement(Text, { level: TextLevels.ONE, typo: typoTitle }, String(label))),
|
|
82
|
+
description && typeof description.valueOf() === 'string' ? (React.createElement(Text, { level: TextLevels.TWO, typo: typoText }, String(description))) : (description)),
|
|
83
|
+
horizontal && React.createElement(InputRadio, { checked: checked, disabled: disabled })));
|
|
84
|
+
};
|
|
85
|
+
var InputRadio = function (_a) {
|
|
86
|
+
var checked = _a.checked, disabled = _a.disabled;
|
|
87
|
+
var styles = useMemo(function () {
|
|
88
|
+
return StyleSheet.create({
|
|
89
|
+
input: {
|
|
90
|
+
marginLeft: 'auto',
|
|
91
|
+
width: 18,
|
|
92
|
+
height: 18,
|
|
93
|
+
borderWidth: 1,
|
|
94
|
+
borderRadius: 18,
|
|
95
|
+
justifyContent: 'center',
|
|
96
|
+
alignItems: 'center',
|
|
97
|
+
borderColor: getColorStyle(disabled ? TrilogyColor.DISABLED : checked ? TrilogyColor.MAIN : TrilogyColor.NEUTRAL),
|
|
98
|
+
},
|
|
99
|
+
inputRadio: {
|
|
100
|
+
width: 12,
|
|
101
|
+
height: 12,
|
|
102
|
+
borderRadius: 12,
|
|
103
|
+
backgroundColor: getColorStyle(disabled && checked
|
|
104
|
+
? TrilogyColor.DISABLED
|
|
105
|
+
: disabled && !checked
|
|
106
|
+
? TrilogyColor.DISABLED_FADE
|
|
107
|
+
: checked
|
|
108
|
+
? TrilogyColor.MAIN
|
|
109
|
+
: TrilogyColor.BACKGROUND),
|
|
110
|
+
},
|
|
111
|
+
});
|
|
112
|
+
}, [checked, disabled]);
|
|
113
|
+
return (React.createElement(View, { style: [styles.input] },
|
|
114
|
+
React.createElement(View, { style: [styles.inputRadio] })));
|
|
115
|
+
};
|
|
116
|
+
RadioTile.displayName = ComponentName.RadioTile;
|
|
117
|
+
export default RadioTile;
|
|
118
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFkaW9UaWxlLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2NvbXBvbmVudHMvcmFkaW8vdGlsZXMvdGlsZS9SYWRpb1RpbGUubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFFbEQsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBQ2hELE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDcEQsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUNwRSxPQUFPLEVBQUUsZUFBZSxFQUFFLGVBQWUsRUFBRSxNQUFNLHNCQUFzQixDQUFBO0FBQ3ZFLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQTtBQUNwRSxPQUFPLEtBQUssRUFBRSxFQUFFLFdBQVcsRUFBRSxPQUFPLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDbkQsT0FBTyxFQUFFLFVBQVUsRUFBRSxnQkFBZ0IsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFFakU7Ozs7Ozs7Ozs7Ozs7R0FhRztBQUNILElBQU0sU0FBUyxHQUFHLFVBQUMsRUFhRjtJQVpmLElBQUEsT0FBTyxhQUFBLEVBQ1AsUUFBUSxjQUFBLEVBQ1IsVUFBa0IsRUFBbEIsRUFBRSxtQkFBRyxLQUFLLENBQUMsS0FBSyxFQUFFLEtBQUEsRUFDbEIsS0FBSyxXQUFBLEVBQ0wsUUFBUSxjQUFBLEVBQ1IsSUFBSSxVQUFBLEVBQ0osS0FBSyxXQUFBLEVBQ0wsV0FBVyxpQkFBQSxFQUNYLElBQUksVUFBQSxFQUNKLFVBQVUsZ0JBQUEsRUFDVixRQUFRLGNBQUEsRUFDTCxNQUFNLGNB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
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { __assign, __read, __rest, __spreadArray } from "tslib";
|
|
2
|
-
import React, { useCallback, useEffect, useState } from 'react';
|
|
3
2
|
import { ComponentName } from '../../components/enumsComponentsName';
|
|
4
3
|
import { Input } from '../../components/input';
|
|
5
4
|
import { Modal } from '../../components/modal';
|
|
5
|
+
import React, { useCallback, useEffect, useState } from 'react';
|
|
6
|
+
import { TouchableOpacity, View } from 'react-native';
|
|
6
7
|
import SelectOption from './option';
|
|
7
8
|
/**
|
|
8
9
|
* Select Component
|
|
@@ -41,12 +42,13 @@ var Select = function (_a) {
|
|
|
41
42
|
setSelectedValues(selected);
|
|
42
43
|
}, [selected]);
|
|
43
44
|
var handleOpenCloseModal = useCallback(function () {
|
|
45
|
+
console.log('click');
|
|
44
46
|
!disabled && setDisplay(function (prev) { return !prev; });
|
|
45
47
|
}, [disabled]);
|
|
46
48
|
var isChecked = useCallback(function (value) {
|
|
47
|
-
return
|
|
49
|
+
return multiple && selectedValues && typeof selectedValues !== 'string' && typeof selectedValues !== 'number'
|
|
48
50
|
? selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(value)
|
|
49
|
-
: selectedValues === value
|
|
51
|
+
: selectedValues === value;
|
|
50
52
|
}, [multiple, selectedValues]);
|
|
51
53
|
var setNewSelectedValues = useCallback(function (_a) {
|
|
52
54
|
var isChecked = _a.isChecked, children = _a.children, label = _a.label, value = _a.value;
|
|
@@ -123,10 +125,10 @@ var Select = function (_a) {
|
|
|
123
125
|
return React.createElement(SelectOption, __assign({}, props, { key: "".concat(reactId, "_").concat(index) }));
|
|
124
126
|
});
|
|
125
127
|
}, [multiple, selectedValues, children]);
|
|
126
|
-
return (React.createElement(React.
|
|
127
|
-
|
|
128
|
-
React.createElement(
|
|
128
|
+
return (React.createElement(Modal, { active: display, onClose: handleOpenCloseModal, unClosable: true, trigger: React.createElement(TouchableOpacity, { onPress: handleOpenCloseModal },
|
|
129
|
+
React.createElement(Input, __assign({ onIconClick: handleOpenCloseModal, disabled: disabled, placeholder: label, iconNameLeft: iconName, iconNameRight: display ? 'tri-arrow-up' : 'tri-arrow-down', value: selectedNames.join(', '), defaultValue: selectedNames.join(', ') }, { editable: false, onPressIn: handleOpenCloseModal, id: id }, others))) },
|
|
130
|
+
React.createElement(View, { style: { paddingBottom: 20 } }, options)));
|
|
129
131
|
};
|
|
130
132
|
Select.displayName = ComponentName.Select;
|
|
131
133
|
export default Select;
|
|
132
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
134
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0Lm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc2VsZWN0L1NlbGVjdC5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLG9CQUFvQixDQUFBO0FBQzFDLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQTtBQUMxQyxPQUFPLEtBQUssRUFBRSxFQUFFLFdBQVcsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQy9ELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFFckQsT0FBTyxZQUFZLE1BQU0sVUFBVSxDQUFBO0FBRW5DOzs7Ozs7Ozs7Ozs7R0FZRztBQUNILElBQU0sTUFBTSxHQUFHLFVBQUMsRUFVRjtJQVRaLElBQUEsUUFBUSxjQUFBLEVBQ1IsRUFBRSxRQUFBLEVBQ0YsUUFBUSxjQUFBLEVBQ1IsS0FBSyxXQUFBLEVBQ0wsUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ0wsTUFBTSxjQVRLLHVGQVVmLENBRFU7SUFFSCxJQUFBLEtBQUEsT0FBc0MsUUFBUSxDQUFnQixRQUFRLENBQUMsSUFBQSxFQUF0RSxjQUFjLFFBQUEsRUFBRSxpQkFBaUIsUUFBcUMsQ0FBQTtJQUN2RSxJQUFBLEtBQUEsT0FBb0MsS0FBSyxDQUFDLFFBQVEsQ0FBVyxFQUFFLENBQUMsSUFBQSxFQUEvRCxhQUFhLFFBQUEsRUFBRSxnQkFBZ0IsUUFBZ0MsQ0FBQTtJQUNoRSxJQUFBLEtBQUEsT0FBd0IsUUFBUSxDQUFVLEtBQUssQ0FBQyxJQUFBLEVBQS9DLE9BQU8sUUFBQSxFQUFFLFVBQVUsUUFBNEIsQ0FBQTtJQUN0RCxJQUFN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
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { __assign, __rest } from "tslib";
|
|
2
|
-
import {
|
|
2
|
+
import { Column, Columns } from '../../../components/columns';
|
|
3
3
|
import { ComponentName } from '../../../components/enumsComponentsName';
|
|
4
4
|
import { Icon, IconSize } from '../../../components/icon';
|
|
5
5
|
import { Text } from '../../../components/text';
|
|
6
|
+
import { Alignable } from '../../../objects';
|
|
6
7
|
import { TypographyBold } from '../../../objects/Typography';
|
|
7
8
|
import { TrilogyColor, getColorStyle } from '../../../objects/facets/Color';
|
|
8
9
|
import * as React from 'react';
|
|
9
|
-
import {
|
|
10
|
+
import { StyleSheet, TouchableOpacity } from 'react-native';
|
|
10
11
|
/**
|
|
11
12
|
* Select Option Component
|
|
12
13
|
* @param value {string} Select option value
|
|
@@ -20,12 +21,12 @@ var SelectOption = function (_a) {
|
|
|
20
21
|
return StyleSheet.create({
|
|
21
22
|
container: {
|
|
22
23
|
backgroundColor: (disabled && getColorStyle(TrilogyColor.DISABLED_FADE)) || undefined,
|
|
23
|
-
width:
|
|
24
|
+
width: '100%',
|
|
24
25
|
paddingHorizontal: 16,
|
|
25
|
-
paddingVertical: 8
|
|
26
|
+
paddingVertical: checked && !iconName ? 8.5 : 10,
|
|
26
27
|
},
|
|
27
28
|
});
|
|
28
|
-
}, [disabled]);
|
|
29
|
+
}, [disabled, checked]);
|
|
29
30
|
var textColor = React.useMemo(function () {
|
|
30
31
|
switch (true) {
|
|
31
32
|
case disabled === true:
|
|
@@ -43,17 +44,17 @@ var SelectOption = function (_a) {
|
|
|
43
44
|
}
|
|
44
45
|
}, [disabled]);
|
|
45
46
|
var columnLabelSize = React.useMemo(function () {
|
|
46
|
-
return iconName ? checked && 10 || 11 : checked && 11 || 12;
|
|
47
|
+
return iconName ? (checked && 10) || 11 : (checked && 11) || 12;
|
|
47
48
|
}, [iconName, checked]);
|
|
48
49
|
return (React.createElement(TouchableOpacity, __assign({ style: [styles.container] }, others, { onPress: onClick }),
|
|
49
|
-
React.createElement(Columns, { gap: 0 },
|
|
50
|
+
React.createElement(Columns, { gap: 0, verticalAlign: Alignable.ALIGNED_CENTER },
|
|
50
51
|
iconName && (React.createElement(Column, { size: 1 },
|
|
51
52
|
React.createElement(Icon, { size: IconSize.SMALL, name: iconName, color: iconColor }))),
|
|
52
53
|
React.createElement(Column, { size: columnLabelSize },
|
|
53
|
-
React.createElement(Text, __assign({ typo: [checked && TypographyBold.TEXT_WEIGHT_SEMIBOLD] }, { style: { paddingLeft: 8, color: textColor
|
|
54
|
+
React.createElement(Text, __assign({ typo: [checked && TypographyBold.TEXT_WEIGHT_SEMIBOLD] }, { style: { paddingLeft: 8, color: textColor } }), children || label)),
|
|
54
55
|
checked && (React.createElement(Column, { size: 1 },
|
|
55
56
|
React.createElement(Icon, { size: IconSize.SMALL, name: 'tri-check', color: iconColor }))))));
|
|
56
57
|
};
|
|
57
58
|
SelectOption.displayName = ComponentName.SelectOption;
|
|
58
59
|
export default SelectOption;
|
|
59
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
60
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0T3B0aW9uLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvc2VsZWN0L29wdGlvbi9TZWxlY3RPcHRpb24ubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQUN0RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNsRCxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sc0JBQXNCLENBQUE7QUFDckQsT0FBTyxFQUFFLFlBQVksRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUNwRSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUM5QixPQUFPLEVBQUUsVUFBVSxFQUFFLGdCQUFnQixFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRzNEOzs7OztHQUtHO0FBQ0gsSUFBTSxZQUFZLEdBQUcsVUFBQyxFQUE4RTtJQUE1RSxJQUFBLFFBQVEsY0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLE9BQU8sYUFBQSxFQUFFLEtBQUssV0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFLLE1BQU0sY0FBekQsd0RBQTJELENBQUY7SUFDckUsSUFBQSxPQUFPLEdBQUssTUFBNkIsUUFBbEMsQ0FBa0M7SUFFakQsSUFBTSxNQUFNLEdBQUcsS0FBSyxDQUFDLE9BQU8sQ0FDMUI7UUFDRSxPQUFBLFVBQVUsQ0FBQyxNQUFNLENBQUM7WUFDaEIsU0FBUyxFQUFFO2dCQUNULGVBQWUsRUFBRSxDQUFDLFFBQVEsSUFBSSxhQUFhLENBQUMs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
|
|
@@ -1,16 +1,13 @@
|
|
|
1
|
+
import { TabsProps } from '../../components/tabs/TabsProps';
|
|
1
2
|
import React from 'react';
|
|
2
|
-
import { TabsProps } from './TabsProps';
|
|
3
3
|
/**
|
|
4
4
|
* Tabs Component
|
|
5
5
|
* @param children {ReactNode} Children for tabs
|
|
6
|
-
* @param onClick onClick event
|
|
7
6
|
* @param activeIndex {number} default active tab index
|
|
8
|
-
* @param disabled {boolean} Disabled tabs
|
|
9
|
-
* @param inverted {boolean} dark mode
|
|
10
7
|
* - -------------------------- WEB PROPERTIES -------------------------------
|
|
11
8
|
* @param className {string} Additionnal CSS Classes
|
|
12
9
|
* @param fullwidth {boolean} Fullwidth tabs
|
|
13
|
-
* @param
|
|
10
|
+
* @param id
|
|
14
11
|
*/
|
|
15
|
-
declare const Tabs: ({ children, className, id,
|
|
12
|
+
declare const Tabs: ({ children, className, id, activeIndex, fullwidth }: TabsProps) => React.JSX.Element;
|
|
16
13
|
export default Tabs;
|
|
@@ -1,30 +1,29 @@
|
|
|
1
|
-
import { __read
|
|
2
|
-
import
|
|
3
|
-
import React, { useEffect, useState } from 'react';
|
|
1
|
+
import { __read } from "tslib";
|
|
2
|
+
import { TabsContext } from '../../components/tabs/context';
|
|
4
3
|
import { useTrilogyContext } from '../../context/index';
|
|
5
4
|
import { hashClass } from '../../helpers/hashClassesHelpers';
|
|
6
5
|
import { is } from '../../services/classify';
|
|
6
|
+
import clsx from 'clsx';
|
|
7
|
+
import React, { useEffect, useState } from 'react';
|
|
7
8
|
/**
|
|
8
9
|
* Tabs Component
|
|
9
10
|
* @param children {ReactNode} Children for tabs
|
|
10
|
-
* @param onClick onClick event
|
|
11
11
|
* @param activeIndex {number} default active tab index
|
|
12
|
-
* @param disabled {boolean} Disabled tabs
|
|
13
|
-
* @param inverted {boolean} dark mode
|
|
14
12
|
* - -------------------------- WEB PROPERTIES -------------------------------
|
|
15
13
|
* @param className {string} Additionnal CSS Classes
|
|
16
14
|
* @param fullwidth {boolean} Fullwidth tabs
|
|
17
|
-
* @param
|
|
15
|
+
* @param id
|
|
18
16
|
*/
|
|
19
17
|
var Tabs = function (_a) {
|
|
20
|
-
var children = _a.children, className = _a.className, id = _a.id,
|
|
21
|
-
var _b = __read(useState(activeIndex || 0), 2),
|
|
18
|
+
var children = _a.children, className = _a.className, id = _a.id, activeIndex = _a.activeIndex, fullwidth = _a.fullwidth;
|
|
19
|
+
var _b = __read(useState(activeIndex || 0), 2), currentIndex = _b[0], setCurrentIndex = _b[1];
|
|
22
20
|
var styled = useTrilogyContext().styled;
|
|
23
21
|
var classes = hashClass(styled, clsx('tabs', fullwidth && is('fullwidth'), className));
|
|
24
22
|
useEffect(function () {
|
|
25
|
-
|
|
23
|
+
activeIndex !== undefined && setCurrentIndex(activeIndex);
|
|
26
24
|
}, [activeIndex]);
|
|
27
|
-
return (React.createElement(
|
|
25
|
+
return (React.createElement(TabsContext.Provider, { value: { activeIndex: currentIndex, setActiveIndex: setCurrentIndex } },
|
|
26
|
+
React.createElement("div", { id: id, className: classes, "data-tabs-context": '' }, children)));
|
|
28
27
|
};
|
|
29
28
|
export default Tabs;
|
|
30
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
29
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFicy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvdGFicy9UYWJzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQ0EsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLDJCQUEyQixDQUFBO0FBQ3ZELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGlCQUFpQixDQUFBO0FBQ25ELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDeEMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUVsRDs7Ozs7Ozs7R0FRRztBQUNILElBQU0sSUFBSSxHQUFHLFVBQUMsRUFBOEQ7UUFBNUQsUUFBUSxjQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsV0FBVyxpQkFBQSxFQUFFLFNBQVMsZUFBQTtJQUN2RCxJQUFBLEtBQUEsT0FBa0MsUUFBUSxDQUFTLFdBQVcsSUFBSSxDQUFDLENBQUMsSUFBQSxFQUFuRSxZQUFZLFFBQUEsRUFBRSxlQUFlLFFBQXNDLENBQUE7SUFDbEUsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFDdEMsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsTUFBTSxFQUFFLFNBQVMsSUFBSSxFQUFFLENBQUMsV0FBVyxDQUFDLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBQTtJQUV4RixTQUFTLENBQUM7UUFDUixXQUFXLEtBQUssU0FBUyxJQUFJLGVBQWUsQ0FBQyxXQUFXLENBQUMsQ0FBQTtJQUMzRCxDQUFDLEVBQUUsQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFBO0lBRWpCLE9BQU8sQ0FDTCxvQkFBQyxXQUFXLENBQUMsUUFBUSxJQUFDLEtBQUssRUFBRSxFQUFFLFdBQVcsRUFBRSxZQUFZLEVBQUUsY0FBYyxFQUFFLGVBQWUsRUFBRTtRQUN6Riw2QkFBSyxFQUFFLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxPQUFPLHVCQUFvQixFQUFFLElBQ2xELFFBQVEsQ0FDTCxDQUNlLENBQ3hCLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLElBQUksQ0FBQSJ9
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export var TabsContext = React.createContext({
|
|
3
|
+
activeIndex: 0,
|
|
4
|
+
setActiveIndex: function () { return 0; },
|
|
5
|
+
});
|
|
6
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3RhYnMvY29udGV4dC9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBT3pCLE1BQU0sQ0FBQyxJQUFNLFdBQVcsR0FBRyxLQUFLLENBQUMsYUFBYSxDQUFXO0lBQ3ZELFdBQVcsRUFBRSxDQUFDO0lBQ2QsY0FBYyxFQUFFLGNBQU0sT0FBQSxDQUFDLEVBQUQsQ0FBQztDQUN4QixDQUFDLENBQUEifQ==
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { __assign, __rest } from "tslib";
|
|
2
|
-
import
|
|
3
|
-
import { hashClass } from '../../../helpers';
|
|
4
|
-
import clsx from 'clsx';
|
|
2
|
+
import Tab from '../../../components/tabs/tab-list/tab/Tab';
|
|
5
3
|
import { useTrilogyContext } from '../../../context';
|
|
6
|
-
import {
|
|
4
|
+
import { hashClass } from '../../../helpers/hashClassesHelpers';
|
|
5
|
+
import { getAlignClassName } from '../../../objects/facets/Alignable';
|
|
7
6
|
import { is } from '../../../services';
|
|
7
|
+
import clsx from 'clsx';
|
|
8
|
+
import React from 'react';
|
|
8
9
|
/**
|
|
9
10
|
* Tabs Nav Component
|
|
10
11
|
* @param children {ReactChild} React Child Element
|
|
@@ -18,7 +19,11 @@ var TabList = function (_a) {
|
|
|
18
19
|
var children = _a.children, className = _a.className, id = _a.id, testId = _a.testId, align = _a.align, others = __rest(_a, ["children", "className", "id", "testId", "align"]);
|
|
19
20
|
var styled = useTrilogyContext().styled;
|
|
20
21
|
var classes = hashClass(styled, clsx('tab-list', align && is(getAlignClassName(align)), className));
|
|
21
|
-
return (React.createElement("div", __assign({ id: id, "data-testid": testId, className: classes }, others), children)
|
|
22
|
+
return (React.createElement("div", __assign({ id: id, "data-testid": testId, className: classes }, others), React.Children.map(children, function (child, index) {
|
|
23
|
+
if (!React.isValidElement(child))
|
|
24
|
+
return false;
|
|
25
|
+
return React.createElement(Tab, __assign({}, child.props, { index: index }));
|
|
26
|
+
})));
|
|
22
27
|
};
|
|
23
28
|
export default TabList;
|
|
24
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
29
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFiTGlzdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvdGFicy90YWItbGlzdC9UYWJMaXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxHQUFHLE1BQU0sb0NBQW9DLENBQUE7QUFFcEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQTtBQUM5RCxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQy9CLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFekI7Ozs7Ozs7O0dBUUc7QUFDSCxJQUFNLE9BQU8sR0FBRyxVQUFDLEVBQW1FO0lBQWpFLElBQUEsUUFBUSxjQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsTUFBTSxZQUFBLEVBQUUsS0FBSyxXQUFBLEVBQUssTUFBTSxjQUFuRCxrREFBcUQsQ0FBRjtJQUMxRCxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUN0QyxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxVQUFVLEVBQUUsS0FBSyxJQUFJLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQyxLQUFLLENBQUMsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUE7SUFFckcsT0FBTyxDQUNMLHNDQUFLLEVBQUUsRUFBRSxFQUFFLGlCQUFlLE1BQU0sRUFBRSxTQUFTLEVBQUUsT0FBTyxJQUFNLE1BQU0sR0FDN0QsS0FBSyxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsUUFBUSxFQUFFLFVBQUMsS0FBSyxFQUFFLEtBQUs7UUFDekMsSUFBSSxDQUFDLEtBQUssQ0FBQyxjQUFjLENBQUMsS0FBSyxDQUFDO1lBQUUsT0FBTyxLQUFLLENBQUE7UUFDOUMsT0FBTyxvQkFBQyxHQUFHLGVBQUssS0FBSyxDQUFDLEtBQUssSUFBRSxLQUFLLEVBQUUsS0FBSyxJQUFJLENBQUE7SUFDL0MsQ0FBQyxDQUFDLENBQ0UsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxPQUFPLENBQUEifQ==
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { TabProps } from '../../../../components/tabs/tab-list/tab/TabProps';
|
|
1
2
|
import React from 'react';
|
|
2
|
-
import { TabProps } from './TabProps';
|
|
3
3
|
/**
|
|
4
4
|
* Tabs Item Component
|
|
5
5
|
* @param active {boolean} active tab item
|
|
@@ -7,6 +7,7 @@ import { TabProps } from './TabProps';
|
|
|
7
7
|
* @param onClick onClick Event
|
|
8
8
|
* @param iconName {IconNameValues | IconName} add icon name
|
|
9
9
|
* @param disabled {boolean} disable tab item
|
|
10
|
+
* @param label {string} Tab content
|
|
10
11
|
* - -------------------------- WEB PROPERTIES -------------------------------
|
|
11
12
|
* @param className {string} Additionnal CSS Classes
|
|
12
13
|
* @param testId {string} Test Id for Test Integration
|