@citygross/components 0.7.173 → 0.7.175
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/cjs/components/src/components/Nav/Nav.styles.js +1 -1
- package/build/cjs/components/src/components/SearchBar/SearchBar.js +7 -15
- package/build/cjs/components/src/components/SearchBar/SearchBar.js.map +1 -1
- package/build/es/components/src/components/Nav/Nav.styles.js +1 -1
- package/build/es/components/src/components/SearchBar/SearchBar.js +8 -16
- package/build/es/components/src/components/SearchBar/SearchBar.js.map +1 -1
- package/package.json +2 -2
|
@@ -16,7 +16,7 @@ var NavChildContainer = styled__default["default"].div(templateObject_3 || (temp
|
|
|
16
16
|
var NavMainLinks = styled__default["default"](framerMotion.motion.div)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: none;\n @media (min-width: ", "px) {\n height: 100%;\n display: flex;\n gap: ", "px;\n align-items: center;\n width: auto;\n margin-left: ", "px;\n }\n"], ["\n display: none;\n @media (min-width: ", "px) {\n height: 100%;\n display: flex;\n gap: ", "px;\n align-items: center;\n width: auto;\n margin-left: ", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
|
|
17
17
|
var SearchContainer = styled__default["default"](framerMotion.motion.div)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n margin-left: ", "px;\n display: flex;\n align-items: center;\n flex: 1;\n"], ["\n margin-left: ", "px;\n display: flex;\n align-items: center;\n flex: 1;\n"])), function (props) { var _a; return ((props === null || props === void 0 ? void 0 : props.isOpen) ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm); });
|
|
18
18
|
styled__default["default"](SearchContainer)(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19
|
-
var SearchResultOverlay = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n display:
|
|
19
|
+
var SearchResultOverlay = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n display: none;\n background: #333;\n opacity: 0.5;\n width: 100vw;\n height: 100%;\n position: fixed;\n top: ", "px;\n left: 0;\n overflow: hidden;\n z-index: 10;\n @media (min-width: ", "px) {\n display: ", ";\n top: ", ";\n }\n"], ["\n display: none;\n background: #333;\n opacity: 0.5;\n width: 100vw;\n height: 100%;\n position: fixed;\n top: ", "px;\n left: 0;\n overflow: hidden;\n z-index: 10;\n @media (min-width: ", "px) {\n display: ", ";\n top: ", ";\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { return (props.show ? 'block' : 'none'); }, function (props) {
|
|
20
20
|
var _a, _b, _c;
|
|
21
21
|
return "".concat((props === null || props === void 0 ? void 0 : props.overlayTopPosition) && ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall)
|
|
22
22
|
? (props === null || props === void 0 ? void 0 : props.overlayTopPosition) +
|
|
@@ -13,32 +13,24 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
13
13
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
14
|
|
|
15
15
|
var SearchBar = function (_a) {
|
|
16
|
-
var _b, _c;
|
|
17
|
-
var flexGrow = _a.flexGrow, isValid = _a.isValid,
|
|
16
|
+
var _b, _c, _d;
|
|
17
|
+
var flexGrow = _a.flexGrow, isValid = _a.isValid, _e = _a.inputSize, inputSize = _e === void 0 ? 'medium' : _e, activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, icon = _a.icon, value = _a.value, resultBoxTopPosition = _a.resultBoxTopPosition, children = _a.children, inputRef = _a.inputRef, isOpen = _a.isOpen, searchOnSubmit = _a.searchOnSubmit, searchInputMobileRef = _a.searchInputMobileRef, mobileTopPosition = _a.mobileTopPosition, props = _tslib.__rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "searchOnSubmit", "searchInputMobileRef", "mobileTopPosition"]);
|
|
18
18
|
var width = utils.useWindowSize().width;
|
|
19
19
|
var theme = styled.useTheme();
|
|
20
|
-
React.useEffect(function () {
|
|
21
|
-
var _a, _b;
|
|
22
|
-
if (theme && theme.constants) {
|
|
23
|
-
if ((searchInputMobileRef === null || searchInputMobileRef === void 0 ? void 0 : searchInputMobileRef.current) &&
|
|
24
|
-
width < ((_a = theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint) &&
|
|
25
|
-
isOpen) {
|
|
26
|
-
(_b = searchInputMobileRef === null || searchInputMobileRef === void 0 ? void 0 : searchInputMobileRef.current) === null || _b === void 0 ? void 0 : _b.focus();
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
}, [inputRef === null || inputRef === void 0 ? void 0 : inputRef.current, searchInputMobileRef === null || searchInputMobileRef === void 0 ? void 0 : searchInputMobileRef.current, isOpen]);
|
|
30
20
|
var resultVariants = {
|
|
31
21
|
closed: {
|
|
32
22
|
height: '0',
|
|
33
23
|
transition: { duration: 0, ease: 'linear' }
|
|
34
24
|
},
|
|
35
25
|
open: {
|
|
36
|
-
height:
|
|
26
|
+
height: theme.constants && width < ((_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint)
|
|
27
|
+
? '100%'
|
|
28
|
+
: 'auto',
|
|
37
29
|
transition: {
|
|
38
|
-
duration: theme.constants && width < ((
|
|
30
|
+
duration: theme.constants && width < ((_c = theme.constants) === null || _c === void 0 ? void 0 : _c.headerBreakpoint)
|
|
39
31
|
? 0
|
|
40
32
|
: 0.2,
|
|
41
|
-
delay: theme.constants && width < ((
|
|
33
|
+
delay: theme.constants && width < ((_d = theme.constants) === null || _d === void 0 ? void 0 : _d.headerBreakpoint)
|
|
42
34
|
? 0
|
|
43
35
|
: 0.1,
|
|
44
36
|
ease: 'linear'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -8,7 +8,7 @@ var NavChildContainer = styled.div(templateObject_3 || (templateObject_3 = __mak
|
|
|
8
8
|
var NavMainLinks = styled(motion.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: none;\n @media (min-width: ", "px) {\n height: 100%;\n display: flex;\n gap: ", "px;\n align-items: center;\n width: auto;\n margin-left: ", "px;\n }\n"], ["\n display: none;\n @media (min-width: ", "px) {\n height: 100%;\n display: flex;\n gap: ", "px;\n align-items: center;\n width: auto;\n margin-left: ", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
|
|
9
9
|
var SearchContainer = styled(motion.div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-left: ", "px;\n display: flex;\n align-items: center;\n flex: 1;\n"], ["\n margin-left: ", "px;\n display: flex;\n align-items: center;\n flex: 1;\n"])), function (props) { var _a; return ((props === null || props === void 0 ? void 0 : props.isOpen) ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm); });
|
|
10
10
|
styled(SearchContainer)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
11
|
-
var SearchResultOverlay = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display:
|
|
11
|
+
var SearchResultOverlay = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: none;\n background: #333;\n opacity: 0.5;\n width: 100vw;\n height: 100%;\n position: fixed;\n top: ", "px;\n left: 0;\n overflow: hidden;\n z-index: 10;\n @media (min-width: ", "px) {\n display: ", ";\n top: ", ";\n }\n"], ["\n display: none;\n background: #333;\n opacity: 0.5;\n width: 100vw;\n height: 100%;\n position: fixed;\n top: ", "px;\n left: 0;\n overflow: hidden;\n z-index: 10;\n @media (min-width: ", "px) {\n display: ", ";\n top: ", ";\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { return (props.show ? 'block' : 'none'); }, function (props) {
|
|
12
12
|
var _a, _b, _c;
|
|
13
13
|
return "".concat((props === null || props === void 0 ? void 0 : props.overlayTopPosition) && ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall)
|
|
14
14
|
? (props === null || props === void 0 ? void 0 : props.overlayTopPosition) +
|
|
@@ -1,36 +1,28 @@
|
|
|
1
1
|
import { __rest, __assign } from '../../../../_virtual/_tslib.js';
|
|
2
2
|
import { useWindowSize } from '@citygross/utils';
|
|
3
|
-
import React
|
|
3
|
+
import React from 'react';
|
|
4
4
|
import { useTheme } from 'styled-components';
|
|
5
5
|
import { SearchBarContainer, SearchForm, SearchLeftIcon, SearchInput, SearchRightLabel, MobileSearchIconContainer, SearchResultContainer, MobileSearchFormContainer } from './SearchBar.styles.js';
|
|
6
6
|
|
|
7
7
|
var SearchBar = function (_a) {
|
|
8
|
-
var _b, _c;
|
|
9
|
-
var flexGrow = _a.flexGrow, isValid = _a.isValid,
|
|
8
|
+
var _b, _c, _d;
|
|
9
|
+
var flexGrow = _a.flexGrow, isValid = _a.isValid, _e = _a.inputSize, inputSize = _e === void 0 ? 'medium' : _e, activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, icon = _a.icon, value = _a.value, resultBoxTopPosition = _a.resultBoxTopPosition, children = _a.children, inputRef = _a.inputRef, isOpen = _a.isOpen, searchOnSubmit = _a.searchOnSubmit, searchInputMobileRef = _a.searchInputMobileRef, mobileTopPosition = _a.mobileTopPosition, props = __rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "searchOnSubmit", "searchInputMobileRef", "mobileTopPosition"]);
|
|
10
10
|
var width = useWindowSize().width;
|
|
11
11
|
var theme = useTheme();
|
|
12
|
-
useEffect(function () {
|
|
13
|
-
var _a, _b;
|
|
14
|
-
if (theme && theme.constants) {
|
|
15
|
-
if ((searchInputMobileRef === null || searchInputMobileRef === void 0 ? void 0 : searchInputMobileRef.current) &&
|
|
16
|
-
width < ((_a = theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint) &&
|
|
17
|
-
isOpen) {
|
|
18
|
-
(_b = searchInputMobileRef === null || searchInputMobileRef === void 0 ? void 0 : searchInputMobileRef.current) === null || _b === void 0 ? void 0 : _b.focus();
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
}, [inputRef === null || inputRef === void 0 ? void 0 : inputRef.current, searchInputMobileRef === null || searchInputMobileRef === void 0 ? void 0 : searchInputMobileRef.current, isOpen]);
|
|
22
12
|
var resultVariants = {
|
|
23
13
|
closed: {
|
|
24
14
|
height: '0',
|
|
25
15
|
transition: { duration: 0, ease: 'linear' }
|
|
26
16
|
},
|
|
27
17
|
open: {
|
|
28
|
-
height:
|
|
18
|
+
height: theme.constants && width < ((_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint)
|
|
19
|
+
? '100%'
|
|
20
|
+
: 'auto',
|
|
29
21
|
transition: {
|
|
30
|
-
duration: theme.constants && width < ((
|
|
22
|
+
duration: theme.constants && width < ((_c = theme.constants) === null || _c === void 0 ? void 0 : _c.headerBreakpoint)
|
|
31
23
|
? 0
|
|
32
24
|
: 0.2,
|
|
33
|
-
delay: theme.constants && width < ((
|
|
25
|
+
delay: theme.constants && width < ((_d = theme.constants) === null || _d === void 0 ? void 0 : _d.headerBreakpoint)
|
|
34
26
|
? 0
|
|
35
27
|
: 0.1,
|
|
36
28
|
ease: 'linear'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SearchBar.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.175",
|
|
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": "3f41abf09de47cd1546c356b1562679e714405b7"
|
|
75
75
|
}
|