@gravity-ui/page-constructor 8.4.1 → 8.5.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.
Files changed (28) hide show
  1. package/build/cjs/blocks/FilterBlock/FilterBlock.js +38 -5
  2. package/build/cjs/blocks/FilterBlock/FilterBlock.js.map +1 -1
  3. package/build/cjs/blocks/FilterBlock/schema.d.ts +142 -4
  4. package/build/cjs/blocks/FilterBlock/schema.js +6 -0
  5. package/build/cjs/blocks/FilterBlock/schema.js.map +1 -1
  6. package/build/cjs/blocks/validators.d.ts +1 -0
  7. package/build/cjs/blocks/validators.js +1 -0
  8. package/build/cjs/blocks/validators.js.map +1 -1
  9. package/build/cjs/components/ButtonTabs/ButtonTabs.d.ts +2 -1
  10. package/build/cjs/components/ButtonTabs/ButtonTabs.js.map +1 -1
  11. package/build/cjs/models/constructor-items/blocks.d.ts +3 -2
  12. package/build/cjs/models/constructor-items/blocks.js.map +1 -1
  13. package/build/esm/blocks/FilterBlock/FilterBlock.js +38 -5
  14. package/build/esm/blocks/FilterBlock/FilterBlock.js.map +1 -1
  15. package/build/esm/blocks/FilterBlock/schema.d.ts +142 -4
  16. package/build/esm/blocks/FilterBlock/schema.js +6 -0
  17. package/build/esm/blocks/FilterBlock/schema.js.map +1 -1
  18. package/build/esm/blocks/validators.d.ts +1 -0
  19. package/build/esm/blocks/validators.js +1 -0
  20. package/build/esm/blocks/validators.js.map +1 -1
  21. package/build/esm/components/ButtonTabs/ButtonTabs.d.ts +2 -1
  22. package/build/esm/components/ButtonTabs/ButtonTabs.js.map +1 -1
  23. package/build/esm/models/constructor-items/blocks.d.ts +3 -2
  24. package/build/esm/models/constructor-items/blocks.js.map +1 -1
  25. package/package.json +1 -1
  26. package/schema/index.js +1 -1
  27. package/server/models/constructor-items/blocks.d.ts +3 -2
  28. package/widget/index.js +1 -1
package/build/cjs/blocks/FilterBlock/FilterBlock.js CHANGED
@@ -8,15 +8,41 @@ const components_1 = require("../../components/index.js");
8
8
  const ButtonTabs_1 = tslib_1.__importDefault(require("../../components/ButtonTabs/ButtonTabs.js"));
9
9
  const ConstructorItem_1 = require("../../containers/PageConstructor/components/ConstructorItem/index.js");
10
10
  const grid_1 = require("../../grid/index.js");
11
+ const hooks_1 = require("../../hooks/index.js");
11
12
  const utils_1 = require("../../utils/index.js");
12
13
  const i18n_1 = require("./i18n/index.js");
13
14
  const b = (0, utils_1.block)('filter-block');
14
15
  const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, colSizes, centered, animated, }) => {
16
+ const handleAnalytics = (0, hooks_1.useAnalytics)();
15
17
  const tabButtons = React.useMemo(() => {
16
- const allButton = allTag
17
- ? { id: null, title: typeof allTag === 'boolean' ? (0, i18n_1.i18n)('label-all-tag') : allTag }
18
- : undefined;
19
- const otherButtons = tags && tags.map((tag) => ({ id: tag.id, title: tag.label }));
18
+ let allButton;
19
+ if (allTag) {
20
+ if (typeof allTag === 'boolean') {
21
+ allButton = {
22
+ id: null,
23
+ title: (0, i18n_1.i18n)('label-all-tag'),
24
+ };
25
+ }
26
+ else if (typeof allTag === 'string') {
27
+ allButton = {
28
+ id: null,
29
+ title: allTag,
30
+ };
31
+ }
32
+ else if (typeof allTag === 'object') {
33
+ allButton = {
34
+ id: null,
35
+ title: allTag.label,
36
+ analyticsEvent: allTag.analyticsEvent,
37
+ };
38
+ }
39
+ }
40
+ const otherButtons = tags &&
41
+ tags.map((tag) => ({
42
+ id: tag.id,
43
+ title: tag.label,
44
+ analyticsEvent: tag.analyticsEvent,
45
+ }));
20
46
  return [...(allButton ? [allButton] : []), ...(otherButtons ? otherButtons : [])];
21
47
  }, [allTag, tags]);
22
48
  const [selectedTag, setSelectedTag] = React.useState(tabButtons.length ? tabButtons[0].id : null);
@@ -31,7 +57,14 @@ const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, c
31
57
  : items;
32
58
  return itemsToShow.map((item) => item.card);
33
59
  }, [actualTag, items]);
