@trilogy-ds/react 4.9.0 → 4.9.2-beta-column
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/columns/column/Column.native.js +13 -11
- package/lib/components/flex-box/DirectionDefaults.js +15 -3
- package/lib/components/flex-box/FlexBox.js +2 -2
- package/lib/components/flex-box/FlexBoxPropsDefaults.js +4 -0
- package/lib/objects/facets/Direction.d.ts +3 -1
- package/lib/objects/facets/Direction.js +3 -1
- package/lib/version.d.ts +1 -1
- package/lib/version.js +2 -2
- package/package.json +1 -1
|
@@ -11,25 +11,27 @@ import { View } from 'react-native';
|
|
|
11
11
|
var Column = React.forwardRef(function (_a, ref) {
|
|
12
12
|
var children = _a.children, narrow = _a.narrow, size = _a.size, verticalAlign = _a.verticalAlign, others = __rest(_a, ["children", "narrow", "size", "verticalAlign"]);
|
|
13
13
|
var _b = React.useContext(ColumnsContext), width = _b.width, realGap = _b.realGap, scrollable = _b.scrollable, childrensLength = _b.childrensLength;
|
|
14
|
+
var calculatedWidth = React.useMemo(function () { return size ? (size / 12) * width - realGap * ((childrensLength - 1) / childrensLength) : 0; }, [size, width, realGap, childrensLength]);
|
|
14
15
|
var scrollableStyle = React.useMemo(function () { return ({
|
|
15
16
|
width: size
|
|
16
|
-
?
|
|
17
|
+
? calculatedWidth
|
|
17
18
|
: narrow
|
|
18
19
|
? 'auto'
|
|
19
20
|
: width - 2 * realGap,
|
|
20
|
-
}); }, [size, narrow, width, realGap
|
|
21
|
+
}); }, [size, narrow, calculatedWidth, width, realGap]);
|
|
21
22
|
var noScrollableStyle = React.useMemo(function () { return ({
|
|
22
|
-
flex: narrow ? 0 : 1,
|
|
23
23
|
flexGrow: size || narrow ? 0 : 1,
|
|
24
24
|
flexShrink: narrow ? 1 : 0,
|
|
25
|
-
flexBasis: size ?
|
|
26
|
-
}); }, [size, narrow,
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
25
|
+
flexBasis: size ? calculatedWidth : 'auto',
|
|
26
|
+
}); }, [size, narrow, calculatedWidth]);
|
|
27
|
+
var alignmentStyle = React.useMemo(function () { return ({ justifyContent: getAlignStyle(verticalAlign) }); }, [verticalAlign]);
|
|
28
|
+
var combinedStyle = React.useMemo(function () { return [
|
|
29
|
+
scrollable && scrollableStyle,
|
|
30
|
+
!scrollable && noScrollableStyle,
|
|
31
|
+
alignmentStyle,
|
|
32
|
+
]; }, [scrollable, scrollableStyle, noScrollableStyle, alignmentStyle]);
|
|
33
|
+
return (React.createElement(View, __assign({ ref: ref, style: combinedStyle }, others), children));
|
|
32
34
|
});
|
|
33
35
|
Column.displayName = ComponentName.Column;
|
|
34
36
|
export default Column;
|
|
35
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
37
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29sdW1uLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvY29sdW1ucy9jb2x1bW4vQ29sdW1uLm5hdGl2ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUNBLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUM3RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUN6QyxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDekIsT0FBTyxFQUFFLElBQUksRUFBYSxNQUFNLGNBQWMsQ0FBQTtBQUU5Qzs7O0dBR0c7QUFFSCxJQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUM3QixVQUFDLEVBQW9ELEVBQUUsR0FBRztJQUF2RCxJQUFBLFFBQVEsY0FBQSxFQUFFLE1BQU0sWUFBQSxFQUFFLElBQUksVUFBQSxFQUFFLGFBQWEsbUJBQUEsRUFBSyxNQUFNLGNBQWxELCtDQUFvRCxDQUFGO0lBQzNDLElBQUEsS0FBa0QsS0FBSyxDQUFDLFVBQVUsQ0FBQyxjQUFjLENBQUMsRUFBaEYsS0FBSyxXQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsVUFBVSxnQkFBQSxFQUFFLGVBQWUscUJBQXFDLENBQUE7SUFFeEYsSUFBTSxlQUFlLEdBQUcsS0FBSyxDQUFDLE9BQU8sQ0FDbkMsY0FBTSxPQUFBLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLEdBQUcsRUFBRSxDQUFDLEdBQUcsS0FBSyxHQUFHLE9BQU8sR0FBRyxDQUFDLENBQUMsZUFBZSxHQUFHLENBQUMsQ0FBQyxHQUFHLGVBQWUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQXBGLENBQW9GLEVBQzFGLENBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUUsZUFBZSxDQUFDLENBQ3hDLENBQUE7SUFFRCxJQUFNLGVBQWUsR0FBYyxLQUFLLENBQUMsT0FBTyxDQUM5QyxjQUFNLE9BQUEsQ0FBQztRQUNMLEtBQUssRUFBRSxJQUFJO1lBQ1QsQ0FBQyxDQUFDLGVBQWU7WUFDakIsQ0FBQyxDQUFDLE1BQU07Z0JBQ1IsQ0FBQyxDQUFDLE1BQU07Z0JBQ1IsQ0FBQyxDQUFDLEtBQUssR0FBRyxDQUFDLEdBQUcsT0FBTztLQUN4QixDQUFDLEVBTkksQ0FNSixFQUNGLENBQUMsSUFBSSxFQUFFLE1BQU0sRUFBRSxlQUFlLEVBQUUsS0FBSyxFQUFFLE9BQU8sQ0FBQyxDQUNoRCxDQUFBO0lBRUQsSUFBTSxpQkFBaUIsR0FBYyxLQUFLLENBQUMsT0FBTyxDQUNoRCxjQUFNLE9BQUEsQ0FBQztRQUNMLFFBQVEsRUFBRSxJQUFJLElBQUksTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDaEMsVUFBVSxFQUFFLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQzFCLFNBQVMsRUFBRSxJQUFJLENBQUMsQ0FBQyxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsTUFBTTtLQUMzQyxDQUFDLEVBSkksQ0FJSixFQUNGLENBQUMsSUFBSSxFQUFFLE1BQU0sRUFBRSxlQUFlLENBQUMsQ0FDaEMsQ0FBQTtJQUVELElBQU0sY0FBYyxHQUFHLEtBQUssQ0FBQyxPQUFPLENBQ2xDLGNBQU0sT0FBQSxDQUFDLEVBQUUsY0FBYyxFQUFFLGFBQWEsQ0FBQyxhQUFhLENBQXlDLEVBQUUsQ0FBQyxFQUExRixDQUEwRixFQUNoRyxDQUFDLGFBQWEsQ0FBQyxDQUNoQixDQUFBO0lBRUQsSUFBTSxhQUFhLEdBQUcsS0FBSyxDQUFDLE9BQU8sQ0FDakMsY0FBTSxPQUFBO1FBQ0osVUFBVSxJQUFJLGVBQWU7UUFDN0IsQ0FBQyxVQUFVLElBQUksaUJBQWlCO1FBQ2hDLGNBQWM7S0FDZixFQUpLLENBSUwsRUFDRCxDQUFDLFVBQVUsRUFBRSxlQUFlLEVBQUUsaUJBQWlCLEVBQUUsY0FBYyxDQUFDLENBQ2pFLENBQUE7SUFFRCxPQUFPLENBQ0wsb0JBQUMsSUFBSSxhQUNILEdBQUcsRUFBRSxHQUFHLEVBQ1IsS0FBSyxFQUFFLGFBQWEsSUFDaEIsTUFBTSxHQUVULFFBQVEsQ0FDSixDQUNSLENBQUE7QUFDSCxDQUFDLENBQ0YsQ0FBQTtBQUVELE1BQU0sQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLE1BQU0sQ0FBQTtBQUV6QyxlQUFlLE1BQU0sQ0FBQSJ9
|
|
@@ -6,7 +6,11 @@ export default {
|
|
|
6
6
|
"row",
|
|
7
7
|
"column",
|
|
8
8
|
"row",
|
|
9
|
-
"column"
|
|
9
|
+
"column",
|
|
10
|
+
"row-reverse",
|
|
11
|
+
"column-reverse",
|
|
12
|
+
"row-reverse",
|
|
13
|
+
"column-reverse"
|
|
10
14
|
]
|
|
11
15
|
},
|
|
12
16
|
"tablet": {
|
|
@@ -16,7 +20,11 @@ export default {
|
|
|
16
20
|
"row",
|
|
17
21
|
"column",
|
|
18
22
|
"row",
|
|
19
|
-
"column"
|
|
23
|
+
"column",
|
|
24
|
+
"row-reverse",
|
|
25
|
+
"column-reverse",
|
|
26
|
+
"row-reverse",
|
|
27
|
+
"column-reverse"
|
|
20
28
|
]
|
|
21
29
|
},
|
|
22
30
|
"desktop": {
|
|
@@ -26,7 +34,11 @@ export default {
|
|
|
26
34
|
"row",
|
|
27
35
|
"column",
|
|
28
36
|
"row",
|
|
29
|
-
"column"
|
|
37
|
+
"column",
|
|
38
|
+
"row-reverse",
|
|
39
|
+
"column-reverse",
|
|
40
|
+
"row-reverse",
|
|
41
|
+
"column-reverse"
|
|
30
42
|
]
|
|
31
43
|
}
|
|
32
44
|
};
|
|
@@ -25,9 +25,9 @@ var FlexBox = React.forwardRef(function (_a, ref) {
|
|
|
25
25
|
var styled = useTrilogyContext().styled;
|
|
26
26
|
var isNumber = typeof gap === 'number';
|
|
27
27
|
var isValueDirection = typeof direction === 'string';
|
|
28
|
-
var classes = hashClass(styled, clsx('flex-box', isValueDirection && direction && is("direction-".concat(direction)), !isValueDirection && (direction === null || direction === void 0 ? void 0 : direction.desktop) && is("direction-".concat(direction.desktop, "-desktop")), !isValueDirection && (direction === null || direction === void 0 ? void 0 : direction.mobile) && is("direction-".concat(direction.mobile, "-mobile")), !isValueDirection && (direction === null || direction === void 0 ? void 0 : direction.tablet) && is("direction-".concat(direction.tablet, "-tablet")), align && is(getAlignClassName(align)), justify && is(getJustifyClassName(justify)), scrollable && is('scrollable'), !isNumber && (gap === null || gap === void 0 ? void 0 : gap.mobile) && has("gap-
|
|
28
|
+
var classes = hashClass(styled, clsx('flex-box', isValueDirection && direction && is("direction-".concat(direction)), !isValueDirection && (direction === null || direction === void 0 ? void 0 : direction.desktop) && is("direction-".concat(direction.desktop, "-desktop")), !isValueDirection && (direction === null || direction === void 0 ? void 0 : direction.mobile) && is("direction-".concat(direction.mobile, "-mobile")), !isValueDirection && (direction === null || direction === void 0 ? void 0 : direction.tablet) && is("direction-".concat(direction.tablet, "-tablet")), align && is(getAlignClassName(align)), justify && is(getJustifyClassName(justify)), scrollable && is('scrollable'), !isNumber && (gap === null || gap === void 0 ? void 0 : gap.mobile) && has("gap-".concat(gap.mobile, "-mobile")), !isNumber && (gap === null || gap === void 0 ? void 0 : gap.tablet) && has("gap-".concat(gap.tablet, "-tablet")), !isNumber && (gap === null || gap === void 0 ? void 0 : gap.desktop) && has("gap-".concat(gap.desktop, "-desktop")), isNumber && has("gap-".concat(gap)), fullheight && is('fullheight'), className));
|
|
29
29
|
return React.createElement("div", __assign({ ref: ref, id: id, className: classes }, others));
|
|
30
30
|
});
|
|
31
31
|
FlexBox.displayName = ComponentName.FlexBox;
|
|
32
32
|
export default FlexBox;
|
|
33
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
33
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmxleEJveC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvZmxleC1ib3gvRmxleEJveC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDRCQUE0QixDQUFBO0FBQzlELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ2xFLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQ3BDLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFHekI7Ozs7Ozs7Ozs7OztHQVlHO0FBQ0gsSUFBTSxPQUFPLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDOUIsVUFBQyxFQUFvRixFQUFFLEdBQUc7SUFBdkYsSUFBQSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUEsRUFBRSxHQUFHLFNBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxLQUFLLFdBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxVQUFVLGdCQUFBLEVBQUUsVUFBVSxnQkFBQSxFQUFLLE1BQU0sY0FBbEYsdUZBQW9GLENBQUY7SUFDekUsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFDdEMsSUFBTSxRQUFRLEdBQUcsT0FBTyxHQUFHLEtBQUssUUFBUSxDQUFBO0lBQ3hDLElBQU0sZ0JBQWdCLEdBQUcsT0FBTyxTQUFTLEtBQUssUUFBUSxDQUFBO0lBQ3RELElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FDRixVQUFVLEVBQ1YsZ0JBQWdCLElBQUksU0FBUyxJQUFJLEVBQUUsQ0FBQyxvQkFBYSxTQUFTLENBQUUsQ0FBQyxFQUM3RCxDQUFDLGdCQUFnQixLQUFJLFNBQVMsYUFBVCxTQUFTLHVCQUFULFNBQVMsQ0FBRSxPQUFPLENBQUEsSUFBSSxFQUFFLENBQUMsb0JBQWEsU0FBUyxDQUFDLE9BQU8sYUFBVSxDQUFDLEVBQ3ZGLENBQUMsZ0JBQWdCLEtBQUksU0FBUyxhQUFULFNBQVMsdUJBQVQsU0FBUyxDQUFFLE1BQU0sQ0FBQSxJQUFJLEVBQUUsQ0FBQyxvQkFBYSxTQUFTLENBQUMsTUFBTSxZQUFTLENBQUMsRUFDcEYsQ0FBQyxnQkFBZ0IsS0FBSSxTQUFTLGFBQVQsU0FBUyx1QkFBVCxTQUFTLENBQUUsTUFBTSxDQUFBLElBQUksRUFBRSxDQUFDLG9CQUFhLFNBQVMsQ0FBQyxNQUFNLFlBQVMsQ0FBQyxFQUNwRixLQUFLLElBQUksRUFBRSxDQUFDLGlCQUFpQixDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQ3JDLE9BQU8sSUFBSSxFQUFFLENBQUMsbUJBQW1CLENBQUMsT0FBTyxDQUFDLENBQUMsRUFDM0MsVUFBVSxJQUFJLEVBQUUsQ0FBQyxZQUFZLENBQUMsRUFDOUIsQ0FBQyxRQUFRLEtBQUksR0FBRyxhQUFILEdBQUcsdUJBQUgsR0FBRyxDQUFFLE1BQU0sQ0FBQSxJQUFJLEdBQUcsQ0FBQyxjQUFPLEdBQUcsQ0FBQyxNQUFNLFlBQVMsQ0FBQyxFQUMzRCxDQUFDLFFBQVEsS0FBSSxHQUFHLGFBQUgsR0FBRyx1QkFBSCxHQUFHLENBQUUsTUFBTSxDQUFBLElBQUksR0FBRyxDQUFDLGNBQU8sR0FBRyxDQUFDLE1BQU0sWUFBUyxDQUFDLEVBQzNELENBQUMsUUFBUSxLQUFJLEdBQUcsYUFBSCxHQUFHLHVCQUFILEdBQUcsQ0FBRSxPQUFPLENBQUEsSUFBSSxHQUFHLENBQUMsY0FBTyxHQUFHLENBQUMsT0FBTyxhQUFVLENBQUMsRUFDOUQsUUFBUSxJQUFJLEdBQUcsQ0FBQyxjQUFPLEdBQUcsQ0FBRSxDQUFDLEVBQzdCLFVBQVUsSUFBSSxFQUFFLENBQUMsWUFBWSxDQUFDLEVBQzlCLFNBQVMsQ0FDVixDQUNGLENBQUE7SUFFRCxPQUFPLHNDQUFLLEdBQUcsRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsT0FBTyxJQUFNLE1BQU0sRUFBSSxDQUFBO0FBQ2xFLENBQUMsQ0FDRixDQUFBO0FBRUQsT0FBTyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsT0FBTyxDQUFBO0FBQzNDLGVBQWUsT0FBTyxDQUFBIn0=
|
|
@@ -2,5 +2,7 @@ export var DirectionEnum;
|
|
|
2
2
|
(function (DirectionEnum) {
|
|
3
3
|
DirectionEnum["ROW"] = "row";
|
|
4
4
|
DirectionEnum["COLUMN"] = "column";
|
|
5
|
+
DirectionEnum["ROW_REVERSE"] = "row-reverse";
|
|
6
|
+
DirectionEnum["COLUMN_REVERSE"] = "column-reverse";
|
|
5
7
|
})(DirectionEnum || (DirectionEnum = {}));
|
|
6
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
8
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGlyZWN0aW9uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vb2JqZWN0cy9mYWNldHMvRGlyZWN0aW9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBTixJQUFZLGFBS1g7QUFMRCxXQUFZLGFBQWE7SUFDdkIsNEJBQVcsQ0FBQTtJQUNYLGtDQUFpQixDQUFBO0lBQ2pCLDRDQUEyQixDQUFBO0lBQzNCLGtEQUFpQyxDQUFBO0FBQ25DLENBQUMsRUFMVyxhQUFhLEtBQWIsYUFBYSxRQUt4QiJ9
|
package/lib/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const version = "4.9.
|
|
1
|
+
export declare const version = "4.9.2-beta-column";
|
package/lib/version.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export var version = "4.9.
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
1
|
+
export var version = "4.9.2-beta-column";
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3ZlcnNpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxDQUFDLElBQU0sT0FBTyxHQUFHLG1CQUFtQixDQUFBIn0=
|