@citygross/components 0.7.41 → 0.7.42
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/build/@types/components/DeliverySlotItem/DeliverySlotItem.d.ts +4 -3
- package/build/@types/components/DeliverySlotItem/DeliverySlotItem.styles.d.ts +0 -2
- package/build/cjs/components/src/components/DeliverySlotItem/DeliverySlotItem.js +6 -11
- package/build/cjs/components/src/components/DeliverySlotItem/DeliverySlotItem.js.map +1 -1
- package/build/cjs/components/src/components/DeliverySlotItem/DeliverySlotItem.styles.js +1 -5
- package/build/cjs/components/src/components/DeliverySlotItem/DeliverySlotItem.styles.js.map +1 -1
- package/build/es/components/src/components/DeliverySlotItem/DeliverySlotItem.js +8 -13
- package/build/es/components/src/components/DeliverySlotItem/DeliverySlotItem.js.map +1 -1
- package/build/es/components/src/components/DeliverySlotItem/DeliverySlotItem.styles.js +2 -4
- package/build/es/components/src/components/DeliverySlotItem/DeliverySlotItem.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
export declare type TDeliverySlotItem = {
|
|
2
3
|
date: string;
|
|
3
4
|
selected: boolean;
|
|
4
|
-
|
|
5
|
-
|
|
5
|
+
disabled: boolean;
|
|
6
|
+
children: React.ReactNode;
|
|
6
7
|
onSelect: () => void;
|
|
7
8
|
};
|
|
8
|
-
export declare function DeliverySlotItem({ date,
|
|
9
|
+
export declare function DeliverySlotItem({ date, selected, disabled, children, onSelect }: TDeliverySlotItem): JSX.Element;
|
|
@@ -8,6 +8,4 @@ export declare const DeliverySlotHeaderContainer: import("styled-components").St
|
|
|
8
8
|
export declare const DeliverySlotHeaderText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TDeliverySlotItem, never>;
|
|
9
9
|
export declare const DeliverySlotContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TDeliverySlotItem, never>;
|
|
10
10
|
export declare const DeliverySlotBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TDeliverySlotItem, never>;
|
|
11
|
-
export declare const DisabledLabel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
12
|
-
export declare const DotContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
13
11
|
export {};
|
|
@@ -7,23 +7,21 @@ var designTokens = require('@citygross/design-tokens');
|
|
|
7
7
|
var utils = require('@citygross/utils');
|
|
8
8
|
var typography = require('@citygross/typography');
|
|
9
9
|
var DeliverySlotItem_styles = require('./DeliverySlotItem.styles.js');
|
|
10
|
-
var DotIndicator = require('../DotIndicator/DotIndicator.js');
|
|
11
10
|
|
|
12
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
12
|
|
|
14
13
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
15
14
|
|
|
16
15
|
function DeliverySlotItem(_a) {
|
|
17
|
-
var _b
|
|
18
|
-
var date = _a.date,
|
|
16
|
+
var _b;
|
|
17
|
+
var date = _a.date, selected = _a.selected, disabled = _a.disabled, children = _a.children, onSelect = _a.onSelect;
|
|
19
18
|
var momentDate = utils.moment(date);
|
|
20
19
|
var width = utils.useWindowSize().width;
|
|
21
|
-
var
|
|
20
|
+
var _c = React.useState(momentDate
|
|
22
21
|
.format(width < (((_b = designTokens.theme.breakpoints) === null || _b === void 0 ? void 0 : _b.md) || 768) ? 'ddd' : 'dddd')
|
|
23
|
-
.toLocaleLowerCase()), weekDay =
|
|
22
|
+
.toLocaleLowerCase()), weekDay = _c[0], setWeekDay = _c[1];
|
|
24
23
|
var dayNumber = momentDate.format('D');
|
|
25
24
|
var month = momentDate.format('MMM').toLocaleLowerCase();
|
|
26
|
-
var disabled = disabledLabel !== undefined;
|
|
27
25
|
React.useEffect(function () {
|
|
28
26
|
var _a;
|
|
29
27
|
setWeekDay(momentDate
|
|
@@ -31,7 +29,7 @@ function DeliverySlotItem(_a) {
|
|
|
31
29
|
.toLocaleLowerCase());
|
|
32
30
|
}, [width]);
|
|
33
31
|
var slotRef = React.useRef(null);
|
|
34
|
-
var
|
|
32
|
+
var _d = React.useState(true), isVisible = _d[0], setIsVisible = _d[1];
|
|
35
33
|
var callbackFn = function (entries) {
|
|
36
34
|
var entry = entries[0];
|
|
37
35
|
// gets zoom level
|
|
@@ -83,10 +81,7 @@ function DeliverySlotItem(_a) {
|
|
|
83
81
|
React__default['default'].createElement(DeliverySlotItem_styles.DeliverySlotBody, { disabled: disabled },
|
|
84
82
|
React__default['default'].createElement(typography.H2, { color: 'darkest' }, removeLeadingZero(dayNumber)),
|
|
85
83
|
React__default['default'].createElement(typography.BodyText, { color: 'darker' }, utils.capitalizeFirstLetter(month))),
|
|
86
|
-
|
|
87
|
-
React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.EXTRASMALL }, disabledLabel))),
|
|
88
|
-
!disabledLabel && showWarningIndicator && (React__default['default'].createElement(DeliverySlotItem_styles.DotContainer, null,
|
|
89
|
-
React__default['default'].createElement(DotIndicator.Dot, { color: (_c = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.alertRed }))))));
|
|
84
|
+
children)));
|
|
90
85
|
}
|
|
91
86
|
|
|
92
87
|
exports.DeliverySlotItem = DeliverySlotItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DeliverySlotItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DeliverySlotItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -29,15 +29,11 @@ var DeliverySlotContainer = styled__default['default'].div(templateObject_4 || (
|
|
|
29
29
|
: (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.white;
|
|
30
30
|
});
|
|
31
31
|
var DeliverySlotBody = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n ", ";\n"])), function (props) { return props.disabled && 'opacity: 0.4'; });
|
|
32
|
-
var
|
|
33
|
-
var DotContainer = styled__default['default'].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n justify-content: center;\n display: flex;\n padding: ", "px 0;\n"], ["\n justify-content: center;\n display: flex;\n padding: ", "px 0;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
34
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
32
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
35
33
|
|
|
36
34
|
exports.DeliverySlotBody = DeliverySlotBody;
|
|
37
35
|
exports.DeliverySlotContainer = DeliverySlotContainer;
|
|
38
36
|
exports.DeliverySlotHeaderContainer = DeliverySlotHeaderContainer;
|
|
39
37
|
exports.DeliverySlotHeaderText = DeliverySlotHeaderText;
|
|
40
38
|
exports.DeliverySlotItemContainer = DeliverySlotItemContainer;
|
|
41
|
-
exports.DisabledLabel = DisabledLabel;
|
|
42
|
-
exports.DotContainer = DotContainer;
|
|
43
39
|
//# sourceMappingURL=DeliverySlotItem.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DeliverySlotItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DeliverySlotItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,21 +1,19 @@
|
|
|
1
1
|
import React, { useState, useEffect, useRef } from 'react';
|
|
2
2
|
import { theme } from '@citygross/design-tokens';
|
|
3
3
|
import { moment, useWindowSize, capitalizeFirstLetter } from '@citygross/utils';
|
|
4
|
-
import { BodyText, H2
|
|
5
|
-
import { DeliverySlotItemContainer, DeliverySlotHeaderContainer, DeliverySlotHeaderText, DeliverySlotContainer, DeliverySlotBody
|
|
6
|
-
import { Dot } from '../DotIndicator/DotIndicator.js';
|
|
4
|
+
import { BodyText, H2 } from '@citygross/typography';
|
|
5
|
+
import { DeliverySlotItemContainer, DeliverySlotHeaderContainer, DeliverySlotHeaderText, DeliverySlotContainer, DeliverySlotBody } from './DeliverySlotItem.styles.js';
|
|
7
6
|
|
|
8
7
|
function DeliverySlotItem(_a) {
|
|
9
|
-
var _b
|
|
10
|
-
var date = _a.date,
|
|
8
|
+
var _b;
|
|
9
|
+
var date = _a.date, selected = _a.selected, disabled = _a.disabled, children = _a.children, onSelect = _a.onSelect;
|
|
11
10
|
var momentDate = moment(date);
|
|
12
11
|
var width = useWindowSize().width;
|
|
13
|
-
var
|
|
12
|
+
var _c = useState(momentDate
|
|
14
13
|
.format(width < (((_b = theme.breakpoints) === null || _b === void 0 ? void 0 : _b.md) || 768) ? 'ddd' : 'dddd')
|
|
15
|
-
.toLocaleLowerCase()), weekDay =
|
|
14
|
+
.toLocaleLowerCase()), weekDay = _c[0], setWeekDay = _c[1];
|
|
16
15
|
var dayNumber = momentDate.format('D');
|
|
17
16
|
var month = momentDate.format('MMM').toLocaleLowerCase();
|
|
18
|
-
var disabled = disabledLabel !== undefined;
|
|
19
17
|
useEffect(function () {
|
|
20
18
|
var _a;
|
|
21
19
|
setWeekDay(momentDate
|
|
@@ -23,7 +21,7 @@ function DeliverySlotItem(_a) {
|
|
|
23
21
|
.toLocaleLowerCase());
|
|
24
22
|
}, [width]);
|
|
25
23
|
var slotRef = useRef(null);
|
|
26
|
-
var
|
|
24
|
+
var _d = useState(true), isVisible = _d[0], setIsVisible = _d[1];
|
|
27
25
|
var callbackFn = function (entries) {
|
|
28
26
|
var entry = entries[0];
|
|
29
27
|
// gets zoom level
|
|
@@ -75,10 +73,7 @@ function DeliverySlotItem(_a) {
|
|
|
75
73
|
React.createElement(DeliverySlotBody, { disabled: disabled },
|
|
76
74
|
React.createElement(H2, { color: 'darkest' }, removeLeadingZero(dayNumber)),
|
|
77
75
|
React.createElement(BodyText, { color: 'darker' }, capitalizeFirstLetter(month))),
|
|
78
|
-
|
|
79
|
-
React.createElement(BodyText, { size: TextTypes.TextSize.EXTRASMALL }, disabledLabel))),
|
|
80
|
-
!disabledLabel && showWarningIndicator && (React.createElement(DotContainer, null,
|
|
81
|
-
React.createElement(Dot, { color: (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.alertRed }))))));
|
|
76
|
+
children)));
|
|
82
77
|
}
|
|
83
78
|
|
|
84
79
|
export { DeliverySlotItem };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DeliverySlotItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DeliverySlotItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -21,9 +21,7 @@ var DeliverySlotContainer = styled.div(templateObject_4 || (templateObject_4 = _
|
|
|
21
21
|
: (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.white;
|
|
22
22
|
});
|
|
23
23
|
var DeliverySlotBody = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n ", ";\n"])), function (props) { return props.disabled && 'opacity: 0.4'; });
|
|
24
|
-
var
|
|
25
|
-
var DotContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n justify-content: center;\n display: flex;\n padding: ", "px 0;\n"], ["\n justify-content: center;\n display: flex;\n padding: ", "px 0;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
26
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
24
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
27
25
|
|
|
28
|
-
export { DeliverySlotBody, DeliverySlotContainer, DeliverySlotHeaderContainer, DeliverySlotHeaderText, DeliverySlotItemContainer
|
|
26
|
+
export { DeliverySlotBody, DeliverySlotContainer, DeliverySlotHeaderContainer, DeliverySlotHeaderText, DeliverySlotItemContainer };
|
|
29
27
|
//# sourceMappingURL=DeliverySlotItem.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DeliverySlotItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DeliverySlotItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.42",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./build/cjs/components/src/index.js",
|
|
@@ -71,5 +71,5 @@
|
|
|
71
71
|
"moment": "^2.29.1",
|
|
72
72
|
"react-loading-skeleton": "^2.2.0"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "c798a4e09ec67571f1d42c3fb6aaec4c9c2b8198"
|
|
75
75
|
}
|