34
- return ((0, jsx_runtime_1.jsxs)(components_1.AnimateBlock, { className: b(), animate: animated, children: [title && ((0, jsx_runtime_1.jsx)(components_1.Title, { className: b('title', { centered: centered }), title: title, subtitle: description })), tabButtons.length && ((0, jsx_runtime_1.jsx)(grid_1.Row, { children: (0, jsx_runtime_1.jsx)(grid_1.Col, { children: (0, jsx_runtime_1.jsx)(ButtonTabs_1.default, { className: b('tabs', { centered: centered }), items: tabButtons, activeTab: selectedTag, onSelectTab: setSelectedTag, tabSize: tagButtonSize }) }) })), (0, jsx_runtime_1.jsx)(grid_1.Row, { className: b('block-container'), children: (0, jsx_runtime_1.jsx)(__1.CardLayoutBlock, { title: "", colSizes: colSizes, className: b('cards-container'), children: cards.map((card, index) => {
60
+ const handleSelectTab = React.useCallback((tabId) => {
61
+ setSelectedTag(tabId);
62
+ const tabButton = tabButtons.find((tab) => tab.id === tabId);
63
+ if (tabButton?.analyticsEvent) {
64
+ handleAnalytics(tabButton.analyticsEvent);
65
+ }
66
+ }, [tabButtons, handleAnalytics]);
67
+ return ((0, jsx_runtime_1.jsxs)(components_1.AnimateBlock, { className: b(), animate: animated, children: [title && ((0, jsx_runtime_1.jsx)(components_1.Title, { className: b('title', { centered: centered }), title: title, subtitle: description })), tabButtons.length && ((0, jsx_runtime_1.jsx)(grid_1.Row, { children: (0, jsx_runtime_1.jsx)(grid_1.Col, { children: (0, jsx_runtime_1.jsx)(ButtonTabs_1.default, { className: b('tabs', { centered: centered }), items: tabButtons, activeTab: selectedTag, onSelectTab: handleSelectTab, tabSize: tagButtonSize }) }) })), (0, jsx_runtime_1.jsx)(grid_1.Row, { className: b('block-container'), children: (0, jsx_runtime_1.jsx)(__1.CardLayoutBlock, { title: "", colSizes: colSizes, className: b('cards-container'), children: cards.map((card, index) => {
35
68
  const key = (0, utils_1.getBlockKey)(card, index);
36
69
  return (0, jsx_runtime_1.jsx)(ConstructorItem_1.ConstructorItem, { data: card, blockKey: key }, key);
37
70
  }) }) })] }));
package/build/cjs/blocks/FilterBlock/FilterBlock.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FilterBlock.js","sourceRoot":"../../../../src","sources":["blocks/FilterBlock/FilterBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {CardLayoutBlock} from '..';\nimport {AnimateBlock, Title} from '../../components';\nimport ButtonTabs, {ButtonTabsItemProps} from '../../components/ButtonTabs/ButtonTabs';\nimport {ConstructorItem} from '../../containers/PageConstructor/components/ConstructorItem';\nimport {Col, Row} from '../../grid';\nimport {FilterBlockProps, FilterItem} from '../../models';\nimport {block, getBlockKey} from '../../utils';\n\nimport {i18n} from './i18n';\n\nimport './FilterBlock.scss';\n\nconst b = block('filter-block');\n\nconst FilterBlock = ({\n title,\n description,\n tags,\n tagButtonSize,\n allTag,\n items,\n colSizes,\n centered,\n animated,\n}: FilterBlockProps) => {\n const tabButtons = React.useMemo(() => {\n const allButton: ButtonTabsItemProps | undefined = allTag\n ? {id: null, title: typeof allTag === 'boolean' ? i18n('label-all-tag') : allTag}\n : undefined;\n const otherButtons: ButtonTabsItemProps[] | undefined =\n tags && tags.map((tag) => ({id: tag.id, title: tag.label}));\n return [...(allButton ? [allButton] : []), ...(otherButtons ? otherButtons : [])];\n }, [allTag, tags]);\n\n const [selectedTag, setSelectedTag] = React.useState(\n tabButtons.length ? tabButtons[0].id : null,\n );\n\n const actualTag: string | null = React.useMemo(() => {\n return tabButtons.length && !tabButtons.find((tab) => tab.id === selectedTag)\n ? tabButtons[0].id\n : selectedTag;\n }, [tabButtons, selectedTag]);\n\n const cards = React.useMemo(() => {\n const itemsToShow: FilterItem[] = actualTag\n ? items.filter((item) => item.tags.includes(actualTag))\n : items;\n\n return itemsToShow.map((item) => item.card);\n }, [actualTag, items]);\n\n return (\n <AnimateBlock className={b()} animate={animated}>\n {title && (\n <Title\n className={b('title', {centered: centered})}\n title={title}\n subtitle={description}\n />\n )}\n {tabButtons.length && (\n <Row>\n <Col>\n <ButtonTabs\n className={b('tabs', {centered: centered})}\n items={tabButtons}\n activeTab={selectedTag}\n onSelectTab={setSelectedTag}\n tabSize={tagButtonSize}\n />\n </Col>\n </Row>\n )}\n <Row className={b('block-container')}>\n <CardLayoutBlock title=\"\" colSizes={colSizes} className={b('cards-container')}>\n {cards.map((card, index) => {\n const key = getBlockKey(card, index);\n\n return <ConstructorItem data={card} blockKey={key} key={key} />;\n })}\n </CardLayoutBlock>\n </Row>\n </AnimateBlock>\n );\n};\nexport default FilterBlock;\n"]}
1
+ {"version":3,"file":"FilterBlock.js","sourceRoot":"../../../../src","sources":["blocks/FilterBlock/FilterBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {CardLayoutBlock} from '..';\nimport {AnimateBlock, Title} from '../../components';\nimport ButtonTabs, {ButtonTabsItemProps} from '../../components/ButtonTabs/ButtonTabs';\nimport {ConstructorItem} from '../../containers/PageConstructor/components/ConstructorItem';\nimport {Col, Row} from '../../grid';\nimport {useAnalytics} from '../../hooks';\nimport {FilterBlockProps, FilterItem} from '../../models';\nimport {block, getBlockKey} from '../../utils';\n\nimport {i18n} from './i18n';\n\nimport './FilterBlock.scss';\n\nconst b = block('filter-block');\n\nconst FilterBlock = ({\n title,\n description,\n tags,\n tagButtonSize,\n allTag,\n items,\n colSizes,\n centered,\n animated,\n}: FilterBlockProps) => {\n const handleAnalytics = useAnalytics();\n const tabButtons = React.useMemo(() => {\n let allButton: ButtonTabsItemProps | undefined;\n if (allTag) {\n if (typeof allTag === 'boolean') {\n allButton = {\n id: null,\n title: i18n('label-all-tag'),\n };\n } else if (typeof allTag === 'string') {\n allButton = {\n id: null,\n title: allTag,\n };\n } else if (typeof allTag === 'object') {\n allButton = {\n id: null,\n title: allTag.label,\n analyticsEvent: allTag.analyticsEvent,\n };\n }\n }\n const otherButtons: ButtonTabsItemProps[] | undefined =\n tags &&\n tags.map((tag) => ({\n id: tag.id,\n title: tag.label,\n analyticsEvent: tag.analyticsEvent,\n }));\n return [...(allButton ? [allButton] : []), ...(otherButtons ? otherButtons : [])];\n }, [allTag, tags]);\n\n const [selectedTag, setSelectedTag] = React.useState(\n tabButtons.length ? tabButtons[0].id : null,\n );\n\n const actualTag: string | null = React.useMemo(() => {\n return tabButtons.length && !tabButtons.find((tab) => tab.id === selectedTag)\n ? tabButtons[0].id\n : selectedTag;\n }, [tabButtons, selectedTag]);\n\n const cards = React.useMemo(() => {\n const itemsToShow: FilterItem[] = actualTag\n ? items.filter((item) => item.tags.includes(actualTag))\n : items;\n\n return itemsToShow.map((item) => item.card);\n }, [actualTag, items]);\n\n const handleSelectTab = React.useCallback(\n (tabId: string | null) => {\n setSelectedTag(tabId);\n\n const tabButton = tabButtons.find((tab) => tab.id === tabId);\n if (tabButton?.analyticsEvent) {\n handleAnalytics(tabButton.analyticsEvent);\n }\n },\n [tabButtons, handleAnalytics],\n );\n\n return (\n <AnimateBlock className={b()} animate={animated}>\n {title && (\n <Title\n className={b('title', {centered: centered})}\n title={title}\n subtitle={description}\n />\n )}\n {tabButtons.length && (\n <Row>\n <Col>\n <ButtonTabs\n className={b('tabs', {centered: centered})}\n items={tabButtons}\n activeTab={selectedTag}\n onSelectTab={handleSelectTab}\n tabSize={tagButtonSize}\n />\n </Col>\n </Row>\n )}\n <Row className={b('block-container')}>\n <CardLayoutBlock title=\"\" colSizes={colSizes} className={b('cards-container')}>\n {cards.map((card, index) => {\n const key = getBlockKey(card, index);\n\n return <ConstructorItem data={card} blockKey={key} key={key} />;\n })}\n </CardLayoutBlock>\n </Row>\n </AnimateBlock>\n );\n};\nexport default FilterBlock;\n"]}
package/build/cjs/blocks/FilterBlock/schema.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export declare const FilterTagProps: {
2
+ type: string;
2
3
  additionalProperties: boolean;
3
4
  required: string[];
4
5
  properties: {
@@ -8,6 +9,43 @@ export declare const FilterTagProps: {
8
9
  label: {
9
10
  type: string;
10
11
  };
12
+ analyticsEvent: {
13
+ type: string;
14
+ additionalProperties: {
15
+ type: string;
16
+ };
17
+ required: string[];
18
+ properties: {
19
+ name: {
20
+ type: string;
21
+ };
22
+ type: {
23
+ type: string;
24
+ };
25
+ counters: {
26
+ type: string;
27
+ additionalProperties: boolean;
28
+ required: never[];
29
+ properties: {
30
+ include: {
31
+ type: string;
32
+ items: {
33
+ type: string;
34
+ };
35
+ };
36
+ exclude: {
37
+ type: string;
38
+ items: {
39
+ type: string;
40
+ };
41
+ };
42
+ };
43
+ };
44
+ context: {
45
+ type: string;
46
+ };
47
+ };
48
+ };
11
49
  };
12
50
  };
13
51
  export declare const FilterItemProps: {
@@ -30,10 +68,60 @@ export declare const FilterProps: {
30
68
  required: string[];
31
69
  properties: {
32
70
  allTag: {
33
- oneOf: {
71
+ oneOf: ({
34
72
  type: string;
35
73
  optionName: string;
36
- }[];
74
+ } | {
75
+ type: string;
76
+ additionalProperties: boolean;
77
+ required: string[];
78
+ properties: {
79
+ id: {
80
+ type: string;
81
+ };
82
+ label: {
83
+ type: string;
84
+ };
85
+ analyticsEvent: {
86
+ type: string;
87
+ additionalProperties: {
88
+ type: string;
89
+ };
90
+ required: string[];
91
+ properties: {
92
+ name: {
93
+ type: string;
94
+ };
95
+ type: {
96
+ type: string;
97
+ };
98
+ counters: {
99
+ type: string;
100
+ additionalProperties: boolean;
101
+ required: never[];
102
+ properties: {
103
+ include: {
104
+ type: string;
105
+ items: {
106
+ type: string;
107
+ };
108
+ };
109
+ exclude: {
110
+ type: string;
111
+ items: {
112
+ type: string;
113
+ };
114
+ };
115
+ };
116
+ };
117
+ context: {
118
+ type: string;
119
+ };
120
+ };
121
+ };
122
+ };
123
+ optionName?: undefined;
124
+ })[];
37
125
  };
38
126
  colSizes: {
39
127
  type: string;
@@ -236,10 +324,60 @@ export declare const FilterBlock: {
236
324
  required: string[];
237
325
  properties: {
238
326
  allTag: {
239
- oneOf: {
327
+ oneOf: ({
240
328
  type: string;
241
329
  optionName: string;
242
- }[];
330
+ } | {
331
+ type: string;
332
+ additionalProperties: boolean;
333
+ required: string[];
334
+ properties: {
335
+ id: {
336
+ type: string;
337
+ };
338
+ label: {
339
+ type: string;
340
+ };
341
+ analyticsEvent: {
342
+ type: string;
343
+ additionalProperties: {
344
+ type: string;
345
+ };
346
+ required: string[];
347
+ properties: {
348
+ name: {
349
+ type: string;
350
+ };
351
+ type: {
352
+ type: string;
353
+ };
354
+ counters: {
355
+ type: string;
356
+ additionalProperties: boolean;
357
+ required: never[];
358
+ properties: {
359
+ include: {
360
+ type: string;
361
+ items: {
362
+ type: string;
363
+ };
364
+ };
365
+ exclude: {
366
+ type: string;
367
+ items: {
368
+ type: string;
369
+ };
370
+ };
371
+ };
372
+ };
373
+ context: {
374
+ type: string;
375
+ };
376
+ };
377
+ };
378
+ };
379
+ optionName?: undefined;
380
+ })[];
243
381
  };
244
382
  colSizes: {
245
383
  type: string;
package/build/cjs/blocks/FilterBlock/schema.js CHANGED
@@ -2,8 +2,10 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.FilterBlock = exports.FilterProps = exports.FilterItemProps = exports.FilterTagProps = void 0;
4
4
  const common_1 = require("../../schema/validators/common.js");
5
+ const event_1 = require("../../schema/validators/event.js");
5
6
  const utils_1 = require("../../schema/validators/utils.js");
6
7
  exports.FilterTagProps = {
8
+ type: 'object',
7
9
  additionalProperties: false,
8
10
  required: ['id', 'label'],
9
11
  properties: {
@@ -13,6 +15,7 @@ exports.FilterTagProps = {
13
15
  label: {
14
16
  type: 'string',
15
17
  },
18
+ analyticsEvent: event_1.AnalyticsEventSchema,
16
19
  },
17
20
  };
18
21
  exports.FilterItemProps = {
@@ -45,6 +48,9 @@ exports.FilterProps = {
45
48
  type: 'string',
46
49
  optionName: 'cutom',
47
50
  },
51
+ {
52
+ ...exports.FilterTagProps,
53
+ },
48
54
  ],
49
55
  },
50
56
  colSizes: common_1.containerSizesObject,
package/build/cjs/blocks/FilterBlock/schema.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["blocks/FilterBlock/schema.ts"],"names":[],"mappings":";;;AAAA,8DAKwC;AACxC,4DAA4D;AAE/C,QAAA,cAAc,GAAG;IAC1B,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC;IACzB,UAAU,EAAE;QACR,EAAE,EAAE;YACA,IAAI,EAAE,QAAQ;SACjB;QACD,KAAK,EAAE;YACH,IAAI,EAAE,QAAQ;SACjB;KACJ;CACJ,CAAC;AAEW,QAAA,eAAe,GAAG;IAC3B,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE;QACR,IAAI,EAAE;YACF,IAAI,EAAE,OAAO;YACb,KAAK,EAAE;gBACH,IAAI,EAAE,QAAQ;aACjB;SACJ;QACD,IAAI,EAAE,EAAC,IAAI,EAAE,yBAAyB,EAAC;KAC1C;CACJ,CAAC;AAEW,QAAA,WAAW,GAAG;IACvB,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3B,UAAU,EAAE;QACR,GAAG,uBAAc;QACjB,GAAG,wBAAe;QAClB,GAAG,yBAAgB;QACnB,MAAM,EAAE;YACJ,KAAK,EAAE;gBACH;oBACI,IAAI,EAAE,SAAS;oBACf,UAAU,EAAE,MAAM;iBACrB;gBACD;oBACI,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,OAAO;iBACtB;aACJ;SACJ;QACD,QAAQ,EAAE,6BAAoB;QAC9B,IAAI,EAAE,IAAA,qBAAa,EAAC,sBAAc,CAAC;QACnC,KAAK,EAAE,IAAA,qBAAa,EAAC,uBAAe,CAAC;QACrC,aAAa,EAAE;YACX,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC;SAC9B;QACD,QAAQ,EAAE,EAAC,IAAI,EAAE,SAAS,EAAC;KAC9B;CACJ,CAAC;AAEW,QAAA,WAAW,GAAG;IACvB,cAAc,EAAE,mBAAW;CAC9B,CAAC","sourcesContent":["import {\n AnimatableProps,\n BlockBaseProps,\n BlockHeaderProps,\n containerSizesObject,\n} from '../../schema/validators/common';\nimport {filteredArray} from '../../schema/validators/utils';\n\nexport const FilterTagProps = {\n additionalProperties: false,\n required: ['id', 'label'],\n properties: {\n id: {\n type: 'string',\n },\n label: {\n type: 'string',\n },\n },\n};\n\nexport const FilterItemProps = {\n additionalProperties: false,\n required: ['tags', 'card'],\n properties: {\n tags: {\n type: 'array',\n items: {\n type: 'string',\n },\n },\n card: {$ref: 'self#/definitions/cards'},\n },\n};\n\nexport const FilterProps = {\n additionalProperties: false,\n required: ['tags', 'items'],\n properties: {\n ...BlockBaseProps,\n ...AnimatableProps,\n ...BlockHeaderProps,\n allTag: {\n oneOf: [\n {\n type: 'boolean',\n optionName: 'auto',\n },\n {\n type: 'string',\n optionName: 'cutom',\n },\n ],\n },\n colSizes: containerSizesObject,\n tags: filteredArray(FilterTagProps),\n items: filteredArray(FilterItemProps),\n tagButtonSize: {\n type: 'string',\n enum: ['s', 'm', 'l', 'xl'],\n },\n centered: {type: 'boolean'},\n },\n};\n\nexport const FilterBlock = {\n 'filter-block': FilterProps,\n};\n"]}
1
+ {"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["blocks/FilterBlock/schema.ts"],"names":[],"mappings":";;;AAAA,8DAKwC;AACxC,4DAAmE;AACnE,4DAA4D;AAE/C,QAAA,cAAc,GAAG;IAC1B,IAAI,EAAE,QAAQ;IACd,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC;IACzB,UAAU,EAAE;QACR,EAAE,EAAE;YACA,IAAI,EAAE,QAAQ;SACjB;QACD,KAAK,EAAE;YACH,IAAI,EAAE,QAAQ;SACjB;QACD,cAAc,EAAE,4BAAoB;KACvC;CACJ,CAAC;AAEW,QAAA,eAAe,GAAG;IAC3B,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE;QACR,IAAI,EAAE;YACF,IAAI,EAAE,OAAO;YACb,KAAK,EAAE;gBACH,IAAI,EAAE,QAAQ;aACjB;SACJ;QACD,IAAI,EAAE,EAAC,IAAI,EAAE,yBAAyB,EAAC;KAC1C;CACJ,CAAC;AAEW,QAAA,WAAW,GAAG;IACvB,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3B,UAAU,EAAE;QACR,GAAG,uBAAc;QACjB,GAAG,wBAAe;QAClB,GAAG,yBAAgB;QACnB,MAAM,EAAE;YACJ,KAAK,EAAE;gBACH;oBACI,IAAI,EAAE,SAAS;oBACf,UAAU,EAAE,MAAM;iBACrB;gBACD;oBACI,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,OAAO;iBACtB;gBACD;oBACI,GAAG,sBAAc;iBACpB;aACJ;SACJ;QACD,QAAQ,EAAE,6BAAoB;QAC9B,IAAI,EAAE,IAAA,qBAAa,EAAC,sBAAc,CAAC;QACnC,KAAK,EAAE,IAAA,qBAAa,EAAC,uBAAe,CAAC;QACrC,aAAa,EAAE;YACX,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC;SAC9B;QACD,QAAQ,EAAE,EAAC,IAAI,EAAE,SAAS,EAAC;KAC9B;CACJ,CAAC;AAEW,QAAA,WAAW,GAAG;IACvB,cAAc,EAAE,mBAAW;CAC9B,CAAC","sourcesContent":["import {\n AnimatableProps,\n BlockBaseProps,\n BlockHeaderProps,\n containerSizesObject,\n} from '../../schema/validators/common';\nimport {AnalyticsEventSchema} from '../../schema/validators/event';\nimport {filteredArray} from '../../schema/validators/utils';\n\nexport const FilterTagProps = {\n type: 'object',\n additionalProperties: false,\n required: ['id', 'label'],\n properties: {\n id: {\n type: 'string',\n },\n label: {\n type: 'string',\n },\n analyticsEvent: AnalyticsEventSchema,\n },\n};\n\nexport const FilterItemProps = {\n additionalProperties: false,\n required: ['tags', 'card'],\n properties: {\n tags: {\n type: 'array',\n items: {\n type: 'string',\n },\n },\n card: {$ref: 'self#/definitions/cards'},\n },\n};\n\nexport const FilterProps = {\n additionalProperties: false,\n required: ['tags', 'items'],\n properties: {\n ...BlockBaseProps,\n ...AnimatableProps,\n ...BlockHeaderProps,\n allTag: {\n oneOf: [\n {\n type: 'boolean',\n optionName: 'auto',\n },\n {\n type: 'string',\n optionName: 'cutom',\n },\n {\n ...FilterTagProps,\n },\n ],\n },\n colSizes: containerSizesObject,\n tags: filteredArray(FilterTagProps),\n items: filteredArray(FilterItemProps),\n tagButtonSize: {\n type: 'string',\n enum: ['s', 'm', 'l', 'xl'],\n },\n centered: {type: 'boolean'},\n },\n};\n\nexport const FilterBlock = {\n 'filter-block': FilterProps,\n};\n"]}
package/build/cjs/blocks/validators.d.ts CHANGED
@@ -5,6 +5,7 @@ export * from "./ContentLayout/schema.js";
5
5
  export * from "./ExtendedFeatures/schema.js";
6
6
  export * from "./Header/schema.js";
7
7
  export * from "./HeaderSlider/schema.js";
8
+ export * from "./Hero/schema.js";
8
9
  export * from "./Icons/schema.js";
9
10
  export * from "./Info/schema.js";
10
11
  export * from "./Media/schema.js";
package/build/cjs/blocks/validators.js CHANGED
@@ -8,6 +8,7 @@ tslib_1.__exportStar(require("./ContentLayout/schema.js"), exports);
8
8
  tslib_1.__exportStar(require("./ExtendedFeatures/schema.js"), exports);
9
9
  tslib_1.__exportStar(require("./Header/schema.js"), exports);
10
10
  tslib_1.__exportStar(require("./HeaderSlider/schema.js"), exports);
11
+ tslib_1.__exportStar(require("./Hero/schema.js"), exports);
11
12
  tslib_1.__exportStar(require("./Icons/schema.js"), exports);
12
13
  tslib_1.__exportStar(require("./Info/schema.js"), exports);
13
14
  tslib_1.__exportStar(require("./Media/schema.js"), exports);
package/build/cjs/blocks/validators.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"validators.js","sourceRoot":"../../../src","sources":["blocks/validators.ts"],"names":[],"mappings":";;;AAAA,6DAAgC;AAChC,iEAAoC;AACpC,gEAAmC;AACnC,oEAAuC;AACvC,uEAA0C;AAC1C,6DAAgC;AAChC,mEAAsC;AACtC,4DAA+B;AAC/B,2DAA8B;AAC9B,4DAA+B;AAC/B,yEAA4C;AAC5C,gEAAmC;AACnC,gEAAmC;AACnC,6DAAgC;AAChC,4DAA+B;AAC/B,4DAA+B","sourcesContent":["export * from './Banner/schema';\nexport * from './CardLayout/schema';\nexport * from './Companies/schema';\nexport * from './ContentLayout/schema';\nexport * from './ExtendedFeatures/schema';\nexport * from './Header/schema';\nexport * from './HeaderSlider/schema';\nexport * from './Icons/schema';\nexport * from './Info/schema';\nexport * from './Media/schema';\nexport * from './PromoFeaturesBlock/schema';\nexport * from './Questions/schema';\nexport * from './SliderOld/schema';\nexport * from './Slider/schema';\nexport * from './Table/schema';\nexport * from './Share/schema';\n"]}
1
+ {"version":3,"file":"validators.js","sourceRoot":"../../../src","sources":["blocks/validators.ts"],"names":[],"mappings":";;;AAAA,6DAAgC;AAChC,iEAAoC;AACpC,gEAAmC;AACnC,oEAAuC;AACvC,uEAA0C;AAC1C,6DAAgC;AAChC,mEAAsC;AACtC,2DAA8B;AAC9B,4DAA+B;AAC/B,2DAA8B;AAC9B,4DAA+B;AAC/B,yEAA4C;AAC5C,gEAAmC;AACnC,gEAAmC;AACnC,6DAAgC;AAChC,4DAA+B;AAC/B,4DAA+B","sourcesContent":["export * from './Banner/schema';\nexport * from './CardLayout/schema';\nexport * from './Companies/schema';\nexport * from './ContentLayout/schema';\nexport * from './ExtendedFeatures/schema';\nexport * from './Header/schema';\nexport * from './HeaderSlider/schema';\nexport * from './Hero/schema';\nexport * from './Icons/schema';\nexport * from './Info/schema';\nexport * from './Media/schema';\nexport * from './PromoFeaturesBlock/schema';\nexport * from './Questions/schema';\nexport * from './SliderOld/schema';\nexport * from './Slider/schema';\nexport * from './Table/schema';\nexport * from './Share/schema';\n"]}
package/build/cjs/components/ButtonTabs/ButtonTabs.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import * as React from 'react';
2
2
  import { ButtonSize } from '@gravity-ui/uikit';
3
- import { ButtonProps, QAProps } from "../../models/index.js";
3
+ import { AnalyticsEventsProp, ButtonProps, QAProps } from "../../models/index.js";
4
4
  export interface ButtonTabsItemProps extends Omit<ButtonProps, 'url' | 'primary' | 'target' | 'text'> {
5
5
  id: string | null;
6
6
  title: string;
7
+ analyticsEvent?: AnalyticsEventsProp;
7
8
  }
8
9
  export interface ButtonTabsProps extends QAProps {
9
10
  className?: string;
package/build/cjs/components/ButtonTabs/ButtonTabs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonTabs.js","sourceRoot":"../../../../src","sources":["components/ButtonTabs/ButtonTabs.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAK/B,gDAAkC;AAClC,uCAAgC;AAIhC,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,aAAa,CAAC,CAAC;AAqB/B,MAAM,UAAU,GAAG,CAAC,EAChB,SAAS,EACT,KAAK,EACL,SAAS,EACT,WAAW,EACX,OAAO,GAAG,GAAG,EACb,EAAE,EACF,eAAe,EACf,sBAAsB,GACR,EAAE,EAAE;IAClB,MAAM,WAAW,GAAkB,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAClD,IAAI,SAAS,EAAE,CAAC;YACZ,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACvB,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAEvB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,KAAoB,EAAE,EAAE,CAAC,CAAC,CAA0D,EAAE,EAAE;QACrF,IAAI,WAAW,EAAE,CAAC;YACd,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAC1B,CAAC;IACL,CAAC,EACD,CAAC,WAAW,CAAC,CAChB,CAAC;IAEF,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,SAAS,aAAU,EAAE,YACzD,KAAK,CAAC,GAAG,CAAC,CAAC,EAAC,EAAE,EAAE,KAAK,EAAC,EAAE,EAAE;YACvB,MAAM,QAAQ,GAAG,EAAE,KAAK,WAAW,CAAC;YAEpC,OAAO,CACH,uBAAC,cAAM,IACH,IAAI,EAAE,KAAK,EACX,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,MAAM,EAAE,QAAQ,EAAC,CAAC,EAExC,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,WAAW,CAAC,EAAE,CAAC,EACxB,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAC/B,UAAU,EAAE;oBACR,IAAI,EAAE,KAAK;oBACX,eAAe,EAAE,QAAQ;oBACzB,eAAe,EAAE,sBAAsB,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC;iBACtD,IARI,KAAK,CASZ,CACL,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ButtonSize} from '@gravity-ui/uikit';\n\nimport {ButtonProps, QAProps} from '../../models';\nimport {block} from '../../utils';\nimport {Button} from '../index';\n\nimport './ButtonTabs.scss';\n\nconst b = block('button-tabs');\n\nexport interface ButtonTabsItemProps\n extends Omit<ButtonProps, 'url' | 'primary' | 'target' | 'text'> {\n id: string | null;\n title: string;\n}\n\nexport interface ButtonTabsProps extends QAProps {\n className?: string;\n items: ButtonTabsItemProps[];\n activeTab?: string | null;\n onSelectTab?: (\n tabId: string | null,\n e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,\n ) => void;\n tabSize?: ButtonSize;\n getTabElementId?: (tabId: string) => string;\n getTabContentElementId?: (tabId: string) => string;\n}\n\nconst ButtonTabs = ({\n className,\n items,\n activeTab,\n onSelectTab,\n tabSize = 'l',\n qa,\n getTabElementId,\n getTabContentElementId,\n}: ButtonTabsProps) => {\n const activeTabId: string | null = React.useMemo(() => {\n if (activeTab) {\n return activeTab;\n }\n\n return items[0].id;\n }, [activeTab, items]);\n\n const handleClick = React.useCallback(\n (tabId: string | null) => (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n if (onSelectTab) {\n onSelectTab(tabId, e);\n }\n },\n [onSelectTab],\n );\n\n return (\n <div className={b(null, className)} role=\"tablist\" data-qa={qa}>\n {items.map(({id, title}) => {\n const isActive = id === activeTabId;\n\n return (\n <Button\n text={title}\n className={b('item', {active: isActive})}\n key={title}\n size={tabSize}\n onClick={handleClick(id)}\n id={getTabElementId?.(id ?? '')}\n extraProps={{\n role: 'tab',\n 'aria-selected': isActive,\n 'aria-controls': getTabContentElementId?.(id ?? ''),\n }}\n />\n );\n })}\n </div>\n );\n};\n\nexport default ButtonTabs;\n"]}
1
+ {"version":3,"file":"ButtonTabs.js","sourceRoot":"../../../../src","sources":["components/ButtonTabs/ButtonTabs.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAK/B,gDAAkC;AAClC,uCAAgC;AAIhC,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,aAAa,CAAC,CAAC;AAsB/B,MAAM,UAAU,GAAG,CAAC,EAChB,SAAS,EACT,KAAK,EACL,SAAS,EACT,WAAW,EACX,OAAO,GAAG,GAAG,EACb,EAAE,EACF,eAAe,EACf,sBAAsB,GACR,EAAE,EAAE;IAClB,MAAM,WAAW,GAAkB,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAClD,IAAI,SAAS,EAAE,CAAC;YACZ,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACvB,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAEvB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,KAAoB,EAAE,EAAE,CAAC,CAAC,CAA0D,EAAE,EAAE;QACrF,IAAI,WAAW,EAAE,CAAC;YACd,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAC1B,CAAC;IACL,CAAC,EACD,CAAC,WAAW,CAAC,CAChB,CAAC;IAEF,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,SAAS,aAAU,EAAE,YACzD,KAAK,CAAC,GAAG,CAAC,CAAC,EAAC,EAAE,EAAE,KAAK,EAAC,EAAE,EAAE;YACvB,MAAM,QAAQ,GAAG,EAAE,KAAK,WAAW,CAAC;YAEpC,OAAO,CACH,uBAAC,cAAM,IACH,IAAI,EAAE,KAAK,EACX,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,MAAM,EAAE,QAAQ,EAAC,CAAC,EAExC,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,WAAW,CAAC,EAAE,CAAC,EACxB,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAC/B,UAAU,EAAE;oBACR,IAAI,EAAE,KAAK;oBACX,eAAe,EAAE,QAAQ;oBACzB,eAAe,EAAE,sBAAsB,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC;iBACtD,IARI,KAAK,CASZ,CACL,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ButtonSize} from '@gravity-ui/uikit';\n\nimport {AnalyticsEventsProp, ButtonProps, QAProps} from '../../models';\nimport {block} from '../../utils';\nimport {Button} from '../index';\n\nimport './ButtonTabs.scss';\n\nconst b = block('button-tabs');\n\nexport interface ButtonTabsItemProps\n extends Omit<ButtonProps, 'url' | 'primary' | 'target' | 'text'> {\n id: string | null;\n title: string;\n analyticsEvent?: AnalyticsEventsProp;\n}\n\nexport interface ButtonTabsProps extends QAProps {\n className?: string;\n items: ButtonTabsItemProps[];\n activeTab?: string | null;\n onSelectTab?: (\n tabId: string | null,\n e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,\n ) => void;\n tabSize?: ButtonSize;\n getTabElementId?: (tabId: string) => string;\n getTabContentElementId?: (tabId: string) => string;\n}\n\nconst ButtonTabs = ({\n className,\n items,\n activeTab,\n onSelectTab,\n tabSize = 'l',\n qa,\n getTabElementId,\n getTabContentElementId,\n}: ButtonTabsProps) => {\n const activeTabId: string | null = React.useMemo(() => {\n if (activeTab) {\n return activeTab;\n }\n\n return items[0].id;\n }, [activeTab, items]);\n\n const handleClick = React.useCallback(\n (tabId: string | null) => (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n if (onSelectTab) {\n onSelectTab(tabId, e);\n }\n },\n [onSelectTab],\n );\n\n return (\n <div className={b(null, className)} role=\"tablist\" data-qa={qa}>\n {items.map(({id, title}) => {\n const isActive = id === activeTabId;\n\n return (\n <Button\n text={title}\n className={b('item', {active: isActive})}\n key={title}\n size={tabSize}\n onClick={handleClick(id)}\n id={getTabElementId?.(id ?? '')}\n extraProps={{\n role: 'tab',\n 'aria-selected': isActive,\n 'aria-controls': getTabContentElementId?.(id ?? ''),\n }}\n />\n );\n })}\n </div>\n );\n};\n\nexport default ButtonTabs;\n"]}
package/build/cjs/models/constructor-items/blocks.d.ts CHANGED
@@ -3,7 +3,7 @@ import { ButtonSize } from '@gravity-ui/uikit';
3
3
  import { GridColumnSize, GridColumnSizesType, IndentValue } from "../../grid/types.js";
4
4
  import { ThemeSupporting } from "../../utils/index.js";
5
5
  import { DeviceSupporting } from "../../utils/breakpoint.js";
6
- import { AnalyticsEventsBase } from "../common.js";
6
+ import { AnalyticsEventsBase, AnalyticsEventsProp } from "../common.js";
7
7
  import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, CardBorder, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, GravityIconProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, ImageProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaComponentImageProps, MediaComponentVideoProps, MediaDirection, MediaProps, MediaView, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, WithBorder, YandexFormProps } from "./common.js";
8
8
  import { BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels } from "./sub-blocks.js";
9
9
  export declare enum BlockType {
@@ -298,6 +298,7 @@ export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChi
298
298
  export type FilterTag = {
299
299
  id: string;
300
300
  label: string;
301
+ analyticsEvent?: AnalyticsEventsProp;
301
302
  };
302
303
  export type FilterItem = {
303
304
  tags: string[];
@@ -309,7 +310,7 @@ export interface FilterBlockProps extends Animatable {
309
310
  title?: TitleItemProps | string;
310
311
  description?: string;
311
312
  tagButtonSize?: ButtonSize;
312
- allTag?: boolean | string;
313
+ allTag?: boolean | string | FilterTag;
313
314
  colSizes?: GridColumnSizesType;
314
315
  centered?: boolean;
315
316
  }
package/build/cjs/models/constructor-items/blocks.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"blocks.js","sourceRoot":"../../../../src","sources":["models/constructor-items/blocks.ts"],"names":[],"mappings":";;;AA+CA,IAAY,SAwBX;AAxBD,WAAY,SAAS;IACjB,wDAA2C,CAAA;IAC3C,8DAAiD,CAAA;IACjD,kBAAkB;IAClB,gDAAmC,CAAA;IACnC,yCAA4B,CAAA;IAC5B,+CAAkC,CAAA;IAClC,sDAAyC,CAAA;IACzC,yCAA4B,CAAA;IAC5B,+CAAkC,CAAA;IAClC,uCAA0B,CAAA;IAC1B,qCAAwB,CAAA;IACxB,uCAA0B,CAAA;IAC1B,qCAAwB,CAAA;IACxB,sDAAyC,CAAA;IACzC,yCAA4B,CAAA;IAC5B,qCAAwB,CAAA;IACxB,uCAA0B,CAAA;IAC1B,kDAAqC,CAAA;IACrC,wDAA2C,CAAA;IAC3C,uCAA0B,CAAA;IAC1B,mCAAsB,CAAA;IACtB,yCAA4B,CAAA;IAC5B,qCAAwB,CAAA;AAC5B,CAAC,EAxBW,SAAS,yBAAT,SAAS,QAwBpB;AAEY,QAAA,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;AACtC,QAAA,gBAAgB,GAAG;IAC5B,SAAS,CAAC,WAAW;IACrB,SAAS,CAAC,iBAAiB;IAC3B,SAAS,CAAC,SAAS;CACtB,CAAC;AAgCF,IAAY,qBAKX;AALD,WAAY,qBAAqB;IAC7B,kCAAS,CAAA;IACT,kCAAS,CAAA;IACT,kCAAS,CAAA;IACT,kCAAS,CAAA;AACb,CAAC,EALW,qBAAqB,qCAArB,qBAAqB,QAKhC;AAED,IAAY,UAIX;AAJD,WAAY,UAAU;IAClB,sCAAwB,CAAA;IACxB,wCAA0B,CAAA;IAC1B,gDAAkC,CAAA;AACtC,CAAC,EAJW,UAAU,0BAAV,UAAU,QAIrB;AAuWD,IAAY,oBAMX;AAND,WAAY,oBAAoB;IAC5B,iCAAS,CAAA;IACT,6CAAqB,CAAA;IACrB,2CAAmB,CAAA;IACnB,6CAAqB,CAAA;IACrB,6CAAqB,CAAA;AACzB,CAAC,EANW,oBAAoB,oCAApB,oBAAoB,QAM/B;AAOD,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,uCAAiB,CAAA;IACjB,yCAAmB,CAAA;AACvB,CAAC,EAHW,kBAAkB,kCAAlB,kBAAkB,QAG7B;AAED,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC1B,kDAA4B,CAAA;IAC5B,kDAA4B,CAAA;IAC5B,uCAAiB,CAAA;AACrB,CAAC,EAJW,kBAAkB,kCAAlB,kBAAkB,QAI7B","sourcesContent":["import * as React from 'react';\n\nimport {ButtonSize} from '@gravity-ui/uikit';\n\nimport {GridColumnSize, GridColumnSizesType, IndentValue} from '../../grid/types';\nimport {ThemeSupporting} from '../../utils';\nimport {DeviceSupporting} from '../../utils/breakpoint';\nimport {AnalyticsEventsBase} from '../common';\n\nimport {\n AnchorProps,\n Animatable,\n BackgroundImageProps,\n ButtonProps,\n CardBorder,\n ContentSize,\n ContentTextSize,\n ContentTheme,\n FileLinkProps,\n GravityIconProps,\n HeaderBreadCrumbsProps,\n HeaderImageSize,\n HeaderOffset,\n HeaderWidth,\n ImageDeviceProps,\n ImageProps,\n Justify,\n LegendTableMarkerType,\n LinkProps,\n MapProps,\n MediaComponentImageProps,\n MediaComponentVideoProps,\n MediaDirection,\n MediaProps,\n MediaView,\n TextSize,\n TextTheme,\n ThemedImage,\n ThemedMediaProps,\n ThemedMediaVideoProps,\n TitleItemBaseProps,\n TitleItemProps,\n WithBorder,\n YandexFormProps,\n} from './common';\nimport {BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels} from './sub-blocks';\n\nexport enum BlockType {\n PromoFeaturesBlock = 'promo-features-block',\n ExtendedFeaturesBlock = 'extended-features-block',\n /** @deprecated */\n SliderOldBlock = 'slider-old-block',\n SliderBlock = 'slider-block',\n QuestionsBlock = 'questions-block',\n FoldableListBlock = 'foldable-list-block',\n BannerBlock = 'banner-block',\n CompaniesBlock = 'companies-block',\n MediaBlock = 'media-block',\n InfoBlock = 'info-block',\n TableBlock = 'table-block',\n TabsBlock = 'tabs-block',\n HeaderSliderBlock = 'header-slider-block',\n HeaderBlock = 'header-block',\n HeroBlock = 'hero-block',\n IconsBlock = 'icons-block',\n CardLayoutBlock = 'card-layout-block',\n ContentLayoutBlock = 'content-layout-block',\n ShareBlock = 'share-block',\n MapBlock = 'map-block',\n FilterBlock = 'filter-block',\n FormBlock = 'form-block',\n}\n\nexport const BlockTypes = Object.values(BlockType);\nexport const HeaderBlockTypes = [\n BlockType.HeaderBlock,\n BlockType.HeaderSliderBlock,\n BlockType.HeroBlock,\n];\n\nexport interface Childable {\n children?: SubBlock[];\n}\n\n//block props\nexport interface BlockBaseProps {\n anchor?: AnchorProps;\n visible?: GridColumnSize;\n /** @deprecated */\n resetPaddings?: boolean;\n indent?: {\n top?: IndentValue;\n bottom?: IndentValue;\n };\n qa?: string;\n}\n\nexport interface LoadableProps {\n source: string;\n /**\n * @deprecated Will be moved to params\n */\n serviceId?: number;\n params?: Record<string, string | number | boolean | object>;\n}\n\nexport interface LoadableChildren {\n loadable?: LoadableProps;\n}\n\nexport enum SliderBreakpointNames {\n Sm = 'sm',\n Md = 'md',\n Lg = 'lg',\n Xl = 'xl',\n}\n\nexport enum SliderType {\n MediaCard = 'media-card',\n HeaderCard = 'header-card',\n FullscreenCard = 'fullscreen-card',\n}\n\nexport type SliderBreakpointParams = Record<SliderBreakpointNames, number>;\nexport type SlidesToShow = Partial<SliderBreakpointParams> | number;\n\nexport interface SliderOldProps extends Childable, Animatable, LoadableChildren {\n dots?: boolean;\n arrows?: boolean;\n slidesToShow?: SlidesToShow;\n disclaimer?: {\n text: string;\n size?: TextSize;\n };\n title?: TitleItemBaseProps | string;\n description?: string;\n autoplay?: number;\n //for server transforms\n randomOrder?: boolean;\n adaptive?: boolean;\n}\n\nexport interface SliderProps extends Childable, Animatable, LoadableChildren {\n dots?: boolean;\n arrows?: boolean;\n slidesToShow?: SlidesToShow;\n disclaimer?: {\n text: string;\n size?: TextSize;\n };\n title?: TitleItemBaseProps | string;\n description?: string;\n autoplay?: number;\n //for server transforms\n randomOrder?: boolean;\n adaptive?: boolean;\n}\n\nexport interface HeaderSliderBlockProps extends Omit<SliderOldProps, 'title' | 'description'> {\n items: HeaderBlockProps[];\n}\n\ninterface HeaderBackgroundProps {\n /** @deprecated replaced by Media Props image */\n url?: string;\n /** @deprecated replaced by Media Props image */\n disableCompress?: boolean;\n}\n\nexport interface HeaderBlockBackground extends Partial<HeaderBackgroundProps>, Partial<MediaProps> {\n fullWidth?: boolean;\n fullWidthMedia?: boolean;\n}\n\nexport type ThemedHeaderBlockBackground = ThemeSupporting<HeaderBlockBackground>;\n\nexport interface HeaderBlockVideoIframe {\n src: string;\n autoplay?: boolean;\n previewImg?: string;\n height?: number;\n}\n\nexport interface HeaderBlockProps {\n title: string;\n overtitle?: string | JSX.Element;\n description?: string;\n additionalInfo?: string;\n buttons?: Pick<ButtonProps, 'url' | 'text' | 'theme' | 'primary' | 'size' | 'extraProps'>[];\n width?: HeaderWidth;\n /** @deprecated imageSize now depends on width */\n imageSize?: HeaderImageSize;\n /**\n * @deprecated used only on the main page\n * TODO: delete after the possibility to remove padding-bottom in the block\n */\n offset?: HeaderOffset;\n image?: ThemedImage;\n video?: ThemedMediaVideoProps;\n videoIframe?: HeaderBlockVideoIframe;\n mediaView?: MediaView;\n centered?: boolean;\n background?: ThemedHeaderBlockBackground;\n theme?: 'light' | 'dark';\n verticalOffset?: '0' | 's' | 'm' | 'l' | 'xl';\n breadcrumbs?: HeaderBreadCrumbsProps;\n status?: JSX.Element;\n renderTitle?: (title: string) => React.ReactNode;\n}\n\nexport interface HeroBlockBackground\n extends Partial<MediaComponentImageProps>,\n Partial<MediaComponentVideoProps> {\n color?: string;\n}\n\nexport interface HeroBlockMedia extends Partial<MediaProps> {\n roundCorners?: boolean;\n}\n\nexport interface HeroBlockProps\n extends Pick<\n ContentBlockProps,\n 'title' | 'text' | 'list' | 'additionalInfo' | 'links' | 'theme'\n > {\n breadcrumbs?: HeaderBreadCrumbsProps;\n // TODO: add overtitle to ContentProps\n overtitle?: string | JSX.Element;\n buttons?: ThemeSupporting<\n Pick<ButtonProps, 'url' | 'text' | 'theme' | 'primary' | 'extraProps'> | React.ReactNode\n >[];\n media?: ThemeSupporting<HeroBlockMedia>;\n fullWidth?: boolean;\n verticalOffset?: 's' | 'm' | 'l' | 'xl';\n background?: ThemeSupporting<HeroBlockBackground>;\n}\n\nexport interface ExtendedFeaturesItem\n extends Omit<ContentBlockProps, 'theme' | 'centered' | 'colSizes' | 'size' | 'title'> {\n title: string;\n label?: string;\n icon?: ThemedImage;\n /** @deprecated **/\n link?: LinkProps;\n}\n\nexport interface ExtendedFeaturesProps extends Animatable {\n items: ExtendedFeaturesItem[];\n title?: TitleItemProps | string;\n description?: string;\n colSizes?: GridColumnSizesType;\n}\n\nexport interface PromoFeaturesItem {\n title: string;\n text: string;\n theme?: 'accent' | 'accent-light' | 'primary';\n media?: ThemeSupporting<MediaProps>;\n}\n\nexport interface PromoFeaturesProps extends Animatable {\n items: PromoFeaturesItem[];\n title?: TitleItemProps | string;\n description?: string;\n theme?: 'grey' | 'default';\n}\n\nexport interface QuestionItem {\n title: string;\n text: string;\n listStyle?: 'dash' | 'disk';\n link?: LinkProps;\n onClick?: (index: number, newOpenState: boolean) => void;\n}\n\nexport interface QuestionsProps\n extends Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {\n items: QuestionItem[];\n}\n\nexport interface QuestionBlockItemProps extends QuestionItem {\n isOpened: boolean;\n onClick: () => void;\n}\n\nexport interface FoldableListItem {\n title: string;\n text: string;\n listStyle?: 'dash' | 'disk';\n link?: LinkProps;\n}\n\nexport interface FoldableListProps\n extends Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {\n items: FoldableListItem[];\n}\n\nexport interface FoldableListBlockItemProps extends FoldableListItem {\n isOpened: boolean;\n onClick: () => void;\n}\n\nexport interface BannerBlockProps extends BannerCardProps, Animatable {}\n\nexport interface CompaniesBlockProps extends Animatable {\n title: string;\n description?: string;\n images: ThemeSupporting<ImageDeviceProps>;\n}\n\nexport interface MediaBaseBlockProps extends Animatable, MediaContentProps {\n direction?: MediaDirection;\n mobileDirection?: MediaDirection;\n largeMedia?: boolean;\n mediaOnly?: boolean;\n mediaOnlyColSizes?: GridColumnSizesType;\n}\n\nexport interface MediaContentProps\n extends Omit<ContentBlockProps, 'colSizes' | 'text' | 'theme' | 'centered'> {\n description?: string;\n /** @deprecated Use array of buttons from ContentBlockProps instead**/\n button?: ButtonProps;\n}\n\nexport interface MediaBlockProps extends MediaBaseBlockProps, WithBorder {\n media: ThemeSupporting<MediaProps>;\n}\n\nexport interface MapBlockProps extends MediaBaseBlockProps, WithBorder {\n map: Omit<MapProps, 'forceAspectRatio' | 'areaMargin' | 'copyrightPosition'>;\n}\n\nexport interface InfoBlockProps {\n theme?: TextTheme;\n backgroundColor?: ThemeSupporting<string>;\n /** @deprecated **/\n title?: string;\n /** @deprecated **/\n buttons?: Pick<ButtonProps, 'url' | 'text' | 'theme'>[];\n /** @deprecated **/\n sectionsTitle?: string;\n /** @deprecated **/\n links?: Pick<LinkProps, 'text' | 'url'>[];\n leftContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;\n rightContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;\n}\n\nexport interface TableProps {\n content: string[][];\n legend?: string[];\n hideLegend?: boolean;\n justify?: Justify[];\n marker?: LegendTableMarkerType;\n /**\n * Only as accessible name, not displayed explicitly\n */\n caption?: string;\n}\n\nexport interface TableBlockProps {\n title: string;\n table: TableProps;\n}\n\nexport interface TabsBlockItem\n extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme'>,\n WithBorder {\n tabName: string;\n /**\n * @deprecated Use array links from ContentBlockProps instead\n */\n link?: LinkProps;\n image?: ThemedImage;\n caption?: string;\n media?: ThemedMediaProps;\n}\n\nexport interface TabsBlockProps extends Animatable {\n title?: TitleItemProps | string;\n description?: string;\n tabsColSizes?: GridColumnSizesType;\n centered?: boolean;\n direction?: MediaDirection;\n items: TabsBlockItem[];\n contentSize?: ContentSize;\n}\n\nexport interface CardLayoutBlockProps extends Childable, Animatable, LoadableChildren {\n title?: TitleItemProps | string;\n titleClassName?: string;\n centered?: boolean;\n description?: string;\n colSizes?: GridColumnSizesType;\n background?: ThemeSupporting<\n BackgroundImageProps & {\n border?: CardBorder;\n }\n >;\n}\n\nexport type FilterTag = {\n id: string;\n label: string;\n};\n\nexport type FilterItem = {\n tags: string[];\n card: SubBlockModels;\n};\n\nexport interface FilterBlockProps extends Animatable {\n tags: FilterTag[];\n items: FilterItem[];\n title?: TitleItemProps | string;\n description?: string;\n tagButtonSize?: ButtonSize;\n allTag?: boolean | string;\n colSizes?: GridColumnSizesType;\n centered?: boolean;\n}\n\nexport interface IconsBlockItemProps extends AnalyticsEventsBase {\n url: string;\n text: string;\n src: ThemeSupporting<string>;\n}\n\nexport interface IconsBlockProps {\n title?: string;\n description?: string;\n size?: 's' | 'm' | 'l';\n items: IconsBlockItemProps[];\n colSizes?: GridColumnSizesType;\n}\n\ninterface ContentLayoutBlockParams {\n size?: ContentSize;\n background?: ThemeSupporting<BackgroundImageProps>;\n centered?: boolean;\n theme?: ContentTheme;\n textWidth?: ContentTextSize;\n}\n\nexport interface ContentLayoutBlockProps extends ContentLayoutBlockParams {\n textContent: ContentBlockProps;\n fileContent?: FileLinkProps[];\n}\n\nexport type SVGIcon = (props: React.SVGProps<SVGSVGElement>) => React.ReactNode;\n\nexport interface ContentItemProps {\n title?: string;\n text?: string;\n icon?: ThemeSupporting<ImageProps | SVGIcon>;\n gravityIcon?: ThemeSupporting<GravityIconProps>;\n}\n\nexport interface ContentListProps {\n list: ContentItemProps[];\n size: ContentSize;\n theme?: ContentTheme;\n}\n\nexport interface ContentBlockProps {\n title?: TitleItemBaseProps | string;\n titleId?: string;\n text?: string;\n textId?: string;\n additionalInfo?: string;\n links?: LinkProps[];\n buttons?: (ButtonProps | React.ReactNode)[];\n size?: ContentSize;\n colSizes?: GridColumnSizesType;\n centered?: boolean;\n theme?: ContentTheme;\n list?: ContentItemProps[];\n controlPosition?: 'default' | 'bottom';\n}\n\nexport enum PCShareSocialNetwork {\n Vk = 'vk',\n Telegram = 'telegram',\n Twitter = 'twitter',\n Facebook = 'facebook',\n LinkedIn = 'linkedin',\n}\n\nexport interface ShareBlockProps {\n items: PCShareSocialNetwork[];\n title?: string;\n}\n\nexport enum FormBlockDataTypes {\n YANDEX = 'yandex',\n HUBSPOT = 'hubspot',\n}\n\nexport enum FormBlockDirection {\n FormContent = 'form-content',\n ContentForm = 'content-form',\n Center = 'center',\n}\n\nexport interface FormBlockYandexData {\n yandex: ThemeSupporting<YandexFormProps>;\n}\n\nexport interface FormBlockHubspotData {\n hubspot: ThemeSupporting<HubspotFormProps>;\n}\n\nexport type FormBlockData = FormBlockYandexData | FormBlockHubspotData;\n\nexport interface FormBlockBackgroundProps extends Omit<BackgroundImageProps, 'style'> {\n style?: DeviceSupporting<React.CSSProperties>;\n}\n\nexport interface FormBlockProps {\n formData: FormBlockData;\n title?: string;\n textContent?: Omit<ContentBlockProps, 'centered' | 'colSizes' | 'size'>;\n direction?: FormBlockDirection;\n background?: ThemeSupporting<FormBlockBackgroundProps>;\n customFormNode?: React.ReactNode;\n additionalContentNode?: React.ReactNode;\n}\n\n//block models\nexport type HeaderBlockModel = {\n type: BlockType.HeaderBlock;\n} & HeaderBlockProps;\n\nexport type HeroBlockModel = {\n type: BlockType.HeroBlock;\n} & HeroBlockProps;\n\nexport type SliderOldBlockModel = {\n type: BlockType.SliderOldBlock;\n} & SliderOldProps;\n\nexport type ExtendedFeaturesBlockModel = {\n type: BlockType.ExtendedFeaturesBlock;\n} & ExtendedFeaturesProps;\n\nexport type PromoFeaturesBlockModel = {\n type: BlockType.PromoFeaturesBlock;\n} & PromoFeaturesProps;\n\nexport type QuestionsBlockModel = {\n type: BlockType.QuestionsBlock;\n} & QuestionsProps;\n\nexport type FoldableListBlockModel = {\n type: BlockType.FoldableListBlock;\n} & FoldableListProps;\n\nexport type BannerBlockModel = {\n type: BlockType.BannerBlock;\n} & BannerBlockProps;\n\nexport type CompaniesBlockModel = {\n type: BlockType.CompaniesBlock;\n} & CompaniesBlockProps;\n\nexport type MediaBlockModel = {\n type: BlockType.MediaBlock;\n} & MediaBlockProps;\n\nexport type MapBlockModel = {\n type: BlockType.MapBlock;\n} & MapBlockProps;\n\nexport type InfoBlockModel = {\n type: BlockType.InfoBlock;\n} & InfoBlockProps;\n\nexport type TableBlockModel = {\n type: BlockType.TableBlock;\n} & TableBlockProps;\n\nexport type TabsBlockModel = {\n type: BlockType.TabsBlock;\n} & TabsBlockProps;\n\nexport type CardLayoutBlockModel = {\n type: BlockType.CardLayoutBlock;\n} & CardLayoutBlockProps;\n\nexport type FilterBlockModel = {\n type: BlockType.FilterBlock;\n} & FilterBlockProps;\n\nexport type IconsBlockModel = {\n type: BlockType.IconsBlock;\n} & IconsBlockProps;\n\nexport type HeaderSliderBlockModel = {\n type: BlockType.HeaderSliderBlock;\n} & HeaderSliderBlockProps;\n\nexport type ContentLayoutBlockModel = {\n type: BlockType.ContentLayoutBlock;\n} & ContentLayoutBlockProps;\n\nexport type ShareBLockModel = {\n type: BlockType.ShareBlock;\n} & ShareBlockProps;\n\nexport type FormBlockModel = {\n type: BlockType.FormBlock;\n} & FormBlockProps;\n\nexport type SliderBlockModel = {\n type: BlockType.SliderBlock;\n} & SliderProps;\n\ntype BlockModels =\n | SliderOldBlockModel\n | SliderBlockModel\n | ExtendedFeaturesBlockModel\n | PromoFeaturesBlockModel\n | QuestionsBlockModel\n | FoldableListBlockModel\n | BannerBlockModel\n | CompaniesBlockModel\n | MediaBlockModel\n | MapBlockModel\n | InfoBlockModel\n | TableBlockModel\n | TabsBlockModel\n | HeaderBlockModel\n | HeroBlockModel\n | IconsBlockModel\n | HeaderSliderBlockModel\n | CardLayoutBlockModel\n | ContentLayoutBlockModel\n | ShareBLockModel\n | FilterBlockModel\n | FormBlockModel;\n\nexport type Block = BlockModels & BlockBaseProps;\n"]}
1
+ {"version":3,"file":"blocks.js","sourceRoot":"../../../../src","sources":["models/constructor-items/blocks.ts"],"names":[],"mappings":";;;AA+CA,IAAY,SAwBX;AAxBD,WAAY,SAAS;IACjB,wDAA2C,CAAA;IAC3C,8DAAiD,CAAA;IACjD,kBAAkB;IAClB,gDAAmC,CAAA;IACnC,yCAA4B,CAAA;IAC5B,+CAAkC,CAAA;IAClC,sDAAyC,CAAA;IACzC,yCAA4B,CAAA;IAC5B,+CAAkC,CAAA;IAClC,uCAA0B,CAAA;IAC1B,qCAAwB,CAAA;IACxB,uCAA0B,CAAA;IAC1B,qCAAwB,CAAA;IACxB,sDAAyC,CAAA;IACzC,yCAA4B,CAAA;IAC5B,qCAAwB,CAAA;IACxB,uCAA0B,CAAA;IAC1B,kDAAqC,CAAA;IACrC,wDAA2C,CAAA;IAC3C,uCAA0B,CAAA;IAC1B,mCAAsB,CAAA;IACtB,yCAA4B,CAAA;IAC5B,qCAAwB,CAAA;AAC5B,CAAC,EAxBW,SAAS,yBAAT,SAAS,QAwBpB;AAEY,QAAA,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;AACtC,QAAA,gBAAgB,GAAG;IAC5B,SAAS,CAAC,WAAW;IACrB,SAAS,CAAC,iBAAiB;IAC3B,SAAS,CAAC,SAAS;CACtB,CAAC;AAgCF,IAAY,qBAKX;AALD,WAAY,qBAAqB;IAC7B,kCAAS,CAAA;IACT,kCAAS,CAAA;IACT,kCAAS,CAAA;IACT,kCAAS,CAAA;AACb,CAAC,EALW,qBAAqB,qCAArB,qBAAqB,QAKhC;AAED,IAAY,UAIX;AAJD,WAAY,UAAU;IAClB,sCAAwB,CAAA;IACxB,wCAA0B,CAAA;IAC1B,gDAAkC,CAAA;AACtC,CAAC,EAJW,UAAU,0BAAV,UAAU,QAIrB;AAwWD,IAAY,oBAMX;AAND,WAAY,oBAAoB;IAC5B,iCAAS,CAAA;IACT,6CAAqB,CAAA;IACrB,2CAAmB,CAAA;IACnB,6CAAqB,CAAA;IACrB,6CAAqB,CAAA;AACzB,CAAC,EANW,oBAAoB,oCAApB,oBAAoB,QAM/B;AAOD,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,uCAAiB,CAAA;IACjB,yCAAmB,CAAA;AACvB,CAAC,EAHW,kBAAkB,kCAAlB,kBAAkB,QAG7B;AAED,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC1B,kDAA4B,CAAA;IAC5B,kDAA4B,CAAA;IAC5B,uCAAiB,CAAA;AACrB,CAAC,EAJW,kBAAkB,kCAAlB,kBAAkB,QAI7B","sourcesContent":["import * as React from 'react';\n\nimport {ButtonSize} from '@gravity-ui/uikit';\n\nimport {GridColumnSize, GridColumnSizesType, IndentValue} from '../../grid/types';\nimport {ThemeSupporting} from '../../utils';\nimport {DeviceSupporting} from '../../utils/breakpoint';\nimport {AnalyticsEventsBase, AnalyticsEventsProp} from '../common';\n\nimport {\n AnchorProps,\n Animatable,\n BackgroundImageProps,\n ButtonProps,\n CardBorder,\n ContentSize,\n ContentTextSize,\n ContentTheme,\n FileLinkProps,\n GravityIconProps,\n HeaderBreadCrumbsProps,\n HeaderImageSize,\n HeaderOffset,\n HeaderWidth,\n ImageDeviceProps,\n ImageProps,\n Justify,\n LegendTableMarkerType,\n LinkProps,\n MapProps,\n MediaComponentImageProps,\n MediaComponentVideoProps,\n MediaDirection,\n MediaProps,\n MediaView,\n TextSize,\n TextTheme,\n ThemedImage,\n ThemedMediaProps,\n ThemedMediaVideoProps,\n TitleItemBaseProps,\n TitleItemProps,\n WithBorder,\n YandexFormProps,\n} from './common';\nimport {BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels} from './sub-blocks';\n\nexport enum BlockType {\n PromoFeaturesBlock = 'promo-features-block',\n ExtendedFeaturesBlock = 'extended-features-block',\n /** @deprecated */\n SliderOldBlock = 'slider-old-block',\n SliderBlock = 'slider-block',\n QuestionsBlock = 'questions-block',\n FoldableListBlock = 'foldable-list-block',\n BannerBlock = 'banner-block',\n CompaniesBlock = 'companies-block',\n MediaBlock = 'media-block',\n InfoBlock = 'info-block',\n TableBlock = 'table-block',\n TabsBlock = 'tabs-block',\n HeaderSliderBlock = 'header-slider-block',\n HeaderBlock = 'header-block',\n HeroBlock = 'hero-block',\n IconsBlock = 'icons-block',\n CardLayoutBlock = 'card-layout-block',\n ContentLayoutBlock = 'content-layout-block',\n ShareBlock = 'share-block',\n MapBlock = 'map-block',\n FilterBlock = 'filter-block',\n FormBlock = 'form-block',\n}\n\nexport const BlockTypes = Object.values(BlockType);\nexport const HeaderBlockTypes = [\n BlockType.HeaderBlock,\n BlockType.HeaderSliderBlock,\n BlockType.HeroBlock,\n];\n\nexport interface Childable {\n children?: SubBlock[];\n}\n\n//block props\nexport interface BlockBaseProps {\n anchor?: AnchorProps;\n visible?: GridColumnSize;\n /** @deprecated */\n resetPaddings?: boolean;\n indent?: {\n top?: IndentValue;\n bottom?: IndentValue;\n };\n qa?: string;\n}\n\nexport interface LoadableProps {\n source: string;\n /**\n * @deprecated Will be moved to params\n */\n serviceId?: number;\n params?: Record<string, string | number | boolean | object>;\n}\n\nexport interface LoadableChildren {\n loadable?: LoadableProps;\n}\n\nexport enum SliderBreakpointNames {\n Sm = 'sm',\n Md = 'md',\n Lg = 'lg',\n Xl = 'xl',\n}\n\nexport enum SliderType {\n MediaCard = 'media-card',\n HeaderCard = 'header-card',\n FullscreenCard = 'fullscreen-card',\n}\n\nexport type SliderBreakpointParams = Record<SliderBreakpointNames, number>;\nexport type SlidesToShow = Partial<SliderBreakpointParams> | number;\n\nexport interface SliderOldProps extends Childable, Animatable, LoadableChildren {\n dots?: boolean;\n arrows?: boolean;\n slidesToShow?: SlidesToShow;\n disclaimer?: {\n text: string;\n size?: TextSize;\n };\n title?: TitleItemBaseProps | string;\n description?: string;\n autoplay?: number;\n //for server transforms\n randomOrder?: boolean;\n adaptive?: boolean;\n}\n\nexport interface SliderProps extends Childable, Animatable, LoadableChildren {\n dots?: boolean;\n arrows?: boolean;\n slidesToShow?: SlidesToShow;\n disclaimer?: {\n text: string;\n size?: TextSize;\n };\n title?: TitleItemBaseProps | string;\n description?: string;\n autoplay?: number;\n //for server transforms\n randomOrder?: boolean;\n adaptive?: boolean;\n}\n\nexport interface HeaderSliderBlockProps extends Omit<SliderOldProps, 'title' | 'description'> {\n items: HeaderBlockProps[];\n}\n\ninterface HeaderBackgroundProps {\n /** @deprecated replaced by Media Props image */\n url?: string;\n /** @deprecated replaced by Media Props image */\n disableCompress?: boolean;\n}\n\nexport interface HeaderBlockBackground extends Partial<HeaderBackgroundProps>, Partial<MediaProps> {\n fullWidth?: boolean;\n fullWidthMedia?: boolean;\n}\n\nexport type ThemedHeaderBlockBackground = ThemeSupporting<HeaderBlockBackground>;\n\nexport interface HeaderBlockVideoIframe {\n src: string;\n autoplay?: boolean;\n previewImg?: string;\n height?: number;\n}\n\nexport interface HeaderBlockProps {\n title: string;\n overtitle?: string | JSX.Element;\n description?: string;\n additionalInfo?: string;\n buttons?: Pick<ButtonProps, 'url' | 'text' | 'theme' | 'primary' | 'size' | 'extraProps'>[];\n width?: HeaderWidth;\n /** @deprecated imageSize now depends on width */\n imageSize?: HeaderImageSize;\n /**\n * @deprecated used only on the main page\n * TODO: delete after the possibility to remove padding-bottom in the block\n */\n offset?: HeaderOffset;\n image?: ThemedImage;\n video?: ThemedMediaVideoProps;\n videoIframe?: HeaderBlockVideoIframe;\n mediaView?: MediaView;\n centered?: boolean;\n background?: ThemedHeaderBlockBackground;\n theme?: 'light' | 'dark';\n verticalOffset?: '0' | 's' | 'm' | 'l' | 'xl';\n breadcrumbs?: HeaderBreadCrumbsProps;\n status?: JSX.Element;\n renderTitle?: (title: string) => React.ReactNode;\n}\n\nexport interface HeroBlockBackground\n extends Partial<MediaComponentImageProps>,\n Partial<MediaComponentVideoProps> {\n color?: string;\n}\n\nexport interface HeroBlockMedia extends Partial<MediaProps> {\n roundCorners?: boolean;\n}\n\nexport interface HeroBlockProps\n extends Pick<\n ContentBlockProps,\n 'title' | 'text' | 'list' | 'additionalInfo' | 'links' | 'theme'\n > {\n breadcrumbs?: HeaderBreadCrumbsProps;\n // TODO: add overtitle to ContentProps\n overtitle?: string | JSX.Element;\n buttons?: ThemeSupporting<\n Pick<ButtonProps, 'url' | 'text' | 'theme' | 'primary' | 'extraProps'> | React.ReactNode\n >[];\n media?: ThemeSupporting<HeroBlockMedia>;\n fullWidth?: boolean;\n verticalOffset?: 's' | 'm' | 'l' | 'xl';\n background?: ThemeSupporting<HeroBlockBackground>;\n}\n\nexport interface ExtendedFeaturesItem\n extends Omit<ContentBlockProps, 'theme' | 'centered' | 'colSizes' | 'size' | 'title'> {\n title: string;\n label?: string;\n icon?: ThemedImage;\n /** @deprecated **/\n link?: LinkProps;\n}\n\nexport interface ExtendedFeaturesProps extends Animatable {\n items: ExtendedFeaturesItem[];\n title?: TitleItemProps | string;\n description?: string;\n colSizes?: GridColumnSizesType;\n}\n\nexport interface PromoFeaturesItem {\n title: string;\n text: string;\n theme?: 'accent' | 'accent-light' | 'primary';\n media?: ThemeSupporting<MediaProps>;\n}\n\nexport interface PromoFeaturesProps extends Animatable {\n items: PromoFeaturesItem[];\n title?: TitleItemProps | string;\n description?: string;\n theme?: 'grey' | 'default';\n}\n\nexport interface QuestionItem {\n title: string;\n text: string;\n listStyle?: 'dash' | 'disk';\n link?: LinkProps;\n onClick?: (index: number, newOpenState: boolean) => void;\n}\n\nexport interface QuestionsProps\n extends Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {\n items: QuestionItem[];\n}\n\nexport interface QuestionBlockItemProps extends QuestionItem {\n isOpened: boolean;\n onClick: () => void;\n}\n\nexport interface FoldableListItem {\n title: string;\n text: string;\n listStyle?: 'dash' | 'disk';\n link?: LinkProps;\n}\n\nexport interface FoldableListProps\n extends Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {\n items: FoldableListItem[];\n}\n\nexport interface FoldableListBlockItemProps extends FoldableListItem {\n isOpened: boolean;\n onClick: () => void;\n}\n\nexport interface BannerBlockProps extends BannerCardProps, Animatable {}\n\nexport interface CompaniesBlockProps extends Animatable {\n title: string;\n description?: string;\n images: ThemeSupporting<ImageDeviceProps>;\n}\n\nexport interface MediaBaseBlockProps extends Animatable, MediaContentProps {\n direction?: MediaDirection;\n mobileDirection?: MediaDirection;\n largeMedia?: boolean;\n mediaOnly?: boolean;\n mediaOnlyColSizes?: GridColumnSizesType;\n}\n\nexport interface MediaContentProps\n extends Omit<ContentBlockProps, 'colSizes' | 'text' | 'theme' | 'centered'> {\n description?: string;\n /** @deprecated Use array of buttons from ContentBlockProps instead**/\n button?: ButtonProps;\n}\n\nexport interface MediaBlockProps extends MediaBaseBlockProps, WithBorder {\n media: ThemeSupporting<MediaProps>;\n}\n\nexport interface MapBlockProps extends MediaBaseBlockProps, WithBorder {\n map: Omit<MapProps, 'forceAspectRatio' | 'areaMargin' | 'copyrightPosition'>;\n}\n\nexport interface InfoBlockProps {\n theme?: TextTheme;\n backgroundColor?: ThemeSupporting<string>;\n /** @deprecated **/\n title?: string;\n /** @deprecated **/\n buttons?: Pick<ButtonProps, 'url' | 'text' | 'theme'>[];\n /** @deprecated **/\n sectionsTitle?: string;\n /** @deprecated **/\n links?: Pick<LinkProps, 'text' | 'url'>[];\n leftContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;\n rightContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;\n}\n\nexport interface TableProps {\n content: string[][];\n legend?: string[];\n hideLegend?: boolean;\n justify?: Justify[];\n marker?: LegendTableMarkerType;\n /**\n * Only as accessible name, not displayed explicitly\n */\n caption?: string;\n}\n\nexport interface TableBlockProps {\n title: string;\n table: TableProps;\n}\n\nexport interface TabsBlockItem\n extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme'>,\n WithBorder {\n tabName: string;\n /**\n * @deprecated Use array links from ContentBlockProps instead\n */\n link?: LinkProps;\n image?: ThemedImage;\n caption?: string;\n media?: ThemedMediaProps;\n}\n\nexport interface TabsBlockProps extends Animatable {\n title?: TitleItemProps | string;\n description?: string;\n tabsColSizes?: GridColumnSizesType;\n centered?: boolean;\n direction?: MediaDirection;\n items: TabsBlockItem[];\n contentSize?: ContentSize;\n}\n\nexport interface CardLayoutBlockProps extends Childable, Animatable, LoadableChildren {\n title?: TitleItemProps | string;\n titleClassName?: string;\n centered?: boolean;\n description?: string;\n colSizes?: GridColumnSizesType;\n background?: ThemeSupporting<\n BackgroundImageProps & {\n border?: CardBorder;\n }\n >;\n}\n\nexport type FilterTag = {\n id: string;\n label: string;\n analyticsEvent?: AnalyticsEventsProp;\n};\n\nexport type FilterItem = {\n tags: string[];\n card: SubBlockModels;\n};\n\nexport interface FilterBlockProps extends Animatable {\n tags: FilterTag[];\n items: FilterItem[];\n title?: TitleItemProps | string;\n description?: string;\n tagButtonSize?: ButtonSize;\n allTag?: boolean | string | FilterTag;\n colSizes?: GridColumnSizesType;\n centered?: boolean;\n}\n\nexport interface IconsBlockItemProps extends AnalyticsEventsBase {\n url: string;\n text: string;\n src: ThemeSupporting<string>;\n}\n\nexport interface IconsBlockProps {\n title?: string;\n description?: string;\n size?: 's' | 'm' | 'l';\n items: IconsBlockItemProps[];\n colSizes?: GridColumnSizesType;\n}\n\ninterface ContentLayoutBlockParams {\n size?: ContentSize;\n background?: ThemeSupporting<BackgroundImageProps>;\n centered?: boolean;\n theme?: ContentTheme;\n textWidth?: ContentTextSize;\n}\n\nexport interface ContentLayoutBlockProps extends ContentLayoutBlockParams {\n textContent: ContentBlockProps;\n fileContent?: FileLinkProps[];\n}\n\nexport type SVGIcon = (props: React.SVGProps<SVGSVGElement>) => React.ReactNode;\n\nexport interface ContentItemProps {\n title?: string;\n text?: string;\n icon?: ThemeSupporting<ImageProps | SVGIcon>;\n gravityIcon?: ThemeSupporting<GravityIconProps>;\n}\n\nexport interface ContentListProps {\n list: ContentItemProps[];\n size: ContentSize;\n theme?: ContentTheme;\n}\n\nexport interface ContentBlockProps {\n title?: TitleItemBaseProps | string;\n titleId?: string;\n text?: string;\n textId?: string;\n additionalInfo?: string;\n links?: LinkProps[];\n buttons?: (ButtonProps | React.ReactNode)[];\n size?: ContentSize;\n colSizes?: GridColumnSizesType;\n centered?: boolean;\n theme?: ContentTheme;\n list?: ContentItemProps[];\n controlPosition?: 'default' | 'bottom';\n}\n\nexport enum PCShareSocialNetwork {\n Vk = 'vk',\n Telegram = 'telegram',\n Twitter = 'twitter',\n Facebook = 'facebook',\n LinkedIn = 'linkedin',\n}\n\nexport interface ShareBlockProps {\n items: PCShareSocialNetwork[];\n title?: string;\n}\n\nexport enum FormBlockDataTypes {\n YANDEX = 'yandex',\n HUBSPOT = 'hubspot',\n}\n\nexport enum FormBlockDirection {\n FormContent = 'form-content',\n ContentForm = 'content-form',\n Center = 'center',\n}\n\nexport interface FormBlockYandexData {\n yandex: ThemeSupporting<YandexFormProps>;\n}\n\nexport interface FormBlockHubspotData {\n hubspot: ThemeSupporting<HubspotFormProps>;\n}\n\nexport type FormBlockData = FormBlockYandexData | FormBlockHubspotData;\n\nexport interface FormBlockBackgroundProps extends Omit<BackgroundImageProps, 'style'> {\n style?: DeviceSupporting<React.CSSProperties>;\n}\n\nexport interface FormBlockProps {\n formData: FormBlockData;\n title?: string;\n textContent?: Omit<ContentBlockProps, 'centered' | 'colSizes' | 'size'>;\n direction?: FormBlockDirection;\n background?: ThemeSupporting<FormBlockBackgroundProps>;\n customFormNode?: React.ReactNode;\n additionalContentNode?: React.ReactNode;\n}\n\n//block models\nexport type HeaderBlockModel = {\n type: BlockType.HeaderBlock;\n} & HeaderBlockProps;\n\nexport type HeroBlockModel = {\n type: BlockType.HeroBlock;\n} & HeroBlockProps;\n\nexport type SliderOldBlockModel = {\n type: BlockType.SliderOldBlock;\n} & SliderOldProps;\n\nexport type ExtendedFeaturesBlockModel = {\n type: BlockType.ExtendedFeaturesBlock;\n} & ExtendedFeaturesProps;\n\nexport type PromoFeaturesBlockModel = {\n type: BlockType.PromoFeaturesBlock;\n} & PromoFeaturesProps;\n\nexport type QuestionsBlockModel = {\n type: BlockType.QuestionsBlock;\n} & QuestionsProps;\n\nexport type FoldableListBlockModel = {\n type: BlockType.FoldableListBlock;\n} & FoldableListProps;\n\nexport type BannerBlockModel = {\n type: BlockType.BannerBlock;\n} & BannerBlockProps;\n\nexport type CompaniesBlockModel = {\n type: BlockType.CompaniesBlock;\n} & CompaniesBlockProps;\n\nexport type MediaBlockModel = {\n type: BlockType.MediaBlock;\n} & MediaBlockProps;\n\nexport type MapBlockModel = {\n type: BlockType.MapBlock;\n} & MapBlockProps;\n\nexport type InfoBlockModel = {\n type: BlockType.InfoBlock;\n} & InfoBlockProps;\n\nexport type TableBlockModel = {\n type: BlockType.TableBlock;\n} & TableBlockProps;\n\nexport type TabsBlockModel = {\n type: BlockType.TabsBlock;\n} & TabsBlockProps;\n\nexport type CardLayoutBlockModel = {\n type: BlockType.CardLayoutBlock;\n} & CardLayoutBlockProps;\n\nexport type FilterBlockModel = {\n type: BlockType.FilterBlock;\n} & FilterBlockProps;\n\nexport type IconsBlockModel = {\n type: BlockType.IconsBlock;\n} & IconsBlockProps;\n\nexport type HeaderSliderBlockModel = {\n type: BlockType.HeaderSliderBlock;\n} & HeaderSliderBlockProps;\n\nexport type ContentLayoutBlockModel = {\n type: BlockType.ContentLayoutBlock;\n} & ContentLayoutBlockProps;\n\nexport type ShareBLockModel = {\n type: BlockType.ShareBlock;\n} & ShareBlockProps;\n\nexport type FormBlockModel = {\n type: BlockType.FormBlock;\n} & FormBlockProps;\n\nexport type SliderBlockModel = {\n type: BlockType.SliderBlock;\n} & SliderProps;\n\ntype BlockModels =\n | SliderOldBlockModel\n | SliderBlockModel\n | ExtendedFeaturesBlockModel\n | PromoFeaturesBlockModel\n | QuestionsBlockModel\n | FoldableListBlockModel\n | BannerBlockModel\n | CompaniesBlockModel\n | MediaBlockModel\n | MapBlockModel\n | InfoBlockModel\n | TableBlockModel\n | TabsBlockModel\n | HeaderBlockModel\n | HeroBlockModel\n | IconsBlockModel\n | HeaderSliderBlockModel\n | CardLayoutBlockModel\n | ContentLayoutBlockModel\n | ShareBLockModel\n | FilterBlockModel\n | FormBlockModel;\n\nexport type Block = BlockModels & BlockBaseProps;\n"]}
package/build/esm/blocks/FilterBlock/FilterBlock.js CHANGED
@@ -5,16 +5,42 @@ import { AnimateBlock, Title } from "../../components/index.js";
5
5
  import ButtonTabs from "../../components/ButtonTabs/ButtonTabs.js";
6
6
  import { ConstructorItem } from "../../containers/PageConstructor/components/ConstructorItem/index.js";
7
7
  import { Col, Row } from "../../grid/index.js";
8
+ import { useAnalytics } from "../../hooks/index.js";
8
9
  import { block, getBlockKey } from "../../utils/index.js";
9
10
  import { i18n } from "./i18n/index.js";
10
11
  import './FilterBlock.css';
11
12
  const b = block('filter-block');
12
13
  const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, colSizes, centered, animated, }) => {
14
+ const handleAnalytics = useAnalytics();
13
15
  const tabButtons = React.useMemo(() => {
14
- const allButton = allTag
15
- ? { id: null, title: typeof allTag === 'boolean' ? i18n('label-all-tag') : allTag }
16
- : undefined;
17
- const otherButtons = tags && tags.map((tag) => ({ id: tag.id, title: tag.label }));
16
+ let allButton;
17
+ if (allTag) {
18
+ if (typeof allTag === 'boolean') {
19
+ allButton = {
20
+ id: null,
21
+ title: i18n('label-all-tag'),
22
+ };
23
+ }
24
+ else if (typeof allTag === 'string') {
25
+ allButton = {
26
+ id: null,
27
+ title: allTag,
28
+ };
29
+ }
30
+ else if (typeof allTag === 'object') {
31
+ allButton = {
32
+ id: null,
33
+ title: allTag.label,
34
+ analyticsEvent: allTag.analyticsEvent,
35
+ };
36
+ }
37
+ }
38
+ const otherButtons = tags &&
39
+ tags.map((tag) => ({
40
+ id: tag.id,
41
+ title: tag.label,
42
+ analyticsEvent: tag.analyticsEvent,
43
+ }));
18
44
  return [...(allButton ? [allButton] : []), ...(otherButtons ? otherButtons : [])];
19
45
  }, [allTag, tags]);
20
46
  const [selectedTag, setSelectedTag] = React.useState(tabButtons.length ? tabButtons[0].id : null);
@@ -29,7 +55,14 @@ const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, c
29
55
  : items;
30
56
  return itemsToShow.map((item) => item.card);
31
57
  }, [actualTag, items]);
32
- return (_jsxs(AnimateBlock, { className: b(), animate: animated, children: [title && (_jsx(Title, { className: b('title', { centered: centered }), title: title, subtitle: description })), tabButtons.length && (_jsx(Row, { children: _jsx(Col, { children: _jsx(ButtonTabs, { className: b('tabs', { centered: centered }), items: tabButtons, activeTab: selectedTag, onSelectTab: setSelectedTag, tabSize: tagButtonSize }) }) })), _jsx(Row, { className: b('block-container'), children: _jsx(CardLayoutBlock, { title: "", colSizes: colSizes, className: b('cards-container'), children: cards.map((card, index) => {
58
+ const handleSelectTab = React.useCallback((tabId) => {
59
+ setSelectedTag(tabId);
60
+ const tabButton = tabButtons.find((tab) => tab.id === tabId);
61
+ if (tabButton?.analyticsEvent) {
62
+ handleAnalytics(tabButton.analyticsEvent);
63
+ }
64
+ }, [tabButtons, handleAnalytics]);
65
+ return (_jsxs(AnimateBlock, { className: b(), animate: animated, children: [title && (_jsx(Title, { className: b('title', { centered: centered }), title: title, subtitle: description })), tabButtons.length && (_jsx(Row, { children: _jsx(Col, { children: _jsx(ButtonTabs, { className: b('tabs', { centered: centered }), items: tabButtons, activeTab: selectedTag, onSelectTab: handleSelectTab, tabSize: tagButtonSize }) }) })), _jsx(Row, { className: b('block-container'), children: _jsx(CardLayoutBlock, { title: "", colSizes: colSizes, className: b('cards-container'), children: cards.map((card, index) => {
33
66
  const key = getBlockKey(card, index);
34
67
  return _jsx(ConstructorItem, { data: card, blockKey: key }, key);
35
68
  }) }) })] }));
package/build/esm/blocks/FilterBlock/FilterBlock.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FilterBlock.js","sourceRoot":"../../../../src","sources":["blocks/FilterBlock/FilterBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {CardLayoutBlock} from '..';\nimport {AnimateBlock, Title} from '../../components';\nimport ButtonTabs, {ButtonTabsItemProps} from '../../components/ButtonTabs/ButtonTabs';\nimport {ConstructorItem} from '../../containers/PageConstructor/components/ConstructorItem';\nimport {Col, Row} from '../../grid';\nimport {FilterBlockProps, FilterItem} from '../../models';\nimport {block, getBlockKey} from '../../utils';\n\nimport {i18n} from './i18n';\n\nimport './FilterBlock.scss';\n\nconst b = block('filter-block');\n\nconst FilterBlock = ({\n title,\n description,\n tags,\n tagButtonSize,\n allTag,\n items,\n colSizes,\n centered,\n animated,\n}: FilterBlockProps) => {\n const tabButtons = React.useMemo(() => {\n const allButton: ButtonTabsItemProps | undefined = allTag\n ? {id: null, title: typeof allTag === 'boolean' ? i18n('label-all-tag') : allTag}\n : undefined;\n const otherButtons: ButtonTabsItemProps[] | undefined =\n tags && tags.map((tag) => ({id: tag.id, title: tag.label}));\n return [...(allButton ? [allButton] : []), ...(otherButtons ? otherButtons : [])];\n }, [allTag, tags]);\n\n const [selectedTag, setSelectedTag] = React.useState(\n tabButtons.length ? tabButtons[0].id : null,\n );\n\n const actualTag: string | null = React.useMemo(() => {\n return tabButtons.length && !tabButtons.find((tab) => tab.id === selectedTag)\n ? tabButtons[0].id\n : selectedTag;\n }, [tabButtons, selectedTag]);\n\n const cards = React.useMemo(() => {\n const itemsToShow: FilterItem[] = actualTag\n ? items.filter((item) => item.tags.includes(actualTag))\n : items;\n\n return itemsToShow.map((item) => item.card);\n }, [actualTag, items]);\n\n return (\n <AnimateBlock className={b()} animate={animated}>\n {title && (\n <Title\n className={b('title', {centered: centered})}\n title={title}\n subtitle={description}\n />\n )}\n {tabButtons.length && (\n <Row>\n <Col>\n <ButtonTabs\n className={b('tabs', {centered: centered})}\n items={tabButtons}\n activeTab={selectedTag}\n onSelectTab={setSelectedTag}\n tabSize={tagButtonSize}\n />\n </Col>\n </Row>\n )}\n <Row className={b('block-container')}>\n <CardLayoutBlock title=\"\" colSizes={colSizes} className={b('cards-container')}>\n {cards.map((card, index) => {\n const key = getBlockKey(card, index);\n\n return <ConstructorItem data={card} blockKey={key} key={key} />;\n })}\n </CardLayoutBlock>\n </Row>\n </AnimateBlock>\n );\n};\nexport default FilterBlock;\n"]}
1
+ {"version":3,"file":"FilterBlock.js","sourceRoot":"../../../../src","sources":["blocks/FilterBlock/FilterBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {CardLayoutBlock} from '..';\nimport {AnimateBlock, Title} from '../../components';\nimport ButtonTabs, {ButtonTabsItemProps} from '../../components/ButtonTabs/ButtonTabs';\nimport {ConstructorItem} from '../../containers/PageConstructor/components/ConstructorItem';\nimport {Col, Row} from '../../grid';\nimport {useAnalytics} from '../../hooks';\nimport {FilterBlockProps, FilterItem} from '../../models';\nimport {block, getBlockKey} from '../../utils';\n\nimport {i18n} from './i18n';\n\nimport './FilterBlock.scss';\n\nconst b = block('filter-block');\n\nconst FilterBlock = ({\n title,\n description,\n tags,\n tagButtonSize,\n allTag,\n items,\n colSizes,\n centered,\n animated,\n}: FilterBlockProps) => {\n const handleAnalytics = useAnalytics();\n const tabButtons = React.useMemo(() => {\n let allButton: ButtonTabsItemProps | undefined;\n if (allTag) {\n if (typeof allTag === 'boolean') {\n allButton = {\n id: null,\n title: i18n('label-all-tag'),\n };\n } else if (typeof allTag === 'string') {\n allButton = {\n id: null,\n title: allTag,\n };\n } else if (typeof allTag === 'object') {\n allButton = {\n id: null,\n title: allTag.label,\n analyticsEvent: allTag.analyticsEvent,\n };\n }\n }\n const otherButtons: ButtonTabsItemProps[] | undefined =\n tags &&\n tags.map((tag) => ({\n id: tag.id,\n title: tag.label,\n analyticsEvent: tag.analyticsEvent,\n }));\n return [...(allButton ? [allButton] : []), ...(otherButtons ? otherButtons : [])];\n }, [allTag, tags]);\n\n const [selectedTag, setSelectedTag] = React.useState(\n tabButtons.length ? tabButtons[0].id : null,\n );\n\n const actualTag: string | null = React.useMemo(() => {\n return tabButtons.length && !tabButtons.find((tab) => tab.id === selectedTag)\n ? tabButtons[0].id\n : selectedTag;\n }, [tabButtons, selectedTag]);\n\n const cards = React.useMemo(() => {\n const itemsToShow: FilterItem[] = actualTag\n ? items.filter((item) => item.tags.includes(actualTag))\n : items;\n\n return itemsToShow.map((item) => item.card);\n }, [actualTag, items]);\n\n const handleSelectTab = React.useCallback(\n (tabId: string | null) => {\n setSelectedTag(tabId);\n\n const tabButton = tabButtons.find((tab) => tab.id === tabId);\n if (tabButton?.analyticsEvent) {\n handleAnalytics(tabButton.analyticsEvent);\n }\n },\n [tabButtons, handleAnalytics],\n );\n\n return (\n <AnimateBlock className={b()} animate={animated}>\n {title && (\n <Title\n className={b('title', {centered: centered})}\n title={title}\n subtitle={description}\n />\n )}\n {tabButtons.length && (\n <Row>\n <Col>\n <ButtonTabs\n className={b('tabs', {centered: centered})}\n items={tabButtons}\n activeTab={selectedTag}\n onSelectTab={handleSelectTab}\n tabSize={tagButtonSize}\n />\n </Col>\n </Row>\n )}\n <Row className={b('block-container')}>\n <CardLayoutBlock title=\"\" colSizes={colSizes} className={b('cards-container')}>\n {cards.map((card, index) => {\n const key = getBlockKey(card, index);\n\n return <ConstructorItem data={card} blockKey={key} key={key} />;\n })}\n </CardLayoutBlock>\n </Row>\n </AnimateBlock>\n );\n};\nexport default FilterBlock;\n"]}