@trilogy-ds/react 4.0.6-beta-2 → 4.0.6
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.native.js +21 -21
- package/lib/components/breadcrumb/Breadcrumb.js +6 -6
- package/lib/components/button/Button.native.js +37 -48
- package/lib/components/checkbox/Checkbox.d.ts +3 -2
- package/lib/components/checkbox/Checkbox.js +15 -5
- package/lib/components/checkbox/CheckboxCommonPropsDefaults.js +68 -0
- package/lib/components/checkbox/CheckboxProps.d.ts +12 -2
- package/lib/components/checkbox/CheckboxWithChildrenDefaults.js +86 -0
- package/lib/components/checkbox/{CheckboxPropsDefaults.js → CheckboxWithLabelDefaults.js} +8 -7
- package/lib/components/checkbox/tiles/tile/CheckboxTilePropsDefaults.js +0 -59
- package/lib/components/columns/column/Column.native.js +8 -3
- package/lib/components/hero/Hero.native.js +8 -5
- package/lib/components/hero/HeroProps.d.ts +2 -0
- package/lib/components/hero/HeroPropsDefaults.js +10 -0
- package/lib/components/image/Image.js +6 -6
- package/lib/components/image/Image.native.d.ts +2 -2
- package/lib/components/image/Image.native.js +10 -10
- package/lib/components/price/Price.js +8 -8
- package/lib/components/text/Text.native.d.ts +1 -1
- package/lib/components/text/Text.native.js +7 -7
- package/lib/components/title/Title.native.d.ts +2 -2
- package/lib/components/title/Title.native.js +28 -36
- package/lib/objects/Typography/TypographyColor.d.ts +1 -1
- package/lib/objects/Typography/TypographyColor.js +36 -42
- package/lib/objects/facets/Color.d.ts +1 -1
- package/lib/version.d.ts +1 -1
- package/lib/version.js +2 -2
- package/package.json +1 -1
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { __assign, __rest } from "tslib";
|
|
2
|
-
import
|
|
3
|
-
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
|
2
|
+
import { BadgePositionEnum } from '../../components/badge/BadgeEnum';
|
|
4
3
|
import { ComponentName } from '../../components/enumsComponentsName';
|
|
4
|
+
import { Icon, IconColor, IconName, IconSize } from '../../components/icon';
|
|
5
|
+
import { StatusState } from '../../objects';
|
|
5
6
|
import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
8
|
-
import { BadgePositionEnum } from "../../components/badge/BadgeEnum";
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
|
9
9
|
/**
|
|
10
10
|
* Badge Component
|
|
11
11
|
* @param children {React.ReactNode} If no content add children (Icon for example)
|
|
@@ -29,8 +29,8 @@ var Badge = function (_a) {
|
|
|
29
29
|
},
|
|
30
30
|
badge: {
|
|
31
31
|
alignSelf: 'baseline',
|
|
32
|
-
minWidth: 20,
|
|
33
|
-
height: 20,
|
|
32
|
+
minWidth: label ? 20 : 12,
|
|
33
|
+
height: label ? 20 : 12,
|
|
34
34
|
backgroundColor: !inverted ? badgeColor : getColorStyle(TrilogyColor.BACKGROUND),
|
|
35
35
|
borderRadius: 30,
|
|
36
36
|
justifyContent: 'center',
|
|
@@ -47,29 +47,29 @@ var Badge = function (_a) {
|
|
|
47
47
|
color: getColorStyle(TrilogyColor.MAIN),
|
|
48
48
|
},
|
|
49
49
|
iconStatus: {
|
|
50
|
-
position:
|
|
50
|
+
position: 'absolute',
|
|
51
51
|
zIndex: 1000,
|
|
52
52
|
backgroundColor: 'white',
|
|
53
53
|
width: 16,
|
|
54
54
|
minHeight: 16,
|
|
55
|
-
borderRadius: 15
|
|
55
|
+
borderRadius: 15,
|
|
56
56
|
},
|
|
57
57
|
iconStatusPositionTopLeft: {
|
|
58
58
|
top: -4,
|
|
59
|
-
left: -4
|
|
59
|
+
left: -4,
|
|
60
60
|
},
|
|
61
61
|
iconStatusPositionTopRight: {
|
|
62
62
|
top: -4,
|
|
63
|
-
left: 17
|
|
63
|
+
left: 17,
|
|
64
64
|
},
|
|
65
65
|
iconStatusPositionBottomLeft: {
|
|
66
66
|
top: 17,
|
|
67
|
-
left: -4
|
|
67
|
+
left: -4,
|
|
68
68
|
},
|
|
69
69
|
iconStatusPositionBottomRight: {
|
|
70
70
|
top: 17,
|
|
71
|
-
left: 17
|
|
72
|
-
}
|
|
71
|
+
left: 17,
|
|
72
|
+
},
|
|
73
73
|
});
|
|
74
74
|
var iconName = null;
|
|
75
75
|
var iconColor = null;
|
|
@@ -97,11 +97,11 @@ var Badge = function (_a) {
|
|
|
97
97
|
return (React.createElement(View, __assign({}, others), iconName && iconColor && (React.createElement(View, null,
|
|
98
98
|
React.createElement(View, { style: [
|
|
99
99
|
styles.iconStatus,
|
|
100
|
-
position === BadgePositionEnum.TOP_LEFT && styles.iconStatusPositionTopLeft ||
|
|
101
|
-
position === BadgePositionEnum.TOP_RIGHT && styles.iconStatusPositionTopRight ||
|
|
102
|
-
position === BadgePositionEnum.BOTTOM_LEFT && styles.iconStatusPositionBottomLeft ||
|
|
103
|
-
position === BadgePositionEnum.BOTTOM_RIGHT && styles.iconStatusPositionBottomRight ||
|
|
104
|
-
styles.iconStatusPositionTopLeft
|
|
100
|
+
(position === BadgePositionEnum.TOP_LEFT && styles.iconStatusPositionTopLeft) ||
|
|
101
|
+
(position === BadgePositionEnum.TOP_RIGHT && styles.iconStatusPositionTopRight) ||
|
|
102
|
+
(position === BadgePositionEnum.BOTTOM_LEFT && styles.iconStatusPositionBottomLeft) ||
|
|
103
|
+
(position === BadgePositionEnum.BOTTOM_RIGHT && styles.iconStatusPositionBottomRight) ||
|
|
104
|
+
styles.iconStatusPositionTopLeft,
|
|
105
105
|
] },
|
|
106
106
|
React.createElement(Icon, { name: iconName, size: IconSize.SMALLER, color: iconColor })),
|
|
107
107
|
React.createElement(View, null, children)))));
|
|
@@ -111,8 +111,8 @@ var Badge = function (_a) {
|
|
|
111
111
|
React.createElement(View, __assign({ style: styles.badge }, others),
|
|
112
112
|
React.createElement(Text, { style: styles.text }, label))))) : (React.createElement(View, __assign({ style: styles.badge }, others),
|
|
113
113
|
React.createElement(Text, { style: styles.text }, label),
|
|
114
|
-
!label && children &&
|
|
114
|
+
!label && children && children));
|
|
115
115
|
};
|
|
116
116
|
Badge.displayName = ComponentName.Badge;
|
|
117
117
|
export default Badge;
|
|
118
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
118
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmFkZ2UubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9iYWRnZS9CYWRnZS5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUVoRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3ZFLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDdkMsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUNwRSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDekIsT0FBTyxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRXZFOzs7Ozs7Ozs7Ozs7R0FZRztBQUNILElBQU0sS0FBSyxHQUFHLFVBQUMsRUFVRjtJQVRYLElBQUEsUUFBUSxjQUFBLEVBQ1IsS0FBSyxXQUFBLEVBQ0wsT0FBTyxhQUFBLEVBQ1AsTUFBTSxZQUFBLEVBQ04sT0FBTyxhQUFBLEVBQ1AsUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ1IsTUFBTSxZQUFBLEVBQ0gsTUFBTSxjQVRJLHVGQVVkLENBRFU7SUFFVCxJQUFNLFVBQVUsR0FBRyxhQUFhLENBQUMsT0FBTyxJQUFJLFlBQVksQ0FBQyxJQUFJLENBQUMsQ0FBQTtJQUM5RCxJQUFNLFNBQVMsR0FBRyxhQUFhLENBQUMsWUFBWSxDQUFDLFVBQVUsQ0FBQyxDQUFBO0lBRXhELElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsU0FBUyxFQUFFO1lBQ1QsYUFBYSxFQUFFLEtBQUs7U0FDckI7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
|
|
@@ -1,8 +1,8 @@
|
|
|
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';
|
|
4
|
+
import clsx from 'clsx';
|
|
5
|
+
import * as React from 'react';
|
|
6
6
|
/**
|
|
7
7
|
* Breadcrumb Component
|
|
8
8
|
* @param children {React.ReactNode} Breadcrumb Children
|
|
@@ -12,10 +12,10 @@ import { useTrilogyContext } from '../../context';
|
|
|
12
12
|
* @param accessibilityLabel {string} Accessibility label
|
|
13
13
|
*/
|
|
14
14
|
var Breadcrumb = function (_a) {
|
|
15
|
-
var children = _a.children, className = _a.className, id = _a.id,
|
|
15
|
+
var children = _a.children, className = _a.className, id = _a.id, _b = _a.accessibilityLabel, accessibilityLabel = _b === void 0 ? 'Breadcrumb' : _b, others = __rest(_a, ["children", "className", "id", "accessibilityLabel"]);
|
|
16
16
|
var styled = useTrilogyContext().styled;
|
|
17
|
-
return (React.createElement("nav", __assign({ id: id, role:
|
|
17
|
+
return (React.createElement("nav", __assign({ id: id, role: 'navigation', className: hashClass(styled, clsx('breadcrumb', className)), "aria-label": accessibilityLabel }, others),
|
|
18
18
|
React.createElement("ul", null, children)));
|
|
19
19
|
};
|
|
20
20
|
export default Breadcrumb;
|
|
21
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
21
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQnJlYWRjcnVtYi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvYnJlYWRjcnVtYi9CcmVhZGNydW1iLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRzlCOzs7Ozs7O0dBT0c7QUFDSCxJQUFNLFVBQVUsR0FBRyxVQUFDLEVBQTZGO0lBQTNGLElBQUEsUUFBUSxjQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsMEJBQWlDLEVBQWpDLGtCQUFrQixtQkFBRyxZQUFZLEtBQUEsRUFBSyxNQUFNLGNBQXZFLHFEQUF5RSxDQUFGO0lBQ2pGLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLE9BQU8sQ0FDTCxzQ0FDRSxFQUFFLEVBQUUsRUFBRSxFQUNOLElBQUksRUFBQyxZQUFZLEVBQ2pCLFNBQVMsRUFBRSxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxZQUFZLEVBQUUsU0FBUyxDQUFDLENBQUMsZ0JBQy9DLGtCQUFrQixJQUMxQixNQUFNO1FBRVYsZ0NBQUssUUFBUSxDQUFNLENBQ2YsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxVQUFVLENBQUEifQ==
|
|
@@ -21,34 +21,31 @@ import { ButtonVariant } from './ButtonEnum';
|
|
|
21
21
|
*/
|
|
22
22
|
var Button = function (_a) {
|
|
23
23
|
var children = _a.children, variant = _a.variant, onClick = _a.onClick, disabled = _a.disabled, loading = _a.loading, fullwidth = _a.fullwidth, testId = _a.testId, accessibilityLabel = _a.accessibilityLabel, iconName = _a.iconName, others = __rest(_a, ["children", "variant", "onClick", "disabled", "loading", "fullwidth", "testId", "accessibilityLabel", "iconName"]);
|
|
24
|
-
var
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
(!disabled && variant === ButtonVariant.PRIMARY && getColorStyle(TrilogyColor.INFO_FADE)) ||
|
|
50
|
-
getColorStyle(TrilogyColor.BACKGROUND));
|
|
51
|
-
};
|
|
24
|
+
var loaderColor = getColorStyle(TrilogyColor.BACKGROUND);
|
|
25
|
+
var isLoading = typeof loading === 'string' && getLoadingClassName(loading) === 'loading';
|
|
26
|
+
var background = disabled
|
|
27
|
+
? TrilogyColor.NEUTRAL_FADE
|
|
28
|
+
: isLoading
|
|
29
|
+
? getButtonColorStyle(TrilogyColor.BACKGROUND)
|
|
30
|
+
: typeof loading === 'boolean' && loading
|
|
31
|
+
? TrilogyColor.NEUTRAL
|
|
32
|
+
: variant === ButtonVariant.SECONDARY
|
|
33
|
+
? TrilogyColor.MAIN_FADE
|
|
34
|
+
: variant === ButtonVariant.CONVERSION
|
|
35
|
+
? TrilogyColor.ACCENT
|
|
36
|
+
: variant === ButtonVariant.GHOST
|
|
37
|
+
? TrilogyColor.BACKGROUND
|
|
38
|
+
: TrilogyColor.MAIN;
|
|
39
|
+
var color = variant && ['secondary', 'ghost'].includes(getVariantClassName(variant))
|
|
40
|
+
? TrilogyColor.FONT
|
|
41
|
+
: TrilogyColor.BACKGROUND;
|
|
42
|
+
var borderColor = disabled && variant === ButtonVariant.PRIMARY
|
|
43
|
+
? TrilogyColor.DISABLED
|
|
44
|
+
: !disabled && !!loading && variant === ButtonVariant.PRIMARY
|
|
45
|
+
? TrilogyColor.DISABLED
|
|
46
|
+
: !disabled && variant === ButtonVariant.PRIMARY
|
|
47
|
+
? TrilogyColor.INFO_FADE
|
|
48
|
+
: TrilogyColor.BACKGROUND;
|
|
52
49
|
var styles = StyleSheet.create({
|
|
53
50
|
button: {
|
|
54
51
|
maxWidth: '100%',
|
|
@@ -59,15 +56,15 @@ var Button = function (_a) {
|
|
|
59
56
|
paddingRight: variant === ButtonVariant.PRIMARY ? 13 : 15,
|
|
60
57
|
justifyContent: 'center',
|
|
61
58
|
alignItems: 'center',
|
|
62
|
-
backgroundColor:
|
|
59
|
+
backgroundColor: getColorStyle(background),
|
|
63
60
|
borderRadius: 4,
|
|
64
61
|
minHeight: 45,
|
|
65
62
|
height: loading ? 52 : 'auto',
|
|
66
|
-
borderColor:
|
|
63
|
+
borderColor: getColorStyle(borderColor),
|
|
67
64
|
},
|
|
68
65
|
text: {
|
|
69
66
|
fontFamily: getTypographyBoldStyle(TypographyBold.TEXT_WEIGHT_SEMIBOLD),
|
|
70
|
-
color:
|
|
67
|
+
color: getColorStyle(color),
|
|
71
68
|
alignSelf: 'center',
|
|
72
69
|
alignItems: 'center',
|
|
73
70
|
fontWeight: 'bold',
|
|
@@ -99,7 +96,7 @@ var Button = function (_a) {
|
|
|
99
96
|
justifyContent: 'center',
|
|
100
97
|
},
|
|
101
98
|
buttonIconText: {
|
|
102
|
-
color:
|
|
99
|
+
color: getColorStyle(color),
|
|
103
100
|
alignSelf: 'center',
|
|
104
101
|
alignItems: 'center',
|
|
105
102
|
fontWeight: 'bold',
|
|
@@ -113,37 +110,29 @@ var Button = function (_a) {
|
|
|
113
110
|
: typeof children === 'string'
|
|
114
111
|
? children
|
|
115
112
|
: 'NotSpecified';
|
|
116
|
-
/**
|
|
117
|
-
* Returns variant's classname depending on variant type
|
|
118
|
-
* @param variantType {string} - VariantType
|
|
119
|
-
* @returns {string} - Variant value
|
|
120
|
-
*/
|
|
121
|
-
var iconColorVariant = function (variantType) {
|
|
122
|
-
if (variantType && ['PRIMARY', 'ACCENT'].includes(variantType))
|
|
123
|
-
return TrilogyColor.BACKGROUND;
|
|
124
|
-
if (variantType === 'SECONDARY' || variantType === 'GHOST')
|
|
125
|
-
return TrilogyColor.MAIN;
|
|
126
|
-
return TrilogyColor.BACKGROUND;
|
|
127
|
-
};
|
|
128
113
|
return (React.createElement(TouchableOpacity, __assign({ accessible: !!buttonAccessibilityLabel, accessibilityLabel: buttonAccessibilityLabel, testID: buttonTestId, disabled: disabled || loading, style: [styles.button, fullwidth && styles.fullwidth], onPress: function (e) { return onClick === null || onClick === void 0 ? void 0 : onClick(e); } }, others),
|
|
129
114
|
loading && typeof loading === 'string' && getLoadingClassName(loading) === 'loading' && (React.createElement(View, { style: {
|
|
130
115
|
alignItems: 'center',
|
|
131
116
|
justifyContent: 'center',
|
|
132
117
|
height: 45,
|
|
133
118
|
} },
|
|
134
|
-
React.createElement(ActivityIndicator, { color:
|
|
119
|
+
React.createElement(ActivityIndicator, { color: loaderColor, testID: 'activity-indicator' }))),
|
|
135
120
|
loading && typeof loading === 'boolean' && loading === true && (React.createElement(View, { style: {
|
|
136
121
|
alignItems: 'center',
|
|
137
122
|
height: 45,
|
|
138
123
|
justifyContent: 'center',
|
|
139
124
|
} },
|
|
140
|
-
React.createElement(ActivityIndicator, { color:
|
|
125
|
+
React.createElement(ActivityIndicator, { color: loaderColor, testID: 'activity-indicator' }))),
|
|
141
126
|
loading && typeof loading === 'string' && getLoadingClassName(loading) === 'loaded' && (React.createElement(Text, { style: (!disabled && styles.text) || (disabled && styles.textDisabled) }, children)),
|
|
142
127
|
!loading && children && typeof children === 'string' && !iconName && (React.createElement(Text, { style: (!disabled && styles.text) || (disabled && styles.textDisabled) }, children)),
|
|
143
128
|
!loading && children && typeof children === 'string' && iconName && (React.createElement(View, { style: styles.buttonIconContainer },
|
|
144
|
-
|
|
129
|
+
React.createElement(Icon, { name: iconName, size: IconSize.SMALL, color: disabled
|
|
130
|
+
? TrilogyColor.DISABLED
|
|
131
|
+
: variant === 'SECONDARY' || variant === 'GHOST'
|
|
132
|
+
? TrilogyColor.MAIN
|
|
133
|
+
: TrilogyColor.BACKGROUND, testId: 'button-icon' }),
|
|
145
134
|
React.createElement(Text, { style: (!disabled && styles.buttonIconText) || (disabled && styles.textDisabledIcon) }, children)))));
|
|
146
135
|
};
|
|
147
136
|
Button.displayName = ComponentName.Button;
|
|
148
137
|
export default Button;
|
|
149
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
138
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQnV0dG9uLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvYnV0dG9uL0J1dHRvbi5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNsRCxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLHNCQUFzQixFQUFFLGNBQWMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNsRSxPQUFPLEVBQ0wsbUJBQW1CLEVBQ25CLGFBQWEsRUFDYixtQkFBbUIsRUFDbkIsbUJBQW1CLEVBQ25CLFlBQVksR0FDYixNQUFNLGtCQUFrQixDQUFBO0FBQ3pCLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixFQUFFLE1BQU0sY0FBYyxDQUFBO0FBQ3BGLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFHNUM7Ozs7Ozs7Ozs7O0dBV0c7QUFDSCxJQUFNLE1BQU0sR0FBRyxVQUFDLEVBV0Y7SUFWWixJQUFBLFFBQVEsY0FBQSxFQUNSLE9BQU8sYUFBQSxFQUNQLE9BQU8sYUFBQSxFQUNQLFFBQVEsY0FBQSxFQUNSLE9BQU8sYUFBQSxFQUNQLFNBQVMsZUFBQSxFQUNULE1BQU0sWUFBQSxFQUNOLGtCQUFrQix3QkFBQSxFQUNsQixRQUFRLGNBQUEsRUFDTCxNQUFNLGNBVkssa0hBV2YsQ0FEVTtJQUVULElBQU0sV0FBVyxHQUFHLGFBQWEsQ0FBQyxZQUFZLENBQUMsVUFBVSxDQUFDLENBQUE7SUFDMUQsSUFBTSxTQUFTLEdBQUcsT0FBTyxPQUFPLEtBQUssUUFBUSxJQUFJLG1CQUFt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
|
|
@@ -6,12 +6,13 @@ import { CheckboxProps } from './CheckboxProps';
|
|
|
6
6
|
* @param disabled {boolean} Disabled
|
|
7
7
|
* @param readOnly {boolean} readonly Checkbox
|
|
8
8
|
* @param id {string} Id for button, by default id is generate
|
|
9
|
-
* @param label {string} Label for Checkbox
|
|
9
|
+
* @param label {string} Label for Checkbox // Incompatible with children
|
|
10
10
|
* @param onChange {ChangeEvent}
|
|
11
11
|
* @param name {string} Name for checkbox
|
|
12
|
+
* @param children {React.ReactNode} Children for Checkbox, should be only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#technical_summary)
|
|
12
13
|
* - -------------------------- WEB PROPERTIES -------------------------------
|
|
13
14
|
* @param value {string} Value for checkbox
|
|
14
15
|
* @param className {string} Additionnal css classes (ONLY FOR WEB)
|
|
15
16
|
*/
|
|
16
|
-
declare const Checkbox: ({ checked, className, disabled, readonly, id, label, onChange, name, value, ...others }: CheckboxProps) => JSX.Element;
|
|
17
|
+
declare const Checkbox: ({ checked, className, disabled, readonly, id, label, onChange, name, value, children, ...others }: CheckboxProps) => JSX.Element;
|
|
17
18
|
export default Checkbox;
|
|
@@ -10,15 +10,16 @@ import { useTrilogyContext } from '../../context';
|
|
|
10
10
|
* @param disabled {boolean} Disabled
|
|
11
11
|
* @param readOnly {boolean} readonly Checkbox
|
|
12
12
|
* @param id {string} Id for button, by default id is generate
|
|
13
|
-
* @param label {string} Label for Checkbox
|
|
13
|
+
* @param label {string} Label for Checkbox // Incompatible with children
|
|
14
14
|
* @param onChange {ChangeEvent}
|
|
15
15
|
* @param name {string} Name for checkbox
|
|
16
|
+
* @param children {React.ReactNode} Children for Checkbox, should be only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#technical_summary)
|
|
16
17
|
* - -------------------------- WEB PROPERTIES -------------------------------
|
|
17
18
|
* @param value {string} Value for checkbox
|
|
18
19
|
* @param className {string} Additionnal css classes (ONLY FOR WEB)
|
|
19
20
|
*/
|
|
20
21
|
var Checkbox = function (_a) {
|
|
21
|
-
var checked = _a.checked, className = _a.className, disabled = _a.disabled, readonly = _a.readonly, _b = _a.id, id = _b === void 0 ? shortid.generate() : _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
|
+
var checked = _a.checked, className = _a.className, disabled = _a.disabled, readonly = _a.readonly, _b = _a.id, id = _b === void 0 ? shortid.generate() : _b, label = _a.label, onChange = _a.onChange, name = _a.name, value = _a.value, children = _a.children, others = __rest(_a, ["checked", "className", "disabled", "readonly", "id", "label", "onChange", "name", "value", "children"]);
|
|
22
23
|
var styled = useTrilogyContext().styled;
|
|
23
24
|
var _c = __read(useState(checked || false), 2), _checked = _c[0], setChecked = _c[1];
|
|
24
25
|
useEffect(function () {
|
|
@@ -26,9 +27,18 @@ var Checkbox = function (_a) {
|
|
|
26
27
|
setChecked(checked || false);
|
|
27
28
|
}
|
|
28
29
|
}, [checked, readonly]);
|
|
30
|
+
var handleOnChange = function (e) {
|
|
31
|
+
var target = e.target;
|
|
32
|
+
onChange ? onChange({
|
|
33
|
+
checkboxId: target.id,
|
|
34
|
+
checkboxValue: target.value,
|
|
35
|
+
checkboxName: target.name,
|
|
36
|
+
checkboxChecked: target.checked,
|
|
37
|
+
}) : setChecked(target.checked);
|
|
38
|
+
};
|
|
29
39
|
return (React.createElement("div", { className: hashClass(styled, clsx('checkbox', className)) },
|
|
30
|
-
React.createElement("input", __assign({ type: 'checkbox', readOnly: readonly, id: id, disabled: disabled, name: name, value: value, checked: readonly ? checked : _checked, onChange:
|
|
31
|
-
React.createElement("label", { htmlFor: id, className: hashClass(styled, clsx('checkbox-label')) }, label)));
|
|
40
|
+
React.createElement("input", __assign({ type: 'checkbox', readOnly: readonly, id: id, disabled: disabled, name: name, value: value, checked: readonly ? checked : _checked, onChange: handleOnChange }, others)),
|
|
41
|
+
React.createElement("label", { htmlFor: id, className: hashClass(styled, clsx('checkbox-label')) }, label !== null && label !== void 0 ? label : children)));
|
|
32
42
|
};
|
|
33
43
|
export default Checkbox;
|
|
34
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
44
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hlY2tib3guanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2NoZWNrYm94L0NoZWNrYm94LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQ2xELE9BQU8sT0FBTyxNQUFNLFNBQVMsQ0FBQTtBQUU3QixPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFFN0M7Ozs7Ozs7Ozs7Ozs7R0FhRztBQUNILElBQU0sUUFBUSxHQUFHLFVBQUMsRUFZRjtJQVhkLElBQUEsT0FBTyxhQUFBLEVBQ1AsU0FBUyxlQUFBLEVBQ1QsUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ1IsVUFBdUIsRUFBdkIsRUFBRSxtQkFBRyxPQUFPLENBQUMsUUFBUSxFQUFFLEtBQUEsRUFDdkIsS0FBSyxXQUFBLEVBQ0wsUUFBUSxjQUFBLEVBQ1IsSUFBSSxVQUFBLEVBQ0osS0FBSyxXQUFBLEVBQ0wsUUFBUSxjQUFBLEVBQ0wsTUFBTSxjQVhPLHdHQVlqQixDQURVO0lBRUQsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFaEMsSUFBQSxLQUFBLE9BQXlCLFFBQVEsQ0FBVSxPQUFPLElBQUksS0FBSyxDQUFDLElBQUEsRUFBM0QsUUFBUSxRQUFBLEVBQUUsVUFBVSxRQUF1QyxDQUFBO0lBRWxFLFNBQVMsQ0FBQztRQUNSLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDYixVQUFVLENBQUMsT0FBTyxJQUFJLEtBQUssQ0FBQyxDQUFBO1NBQzdCO0lBQ0gsQ0FBQyxFQUFFLENBQUMsT0FBTyxFQUFFLFFBQVEsQ0FBQyxDQUFDLENBQUE7SUFFdkIsSUFBTSxjQUFjLEdBQUcsVUFBQyxDQUFzQztRQUNwRCxJQUFBLE1BQU0sR0FBSyxDQUFDLE9BQU4sQ0FBTTtRQUNwQixRQUFRLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQztZQUNsQixVQUFVLEVBQUUsTUFBTSxDQUFDLEVBQUU7WUFDckIsYUFBYSxFQUFFLE1BQU0sQ0FBQyxLQUFLO1lBQzNCLFlBQVksRUFBRSxNQUFNLENBQUMsSUFBSTtZQUN6QixlQUFlLEVBQUUsTUFBTSxDQUFDLE9BQU87U0FDaEMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFBO0lBQ2pDLENBQUMsQ0FBQTtJQUVELE9BQU8sQ0FDTCw2QkFBSyxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsVUFBVSxFQUFFLFNBQVMsQ0FBQyxDQUFDO1FBQzVELHdDQUNFLElBQUksRUFBQyxVQUFVLEVBQ2YsUUFBUSxFQUFFLFFBQVEsRUFDbEIsRUFBRSxFQUFFLEVBQUUsRUFDTixRQUFRLEVBQUUsUUFBUSxFQUNsQixJQUFJLEVBQUUsSUFBSSxFQUNWLEtBQUssRUFBRSxLQUFLLEVBQ1osT0FBTyxFQUFFLFFBQVEsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxRQUFRLEVBQ3RDLFFBQVEsRUFBRSxjQUFjLElBQ3BCLE1BQU0sRUFDVjtRQUNGLCtCQUFPLE9BQU8sRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLGdCQUFnQixDQUFDLENBQUMsSUFDckUsS0FBSyxhQUFMLEtBQUssY0FBTCxLQUFLLEdBQUksUUFBUSxDQUNaLENBQ0osQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxRQUFRLENBQUEifQ==
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
"checked": {
|
|
3
|
+
"type": "boolean",
|
|
4
|
+
"values": [
|
|
5
|
+
"undefined",
|
|
6
|
+
"false",
|
|
7
|
+
"true"
|
|
8
|
+
]
|
|
9
|
+
},
|
|
10
|
+
"disabled": {
|
|
11
|
+
"type": "boolean",
|
|
12
|
+
"values": [
|
|
13
|
+
"undefined",
|
|
14
|
+
"false",
|
|
15
|
+
"true"
|
|
16
|
+
]
|
|
17
|
+
},
|
|
18
|
+
"readonly": {
|
|
19
|
+
"type": "boolean",
|
|
20
|
+
"values": [
|
|
21
|
+
"undefined",
|
|
22
|
+
"false",
|
|
23
|
+
"true"
|
|
24
|
+
]
|
|
25
|
+
},
|
|
26
|
+
"onChange": {
|
|
27
|
+
"type": "function",
|
|
28
|
+
"values": [
|
|
29
|
+
"undefined",
|
|
30
|
+
"CheckboxChangeEventHandler"
|
|
31
|
+
]
|
|
32
|
+
},
|
|
33
|
+
"name": {
|
|
34
|
+
"type": "string",
|
|
35
|
+
"values": [
|
|
36
|
+
"undefined",
|
|
37
|
+
"string"
|
|
38
|
+
]
|
|
39
|
+
},
|
|
40
|
+
"value": {
|
|
41
|
+
"type": "string",
|
|
42
|
+
"values": [
|
|
43
|
+
"undefined",
|
|
44
|
+
"string"
|
|
45
|
+
]
|
|
46
|
+
},
|
|
47
|
+
"accessibilityLabel": {
|
|
48
|
+
"type": "string",
|
|
49
|
+
"values": [
|
|
50
|
+
"undefined",
|
|
51
|
+
"string"
|
|
52
|
+
]
|
|
53
|
+
},
|
|
54
|
+
"id": {
|
|
55
|
+
"type": "string",
|
|
56
|
+
"values": [
|
|
57
|
+
"undefined",
|
|
58
|
+
"string"
|
|
59
|
+
]
|
|
60
|
+
},
|
|
61
|
+
"className": {
|
|
62
|
+
"type": "string",
|
|
63
|
+
"values": [
|
|
64
|
+
"undefined",
|
|
65
|
+
"string"
|
|
66
|
+
]
|
|
67
|
+
}
|
|
68
|
+
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Accessibility } from '../../objects';
|
|
2
2
|
import { CommonProps } from '../../objects/facets/CommonProps';
|
|
3
|
+
import React from 'react';
|
|
3
4
|
type CheckboxChangeEventHandler = (event: {
|
|
4
5
|
checkboxValue: string;
|
|
5
6
|
checkboxName: string;
|
|
@@ -9,13 +10,22 @@ type CheckboxChangeEventHandler = (event: {
|
|
|
9
10
|
/**
|
|
10
11
|
* Checkbox Interface
|
|
11
12
|
*/
|
|
12
|
-
export
|
|
13
|
+
export type CheckboxProps = Pick<CheckboxPropsPossibilities, keyof CheckboxPropsPossibilities>;
|
|
14
|
+
type CheckboxPropsPossibilities = CheckboxWithLabel | CheckboxWithChildren;
|
|
15
|
+
interface CheckboxCommonProps extends Accessibility, CommonProps {
|
|
13
16
|
checked?: boolean;
|
|
14
17
|
disabled?: boolean;
|
|
15
18
|
readonly?: boolean;
|
|
16
|
-
label?: string;
|
|
17
19
|
onChange?: CheckboxChangeEventHandler;
|
|
18
20
|
name?: string;
|
|
19
21
|
value?: string;
|
|
20
22
|
}
|
|
23
|
+
interface CheckboxWithLabel extends CheckboxCommonProps {
|
|
24
|
+
label: string;
|
|
25
|
+
children?: never;
|
|
26
|
+
}
|
|
27
|
+
interface CheckboxWithChildren extends CheckboxCommonProps {
|
|
28
|
+
children: React.ReactNode;
|
|
29
|
+
label?: never;
|
|
30
|
+
}
|
|
21
31
|
export {};
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
"children": {
|
|
3
|
+
"type": "react",
|
|
4
|
+
"values": [
|
|
5
|
+
"undefined",
|
|
6
|
+
"null",
|
|
7
|
+
"string",
|
|
8
|
+
"number",
|
|
9
|
+
"false",
|
|
10
|
+
"true",
|
|
11
|
+
"JSXElementConstructor<any>>",
|
|
12
|
+
"ReactNode>",
|
|
13
|
+
"ReactPortal"
|
|
14
|
+
]
|
|
15
|
+
},
|
|
16
|
+
"label": {
|
|
17
|
+
"type": "string",
|
|
18
|
+
"values": []
|
|
19
|
+
},
|
|
20
|
+
"checked": {
|
|
21
|
+
"type": "boolean",
|
|
22
|
+
"values": [
|
|
23
|
+
"undefined",
|
|
24
|
+
"false",
|
|
25
|
+
"true"
|
|
26
|
+
]
|
|
27
|
+
},
|
|
28
|
+
"disabled": {
|
|
29
|
+
"type": "boolean",
|
|
30
|
+
"values": [
|
|
31
|
+
"undefined",
|
|
32
|
+
"false",
|
|
33
|
+
"true"
|
|
34
|
+
]
|
|
35
|
+
},
|
|
36
|
+
"readonly": {
|
|
37
|
+
"type": "boolean",
|
|
38
|
+
"values": [
|
|
39
|
+
"undefined",
|
|
40
|
+
"false",
|
|
41
|
+
"true"
|
|
42
|
+
]
|
|
43
|
+
},
|
|
44
|
+
"onChange": {
|
|
45
|
+
"type": "function",
|
|
46
|
+
"values": [
|
|
47
|
+
"undefined",
|
|
48
|
+
"CheckboxChangeEventHandler"
|
|
49
|
+
]
|
|
50
|
+
},
|
|
51
|
+
"name": {
|
|
52
|
+
"type": "string",
|
|
53
|
+
"values": [
|
|
54
|
+
"undefined",
|
|
55
|
+
"string"
|
|
56
|
+
]
|
|
57
|
+
},
|
|
58
|
+
"value": {
|
|
59
|
+
"type": "string",
|
|
60
|
+
"values": [
|
|
61
|
+
"undefined",
|
|
62
|
+
"string"
|
|
63
|
+
]
|
|
64
|
+
},
|
|
65
|
+
"accessibilityLabel": {
|
|
66
|
+
"type": "string",
|
|
67
|
+
"values": [
|
|
68
|
+
"undefined",
|
|
69
|
+
"string"
|
|
70
|
+
]
|
|
71
|
+
},
|
|
72
|
+
"id": {
|
|
73
|
+
"type": "string",
|
|
74
|
+
"values": [
|
|
75
|
+
"undefined",
|
|
76
|
+
"string"
|
|
77
|
+
]
|
|
78
|
+
},
|
|
79
|
+
"className": {
|
|
80
|
+
"type": "string",
|
|
81
|
+
"values": [
|
|
82
|
+
"undefined",
|
|
83
|
+
"string"
|
|
84
|
+
]
|
|
85
|
+
}
|
|
86
|
+
};
|
|
@@ -1,4 +1,12 @@
|
|
|
1
1
|
export default {
|
|
2
|
+
"label": {
|
|
3
|
+
"type": "string",
|
|
4
|
+
"values": []
|
|
5
|
+
},
|
|
6
|
+
"children": {
|
|
7
|
+
"type": "string",
|
|
8
|
+
"values": []
|
|
9
|
+
},
|
|
2
10
|
"checked": {
|
|
3
11
|
"type": "boolean",
|
|
4
12
|
"values": [
|
|
@@ -23,13 +31,6 @@ export default {
|
|
|
23
31
|
"true"
|
|
24
32
|
]
|
|
25
33
|
},
|
|
26
|
-
"label": {
|
|
27
|
-
"type": "string",
|
|
28
|
-
"values": [
|
|
29
|
-
"undefined",
|
|
30
|
-
"string"
|
|
31
|
-
]
|
|
32
|
-
},
|
|
33
34
|
"onChange": {
|
|
34
35
|
"type": "function",
|
|
35
36
|
"values": [
|