@gravity-ui/blog-constructor 10.1.0 → 10.1.1-alpha.0
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/FeedHeader/components/FilterControl/FilterControl.js +10 -6
- package/build/cjs/components/FeedHeader/components/FilterControl/FilterControl.js.map +1 -1
- package/build/cjs/components/FeedHeader/components/SearchFilter/SearchFilter.d.ts +2 -1
- package/build/cjs/components/FeedHeader/components/SearchFilter/SearchFilter.js +2 -2
- package/build/cjs/components/FeedHeader/components/SearchFilter/SearchFilter.js.map +1 -1
- package/build/cjs/components/FeedHeader/components/SelectFilter/SelectFilter.d.ts +4 -1
- package/build/cjs/components/FeedHeader/components/SelectFilter/SelectFilter.js +25 -3
- package/build/cjs/components/FeedHeader/components/SelectFilter/SelectFilter.js.map +1 -1
- package/build/cjs/components/Search/Search.d.ts +3 -1
- package/build/cjs/components/Search/Search.js +2 -1
- package/build/cjs/components/Search/Search.js.map +1 -1
- package/build/cjs/models/common.d.ts +12 -0
- package/build/cjs/models/common.js.map +1 -1
- package/build/esm/components/FeedHeader/components/FilterControl/FilterControl.js +10 -6
- package/build/esm/components/FeedHeader/components/FilterControl/FilterControl.js.map +1 -1
- package/build/esm/components/FeedHeader/components/SearchFilter/SearchFilter.d.ts +2 -1
- package/build/esm/components/FeedHeader/components/SearchFilter/SearchFilter.js +2 -2
- package/build/esm/components/FeedHeader/components/SearchFilter/SearchFilter.js.map +1 -1
- package/build/esm/components/FeedHeader/components/SelectFilter/SelectFilter.d.ts +4 -1
- package/build/esm/components/FeedHeader/components/SelectFilter/SelectFilter.js +25 -3
- package/build/esm/components/FeedHeader/components/SelectFilter/SelectFilter.js.map +1 -1
- package/build/esm/components/Search/Search.d.ts +3 -1
- package/build/esm/components/Search/Search.js +2 -1
- package/build/esm/components/Search/Search.js.map +1 -1
- package/build/esm/models/common.d.ts +12 -0
- package/build/esm/models/common.js.map +1 -1
- package/package.json +1 -1
- package/server/models/common.d.ts +12 -0
|
@@ -21,18 +21,22 @@ const FilterControl = ({ filter, initialValue, onChange }) => {
|
|
|
21
21
|
onChange(query);
|
|
22
22
|
}, [filter.analyticsEvents, handleAnalytics, onChange]);
|
|
23
23
|
if (filter.type === 'search') {
|
|
24
|
-
const { queryParamName, placeholder } = filter;
|
|
25
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: b(), children: (0, jsx_runtime_1.jsx)(SearchFilter_1.SearchFilter, { placeholder: placeholder, initialValue: initialValue, onChange: (value) => handleChange({ [queryParamName]: value }) }) }));
|
|
24
|
+
const { queryParamName, placeholder, onClick } = filter;
|
|
25
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: b(), children: (0, jsx_runtime_1.jsx)(SearchFilter_1.SearchFilter, { placeholder: placeholder, initialValue: initialValue, onChange: (value) => handleChange({ [queryParamName]: value }), onClick: onClick }) }));
|
|
26
26
|
}
|
|
27
27
|
if (filter.type === 'savedOnly') {
|
|
28
|
-
const { queryParamName } = filter;
|
|
28
|
+
const { queryParamName, onClick } = filter;
|
|
29
29
|
if (!hasLikes) {
|
|
30
30
|
return null;
|
|
31
31
|
}
|
|
32
|
-
|
|
32
|
+
const handleSavedOnlyChange = (value) => {
|
|
33
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(value);
|
|
34
|
+
handleChange({ [queryParamName]: value ? 'true' : '', search: '' });
|
|
35
|
+
};
|
|
36
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: b({ 'width-auto': true }), children: (0, jsx_runtime_1.jsx)(SavedOnlyFilter_1.SavedOnlyFilter, { initialValue: initialValue === 'true', onChange: handleSavedOnlyChange }) }));
|
|
33
37
|
}
|
|
34
|
-
const { queryParamName, multiple, filterable, hasClear, placeholder, options, allLabel, qa } = filter;
|
|
35
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: b(), children: (0, jsx_runtime_1.jsx)(SelectFilter_1.SelectFilter, { multiple: multiple, filterable: filterable, hasClear: hasClear, placeholder: placeholder, options: options, allLabel: allLabel, qa: qa, initialValue: initialValue, onChange: (value) => handleChange({ [queryParamName]: value }) }) }));
|
|
38
|
+
const { queryParamName, multiple, filterable, hasClear, placeholder, options, allLabel, qa, onOpen, onClose, } = filter;
|
|
39
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: b(), children: (0, jsx_runtime_1.jsx)(SelectFilter_1.SelectFilter, { multiple: multiple, filterable: filterable, hasClear: hasClear, placeholder: placeholder, options: options, allLabel: allLabel, qa: qa, initialValue: initialValue, onChange: (value) => handleChange({ [queryParamName]: value }), onOpen: onOpen, onClose: onClose }) }));
|
|
36
40
|
};
|
|
37
41
|
exports.FilterControl = FilterControl;
|
|
38
42
|
//# sourceMappingURL=FilterControl.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterControl.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/FilterControl/FilterControl.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,mEAA0D;AAE1D,uEAA+D;AAQ/D,gDAA2C;AAC3C,2EAAmE;AACnE,kEAA0D;AAC1D,kEAA0D;AAI1D,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,gBAAgB,CAAC,CAAC;AAQ3B,MAAM,aAAa,GAAG,CAAC,EAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAClF,MAAM,eAAe,GAAG,IAAA,+BAAY,GAAE,CAAC;IACvC,MAAM,EAAC,QAAQ,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,2BAAY,CAAC,CAAC;IAElD,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAClC,CAAC,KAAY,EAAE,EAAE;QACb,IAAI,MAAM,CAAC,eAAe,EAAE,CAAC;YACzB,eAAe,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;QAC5C,CAAC;QACD,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,EACD,CAAC,MAAM,CAAC,eAAe,EAAE,eAAe,EAAE,QAAQ,CAAC,CACtD,CAAC;IAEF,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC3B,MAAM,EAAC,cAAc,EAAE,WAAW,EAAC,GAAG,MAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"FilterControl.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/FilterControl/FilterControl.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {useAnalytics} from '@gravity-ui/page-constructor';\n\nimport {LikesContext} from '../../../../contexts/LikesContext';\nimport {\n FilterConfig,\n Query,\n SavedOnlyFilterConfig,\n SearchFilterConfig,\n SelectFilterConfig,\n} from '../../../../models/common';\nimport {block} from '../../../../utils/cn';\nimport {SavedOnlyFilter} from '../SavedOnlyFilter/SavedOnlyFilter';\nimport {SearchFilter} from '../SearchFilter/SearchFilter';\nimport {SelectFilter} from '../SelectFilter/SelectFilter';\n\nimport './FilterControl.scss';\n\nconst b = block('filter-control');\n\nexport type FilterControlProps = {\n filter: FilterConfig;\n initialValue: string | number | null | undefined;\n onChange: (query: Query) => void;\n};\n\nexport const FilterControl = ({filter, initialValue, onChange}: FilterControlProps) => {\n const handleAnalytics = useAnalytics();\n const {hasLikes} = React.useContext(LikesContext);\n\n const handleChange = React.useCallback(\n (query: Query) => {\n if (filter.analyticsEvents) {\n handleAnalytics(filter.analyticsEvents);\n }\n onChange(query);\n },\n [filter.analyticsEvents, handleAnalytics, onChange],\n );\n\n if (filter.type === 'search') {\n const {queryParamName, placeholder, onClick} = filter as SearchFilterConfig;\n\n return (\n <div className={b()}>\n <SearchFilter\n placeholder={placeholder}\n initialValue={initialValue as string | undefined}\n onChange={(value) => handleChange({[queryParamName]: value} as Query)}\n onClick={onClick}\n />\n </div>\n );\n }\n\n if (filter.type === 'savedOnly') {\n const {queryParamName, onClick} = filter as SavedOnlyFilterConfig;\n\n if (!hasLikes) {\n return null;\n }\n\n const handleSavedOnlyChange = (value: boolean) => {\n onClick?.(value);\n handleChange({[queryParamName]: value ? 'true' : '', search: ''} as Query);\n };\n\n return (\n <div className={b({'width-auto': true})}>\n <SavedOnlyFilter\n initialValue={initialValue === 'true'}\n onChange={handleSavedOnlyChange}\n />\n </div>\n );\n }\n\n const {\n queryParamName,\n multiple,\n filterable,\n hasClear,\n placeholder,\n options,\n allLabel,\n qa,\n onOpen,\n onClose,\n } = filter as SelectFilterConfig;\n\n return (\n <div className={b()}>\n <SelectFilter\n multiple={multiple}\n filterable={filterable}\n hasClear={hasClear}\n placeholder={placeholder as string | undefined}\n options={options}\n allLabel={allLabel}\n qa={qa}\n initialValue={initialValue}\n onChange={(value) => handleChange({[queryParamName]: value} as Query)}\n onOpen={onOpen}\n onClose={onClose}\n />\n </div>\n );\n};\n"]}
|
|
@@ -2,6 +2,7 @@ export type SearchFilterProps = {
|
|
|
2
2
|
placeholder?: string;
|
|
3
3
|
initialValue: string | undefined;
|
|
4
4
|
onChange: (value: string) => void;
|
|
5
|
+
onClick?: () => void;
|
|
5
6
|
className?: string;
|
|
6
7
|
};
|
|
7
|
-
export declare const SearchFilter: ({ placeholder, initialValue, onChange, className, }: SearchFilterProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare const SearchFilter: ({ placeholder, initialValue, onChange, onClick, className, }: SearchFilterProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -6,8 +6,8 @@ const i18n_1 = require("../../../../i18n/index.js");
|
|
|
6
6
|
const cn_1 = require("../../../../utils/cn.js");
|
|
7
7
|
const Search_1 = require("../../../Search/Search.js");
|
|
8
8
|
const b = (0, cn_1.block)('search-filter');
|
|
9
|
-
const SearchFilter = ({ placeholder, initialValue, onChange, className, }) => {
|
|
10
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)(Search_1.Search, { className: b('search'), placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : (0, i18n_1.i18n)(i18n_1.Keyset.Search), initialValue: initialValue && typeof initialValue === 'string' ? initialValue : '', onSubmit: onChange }) }));
|
|
9
|
+
const SearchFilter = ({ placeholder, initialValue, onChange, onClick, className, }) => {
|
|
10
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)(Search_1.Search, { className: b('search'), placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : (0, i18n_1.i18n)(i18n_1.Keyset.Search), initialValue: initialValue && typeof initialValue === 'string' ? initialValue : '', onSubmit: onChange, onClick: onClick }) }));
|
|
11
11
|
};
|
|
12
12
|
exports.SearchFilter = SearchFilter;
|
|
13
13
|
//# sourceMappingURL=SearchFilter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchFilter.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/SearchFilter/SearchFilter.tsx"],"names":[],"mappings":";;;;AAAA,oDAA8C;AAC9C,gDAA2C;AAC3C,sDAA8C;AAI9C,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,eAAe,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"SearchFilter.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/SearchFilter/SearchFilter.tsx"],"names":[],"mappings":";;;;AAAA,oDAA8C;AAC9C,gDAA2C;AAC3C,sDAA8C;AAI9C,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,eAAe,CAAC,CAAC;AAU1B,MAAM,YAAY,GAAG,CAAC,EACzB,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,SAAS,GACO,EAAE,EAAE;IACpB,OAAO,CACH,gCAAK,SAAS,EAAE,SAAS,YACrB,uBAAC,eAAM,IACH,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,IAAA,WAAI,EAAC,aAAM,CAAC,MAAM,CAAC,EAC/C,YAAY,EAAE,YAAY,IAAI,OAAO,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAClF,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,GAClB,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAlBW,QAAA,YAAY,gBAkBvB","sourcesContent":["import {Keyset, i18n} from '../../../../i18n';\nimport {block} from '../../../../utils/cn';\nimport {Search} from '../../../Search/Search';\n\nimport './SearchFilter.scss';\n\nconst b = block('search-filter');\n\nexport type SearchFilterProps = {\n placeholder?: string;\n initialValue: string | undefined;\n onChange: (value: string) => void;\n onClick?: () => void;\n className?: string;\n};\n\nexport const SearchFilter = ({\n placeholder,\n initialValue,\n onChange,\n onClick,\n className,\n}: SearchFilterProps) => {\n return (\n <div className={className}>\n <Search\n className={b('search')}\n placeholder={placeholder ?? i18n(Keyset.Search)}\n initialValue={initialValue && typeof initialValue === 'string' ? initialValue : ''}\n onSubmit={onChange}\n onClick={onClick}\n />\n </div>\n );\n};\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { SelectOption } from '@gravity-ui/uikit';
|
|
2
|
+
import { SelectFilterCloseData } from "../../../../models/common.js";
|
|
2
3
|
export type SelectFilterProps = {
|
|
3
4
|
multiple?: boolean;
|
|
4
5
|
filterable?: boolean;
|
|
@@ -9,6 +10,8 @@ export type SelectFilterProps = {
|
|
|
9
10
|
qa?: string;
|
|
10
11
|
initialValue: string | number | null | undefined;
|
|
11
12
|
onChange: (value: string) => void;
|
|
13
|
+
onOpen?: () => void;
|
|
14
|
+
onClose?: (data: SelectFilterCloseData) => void;
|
|
12
15
|
className?: string;
|
|
13
16
|
};
|
|
14
|
-
export declare const SelectFilter: ({ multiple, filterable, hasClear, placeholder, options, allLabel, qa, initialValue, onChange, className, }: SelectFilterProps) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export declare const SelectFilter: ({ multiple, filterable, hasClear, placeholder, options, allLabel, qa, initialValue, onChange, onOpen, onClose, className, }: SelectFilterProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -10,28 +10,50 @@ const cn_1 = require("../../../../utils/cn.js");
|
|
|
10
10
|
const customRenders_1 = require("./customRenders.js");
|
|
11
11
|
const b = (0, cn_1.block)('feed-filter');
|
|
12
12
|
const VIRTUALIZATION_THRESHOLD = 1000;
|
|
13
|
-
const SelectFilter = ({ multiple, filterable, hasClear, placeholder, options, allLabel, qa, initialValue, onChange, className, }) => {
|
|
13
|
+
const SelectFilter = ({ multiple, filterable, hasClear, placeholder, options, allLabel, qa, initialValue, onChange, onOpen, onClose, className, }) => {
|
|
14
14
|
const isMobile = React.useContext(MobileContext_1.MobileContext);
|
|
15
15
|
let defaultValue;
|
|
16
16
|
if (multiple) {
|
|
17
17
|
defaultValue = initialValue ? initialValue.split(',') : [];
|
|
18
18
|
}
|
|
19
19
|
else {
|
|
20
|
-
defaultValue =
|
|
20
|
+
defaultValue =
|
|
21
|
+
initialValue === null || initialValue === undefined ? [] : [`${initialValue}`];
|
|
21
22
|
}
|
|
23
|
+
const selectedValuesRef = React.useRef(defaultValue);
|
|
24
|
+
const selectedValuesOnOpenRef = React.useRef(defaultValue);
|
|
25
|
+
const isOpenRef = React.useRef(false);
|
|
22
26
|
const optionsWithEmpty = multiple
|
|
23
27
|
? options
|
|
24
28
|
: [{ value: 'empty', content: allLabel }, ...options];
|
|
25
29
|
const handleChange = (selectedValues) => {
|
|
26
30
|
if (multiple) {
|
|
31
|
+
selectedValuesRef.current = selectedValues;
|
|
27
32
|
onChange(selectedValues.join(','));
|
|
28
33
|
}
|
|
29
34
|
else {
|
|
30
35
|
const isEmpty = selectedValues.some((v) => v === 'empty');
|
|
36
|
+
selectedValuesRef.current = isEmpty ? [] : selectedValues;
|
|
31
37
|
onChange(isEmpty ? '' : selectedValues[0]);
|
|
32
38
|
}
|
|
33
39
|
};
|
|
34
|
-
|
|
40
|
+
const handleOpenChange = (isOpen) => {
|
|
41
|
+
if (isOpen) {
|
|
42
|
+
selectedValuesOnOpenRef.current = [...selectedValuesRef.current];
|
|
43
|
+
isOpenRef.current = true;
|
|
44
|
+
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
if (isOpenRef.current) {
|
|
48
|
+
const selectedValues = [...selectedValuesRef.current];
|
|
49
|
+
onClose === null || onClose === void 0 ? void 0 : onClose({
|
|
50
|
+
selectedValues,
|
|
51
|
+
selectedValuesOnOpen: [...selectedValuesOnOpenRef.current],
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
isOpenRef.current = false;
|
|
55
|
+
};
|
|
56
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)(uikit_1.Select, { className: b('select'), size: "xl", multiple: multiple, filterable: filterable, hasClear: hasClear !== null && hasClear !== void 0 ? hasClear : multiple, disablePortal: true, options: optionsWithEmpty, defaultValue: defaultValue, popupClassName: b('popup', { isMobile }), onUpdate: handleChange, onOpenChange: handleOpenChange, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : allLabel, renderControl: (0, customRenders_1.renderSwitcher)({
|
|
35
57
|
initial: defaultValue,
|
|
36
58
|
list: optionsWithEmpty,
|
|
37
59
|
defaultLabel: allLabel,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectFilter.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/SelectFilter/SelectFilter.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,6CAAuD;AAEvD,yEAAiE;
|
|
1
|
+
{"version":3,"file":"SelectFilter.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/SelectFilter/SelectFilter.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Select, SelectOption} from '@gravity-ui/uikit';\n\nimport {MobileContext} from '../../../../contexts/MobileContext';\nimport {SelectFilterCloseData} from '../../../../models/common';\nimport {block} from '../../../../utils/cn';\n\nimport {renderFilter, renderOption, renderSwitcher} from './customRenders';\n\nimport './SelectFilter.scss';\n\nconst b = block('feed-filter');\n\nconst VIRTUALIZATION_THRESHOLD = 1000;\n\nexport type SelectFilterProps = {\n multiple?: boolean;\n filterable?: boolean;\n hasClear?: boolean;\n placeholder?: string;\n options: SelectOption[];\n allLabel: string;\n qa?: string;\n initialValue: string | number | null | undefined;\n onChange: (value: string) => void;\n onOpen?: () => void;\n onClose?: (data: SelectFilterCloseData) => void;\n className?: string;\n};\n\nexport const SelectFilter = ({\n multiple,\n filterable,\n hasClear,\n placeholder,\n options,\n allLabel,\n qa,\n initialValue,\n onChange,\n onOpen,\n onClose,\n className,\n}: SelectFilterProps) => {\n const isMobile = React.useContext(MobileContext);\n\n let defaultValue: string[];\n if (multiple) {\n defaultValue = initialValue ? (initialValue as string).split(',') : [];\n } else {\n defaultValue =\n initialValue === null || initialValue === undefined ? [] : [`${initialValue}`];\n }\n\n const selectedValuesRef = React.useRef(defaultValue);\n const selectedValuesOnOpenRef = React.useRef(defaultValue);\n const isOpenRef = React.useRef(false);\n\n const optionsWithEmpty: SelectOption[] = multiple\n ? options\n : [{value: 'empty', content: allLabel}, ...options];\n\n const handleChange = (selectedValues: string[]) => {\n if (multiple) {\n selectedValuesRef.current = selectedValues;\n onChange(selectedValues.join(','));\n } else {\n const isEmpty = selectedValues.some((v) => v === 'empty');\n selectedValuesRef.current = isEmpty ? [] : selectedValues;\n onChange(isEmpty ? '' : selectedValues[0]);\n }\n };\n\n const handleOpenChange = (isOpen: boolean) => {\n if (isOpen) {\n selectedValuesOnOpenRef.current = [...selectedValuesRef.current];\n isOpenRef.current = true;\n onOpen?.();\n return;\n }\n\n if (isOpenRef.current) {\n const selectedValues = [...selectedValuesRef.current];\n onClose?.({\n selectedValues,\n selectedValuesOnOpen: [...selectedValuesOnOpenRef.current],\n });\n }\n\n isOpenRef.current = false;\n };\n\n return (\n <div className={className}>\n <Select\n className={b('select')}\n size=\"xl\"\n multiple={multiple}\n filterable={filterable}\n hasClear={hasClear ?? multiple}\n disablePortal\n options={optionsWithEmpty}\n defaultValue={defaultValue}\n popupClassName={b('popup', {isMobile})}\n onUpdate={handleChange}\n onOpenChange={handleOpenChange}\n placeholder={placeholder ?? allLabel}\n renderControl={renderSwitcher({\n initial: defaultValue,\n list: optionsWithEmpty,\n defaultLabel: allLabel,\n qa,\n })}\n virtualizationThreshold={VIRTUALIZATION_THRESHOLD}\n renderOption={renderOption}\n renderFilter={filterable ? renderFilter({className: b('popup-filter')}) : undefined}\n />\n </div>\n );\n};\n"]}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
import { ClassNameProps } from "../../models/common.js";
|
|
2
3
|
export type SearchSize = 's' | 'm';
|
|
3
4
|
interface SearchProps extends ClassNameProps {
|
|
@@ -8,6 +9,7 @@ interface SearchProps extends ClassNameProps {
|
|
|
8
9
|
placeholder?: string;
|
|
9
10
|
size?: SearchSize;
|
|
10
11
|
autoFocus?: boolean;
|
|
12
|
+
onClick?: React.MouseEventHandler<HTMLInputElement>;
|
|
11
13
|
className?: string;
|
|
12
14
|
}
|
|
13
15
|
/**
|
|
@@ -16,5 +18,5 @@ interface SearchProps extends ClassNameProps {
|
|
|
16
18
|
*
|
|
17
19
|
* @returns {JSX|null}
|
|
18
20
|
*/
|
|
19
|
-
export declare const Search: ({ className, initialValue, onSubmit, debounce, placeholder, size, autoFocus, value: externalValue, }: SearchProps) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export declare const Search: ({ className, initialValue, onSubmit, debounce, placeholder, size, autoFocus, onClick, value: externalValue, }: SearchProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
22
|
export {};
|
|
@@ -20,7 +20,7 @@ const AUTOFOCUS_TIMEOUT = 0;
|
|
|
20
20
|
*
|
|
21
21
|
* @returns {JSX|null}
|
|
22
22
|
*/
|
|
23
|
-
const Search = ({ className, initialValue, onSubmit, debounce = 300, placeholder = (0, i18n_1.i18n)(i18n_1.Keyset.Search), size = 'm', autoFocus = false, value: externalValue, }) => {
|
|
23
|
+
const Search = ({ className, initialValue, onSubmit, debounce = 300, placeholder = (0, i18n_1.i18n)(i18n_1.Keyset.Search), size = 'm', autoFocus = false, onClick, value: externalValue, }) => {
|
|
24
24
|
const onSubmitRef = React.useRef(onSubmit);
|
|
25
25
|
onSubmitRef.current = onSubmit;
|
|
26
26
|
const handleChange = React.useMemo(() => (0, debounce_1.default)((...args) => onSubmitRef.current(...args), debounce), [debounce]);
|
|
@@ -56,6 +56,7 @@ const Search = ({ className, initialValue, onSubmit, debounce = 300, placeholder
|
|
|
56
56
|
handleChange(query);
|
|
57
57
|
}, placeholder: placeholder, size: size === 'm' ? 'xl' : 'l', controlRef: inputRef, view: "clear", controlProps: {
|
|
58
58
|
className: b('search-suggest-control'),
|
|
59
|
+
onClick,
|
|
59
60
|
}, endContent: rightContent }) }));
|
|
60
61
|
};
|
|
61
62
|
exports.Search = Search;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Search.js","sourceRoot":"../../../../src","sources":["components/Search/Search.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,6CAAmD;AACnD,6CAAkD;AAClD,0EAA6C;AAE7C,4DAAoD;AACpD,8CAAwC;AAExC,0CAAqC;AAIrC,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,QAAQ,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Search.js","sourceRoot":"../../../../src","sources":["components/Search/Search.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Magnifier, Xmark} from '@gravity-ui/icons';\nimport {Icon, TextInput} from '@gravity-ui/uikit';\nimport lodashDebounce from 'lodash/debounce';\n\nimport {useIsIPhone} from '../../hooks/useIsIPhone';\nimport {Keyset, i18n} from '../../i18n';\nimport {ClassNameProps} from '../../models/common';\nimport {block} from '../../utils/cn';\n\nimport './Search.scss';\n\nconst b = block('search');\n\nexport type SearchSize = 's' | 'm';\n\ninterface SearchProps extends ClassNameProps {\n value?: string;\n initialValue: string;\n onSubmit: (value: string) => void;\n debounce?: number;\n placeholder?: string;\n size?: SearchSize;\n autoFocus?: boolean;\n onClick?: React.MouseEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nconst SEARCH_ICON_SIZE = 16;\nconst CLOSE_ICON_SIZE = 20;\nconst AUTOFOCUS_TIMEOUT = 0;\n\n/**\n * Search component, placed on blog main page,\n * based on TextInput from uikit\n *\n * @returns {JSX|null}\n */\nexport const Search = ({\n className,\n initialValue,\n onSubmit,\n debounce = 300,\n placeholder = i18n(Keyset.Search),\n size = 'm',\n autoFocus = false,\n onClick,\n value: externalValue,\n}: SearchProps) => {\n const onSubmitRef = React.useRef(onSubmit);\n onSubmitRef.current = onSubmit;\n\n const handleChange = React.useMemo(\n () =>\n lodashDebounce(\n (...args: Parameters<typeof onSubmit>) => onSubmitRef.current(...args),\n debounce,\n ),\n [debounce],\n );\n\n const [value, setValue] = React.useState<string>(initialValue);\n const inputRef = React.useRef<HTMLInputElement>(null);\n const isIPhone = useIsIPhone();\n\n React.useEffect(() => {\n if (externalValue !== undefined) {\n setValue(externalValue);\n }\n }, [externalValue]);\n\n React.useEffect(() => {\n if (autoFocus && !isIPhone) {\n setTimeout(() => inputRef?.current?.focus({preventScroll: true}), AUTOFOCUS_TIMEOUT);\n }\n }, [autoFocus, inputRef, isIPhone]);\n\n const rightContent = React.useMemo(() => {\n const isClose = Boolean(value);\n const iconSize = value ? CLOSE_ICON_SIZE : SEARCH_ICON_SIZE;\n\n const handleClick = () => {\n if (value) {\n handleChange.cancel();\n setValue('');\n onSubmit('');\n inputRef.current?.focus();\n }\n };\n\n return (\n <button\n className={b('input-icon', {close: isClose})}\n onClick={handleClick}\n aria-label={value ? i18n(Keyset.ClearAction) : undefined}\n aria-hidden={!value}\n >\n <Icon size={iconSize} data={isClose ? Xmark : Magnifier} />\n </button>\n );\n }, [handleChange, onSubmit, value]);\n\n return (\n <div className={b({size}, className)}>\n <TextInput\n className={b('search-suggest')}\n value={value}\n onUpdate={(query) => {\n setValue(query);\n handleChange(query);\n }}\n placeholder={placeholder}\n size={size === 'm' ? 'xl' : 'l'}\n controlRef={inputRef}\n view=\"clear\"\n controlProps={{\n className: b('search-suggest-control'),\n onClick,\n }}\n endContent={rightContent}\n />\n </div>\n );\n};\n"]}
|
|
@@ -169,6 +169,10 @@ type FilterConfigBase = {
|
|
|
169
169
|
/** Optional analytics events fired when this control's value changes */
|
|
170
170
|
analyticsEvents?: AnalyticsEventsProp;
|
|
171
171
|
};
|
|
172
|
+
export type SelectFilterCloseData = {
|
|
173
|
+
selectedValues: string[];
|
|
174
|
+
selectedValuesOnOpen: string[];
|
|
175
|
+
};
|
|
172
176
|
export type SelectFilterConfig = FilterConfigBase & Pick<SelectProps, 'multiple' | 'filterable' | 'hasClear' | 'placeholder'> & {
|
|
173
177
|
type?: 'select';
|
|
174
178
|
/** The selectable items for this filter */
|
|
@@ -177,14 +181,22 @@ export type SelectFilterConfig = FilterConfigBase & Pick<SelectProps, 'multiple'
|
|
|
177
181
|
allLabel: string;
|
|
178
182
|
/** Optional QA attribute forwarded to the switcher */
|
|
179
183
|
qa?: string;
|
|
184
|
+
/** Optional callback fired when the select opens */
|
|
185
|
+
onOpen?: () => void;
|
|
186
|
+
/** Optional callback fired when the select closes */
|
|
187
|
+
onClose?: (data: SelectFilterCloseData) => void;
|
|
180
188
|
};
|
|
181
189
|
export type SearchFilterConfig = FilterConfigBase & {
|
|
182
190
|
type: 'search';
|
|
183
191
|
/** Placeholder text for the search input */
|
|
184
192
|
placeholder?: string;
|
|
193
|
+
/** Optional callback fired when the search input is clicked */
|
|
194
|
+
onClick?: () => void;
|
|
185
195
|
};
|
|
186
196
|
export type SavedOnlyFilterConfig = FilterConfigBase & {
|
|
187
197
|
type: 'savedOnly';
|
|
198
|
+
/** Optional callback fired with the next saved-only state */
|
|
199
|
+
onClick?: (state: boolean) => void;
|
|
188
200
|
};
|
|
189
201
|
export type FilterConfig = SelectFilterConfig | SearchFilterConfig | SavedOnlyFilterConfig;
|
|
190
202
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"common.js","sourceRoot":"../../../src","sources":["models/common.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"common.js","sourceRoot":"../../../src","sources":["models/common.ts"],"names":[],"mappings":";;;AA6PA,wDAWC;AA3PD,IAAY,KAGX;AAHD,WAAY,KAAK;IACb,wBAAe,CAAA;IACf,sBAAa,CAAA;AACjB,CAAC,EAHW,KAAK,qBAAL,KAAK,QAGhB;AAmFD,IAAY,SAgBX;AAhBD,WAAY,SAAS;IACjB,yCAA4B,CAAA;IAC5B,mCAAsB,CAAA;IACtB,yCAA4B,CAAA;IAC5B,uCAA0B,CAAA;IAC1B,yCAA4B,CAAA;IAC5B,mCAAsB,CAAA;IACtB,oDAAuC,CAAA;IACvC,yCAA4B,CAAA;IAC5B,2CAA8B,CAAA;IAC9B,qCAAwB,CAAA;IACxB,qCAAwB,CAAA;IACxB,qCAAwB,CAAA;IACxB,sDAAyC,CAAA;IACzC,qCAAwB,CAAA;IACxB,uDAA0C,CAAA;AAC9C,CAAC,EAhBW,SAAS,yBAAT,SAAS,QAgBpB;AA8DD,IAAY,iBAUX;AAVD,WAAY,iBAAiB;IACzB,uDAAkC,CAAA;IAClC,qDAAgC,CAAA;IAChC,wDAAmC,CAAA;IACnC,kEAA6C,CAAA;IAC7C,kEAA6C,CAAA;IAC7C,kEAA6C,CAAA;IAC7C,+CAA0B,CAAA;IAC1B,uDAAkC,CAAA;IAClC,wDAAmC,CAAA;AACvC,CAAC,EAVW,iBAAiB,iCAAjB,iBAAiB,QAU5B;AAkED,SAAgB,sBAAsB,CAAC,OAAsB;IACzD,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,EAAE,CAAC;IACd,CAAC;IAED,2EAA2E;IAC3E,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC5B,OAAO,OAA2B,CAAC;IACvC,CAAC;IAED,OAAO,CAAC,OAAyB,CAAC,CAAC;AACvC,CAAC;AAED,IAAY,YAGX;AAHD,WAAY,YAAY;IACpB,2BAAW,CAAA;IACX,4BAAY,CAAA;AAChB,CAAC,EAHW,YAAY,4BAAZ,YAAY,QAGvB;AAED,IAAY,yBAGX;AAHD,WAAY,yBAAyB;IACjC,sCAAS,CAAA;IACT,sCAAS,CAAA;AACb,CAAC,EAHW,yBAAyB,yCAAzB,yBAAyB,QAGpC","sourcesContent":["import * as React from 'react';\n\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport {MarkdownItPluginCb} from '@diplodoc/transform/lib/plugins/typings';\nimport {\n AnalyticsEventsProp,\n HeaderBlockProps as PageConstructorHeaderBlockProps,\n} from '@gravity-ui/page-constructor';\nimport {SelectOption, SelectProps} from '@gravity-ui/uikit';\nimport {IBrowser, IDevice} from 'ua-parser-js';\n\nimport {Locale} from '../models/locale';\n\nexport enum Theme {\n Light = 'light',\n Dark = 'dark',\n}\n\nexport interface ClassNameProps {\n className?: string;\n}\n\nexport type Author = {\n id: number | string;\n avatar: string | null;\n createdAt: string;\n updatedAt: string;\n firstName: string | null;\n secondName: string | null;\n description: string | null;\n fullDescription: string | null;\n shortDescription: string | null;\n} & {\n [x: string]: string | null;\n};\n\nexport type Query = Record<string, number | string | null>;\n\n//page models\n\nexport interface Menu {\n title: string;\n}\n\nexport interface WithDeviceProps {\n device: IDevice;\n browser: IBrowser;\n isRobot: boolean;\n}\n\nexport interface PostsProps {\n posts: PostData[];\n count: number;\n totalCount: number;\n pinnedPost?: PostData;\n}\n\nexport type Tag = {\n slug: string;\n name: string;\n createdAt?: string;\n updatedAt?: string;\n icon?: string;\n isDeleted?: boolean;\n locale?: string;\n blogTagId?: number | string;\n count?: number;\n};\n\nexport interface PostData {\n author?: string;\n authors?: Author[];\n blogPostId?: number | string;\n content?: string;\n date: string;\n description?: string;\n hasUserLike: boolean;\n htmlTitle: string;\n id: number;\n image: string;\n isPublished?: boolean;\n sharedImage?: string;\n likes: number;\n locale: Locale;\n metaDescription?: string | null;\n metaTitle?: string | null;\n readingTime?: number;\n shareDescription?: string;\n shareImage?: string;\n shareTitle?: string;\n slug: string;\n keywords?: string[];\n tags: Tag[];\n textTitle: string;\n title: string;\n url: string;\n noIndex?: boolean;\n}\n\nexport enum BlockType {\n Header = 'blog-header-block',\n YFM = 'blog-yfm-block',\n Layout = 'blog-layout-block',\n Media = 'blog-media-block',\n Banner = 'blog-banner-block',\n CTA = 'blog-cta-block',\n ColoredText = 'blog-colored-text-block',\n Author = 'blog-author-block',\n Suggest = 'blog-suggest-block',\n Meta = 'blog-meta-block',\n Feed = 'blog-feed-block',\n Form = 'blog-form-block',\n CompactMedia = 'blog-compact-media-block',\n Take = 'blog-take-block',\n SideCardList = 'blog-side-card-list-block',\n}\n\nexport type MetaProps = {\n metaComponent: JSX.Element;\n needHelmetWrapper: boolean;\n};\n\nexport type MetaOrganizationType = {\n url: string;\n appTitle: string;\n legalName: string;\n supportEmail: string;\n};\n\nexport interface PostMetaProps {\n title: string;\n date: string;\n image: string;\n canonicalUrl: string;\n content?: string;\n description?: string;\n sharing: {\n shareTitle: string;\n shareDescription: string;\n shareImage: string;\n shareGenImage: string;\n shareGenTitle: string;\n };\n keywords?: string[];\n noIndex?: boolean;\n authors?: Author[];\n tags?: Tag[];\n organization: MetaOrganizationType;\n}\n\nexport type ToggleLikeCallbackType = ({\n postId,\n hasLike,\n}: {\n postId?: number | string;\n hasLike?: boolean;\n}) => void;\n\nexport interface HeaderBlockProps extends PageConstructorHeaderBlockProps {\n backLink?: {\n url: string;\n title: React.ReactNode;\n };\n}\n\nexport type GetPostsRequest = {\n page: number;\n perPage: number;\n savedOnly: boolean;\n search: string | undefined;\n [filterParam: string]: string | number | boolean | undefined;\n};\n\nexport type GetPostsType = (query: GetPostsRequest) => Promise<PostsProps>;\n\nexport type HandleChangeQueryParams = (params: Query) => void;\n\nexport enum DefaultEventNames {\n ShareButton = 'share-button-click',\n SaveButton = 'save-button-click',\n ShowMore = 'show-more-button-click',\n PaginatorHome = 'paginator-home-button-click',\n PaginatorNext = 'paginator-next-button-click',\n PaginatorPage = 'paginator-page-button-click',\n Tag = 'selector-tag-click',\n Service = 'selector-service-click',\n SaveOnly = 'save-only-button-click',\n}\n\nexport type FetchArgs = {\n page?: number;\n query: Query;\n};\n\nexport interface QAProps {\n qa?: string;\n}\n\ntype FilterConfigBase = {\n /** The key used in queryParams and passed to handleLoadData query */\n queryParamName: string;\n /** Optional analytics events fired when this control's value changes */\n analyticsEvents?: AnalyticsEventsProp;\n};\n\nexport type SelectFilterCloseData = {\n selectedValues: string[];\n selectedValuesOnOpen: string[];\n};\n\nexport type SelectFilterConfig = FilterConfigBase &\n Pick<SelectProps, 'multiple' | 'filterable' | 'hasClear' | 'placeholder'> & {\n type?: 'select';\n /** The selectable items for this filter */\n options: SelectOption[];\n /** Label shown when nothing is selected (acts as \"All ...\" placeholder) */\n allLabel: string;\n /** Optional QA attribute forwarded to the switcher */\n qa?: string;\n /** Optional callback fired when the select opens */\n onOpen?: () => void;\n /** Optional callback fired when the select closes */\n onClose?: (data: SelectFilterCloseData) => void;\n };\n\nexport type SearchFilterConfig = FilterConfigBase & {\n type: 'search';\n /** Placeholder text for the search input */\n placeholder?: string;\n /** Optional callback fired when the search input is clicked */\n onClick?: () => void;\n};\n\nexport type SavedOnlyFilterConfig = FilterConfigBase & {\n type: 'savedOnly';\n /** Optional callback fired with the next saved-only state */\n onClick?: (state: boolean) => void;\n};\n\nexport type FilterConfig = SelectFilterConfig | SearchFilterConfig | SavedOnlyFilterConfig;\n\n/**\n * Filters can be supplied either as a flat array (all filters in one row)\n * or as an array of rows (each inner array is rendered as a separate row).\n *\n * @example Single row (backward-compatible)\n * filters: [searchFilter, tagsFilter]\n *\n * @example Multiple rows\n * filters: [[searchFilter, savedOnlyFilter], [tagsFilter, serviceFilter]]\n */\nexport type FiltersConfig = FilterConfig[] | FilterConfig[][];\n\nexport function normalizeFiltersToRows(filters: FiltersConfig): FilterConfig[][] {\n if (filters.length === 0) {\n return [];\n }\n\n // If the first element is itself an array, the input is already multi-row.\n if (Array.isArray(filters[0])) {\n return filters as FilterConfig[][];\n }\n\n return [filters as FilterConfig[]];\n}\n\nexport enum PostCardSize {\n SMALL = 's',\n MEDIUM = 'm',\n}\n\nexport enum PostCardTitleHeadingLevel {\n H2 = 'h2',\n H3 = 'h3',\n}\n\nexport interface TransformPostOptions {\n plugins?: MarkdownItPluginCb[];\n}\n"]}
|
|
@@ -18,17 +18,21 @@ export const FilterControl = ({ filter, initialValue, onChange }) => {
|
|
|
18
18
|
onChange(query);
|
|
19
19
|
}, [filter.analyticsEvents, handleAnalytics, onChange]);
|
|
20
20
|
if (filter.type === 'search') {
|
|
21
|
-
const { queryParamName, placeholder } = filter;
|
|
22
|
-
return (_jsx("div", { className: b(), children: _jsx(SearchFilter, { placeholder: placeholder, initialValue: initialValue, onChange: (value) => handleChange({ [queryParamName]: value }) }) }));
|
|
21
|
+
const { queryParamName, placeholder, onClick } = filter;
|
|
22
|
+
return (_jsx("div", { className: b(), children: _jsx(SearchFilter, { placeholder: placeholder, initialValue: initialValue, onChange: (value) => handleChange({ [queryParamName]: value }), onClick: onClick }) }));
|
|
23
23
|
}
|
|
24
24
|
if (filter.type === 'savedOnly') {
|
|
25
|
-
const { queryParamName } = filter;
|
|
25
|
+
const { queryParamName, onClick } = filter;
|
|
26
26
|
if (!hasLikes) {
|
|
27
27
|
return null;
|
|
28
28
|
}
|
|
29
|
-
|
|
29
|
+
const handleSavedOnlyChange = (value) => {
|
|
30
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(value);
|
|
31
|
+
handleChange({ [queryParamName]: value ? 'true' : '', search: '' });
|
|
32
|
+
};
|
|
33
|
+
return (_jsx("div", { className: b({ 'width-auto': true }), children: _jsx(SavedOnlyFilter, { initialValue: initialValue === 'true', onChange: handleSavedOnlyChange }) }));
|
|
30
34
|
}
|
|
31
|
-
const { queryParamName, multiple, filterable, hasClear, placeholder, options, allLabel, qa } = filter;
|
|
32
|
-
return (_jsx("div", { className: b(), children: _jsx(SelectFilter, { multiple: multiple, filterable: filterable, hasClear: hasClear, placeholder: placeholder, options: options, allLabel: allLabel, qa: qa, initialValue: initialValue, onChange: (value) => handleChange({ [queryParamName]: value }) }) }));
|
|
35
|
+
const { queryParamName, multiple, filterable, hasClear, placeholder, options, allLabel, qa, onOpen, onClose, } = filter;
|
|
36
|
+
return (_jsx("div", { className: b(), children: _jsx(SelectFilter, { multiple: multiple, filterable: filterable, hasClear: hasClear, placeholder: placeholder, options: options, allLabel: allLabel, qa: qa, initialValue: initialValue, onChange: (value) => handleChange({ [queryParamName]: value }), onOpen: onOpen, onClose: onClose }) }));
|
|
33
37
|
};
|
|
34
38
|
//# sourceMappingURL=FilterControl.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterControl.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/FilterControl/FilterControl.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,YAAY,EAAC,MAAM,8BAA8B,CAAC;AAE1D,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAQ/D,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAC3C,OAAO,EAAC,eAAe,EAAC,8CAA2C;AACnE,OAAO,EAAC,YAAY,EAAC,wCAAqC;AAC1D,OAAO,EAAC,YAAY,EAAC,wCAAqC;AAE1D,OAAO,qBAAqB,CAAC;AAE7B,MAAM,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;AAQlC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAClF,MAAM,eAAe,GAAG,YAAY,EAAE,CAAC;IACvC,MAAM,EAAC,QAAQ,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAElD,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAClC,CAAC,KAAY,EAAE,EAAE;QACb,IAAI,MAAM,CAAC,eAAe,EAAE,CAAC;YACzB,eAAe,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;QAC5C,CAAC;QACD,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,EACD,CAAC,MAAM,CAAC,eAAe,EAAE,eAAe,EAAE,QAAQ,CAAC,CACtD,CAAC;IAEF,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC3B,MAAM,EAAC,cAAc,EAAE,WAAW,EAAC,GAAG,MAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"FilterControl.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/FilterControl/FilterControl.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {useAnalytics} from '@gravity-ui/page-constructor';\n\nimport {LikesContext} from '../../../../contexts/LikesContext';\nimport {\n FilterConfig,\n Query,\n SavedOnlyFilterConfig,\n SearchFilterConfig,\n SelectFilterConfig,\n} from '../../../../models/common';\nimport {block} from '../../../../utils/cn';\nimport {SavedOnlyFilter} from '../SavedOnlyFilter/SavedOnlyFilter';\nimport {SearchFilter} from '../SearchFilter/SearchFilter';\nimport {SelectFilter} from '../SelectFilter/SelectFilter';\n\nimport './FilterControl.scss';\n\nconst b = block('filter-control');\n\nexport type FilterControlProps = {\n filter: FilterConfig;\n initialValue: string | number | null | undefined;\n onChange: (query: Query) => void;\n};\n\nexport const FilterControl = ({filter, initialValue, onChange}: FilterControlProps) => {\n const handleAnalytics = useAnalytics();\n const {hasLikes} = React.useContext(LikesContext);\n\n const handleChange = React.useCallback(\n (query: Query) => {\n if (filter.analyticsEvents) {\n handleAnalytics(filter.analyticsEvents);\n }\n onChange(query);\n },\n [filter.analyticsEvents, handleAnalytics, onChange],\n );\n\n if (filter.type === 'search') {\n const {queryParamName, placeholder, onClick} = filter as SearchFilterConfig;\n\n return (\n <div className={b()}>\n <SearchFilter\n placeholder={placeholder}\n initialValue={initialValue as string | undefined}\n onChange={(value) => handleChange({[queryParamName]: value} as Query)}\n onClick={onClick}\n />\n </div>\n );\n }\n\n if (filter.type === 'savedOnly') {\n const {queryParamName, onClick} = filter as SavedOnlyFilterConfig;\n\n if (!hasLikes) {\n return null;\n }\n\n const handleSavedOnlyChange = (value: boolean) => {\n onClick?.(value);\n handleChange({[queryParamName]: value ? 'true' : '', search: ''} as Query);\n };\n\n return (\n <div className={b({'width-auto': true})}>\n <SavedOnlyFilter\n initialValue={initialValue === 'true'}\n onChange={handleSavedOnlyChange}\n />\n </div>\n );\n }\n\n const {\n queryParamName,\n multiple,\n filterable,\n hasClear,\n placeholder,\n options,\n allLabel,\n qa,\n onOpen,\n onClose,\n } = filter as SelectFilterConfig;\n\n return (\n <div className={b()}>\n <SelectFilter\n multiple={multiple}\n filterable={filterable}\n hasClear={hasClear}\n placeholder={placeholder as string | undefined}\n options={options}\n allLabel={allLabel}\n qa={qa}\n initialValue={initialValue}\n onChange={(value) => handleChange({[queryParamName]: value} as Query)}\n onOpen={onOpen}\n onClose={onClose}\n />\n </div>\n );\n};\n"]}
|
|
@@ -3,6 +3,7 @@ export type SearchFilterProps = {
|
|
|
3
3
|
placeholder?: string;
|
|
4
4
|
initialValue: string | undefined;
|
|
5
5
|
onChange: (value: string) => void;
|
|
6
|
+
onClick?: () => void;
|
|
6
7
|
className?: string;
|
|
7
8
|
};
|
|
8
|
-
export declare const SearchFilter: ({ placeholder, initialValue, onChange, className, }: SearchFilterProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare const SearchFilter: ({ placeholder, initialValue, onChange, onClick, className, }: SearchFilterProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -4,7 +4,7 @@ import { block } from "../../../../utils/cn.js";
|
|
|
4
4
|
import { Search } from "../../../Search/Search.js";
|
|
5
5
|
import './SearchFilter.css';
|
|
6
6
|
const b = block('search-filter');
|
|
7
|
-
export const SearchFilter = ({ placeholder, initialValue, onChange, className, }) => {
|
|
8
|
-
return (_jsx("div", { className: className, children: _jsx(Search, { className: b('search'), placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : i18n(Keyset.Search), initialValue: initialValue && typeof initialValue === 'string' ? initialValue : '', onSubmit: onChange }) }));
|
|
7
|
+
export const SearchFilter = ({ placeholder, initialValue, onChange, onClick, className, }) => {
|
|
8
|
+
return (_jsx("div", { className: className, children: _jsx(Search, { className: b('search'), placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : i18n(Keyset.Search), initialValue: initialValue && typeof initialValue === 'string' ? initialValue : '', onSubmit: onChange, onClick: onClick }) }));
|
|
9
9
|
};
|
|
10
10
|
//# sourceMappingURL=SearchFilter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchFilter.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/SearchFilter/SearchFilter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAE,IAAI,EAAC,kCAAyB;AAC9C,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAC3C,OAAO,EAAC,MAAM,EAAC,kCAA+B;AAE9C,OAAO,oBAAoB,CAAC;AAE5B,MAAM,CAAC,GAAG,KAAK,CAAC,eAAe,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"SearchFilter.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/SearchFilter/SearchFilter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAE,IAAI,EAAC,kCAAyB;AAC9C,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAC3C,OAAO,EAAC,MAAM,EAAC,kCAA+B;AAE9C,OAAO,oBAAoB,CAAC;AAE5B,MAAM,CAAC,GAAG,KAAK,CAAC,eAAe,CAAC,CAAC;AAUjC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EACzB,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,SAAS,GACO,EAAE,EAAE;IACpB,OAAO,CACH,cAAK,SAAS,EAAE,SAAS,YACrB,KAAC,MAAM,IACH,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,EAC/C,YAAY,EAAE,YAAY,IAAI,OAAO,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAClF,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,GAClB,GACA,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import {Keyset, i18n} from '../../../../i18n';\nimport {block} from '../../../../utils/cn';\nimport {Search} from '../../../Search/Search';\n\nimport './SearchFilter.scss';\n\nconst b = block('search-filter');\n\nexport type SearchFilterProps = {\n placeholder?: string;\n initialValue: string | undefined;\n onChange: (value: string) => void;\n onClick?: () => void;\n className?: string;\n};\n\nexport const SearchFilter = ({\n placeholder,\n initialValue,\n onChange,\n onClick,\n className,\n}: SearchFilterProps) => {\n return (\n <div className={className}>\n <Search\n className={b('search')}\n placeholder={placeholder ?? i18n(Keyset.Search)}\n initialValue={initialValue && typeof initialValue === 'string' ? initialValue : ''}\n onSubmit={onChange}\n onClick={onClick}\n />\n </div>\n );\n};\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { SelectOption } from '@gravity-ui/uikit';
|
|
2
|
+
import { SelectFilterCloseData } from "../../../../models/common.js";
|
|
2
3
|
import './SelectFilter.css';
|
|
3
4
|
export type SelectFilterProps = {
|
|
4
5
|
multiple?: boolean;
|
|
@@ -10,6 +11,8 @@ export type SelectFilterProps = {
|
|
|
10
11
|
qa?: string;
|
|
11
12
|
initialValue: string | number | null | undefined;
|
|
12
13
|
onChange: (value: string) => void;
|
|
14
|
+
onOpen?: () => void;
|
|
15
|
+
onClose?: (data: SelectFilterCloseData) => void;
|
|
13
16
|
className?: string;
|
|
14
17
|
};
|
|
15
|
-
export declare const SelectFilter: ({ multiple, filterable, hasClear, placeholder, options, allLabel, qa, initialValue, onChange, className, }: SelectFilterProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare const SelectFilter: ({ multiple, filterable, hasClear, placeholder, options, allLabel, qa, initialValue, onChange, onOpen, onClose, className, }: SelectFilterProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -7,28 +7,50 @@ import { renderFilter, renderOption, renderSwitcher } from "./customRenders.js";
|
|
|
7
7
|
import './SelectFilter.css';
|
|
8
8
|
const b = block('feed-filter');
|
|
9
9
|
const VIRTUALIZATION_THRESHOLD = 1000;
|
|
10
|
-
export const SelectFilter = ({ multiple, filterable, hasClear, placeholder, options, allLabel, qa, initialValue, onChange, className, }) => {
|
|
10
|
+
export const SelectFilter = ({ multiple, filterable, hasClear, placeholder, options, allLabel, qa, initialValue, onChange, onOpen, onClose, className, }) => {
|
|
11
11
|
const isMobile = React.useContext(MobileContext);
|
|
12
12
|
let defaultValue;
|
|
13
13
|
if (multiple) {
|
|
14
14
|
defaultValue = initialValue ? initialValue.split(',') : [];
|
|
15
15
|
}
|
|
16
16
|
else {
|
|
17
|
-
defaultValue =
|
|
17
|
+
defaultValue =
|
|
18
|
+
initialValue === null || initialValue === undefined ? [] : [`${initialValue}`];
|
|
18
19
|
}
|
|
20
|
+
const selectedValuesRef = React.useRef(defaultValue);
|
|
21
|
+
const selectedValuesOnOpenRef = React.useRef(defaultValue);
|
|
22
|
+
const isOpenRef = React.useRef(false);
|
|
19
23
|
const optionsWithEmpty = multiple
|
|
20
24
|
? options
|
|
21
25
|
: [{ value: 'empty', content: allLabel }, ...options];
|
|
22
26
|
const handleChange = (selectedValues) => {
|
|
23
27
|
if (multiple) {
|
|
28
|
+
selectedValuesRef.current = selectedValues;
|
|
24
29
|
onChange(selectedValues.join(','));
|
|
25
30
|
}
|
|
26
31
|
else {
|
|
27
32
|
const isEmpty = selectedValues.some((v) => v === 'empty');
|
|
33
|
+
selectedValuesRef.current = isEmpty ? [] : selectedValues;
|
|
28
34
|
onChange(isEmpty ? '' : selectedValues[0]);
|
|
29
35
|
}
|
|
30
36
|
};
|
|
31
|
-
|
|
37
|
+
const handleOpenChange = (isOpen) => {
|
|
38
|
+
if (isOpen) {
|
|
39
|
+
selectedValuesOnOpenRef.current = [...selectedValuesRef.current];
|
|
40
|
+
isOpenRef.current = true;
|
|
41
|
+
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
if (isOpenRef.current) {
|
|
45
|
+
const selectedValues = [...selectedValuesRef.current];
|
|
46
|
+
onClose === null || onClose === void 0 ? void 0 : onClose({
|
|
47
|
+
selectedValues,
|
|
48
|
+
selectedValuesOnOpen: [...selectedValuesOnOpenRef.current],
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
isOpenRef.current = false;
|
|
52
|
+
};
|
|
53
|
+
return (_jsx("div", { className: className, children: _jsx(Select, { className: b('select'), size: "xl", multiple: multiple, filterable: filterable, hasClear: hasClear !== null && hasClear !== void 0 ? hasClear : multiple, disablePortal: true, options: optionsWithEmpty, defaultValue: defaultValue, popupClassName: b('popup', { isMobile }), onUpdate: handleChange, onOpenChange: handleOpenChange, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : allLabel, renderControl: renderSwitcher({
|
|
32
54
|
initial: defaultValue,
|
|
33
55
|
list: optionsWithEmpty,
|
|
34
56
|
defaultLabel: allLabel,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectFilter.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/SelectFilter/SelectFilter.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,MAAM,EAAe,MAAM,mBAAmB,CAAC;AAEvD,OAAO,EAAC,aAAa,EAAC,8CAA2C;
|
|
1
|
+
{"version":3,"file":"SelectFilter.js","sourceRoot":"../../../../../../src","sources":["components/FeedHeader/components/SelectFilter/SelectFilter.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Select, SelectOption} from '@gravity-ui/uikit';\n\nimport {MobileContext} from '../../../../contexts/MobileContext';\nimport {SelectFilterCloseData} from '../../../../models/common';\nimport {block} from '../../../../utils/cn';\n\nimport {renderFilter, renderOption, renderSwitcher} from './customRenders';\n\nimport './SelectFilter.scss';\n\nconst b = block('feed-filter');\n\nconst VIRTUALIZATION_THRESHOLD = 1000;\n\nexport type SelectFilterProps = {\n multiple?: boolean;\n filterable?: boolean;\n hasClear?: boolean;\n placeholder?: string;\n options: SelectOption[];\n allLabel: string;\n qa?: string;\n initialValue: string | number | null | undefined;\n onChange: (value: string) => void;\n onOpen?: () => void;\n onClose?: (data: SelectFilterCloseData) => void;\n className?: string;\n};\n\nexport const SelectFilter = ({\n multiple,\n filterable,\n hasClear,\n placeholder,\n options,\n allLabel,\n qa,\n initialValue,\n onChange,\n onOpen,\n onClose,\n className,\n}: SelectFilterProps) => {\n const isMobile = React.useContext(MobileContext);\n\n let defaultValue: string[];\n if (multiple) {\n defaultValue = initialValue ? (initialValue as string).split(',') : [];\n } else {\n defaultValue =\n initialValue === null || initialValue === undefined ? [] : [`${initialValue}`];\n }\n\n const selectedValuesRef = React.useRef(defaultValue);\n const selectedValuesOnOpenRef = React.useRef(defaultValue);\n const isOpenRef = React.useRef(false);\n\n const optionsWithEmpty: SelectOption[] = multiple\n ? options\n : [{value: 'empty', content: allLabel}, ...options];\n\n const handleChange = (selectedValues: string[]) => {\n if (multiple) {\n selectedValuesRef.current = selectedValues;\n onChange(selectedValues.join(','));\n } else {\n const isEmpty = selectedValues.some((v) => v === 'empty');\n selectedValuesRef.current = isEmpty ? [] : selectedValues;\n onChange(isEmpty ? '' : selectedValues[0]);\n }\n };\n\n const handleOpenChange = (isOpen: boolean) => {\n if (isOpen) {\n selectedValuesOnOpenRef.current = [...selectedValuesRef.current];\n isOpenRef.current = true;\n onOpen?.();\n return;\n }\n\n if (isOpenRef.current) {\n const selectedValues = [...selectedValuesRef.current];\n onClose?.({\n selectedValues,\n selectedValuesOnOpen: [...selectedValuesOnOpenRef.current],\n });\n }\n\n isOpenRef.current = false;\n };\n\n return (\n <div className={className}>\n <Select\n className={b('select')}\n size=\"xl\"\n multiple={multiple}\n filterable={filterable}\n hasClear={hasClear ?? multiple}\n disablePortal\n options={optionsWithEmpty}\n defaultValue={defaultValue}\n popupClassName={b('popup', {isMobile})}\n onUpdate={handleChange}\n onOpenChange={handleOpenChange}\n placeholder={placeholder ?? allLabel}\n renderControl={renderSwitcher({\n initial: defaultValue,\n list: optionsWithEmpty,\n defaultLabel: allLabel,\n qa,\n })}\n virtualizationThreshold={VIRTUALIZATION_THRESHOLD}\n renderOption={renderOption}\n renderFilter={filterable ? renderFilter({className: b('popup-filter')}) : undefined}\n />\n </div>\n );\n};\n"]}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
import { ClassNameProps } from "../../models/common.js";
|
|
2
3
|
import './Search.css';
|
|
3
4
|
export type SearchSize = 's' | 'm';
|
|
@@ -9,6 +10,7 @@ interface SearchProps extends ClassNameProps {
|
|
|
9
10
|
placeholder?: string;
|
|
10
11
|
size?: SearchSize;
|
|
11
12
|
autoFocus?: boolean;
|
|
13
|
+
onClick?: React.MouseEventHandler<HTMLInputElement>;
|
|
12
14
|
className?: string;
|
|
13
15
|
}
|
|
14
16
|
/**
|
|
@@ -17,5 +19,5 @@ interface SearchProps extends ClassNameProps {
|
|
|
17
19
|
*
|
|
18
20
|
* @returns {JSX|null}
|
|
19
21
|
*/
|
|
20
|
-
export declare const Search: ({ className, initialValue, onSubmit, debounce, placeholder, size, autoFocus, value: externalValue, }: SearchProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export declare const Search: ({ className, initialValue, onSubmit, debounce, placeholder, size, autoFocus, onClick, value: externalValue, }: SearchProps) => import("react/jsx-runtime").JSX.Element;
|
|
21
23
|
export {};
|
|
@@ -17,7 +17,7 @@ const AUTOFOCUS_TIMEOUT = 0;
|
|
|
17
17
|
*
|
|
18
18
|
* @returns {JSX|null}
|
|
19
19
|
*/
|
|
20
|
-
export const Search = ({ className, initialValue, onSubmit, debounce = 300, placeholder = i18n(Keyset.Search), size = 'm', autoFocus = false, value: externalValue, }) => {
|
|
20
|
+
export const Search = ({ className, initialValue, onSubmit, debounce = 300, placeholder = i18n(Keyset.Search), size = 'm', autoFocus = false, onClick, value: externalValue, }) => {
|
|
21
21
|
const onSubmitRef = React.useRef(onSubmit);
|
|
22
22
|
onSubmitRef.current = onSubmit;
|
|
23
23
|
const handleChange = React.useMemo(() => lodashDebounce((...args) => onSubmitRef.current(...args), debounce), [debounce]);
|
|
@@ -53,6 +53,7 @@ export const Search = ({ className, initialValue, onSubmit, debounce = 300, plac
|
|
|
53
53
|
handleChange(query);
|
|
54
54
|
}, placeholder: placeholder, size: size === 'm' ? 'xl' : 'l', controlRef: inputRef, view: "clear", controlProps: {
|
|
55
55
|
className: b('search-suggest-control'),
|
|
56
|
+
onClick,
|
|
56
57
|
}, endContent: rightContent }) }));
|
|
57
58
|
};
|
|
58
59
|
//# sourceMappingURL=Search.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Search.js","sourceRoot":"../../../../src","sources":["components/Search/Search.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAC,IAAI,EAAE,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,cAAc,2BAAwB;AAE7C,OAAO,EAAC,WAAW,EAAC,mCAAgC;AACpD,OAAO,EAAC,MAAM,EAAE,IAAI,EAAC,4BAAmB;AAExC,OAAO,EAAC,KAAK,EAAC,0BAAuB;AAErC,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Search.js","sourceRoot":"../../../../src","sources":["components/Search/Search.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Magnifier, Xmark} from '@gravity-ui/icons';\nimport {Icon, TextInput} from '@gravity-ui/uikit';\nimport lodashDebounce from 'lodash/debounce';\n\nimport {useIsIPhone} from '../../hooks/useIsIPhone';\nimport {Keyset, i18n} from '../../i18n';\nimport {ClassNameProps} from '../../models/common';\nimport {block} from '../../utils/cn';\n\nimport './Search.scss';\n\nconst b = block('search');\n\nexport type SearchSize = 's' | 'm';\n\ninterface SearchProps extends ClassNameProps {\n value?: string;\n initialValue: string;\n onSubmit: (value: string) => void;\n debounce?: number;\n placeholder?: string;\n size?: SearchSize;\n autoFocus?: boolean;\n onClick?: React.MouseEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nconst SEARCH_ICON_SIZE = 16;\nconst CLOSE_ICON_SIZE = 20;\nconst AUTOFOCUS_TIMEOUT = 0;\n\n/**\n * Search component, placed on blog main page,\n * based on TextInput from uikit\n *\n * @returns {JSX|null}\n */\nexport const Search = ({\n className,\n initialValue,\n onSubmit,\n debounce = 300,\n placeholder = i18n(Keyset.Search),\n size = 'm',\n autoFocus = false,\n onClick,\n value: externalValue,\n}: SearchProps) => {\n const onSubmitRef = React.useRef(onSubmit);\n onSubmitRef.current = onSubmit;\n\n const handleChange = React.useMemo(\n () =>\n lodashDebounce(\n (...args: Parameters<typeof onSubmit>) => onSubmitRef.current(...args),\n debounce,\n ),\n [debounce],\n );\n\n const [value, setValue] = React.useState<string>(initialValue);\n const inputRef = React.useRef<HTMLInputElement>(null);\n const isIPhone = useIsIPhone();\n\n React.useEffect(() => {\n if (externalValue !== undefined) {\n setValue(externalValue);\n }\n }, [externalValue]);\n\n React.useEffect(() => {\n if (autoFocus && !isIPhone) {\n setTimeout(() => inputRef?.current?.focus({preventScroll: true}), AUTOFOCUS_TIMEOUT);\n }\n }, [autoFocus, inputRef, isIPhone]);\n\n const rightContent = React.useMemo(() => {\n const isClose = Boolean(value);\n const iconSize = value ? CLOSE_ICON_SIZE : SEARCH_ICON_SIZE;\n\n const handleClick = () => {\n if (value) {\n handleChange.cancel();\n setValue('');\n onSubmit('');\n inputRef.current?.focus();\n }\n };\n\n return (\n <button\n className={b('input-icon', {close: isClose})}\n onClick={handleClick}\n aria-label={value ? i18n(Keyset.ClearAction) : undefined}\n aria-hidden={!value}\n >\n <Icon size={iconSize} data={isClose ? Xmark : Magnifier} />\n </button>\n );\n }, [handleChange, onSubmit, value]);\n\n return (\n <div className={b({size}, className)}>\n <TextInput\n className={b('search-suggest')}\n value={value}\n onUpdate={(query) => {\n setValue(query);\n handleChange(query);\n }}\n placeholder={placeholder}\n size={size === 'm' ? 'xl' : 'l'}\n controlRef={inputRef}\n view=\"clear\"\n controlProps={{\n className: b('search-suggest-control'),\n onClick,\n }}\n endContent={rightContent}\n />\n </div>\n );\n};\n"]}
|
|
@@ -169,6 +169,10 @@ type FilterConfigBase = {
|
|
|
169
169
|
/** Optional analytics events fired when this control's value changes */
|
|
170
170
|
analyticsEvents?: AnalyticsEventsProp;
|
|
171
171
|
};
|
|
172
|
+
export type SelectFilterCloseData = {
|
|
173
|
+
selectedValues: string[];
|
|
174
|
+
selectedValuesOnOpen: string[];
|
|
175
|
+
};
|
|
172
176
|
export type SelectFilterConfig = FilterConfigBase & Pick<SelectProps, 'multiple' | 'filterable' | 'hasClear' | 'placeholder'> & {
|
|
173
177
|
type?: 'select';
|
|
174
178
|
/** The selectable items for this filter */
|
|
@@ -177,14 +181,22 @@ export type SelectFilterConfig = FilterConfigBase & Pick<SelectProps, 'multiple'
|
|
|
177
181
|
allLabel: string;
|
|
178
182
|
/** Optional QA attribute forwarded to the switcher */
|
|
179
183
|
qa?: string;
|
|
184
|
+
/** Optional callback fired when the select opens */
|
|
185
|
+
onOpen?: () => void;
|
|
186
|
+
/** Optional callback fired when the select closes */
|
|
187
|
+
onClose?: (data: SelectFilterCloseData) => void;
|
|
180
188
|
};
|
|
181
189
|
export type SearchFilterConfig = FilterConfigBase & {
|
|
182
190
|
type: 'search';
|
|
183
191
|
/** Placeholder text for the search input */
|
|
184
192
|
placeholder?: string;
|
|
193
|
+
/** Optional callback fired when the search input is clicked */
|
|
194
|
+
onClick?: () => void;
|
|
185
195
|
};
|
|
186
196
|
export type SavedOnlyFilterConfig = FilterConfigBase & {
|
|
187
197
|
type: 'savedOnly';
|
|
198
|
+
/** Optional callback fired with the next saved-only state */
|
|
199
|
+
onClick?: (state: boolean) => void;
|
|
188
200
|
};
|
|
189
201
|
export type FilterConfig = SelectFilterConfig | SearchFilterConfig | SavedOnlyFilterConfig;
|
|
190
202
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"common.js","sourceRoot":"../../../src","sources":["models/common.ts"],"names":[],"mappings":"AAaA,MAAM,CAAN,IAAY,KAGX;AAHD,WAAY,KAAK;IACb,wBAAe,CAAA;IACf,sBAAa,CAAA;AACjB,CAAC,EAHW,KAAK,KAAL,KAAK,QAGhB;AAmFD,MAAM,CAAN,IAAY,SAgBX;AAhBD,WAAY,SAAS;IACjB,yCAA4B,CAAA;IAC5B,mCAAsB,CAAA;IACtB,yCAA4B,CAAA;IAC5B,uCAA0B,CAAA;IAC1B,yCAA4B,CAAA;IAC5B,mCAAsB,CAAA;IACtB,oDAAuC,CAAA;IACvC,yCAA4B,CAAA;IAC5B,2CAA8B,CAAA;IAC9B,qCAAwB,CAAA;IACxB,qCAAwB,CAAA;IACxB,qCAAwB,CAAA;IACxB,sDAAyC,CAAA;IACzC,qCAAwB,CAAA;IACxB,uDAA0C,CAAA;AAC9C,CAAC,EAhBW,SAAS,KAAT,SAAS,QAgBpB;AA8DD,MAAM,CAAN,IAAY,iBAUX;AAVD,WAAY,iBAAiB;IACzB,uDAAkC,CAAA;IAClC,qDAAgC,CAAA;IAChC,wDAAmC,CAAA;IACnC,kEAA6C,CAAA;IAC7C,kEAA6C,CAAA;IAC7C,kEAA6C,CAAA;IAC7C,+CAA0B,CAAA;IAC1B,uDAAkC,CAAA;IAClC,wDAAmC,CAAA;AACvC,CAAC,EAVW,iBAAiB,KAAjB,iBAAiB,QAU5B;
|
|
1
|
+
{"version":3,"file":"common.js","sourceRoot":"../../../src","sources":["models/common.ts"],"names":[],"mappings":"AAaA,MAAM,CAAN,IAAY,KAGX;AAHD,WAAY,KAAK;IACb,wBAAe,CAAA;IACf,sBAAa,CAAA;AACjB,CAAC,EAHW,KAAK,KAAL,KAAK,QAGhB;AAmFD,MAAM,CAAN,IAAY,SAgBX;AAhBD,WAAY,SAAS;IACjB,yCAA4B,CAAA;IAC5B,mCAAsB,CAAA;IACtB,yCAA4B,CAAA;IAC5B,uCAA0B,CAAA;IAC1B,yCAA4B,CAAA;IAC5B,mCAAsB,CAAA;IACtB,oDAAuC,CAAA;IACvC,yCAA4B,CAAA;IAC5B,2CAA8B,CAAA;IAC9B,qCAAwB,CAAA;IACxB,qCAAwB,CAAA;IACxB,qCAAwB,CAAA;IACxB,sDAAyC,CAAA;IACzC,qCAAwB,CAAA;IACxB,uDAA0C,CAAA;AAC9C,CAAC,EAhBW,SAAS,KAAT,SAAS,QAgBpB;AA8DD,MAAM,CAAN,IAAY,iBAUX;AAVD,WAAY,iBAAiB;IACzB,uDAAkC,CAAA;IAClC,qDAAgC,CAAA;IAChC,wDAAmC,CAAA;IACnC,kEAA6C,CAAA;IAC7C,kEAA6C,CAAA;IAC7C,kEAA6C,CAAA;IAC7C,+CAA0B,CAAA;IAC1B,uDAAkC,CAAA;IAClC,wDAAmC,CAAA;AACvC,CAAC,EAVW,iBAAiB,KAAjB,iBAAiB,QAU5B;AAkED,MAAM,UAAU,sBAAsB,CAAC,OAAsB;IACzD,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,EAAE,CAAC;IACd,CAAC;IAED,2EAA2E;IAC3E,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC5B,OAAO,OAA2B,CAAC;IACvC,CAAC;IAED,OAAO,CAAC,OAAyB,CAAC,CAAC;AACvC,CAAC;AAED,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACpB,2BAAW,CAAA;IACX,4BAAY,CAAA;AAChB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAED,MAAM,CAAN,IAAY,yBAGX;AAHD,WAAY,yBAAyB;IACjC,sCAAS,CAAA;IACT,sCAAS,CAAA;AACb,CAAC,EAHW,yBAAyB,KAAzB,yBAAyB,QAGpC","sourcesContent":["import * as React from 'react';\n\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport {MarkdownItPluginCb} from '@diplodoc/transform/lib/plugins/typings';\nimport {\n AnalyticsEventsProp,\n HeaderBlockProps as PageConstructorHeaderBlockProps,\n} from '@gravity-ui/page-constructor';\nimport {SelectOption, SelectProps} from '@gravity-ui/uikit';\nimport {IBrowser, IDevice} from 'ua-parser-js';\n\nimport {Locale} from '../models/locale';\n\nexport enum Theme {\n Light = 'light',\n Dark = 'dark',\n}\n\nexport interface ClassNameProps {\n className?: string;\n}\n\nexport type Author = {\n id: number | string;\n avatar: string | null;\n createdAt: string;\n updatedAt: string;\n firstName: string | null;\n secondName: string | null;\n description: string | null;\n fullDescription: string | null;\n shortDescription: string | null;\n} & {\n [x: string]: string | null;\n};\n\nexport type Query = Record<string, number | string | null>;\n\n//page models\n\nexport interface Menu {\n title: string;\n}\n\nexport interface WithDeviceProps {\n device: IDevice;\n browser: IBrowser;\n isRobot: boolean;\n}\n\nexport interface PostsProps {\n posts: PostData[];\n count: number;\n totalCount: number;\n pinnedPost?: PostData;\n}\n\nexport type Tag = {\n slug: string;\n name: string;\n createdAt?: string;\n updatedAt?: string;\n icon?: string;\n isDeleted?: boolean;\n locale?: string;\n blogTagId?: number | string;\n count?: number;\n};\n\nexport interface PostData {\n author?: string;\n authors?: Author[];\n blogPostId?: number | string;\n content?: string;\n date: string;\n description?: string;\n hasUserLike: boolean;\n htmlTitle: string;\n id: number;\n image: string;\n isPublished?: boolean;\n sharedImage?: string;\n likes: number;\n locale: Locale;\n metaDescription?: string | null;\n metaTitle?: string | null;\n readingTime?: number;\n shareDescription?: string;\n shareImage?: string;\n shareTitle?: string;\n slug: string;\n keywords?: string[];\n tags: Tag[];\n textTitle: string;\n title: string;\n url: string;\n noIndex?: boolean;\n}\n\nexport enum BlockType {\n Header = 'blog-header-block',\n YFM = 'blog-yfm-block',\n Layout = 'blog-layout-block',\n Media = 'blog-media-block',\n Banner = 'blog-banner-block',\n CTA = 'blog-cta-block',\n ColoredText = 'blog-colored-text-block',\n Author = 'blog-author-block',\n Suggest = 'blog-suggest-block',\n Meta = 'blog-meta-block',\n Feed = 'blog-feed-block',\n Form = 'blog-form-block',\n CompactMedia = 'blog-compact-media-block',\n Take = 'blog-take-block',\n SideCardList = 'blog-side-card-list-block',\n}\n\nexport type MetaProps = {\n metaComponent: JSX.Element;\n needHelmetWrapper: boolean;\n};\n\nexport type MetaOrganizationType = {\n url: string;\n appTitle: string;\n legalName: string;\n supportEmail: string;\n};\n\nexport interface PostMetaProps {\n title: string;\n date: string;\n image: string;\n canonicalUrl: string;\n content?: string;\n description?: string;\n sharing: {\n shareTitle: string;\n shareDescription: string;\n shareImage: string;\n shareGenImage: string;\n shareGenTitle: string;\n };\n keywords?: string[];\n noIndex?: boolean;\n authors?: Author[];\n tags?: Tag[];\n organization: MetaOrganizationType;\n}\n\nexport type ToggleLikeCallbackType = ({\n postId,\n hasLike,\n}: {\n postId?: number | string;\n hasLike?: boolean;\n}) => void;\n\nexport interface HeaderBlockProps extends PageConstructorHeaderBlockProps {\n backLink?: {\n url: string;\n title: React.ReactNode;\n };\n}\n\nexport type GetPostsRequest = {\n page: number;\n perPage: number;\n savedOnly: boolean;\n search: string | undefined;\n [filterParam: string]: string | number | boolean | undefined;\n};\n\nexport type GetPostsType = (query: GetPostsRequest) => Promise<PostsProps>;\n\nexport type HandleChangeQueryParams = (params: Query) => void;\n\nexport enum DefaultEventNames {\n ShareButton = 'share-button-click',\n SaveButton = 'save-button-click',\n ShowMore = 'show-more-button-click',\n PaginatorHome = 'paginator-home-button-click',\n PaginatorNext = 'paginator-next-button-click',\n PaginatorPage = 'paginator-page-button-click',\n Tag = 'selector-tag-click',\n Service = 'selector-service-click',\n SaveOnly = 'save-only-button-click',\n}\n\nexport type FetchArgs = {\n page?: number;\n query: Query;\n};\n\nexport interface QAProps {\n qa?: string;\n}\n\ntype FilterConfigBase = {\n /** The key used in queryParams and passed to handleLoadData query */\n queryParamName: string;\n /** Optional analytics events fired when this control's value changes */\n analyticsEvents?: AnalyticsEventsProp;\n};\n\nexport type SelectFilterCloseData = {\n selectedValues: string[];\n selectedValuesOnOpen: string[];\n};\n\nexport type SelectFilterConfig = FilterConfigBase &\n Pick<SelectProps, 'multiple' | 'filterable' | 'hasClear' | 'placeholder'> & {\n type?: 'select';\n /** The selectable items for this filter */\n options: SelectOption[];\n /** Label shown when nothing is selected (acts as \"All ...\" placeholder) */\n allLabel: string;\n /** Optional QA attribute forwarded to the switcher */\n qa?: string;\n /** Optional callback fired when the select opens */\n onOpen?: () => void;\n /** Optional callback fired when the select closes */\n onClose?: (data: SelectFilterCloseData) => void;\n };\n\nexport type SearchFilterConfig = FilterConfigBase & {\n type: 'search';\n /** Placeholder text for the search input */\n placeholder?: string;\n /** Optional callback fired when the search input is clicked */\n onClick?: () => void;\n};\n\nexport type SavedOnlyFilterConfig = FilterConfigBase & {\n type: 'savedOnly';\n /** Optional callback fired with the next saved-only state */\n onClick?: (state: boolean) => void;\n};\n\nexport type FilterConfig = SelectFilterConfig | SearchFilterConfig | SavedOnlyFilterConfig;\n\n/**\n * Filters can be supplied either as a flat array (all filters in one row)\n * or as an array of rows (each inner array is rendered as a separate row).\n *\n * @example Single row (backward-compatible)\n * filters: [searchFilter, tagsFilter]\n *\n * @example Multiple rows\n * filters: [[searchFilter, savedOnlyFilter], [tagsFilter, serviceFilter]]\n */\nexport type FiltersConfig = FilterConfig[] | FilterConfig[][];\n\nexport function normalizeFiltersToRows(filters: FiltersConfig): FilterConfig[][] {\n if (filters.length === 0) {\n return [];\n }\n\n // If the first element is itself an array, the input is already multi-row.\n if (Array.isArray(filters[0])) {\n return filters as FilterConfig[][];\n }\n\n return [filters as FilterConfig[]];\n}\n\nexport enum PostCardSize {\n SMALL = 's',\n MEDIUM = 'm',\n}\n\nexport enum PostCardTitleHeadingLevel {\n H2 = 'h2',\n H3 = 'h3',\n}\n\nexport interface TransformPostOptions {\n plugins?: MarkdownItPluginCb[];\n}\n"]}
|
package/package.json
CHANGED
|
@@ -169,6 +169,10 @@ type FilterConfigBase = {
|
|
|
169
169
|
/** Optional analytics events fired when this control's value changes */
|
|
170
170
|
analyticsEvents?: AnalyticsEventsProp;
|
|
171
171
|
};
|
|
172
|
+
export type SelectFilterCloseData = {
|
|
173
|
+
selectedValues: string[];
|
|
174
|
+
selectedValuesOnOpen: string[];
|
|
175
|
+
};
|
|
172
176
|
export type SelectFilterConfig = FilterConfigBase & Pick<SelectProps, 'multiple' | 'filterable' | 'hasClear' | 'placeholder'> & {
|
|
173
177
|
type?: 'select';
|
|
174
178
|
/** The selectable items for this filter */
|
|
@@ -177,14 +181,22 @@ export type SelectFilterConfig = FilterConfigBase & Pick<SelectProps, 'multiple'
|
|
|
177
181
|
allLabel: string;
|
|
178
182
|
/** Optional QA attribute forwarded to the switcher */
|
|
179
183
|
qa?: string;
|
|
184
|
+
/** Optional callback fired when the select opens */
|
|
185
|
+
onOpen?: () => void;
|
|
186
|
+
/** Optional callback fired when the select closes */
|
|
187
|
+
onClose?: (data: SelectFilterCloseData) => void;
|
|
180
188
|
};
|
|
181
189
|
export type SearchFilterConfig = FilterConfigBase & {
|
|
182
190
|
type: 'search';
|
|
183
191
|
/** Placeholder text for the search input */
|
|
184
192
|
placeholder?: string;
|
|
193
|
+
/** Optional callback fired when the search input is clicked */
|
|
194
|
+
onClick?: () => void;
|
|
185
195
|
};
|
|
186
196
|
export type SavedOnlyFilterConfig = FilterConfigBase & {
|
|
187
197
|
type: 'savedOnly';
|
|
198
|
+
/** Optional callback fired with the next saved-only state */
|
|
199
|
+
onClick?: (state: boolean) => void;
|
|
188
200
|
};
|
|
189
201
|
export type FilterConfig = SelectFilterConfig | SearchFilterConfig | SavedOnlyFilterConfig;
|
|
190
202
|
/**
|