@trilogy-ds/react 4.0.0 → 4.0.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/autocomplete/AutoCompletePropsNativeDefaults.js +20 -4
- package/lib/components/autocomplete/AutoCompletePropsWebDefaults.js +20 -4
- 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/breadcrumb/item/BreadcrumbItemPropsWebDefaults.js +3 -3
- package/lib/components/button/Button.d.ts +2 -2
- package/lib/components/button/Button.js +17 -16
- package/lib/components/button/ButtonPropsDefaults.js +5 -5
- 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.js +2 -2
- package/lib/components/input/Input.native.js +21 -23
- package/lib/components/input/InputEnum.d.ts +2 -1
- package/lib/components/input/InputEnum.js +1 -1
- package/lib/components/input/InputPropsDefaults.js +20 -4
- package/lib/components/link/LinkPropsDefaults.js +3 -3
- 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.js +2 -2
- 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/range/Range.js +2 -2
- package/lib/components/select/Select.js +2 -2
- 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-list/tab/TabPropsDefaults.js +3 -3
- 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/components/view/ViewPropsDefaults.js +1 -1
- 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 +1 -1
- package/package.json +1 -1
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import { __assign,
|
|
2
|
-
import React, { useEffect, useState } from 'react';
|
|
3
|
-
import shortid from 'shortid';
|
|
4
|
-
import clsx from 'clsx';
|
|
5
|
-
import { hashClass } from '../../helpers';
|
|
1
|
+
import { __assign, __rest } from "tslib";
|
|
6
2
|
import { useTrilogyContext } from '../../context';
|
|
3
|
+
import { hashClass } from '../../helpers/hashClassesHelpers';
|
|
4
|
+
import clsx from 'clsx';
|
|
5
|
+
import React from 'react';
|
|
7
6
|
/**
|
|
8
7
|
* radio Component
|
|
9
8
|
* @param checked {boolean} Checked radio
|
|
@@ -13,22 +12,25 @@ import { useTrilogyContext } from '../../context';
|
|
|
13
12
|
* @param label {string} Label for radio
|
|
14
13
|
* @param onChange {ChangeEvent}
|
|
15
14
|
* @param name {string} Name for radio
|
|
16
|
-
* - -------------------------- WEB PROPERTIES -------------------------------
|
|
17
15
|
* @param value {string} Value for radio
|
|
16
|
+
* - -------------------------- WEB PROPERTIES -------------------------------
|
|
18
17
|
* @param className {string} Additionnal css classes (ONLY FOR WEB)
|
|
19
18
|
*/
|
|
20
19
|
var Radio = function (_a) {
|
|
21
|
-
var checked = _a.checked, className = _a.className, disabled = _a.disabled, readonly = _a.readonly, _b = _a.id, id = _b === void 0 ?
|
|
20
|
+
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, others = __rest(_a, ["checked", "className", "disabled", "readonly", "id", "label", "onChange", "name", "value"]);
|
|
22
21
|
var styled = useTrilogyContext().styled;
|
|
23
|
-
var _c = __read(useState(checked || false), 2), _checked = _c[0], setChecked = _c[1];
|
|
24
|
-
useEffect(function () {
|
|
25
|
-
if (!readonly) {
|
|
26
|
-
setChecked(checked || false);
|
|
27
|
-
}
|
|
28
|
-
}, [checked, readonly]);
|
|
29
22
|
return (React.createElement("div", { className: hashClass(styled, clsx('radio', className)) },
|
|
30
|
-
React.createElement("input", __assign({ type: 'radio', readOnly: readonly, id: id, disabled: disabled, name: name, value: value, checked:
|
|
23
|
+
React.createElement("input", __assign({ type: 'radio', readOnly: readonly, id: id, disabled: disabled, name: name, value: value, checked: checked, onChange: function (e) {
|
|
24
|
+
if (onChange && !disabled && !readonly) {
|
|
25
|
+
onChange({
|
|
26
|
+
radioId: e.target.id,
|
|
27
|
+
radioValue: e.target.value,
|
|
28
|
+
radioName: e.target.name,
|
|
29
|
+
radioChecked: e.target.checked,
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
} }, others)),
|
|
31
33
|
React.createElement("label", { htmlFor: id, className: hashClass(styled, clsx('radio-label')) }, label)));
|
|
32
34
|
};
|
|
33
35
|
export default Radio;
|
|
34
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
36
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFkaW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3JhZGlvL1JhZGlvLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQ0EsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRXpCOzs7Ozs7Ozs7Ozs7R0FZRztBQUNILElBQU0sS0FBSyxHQUFHLFVBQUMsRUFXRjtJQVZYLElBQUEsT0FBTyxhQUFBLEVBQ1AsU0FBUyxlQUFBLEVBQ1QsUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ1IsVUFBa0IsRUFBbEIsRUFBRSxtQkFBRyxLQUFLLENBQUMsS0FBSyxFQUFFLEtBQUEsRUFDbEIsS0FBSyxXQUFBLEVBQ0wsUUFBUSxjQUFBLEVBQ1IsSUFBSSxVQUFBLEVBQ0osS0FBSyxXQUFBLEVBQ0YsTUFBTSxjQVZJLDRGQVdkLENBRFU7SUFFRCxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxPQUFPLENBQ0wsNkJBQUssU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLE9BQU8sRUFBRSxTQUFTLENBQUMsQ0FBQztRQUN6RCx3Q0FDRSxJQUFJLEVBQUMsT0FBTyxFQUNaLFFBQVEsRUFBRSxRQUFRLEVBQ2xCLEVBQUUsRUFBRSxFQUFFLEVBQ04sUUFBUSxFQUFFLFFBQVEsRUFDbEIsSUFBSSxFQUFFLElBQUksRUFDVixLQUFLLEVBQUUsS0FBSyxFQUNaLE9BQU8sRUFBRSxPQUFPLEVBQ2hCLFFBQVEsRUFBRSxVQUFDLENBQUM7Z0JBQ1YsSUFBSSxRQUFRLElBQUksQ0FBQyxRQUFRLElBQUksQ0FBQyxRQUFRLEVBQUU7b0JBQ3RDLFFBQVEsQ0FBQzt3QkFDUCxPQUFPLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxFQUFFO3dCQUNwQixVQUFVLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxLQUFLO3dCQUMxQixTQUFTLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxJQUFJO3dCQUN4QixZQUFZLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxPQUFPO3FCQUMvQixDQUFDLENBQUE7aUJBQ0g7WUFDSCxDQUFDLElBQ0csTUFBTSxFQUNWO1FBQ0YsK0JBQU8sT0FBTyxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsSUFDbEUsS0FBSyxDQUNBLENBQ0osQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxLQUFLLENBQUEifQ==
|
|
@@ -1,23 +1,16 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { RadioProps } from './RadioProps';
|
|
3
2
|
import { ComponentName } from '../../components/enumsComponentsName';
|
|
3
|
+
import { RadioProps } from '../../components/radio/RadioProps';
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
6
|
-
* @param checked {boolean} Checked
|
|
5
|
+
* radio Component
|
|
6
|
+
* @param checked {boolean} Checked radio
|
|
7
7
|
* @param disabled {boolean} Disabled
|
|
8
|
-
* @param readOnly {boolean} readonly
|
|
8
|
+
* @param readOnly {boolean} readonly radio
|
|
9
9
|
* @param id {string} Id for button, by default id is generate
|
|
10
|
-
* @param label {string
|
|
11
|
-
* @param onClick {ClickEvent}
|
|
10
|
+
* @param label {string} Label for radio
|
|
12
11
|
* @param onChange {ChangeEvent}
|
|
13
12
|
* @param name {string} Name for radio
|
|
14
13
|
* @param value {string} Value for radio
|
|
15
|
-
* @param iconTile {IconName} Icon for Radio
|
|
16
|
-
* @param narrow {boolean} Apply narrow
|
|
17
|
-
* @param children {React.ReactNode} If Children is provided, don't use label / Icon / Description
|
|
18
|
-
* @param tile {boolean} Radio Tile
|
|
19
|
-
* @param description {string} Description for Radio tile
|
|
20
|
-
* @param horizontalTile {boolean} display horizontal Radio tile
|
|
21
14
|
*/
|
|
22
15
|
declare const Radio: {
|
|
23
16
|
({ id, checked, name, onChange, disabled, readonly, label, value, }: RadioProps): JSX.Element;
|
|
@@ -1,185 +1,65 @@
|
|
|
1
|
-
import { __read } from "tslib";
|
|
2
|
-
import React, { useEffect, useState } from 'react';
|
|
3
|
-
import { StyleSheet, TouchableOpacity } from 'react-native';
|
|
4
|
-
import shortid from 'shortid';
|
|
5
|
-
import { getColorStyle, TrilogyColor, TypographyAlign, TypographyBold } from '../../objects';
|
|
6
|
-
import { Icon, IconSize } from '../../components/icon';
|
|
7
|
-
import { Text, TextLevels } from '../../components/text';
|
|
8
|
-
import { View } from '../../components/view';
|
|
9
1
|
import { ComponentName } from '../../components/enumsComponentsName';
|
|
2
|
+
import { Text } from '../../components/text';
|
|
3
|
+
import { getColorStyle, TrilogyColor } from '../../objects';
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { StyleSheet, TouchableOpacity, View } from 'react-native';
|
|
10
6
|
/**
|
|
11
|
-
*
|
|
12
|
-
* @param checked {boolean} Checked
|
|
7
|
+
* radio Component
|
|
8
|
+
* @param checked {boolean} Checked radio
|
|
13
9
|
* @param disabled {boolean} Disabled
|
|
14
|
-
* @param readOnly {boolean} readonly
|
|
10
|
+
* @param readOnly {boolean} readonly radio
|
|
15
11
|
* @param id {string} Id for button, by default id is generate
|
|
16
|
-
* @param label {string
|
|
17
|
-
* @param onClick {ClickEvent}
|
|
12
|
+
* @param label {string} Label for radio
|
|
18
13
|
* @param onChange {ChangeEvent}
|
|
19
14
|
* @param name {string} Name for radio
|
|
20
15
|
* @param value {string} Value for radio
|
|
21
|
-
* @param iconTile {IconName} Icon for Radio
|
|
22
|
-
* @param narrow {boolean} Apply narrow
|
|
23
|
-
* @param children {React.ReactNode} If Children is provided, don't use label / Icon / Description
|
|
24
|
-
* @param tile {boolean} Radio Tile
|
|
25
|
-
* @param description {string} Description for Radio tile
|
|
26
|
-
* @param horizontalTile {boolean} display horizontal Radio tile
|
|
27
16
|
*/
|
|
28
17
|
var Radio = function (_a) {
|
|
29
|
-
var _b = _a.id, id = _b === void 0 ?
|
|
30
|
-
var _c = __read(useState(checked || false), 2), _checked = _c[0], setChecked = _c[1];
|
|
31
|
-
var horizontalTile = false;
|
|
32
|
-
// eslint-disable-next-line no-empty-pattern
|
|
33
|
-
var onClick = function (_a) { return null; };
|
|
34
|
-
var tile = false;
|
|
35
|
-
var description = 'de';
|
|
36
|
-
var iconTile = '';
|
|
37
|
-
var narrow = false;
|
|
38
|
-
var children = null;
|
|
39
|
-
var getRadioInsideColor = function (isDisabled, isMain) {
|
|
40
|
-
if (isDisabled)
|
|
41
|
-
return getColorStyle(TrilogyColor.DISABLED_FADE);
|
|
42
|
-
if (isMain)
|
|
43
|
-
return getColorStyle(TrilogyColor.MAIN);
|
|
44
|
-
return getColorStyle(TrilogyColor.NEUTRAL);
|
|
45
|
-
};
|
|
46
|
-
useEffect(function () {
|
|
47
|
-
setChecked(checked || false);
|
|
48
|
-
}, [checked]);
|
|
18
|
+
var _b = _a.id, id = _b === void 0 ? React.useId() : _b, checked = _a.checked, name = _a.name, onChange = _a.onChange, disabled = _a.disabled, readonly = _a.readonly, label = _a.label, value = _a.value;
|
|
49
19
|
var styles = StyleSheet.create({
|
|
50
20
|
container: {
|
|
51
21
|
flexDirection: 'row',
|
|
52
|
-
|
|
53
|
-
justifyContent: 'flex-start',
|
|
22
|
+
alignItems: 'center',
|
|
54
23
|
},
|
|
55
24
|
radio: {
|
|
56
|
-
flexDirection: 'row',
|
|
57
25
|
alignItems: 'center',
|
|
26
|
+
justifyContent: 'center',
|
|
58
27
|
borderColor: getColorStyle(TrilogyColor.FONT),
|
|
59
|
-
borderWidth:
|
|
60
|
-
width:
|
|
61
|
-
height:
|
|
28
|
+
borderWidth: 1,
|
|
29
|
+
width: 18,
|
|
30
|
+
height: 18,
|
|
62
31
|
borderRadius: 10,
|
|
63
32
|
marginRight: 10,
|
|
64
|
-
marginLeft: 0,
|
|
65
33
|
},
|
|
66
34
|
icon: {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
width: 14,
|
|
71
|
-
height: 14,
|
|
35
|
+
borderRadius: 12,
|
|
36
|
+
width: 12,
|
|
37
|
+
height: 12,
|
|
72
38
|
backgroundColor: getColorStyle(TrilogyColor.MAIN),
|
|
73
39
|
},
|
|
74
40
|
label: {
|
|
41
|
+
paddingTop: 2,
|
|
75
42
|
color: (disabled && getColorStyle(TrilogyColor.DISABLED)) ||
|
|
76
|
-
(
|
|
43
|
+
(checked && getColorStyle(TrilogyColor.MAIN)) ||
|
|
77
44
|
getColorStyle(TrilogyColor.MAIN),
|
|
78
45
|
},
|
|
79
|
-
tile: {
|
|
80
|
-
padding: _checked ? 3 : 4,
|
|
81
|
-
paddingBottom: _checked ? 7 : 8,
|
|
82
|
-
maxWidth: 140,
|
|
83
|
-
width: 126,
|
|
84
|
-
borderWidth: (_checked && 2) || 1,
|
|
85
|
-
borderColor: getRadioInsideColor(!!disabled, _checked),
|
|
86
|
-
borderRadius: 6,
|
|
87
|
-
textAlign: 'center',
|
|
88
|
-
alignItems: 'center',
|
|
89
|
-
backgroundColor: disabled ? getColorStyle(TrilogyColor.DISABLED_FADE) : 'transparent',
|
|
90
|
-
},
|
|
91
|
-
tileDescription: {
|
|
92
|
-
color: getRadioInsideColor(!!disabled, true),
|
|
93
|
-
alignSelf: horizontalTile ? 'flex-start' : 'center',
|
|
94
|
-
},
|
|
95
|
-
horizontalTile: {
|
|
96
|
-
paddingVertical: _checked ? 15 : 16,
|
|
97
|
-
paddingHorizontal: _checked ? 5 : 6,
|
|
98
|
-
width: narrow ? 'auto' : '100%',
|
|
99
|
-
height: 'auto',
|
|
100
|
-
borderWidth: (_checked && 2) || 1,
|
|
101
|
-
borderColor: getRadioInsideColor(!!disabled, _checked),
|
|
102
|
-
borderRadius: 6,
|
|
103
|
-
backgroundColor: disabled ? getColorStyle(TrilogyColor.DISABLED_FADE) : 'transparent',
|
|
104
|
-
},
|
|
105
46
|
});
|
|
106
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
107
47
|
var handleClick = function (value) {
|
|
108
48
|
if (!readonly) {
|
|
109
|
-
setChecked(value);
|
|
110
|
-
if (onClick) {
|
|
111
|
-
onClick({
|
|
112
|
-
radioId: id,
|
|
113
|
-
radioValue: value,
|
|
114
|
-
radioName: name || '',
|
|
115
|
-
radioChecked: !_checked,
|
|
116
|
-
});
|
|
117
|
-
}
|
|
118
49
|
if (onChange) {
|
|
119
50
|
onChange({
|
|
120
51
|
radioId: id,
|
|
121
52
|
radioValue: value,
|
|
122
53
|
radioName: name || '',
|
|
123
|
-
radioChecked:
|
|
54
|
+
radioChecked: true,
|
|
124
55
|
});
|
|
125
56
|
}
|
|
126
57
|
}
|
|
127
58
|
};
|
|
128
|
-
if (horizontalTile) {
|
|
129
|
-
return (React.createElement(TouchableOpacity, { disabled: disabled, style: styles.horizontalTile, onPress: function () { return handleClick(value || false); } },
|
|
130
|
-
React.createElement(View, { style: { flexDirection: 'row' } },
|
|
131
|
-
children ? (React.createElement(View, { style: {
|
|
132
|
-
flexDirection: 'row',
|
|
133
|
-
width: '88%',
|
|
134
|
-
height: 'auto',
|
|
135
|
-
justifyContent: 'flex-start',
|
|
136
|
-
alignItems: 'center',
|
|
137
|
-
marginLeft: 10,
|
|
138
|
-
} }, children)) : (React.createElement(React.Fragment, null,
|
|
139
|
-
React.createElement(View, { style: {
|
|
140
|
-
width: iconTile ? '12%' : '6%',
|
|
141
|
-
height: 'auto',
|
|
142
|
-
justifyContent: 'center',
|
|
143
|
-
alignItems: 'center',
|
|
144
|
-
marginLeft: 10,
|
|
145
|
-
} }, iconTile && (React.createElement(View, null,
|
|
146
|
-
React.createElement(Icon, { size: IconSize.SMALL, name: iconTile, color: disabled ? TrilogyColor.DISABLED : TrilogyColor.MAIN })))),
|
|
147
|
-
React.createElement(View, { style: {
|
|
148
|
-
width: iconTile ? '76%' : '82%',
|
|
149
|
-
flexDirection: 'row',
|
|
150
|
-
alignSelf: 'stretch',
|
|
151
|
-
flexWrap: 'wrap',
|
|
152
|
-
height: 'auto',
|
|
153
|
-
} },
|
|
154
|
-
React.createElement(View, null,
|
|
155
|
-
label && typeof label.valueOf() === 'string' && (React.createElement(Text, { style: styles.label, level: TextLevels.ONE, typo: TypographyBold.TEXT_WEIGHT_SEMIBOLD }, String(label))),
|
|
156
|
-
description && typeof description.valueOf() === 'string' ? (React.createElement(Text, { level: TextLevels.TWO, style: styles.tileDescription }, String(description))) : (description))))),
|
|
157
|
-
React.createElement(View, { style: {
|
|
158
|
-
width: '10%',
|
|
159
|
-
alignItems: 'flex-end',
|
|
160
|
-
justifyContent: 'center',
|
|
161
|
-
paddingRight: 10,
|
|
162
|
-
} },
|
|
163
|
-
React.createElement(TouchableOpacity, { style: styles.radio, disabled: disabled, testID: id, onPressIn: function () { return handleClick(value || false); } }, _checked && !disabled && React.createElement(View, { style: styles.icon }))))));
|
|
164
|
-
}
|
|
165
|
-
if (tile) {
|
|
166
|
-
return (React.createElement(TouchableOpacity, { disabled: disabled, style: styles.tile, onPress: function () { return handleClick(value || false); } },
|
|
167
|
-
React.createElement(TouchableOpacity, { style: [{ alignSelf: 'flex-end', marginTop: 10 }, styles.radio], disabled: disabled, testID: id, onPressIn: function () { return handleClick(value || false); } }, _checked && !disabled && React.createElement(View, { style: styles.icon })),
|
|
168
|
-
React.createElement(View, { style: { width: '70%', alignItems: 'center' } },
|
|
169
|
-
iconTile && (React.createElement(View, { style: {
|
|
170
|
-
flexDirection: 'row',
|
|
171
|
-
alignItems: 'center',
|
|
172
|
-
justifyContent: 'center',
|
|
173
|
-
marginBottom: 5,
|
|
174
|
-
} },
|
|
175
|
-
React.createElement(Icon, { size: IconSize.MEDIUM, name: iconTile, color: disabled ? TrilogyColor.DISABLED : TrilogyColor.MAIN }))),
|
|
176
|
-
label && typeof label.valueOf() === 'string' && (React.createElement(Text, { level: TextLevels.TWO, typo: [TypographyBold.TEXT_WEIGHT_SEMIBOLD, TypographyAlign.TEXT_CENTERED], style: styles.label }, String(label))),
|
|
177
|
-
description && typeof description.valueOf() === 'string' ? (React.createElement(Text, { level: TextLevels.THREE, typo: [TypographyBold.TEXT_WEIGHT_SEMIBOLD, TypographyAlign.TEXT_CENTERED] }, String(description))) : (description))));
|
|
178
|
-
}
|
|
179
59
|
return (React.createElement(TouchableOpacity, { disabled: disabled, style: styles.container, onPress: function () { return handleClick(value || false); } },
|
|
180
|
-
React.createElement(
|
|
60
|
+
React.createElement(View, { style: styles.radio, testID: id }, checked && React.createElement(View, { style: styles.icon })),
|
|
181
61
|
label && typeof label.valueOf() === 'string' ? React.createElement(Text, { style: styles.label }, String(label)) : label));
|
|
182
62
|
};
|
|
183
63
|
Radio.displayName = ComponentName.Radio;
|
|
184
64
|
export default Radio;
|
|
185
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
65
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFkaW8ubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9yYWRpby9SYWRpby5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDdkQsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQ3pCLE9BQU8sRUFBRSxVQUFVLEVBQUUsZ0JBQWdCLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRWpFOzs7Ozs7Ozs7O0dBVUc7QUFDSCxJQUFNLEtBQUssR0FBRyxVQUFDLEVBU0Y7UUFSWCxVQUFrQixFQUFsQixFQUFFLG1CQUFHLEtBQUssQ0FBQyxLQUFLLEVBQUUsS0FBQSxFQUNsQixPQUFPLGFBQUEsRUFDUCxJQUFJLFVBQUEsRUFDSixRQUFRLGNBQUEsRUFDUixRQUFRLGNBQUEsRUFDUixRQUFRLGNBQUEsRUFDUixLQUFLLFdBQUEsRUFDTCxLQUFLLFdBQUE7SUFFTCxJQUFNLE1BQU0sR0FBRyxVQUFVLENBQUMsTUFBTSxDQUFDO1FBQy9CLFNBQVMsRUFBRTtZQUNULGFBQWEsRUFBRSxLQUFLO1lBQ3BCLFVBQVUsRUFBRSxRQUFRO1NBQ3JCO1FBQ0QsS0FBSyxFQUFFO1lBQ0wsVUFBVSxFQUFFLFFBQVE7WUFDcEIsY0FBYyxFQUFFLFFBQVE7WUFDeEIsV0FBVyxFQUFFLGFBQWEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDO1lBQzdDLFdBQVcsRUFBRSxDQUFDO1lBQ2QsS0FBSyxFQUFFLEVBQUU7WUFDVCxNQUFNLEVBQUUsRUFBRTtZQUNWLFlBQVksRUFBRSxFQUFFO1lBQ2hCLFdBQVcsRUFBRSxFQUFFO1NBQ2hCO1FBQ0QsSUFBSSxFQUFFO1lBQ0osWUFBWSxFQUFFLEVBQUU7WUFDaEIsS0FBSyxFQUFFLEVBQUU7WUFDVCxNQUFNLEVBQUUsRUFBRTtZQUNWLGVBQWUsRUFBRSxhQUFhLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQztTQUNsRDtRQUNELEtBQUssRUFBRTtZQUNMLFVBQVUsRUFBRSxDQUFDO1lBQ2IsS0FBSyxFQUNILENBQUMsUUFBUSxJQUFJLGFBQWEsQ0FBQyxZQUFZLENBQUMsUUFBUSxDQUFDLENBQUM7Z0JBQ2xELENBQUMsT0FBTyxJQUFJLGFBQWEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLENBQUM7Z0JBQzdDLGFBQWEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDO1NBQ25DO0tBQ0YsQ0FBQyxDQUFBO0lBRUYsSUFBTSxXQUFXLEdBQUcsVUFBQyxLQUFVO1FBQzdCLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDYixJQUFJLFFBQVEsRUFBRTtnQkFDWixRQUFRLENBQUM7b0JBQ1AsT0FBTyxFQUFFLEVBQUU7b0JBQ1gsVUFBVSxFQUFFLEtBQUs7b0JBQ2pCLFNBQVMsRUFBRSxJQUFJLElBQUksRUFBRTtvQkFDckIsWUFBWSxFQUFFLElBQUk7aUJBQ25CLENBQUMsQ0FBQTthQUNIO1NBQ0Y7SUFDSCxDQUFDLENBQUE7SUFFRCxPQUFPLENBQ0wsb0JBQUMsZ0JBQWdCLElBQUMsUUFBUSxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsTUFBTSxDQUFDLFNBQVMsRUFBRSxPQUFPLEVBQUUsY0FBTSxPQUFBLFdBQVcsQ0FBQyxLQUFLLElBQUksS0FBSyxDQUFDLEVBQTNCLENBQTJCO1FBQ3ZHLG9CQUFDLElBQUksSUFBQyxLQUFLLEVBQUUsTUFBTSxDQUFDLEtBQUssRUFBRSxNQUFNLEVBQUUsRUFBRSxJQUNsQyxPQUFPLElBQUksb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBRSxNQUFNLENBQUMsSUFBSSxHQUFJLENBQ25DO1FBQ04sS0FBSyxJQUFJLE9BQU8sS0FBSyxDQUFDLE9BQU8sRUFBRSxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBRSxNQUFNLENBQUMsS0FBSyxJQUFHLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBUSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQ3hGLENBQ3BCLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxLQUFLLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxLQUFLLENBQUE7QUFFdkMsZUFBZSxLQUFLLENBQUEifQ==
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { RadioTilesProps } from '
|
|
2
|
+
import { RadioTilesProps } from '../../../components/radio/tiles/RadioTilesProps';
|
|
3
3
|
/**
|
|
4
4
|
* Columns Item Component - Columns Child
|
|
5
|
-
* @param
|
|
5
|
+
* @param id {string}
|
|
6
|
+
* @param children {ReactNode}
|
|
7
|
+
* @param align { Alignable | AlignableValues} align content
|
|
8
|
+
* @param verticalAlign { Alignable | AlignableValues} align vertical content
|
|
6
9
|
* - -------------------------- WEB PROPERTIES -------------------------------
|
|
7
10
|
* @param className {string} Additionnal CSS Classes
|
|
8
11
|
*/
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import { __assign, __rest } from "tslib";
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import clsx from 'clsx';
|
|
4
|
-
import { hashClass } from '../../../helpers';
|
|
5
2
|
import { useTrilogyContext } from '../../../context';
|
|
3
|
+
import { hashClass } from '../../../helpers';
|
|
6
4
|
import { getAlignClassName } from '../../../objects';
|
|
7
5
|
import { is } from '../../../services';
|
|
6
|
+
import clsx from 'clsx';
|
|
7
|
+
import * as React from 'react';
|
|
8
8
|
/**
|
|
9
9
|
* Columns Item Component - Columns Child
|
|
10
|
-
* @param
|
|
10
|
+
* @param id {string}
|
|
11
|
+
* @param children {ReactNode}
|
|
12
|
+
* @param align { Alignable | AlignableValues} align content
|
|
13
|
+
* @param verticalAlign { Alignable | AlignableValues} align vertical content
|
|
11
14
|
* - -------------------------- WEB PROPERTIES -------------------------------
|
|
12
15
|
* @param className {string} Additionnal CSS Classes
|
|
13
16
|
*/
|
|
@@ -33,4 +36,4 @@ var RadioTiles = function (_a) {
|
|
|
33
36
|
return (React.createElement("div", __assign({ id: id, className: hashClass(styled, clsx('radio-tiles', className, align && alignClass, verticalAlign && verticalAlignClass)) }, others), children));
|
|
34
37
|
};
|
|
35
38
|
export default RadioTiles;
|
|
36
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
39
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFkaW9UaWxlcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvcmFkaW8vdGlsZXMvUmFkaW9UaWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUNBLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3JDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQy9CLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUU5Qjs7Ozs7Ozs7R0FRRztBQUNILElBQU0sVUFBVSxHQUFHLFVBQUMsRUFBNkU7SUFBM0UsSUFBQSxFQUFFLFFBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxLQUFLLFdBQUEsRUFBRSxhQUFhLG1CQUFBLEVBQUssTUFBTSxjQUExRCx5REFBNEQsQ0FBRjtJQUNwRSxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUN0QyxJQUFJLFVBQVUsR0FBRyxJQUFJLENBQUE7SUFDckIsSUFBSSxLQUFLLEVBQUU7UUFDVCxVQUFVO1lBQ1IsQ0FBQyxpQkFBaUIsQ0FBQyxLQUFLLENBQUMsS0FBSyxlQUFlLElBQUksRUFBRSxDQUFDLGlCQUFpQixDQUFDLENBQUM7Z0JBQ3ZFLENBQUMsaUJBQWlCLENBQUMsS0FBSyxDQUFDLEtBQUssZ0JBQWdCLElBQUksRUFBRSxDQUFDLGtCQUFrQixDQUFDLENBQUM7Z0JBQ3pFLENBQUMsaUJBQWlCLENBQUMsS0FBSyxDQUFDLEtBQUssYUFBYSxJQUFJLEVBQUUsQ0FBQyxlQUFlLENBQUMsQ0FBQztnQkFDbkUsSUFBSSxDQUFBO0tBQ1A7SUFDRCxJQUFJLGtCQUFrQixHQUFHLElBQUksQ0FBQTtJQUM3QixJQUFJLGFBQWEsRUFBRTtRQUNqQixrQkFBa0I7WUFDaEIsQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLENBQUMsS0FBSyxlQUFlLElBQUksRUFBRSxDQUFDLGVBQWUsQ0FBQyxDQUFDO2dCQUM3RSxDQUFDLGlCQUFpQixDQUFDLGFBQWEsQ0FBQyxLQUFLLGdCQUFnQixJQUFJLEVBQUUsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO2dCQUMvRSxDQUFDLGlCQUFpQixDQUFDLGFBQWEsQ0FBQyxLQUFLLGFBQWEsSUFBSSxFQUFFLENBQUMsYUFBYSxDQUFDLENBQUM7Z0JBQ3pFLElBQUksQ0FBQTtLQUNQO0lBRUQsT0FBTyxDQUNMLHNDQUNFLEVBQUUsRUFBRSxFQUFFLEVBQ04sU0FBUyxFQUFFLFNBQVMsQ0FDbEIsTUFBTSxFQUNOLElBQUksQ0FBQyxhQUFhLEVBQUUsU0FBUyxFQUFFLEtBQUssSUFBSSxVQUFVLEVBQUUsYUFBYSxJQUFJLGtCQUFrQixDQUFDLENBQ3pGLElBQ0csTUFBTSxHQUVULFFBQVEsQ0FDTCxDQUNQLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLFVBQVUsQ0FBQSJ9
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ComponentName } from '../../../components/enumsComponentsName';
|
|
3
|
+
import { RadioTilesProps } from '../../../components/radio/tiles/RadioTilesProps';
|
|
4
|
+
/**
|
|
5
|
+
* Columns Item Component - Columns Child
|
|
6
|
+
* @param id {string}
|
|
7
|
+
* @param children {ReactNode}
|
|
8
|
+
* @param align { Alignable | AlignableValues} align content
|
|
9
|
+
* @param verticalAlign { Alignable | AlignableValues} align vertical content
|
|
10
|
+
*/
|
|
11
|
+
declare const RadioTiles: {
|
|
12
|
+
({ id, children, align, verticalAlign, ...others }: RadioTilesProps): JSX.Element;
|
|
13
|
+
displayName: ComponentName;
|
|
14
|
+
};
|
|
15
|
+
export default RadioTiles;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { __assign, __rest } from "tslib";
|
|
2
|
+
import { ComponentName } from '../../../components/enumsComponentsName';
|
|
3
|
+
import { SpacerSize } from '../../../components/spacer';
|
|
4
|
+
import { Alignable } from '../../../objects/facets/Alignable';
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import { StyleSheet, View } from 'react-native';
|
|
7
|
+
/**
|
|
8
|
+
* Columns Item Component - Columns Child
|
|
9
|
+
* @param id {string}
|
|
10
|
+
* @param children {ReactNode}
|
|
11
|
+
* @param align { Alignable | AlignableValues} align content
|
|
12
|
+
* @param verticalAlign { Alignable | AlignableValues} align vertical content
|
|
13
|
+
*/
|
|
14
|
+
var RadioTiles = function (_a) {
|
|
15
|
+
var id = _a.id, children = _a.children, align = _a.align, verticalAlign = _a.verticalAlign, others = __rest(_a, ["id", "children", "align", "verticalAlign"]);
|
|
16
|
+
var styles = StyleSheet.create({
|
|
17
|
+
container: {
|
|
18
|
+
alignItems: (verticalAlign === Alignable.ALIGNED_CENTER && 'center') ||
|
|
19
|
+
(verticalAlign === Alignable.ALIGNED_START && 'flex-start') ||
|
|
20
|
+
(verticalAlign === Alignable.ALIGNED_END && 'flex-end') ||
|
|
21
|
+
undefined,
|
|
22
|
+
justifyContent: (align === Alignable.ALIGNED_CENTER && 'center') ||
|
|
23
|
+
(align === Alignable.ALIGNED_START && 'flex-start') ||
|
|
24
|
+
(align === Alignable.ALIGNED_END && 'flex-end') ||
|
|
25
|
+
undefined,
|
|
26
|
+
flexDirection: 'row',
|
|
27
|
+
flexWrap: 'wrap',
|
|
28
|
+
gap: SpacerSize.TWO,
|
|
29
|
+
},
|
|
30
|
+
});
|
|
31
|
+
return (React.createElement(View, __assign({ id: id, style: [styles.container] }, others), children));
|
|
32
|
+
};
|
|
33
|
+
RadioTiles.displayName = ComponentName.RadioTiles;
|
|
34
|
+
export default RadioTiles;
|
|
35
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFkaW9UaWxlcy5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3JhZGlvL3RpbGVzL1JhZGlvVGlsZXMubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBRWhFLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUNoRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sNEJBQTRCLENBQUE7QUFDdEQsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQ3pCLE9BQU8sRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRS9DOzs7Ozs7R0FNRztBQUNILElBQU0sVUFBVSxHQUFHLFVBQUMsRUFBa0U7SUFBaEUsSUFBQSxFQUFFLFFBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxLQUFLLFdBQUEsRUFBRSxhQUFhLG1CQUFBLEVBQUssTUFBTSxjQUEvQyw0Q0FBaUQsQ0FBRjtJQUNqRSxJQUFNLE1BQU0sR0FBRyxVQUFVLENBQUMsTUFBTSxDQUFDO1FBQy9CLFNBQVMsRUFBRTtZQUNULFVBQVUsRUFDUixDQUFDLGFBQWEsS0FBSyxTQUFTLENBQUMsY0FBYyxJQUFJLFFBQVEsQ0FBQztnQkFDeEQsQ0FBQyxhQUFhLEtBQUssU0FBUyxDQUFDLGFBQWEsSUFBSSxZQUFZLENBQUM7Z0JBQzNELENBQUMsYUFBYSxLQUFLLFNBQVMsQ0FBQyxXQUFXLElBQUksVUFBVSxDQUFDO2dCQUN2RCxTQUFTO1lBQ1gsY0FBYyxFQUNaLENBQUMsS0FBSyxLQUFLLFNBQVMsQ0FBQyxjQUFjLElBQUksUUFBUSxDQUFDO2dCQUNoRCxDQUFDLEtBQUssS0FBSyxTQUFTLENBQUMsYUFBYSxJQUFJLFlBQVksQ0FBQztnQkFDbkQsQ0FBQyxLQUFLLEtBQUssU0FBUyxDQUFDLFdBQVcsSUFBSSxVQUFVLENBQUM7Z0JBQy9DLFNBQVM7WUFDWCxhQUFhLEVBQUUsS0FBSztZQUNwQixRQUFRLEVBQUUsTUFBTTtZQUNoQixHQUFHLEVBQUUsVUFBVSxDQUFDLEdBQUc7U0FDcEI7S0FDRixDQUFDLENBQUE7SUFFRixPQUFPLENBQ0wsb0JBQUMsSUFBSSxhQUFDLEVBQUUsRUFBRSxFQUFFLEVBQUUsS0FBSyxFQUFFLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxJQUFNLE1BQU0sR0FDaEQsUUFBUSxDQUNKLENBQ1IsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELFVBQVUsQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLFVBQVUsQ0FBQTtBQUVqRCxlQUFlLFVBQVUsQ0FBQSJ9
|
|
@@ -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;
|