@citygross/components 0.7.82 → 0.7.84
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/Nav/Nav.d.ts +4 -2
- package/build/@types/components/Nav/Nav.stories.d.ts +1 -1
- package/build/@types/components/SearchBar/SearchBar.d.ts +2 -1
- package/build/@types/components/SearchBar/SearchBar.stories.d.ts +1 -1
- package/build/@types/components/SearchBar/SearchBar.styles.d.ts +1 -0
- package/build/cjs/components/src/components/Nav/Nav.js +11 -13
- package/build/cjs/components/src/components/Nav/Nav.js.map +1 -1
- package/build/cjs/components/src/components/SearchBar/SearchBar.js +6 -2
- package/build/cjs/components/src/components/SearchBar/SearchBar.js.map +1 -1
- package/build/cjs/components/src/components/SearchBar/SearchBar.styles.js +6 -4
- package/build/cjs/components/src/components/SearchBar/SearchBar.styles.js.map +1 -1
- package/build/es/components/src/components/Nav/Nav.js +11 -13
- package/build/es/components/src/components/Nav/Nav.js.map +1 -1
- package/build/es/components/src/components/SearchBar/SearchBar.js +7 -3
- package/build/es/components/src/components/SearchBar/SearchBar.js.map +1 -1
- package/build/es/components/src/components/SearchBar/SearchBar.styles.js +6 -5
- package/build/es/components/src/components/SearchBar/SearchBar.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -5,7 +5,6 @@ export declare type TNav = {
|
|
|
5
5
|
height?: number;
|
|
6
6
|
topPosition?: number;
|
|
7
7
|
mainLinks?: React.ReactNode[];
|
|
8
|
-
mainLinksBorderColor?: string;
|
|
9
8
|
rightContent?: React.ReactNode;
|
|
10
9
|
searchResultElement?: React.ReactNode;
|
|
11
10
|
searchPlaceHolder?: string;
|
|
@@ -13,6 +12,9 @@ export declare type TNav = {
|
|
|
13
12
|
searchIcon?: React.ReactNode;
|
|
14
13
|
searchOnChange?: ChangeEventHandler<HTMLInputElement>;
|
|
15
14
|
searchValue?: string;
|
|
15
|
+
searchOnSubmit?: () => void;
|
|
16
16
|
onSearchClick?: () => void;
|
|
17
|
+
closeSearch?: () => void;
|
|
18
|
+
searchIsOpen?: boolean;
|
|
17
19
|
};
|
|
18
|
-
export declare const Nav: ({ logo, maxWidth, height, topPosition, mainLinks,
|
|
20
|
+
export declare const Nav: ({ logo, maxWidth, height, topPosition, mainLinks, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, searchOnSubmit, onSearchClick, closeSearch, searchIsOpen }: TNav) => JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Story } from '@storybook/react';
|
|
2
2
|
import { TNav } from './Nav';
|
|
3
3
|
declare const _default: {
|
|
4
|
-
component: ({ logo, maxWidth, height, topPosition, mainLinks,
|
|
4
|
+
component: ({ logo, maxWidth, height, topPosition, mainLinks, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, searchOnSubmit, onSearchClick, closeSearch, searchIsOpen }: TNav) => JSX.Element;
|
|
5
5
|
title: string;
|
|
6
6
|
argTypes: {
|
|
7
7
|
onScroll: {
|
|
@@ -7,6 +7,7 @@ export declare type TSearchBar = styles.SearchInputProps & {
|
|
|
7
7
|
inputRef?: React.RefObject<HTMLInputElement>;
|
|
8
8
|
onCancelClick?: () => void;
|
|
9
9
|
isOpen?: boolean;
|
|
10
|
+
searchOnSubmit?: () => void;
|
|
10
11
|
children?: React.ReactNode;
|
|
11
12
|
};
|
|
12
|
-
export declare const SearchBar: ({ flexGrow, isValid, inputSize, activeBorderColor, cancelLabel, icon, value, resultBoxTopPosition, children, inputRef, isOpen, onCancelClick, ...props }: TSearchBar) => JSX.Element;
|
|
13
|
+
export declare const SearchBar: ({ flexGrow, isValid, inputSize, activeBorderColor, cancelLabel, icon, value, resultBoxTopPosition, children, inputRef, isOpen, onCancelClick, searchOnSubmit, ...props }: TSearchBar) => JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Story } from '@storybook/react';
|
|
2
2
|
declare const _default: {
|
|
3
|
-
component: ({ flexGrow, isValid, inputSize, activeBorderColor, cancelLabel, icon, value, resultBoxTopPosition, children, inputRef, isOpen, onCancelClick, ...props }: import("./SearchBar").TSearchBar) => JSX.Element;
|
|
3
|
+
component: ({ flexGrow, isValid, inputSize, activeBorderColor, cancelLabel, icon, value, resultBoxTopPosition, children, inputRef, isOpen, onCancelClick, searchOnSubmit, ...props }: import("./SearchBar").TSearchBar) => JSX.Element;
|
|
4
4
|
title: string;
|
|
5
5
|
args: {
|
|
6
6
|
placeholder: string;
|
|
@@ -14,6 +14,7 @@ declare type SearchResultContainerProps = {
|
|
|
14
14
|
export declare const SearchResultContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SearchResultContainerProps, never>;
|
|
15
15
|
export declare const SearchRightLabel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<SearchResultContainerProps, "isOpen">, never>;
|
|
16
16
|
export declare const SearchBarContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SearchInputProps, never>;
|
|
17
|
+
export declare const SearchForm: import("styled-components").StyledComponent<"form", import("styled-components").DefaultTheme, {}, never>;
|
|
17
18
|
export declare const SearchInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, SearchInputProps, never>;
|
|
18
19
|
export declare const SearchLeftIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
19
20
|
export {};
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var designTokens = require('@citygross/design-tokens');
|
|
6
5
|
var utils = require('@citygross/utils');
|
|
7
6
|
var React = require('react');
|
|
8
7
|
var SearchBar = require('../SearchBar/SearchBar.js');
|
|
@@ -13,13 +12,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
13
12
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
13
|
|
|
15
14
|
var Nav = function (_a) {
|
|
16
|
-
var _b
|
|
17
|
-
var logo = _a.logo, maxWidth = _a.maxWidth, height = _a.height, topPosition = _a.topPosition, mainLinks = _a.mainLinks,
|
|
15
|
+
var _b;
|
|
16
|
+
var logo = _a.logo, maxWidth = _a.maxWidth, height = _a.height, topPosition = _a.topPosition, mainLinks = _a.mainLinks, rightContent = _a.rightContent, searchResultElement = _a.searchResultElement, searchCancelLabel = _a.searchCancelLabel, searchIcon = _a.searchIcon, searchPlaceHolder = _a.searchPlaceHolder, searchOnChange = _a.searchOnChange, searchValue = _a.searchValue, searchOnSubmit = _a.searchOnSubmit, onSearchClick = _a.onSearchClick, closeSearch = _a.closeSearch, searchIsOpen = _a.searchIsOpen;
|
|
18
17
|
var searchContainerRef = React.useRef(null);
|
|
19
18
|
var searchInputRef = React.useRef(null);
|
|
20
19
|
var navRef = React.useRef(null);
|
|
21
20
|
var width = utils.useWindowSize().width;
|
|
22
|
-
var
|
|
21
|
+
var _c = React.useState(0), elToRemove = _c[0], setElToRemove = _c[1];
|
|
23
22
|
var widthRef = React.useRef(null);
|
|
24
23
|
var checkWidth = function () {
|
|
25
24
|
var _a, _b;
|
|
@@ -40,14 +39,13 @@ var Nav = function (_a) {
|
|
|
40
39
|
clearTimeout(debounce);
|
|
41
40
|
};
|
|
42
41
|
}, [width]);
|
|
43
|
-
var _f = React.useState(false), openSearch = _f[0], setOpenSearch = _f[1];
|
|
44
42
|
React__default["default"].useEffect(function () {
|
|
45
43
|
var handleClick = function (event) {
|
|
46
44
|
var _a;
|
|
47
45
|
if ((searchContainerRef === null || searchContainerRef === void 0 ? void 0 : searchContainerRef.current) &&
|
|
48
46
|
!((_a = searchContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
|
|
49
47
|
event.stopPropagation();
|
|
50
|
-
|
|
48
|
+
closeSearch && closeSearch();
|
|
51
49
|
}
|
|
52
50
|
};
|
|
53
51
|
document.addEventListener('click', function (e) { return handleClick(e); }, true);
|
|
@@ -59,17 +57,17 @@ var Nav = function (_a) {
|
|
|
59
57
|
React__default["default"].createElement(Nav_styles.NavContainer, { maxWidth: maxWidth },
|
|
60
58
|
logo,
|
|
61
59
|
React__default["default"].createElement(Nav_styles.NavChildContainer, null,
|
|
62
|
-
|
|
63
|
-
React__default["default"].createElement(SearchBar.SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, onCancelClick: function () {
|
|
64
|
-
|
|
65
|
-
}, isOpen:
|
|
66
|
-
React__default["default"].createElement(Nav_styles.NavMainLinks, null, (
|
|
60
|
+
searchIsOpen ? (React__default["default"].createElement(Nav_styles.NavSearchContainer, { ref: searchContainerRef },
|
|
61
|
+
React__default["default"].createElement(SearchBar.SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchOnSubmit: searchOnSubmit, onCancelClick: function () {
|
|
62
|
+
closeSearch && closeSearch();
|
|
63
|
+
}, isOpen: searchIsOpen }, searchResultElement))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
64
|
+
React__default["default"].createElement(Nav_styles.NavMainLinks, null, (_b = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, mainLinks.length - elToRemove)) === null || _b === void 0 ? void 0 : _b.map(function (link) { return link; })),
|
|
67
65
|
React__default["default"].createElement(Nav_styles.NavDummySearchContainer, { onClick: function () {
|
|
68
|
-
onSearchClick
|
|
66
|
+
onSearchClick && onSearchClick();
|
|
69
67
|
} },
|
|
70
68
|
React__default["default"].createElement(SearchBar.SearchBar, { icon: searchIcon, flexGrow: 1, placeholder: searchPlaceHolder })))),
|
|
71
69
|
rightContent)),
|
|
72
|
-
React__default["default"].createElement(Nav_styles.SearchResultOverlay, { show:
|
|
70
|
+
React__default["default"].createElement(Nav_styles.SearchResultOverlay, { show: searchIsOpen })));
|
|
73
71
|
};
|
|
74
72
|
|
|
75
73
|
exports.Nav = Nav;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Nav.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Nav.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -11,7 +11,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
11
11
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
12
12
|
|
|
13
13
|
var SearchBar = function (_a) {
|
|
14
|
-
var flexGrow = _a.flexGrow, isValid = _a.isValid, _b = _a.inputSize, inputSize = _b === void 0 ? 'medium' : _b, activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, icon = _a.icon, value = _a.value, resultBoxTopPosition = _a.resultBoxTopPosition, children = _a.children, inputRef = _a.inputRef, isOpen = _a.isOpen, onCancelClick = _a.onCancelClick, props = _tslib.__rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "onCancelClick"]);
|
|
14
|
+
var flexGrow = _a.flexGrow, isValid = _a.isValid, _b = _a.inputSize, inputSize = _b === void 0 ? 'medium' : _b, activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, icon = _a.icon, value = _a.value, resultBoxTopPosition = _a.resultBoxTopPosition, children = _a.children, inputRef = _a.inputRef, isOpen = _a.isOpen, onCancelClick = _a.onCancelClick, searchOnSubmit = _a.searchOnSubmit, props = _tslib.__rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "onCancelClick", "searchOnSubmit"]);
|
|
15
15
|
React.useEffect(function () {
|
|
16
16
|
var _a;
|
|
17
17
|
if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
|
|
@@ -21,7 +21,11 @@ var SearchBar = function (_a) {
|
|
|
21
21
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
22
22
|
React__default["default"].createElement(SearchBar_styles.SearchBarContainer, { activeBorderColor: activeBorderColor, inputSize: inputSize, flexGrow: flexGrow, isOpen: isOpen },
|
|
23
23
|
React__default["default"].createElement(SearchBar_styles.SearchLeftIcon, null, icon),
|
|
24
|
-
React__default["default"].createElement(SearchBar_styles.
|
|
24
|
+
React__default["default"].createElement(SearchBar_styles.SearchForm, { onSubmit: function (e) {
|
|
25
|
+
e.preventDefault();
|
|
26
|
+
searchOnSubmit && searchOnSubmit();
|
|
27
|
+
} },
|
|
28
|
+
React__default["default"].createElement(SearchBar_styles.SearchInput, _tslib.__assign({ flexGrow: flexGrow, isValid: isValid, inputSize: inputSize, activeBorderColor: activeBorderColor, ref: inputRef }, props, { value: value }))),
|
|
25
29
|
cancelLabel ? (React__default["default"].createElement(SearchBar_styles.SearchRightLabel, { onClick: function (e) {
|
|
26
30
|
e.stopPropagation();
|
|
27
31
|
onCancelClick && onCancelClick();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -15,7 +15,8 @@ var SearchBarContainer = styled__default["default"].div(templateObject_3 || (tem
|
|
|
15
15
|
return props.isOpen &&
|
|
16
16
|
"\n flex-direction: row;\n box-shadow: inset 0 0 2px " + props.activeBorderColor + ";\n ";
|
|
17
17
|
});
|
|
18
|
-
var
|
|
18
|
+
var SearchForm = styled__default["default"].form(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n flex: 1;\n display: none;\n @media (min-width: ", "px) {\n display: flex;\n }\n"], ["\n flex: 1;\n display: none;\n @media (min-width: ", "px) {\n display: flex;\n }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; });
|
|
19
|
+
var SearchInput = styled__default["default"].input(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n flex: 1;\n border: none;\n background: transparent;\n outline: none;\n font-size: ", "px;\n padding: ", "px;\n\n ::placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: ", ";\n opacity: 1; /* Firefox */\n }\n\n :-ms-input-placeholder {\n /* Internet Explorer 10-11 */\n color: ", ";\n }\n\n ::-ms-input-placeholder {\n /* Microsoft Edge */\n color: ", ";\n }\n @media (min-width: ", "px) {\n font-size: ", "px;\n }\n"], ["\n flex: 1;\n border: none;\n background: transparent;\n outline: none;\n font-size: ", "px;\n padding: ", "px;\n\n ::placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: ", ";\n opacity: 1; /* Firefox */\n }\n\n :-ms-input-placeholder {\n /* Internet Explorer 10-11 */\n color: ", ";\n }\n\n ::-ms-input-placeholder {\n /* Microsoft Edge */\n color: ", ";\n }\n @media (min-width: ", "px) {\n font-size: ", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) {
|
|
19
20
|
var _a, _b;
|
|
20
21
|
return props.inputSize === 'small'
|
|
21
22
|
? (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs
|
|
@@ -25,11 +26,12 @@ var SearchInput = styled__default["default"].input(templateObject_4 || (template
|
|
|
25
26
|
return props.inputSize === 'small'
|
|
26
27
|
? (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2
|
|
27
28
|
: (_b = props.theme.typography) === null || _b === void 0 ? void 0 : _b.size.s3;
|
|
28
|
-
}
|
|
29
|
-
var SearchLeftIcon = styled__default["default"].div(
|
|
30
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
29
|
+
});
|
|
30
|
+
var SearchLeftIcon = styled__default["default"].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-right: ", "px;\n"], ["\n display: flex;\n align-items: center;\n margin-right: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
31
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
31
32
|
|
|
32
33
|
exports.SearchBarContainer = SearchBarContainer;
|
|
34
|
+
exports.SearchForm = SearchForm;
|
|
33
35
|
exports.SearchInput = SearchInput;
|
|
34
36
|
exports.SearchLeftIcon = SearchLeftIcon;
|
|
35
37
|
exports.SearchResultContainer = SearchResultContainer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SearchBar.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,17 +1,16 @@
|
|
|
1
|
-
import { theme } from '@citygross/design-tokens';
|
|
2
1
|
import { useWindowSize } from '@citygross/utils';
|
|
3
2
|
import React, { useRef, useState, useEffect } from 'react';
|
|
4
3
|
import { SearchBar } from '../SearchBar/SearchBar.js';
|
|
5
4
|
import { Nav as Nav$1, NavContainer, NavChildContainer, NavSearchContainer, NavMainLinks, NavDummySearchContainer, SearchResultOverlay } from './Nav.styles.js';
|
|
6
5
|
|
|
7
6
|
var Nav = function (_a) {
|
|
8
|
-
var _b
|
|
9
|
-
var logo = _a.logo, maxWidth = _a.maxWidth, height = _a.height, topPosition = _a.topPosition, mainLinks = _a.mainLinks,
|
|
7
|
+
var _b;
|
|
8
|
+
var logo = _a.logo, maxWidth = _a.maxWidth, height = _a.height, topPosition = _a.topPosition, mainLinks = _a.mainLinks, rightContent = _a.rightContent, searchResultElement = _a.searchResultElement, searchCancelLabel = _a.searchCancelLabel, searchIcon = _a.searchIcon, searchPlaceHolder = _a.searchPlaceHolder, searchOnChange = _a.searchOnChange, searchValue = _a.searchValue, searchOnSubmit = _a.searchOnSubmit, onSearchClick = _a.onSearchClick, closeSearch = _a.closeSearch, searchIsOpen = _a.searchIsOpen;
|
|
10
9
|
var searchContainerRef = useRef(null);
|
|
11
10
|
var searchInputRef = useRef(null);
|
|
12
11
|
var navRef = useRef(null);
|
|
13
12
|
var width = useWindowSize().width;
|
|
14
|
-
var
|
|
13
|
+
var _c = useState(0), elToRemove = _c[0], setElToRemove = _c[1];
|
|
15
14
|
var widthRef = useRef(null);
|
|
16
15
|
var checkWidth = function () {
|
|
17
16
|
var _a, _b;
|
|
@@ -32,14 +31,13 @@ var Nav = function (_a) {
|
|
|
32
31
|
clearTimeout(debounce);
|
|
33
32
|
};
|
|
34
33
|
}, [width]);
|
|
35
|
-
var _f = useState(false), openSearch = _f[0], setOpenSearch = _f[1];
|
|
36
34
|
React.useEffect(function () {
|
|
37
35
|
var handleClick = function (event) {
|
|
38
36
|
var _a;
|
|
39
37
|
if ((searchContainerRef === null || searchContainerRef === void 0 ? void 0 : searchContainerRef.current) &&
|
|
40
38
|
!((_a = searchContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
|
|
41
39
|
event.stopPropagation();
|
|
42
|
-
|
|
40
|
+
closeSearch && closeSearch();
|
|
43
41
|
}
|
|
44
42
|
};
|
|
45
43
|
document.addEventListener('click', function (e) { return handleClick(e); }, true);
|
|
@@ -51,17 +49,17 @@ var Nav = function (_a) {
|
|
|
51
49
|
React.createElement(NavContainer, { maxWidth: maxWidth },
|
|
52
50
|
logo,
|
|
53
51
|
React.createElement(NavChildContainer, null,
|
|
54
|
-
|
|
55
|
-
React.createElement(SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, onCancelClick: function () {
|
|
56
|
-
|
|
57
|
-
}, isOpen:
|
|
58
|
-
React.createElement(NavMainLinks, null, (
|
|
52
|
+
searchIsOpen ? (React.createElement(NavSearchContainer, { ref: searchContainerRef },
|
|
53
|
+
React.createElement(SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchOnSubmit: searchOnSubmit, onCancelClick: function () {
|
|
54
|
+
closeSearch && closeSearch();
|
|
55
|
+
}, isOpen: searchIsOpen }, searchResultElement))) : (React.createElement(React.Fragment, null,
|
|
56
|
+
React.createElement(NavMainLinks, null, (_b = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, mainLinks.length - elToRemove)) === null || _b === void 0 ? void 0 : _b.map(function (link) { return link; })),
|
|
59
57
|
React.createElement(NavDummySearchContainer, { onClick: function () {
|
|
60
|
-
onSearchClick
|
|
58
|
+
onSearchClick && onSearchClick();
|
|
61
59
|
} },
|
|
62
60
|
React.createElement(SearchBar, { icon: searchIcon, flexGrow: 1, placeholder: searchPlaceHolder })))),
|
|
63
61
|
rightContent)),
|
|
64
|
-
React.createElement(SearchResultOverlay, { show:
|
|
62
|
+
React.createElement(SearchResultOverlay, { show: searchIsOpen })));
|
|
65
63
|
};
|
|
66
64
|
|
|
67
65
|
export { Nav };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Nav.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Nav.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { __rest, __assign } from '../../../../_virtual/_tslib.js';
|
|
2
2
|
import React, { useEffect } from 'react';
|
|
3
|
-
import { SearchBarContainer, SearchLeftIcon, SearchInput, SearchRightLabel, SearchResultContainer } from './SearchBar.styles.js';
|
|
3
|
+
import { SearchBarContainer, SearchLeftIcon, SearchForm, SearchInput, SearchRightLabel, SearchResultContainer } from './SearchBar.styles.js';
|
|
4
4
|
|
|
5
5
|
var SearchBar = function (_a) {
|
|
6
|
-
var flexGrow = _a.flexGrow, isValid = _a.isValid, _b = _a.inputSize, inputSize = _b === void 0 ? 'medium' : _b, activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, icon = _a.icon, value = _a.value, resultBoxTopPosition = _a.resultBoxTopPosition, children = _a.children, inputRef = _a.inputRef, isOpen = _a.isOpen, onCancelClick = _a.onCancelClick, props = __rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "onCancelClick"]);
|
|
6
|
+
var flexGrow = _a.flexGrow, isValid = _a.isValid, _b = _a.inputSize, inputSize = _b === void 0 ? 'medium' : _b, activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, icon = _a.icon, value = _a.value, resultBoxTopPosition = _a.resultBoxTopPosition, children = _a.children, inputRef = _a.inputRef, isOpen = _a.isOpen, onCancelClick = _a.onCancelClick, searchOnSubmit = _a.searchOnSubmit, props = __rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "onCancelClick", "searchOnSubmit"]);
|
|
7
7
|
useEffect(function () {
|
|
8
8
|
var _a;
|
|
9
9
|
if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
|
|
@@ -13,7 +13,11 @@ var SearchBar = function (_a) {
|
|
|
13
13
|
return (React.createElement(React.Fragment, null,
|
|
14
14
|
React.createElement(SearchBarContainer, { activeBorderColor: activeBorderColor, inputSize: inputSize, flexGrow: flexGrow, isOpen: isOpen },
|
|
15
15
|
React.createElement(SearchLeftIcon, null, icon),
|
|
16
|
-
React.createElement(
|
|
16
|
+
React.createElement(SearchForm, { onSubmit: function (e) {
|
|
17
|
+
e.preventDefault();
|
|
18
|
+
searchOnSubmit && searchOnSubmit();
|
|
19
|
+
} },
|
|
20
|
+
React.createElement(SearchInput, __assign({ flexGrow: flexGrow, isValid: isValid, inputSize: inputSize, activeBorderColor: activeBorderColor, ref: inputRef }, props, { value: value }))),
|
|
17
21
|
cancelLabel ? (React.createElement(SearchRightLabel, { onClick: function (e) {
|
|
18
22
|
e.stopPropagation();
|
|
19
23
|
onCancelClick && onCancelClick();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -7,7 +7,8 @@ var SearchBarContainer = styled.div(templateObject_3 || (templateObject_3 = __ma
|
|
|
7
7
|
return props.isOpen &&
|
|
8
8
|
"\n flex-direction: row;\n box-shadow: inset 0 0 2px " + props.activeBorderColor + ";\n ";
|
|
9
9
|
});
|
|
10
|
-
var
|
|
10
|
+
var SearchForm = styled.form(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex: 1;\n display: none;\n @media (min-width: ", "px) {\n display: flex;\n }\n"], ["\n flex: 1;\n display: none;\n @media (min-width: ", "px) {\n display: flex;\n }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; });
|
|
11
|
+
var SearchInput = styled.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n flex: 1;\n border: none;\n background: transparent;\n outline: none;\n font-size: ", "px;\n padding: ", "px;\n\n ::placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: ", ";\n opacity: 1; /* Firefox */\n }\n\n :-ms-input-placeholder {\n /* Internet Explorer 10-11 */\n color: ", ";\n }\n\n ::-ms-input-placeholder {\n /* Microsoft Edge */\n color: ", ";\n }\n @media (min-width: ", "px) {\n font-size: ", "px;\n }\n"], ["\n flex: 1;\n border: none;\n background: transparent;\n outline: none;\n font-size: ", "px;\n padding: ", "px;\n\n ::placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: ", ";\n opacity: 1; /* Firefox */\n }\n\n :-ms-input-placeholder {\n /* Internet Explorer 10-11 */\n color: ", ";\n }\n\n ::-ms-input-placeholder {\n /* Microsoft Edge */\n color: ", ";\n }\n @media (min-width: ", "px) {\n font-size: ", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) {
|
|
11
12
|
var _a, _b;
|
|
12
13
|
return props.inputSize === 'small'
|
|
13
14
|
? (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs
|
|
@@ -17,9 +18,9 @@ var SearchInput = styled.input(templateObject_4 || (templateObject_4 = __makeTem
|
|
|
17
18
|
return props.inputSize === 'small'
|
|
18
19
|
? (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2
|
|
19
20
|
: (_b = props.theme.typography) === null || _b === void 0 ? void 0 : _b.size.s3;
|
|
20
|
-
}
|
|
21
|
-
var SearchLeftIcon = styled.div(
|
|
22
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
21
|
+
});
|
|
22
|
+
var SearchLeftIcon = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-right: ", "px;\n"], ["\n display: flex;\n align-items: center;\n margin-right: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
23
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
23
24
|
|
|
24
|
-
export { SearchBarContainer, SearchInput, SearchLeftIcon, SearchResultContainer, SearchRightLabel };
|
|
25
|
+
export { SearchBarContainer, SearchForm, SearchInput, SearchLeftIcon, SearchResultContainer, SearchRightLabel };
|
|
25
26
|
//# sourceMappingURL=SearchBar.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SearchBar.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.84",
|
|
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": "bfbf261e28630860fe42b75481a8a69d650a4327"
|
|
75
75
|
}
|