@citygross/components 0.7.146 → 0.7.148
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/Button/NavButton.d.ts +2 -1
- package/build/cjs/components/src/components/Button/NavButton.js +11 -2
- package/build/cjs/components/src/components/Button/NavButton.js.map +1 -1
- package/build/cjs/components/src/components/ZipCodeInput/ZipCodeInput.js +9 -1
- package/build/cjs/components/src/components/ZipCodeInput/ZipCodeInput.js.map +1 -1
- package/build/es/components/src/components/Button/NavButton.js +11 -2
- package/build/es/components/src/components/Button/NavButton.js.map +1 -1
- package/build/es/components/src/components/ZipCodeInput/ZipCodeInput.js +10 -2
- package/build/es/components/src/components/ZipCodeInput/ZipCodeInput.js.map +1 -1
- package/package.json +4 -4
|
@@ -9,5 +9,6 @@ export declare type TNavButton = styles.TButton & styles.TBaseSmallButton & {
|
|
|
9
9
|
size: keyof typeof ButtonSize;
|
|
10
10
|
xsSize?: keyof typeof ButtonSize;
|
|
11
11
|
children?: React.ReactNode;
|
|
12
|
+
href?: string;
|
|
12
13
|
};
|
|
13
|
-
export declare function NavButton({ color, height, icon, isDisabled, loading, noWrap, onClick, border, shadow, width, buttonBadge, badgeBackground, size, flexReverse, childGap, children, center, fullWidth, xsSize, borderRadius, hoverBackground, noShadow, ...props }: TNavButton): JSX.Element;
|
|
14
|
+
export declare function NavButton({ color, height, icon, isDisabled, loading, noWrap, onClick, border, shadow, width, buttonBadge, badgeBackground, size, flexReverse, childGap, children, center, fullWidth, xsSize, borderRadius, hoverBackground, noShadow, href, ...props }: TNavButton): JSX.Element;
|
|
@@ -12,8 +12,17 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
12
12
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
13
|
|
|
14
14
|
function NavButton(_a) {
|
|
15
|
-
var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, size = _a.size, flexReverse = _a.flexReverse, childGap = _a.childGap, children = _a.children, _c = _a.center, center = _c === void 0 ? true : _c, fullWidth = _a.fullWidth, xsSize = _a.xsSize, borderRadius = _a.borderRadius, hoverBackground = _a.hoverBackground, noShadow = _a.noShadow, props = _tslib.__rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "size", "flexReverse", "childGap", "children", "center", "fullWidth", "xsSize", "borderRadius", "hoverBackground", "noShadow"]);
|
|
16
|
-
return (React__default["default"].createElement(
|
|
15
|
+
var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, size = _a.size, flexReverse = _a.flexReverse, childGap = _a.childGap, children = _a.children, _c = _a.center, center = _c === void 0 ? true : _c, fullWidth = _a.fullWidth, xsSize = _a.xsSize, borderRadius = _a.borderRadius, hoverBackground = _a.hoverBackground, noShadow = _a.noShadow, href = _a.href, props = _tslib.__rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "size", "flexReverse", "childGap", "children", "center", "fullWidth", "xsSize", "borderRadius", "hoverBackground", "noShadow", "href"]);
|
|
16
|
+
return href ? (React__default["default"].createElement("a", { href: href, onClick: function (e) { return onClick && onClick(e); } },
|
|
17
|
+
React__default["default"].createElement(Button_styles.NavButton, _tslib.__assign({ color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function () { }, width: width, border: border, shadow: shadow, center: center, fullWidth: fullWidth, flexReverse: flexReverse, size: size, xsSize: xsSize, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow }, props),
|
|
18
|
+
loading && (React__default["default"].createElement(Button_styles.Loading, null,
|
|
19
|
+
React__default["default"].createElement(Button_styles.LoadingContainer, null,
|
|
20
|
+
React__default["default"].createElement(Button_styles.LoadingSpinner, null)))),
|
|
21
|
+
React__default["default"].createElement(Button_styles.NavButtonIcon, null, icon),
|
|
22
|
+
icon ? (React__default["default"].createElement(Button_styles.NavButtonChild, { size: size, flexReverse: flexReverse, noWrap: noWrap, childGap: childGap },
|
|
23
|
+
icon,
|
|
24
|
+
children)) : (children),
|
|
25
|
+
buttonBadge ? (React__default["default"].createElement(Button_styles.ButtonBadge, { background: badgeBackground, smallBadge: true }, buttonBadge)) : null))) : (React__default["default"].createElement(Button_styles.NavButton, _tslib.__assign({ color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow, center: center, fullWidth: fullWidth, flexReverse: flexReverse, size: size, xsSize: xsSize, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow }, props),
|
|
17
26
|
loading && (React__default["default"].createElement(Button_styles.Loading, null,
|
|
18
27
|
React__default["default"].createElement(Button_styles.LoadingContainer, null,
|
|
19
28
|
React__default["default"].createElement(Button_styles.LoadingSpinner, null)))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"NavButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -61,8 +61,16 @@ var ZipCodeInput = function (_a) {
|
|
|
61
61
|
inputRefs.current[index].blur();
|
|
62
62
|
}
|
|
63
63
|
};
|
|
64
|
+
React.useEffect(function () {
|
|
65
|
+
var _a;
|
|
66
|
+
if (inputRefs && inputRefs.current && inputRefs.current[0]) {
|
|
67
|
+
(_a = inputRefs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
68
|
+
}
|
|
69
|
+
}, []);
|
|
64
70
|
return (React__default["default"].createElement(ZipCodeInput_styles.InputWrapper, null, Array.from(Array(5).keys()).map(function (index) { return (React__default["default"].createElement("div", { key: index },
|
|
65
|
-
React__default["default"].createElement(ZipCodeInput_styles.ZipCodeInputBox, { type: "number", onInput: function (e) {
|
|
71
|
+
React__default["default"].createElement(ZipCodeInput_styles.ZipCodeInputBox, { type: "number", onInput: function (e) {
|
|
72
|
+
return (e.currentTarget.value = e.currentTarget.value.slice(0, 1));
|
|
73
|
+
}, onKeyUp: function (e) { return handleInput(index, e); }, verified: verified, backgroundColor: backgroundColor, verifiedBackground: verifiedBackground, marginLeft: index === 3, ref: function (ref) { return (inputRefs.current[index] = ref); }, autoFocus: index === 0 && autoFocus }))); })));
|
|
66
74
|
};
|
|
67
75
|
|
|
68
76
|
exports.ZipCodeInput = ZipCodeInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ZipCodeInput.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ZipCodeInput.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -4,8 +4,17 @@ import { NavButton as NavButton$1, Loading, LoadingContainer, LoadingSpinner, Na
|
|
|
4
4
|
import { theme } from '@citygross/design-tokens';
|
|
5
5
|
|
|
6
6
|
function NavButton(_a) {
|
|
7
|
-
var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, size = _a.size, flexReverse = _a.flexReverse, childGap = _a.childGap, children = _a.children, _c = _a.center, center = _c === void 0 ? true : _c, fullWidth = _a.fullWidth, xsSize = _a.xsSize, borderRadius = _a.borderRadius, hoverBackground = _a.hoverBackground, noShadow = _a.noShadow, props = __rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "size", "flexReverse", "childGap", "children", "center", "fullWidth", "xsSize", "borderRadius", "hoverBackground", "noShadow"]);
|
|
8
|
-
return (React.createElement(
|
|
7
|
+
var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, size = _a.size, flexReverse = _a.flexReverse, childGap = _a.childGap, children = _a.children, _c = _a.center, center = _c === void 0 ? true : _c, fullWidth = _a.fullWidth, xsSize = _a.xsSize, borderRadius = _a.borderRadius, hoverBackground = _a.hoverBackground, noShadow = _a.noShadow, href = _a.href, props = __rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "size", "flexReverse", "childGap", "children", "center", "fullWidth", "xsSize", "borderRadius", "hoverBackground", "noShadow", "href"]);
|
|
8
|
+
return href ? (React.createElement("a", { href: href, onClick: function (e) { return onClick && onClick(e); } },
|
|
9
|
+
React.createElement(NavButton$1, __assign({ color: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function () { }, width: width, border: border, shadow: shadow, center: center, fullWidth: fullWidth, flexReverse: flexReverse, size: size, xsSize: xsSize, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow }, props),
|
|
10
|
+
loading && (React.createElement(Loading, null,
|
|
11
|
+
React.createElement(LoadingContainer, null,
|
|
12
|
+
React.createElement(LoadingSpinner, null)))),
|
|
13
|
+
React.createElement(NavButtonIcon, null, icon),
|
|
14
|
+
icon ? (React.createElement(NavButtonChild, { size: size, flexReverse: flexReverse, noWrap: noWrap, childGap: childGap },
|
|
15
|
+
icon,
|
|
16
|
+
children)) : (children),
|
|
17
|
+
buttonBadge ? (React.createElement(ButtonBadge, { background: badgeBackground, smallBadge: true }, buttonBadge)) : null))) : (React.createElement(NavButton$1, __assign({ color: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow, center: center, fullWidth: fullWidth, flexReverse: flexReverse, size: size, xsSize: xsSize, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow }, props),
|
|
9
18
|
loading && (React.createElement(Loading, null,
|
|
10
19
|
React.createElement(LoadingContainer, null,
|
|
11
20
|
React.createElement(LoadingSpinner, null)))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"NavButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useRef } from 'react';
|
|
1
|
+
import React, { useRef, useEffect } from 'react';
|
|
2
2
|
import { InputWrapper, ZipCodeInputBox } from './ZipCodeInput.styles.js';
|
|
3
3
|
|
|
4
4
|
var ZipCodeInput = function (_a) {
|
|
@@ -53,8 +53,16 @@ var ZipCodeInput = function (_a) {
|
|
|
53
53
|
inputRefs.current[index].blur();
|
|
54
54
|
}
|
|
55
55
|
};
|
|
56
|
+
useEffect(function () {
|
|
57
|
+
var _a;
|
|
58
|
+
if (inputRefs && inputRefs.current && inputRefs.current[0]) {
|
|
59
|
+
(_a = inputRefs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
60
|
+
}
|
|
61
|
+
}, []);
|
|
56
62
|
return (React.createElement(InputWrapper, null, Array.from(Array(5).keys()).map(function (index) { return (React.createElement("div", { key: index },
|
|
57
|
-
React.createElement(ZipCodeInputBox, { type: "number", onInput: function (e) {
|
|
63
|
+
React.createElement(ZipCodeInputBox, { type: "number", onInput: function (e) {
|
|
64
|
+
return (e.currentTarget.value = e.currentTarget.value.slice(0, 1));
|
|
65
|
+
}, onKeyUp: function (e) { return handleInput(index, e); }, verified: verified, backgroundColor: backgroundColor, verifiedBackground: verifiedBackground, marginLeft: index === 3, ref: function (ref) { return (inputRefs.current[index] = ref); }, autoFocus: index === 0 && autoFocus }))); })));
|
|
58
66
|
};
|
|
59
67
|
|
|
60
68
|
export { ZipCodeInput };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ZipCodeInput.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ZipCodeInput.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.148",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./build/cjs/components/src/index.js",
|
|
@@ -62,14 +62,14 @@
|
|
|
62
62
|
"styled-components": "^5.2.1"
|
|
63
63
|
},
|
|
64
64
|
"dependencies": {
|
|
65
|
-
"@citygross/design-tokens": "^0.2.
|
|
65
|
+
"@citygross/design-tokens": "^0.2.47",
|
|
66
66
|
"@citygross/icons": "^0.1.8",
|
|
67
67
|
"@citygross/react-use-bg-wizard": "^0.0.8",
|
|
68
|
-
"@citygross/typography": "^0.0.
|
|
68
|
+
"@citygross/typography": "^0.0.77",
|
|
69
69
|
"@citygross/utils": "^0.0.22",
|
|
70
70
|
"framer-motion": "^4.1.17",
|
|
71
71
|
"moment": "^2.29.1",
|
|
72
72
|
"react-loading-skeleton": "^2.2.0"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "e85d4cb650e7fa003ca1584669d7d672f0b6ba47"
|
|
75
75
|
}
|