@trilogy-ds/react 4.0.4 → 4.0.5-beta-2
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/box/Box.native.d.ts +2 -2
- package/lib/components/box/Box.native.js +26 -41
- package/lib/components/checkbox/tiles/tile/CheckboxTile.native.d.ts +1 -1
- package/lib/components/checkbox/tiles/tile/CheckboxTile.native.js +24 -29
- package/lib/components/columns/Columns.d.ts +3 -3
- package/lib/components/columns/Columns.js +12 -9
- package/lib/components/columns/Columns.native.d.ts +3 -9
- package/lib/components/columns/Columns.native.js +24 -51
- package/lib/components/columns/ColumnsProps.d.ts +2 -2
- package/lib/components/columns/column/Column.d.ts +3 -3
- package/lib/components/columns/column/Column.js +11 -9
- package/lib/components/columns/column/Column.native.d.ts +4 -7
- package/lib/components/columns/column/Column.native.js +21 -6
- package/lib/components/columns/column/ColumnProps.d.ts +1 -1
- package/lib/components/columns/column/index.d.ts +1 -1
- package/lib/components/columns/column/index.js +2 -2
- package/lib/components/columns/context/index.d.ts +7 -0
- package/lib/components/columns/context/index.js +8 -0
- package/lib/components/link/Link.native.d.ts +2 -2
- package/lib/components/link/Link.native.js +6 -6
- package/lib/components/link/LinkDefaults.js +334 -0
- package/lib/components/link/LinkProps.d.ts +10 -2
- package/lib/components/link/LinkPropsDefaults.js +76 -0
- package/lib/components/link/LinkPropsNativeDefaults.js +405 -0
- package/lib/components/modal/Modal.native.d.ts +1 -1
- package/lib/components/modal/Modal.native.js +15 -10
- package/lib/components/modal/body/ModalBody.native.d.ts +1 -1
- package/lib/components/modal/body/ModalBody.native.js +5 -6
- package/lib/components/select/Select.native.js +4 -3
- package/lib/components/select/option/SelectOption.native.js +2 -3
- package/lib/components/sticker/Sticker.d.ts +2 -1
- package/lib/components/sticker/Sticker.js +8 -4
- package/lib/components/sticker/Sticker.native.d.ts +2 -1
- package/lib/components/sticker/Sticker.native.js +15 -6
- package/lib/version.d.ts +1 -1
- package/lib/version.js +2 -2
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { ComponentName } from '../../components/enumsComponentsName';
|
|
3
|
+
import { BoxProps } from './BoxProps';
|
|
4
4
|
/**
|
|
5
5
|
* Box Component
|
|
6
6
|
* @param children {React.ReactNode} Childrens
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { __assign, __read, __rest } from "tslib";
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import { getColorStyle, TrilogyColor
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
2
|
+
import { ComponentName } from '../../components/enumsComponentsName';
|
|
3
|
+
import { StatesContext } from '../../context/providerStates';
|
|
4
|
+
import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
|
|
5
|
+
import React, { useState } from 'react';
|
|
6
|
+
import ContentLoader, { Rect } from 'react-content-loader/native';
|
|
7
|
+
import { ImageBackground, Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
|
|
8
8
|
/**
|
|
9
9
|
* Box Component
|
|
10
10
|
* @param children {React.ReactNode} Childrens
|
|
@@ -30,24 +30,21 @@ var Box = function (_a) {
|
|
|
30
30
|
var boxRadius = 6;
|
|
31
31
|
var styles = StyleSheet.create({
|
|
32
32
|
box: {
|
|
33
|
-
width:
|
|
33
|
+
width: '100%',
|
|
34
34
|
backgroundColor: backgroundColor ? getColorStyle(backgroundColor) : colorBgc,
|
|
35
35
|
borderRadius: boxRadius,
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
borderStyle: flat ? "solid" : undefined,
|
|
36
|
+
justifyContent: 'flex-start',
|
|
37
|
+
position: 'relative',
|
|
38
|
+
borderStyle: flat ? 'solid' : undefined,
|
|
40
39
|
borderWidth: (flat && 1) || (active && 2) || 0,
|
|
41
|
-
borderColor: active
|
|
42
|
-
? getColorStyle(TrilogyColor.MAIN)
|
|
43
|
-
: getColorStyle(TrilogyColor.NEUTRAL),
|
|
40
|
+
borderColor: active ? getColorStyle(TrilogyColor.MAIN) : getColorStyle(TrilogyColor.NEUTRAL),
|
|
44
41
|
marginTop: headerOffset ? 35 : 0,
|
|
45
42
|
flex: fullheight ? 1 : 0,
|
|
46
43
|
},
|
|
47
44
|
shadow: shadowless
|
|
48
45
|
? {}
|
|
49
46
|
: {
|
|
50
|
-
shadowColor:
|
|
47
|
+
shadowColor: '#000',
|
|
51
48
|
shadowOffset: {
|
|
52
49
|
width: 0,
|
|
53
50
|
height: 1,
|
|
@@ -57,39 +54,34 @@ var Box = function (_a) {
|
|
|
57
54
|
elevation: 1,
|
|
58
55
|
},
|
|
59
56
|
skeleton: {
|
|
60
|
-
width:
|
|
57
|
+
width: '100%',
|
|
61
58
|
minHeight: 50,
|
|
62
59
|
backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_FADE),
|
|
63
|
-
overflow:
|
|
60
|
+
overflow: 'hidden',
|
|
64
61
|
borderRadius: boxRadius,
|
|
65
62
|
},
|
|
66
63
|
highlighted: {
|
|
67
|
-
position:
|
|
64
|
+
position: 'absolute',
|
|
68
65
|
width: 8,
|
|
69
66
|
borderTopStartRadius: boxRadius,
|
|
70
67
|
borderBottomStartRadius: boxRadius,
|
|
71
68
|
height: boxHeight,
|
|
72
69
|
backgroundColor: highlighted ? getColorStyle(highlighted) : 'transparent',
|
|
73
70
|
},
|
|
74
|
-
column: {
|
|
75
|
-
flexDirection: "column",
|
|
76
|
-
width: "100%",
|
|
77
|
-
},
|
|
78
71
|
boxImage: {
|
|
79
|
-
width:
|
|
72
|
+
width: '100%',
|
|
80
73
|
minHeight: 100,
|
|
81
74
|
maxHeight: 300,
|
|
82
|
-
height:
|
|
75
|
+
height: 'auto',
|
|
83
76
|
},
|
|
84
|
-
boxImageProps: {},
|
|
85
77
|
content: {
|
|
86
78
|
padding: 16,
|
|
87
79
|
},
|
|
88
80
|
});
|
|
89
|
-
var boxTestId =
|
|
81
|
+
var boxTestId = 'NotSpecified';
|
|
90
82
|
var BoxSkeleton = function () { return (React.createElement(ContentLoader, __assign({ style: styles.skeleton }, others, { testID: 'skeleton' }),
|
|
91
83
|
React.createElement(View, { style: { opacity: 0 } }, children),
|
|
92
|
-
Platform.OS ===
|
|
84
|
+
Platform.OS === 'android' && (React.createElement(View, null,
|
|
93
85
|
React.createElement(Rect, { rx: '10', ry: '10', width: '100%', height: '100%' }))))); };
|
|
94
86
|
if (skeleton) {
|
|
95
87
|
return React.createElement(BoxSkeleton, null);
|
|
@@ -100,30 +92,23 @@ var Box = function (_a) {
|
|
|
100
92
|
style: [styles.box, !flat && styles.shadow, others === null || others === void 0 ? void 0 : others.style], onLayout: function (event) {
|
|
101
93
|
var height = event.nativeEvent.layout.height;
|
|
102
94
|
setBoxHeight(height);
|
|
103
|
-
}, testID: boxTestId }, backgroundSrc ? (React.createElement(ImageBackground, { imageStyle: { borderRadius: boxRadius }, style: styles.boxImage, source: typeof backgroundSrc ===
|
|
104
|
-
? backgroundSrc
|
|
105
|
-
: { uri: backgroundSrc } },
|
|
95
|
+
}, testID: boxTestId }, backgroundSrc ? (React.createElement(ImageBackground, { imageStyle: { borderRadius: boxRadius }, style: styles.boxImage, source: typeof backgroundSrc === 'number' ? backgroundSrc : { uri: backgroundSrc } },
|
|
106
96
|
Boolean(highlighted) && React.createElement(View, { style: styles.highlighted }),
|
|
107
|
-
React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } },
|
|
108
|
-
React.createElement(View, { style: styles.column }, children)))) : (React.createElement(React.Fragment, null,
|
|
97
|
+
React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } }, children))) : (React.createElement(React.Fragment, null,
|
|
109
98
|
Boolean(highlighted) && React.createElement(View, { style: styles.highlighted }),
|
|
110
|
-
React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } },
|
|
111
|
-
React.createElement(View, { style: styles.column }, children))))));
|
|
99
|
+
React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } }, children)))));
|
|
112
100
|
}
|
|
113
101
|
return (React.createElement(View, { onLayout: function (event) {
|
|
114
102
|
var height = event.nativeEvent.layout.height;
|
|
115
103
|
setBoxHeight(height);
|
|
116
104
|
},
|
|
117
105
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
118
|
-
style: [styles.box, !flat && styles.shadow, others === null || others === void 0 ? void 0 : others.style], testID: boxTestId }, backgroundSrc ? (React.createElement(ImageBackground, { imageStyle: { borderRadius: boxRadius }, style: styles.boxImage, source: typeof backgroundSrc ===
|
|
119
|
-
? backgroundSrc
|
|
120
|
-
: { uri: backgroundSrc } },
|
|
106
|
+
style: [styles.box, !flat && styles.shadow, others === null || others === void 0 ? void 0 : others.style], testID: boxTestId }, backgroundSrc ? (React.createElement(ImageBackground, { imageStyle: { borderRadius: boxRadius }, style: styles.boxImage, source: typeof backgroundSrc === 'number' ? backgroundSrc : { uri: backgroundSrc } },
|
|
121
107
|
Boolean(highlighted) && React.createElement(View, { style: styles.highlighted }),
|
|
122
|
-
React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } },
|
|
123
|
-
React.createElement(View, { style: styles.column }, children)))) : (React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } },
|
|
108
|
+
React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } }, children))) : (React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } },
|
|
124
109
|
Boolean(highlighted) && React.createElement(View, { style: styles.highlighted }),
|
|
125
|
-
|
|
110
|
+
children))));
|
|
126
111
|
};
|
|
127
112
|
Box.displayName = ComponentName.Box;
|
|
128
113
|
export default Box;
|
|
129
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
114
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94Lm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvYm94L0JveC5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDBCQUEwQixDQUFBO0FBQ3hELE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFzQixNQUFNLHdCQUF3QixDQUFBO0FBQ3hGLE9BQU8sS0FBSyxFQUFFLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQ3ZDLE9BQU8sYUFBYSxFQUFFLEVBQUUsSUFBSSxFQUFFLE1BQU0sNkJBQTZCLENBQUE7QUFDakUsT0FBTyxFQUFFLGVBQWUsRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUFFLGdCQUFnQixFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUc1Rjs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FpQkc7QUFDSCxJQUFNLEdBQUcsR0FBRyxVQUFDLEVBY0Y7SUFiVCxJQUFBLFFBQVEsY0FBQSxFQUNSLE9BQU8sYUFBQSxFQUNQLFFBQVEsY0FBQSxFQUNSLFdBQVcsaUJBQUEsRUFDWCxVQUFVLGdCQUFBLEVBQ1YsZUFBZSxxQkFBQSxFQUNmLGFBQWEsbUJBQUEsRUFDYixRQUFRLGNBQUEsRUFDUixJQUFJLFVBQUEsRUFDSixZQUFZLGtCQUFBLEVBQ1osVUFBVSxnQkFBQSxFQUNWLE1BQU0sWUFBQSxFQUNILE1BQU0sY0FiRSxnS0FjWixDQURVO0lBRVQsSUFBTSxRQUFRLEdBQUcsYUFBYSxDQUFDLFlBQVksQ0FBQyxVQUFVLENBQUMsQ0FBQTtJQUNqRCxJQUFBLEtBQUEsT0FBNEIsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFBLEVBQXRDLFNBQVMsUUFBQSxFQUFFLFlBQVksUUFBZSxDQUFBO0lBQzdDLElBQU0sU0FBUyxHQUFHLENBQUMsQ0FBQTtJ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
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { CheckboxTileProps } from './CheckboxTileProps';
|
|
3
2
|
import { ComponentName } from '../../../../components/enumsComponentsName';
|
|
3
|
+
import { CheckboxTileProps } from './CheckboxTileProps';
|
|
4
4
|
declare const CheckboxTile: {
|
|
5
5
|
({ disabled, checked, readonly, id, label, onChange, name, value, description, icon, horizontal, ...others }: CheckboxTileProps): JSX.Element;
|
|
6
6
|
displayName: ComponentName;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { __assign, __read, __rest } from "tslib";
|
|
2
|
+
import { ComponentName } from '../../../../components/enumsComponentsName';
|
|
3
|
+
import { Icon, IconName, IconSize } from '../../../../components/icon';
|
|
4
|
+
import { SpacerSize } from '../../../../components/spacer';
|
|
5
|
+
import { Text, TextLevels } from '../../../../components/text';
|
|
6
|
+
import { View } from '../../../../components/view';
|
|
7
|
+
import { getColorStyle, TrilogyColor, TypographyAlign, TypographyBold } from '../../../../objects';
|
|
2
8
|
import React, { useState } from 'react';
|
|
3
9
|
import { StyleSheet, TouchableOpacity } from 'react-native';
|
|
4
|
-
import
|
|
5
|
-
import { ComponentName } from '../../../../components/enumsComponentsName';
|
|
6
|
-
import shortid from "shortid";
|
|
7
|
-
import { Icon, IconName, IconSize } from "../../../../components/icon";
|
|
8
|
-
import { getColorStyle, TrilogyColor, TypographyAlign, TypographyBold } from "../../../../objects";
|
|
9
|
-
import { View } from "../../../../components/view";
|
|
10
|
+
import shortid from 'shortid';
|
|
10
11
|
var CheckboxTile = function (_a) {
|
|
11
12
|
var disabled = _a.disabled, checked = _a.checked, 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, description = _a.description, icon = _a.icon, horizontal = _a.horizontal, others = __rest(_a, ["disabled", "checked", "readonly", "id", "label", "onChange", "name", "value", "description", "icon", "horizontal"]);
|
|
12
13
|
var _c = __read(useState(checked || false), 2), _checked = _c[0], setChecked = _c[1];
|
|
@@ -24,8 +25,6 @@ var CheckboxTile = function (_a) {
|
|
|
24
25
|
width: 19,
|
|
25
26
|
height: 19,
|
|
26
27
|
borderRadius: 4,
|
|
27
|
-
marginRight: 10,
|
|
28
|
-
marginLeft: 0,
|
|
29
28
|
backgroundColor: (disabled && getColorStyle(TrilogyColor.DISABLED_FADE)) ||
|
|
30
29
|
(_checked && getColorStyle(TrilogyColor.MAIN)) ||
|
|
31
30
|
'transparent',
|
|
@@ -36,8 +35,7 @@ var CheckboxTile = function (_a) {
|
|
|
36
35
|
getColorStyle(TrilogyColor.MAIN),
|
|
37
36
|
},
|
|
38
37
|
tile: {
|
|
39
|
-
padding: _checked ?
|
|
40
|
-
paddingBottom: _checked ? 7 : 8,
|
|
38
|
+
padding: _checked ? SpacerSize.FOUR - 1 : SpacerSize.FOUR,
|
|
41
39
|
maxWidth: 140,
|
|
42
40
|
borderWidth: (_checked && 2) || 1,
|
|
43
41
|
width: 126,
|
|
@@ -54,8 +52,7 @@ var CheckboxTile = function (_a) {
|
|
|
54
52
|
alignSelf: horizontal ? 'flex-start' : 'center',
|
|
55
53
|
},
|
|
56
54
|
horizontal: {
|
|
57
|
-
|
|
58
|
-
paddingHorizontal: _checked ? 5 : 6,
|
|
55
|
+
padding: _checked ? SpacerSize.FOUR - 1 : SpacerSize.FOUR,
|
|
59
56
|
width: '100%',
|
|
60
57
|
height: 'auto',
|
|
61
58
|
borderWidth: (_checked && 2) || 1,
|
|
@@ -82,45 +79,43 @@ var CheckboxTile = function (_a) {
|
|
|
82
79
|
if (horizontal) {
|
|
83
80
|
return (React.createElement(TouchableOpacity, { disabled: disabled, style: styles.horizontal, onPress: function () { return handleClick(); } },
|
|
84
81
|
React.createElement(View, { style: { flexDirection: 'row' } },
|
|
85
|
-
React.createElement(View, { style: {
|
|
82
|
+
icon && (React.createElement(View, { style: {
|
|
86
83
|
width: '10%',
|
|
87
84
|
height: 'auto',
|
|
88
85
|
justifyContent: 'center',
|
|
89
86
|
alignItems: 'center',
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
87
|
+
} },
|
|
88
|
+
React.createElement(View, null,
|
|
89
|
+
React.createElement(Icon, { size: IconSize.SMALL, name: icon, color: disabled ? TrilogyColor.DISABLED : TrilogyColor.MAIN })))),
|
|
93
90
|
React.createElement(View, { style: {
|
|
94
|
-
width: '78%',
|
|
91
|
+
width: icon ? '78%' : '88%',
|
|
95
92
|
flexDirection: 'row',
|
|
96
93
|
alignSelf: 'stretch',
|
|
97
94
|
flexWrap: 'wrap',
|
|
98
95
|
height: 'auto',
|
|
99
96
|
} },
|
|
100
|
-
React.createElement(View,
|
|
101
|
-
label && typeof label.valueOf() === 'string' && (React.createElement(Text, { style: styles.label, level: TextLevels.
|
|
97
|
+
React.createElement(View, { style: { gap: SpacerSize.ONE } },
|
|
98
|
+
label && typeof label.valueOf() === 'string' && (React.createElement(Text, { style: styles.label, level: TextLevels.ONE, typo: TypographyBold.TEXT_WEIGHT_SEMIBOLD }, String(label))),
|
|
102
99
|
description && typeof description.valueOf() === 'string' ? (React.createElement(Text, { level: TextLevels.TWO, style: styles.tileDescription }, String(description))) : (description))),
|
|
103
100
|
React.createElement(View, { style: {
|
|
104
101
|
width: '12%',
|
|
105
|
-
alignItems: 'flex-end',
|
|
106
102
|
justifyContent: 'center',
|
|
107
|
-
|
|
103
|
+
alignItems: 'flex-end',
|
|
108
104
|
} },
|
|
109
105
|
React.createElement(TouchableOpacity, { style: styles.checkBox, disabled: disabled, testID: id, onPressIn: function () { return handleClick(); } }, _checked && React.createElement(Icon, { size: IconSize.SMALLER, color: TrilogyColor.BACKGROUND, name: IconName.CHECK }))))));
|
|
110
106
|
}
|
|
111
|
-
return (React.createElement(TouchableOpacity, __assign({ disabled: disabled, style: horizontal ? styles.horizontal : styles.tile, onPress:
|
|
112
|
-
React.createElement(
|
|
113
|
-
|
|
107
|
+
return (React.createElement(TouchableOpacity, __assign({ disabled: disabled, style: horizontal ? styles.horizontal : styles.tile, onPress: handleClick }, others),
|
|
108
|
+
React.createElement(View, { style: { gap: SpacerSize.TWO } },
|
|
109
|
+
React.createElement(TouchableOpacity, { style: [{ alignSelf: 'flex-end' }, styles.checkBox], disabled: disabled, testID: id, onPressIn: handleClick }, _checked && React.createElement(Icon, { size: IconSize.SMALLER, color: TrilogyColor.BACKGROUND, name: IconName.CHECK })),
|
|
114
110
|
icon && (React.createElement(View, { style: {
|
|
115
111
|
flexDirection: 'row',
|
|
116
112
|
alignItems: 'center',
|
|
117
113
|
justifyContent: 'center',
|
|
118
|
-
marginBottom: 5,
|
|
119
114
|
} },
|
|
120
|
-
React.createElement(Icon, { size: IconSize.
|
|
121
|
-
label && typeof label.valueOf() === 'string' && (React.createElement(Text, { level: TextLevels.
|
|
122
|
-
description && typeof description.valueOf() === 'string' && (React.createElement(Text, { level: TextLevels.
|
|
115
|
+
React.createElement(Icon, { size: IconSize.SMALL, color: disabled ? TrilogyColor.DISABLED : TrilogyColor.MAIN, name: icon }))),
|
|
116
|
+
label && typeof label.valueOf() === 'string' && (React.createElement(Text, { level: TextLevels.ONE, typo: [TypographyBold.TEXT_WEIGHT_SEMIBOLD, TypographyAlign.TEXT_CENTERED], style: [styles.label] }, String(label))),
|
|
117
|
+
description && typeof description.valueOf() === 'string' && (React.createElement(Text, { level: TextLevels.TWO, typo: [TypographyAlign.TEXT_CENTERED] }, String(description))))));
|
|
123
118
|
};
|
|
124
119
|
CheckboxTile.displayName = ComponentName.CheckboxTiles;
|
|
125
120
|
export default CheckboxTile;
|
|
126
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
121
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hlY2tib3hUaWxlLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2NvbXBvbmVudHMvY2hlY2tib3gvdGlsZXMvdGlsZS9DaGVja2JveFRpbGUubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQzVELE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUNoRCxPQUFPLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3BELE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUN4QyxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxlQUFlLEVBQUUsY0FBYyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3hGLE9BQU8sS0FBSyxFQUFFLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQ3ZDLE9BQU8sRUFBRSxVQUFVLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFDM0QsT0FBTyxPQUFPLE1BQU0sU0FBUyxDQUFBO0FBRzdCLElBQU0sWUFBWSxHQUFHLFVBQUMsRUFhRjtJQVpsQixJQUFBLFFBQVEsY0FBQSxFQUNSLE9BQU8sYUFBQSxFQUNQLFFBQVEsY0FBQSxFQUNSLFVBQXVCLEVBQXZCLEVBQUUsbUJBQUcsT0FBTyxDQUFDLFFBQVEsRUFBRSxLQUFBLEVBQ3ZCLEtBQUssV0FBQSxFQUNMLFFBQVEsY0FBQSxFQUNSLElBQUksVUFBQSxFQUNKLEtBQUssV0FBQSxFQUNMLFdBQVcsaUJBQUEsRUFDWCxJQUFJLFVBQUEsRUFDSixVQUFVLGdCQUFBLEVBQ1AsTUFBTSxjQVpXLG9IQWFyQixDQURVO0lBRUgsSUFBQSxL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
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import { ColumnsProps } from '../../components/columns/ColumnsProps';
|
|
2
|
+
import React from 'react';
|
|
3
3
|
/**
|
|
4
4
|
* Columns Component
|
|
5
5
|
* @param centered {boolean} Center columns
|
|
@@ -13,5 +13,5 @@ import { ColumnsProps } from './ColumnsProps';
|
|
|
13
13
|
* @param className {string} Additionnal CSS Classes
|
|
14
14
|
* @param mobile {boolean} Responsive mode
|
|
15
15
|
*/
|
|
16
|
-
declare const Columns:
|
|
16
|
+
declare const Columns: React.ForwardRefExoticComponent<ColumnsProps & React.RefAttributes<HTMLDivElement>>;
|
|
17
17
|
export default Columns;
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { __assign, __rest } from "tslib";
|
|
2
|
-
import
|
|
3
|
-
import clsx from 'clsx';
|
|
4
|
-
import { has, is } from '../../services/classify';
|
|
5
|
-
import { hashClass } from '../../helpers';
|
|
2
|
+
import { ComponentName } from '../../components/enumsComponentsName';
|
|
6
3
|
import { useTrilogyContext } from '../../context';
|
|
7
|
-
import {
|
|
4
|
+
import { hashClass } from '../../helpers/hashClassesHelpers';
|
|
5
|
+
import { getAlignClassName } from '../../objects/facets/Alignable';
|
|
6
|
+
import { getJustifiedClassName } from '../../objects/facets/Justifiable';
|
|
7
|
+
import { has, is } from '../../services/classify';
|
|
8
|
+
import clsx from 'clsx';
|
|
9
|
+
import React from 'react';
|
|
8
10
|
/**
|
|
9
11
|
* Columns Component
|
|
10
12
|
* @param centered {boolean} Center columns
|
|
@@ -18,11 +20,12 @@ import { getAlignClassName, getJustifiedClassName } from '../../objects';
|
|
|
18
20
|
* @param className {string} Additionnal CSS Classes
|
|
19
21
|
* @param mobile {boolean} Responsive mode
|
|
20
22
|
*/
|
|
21
|
-
var Columns = function (_a) {
|
|
23
|
+
var Columns = React.forwardRef(function (_a, ref) {
|
|
22
24
|
var className = _a.className, id = _a.id, multiline = _a.multiline, scrollable = _a.scrollable, mobile = _a.mobile, gap = _a.gap, fullBleed = _a.fullBleed, marginless = _a.marginless, align = _a.align, verticalAlign = _a.verticalAlign, others = __rest(_a, ["className", "id", "multiline", "scrollable", "mobile", "gap", "fullBleed", "marginless", "align", "verticalAlign"]);
|
|
23
25
|
var styled = useTrilogyContext().styled;
|
|
24
26
|
var classes = hashClass(styled, clsx('columns', multiline && is('multiline'), fullBleed && is('fullbleed'), scrollable && is('scrollable'), gap && has("gap-".concat(gap)), typeof gap !== 'undefined' && gap === 0 && is('gapless'), mobile && is('mobile'), align && is(getJustifiedClassName(align)), verticalAlign && is(getAlignClassName(verticalAlign)), marginless && is("marginless"), className));
|
|
25
|
-
return React.createElement("div", __assign({ id: id, className: classes }, others));
|
|
26
|
-
};
|
|
27
|
+
return React.createElement("div", __assign({ ref: ref, id: id, className: classes }, others));
|
|
28
|
+
});
|
|
29
|
+
Columns.displayName = ComponentName.Columns;
|
|
27
30
|
export default Columns;
|
|
28
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
31
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29sdW1ucy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvY29sdW1ucy9Db2x1bW5zLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQ0EsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sNEJBQTRCLENBQUE7QUFDOUQsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDcEUsT0FBTyxFQUFFLEdBQUcsRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUM3QyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRXpCOzs7Ozs7Ozs7Ozs7R0FZRztBQUNILElBQU0sT0FBTyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQzlCLFVBQ0UsRUFZZSxFQUNmLEdBQThCO0lBWjVCLElBQUEsU0FBUyxlQUFBLEVBQ1QsRUFBRSxRQUFBLEVBQ0YsU0FBUyxlQUFBLEVBQ1QsVUFBVSxnQkFBQSxFQUNWLE1BQU0sWUFBQSxFQUNOLEdBQUcsU0FBQSxFQUNILFNBQVMsZUFBQSxFQUNULFVBQVUsZ0JBQUEsRUFDVixLQUFLLFdBQUEsRUFDTCxhQUFhLG1CQUFBLEVBQ1YsTUFBTSxjQVhYLG9IQVlDLENBRFU7SUFJSCxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQ3ZCLE1BQU0sRUFDTixJQUFJLENBQ0YsU0FBUyxFQUNULFNBQVMsSUFBSSxFQUFFLENBQUMsV0FBVyxDQUFDLEVBQzVCLFNBQVMsSUFBSSxFQUFFLENBQUMsV0FBVyxDQUFDLEVBQzVCLFVBQVUsSUFBSSxFQUFFLENBQUMsWUFBWSxDQUFDLEVBQzlCLEdBQUcsSUFBSSxHQUFHLENBQUMsY0FBTyxHQUFHLENBQUUsQ0FBQyxFQUN4QixPQUFPLEdBQUcsS0FBSyxXQUFXLElBQUksR0FBRyxLQUFLLENBQUMsSUFBSSxFQUFFLENBQUMsU0FBUyxDQUFDLEVBQ3hELE1BQU0sSUFBSSxFQUFFLENBQUMsUUFBUSxDQUFDLEVBQ3RCLEtBQUssSUFBSSxFQUFFLENBQUMscUJBQXFCLENBQUMsS0FBSyxDQUFDLENBQUMsRUFDekMsYUFBYSxJQUFJLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLENBQUMsQ0FBQyxFQUNyRCxVQUFVLElBQUksRUFBRSxDQUFDLFlBQVksQ0FBQyxFQUM5QixTQUFTLENBQ1YsQ0FDRixDQUFBO0lBRUQsT0FBTyxzQ0FBSyxHQUFHLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLE9BQU8sSUFBTSxNQUFNLEVBQUksQ0FBQTtBQUNsRSxDQUFDLENBQ0YsQ0FBQTtBQUNELE9BQU8sQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLE9BQU8sQ0FBQTtBQUMzQyxlQUFlLE9BQU8sQ0FBQSJ9
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ColumnsProps } from '../../components/columns/ColumnsProps';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { View } from 'react-native';
|
|
4
4
|
/**
|
|
5
5
|
* Columns Native Component
|
|
6
6
|
* @param children {React.ReactNode}
|
|
@@ -9,11 +9,5 @@ import { ColumnsProps } from './ColumnsProps';
|
|
|
9
9
|
* @param scrollable {boolean} Makes columns vertically scrollable.
|
|
10
10
|
* @param gap {GapSize} Gap between columns
|
|
11
11
|
*/
|
|
12
|
-
|
|
13
|
-
scrollable: boolean;
|
|
14
|
-
}>;
|
|
15
|
-
declare const Columns: {
|
|
16
|
-
({ children, align, gap, verticalAlign, fullBleed, scrollable, multiline, ...others }: ColumnsProps): JSX.Element;
|
|
17
|
-
displayName: ComponentName;
|
|
18
|
-
};
|
|
12
|
+
declare const Columns: React.ForwardRefExoticComponent<ColumnsProps & React.RefAttributes<View>>;
|
|
19
13
|
export default Columns;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { __assign, __read, __rest } from "tslib";
|
|
2
2
|
import { ColumnsGapValue } from '../../components/columns/ColumnsTypes';
|
|
3
|
+
import { ColumnsContext } from '../../components/columns/context';
|
|
3
4
|
import { ComponentName } from '../../components/enumsComponentsName';
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import
|
|
7
|
-
import { Dimensions, ScrollView, StyleSheet } from 'react-native';
|
|
5
|
+
import { Alignable, getAlignStyle } from '../../objects/facets/Alignable';
|
|
6
|
+
import React, { useState } from 'react';
|
|
7
|
+
import { Dimensions, ScrollView, StyleSheet, View } from 'react-native';
|
|
8
8
|
/**
|
|
9
9
|
* Columns Native Component
|
|
10
10
|
* @param children {React.ReactNode}
|
|
@@ -13,8 +13,7 @@ import { Dimensions, ScrollView, StyleSheet } from 'react-native';
|
|
|
13
13
|
* @param scrollable {boolean} Makes columns vertically scrollable.
|
|
14
14
|
* @param gap {GapSize} Gap between columns
|
|
15
15
|
*/
|
|
16
|
-
|
|
17
|
-
var Columns = function (_a) {
|
|
16
|
+
var Columns = React.forwardRef(function (_a, ref) {
|
|
18
17
|
var children = _a.children, align = _a.align, gap = _a.gap, verticalAlign = _a.verticalAlign, fullBleed = _a.fullBleed, scrollable = _a.scrollable, multiline = _a.multiline, others = __rest(_a, ["children", "align", "gap", "verticalAlign", "fullBleed", "scrollable", "multiline"]);
|
|
19
18
|
var _b = __read(useState(0), 2), width = _b[0], setWidth = _b[1];
|
|
20
19
|
var _c = __read(useState(0), 2), enlarge = _c[0], setEnlarge = _c[1];
|
|
@@ -30,7 +29,7 @@ var Columns = function (_a) {
|
|
|
30
29
|
var realGap = (typeof gap === 'undefined' && 16) || ColumnsGapValue[gap];
|
|
31
30
|
var styles = StyleSheet.create({
|
|
32
31
|
columns: {
|
|
33
|
-
width: width ? width + enlarge * 2 : '100%',
|
|
32
|
+
width: fullBleed && width ? width + enlarge * 2 : '100%',
|
|
34
33
|
marginHorizontal: -enlarge,
|
|
35
34
|
paddingHorizontal: enlarge,
|
|
36
35
|
flexDirection: 'row',
|
|
@@ -46,56 +45,30 @@ var Columns = function (_a) {
|
|
|
46
45
|
flexWrap: 'wrap',
|
|
47
46
|
},
|
|
48
47
|
scrollContainer: {
|
|
49
|
-
width: 'auto',
|
|
50
48
|
paddingHorizontal: enlarge,
|
|
51
|
-
justifyContent: 'space-around',
|
|
52
49
|
gap: realGap,
|
|
53
50
|
},
|
|
54
51
|
mobile: {
|
|
55
52
|
flexDirection: 'column',
|
|
56
53
|
},
|
|
57
54
|
});
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
realGap * ((React.Children.count(children) - 1) / React.Children.count(children))
|
|
76
|
-
: 'auto',
|
|
77
|
-
} }, child)));
|
|
78
|
-
}))));
|
|
79
|
-
}
|
|
80
|
-
return (React.createElement(View, __assign({ style: {
|
|
81
|
-
width: "100% + ".concat(enlarge * 2, "px"),
|
|
82
|
-
marginHorizontal: -enlarge,
|
|
83
|
-
} }, { onLayout: onLayoutHandler }),
|
|
84
|
-
React.createElement(ScrollView, { horizontal: true, contentContainerStyle: styles.scrollContainer },
|
|
85
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
86
|
-
React.Children.map(children, function (child) {
|
|
87
|
-
return React.cloneElement(child, {
|
|
88
|
-
style: [
|
|
89
|
-
child.props.style,
|
|
90
|
-
{
|
|
91
|
-
width: width / (12 / (child.props.size || child.props.mobileSize || 12)) - 2 * realGap,
|
|
92
|
-
flexGrow: 0,
|
|
93
|
-
},
|
|
94
|
-
child.props.narrow && { flex: 'none', flexShrink: 1 },
|
|
95
|
-
],
|
|
96
|
-
});
|
|
97
|
-
}))));
|
|
98
|
-
};
|
|
55
|
+
return (React.createElement(ColumnsContext.Provider, { value: {
|
|
56
|
+
width: width,
|
|
57
|
+
realGap: realGap,
|
|
58
|
+
scrollable: scrollable || false,
|
|
59
|
+
childrensLength: React.Children.count(children),
|
|
60
|
+
} },
|
|
61
|
+
!scrollable && (React.createElement(View, __assign({ ref: ref, style: [
|
|
62
|
+
styles.columns,
|
|
63
|
+
multiline && styles.multiline,
|
|
64
|
+
align === Alignable.ALIGNED_CENTER && styles.centered,
|
|
65
|
+
verticalAlign && styles.verticalAlign,
|
|
66
|
+
] }, others, { onLayout: onLayoutHandler }), children)),
|
|
67
|
+
scrollable && (React.createElement(View, __assign({ style: {
|
|
68
|
+
marginHorizontal: -enlarge,
|
|
69
|
+
} }, { onLayout: onLayoutHandler }),
|
|
70
|
+
React.createElement(ScrollView, { horizontal: true, contentContainerStyle: styles.scrollContainer, showsHorizontalScrollIndicator: false }, children)))));
|
|
71
|
+
});
|
|
99
72
|
Columns.displayName = ComponentName.Columns;
|
|
100
73
|
export default Columns;
|
|
101
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
74
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29sdW1ucy5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2NvbHVtbnMvQ29sdW1ucy5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFDQSxPQUFPLEVBQUUsZUFBZSxFQUFXLE1BQU0sbUNBQW1DLENBQUE7QUFDNUUsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQzdELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsU0FBUyxFQUFFLGFBQWEsRUFBRSxNQUFNLDRCQUE0QixDQUFBO0FBQ3JFLE9BQU8sS0FBSyxFQUFFLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQ3ZDLE9BQU8sRUFBRSxVQUFVLEVBQXFCLFVBQVUsRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRTFGOzs7Ozs7O0dBT0c7QUFFSCxJQUFNLE9BQU8sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUM5QixVQUNFLEVBQWtHLEVBQ2xHLEdBQW9CO0lBRGxCLElBQUEsUUFBUSxjQUFBLEVBQUUsS0FBSyxXQUFBLEVBQUUsR0FBRyxTQUFBLEVBQUUsYUFBYSxtQkFBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLFVBQVUsZ0JBQUEsRUFBRSxTQUFTLGVBQUEsRUFBSyxNQUFNLGNBQWxGLHFGQUFvRixDQUFGO0lBRzVFLElBQUEsS0FBQSxPQUFvQixRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUEsRUFBOUIsS0FBSyxRQUFBLEVBQUUsUUFBUSxRQUFlLENBQUE7SUFDL0IsSUFBQSxLQUFBLE9BQXdCLFFBQVEsQ0FBQyxDQUFDLENBQUMsSUFBQSxFQUFsQyxPQUFPLFFBQUEsRUFBRSxVQUFVLFFBQWUsQ0FBQTtJQUV6QyxJQUFNLGVBQWUsR0FBRyxVQUFDLEtBQXdCO1FBQy9DLElBQUksQ0FBQyxLQUFLLEVBQUU7WUFDRixJQUFB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
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { GapSize } from '
|
|
3
|
-
import { AlignableProps } from '../../objects';
|
|
2
|
+
import { GapSize } from '../../components/columns/ColumnsTypes';
|
|
3
|
+
import { AlignableProps } from '../../objects/facets/Alignable';
|
|
4
4
|
import { CommonProps } from '../../objects/facets/CommonProps';
|
|
5
5
|
/**
|
|
6
6
|
* Columns Interface
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import { ColumnProps } from '../../../components/columns/column/ColumnProps';
|
|
2
|
+
import React from 'react';
|
|
3
3
|
/**
|
|
4
4
|
* Columns Item Component - Columns Child
|
|
5
5
|
* @param size {ColumnsSize} Size 1-12
|
|
@@ -24,5 +24,5 @@ import { ColumnProps } from './ColumnProps';
|
|
|
24
24
|
* @param fullhdOffset {ColumnsSize} Apply => is-offset-fullhd
|
|
25
25
|
* @param align { Alignable | AlignableValues} align content
|
|
26
26
|
*/
|
|
27
|
-
declare const Column:
|
|
27
|
+
declare const Column: React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<HTMLDivElement>>;
|
|
28
28
|
export default Column;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { __assign, __rest } from "tslib";
|
|
2
|
-
import
|
|
3
|
-
import clsx from 'clsx';
|
|
4
|
-
import { is } from '../../../services/classify';
|
|
5
|
-
import { hashClass } from '../../../helpers';
|
|
2
|
+
import { ComponentName } from '../../../components/enumsComponentsName';
|
|
6
3
|
import { useTrilogyContext } from '../../../context';
|
|
7
|
-
import {
|
|
4
|
+
import { hashClass } from '../../../helpers/hashClassesHelpers';
|
|
5
|
+
import { getAlignClassName } from '../../../objects/facets/Alignable';
|
|
6
|
+
import { is } from '../../../services/classify';
|
|
7
|
+
import clsx from 'clsx';
|
|
8
|
+
import React from 'react';
|
|
8
9
|
/**
|
|
9
10
|
* Columns Item Component - Columns Child
|
|
10
11
|
* @param size {ColumnsSize} Size 1-12
|
|
@@ -29,11 +30,12 @@ import { getAlignClassName } from '../../../objects';
|
|
|
29
30
|
* @param fullhdOffset {ColumnsSize} Apply => is-offset-fullhd
|
|
30
31
|
* @param align { Alignable | AlignableValues} align content
|
|
31
32
|
*/
|
|
32
|
-
var Column = function (_a) {
|
|
33
|
+
var Column = React.forwardRef(function (_a, ref) {
|
|
33
34
|
var className = _a.className, id = _a.id, size = _a.size, mobileSize = _a.mobileSize, tabletSize = _a.tabletSize, touchSize = _a.touchSize, desktopSize = _a.desktopSize, widescreenSize = _a.widescreenSize, fullhdSize = _a.fullhdSize, offset = _a.offset, mobileOffset = _a.mobileOffset, tabletOffset = _a.tabletOffset, touchOffset = _a.touchOffset, desktopOffset = _a.desktopOffset, widescreenOffset = _a.widescreenOffset, fullhdOffset = _a.fullhdOffset, narrow = _a.narrow, verticalAlign = _a.verticalAlign, others = __rest(_a, ["className", "id", "size", "mobileSize", "tabletSize", "touchSize", "desktopSize", "widescreenSize", "fullhdSize", "offset", "mobileOffset", "tabletOffset", "touchOffset", "desktopOffset", "widescreenOffset", "fullhdOffset", "narrow", "verticalAlign"]);
|
|
34
35
|
var styled = useTrilogyContext().styled;
|
|
35
36
|
var classes = hashClass(styled, clsx('column', size && is("".concat(size)), mobileSize && is("".concat(mobileSize, "-mobile")), tabletSize && is("".concat(tabletSize, "-tablet")), touchSize && is("".concat(touchSize, "-tablet")), desktopSize && is("".concat(desktopSize, "-desktop")), widescreenSize && is("".concat(widescreenSize, "-widescreen")), fullhdSize && is("".concat(fullhdSize, "-fullhd")), offset && is("offset-".concat(offset)), mobileOffset && is("offset-".concat(mobileOffset, "-mobile")), tabletOffset && is("offset-".concat(tabletOffset, "-tablet")), touchOffset && is("offset-".concat(touchOffset, "-tablet")), desktopOffset && is("offset-".concat(desktopOffset, "-desktop")), widescreenOffset && is("offset-".concat(widescreenOffset, "-widescreen")), fullhdOffset && is("offset-".concat(fullhdOffset, "-fullhd")), narrow && is('narrow'), verticalAlign && is(getAlignClassName(verticalAlign)), className));
|
|
36
|
-
return React.createElement("div", __assign({ id: id, className: classes }, others));
|
|
37
|
-
};
|
|
37
|
+
return React.createElement("div", __assign({ ref: ref, id: id, className: classes }, others));
|
|
38
|
+
});
|
|
39
|
+
Column.displayName = ComponentName.Column;
|
|
38
40
|
export default Column;
|
|
39
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
41
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29sdW1uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9jb2x1bW5zL2NvbHVtbi9Db2x1bW4udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFDQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQTtBQUM5RCxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDeEMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F1Qkc7QUFFSCxJQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUM3QixVQUNFLEVBb0JjLEVBQ2QsR0FBOEI7SUFwQjVCLElBQUEsU0FBUyxlQUFBLEVBQ1QsRUFBRSxRQUFBLEVBQ0YsSUFBSSxVQUFBLEVBQ0osVUFBVSxnQkFBQSxFQUNWLFVBQVUsZ0JBQUEsRUFDVixTQUFTLGVBQUEsRUFDVCxXQUFXLGlCQUFBLEVBQ1gsY0FBYyxvQkFBQSxFQUNkLFVBQVUsZ0JBQUEsRUFDVixNQUFNLFlBQUEsRUFDTixZQUFZLGtCQUFBLEVBQ1osWUFBWSxrQkFBQSxFQUNaLFdBQVcsaUJBQUEsRUFDWCxhQUFhLG1CQUFBLEVBQ2IsZ0JBQWdCLHNCQUFBLEVBQ2hCLFlBQVksa0JBQUEsRUFDWixNQUFNLFlBQUEsRUFDTixhQUFhLG1CQUFBLEVBQ1YsTUFBTSxjQW5CWCw0UEFvQkMsQ0FEVTtJQUlILElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FDRixRQUFRLEVBQ1IsSUFBSSxJQUFJLEVBQUUsQ0FBQyxVQUFHLElBQUksQ0FBRSxDQUFDLEVBQ3JCLFVBQVUsSUFBSSxFQUFFLENBQUMsVUFBRyxVQUFVLFlBQVMsQ0FBQyxFQUN4QyxVQUFVLElBQUksRUFBRSxDQUFDLFVBQUcsVUFBVSxZQUFTLENBQUMsRUFDeEMsU0FBUyxJQUFJLEVBQUUsQ0FBQyxVQUFHLFNBQVMsWUFBUyxDQUFDLEVBQ3RDLFdBQVcsSUFBSSxFQUFFLENBQUMsVUFBRyxXQUFXLGFBQVUsQ0FBQyxFQUMzQyxjQUFjLElBQUksRUFBRSxDQUFDLFVBQUcsY0FBYyxnQkFBYSxDQUFDLEVBQ3BELFVBQVUsSUFBSSxFQUFFLENBQUMsVUFBRyxVQUFVLFlBQVMsQ0FBQyxFQUN4QyxNQUFNLElBQUksRUFBRSxDQUFDLGlCQUFVLE1BQU0sQ0FBRSxDQUFDLEVBQ2hDLFlBQVksSUFBSSxFQUFFLENBQUMsaUJBQVUsWUFBWSxZQUFTLENBQUMsRUFDbkQsWUFBWSxJQUFJLEVBQUUsQ0FBQyxpQkFBVSxZQUFZLFlBQVMsQ0FBQyxFQUNuRCxXQUFXLElBQUksRUFBRSxDQUFDLGlCQUFVLFdBQVcsWUFBUyxDQUFDLEVBQ2pELGFBQWEsSUFBSSxFQUFFLENBQUMsaUJBQVUsYUFBYSxhQUFVLENBQUMsRUFDdEQsZ0JBQWdCLElBQUksRUFBRSxDQUFDLGlCQUFVLGdCQUFnQixnQkFBYSxDQUFDLEVBQy9ELFlBQVksSUFBSSxFQUFFLENBQUMsaUJBQVUsWUFBWSxZQUFTLENBQUMsRUFDbkQsTUFBTSxJQUFJLEVBQUUsQ0FBQyxRQUFRLENBQUMsRUFDdEIsYUFBYSxJQUFJLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLENBQUMsQ0FBQyxFQUNyRCxTQUFTLENBQ1YsQ0FDRixDQUFBO0lBRUQsT0FBTyxzQ0FBSyxHQUFHLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLE9BQU8sSUFBTSxNQUFNLEVBQUksQ0FBQTtBQUNsRSxDQUFDLENBQ0YsQ0FBQTtBQUNELE1BQU0sQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLE1BQU0sQ0FBQTtBQUN6QyxlQUFlLE1BQU0sQ0FBQSJ9
|