diff --git a/client/src/widgets/search/ui/text-input/index.ts b/client/src/shared/ui/search-bar/ui/text-input/index.ts
similarity index 100%
rename from client/src/widgets/search/ui/text-input/index.ts
rename to client/src/shared/ui/search-bar/ui/text-input/index.ts
diff --git a/client/src/widgets/search/ui/text-input/text-input.module.scss b/client/src/shared/ui/search-bar/ui/text-input/text-input.module.scss
similarity index 100%
rename from client/src/widgets/search/ui/text-input/text-input.module.scss
rename to client/src/shared/ui/search-bar/ui/text-input/text-input.module.scss
diff --git a/client/src/widgets/search/ui/text-input/text-input.tsx b/client/src/shared/ui/search-bar/ui/text-input/text-input.tsx
similarity index 100%
rename from client/src/widgets/search/ui/text-input/text-input.tsx
rename to client/src/shared/ui/search-bar/ui/text-input/text-input.tsx
diff --git a/client/src/shared/ui/select/lib/select-styles.tsx b/client/src/shared/ui/select/lib/select-styles.tsx
index 6e6eaf805..19dcf59f3 100644
--- a/client/src/shared/ui/select/lib/select-styles.tsx
+++ b/client/src/shared/ui/select/lib/select-styles.tsx
@@ -2,17 +2,17 @@ import { CSSObjectWithLabel, GroupBase, OptionProps, StylesConfig } from 'react-
const _colors = {
grey: {
- normal: '#8f9094',
- dark: '#2f3239',
- medium: '#434752',
+ normal: 'var(--grey-normal-color)',
+ dark: 'var(--grey-dark-color)',
+ medium: 'var(--grey-medium-color)',
},
green: {
- bright: '#5bd424',
- dark: '#064006',
- active: '#1c8111',
+ bright: 'var(--green-bright-color)',
+ dark: 'var(--green-dark-color)',
+ active: 'var(--green-active-color)',
},
- white: '#fff',
- red: '#d42422',
+ white: 'var(--white-color)',
+ red: 'var(--red-error-color)',
};
const getFocusAndActiveStyles = (isWithBorder?: boolean) => ({
@@ -70,6 +70,7 @@ export const selectStyles = <
const customStyles = styles || {};
return {
+ ...customStyles,
control: (base, props) => ({
...base,
outline: 'none',
@@ -89,33 +90,33 @@ export const selectStyles = <
':focus-within': { ...getFocusAndActiveStyles(isWithBorder) },
caretColor: _colors.green.bright,
// Spreading custom styles
- ...(customStyles.control ? customStyles.control({}, props) : {}),
+ ...(customStyles.control && customStyles.control({}, props)),
}),
dropdownIndicator: (base, props) => ({
...base,
padding: 0,
cursor: 'pointer',
- ...(customStyles.dropdownIndicator ? customStyles.dropdownIndicator({}, props) : {}),
+ ...(customStyles.dropdownIndicator && customStyles.dropdownIndicator({}, props)),
}),
valueContainer: (base, props) => ({
...base,
padding: 0,
margin: 0,
- ...(customStyles.valueContainer ? customStyles.valueContainer({}, props) : {}),
+ ...(customStyles.valueContainer && customStyles.valueContainer({}, props)),
}),
singleValue: (base, props) => ({
...base,
color: _colors.white,
padding: 0,
margin: 0,
- ...(customStyles.singleValue ? customStyles.singleValue({}, props) : {}),
+ ...(customStyles.singleValue && customStyles.singleValue({}, props)),
}),
input: (base, props) => ({
...base,
color: _colors.white,
padding: 0,
margin: 0,
- ...(customStyles.input ? customStyles.input({}, props) : {}),
+ ...(customStyles.input && customStyles.input({}, props)),
}),
menu: (base, props) => ({
...base,
@@ -124,7 +125,7 @@ export const selectStyles = <
background: 'transparent',
paddingTop: '8px',
maxHeight: '300px',
- ...(customStyles.menu ? customStyles.menu({}, props) : {}),
+ ...(customStyles.menu && customStyles.menu({}, props)),
}),
menuList: (base, props) => ({
...base,
@@ -134,7 +135,7 @@ export const selectStyles = <
overflowY: 'auto',
boxShadow: '0 4px 24px 0 rgb(17 20 27 / 25%)',
background: _colors.grey.dark,
- ...(customStyles.menuList ? customStyles.menuList({}, props) : {}),
+ ...(customStyles.menuList && customStyles.menuList({}, props)),
}),
option: (styles, props) =>
customStyles.option
@@ -152,13 +153,13 @@ export const selectStyles = <
':hover': {
background: _colors.grey.medium,
},
- ...(customStyles.multiValue ? customStyles.multiValue({}, props) : {}),
+ ...(customStyles.multiValue && customStyles.multiValue({}, props)),
}),
multiValueLabel: (base, props) => ({
...base,
color: _colors.white,
fontSize: '100%',
- ...(customStyles.multiValueLabel ? customStyles.multiValueLabel({}, props) : {}),
+ ...(customStyles.multiValueLabel && customStyles.multiValueLabel({}, props)),
}),
multiValueRemove: (base, props) => ({
...base,
@@ -168,7 +169,7 @@ export const selectStyles = <
fill: _colors.red,
},
},
- ...(customStyles.multiValueRemove ? customStyles.multiValueRemove({}, props) : {}),
+ ...(customStyles.multiValueRemove && customStyles.multiValueRemove({}, props)),
}),
};
};
diff --git a/client/src/shared/ui/select/ui/select/select.tsx b/client/src/shared/ui/select/ui/select/select.tsx
index 999f3d44c..d6cba231b 100644
--- a/client/src/shared/ui/select/ui/select/select.tsx
+++ b/client/src/shared/ui/select/ui/select/select.tsx
@@ -78,6 +78,7 @@ export const Select = <
isWithBorder = true,
isIndicatorAllowed = true,
styles: customStyles,
+ menuPortalTarget,
...rest
} = props;
return (
@@ -112,7 +113,9 @@ export const Select = <
isMulti={isMulti}
isClearable={false}
hideSelectedOptions={!isCheckbox}
- menuPortalTarget={typeof window !== 'undefined' ? document.body : null}
+ menuPortalTarget={
+ menuPortalTarget ? menuPortalTarget : typeof window !== 'undefined' ? document.body : null
+ }
/>
{error && (
diff --git a/client/src/widgets/search/index.tsx b/client/src/widgets/search/index.tsx
deleted file mode 100644
index b11c96429..000000000
--- a/client/src/widgets/search/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { SearchBar } from './ui/search-bar';
diff --git a/client/src/widgets/search/lib/hooks/useTrackFiltersArr.ts b/client/src/widgets/search/lib/hooks/useTrackFiltersArr.ts
deleted file mode 100644
index 56895744c..000000000
--- a/client/src/widgets/search/lib/hooks/useTrackFiltersArr.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useEffect, useRef } from 'react';
-import qs from 'qs';
-import { Filter } from '../../types';
-
-export const useTrackFiltersArr = (
- filtersArr: Filter[],
- callback: (queryString: string) => void
-) => {
- const timerRef = useRef | null>(null);
- useEffect(() => {
- if (timerRef.current) {
- clearTimeout(timerRef.current);
- }
-
- timerRef.current = setTimeout(() => {
- const filtersValues = {
- filters: filtersArr.reduce<{ [key: string]: string | string[] | [number, number] }>(
- (acc, curr) => {
- switch (curr.type) {
- case 'text':
- if (curr.filterValue.length) {
- acc[curr.value] = curr.filterValue;
- }
-
- return acc;
-
- case 'multiple':
- case 'checkbox':
- if (curr.filterValue.length) {
- acc[curr.value] = curr.filterValue.map(item => item.value);
- }
-
- return acc;
-
- case 'range':
- if (curr.filterValue?.length) {
- acc[curr.value] = curr.filterValue;
- }
-
- return acc;
- }
- },
- {}
- ),
- };
-
- const queryString = qs.stringify(filtersValues);
-
- callback(queryString);
- }, 1300);
- }, [filtersArr, callback]);
-};
diff --git a/client/src/widgets/search/ui/search-bar/search-bar.tsx b/client/src/widgets/search/ui/search-bar/search-bar.tsx
deleted file mode 100644
index 80d5e4ba6..000000000
--- a/client/src/widgets/search/ui/search-bar/search-bar.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { FC, useState } from 'react';
-import styles from './search-bar.module.scss';
-import { Filter } from '../../types';
-import { FilterSelect } from '../filter-select';
-import { SearchInput } from '../search-input';
-import { TagList } from '../tag-list';
-import { Flex } from '@/shared/ui';
-import { useTrackFiltersArr } from '../../lib/hooks/useTrackFiltersArr';
-
-/**
- * Search-bar Component
- *
- * Used to search by query parameters.
- *
- * Props:
- *
- * @prop {Filter[]} [initialFiltersState] - Initial state as an array with filters.
- * @prop {(queryString: string) => void} [callback] - A callback that takes a string of query parameters as an argument. Must be used for requests to the server.
- *
- * Usage:
- *
- * ```tsx
- * import { SearchBar } from '@/widgets/search';
- *
- * console.log(string)}
- * />
- * ```
- */
-
-interface SearchBarProps {
- initialFiltersState: Filter[];
- callback: (queryString: string) => void;
-}
-
-export const SearchBar: FC = ({ initialFiltersState, callback }) => {
- const [filtersArr, setFilterArr] = useState(initialFiltersState);
- const [filterIndex, setFilterIndex] = useState(0);
- useTrackFiltersArr(filtersArr, callback);
-
- return (
-
-
-
-
-
-
-
- );
-};
diff --git a/client/src/widgets/search/ui/tag-list/tag-list.tsx b/client/src/widgets/search/ui/tag-list/tag-list.tsx
deleted file mode 100644
index d439ca4f2..000000000
--- a/client/src/widgets/search/ui/tag-list/tag-list.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { FC, Dispatch, SetStateAction } from 'react';
-import styles from './tag-list.module.scss';
-import { Filter } from '../../types';
-import { Tag } from '../tag';
-import { SearchTagMenu } from '../search-tag-menu';
-
-interface TagListProps {
- filtersArr: Filter[];
- setFilterArr: Dispatch>;
-}
-
-export const TagList: FC = ({ filtersArr, setFilterArr }) => {
- if (!filtersArr.length) {
- return null;
- }
-
- const handleClearTextFilter = (filterIndex: number) => {
- setFilterArr(prev =>
- prev.map((item, index) => {
- if (filterIndex === index) {
- item.filterValue = '';
- }
-
- return item;
- })
- );
- };
-
- const handleClearMultipleOption = (filterIndex: number, index: number) => {
- setFilterArr(prev => {
- const filter = prev[filterIndex];
-
- if (filter.type === 'checkbox' || filter.type === 'multiple') {
- const newFilterValue = filter.filterValue.filter((item, i) => i !== index);
-
- return prev.map((item, i) => {
- if (filterIndex === i) {
- item.filterValue = newFilterValue;
- }
-
- return item;
- });
- }
-
- return prev;
- });
- };
-
- const handleClearAllMultipleOptions = (filterIndex: number) => {
- setFilterArr(prev => {
- const filter = prev[filterIndex];
-
- if (filter.type === 'checkbox' || filter.type === 'multiple') {
- const newFilterValue = [filter.filterValue[0]];
-
- return prev.map((item, i) => {
- if (filterIndex === i) {
- item.filterValue = newFilterValue;
- }
-
- return item;
- });
- }
-
- return prev;
- });
- };
-
- return (
-
- );
-};