@telus-uds/components-base 0.0.2-prerelease.7 → 0.0.2-prerelease.8
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/.ultra.cache.json +1 -1
- package/CHANGELOG.md +27 -0
- package/__fixtures__/Accessible.js +33 -0
- package/__fixtures__/Accessible.native.js +32 -0
- package/__fixtures__/testTheme.js +429 -29
- package/__tests__/ActivityIndicator/ActivityIndicator.test.jsx +1 -1
- package/__tests__/Button/ButtonGroup.test.jsx +2 -2
- package/__tests__/Checkbox/CheckboxGroup.test.jsx +247 -0
- package/__tests__/Icon/Icon.test.jsx +3 -3
- package/__tests__/Modal/Modal.test.jsx +47 -0
- package/__tests__/Notification/Notification.test.jsx +20 -0
- package/__tests__/Pagination/Pagination.test.jsx +2 -2
- package/__tests__/Progress/Progress.test.jsx +79 -0
- package/__tests__/Radio/RadioGroup.test.jsx +221 -0
- package/__tests__/RadioCard/RadioCard.test.jsx +87 -0
- package/__tests__/RadioCard/RadioCardGroup.test.jsx +247 -0
- package/__tests__/Search/Search.test.jsx +72 -0
- package/__tests__/Skeleton/Skeleton.test.jsx +1 -1
- package/__tests__/StepTracker/StepTracker.test.jsx +94 -0
- package/__tests__/Tabs/Tabs.test.jsx +200 -0
- package/__tests__/Tags/Tags.test.jsx +1 -1
- package/__tests__/utils/input.test.js +58 -0
- package/__tests__/utils/useCopy.test.js +14 -3
- package/babel.config.js +20 -0
- package/jest.config.js +1 -1
- package/lib/A11yInfoProvider/index.js +54 -26
- package/lib/A11yText/index.js +37 -14
- package/lib/ActivityIndicator/Spinner.js +78 -0
- package/lib/ActivityIndicator/Spinner.native.js +121 -87
- package/lib/ActivityIndicator/index.js +28 -12
- package/lib/ActivityIndicator/shared.js +27 -12
- package/lib/BaseProvider/index.js +34 -11
- package/lib/Box/Box.js +54 -31
- package/lib/Box/index.js +13 -2
- package/lib/Button/Button.js +32 -11
- package/lib/Button/ButtonBase.js +85 -78
- package/lib/Button/ButtonGroup.js +94 -70
- package/lib/Button/ButtonLink.js +38 -15
- package/lib/Button/index.js +31 -4
- package/lib/Button/propTypes.js +32 -9
- package/lib/Card/Card.js +36 -41
- package/lib/Card/CardBase.js +78 -0
- package/lib/Card/PressableCardBase.js +137 -0
- package/lib/Card/index.js +40 -2
- package/lib/Checkbox/Checkbox.js +139 -103
- package/lib/Checkbox/CheckboxGroup.js +231 -0
- package/lib/Checkbox/CheckboxInput.js +74 -0
- package/lib/Checkbox/CheckboxInput.native.js +9 -1
- package/lib/Checkbox/index.js +21 -2
- package/lib/Divider/Divider.js +50 -24
- package/lib/Divider/index.js +13 -2
- package/lib/ExpandCollapse/Accordion.js +20 -7
- package/lib/ExpandCollapse/Control.js +50 -27
- package/lib/ExpandCollapse/ExpandCollapse.js +41 -24
- package/lib/ExpandCollapse/Panel.js +75 -37
- package/lib/ExpandCollapse/index.js +25 -7
- package/lib/Feedback/Feedback.js +69 -40
- package/lib/Feedback/index.js +13 -2
- package/lib/Fieldset/Fieldset.js +160 -0
- package/lib/Fieldset/FieldsetContainer.js +41 -0
- package/lib/Fieldset/FieldsetContainer.native.js +33 -0
- package/lib/Fieldset/Legend.js +33 -0
- package/lib/Fieldset/Legend.native.js +43 -0
- package/lib/Fieldset/cssReset.js +21 -0
- package/lib/Fieldset/index.js +13 -0
- package/lib/FlexGrid/Col/Col.js +67 -38
- package/lib/FlexGrid/Col/index.js +13 -2
- package/lib/FlexGrid/FlexGrid.js +70 -45
- package/lib/FlexGrid/Row/Row.js +48 -27
- package/lib/FlexGrid/Row/index.js +13 -2
- package/lib/FlexGrid/helpers/index.js +9 -1
- package/lib/FlexGrid/index.js +13 -2
- package/lib/FlexGrid/providers/GutterContext.js +15 -3
- package/lib/Icon/Icon.js +46 -44
- package/lib/Icon/IconText.js +49 -21
- package/lib/Icon/index.js +31 -4
- package/lib/InputLabel/InputLabel.js +70 -36
- package/lib/InputLabel/LabelContent.js +31 -0
- package/lib/InputLabel/LabelContent.native.js +9 -1
- package/lib/InputLabel/index.js +13 -2
- package/lib/InputSupports/InputSupports.js +62 -48
- package/lib/InputSupports/index.js +13 -2
- package/lib/InputSupports/propTypes.js +19 -8
- package/lib/InputSupports/useInputSupports.js +41 -0
- package/lib/Link/ChevronLink.js +33 -16
- package/lib/Link/InlinePressable.js +50 -0
- package/lib/Link/InlinePressable.native.js +34 -11
- package/lib/Link/Link.js +25 -9
- package/lib/Link/LinkBase.js +87 -57
- package/lib/Link/TextButton.js +32 -13
- package/lib/Link/index.js +39 -5
- package/lib/List/List.js +51 -23
- package/lib/List/ListItem.js +70 -40
- package/lib/List/index.js +13 -2
- package/lib/Modal/Modal.js +226 -0
- package/lib/Modal/dictionary.js +16 -0
- package/lib/Modal/index.js +13 -0
- package/lib/Notification/Notification.js +200 -0
- package/lib/Notification/dictionary.js +15 -0
- package/lib/Notification/index.js +13 -0
- package/lib/Pagination/PageButton.js +47 -25
- package/lib/Pagination/Pagination.js +70 -40
- package/lib/Pagination/SideButton.js +63 -37
- package/lib/Pagination/dictionary.js +9 -2
- package/lib/Pagination/index.js +13 -2
- package/lib/Pagination/usePagination.js +12 -2
- package/lib/Progress/Progress.js +99 -0
- package/lib/Progress/ProgressBar.js +146 -0
- package/lib/Progress/ProgressBarBackground.js +57 -0
- package/lib/Progress/index.js +16 -0
- package/lib/Radio/Radio.js +110 -109
- package/lib/Radio/RadioButton.js +141 -0
- package/lib/Radio/RadioGroup.js +233 -0
- package/lib/Radio/RadioInput.js +76 -0
- package/lib/Radio/RadioInput.native.js +9 -1
- package/lib/Radio/index.js +21 -2
- package/lib/RadioCard/RadioCard.js +240 -0
- package/lib/RadioCard/RadioCardGroup.js +251 -0
- package/lib/RadioCard/index.js +21 -0
- package/lib/Search/Search.js +243 -0
- package/lib/Search/dictionary.js +19 -0
- package/lib/Search/index.js +13 -0
- package/lib/Select/Group.js +33 -0
- package/lib/Select/Group.native.js +16 -5
- package/lib/Select/Item.js +29 -0
- package/lib/Select/Item.native.js +14 -4
- package/lib/Select/Picker.js +79 -0
- package/lib/Select/Picker.native.js +52 -24
- package/lib/Select/Select.js +110 -82
- package/lib/Select/index.js +19 -6
- package/lib/SideNav/Item.js +54 -33
- package/lib/SideNav/ItemContent.js +41 -15
- package/lib/SideNav/ItemsGroup.js +46 -27
- package/lib/SideNav/SideNav.js +92 -69
- package/lib/SideNav/index.js +15 -1
- package/lib/Skeleton/Skeleton.js +55 -37
- package/lib/Skeleton/index.js +13 -2
- package/lib/Skeleton/skeleton.constant.js +12 -0
- package/lib/Skeleton/skeletonWebAnimation.js +27 -0
- package/lib/Skeleton/useSkeletonNativeAnimation.js +37 -0
- package/lib/Spacer/Spacer.js +31 -12
- package/lib/Spacer/index.js +13 -2
- package/lib/StackView/StackView.js +49 -27
- package/lib/StackView/StackWrap.js +33 -10
- package/lib/StackView/StackWrap.native.js +13 -2
- package/lib/StackView/StackWrapBox.js +46 -24
- package/lib/StackView/StackWrapGap.js +43 -22
- package/lib/StackView/common.js +19 -4
- package/lib/StackView/getStackedContent.js +49 -19
- package/lib/StackView/index.js +29 -5
- package/lib/StepTracker/Step.js +245 -0
- package/lib/StepTracker/StepTracker.js +197 -0
- package/lib/StepTracker/dictionary.js +17 -0
- package/lib/StepTracker/index.js +13 -0
- package/lib/Tabs/HorizontalScroll.js +199 -0
- package/lib/Tabs/ScrollViewEnd.js +66 -0
- package/lib/Tabs/ScrollViewEnd.native.js +41 -0
- package/lib/Tabs/Tabs.js +117 -0
- package/lib/Tabs/TabsItem.js +234 -0
- package/lib/Tabs/TabsScrollButton.js +121 -0
- package/lib/Tabs/dictionary.js +18 -0
- package/lib/Tabs/index.js +13 -0
- package/lib/Tabs/itemPositions.js +128 -0
- package/lib/Tags/Tags.js +130 -97
- package/lib/Tags/index.js +13 -2
- package/lib/TextInput/TextArea.js +51 -24
- package/lib/TextInput/TextInput.js +40 -19
- package/lib/TextInput/TextInputBase.js +78 -55
- package/lib/TextInput/index.js +23 -3
- package/lib/TextInput/propTypes.js +18 -7
- package/lib/ThemeProvider/ThemeProvider.js +38 -14
- package/lib/ThemeProvider/index.js +61 -6
- package/lib/ThemeProvider/useSetTheme.js +14 -5
- package/lib/ThemeProvider/useTheme.js +13 -4
- package/lib/ThemeProvider/useThemeTokens.js +32 -16
- package/lib/ThemeProvider/utils/index.js +31 -2
- package/lib/ThemeProvider/utils/styles.js +52 -16
- package/lib/ThemeProvider/utils/theme-tokens.js +94 -16
- package/lib/ToggleSwitch/ToggleSwitch.js +75 -51
- package/lib/ToggleSwitch/index.js +13 -2
- package/lib/Tooltip/{Backdrop.web.js → Backdrop.js} +22 -18
- package/lib/Tooltip/Backdrop.native.js +39 -15
- package/lib/Tooltip/Tooltip.js +112 -70
- package/lib/Tooltip/dictionary.js +9 -2
- package/lib/Tooltip/getTooltipPosition.js +9 -1
- package/lib/Tooltip/index.js +13 -2
- package/lib/TooltipButton/TooltipButton.js +57 -38
- package/lib/TooltipButton/index.js +13 -2
- package/lib/Typography/Typography.js +57 -27
- package/lib/Typography/index.js +13 -2
- package/lib/ViewportProvider/ViewportProvider.js +34 -13
- package/lib/ViewportProvider/index.js +28 -3
- package/lib/ViewportProvider/useViewport.js +15 -3
- package/lib/ViewportProvider/useViewportListener.js +24 -10
- package/lib/index.js +509 -33
- package/lib/utils/a11y/index.js +18 -1
- package/lib/utils/a11y/textSize.js +23 -7
- package/lib/utils/animation/index.js +15 -2
- package/lib/utils/animation/useVerticalExpandAnimation.js +28 -11
- package/lib/utils/children.js +87 -0
- package/lib/utils/index.js +163 -10
- package/lib/utils/info/index.js +18 -6
- package/lib/utils/info/platform/index.js +19 -7
- package/lib/utils/info/platform/platform.android.js +8 -1
- package/lib/utils/info/platform/platform.ios.js +8 -1
- package/lib/utils/info/platform/platform.js +8 -0
- package/lib/utils/info/platform/platform.native.js +8 -1
- package/lib/utils/info/versions.js +15 -4
- package/lib/utils/input.js +51 -33
- package/lib/utils/pressability.js +38 -10
- package/lib/utils/propTypes.js +217 -125
- package/lib/utils/useCopy.js +40 -5
- package/lib/utils/useHash.js +48 -0
- package/lib/utils/useHash.native.js +15 -0
- package/lib/utils/useResponsiveProp.js +21 -9
- package/lib/utils/useSpacingScale.js +21 -9
- package/lib/utils/useUniqueId.js +13 -4
- package/package.json +7 -6
- package/release-context.json +4 -4
- package/src/ActivityIndicator/{Spinner.web.jsx → Spinner.jsx} +0 -0
- package/src/Box/Box.jsx +11 -4
- package/src/Button/Button.jsx +3 -2
- package/src/Button/ButtonBase.jsx +27 -36
- package/src/Button/ButtonGroup.jsx +2 -2
- package/src/Button/ButtonLink.jsx +3 -2
- package/src/Button/propTypes.js +12 -2
- package/src/Card/Card.jsx +4 -30
- package/src/Card/CardBase.jsx +57 -0
- package/src/Card/PressableCardBase.jsx +112 -0
- package/src/Card/index.js +3 -0
- package/src/Checkbox/Checkbox.jsx +10 -11
- package/src/Checkbox/CheckboxGroup.jsx +196 -0
- package/src/Checkbox/{CheckboxInput.web.jsx → CheckboxInput.jsx} +0 -0
- package/src/Checkbox/index.js +2 -0
- package/src/ExpandCollapse/Control.jsx +1 -1
- package/src/Feedback/Feedback.jsx +1 -1
- package/src/Fieldset/Fieldset.jsx +129 -0
- package/src/Fieldset/FieldsetContainer.jsx +22 -0
- package/src/Fieldset/FieldsetContainer.native.jsx +16 -0
- package/src/Fieldset/Legend.jsx +16 -0
- package/src/Fieldset/Legend.native.jsx +22 -0
- package/src/Fieldset/cssReset.js +14 -0
- package/src/Fieldset/index.js +3 -0
- package/src/Icon/Icon.jsx +14 -23
- package/src/Icon/IconText.jsx +2 -2
- package/src/Icon/index.js +2 -2
- package/src/InputLabel/InputLabel.jsx +9 -2
- package/src/InputLabel/{LabelContent.web.jsx → LabelContent.jsx} +0 -0
- package/src/InputSupports/InputSupports.jsx +7 -18
- package/src/InputSupports/useInputSupports.js +30 -0
- package/src/Link/{InlinePressable.web.jsx → InlinePressable.jsx} +0 -0
- package/src/Link/LinkBase.jsx +14 -12
- package/src/Modal/Modal.jsx +185 -0
- package/src/Modal/dictionary.js +9 -0
- package/src/Modal/index.js +3 -0
- package/src/Notification/Notification.jsx +149 -0
- package/src/Notification/dictionary.js +8 -0
- package/src/Notification/index.js +3 -0
- package/src/Progress/Progress.jsx +77 -0
- package/src/Progress/ProgressBar.jsx +110 -0
- package/src/Progress/ProgressBarBackground.jsx +34 -0
- package/src/Progress/index.js +6 -0
- package/src/Radio/Radio.jsx +19 -56
- package/src/Radio/RadioButton.jsx +131 -0
- package/src/Radio/RadioGroup.jsx +198 -0
- package/src/Radio/{RadioInput.web.jsx → RadioInput.jsx} +0 -0
- package/src/Radio/index.js +2 -0
- package/src/RadioCard/RadioCard.jsx +191 -0
- package/src/RadioCard/RadioCardGroup.jsx +211 -0
- package/src/RadioCard/index.js +5 -0
- package/src/Search/Search.jsx +204 -0
- package/src/Search/dictionary.js +12 -0
- package/src/Search/index.js +3 -0
- package/src/Select/{Group.web.jsx → Group.jsx} +0 -0
- package/src/Select/{Item.web.jsx → Item.jsx} +0 -0
- package/src/Select/{Picker.web.jsx → Picker.jsx} +0 -0
- package/src/Select/Select.jsx +12 -22
- package/src/SideNav/Item.jsx +2 -2
- package/src/Skeleton/Skeleton.jsx +17 -20
- package/src/Skeleton/skeleton.constant.js +3 -0
- package/src/Skeleton/skeletonWebAnimation.js +13 -0
- package/src/Skeleton/useSkeletonNativeAnimation.js +27 -0
- package/src/StackView/StackView.jsx +10 -3
- package/src/StackView/StackWrap.jsx +9 -1
- package/src/StackView/StackWrapBox.jsx +4 -3
- package/src/StackView/StackWrapGap.jsx +3 -3
- package/src/StackView/getStackedContent.jsx +8 -2
- package/src/StepTracker/Step.jsx +202 -0
- package/src/StepTracker/StepTracker.jsx +163 -0
- package/src/StepTracker/dictionary.js +10 -0
- package/src/StepTracker/index.js +3 -0
- package/src/Tabs/HorizontalScroll.jsx +165 -0
- package/src/Tabs/ScrollViewEnd.jsx +53 -0
- package/src/Tabs/ScrollViewEnd.native.jsx +24 -0
- package/src/Tabs/Tabs.jsx +89 -0
- package/src/Tabs/TabsItem.jsx +204 -0
- package/src/Tabs/TabsScrollButton.jsx +100 -0
- package/src/Tabs/dictionary.js +11 -0
- package/src/Tabs/index.js +3 -0
- package/src/Tabs/itemPositions.js +101 -0
- package/src/Tags/Tags.jsx +2 -1
- package/src/TextInput/TextInputBase.jsx +12 -22
- package/src/ThemeProvider/useThemeTokens.js +2 -2
- package/src/ThemeProvider/utils/styles.js +18 -5
- package/src/ThemeProvider/utils/theme-tokens.js +46 -5
- package/src/ToggleSwitch/ToggleSwitch.jsx +2 -3
- package/src/Tooltip/{Backdrop.web.jsx → Backdrop.jsx} +0 -0
- package/src/Tooltip/Tooltip.jsx +1 -1
- package/src/TooltipButton/TooltipButton.jsx +23 -27
- package/src/Typography/Typography.jsx +6 -5
- package/src/index.js +20 -2
- package/src/utils/children.jsx +66 -0
- package/src/utils/index.js +3 -0
- package/src/utils/info/platform/platform.js +1 -0
- package/src/utils/info/versions.js +2 -2
- package/src/utils/input.js +20 -12
- package/src/utils/pressability.js +4 -0
- package/src/utils/propTypes.js +98 -34
- package/src/utils/useCopy.js +30 -4
- package/src/utils/useHash.js +34 -0
- package/src/utils/useHash.native.js +6 -0
- package/stories/A11yText/A11yText.stories.jsx +4 -8
- package/stories/Checkbox/Checkbox.stories.jsx +24 -1
- package/stories/Icon/Icon.stories.jsx +6 -5
- package/stories/Modal/Modal.stories.jsx +29 -0
- package/stories/Notification/Notification.stories.jsx +82 -0
- package/stories/Progress/Progress.stories.jsx +93 -0
- package/stories/Radio/Radio.stories.jsx +23 -36
- package/stories/RadioCard/RadioCard.stories.jsx +98 -0
- package/stories/Search/Search.stories.jsx +16 -0
- package/stories/StepTracker/StepTracker.stories.jsx +71 -0
- package/stories/Tabs/Tabs.stories.jsx +97 -0
- package/stories/{platform-supports.web.jsx → platform-supports.jsx} +0 -0
- package/__fixtures__/accessible.icon.svg +0 -6
- package/babel.config.json +0 -8
- package/lib/ActivityIndicator/Spinner.web.js +0 -55
- package/lib/Checkbox/CheckboxInput.web.js +0 -57
- package/lib/InputLabel/LabelContent.web.js +0 -17
- package/lib/Link/InlinePressable.web.js +0 -32
- package/lib/Radio/RadioInput.web.js +0 -59
- package/lib/Select/Group.web.js +0 -18
- package/lib/Select/Item.web.js +0 -15
- package/lib/Select/Picker.web.js +0 -63
- package/lib/config/svgr-icons-web.js +0 -9
- package/lib/config/svgr-icons.js +0 -52
- package/lib/utils/info/platform/platform.web.js +0 -1
- package/src/config/svgr-icons-web.js +0 -11
- package/src/config/svgr-icons.js +0 -46
- package/src/utils/info/platform/platform.web.js +0 -1
package/lib/FlexGrid/Col/Col.js
CHANGED
|
@@ -1,11 +1,37 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
|
|
13
|
+
|
|
14
|
+
var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
|
|
15
|
+
|
|
16
|
+
var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
|
|
17
|
+
|
|
18
|
+
var _systemConstants = require("@telus-uds/system-constants");
|
|
19
|
+
|
|
20
|
+
var _GutterContext = _interopRequireDefault(require("../providers/GutterContext"));
|
|
21
|
+
|
|
22
|
+
var _ViewportProvider = require("../../ViewportProvider");
|
|
23
|
+
|
|
24
|
+
var _helpers = _interopRequireDefault(require("../helpers"));
|
|
25
|
+
|
|
26
|
+
var _utils = require("../../utils");
|
|
27
|
+
|
|
28
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
29
|
+
|
|
30
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
31
|
+
|
|
32
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
33
|
+
|
|
34
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
9
35
|
|
|
10
36
|
const Col = ({
|
|
11
37
|
horizontalAlign,
|
|
@@ -22,13 +48,13 @@ const Col = ({
|
|
|
22
48
|
xlOffset,
|
|
23
49
|
...viewProps
|
|
24
50
|
}) => {
|
|
25
|
-
const gutter = useContext(
|
|
26
|
-
const viewPort = useViewport();
|
|
27
|
-
const hiddenLevels =
|
|
51
|
+
const gutter = (0, _react.useContext)(_GutterContext.default);
|
|
52
|
+
const viewPort = (0, _ViewportProvider.useViewport)();
|
|
53
|
+
const hiddenLevels = (0, _helpers.default)([xs, sm, md, lg, xl]);
|
|
28
54
|
|
|
29
55
|
const getHorizontalAlignLevel = () => {
|
|
30
56
|
if (typeof horizontalAlign === 'object') {
|
|
31
|
-
return
|
|
57
|
+
return (0, _helpers.default)([horizontalAlign.xs, horizontalAlign.sm, horizontalAlign.md, horizontalAlign.lg, horizontalAlign.xl]);
|
|
32
58
|
}
|
|
33
59
|
|
|
34
60
|
if (typeof horizontalAlign === 'string') {
|
|
@@ -41,7 +67,7 @@ const Col = ({
|
|
|
41
67
|
const horizontalAlignLevel = getHorizontalAlignLevel();
|
|
42
68
|
|
|
43
69
|
const toPercent = num => {
|
|
44
|
-
return
|
|
70
|
+
return "".concat(num / 12 * 100, "%");
|
|
45
71
|
};
|
|
46
72
|
|
|
47
73
|
const calculateWidth = value => {
|
|
@@ -94,37 +120,37 @@ const Col = ({
|
|
|
94
120
|
paddingRight: gutter ? 16 : 0
|
|
95
121
|
};
|
|
96
122
|
let hidingStyles = {};
|
|
97
|
-
const shown =
|
|
123
|
+
const shown = _Platform.default.OS === 'web' ? 'block' : 'flex';
|
|
98
124
|
|
|
99
|
-
if (viewPort === viewports.xs) {
|
|
125
|
+
if (viewPort === _systemConstants.viewports.xs) {
|
|
100
126
|
hidingStyles = {
|
|
101
127
|
display: hiddenLevels[0] === 0 ? 'none' : shown,
|
|
102
128
|
textAlign: horizontalAlignLevel[0]
|
|
103
129
|
};
|
|
104
130
|
}
|
|
105
131
|
|
|
106
|
-
if (viewPort === viewports.sm) {
|
|
132
|
+
if (viewPort === _systemConstants.viewports.sm) {
|
|
107
133
|
hidingStyles = {
|
|
108
134
|
display: hiddenLevels[1] === 0 ? 'none' : shown,
|
|
109
135
|
textAlign: horizontalAlignLevel[1]
|
|
110
136
|
};
|
|
111
137
|
}
|
|
112
138
|
|
|
113
|
-
if (viewPort === viewports.md) {
|
|
139
|
+
if (viewPort === _systemConstants.viewports.md) {
|
|
114
140
|
hidingStyles = {
|
|
115
141
|
display: hiddenLevels[2] === 0 ? 'none' : shown,
|
|
116
142
|
textAlign: horizontalAlignLevel[2]
|
|
117
143
|
};
|
|
118
144
|
}
|
|
119
145
|
|
|
120
|
-
if (viewPort === viewports.lg) {
|
|
146
|
+
if (viewPort === _systemConstants.viewports.lg) {
|
|
121
147
|
hidingStyles = {
|
|
122
148
|
display: hiddenLevels[3] === 0 ? 'none' : shown,
|
|
123
149
|
textAlign: horizontalAlignLevel[3]
|
|
124
150
|
};
|
|
125
151
|
}
|
|
126
152
|
|
|
127
|
-
if (viewPort === viewports.xl) {
|
|
153
|
+
if (viewPort === _systemConstants.viewports.xl) {
|
|
128
154
|
hidingStyles = {
|
|
129
155
|
display: hiddenLevels[4] === 0 ? 'none' : shown,
|
|
130
156
|
textAlign: horizontalAlignLevel[4]
|
|
@@ -133,8 +159,8 @@ const Col = ({
|
|
|
133
159
|
|
|
134
160
|
const sizesArray = [xs, sm, md, lg, xl];
|
|
135
161
|
const offSetsArray = [xsOffset, smOffset, mdOffset, lgOffset, xlOffset];
|
|
136
|
-
const sizesWithIheritance =
|
|
137
|
-
const offsetsWithIheritance =
|
|
162
|
+
const sizesWithIheritance = (0, _helpers.default)(sizesArray);
|
|
163
|
+
const offsetsWithIheritance = (0, _helpers.default)(offSetsArray);
|
|
138
164
|
const sizes = {
|
|
139
165
|
xs: sizesWithIheritance[0],
|
|
140
166
|
sm: sizesWithIheritance[1],
|
|
@@ -149,13 +175,14 @@ const Col = ({
|
|
|
149
175
|
lg: offsetsWithIheritance[3],
|
|
150
176
|
xl: offsetsWithIheritance[4]
|
|
151
177
|
};
|
|
152
|
-
return /*#__PURE__*/
|
|
178
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...viewProps,
|
|
153
179
|
style: [styles.col, gutterPadding, offsetStyles(offsets), sizeStyles(sizes), { ...hidingStyles
|
|
154
|
-
}]
|
|
155
|
-
|
|
180
|
+
}],
|
|
181
|
+
children: children
|
|
182
|
+
});
|
|
156
183
|
};
|
|
157
184
|
|
|
158
|
-
const styles =
|
|
185
|
+
const styles = _StyleSheet.default.create({
|
|
159
186
|
col: {
|
|
160
187
|
flexGrow: 1,
|
|
161
188
|
flexShrink: 0,
|
|
@@ -169,6 +196,7 @@ const styles = StyleSheet.create({
|
|
|
169
196
|
* styling issues.
|
|
170
197
|
*/
|
|
171
198
|
|
|
199
|
+
|
|
172
200
|
Col.propTypes = {
|
|
173
201
|
/**
|
|
174
202
|
* Specify number of columns within the 'xs' breakpoint range. `0` hides the column.
|
|
@@ -177,7 +205,7 @@ Col.propTypes = {
|
|
|
177
205
|
* `false` disables the prop
|
|
178
206
|
*
|
|
179
207
|
*/
|
|
180
|
-
xs:
|
|
208
|
+
xs: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
|
|
181
209
|
|
|
182
210
|
/**
|
|
183
211
|
* Specify number of columns within the 'sm' breakpoint range. `0` hides the column.
|
|
@@ -186,7 +214,7 @@ Col.propTypes = {
|
|
|
186
214
|
* `false` disables the prop
|
|
187
215
|
*
|
|
188
216
|
*/
|
|
189
|
-
sm:
|
|
217
|
+
sm: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
|
|
190
218
|
|
|
191
219
|
/**
|
|
192
220
|
* Specify number of columns within the 'md' breakpoint range. `0` hides the column.
|
|
@@ -195,7 +223,7 @@ Col.propTypes = {
|
|
|
195
223
|
* `false` disables the prop
|
|
196
224
|
*
|
|
197
225
|
*/
|
|
198
|
-
md:
|
|
226
|
+
md: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
|
|
199
227
|
|
|
200
228
|
/**
|
|
201
229
|
* Specify number of columns within the 'lg' breakpoint range. `0` hides the column.
|
|
@@ -204,7 +232,7 @@ Col.propTypes = {
|
|
|
204
232
|
* `false` disables the prop
|
|
205
233
|
*
|
|
206
234
|
*/
|
|
207
|
-
lg:
|
|
235
|
+
lg: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
|
|
208
236
|
|
|
209
237
|
/**
|
|
210
238
|
* Specify number of columns after the 'xl' breakpoint. `0` hides the column.
|
|
@@ -213,41 +241,41 @@ Col.propTypes = {
|
|
|
213
241
|
* `false` disables the prop
|
|
214
242
|
*
|
|
215
243
|
*/
|
|
216
|
-
xl:
|
|
244
|
+
xl: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
|
|
217
245
|
|
|
218
246
|
/**
|
|
219
247
|
* Offset the specified number of columns within the 'xs' breakpoint range. `0` hides the column.
|
|
220
248
|
*
|
|
221
249
|
*/
|
|
222
|
-
xsOffset:
|
|
250
|
+
xsOffset: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
|
|
223
251
|
|
|
224
252
|
/**
|
|
225
253
|
* Offset the specified number of columns within the 'sm' breakpoint range.
|
|
226
254
|
*
|
|
227
255
|
*/
|
|
228
|
-
smOffset:
|
|
256
|
+
smOffset: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
|
|
229
257
|
|
|
230
258
|
/**
|
|
231
259
|
* Offset the specified number of columns within the 'md' breakpoint range.
|
|
232
260
|
*
|
|
233
261
|
*/
|
|
234
|
-
mdOffset:
|
|
262
|
+
mdOffset: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
|
|
235
263
|
|
|
236
264
|
/**
|
|
237
265
|
* Offset the specified number of columns within the 'lg' breakpoint range.
|
|
238
266
|
*
|
|
239
267
|
*/
|
|
240
|
-
lgOffset:
|
|
268
|
+
lgOffset: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
|
|
241
269
|
|
|
242
270
|
/**
|
|
243
271
|
* Offset the specified number of columns within the 'xl' breakpoint range.
|
|
244
272
|
*/
|
|
245
|
-
xlOffset:
|
|
273
|
+
xlOffset: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
|
|
246
274
|
|
|
247
275
|
/**
|
|
248
276
|
* The columns of the Grid. Will typically be `FlexGrid.Col` components.
|
|
249
277
|
*/
|
|
250
|
-
children:
|
|
278
|
+
children: _propTypes.default.node.isRequired,
|
|
251
279
|
|
|
252
280
|
/**
|
|
253
281
|
*
|
|
@@ -255,6 +283,7 @@ Col.propTypes = {
|
|
|
255
283
|
*
|
|
256
284
|
* Accepts a `PropType.string` following the [responsive prop](#/Layout?id=responsive) structure.
|
|
257
285
|
*/
|
|
258
|
-
horizontalAlign: responsiveProps.getTypeOptionallyByViewport(
|
|
286
|
+
horizontalAlign: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['left', 'center', 'right']))
|
|
259
287
|
};
|
|
260
|
-
|
|
288
|
+
var _default = Col;
|
|
289
|
+
exports.default = _default;
|
|
@@ -1,2 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _Col = _interopRequireDefault(require("./Col"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
|
|
12
|
+
var _default = _Col.default;
|
|
13
|
+
exports.default = _default;
|
package/lib/FlexGrid/FlexGrid.js
CHANGED
|
@@ -1,16 +1,37 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
|
|
13
|
+
|
|
14
|
+
var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
|
|
15
|
+
|
|
16
|
+
var _systemConstants = require("@telus-uds/system-constants");
|
|
17
|
+
|
|
18
|
+
var _Row = _interopRequireDefault(require("./Row"));
|
|
19
|
+
|
|
20
|
+
var _Col = _interopRequireDefault(require("./Col"));
|
|
21
|
+
|
|
22
|
+
var _ViewportProvider = require("../ViewportProvider");
|
|
23
|
+
|
|
24
|
+
var _GutterContext = _interopRequireDefault(require("./providers/GutterContext"));
|
|
25
|
+
|
|
26
|
+
var _helpers = _interopRequireDefault(require("./helpers"));
|
|
27
|
+
|
|
28
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
29
|
+
|
|
30
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
31
|
+
|
|
10
32
|
/**
|
|
11
33
|
* A mobile-first flexbox grid.
|
|
12
34
|
*/
|
|
13
|
-
|
|
14
35
|
const FlexGrid = ({
|
|
15
36
|
limitWidth = true,
|
|
16
37
|
gutter = true,
|
|
@@ -23,103 +44,107 @@ const FlexGrid = ({
|
|
|
23
44
|
children,
|
|
24
45
|
...rest
|
|
25
46
|
}) => {
|
|
26
|
-
const viewPort = useViewport();
|
|
27
|
-
const reverseLevel =
|
|
47
|
+
const viewPort = (0, _ViewportProvider.useViewport)();
|
|
48
|
+
const reverseLevel = (0, _helpers.default)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
|
|
28
49
|
const marginVertical = 0;
|
|
29
50
|
const marginHorizontal = outsideGutter ? 'auto' : -16;
|
|
30
51
|
const width = outsideGutter ? '100%' : 'auto';
|
|
31
52
|
let flexDirection;
|
|
32
53
|
let maxWidth;
|
|
33
54
|
|
|
34
|
-
if (viewPort === viewports.xs) {
|
|
55
|
+
if (viewPort === _systemConstants.viewports.xs) {
|
|
35
56
|
// no maxWidth for xs
|
|
36
57
|
flexDirection = reverseLevel[0] ? 'column-reverse' : 'column';
|
|
37
58
|
}
|
|
38
59
|
|
|
39
|
-
if (viewPort === viewports.sm) {
|
|
40
|
-
maxWidth = limitWidth && viewports.map.get(viewports.sm);
|
|
60
|
+
if (viewPort === _systemConstants.viewports.sm) {
|
|
61
|
+
maxWidth = limitWidth && _systemConstants.viewports.map.get(_systemConstants.viewports.sm);
|
|
41
62
|
flexDirection = reverseLevel[1] ? 'column-reverse' : 'column';
|
|
42
63
|
}
|
|
43
64
|
|
|
44
|
-
if (viewPort === viewports.md) {
|
|
45
|
-
maxWidth = limitWidth && viewports.map.get(viewports.md);
|
|
65
|
+
if (viewPort === _systemConstants.viewports.md) {
|
|
66
|
+
maxWidth = limitWidth && _systemConstants.viewports.map.get(_systemConstants.viewports.md);
|
|
46
67
|
flexDirection = reverseLevel[2] ? 'column-reverse' : 'column';
|
|
47
68
|
}
|
|
48
69
|
|
|
49
|
-
if (viewPort === viewports.lg) {
|
|
50
|
-
maxWidth = limitWidth && viewports.map.get(viewports.lg);
|
|
70
|
+
if (viewPort === _systemConstants.viewports.lg) {
|
|
71
|
+
maxWidth = limitWidth && _systemConstants.viewports.map.get(_systemConstants.viewports.lg);
|
|
51
72
|
flexDirection = reverseLevel[3] ? 'column-reverse' : 'column';
|
|
52
73
|
}
|
|
53
74
|
|
|
54
|
-
if (viewPort === viewports.xl) {
|
|
55
|
-
maxWidth = limitWidth && viewports.map.get(viewports.xl);
|
|
75
|
+
if (viewPort === _systemConstants.viewports.xl) {
|
|
76
|
+
maxWidth = limitWidth && _systemConstants.viewports.map.get(_systemConstants.viewports.xl);
|
|
56
77
|
flexDirection = reverseLevel[4] ? 'column-reverse' : 'column';
|
|
57
78
|
}
|
|
58
79
|
|
|
59
|
-
return /*#__PURE__*/
|
|
60
|
-
value: gutter
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
80
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GutterContext.default.Provider, {
|
|
81
|
+
value: gutter,
|
|
82
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...rest,
|
|
83
|
+
style: [styles.grid, {
|
|
84
|
+
marginHorizontal,
|
|
85
|
+
marginVertical,
|
|
86
|
+
width,
|
|
87
|
+
flexDirection,
|
|
88
|
+
maxWidth
|
|
89
|
+
}],
|
|
90
|
+
children: children
|
|
91
|
+
})
|
|
92
|
+
});
|
|
70
93
|
};
|
|
71
94
|
|
|
72
|
-
const styles =
|
|
95
|
+
const styles = _StyleSheet.default.create({
|
|
73
96
|
grid: {
|
|
74
97
|
flexWrap: 'wrap'
|
|
75
98
|
}
|
|
76
99
|
});
|
|
100
|
+
|
|
77
101
|
FlexGrid.propTypes = {
|
|
78
102
|
/**
|
|
79
103
|
* Whether or not to give the grid a fixed width. This also centres the grid horizontally.
|
|
80
104
|
*/
|
|
81
|
-
limitWidth:
|
|
105
|
+
limitWidth: _propTypes.default.bool,
|
|
82
106
|
|
|
83
107
|
/**
|
|
84
108
|
* Whether or not to include gutters in between columns.
|
|
85
109
|
*/
|
|
86
|
-
gutter:
|
|
110
|
+
gutter: _propTypes.default.bool,
|
|
87
111
|
|
|
88
112
|
/**
|
|
89
113
|
* Whether or not to include gutter at the ends to the left and right of the FlexGrid
|
|
90
114
|
*/
|
|
91
|
-
outsideGutter:
|
|
115
|
+
outsideGutter: _propTypes.default.bool,
|
|
92
116
|
|
|
93
117
|
/**
|
|
94
118
|
* Choose if the item order should be reversed from the 'xs' breakpoint. When you pass in false, the order will be normal from the xs breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
95
119
|
*/
|
|
96
|
-
xsReverse:
|
|
120
|
+
xsReverse: _propTypes.default.bool,
|
|
97
121
|
|
|
98
122
|
/**
|
|
99
123
|
* Choose if the item order should be reversed from the 'sm' breakpoint. When you pass in false, the order will be normal from the sm breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
100
124
|
*/
|
|
101
|
-
smReverse:
|
|
125
|
+
smReverse: _propTypes.default.bool,
|
|
102
126
|
|
|
103
127
|
/**
|
|
104
128
|
* Choose if the item order should be reversed from the 'md' breakpoint. When you pass in false, the order will be normal from the md breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
105
129
|
*/
|
|
106
|
-
mdReverse:
|
|
130
|
+
mdReverse: _propTypes.default.bool,
|
|
107
131
|
|
|
108
132
|
/**
|
|
109
133
|
* Choose if the item order should be reversed from the 'lg' breakpoint. When you pass in false, the order will be normal from the lg breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
110
134
|
*/
|
|
111
|
-
lgReverse:
|
|
135
|
+
lgReverse: _propTypes.default.bool,
|
|
112
136
|
|
|
113
137
|
/**
|
|
114
138
|
* Choose if the item order should be reversed from the 'xl' breakpoint. When you pass in false, the order will be normal from the xl breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
115
139
|
*/
|
|
116
|
-
xlReverse:
|
|
140
|
+
xlReverse: _propTypes.default.bool,
|
|
117
141
|
|
|
118
142
|
/**
|
|
119
143
|
* The rows and columns of the Grid. Will typically be `FlexGrid.Row` and `FlexGrid.Col` components.
|
|
120
144
|
*/
|
|
121
|
-
children:
|
|
145
|
+
children: _propTypes.default.node.isRequired
|
|
122
146
|
};
|
|
123
|
-
FlexGrid.Row =
|
|
124
|
-
FlexGrid.Col =
|
|
125
|
-
|
|
147
|
+
FlexGrid.Row = _Row.default;
|
|
148
|
+
FlexGrid.Col = _Col.default;
|
|
149
|
+
var _default = FlexGrid;
|
|
150
|
+
exports.default = _default;
|
package/lib/FlexGrid/Row/Row.js
CHANGED
|
@@ -1,9 +1,27 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
|
|
13
|
+
|
|
14
|
+
var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
|
|
15
|
+
|
|
16
|
+
var _systemConstants = require("@telus-uds/system-constants");
|
|
17
|
+
|
|
18
|
+
var _ViewportProvider = require("../../ViewportProvider");
|
|
19
|
+
|
|
20
|
+
var _helpers = _interopRequireDefault(require("../helpers"));
|
|
21
|
+
|
|
22
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
23
|
+
|
|
24
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
7
25
|
|
|
8
26
|
const horizontalAlignStyles = horizontalAlign => {
|
|
9
27
|
switch (horizontalAlign) {
|
|
@@ -81,41 +99,42 @@ const Row = ({
|
|
|
81
99
|
children,
|
|
82
100
|
...rest
|
|
83
101
|
}) => {
|
|
84
|
-
const viewPort = useViewport();
|
|
85
|
-
const reverseLevel =
|
|
102
|
+
const viewPort = (0, _ViewportProvider.useViewport)();
|
|
103
|
+
const reverseLevel = (0, _helpers.default)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
|
|
86
104
|
let flexDirection = '';
|
|
87
105
|
|
|
88
|
-
if (viewPort === viewports.xs) {
|
|
106
|
+
if (viewPort === _systemConstants.viewports.xs) {
|
|
89
107
|
flexDirection = reverseLevel[0] ? 'row-reverse' : 'row';
|
|
90
108
|
}
|
|
91
109
|
|
|
92
|
-
if (viewPort === viewports.sm) {
|
|
110
|
+
if (viewPort === _systemConstants.viewports.sm) {
|
|
93
111
|
flexDirection = reverseLevel[1] ? 'row-reverse' : 'row';
|
|
94
112
|
}
|
|
95
113
|
|
|
96
|
-
if (viewPort === viewports.md) {
|
|
114
|
+
if (viewPort === _systemConstants.viewports.md) {
|
|
97
115
|
flexDirection = reverseLevel[2] ? 'row-reverse' : 'row';
|
|
98
116
|
}
|
|
99
117
|
|
|
100
|
-
if (viewPort === viewports.lg) {
|
|
118
|
+
if (viewPort === _systemConstants.viewports.lg) {
|
|
101
119
|
flexDirection = reverseLevel[3] ? 'row-reverse' : 'row';
|
|
102
120
|
}
|
|
103
121
|
|
|
104
|
-
if (viewPort === viewports.xl) {
|
|
122
|
+
if (viewPort === _systemConstants.viewports.xl) {
|
|
105
123
|
flexDirection = reverseLevel[4] ? 'row-reverse' : 'row';
|
|
106
124
|
}
|
|
107
125
|
|
|
108
|
-
return /*#__PURE__*/
|
|
126
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...rest,
|
|
109
127
|
style: [styles.row, {
|
|
110
128
|
flexDirection,
|
|
111
129
|
...horizontalAlignStyles(horizontalAlign),
|
|
112
130
|
...verticalAlignStyles(verticalAlign),
|
|
113
131
|
...distributeStyles(distribute)
|
|
114
|
-
}]
|
|
115
|
-
|
|
132
|
+
}],
|
|
133
|
+
children: children
|
|
134
|
+
});
|
|
116
135
|
};
|
|
117
136
|
|
|
118
|
-
const styles =
|
|
137
|
+
const styles = _StyleSheet.default.create({
|
|
119
138
|
row: {
|
|
120
139
|
width: '100%',
|
|
121
140
|
marginVertical: 0,
|
|
@@ -127,46 +146,48 @@ const styles = StyleSheet.create({
|
|
|
127
146
|
flexWrap: 'wrap'
|
|
128
147
|
}
|
|
129
148
|
});
|
|
149
|
+
|
|
130
150
|
Row.propTypes = {
|
|
131
151
|
/**
|
|
132
152
|
* Align columns horizontally within their row.
|
|
133
153
|
*/
|
|
134
|
-
horizontalAlign:
|
|
154
|
+
horizontalAlign: _propTypes.default.oneOf(['start', 'center', 'end']),
|
|
135
155
|
|
|
136
156
|
/**
|
|
137
157
|
* Align columns vertically within their row.
|
|
138
158
|
*/
|
|
139
|
-
verticalAlign:
|
|
159
|
+
verticalAlign: _propTypes.default.oneOf(['top', 'middle', 'bottom']),
|
|
140
160
|
|
|
141
161
|
/**
|
|
142
162
|
* Distribute empty space around columns.
|
|
143
163
|
*/
|
|
144
|
-
distribute:
|
|
164
|
+
distribute: _propTypes.default.oneOf(['around', 'between']),
|
|
145
165
|
|
|
146
166
|
/**
|
|
147
167
|
* Choose if the item order should be reversed from the 'xs' breakpoint. When you pass in false, the order will be normal from the xs breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
148
168
|
*/
|
|
149
|
-
xsReverse:
|
|
169
|
+
xsReverse: _propTypes.default.bool,
|
|
150
170
|
|
|
151
171
|
/**
|
|
152
172
|
* Choose if the item order should be reversed from the 'sm' breakpoint. When you pass in false, the order will be normal from the sm breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
153
173
|
*/
|
|
154
|
-
smReverse:
|
|
174
|
+
smReverse: _propTypes.default.bool,
|
|
155
175
|
|
|
156
176
|
/**
|
|
157
177
|
* Choose if the item order should be reversed from the 'md' breakpoint. When you pass in false, the order will be normal from the md breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
158
178
|
*/
|
|
159
|
-
mdReverse:
|
|
179
|
+
mdReverse: _propTypes.default.bool,
|
|
160
180
|
|
|
161
181
|
/**
|
|
162
182
|
* Choose if the item order should be reversed from the 'lg' breakpoint. When you pass in false, the order will be normal from the lg breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
163
183
|
*/
|
|
164
|
-
lgReverse:
|
|
184
|
+
lgReverse: _propTypes.default.bool,
|
|
165
185
|
|
|
166
186
|
/**
|
|
167
187
|
* Choose if the item order should be reversed from the 'xl' breakpoint. When you pass in false, the order will be normal from the xl breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
168
188
|
*/
|
|
169
|
-
xlReverse:
|
|
170
|
-
children:
|
|
189
|
+
xlReverse: _propTypes.default.bool,
|
|
190
|
+
children: _propTypes.default.node.isRequired
|
|
171
191
|
};
|
|
172
|
-
|
|
192
|
+
var _default = Row;
|
|
193
|
+
exports.default = _default;
|
|
@@ -1,2 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _Row = _interopRequireDefault(require("./Row"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
|
|
12
|
+
var _default = _Row.default;
|
|
13
|
+
exports.default = _default;
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
1
8
|
const applyInheritance = sizes => {
|
|
2
9
|
let prevSize;
|
|
3
10
|
return sizes.map((size, index) => {
|
|
@@ -18,4 +25,5 @@ const applyInheritance = sizes => {
|
|
|
18
25
|
});
|
|
19
26
|
};
|
|
20
27
|
|
|
21
|
-
|
|
28
|
+
var _default = applyInheritance;
|
|
29
|
+
exports.default = _default;
|
package/lib/FlexGrid/index.js
CHANGED
|
@@ -1,2 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _FlexGrid = _interopRequireDefault(require("./FlexGrid"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
|
|
12
|
+
var _default = _FlexGrid.default;
|
|
13
|
+
exports.default = _default;
|
|
@@ -1,3 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
|
|
12
|
+
const GutterContext = /*#__PURE__*/_react.default.createContext(false);
|
|
13
|
+
|
|
14
|
+
var _default = GutterContext;
|
|
15
|
+
exports.default = _default;
|