@doyourjob/gravity-ui-page-constructor 5.31.64 → 5.31.66

package/build/cjs/blocks/Header/Header.css

@@ -93,6 +93,9 @@ unpredictable css rules order in build */
   --pc-text-header-color: var(--g-color-text-link-hover);
   color: var(--g-color-text-link-hover);
 }
+.pc-header-block__title_pre-wrap {
+  white-space: pre-wrap;
+}
 .pc-header-block__description {
   margin-top: 16px;
 }

package/build/cjs/blocks/Header/Header.js

@@ -17,6 +17,7 @@ const Breadcrumbs_1 = tslib_1.__importDefault(require("./Breadcrumbs/Breadcrumbs
 const HeaderStock_1 = tslib_1.__importDefault(require("./HeaderStock/HeaderStock"));
 const HeaderTag_1 = tslib_1.__importDefault(require("./HeaderTag/HeaderTag"));
 const HeaderTags_1 = tslib_1.__importDefault(require("./HeaderTags/HeaderTags"));
+const SwitchingTtitle_1 = tslib_1.__importDefault(require("./SwitchingTitle/SwitchingTtitle"));
 const utils_3 = require("./utils");
 const b = (0, utils_2.block)('header-block');
 const Background = ({ background, isMobile }) => {
@@ -28,7 +29,7 @@ const Background = ({ background, isMobile }) => {
 const FullWidthBackground = ({ background }) => (react_1.default.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
 // eslint-disable-next-line complexity
 const HeaderBlock = (props) => {
-    const { title, topTags, bottomTags, overtitle, description, buttons, stock, stockPrice, stockShares, image, video, width = 's', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, renderTitle, children, mediaView = 'full', } = props;
+    const { title, switchingTitle, topTags, bottomTags, overtitle, description, buttons, stock, stockPrice, stockShares, image, video, width = 's', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, renderTitle, children, mediaView = 'full', } = props;
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const { backButton, blockTag } = (0, react_1.useContext)(headerContext_1.HeaderContext);
     const theme = (0, theme_1.useTheme)();
@@ -68,10 +69,12 @@ const HeaderBlock = (props) => {
                                 react_1.default.createElement("div", null,
                                     overtitle && (react_1.default.createElement("div", { className: b('overtitle') },
                                         react_1.default.createElement(components_1.HTML, null, overtitle))),
-                                    react_1.default.createElement("h1", { className: b('title'), id: titleId },
+                                    react_1.default.createElement("h1", { className: b('title', {
+                                            'pre-wrap': Boolean(switchingTitle),
+                                        }), id: titleId },
                                         react_1.default.createElement(HeaderTag_1.default, { tag: blockTag }),
                                         status,
-                                        renderTitle ? (renderTitle(title)) : (react_1.default.createElement(components_1.HTML, null, title))),
+                                        switchingTitle ? (react_1.default.createElement(SwitchingTtitle_1.default, Object.assign({}, switchingTitle))) : (react_1.default.createElement(react_1.default.Fragment, null, renderTitle ? (renderTitle(title)) : (react_1.default.createElement(components_1.HTML, null, title))))),
                                     description && (react_1.default.createElement("div", { className: b('description', { theme: textTheme }) },
                                         react_1.default.createElement(YFMWrapper_1.default, { content: description, modifiers: {
                                                 constructor: true,

package/build/cjs/blocks/Header/SwitchingTitle/SwitchingTitle.css

@@ -0,0 +1,5 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-switching-title__title-part {
+  transition: opacity ease-in-out 0.2s;
+}

package/build/cjs/blocks/Header/SwitchingTitle/SwitchingTtitle.d.ts

@@ -0,0 +1,3 @@
+import { SwitchingTitleProps } from '../../../models';
+declare const SwitchingTitle: (props: SwitchingTitleProps) => JSX.Element;
+export default SwitchingTitle;

package/build/cjs/blocks/Header/SwitchingTitle/SwitchingTtitle.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../../utils");
+const utils_2 = require("../utils");
+const b = (0, utils_1.block)('switching-title');
+const SwitchingTitle = (props) => {
+    const { text, switchingTime } = props;
+    const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
+    const [opacity, setOpacity] = (0, react_1.useState)(1);
+    const texts = (0, react_1.useMemo)(() => (0, utils_2.partitionSwitchingTitleInput)(text), [text]);
+    const textSizesCommonMultiple = (0, react_1.useMemo)(() => texts.reduce((acc, curr) => acc * curr.length, 1), [texts]);
+    (0, react_1.useEffect)(() => {
+        const intervalHandle = setInterval(() => {
+            setOpacity(0);
+            setTimeout(() => {
+                setCurrentIndex((c) => (c + 1) % textSizesCommonMultiple);
+                setOpacity(1);
+            }, 200);
+        }, switchingTime);
+        return () => clearInterval(intervalHandle);
+    }, [texts, switchingTime, textSizesCommonMultiple]);
+    return (react_1.default.createElement("span", null, texts.map((lines, index) => (react_1.default.createElement("span", { className: b('title-part'), style: {
+            opacity: lines.length > 1 ? opacity : 1,
+        }, key: index }, lines[currentIndex % lines.length])))));
+};
+exports.default = SwitchingTitle;

package/build/cjs/blocks/Header/schema.d.ts

@@ -320,6 +320,15 @@ export declare const HeaderProperties: {
         type: string;
         contentType: string;
     };
+    switchingTitle: {
+        type: string;
+        additionalProperties: string;
+        required: string[];
+        properties: {
+            name: string;
+            type: string;
+        }[];
+    };
     overtitle: {
         type: string;
         contentType: string;
@@ -980,6 +989,15 @@ export declare const HeaderBlock: {
                 type: string;
                 contentType: string;
             };
+            switchingTitle: {
+                type: string;
+                additionalProperties: string;
+                required: string[];
+                properties: {
+                    name: string;
+                    type: string;
+                }[];
+            };
             overtitle: {
                 type: string;
                 contentType: string;

package/build/cjs/blocks/Header/schema.js

@@ -16,6 +16,21 @@ exports.HeaderProperties = {
         type: 'string',
         contentType: 'text',
     },
+    switchingTitle: {
+        type: 'object',
+        additionalProperties: 'false',
+        required: ['text'],
+        properties: [
+            {
+                name: 'text',
+                type: 'string',
+            },
+            {
+                name: 'switchingTime',
+                type: 'number',
+            },
+        ],
+    },
     overtitle: {
         type: 'string',
         contentType: 'text',

package/build/cjs/blocks/Header/utils.d.ts

@@ -18,3 +18,4 @@ export declare function getTitleSizes(width: HeaderWidth): {
     md?: undefined;
 };
 export declare function getImageSize(width: HeaderWidth): "s" | "m";
+export declare const partitionSwitchingTitleInput: (str: string) => string[][];

package/build/cjs/blocks/Header/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getImageSize = exports.getTitleSizes = exports.titleWithImageSizes = void 0;
+exports.partitionSwitchingTitleInput = exports.getImageSize = exports.getTitleSizes = exports.titleWithImageSizes = void 0;
 function titleWithImageSizes(imageSize) {
     switch (imageSize) {
         case 's':
@@ -49,3 +49,17 @@ function getImageSize(width) {
     }
 }
 exports.getImageSize = getImageSize;
+const partitionSwitchingTitleInput = (str) => {
+    if (str.length === 0)
+        return [['']];
+    const fixedRegExp = new RegExp('\\[.*', 's');
+    const fixedPart = str.replace(fixedRegExp, '');
+    if (fixedPart === str)
+        return [[fixedPart]];
+    const switchingPartRegExp = new RegExp('\\][^/].*', 's');
+    const switchingPart = str.slice(fixedPart.length + 1).replace(switchingPartRegExp, '');
+    const switchingPartArr = switchingPart.replace(/[[\]]/g, '').split('/');
+    const rest = str.slice(fixedPart.length + switchingPart.length + 2);
+    return [[fixedPart], switchingPartArr, ...(0, exports.partitionSwitchingTitleInput)(rest)].filter((arr) => arr.length !== 0 && (arr.length !== 1 || arr[0] !== ''));
+};
+exports.partitionSwitchingTitleInput = partitionSwitchingTitleInput;

package/build/cjs/blocks/HeaderSlider/schema.d.ts

@@ -14,6 +14,15 @@ export declare const HeaderSliderBlock: {
                             type: string;
                             contentType: string;
                         };
+                        switchingTitle: {
+                            type: string;
+                            additionalProperties: string;
+                            required: string[];
+                            properties: {
+                                name: string;
+                                type: string;
+                            }[];
+                        };
                         overtitle: {
                             type: string;
                             contentType: string;

package/build/cjs/blocks/Reports/Reports.js

@@ -21,13 +21,7 @@ const ReportsBlock = ({ title, typeKey, empty }) => {
     const filteredItems = (0, react_1.useMemo)(() => {
         const f = Object.entries(localFilters).filter(([_, value]) => value !== 'all');
         return f.length
-            ? items.filter((item) => f.reduce((acc, [key, value]) => {
-                var _a, _b;
-                if ((_b = (_a = item.filters) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.includes(value)) {
-                    return true;
-                }
-                return acc;
-            }, false))
+            ? items.filter((item) => f.every(([key, value]) => { var _a, _b; return (_b = (_a = item.filters) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.includes(value); }))
             : items;
     }, [items, localFilters]);
     const paginatedItems = (0, react_1.useMemo)(() => {

package/build/cjs/models/constructor-items/blocks.d.ts

@@ -158,8 +158,13 @@ export interface HeaderStockSharesProps {
     }[];
     description?: string;
 }
+export interface SwitchingTitleProps {
+    text: string;
+    switchingTime?: number;
+}
 export interface HeaderBlockProps {
     title: string;
+    switchingTitle?: SwitchingTitleProps;
     topTags?: HeaderTag[];
     bottomTags?: HeaderTag[];
     overtitle?: string;

package/build/esm/blocks/Header/Header.css

@@ -93,6 +93,9 @@ unpredictable css rules order in build */
   --pc-text-header-color: var(--g-color-text-link-hover);
   color: var(--g-color-text-link-hover);
 }
+.pc-header-block__title_pre-wrap {
+  white-space: pre-wrap;
+}
 .pc-header-block__description {
   margin-top: 16px;
 }

package/build/esm/blocks/Header/Header.js

@@ -13,6 +13,7 @@ import Breadcrumbs from './Breadcrumbs/Breadcrumbs';
 import HeaderStock from './HeaderStock/HeaderStock';
 import HeaderTag from './HeaderTag/HeaderTag';
 import HeaderTags from './HeaderTags/HeaderTags';
+import SwitchingTitle from './SwitchingTitle/SwitchingTtitle';
 import { getImageSize, getTitleSizes, titleWithImageSizes } from './utils';
 import './Header.css';
 const b = block('header-block');
@@ -25,7 +26,7 @@ const Background = ({ background, isMobile }) => {
 const FullWidthBackground = ({ background }) => (React.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
 // eslint-disable-next-line complexity
 export const HeaderBlock = (props) => {
-    const { title, topTags, bottomTags, overtitle, description, buttons, stock, stockPrice, stockShares, image, video, width = 's', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, renderTitle, children, mediaView = 'full', } = props;
+    const { title, switchingTitle, topTags, bottomTags, overtitle, description, buttons, stock, stockPrice, stockShares, image, video, width = 's', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, renderTitle, children, mediaView = 'full', } = props;
     const isMobile = useContext(MobileContext);
     const { backButton, blockTag } = useContext(HeaderContext);
     const theme = useTheme();
@@ -65,10 +66,12 @@ export const HeaderBlock = (props) => {
                                 React.createElement("div", null,
                                     overtitle && (React.createElement("div", { className: b('overtitle') },
                                         React.createElement(HTML, null, overtitle))),
-                                    React.createElement("h1", { className: b('title'), id: titleId },
+                                    React.createElement("h1", { className: b('title', {
+                                            'pre-wrap': Boolean(switchingTitle),
+                                        }), id: titleId },
                                         React.createElement(HeaderTag, { tag: blockTag }),
                                         status,
-                                        renderTitle ? (renderTitle(title)) : (React.createElement(HTML, null, title))),
+                                        switchingTitle ? (React.createElement(SwitchingTitle, Object.assign({}, switchingTitle))) : (React.createElement(React.Fragment, null, renderTitle ? (renderTitle(title)) : (React.createElement(HTML, null, title))))),
                                     description && (React.createElement("div", { className: b('description', { theme: textTheme }) },
                                         React.createElement(YFMWrapper, { content: description, modifiers: {
                                                 constructor: true,

package/build/esm/blocks/Header/SwitchingTitle/SwitchingTitle.css

@@ -0,0 +1,5 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-switching-title__title-part {
+  transition: opacity ease-in-out 0.2s;
+}

package/build/esm/blocks/Header/SwitchingTitle/SwitchingTtitle.d.ts

@@ -0,0 +1,4 @@
+import { SwitchingTitleProps } from '../../../models';
+import './SwitchingTitle.css';
+declare const SwitchingTitle: (props: SwitchingTitleProps) => JSX.Element;
+export default SwitchingTitle;

package/build/esm/blocks/Header/SwitchingTitle/SwitchingTtitle.js

@@ -0,0 +1,26 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { block } from '../../../utils';
+import { partitionSwitchingTitleInput } from '../utils';
+import './SwitchingTitle.css';
+const b = block('switching-title');
+const SwitchingTitle = (props) => {
+    const { text, switchingTime } = props;
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [opacity, setOpacity] = useState(1);
+    const texts = useMemo(() => partitionSwitchingTitleInput(text), [text]);
+    const textSizesCommonMultiple = useMemo(() => texts.reduce((acc, curr) => acc * curr.length, 1), [texts]);
+    useEffect(() => {
+        const intervalHandle = setInterval(() => {
+            setOpacity(0);
+            setTimeout(() => {
+                setCurrentIndex((c) => (c + 1) % textSizesCommonMultiple);
+                setOpacity(1);
+            }, 200);
+        }, switchingTime);
+        return () => clearInterval(intervalHandle);
+    }, [texts, switchingTime, textSizesCommonMultiple]);
+    return (React.createElement("span", null, texts.map((lines, index) => (React.createElement("span", { className: b('title-part'), style: {
+            opacity: lines.length > 1 ? opacity : 1,
+        }, key: index }, lines[currentIndex % lines.length])))));
+};
+export default SwitchingTitle;

package/build/esm/blocks/Header/schema.d.ts

@@ -320,6 +320,15 @@ export declare const HeaderProperties: {
         type: string;
         contentType: string;
     };
+    switchingTitle: {
+        type: string;
+        additionalProperties: string;
+        required: string[];
+        properties: {
+            name: string;
+            type: string;
+        }[];
+    };
     overtitle: {
         type: string;
         contentType: string;
@@ -980,6 +989,15 @@ export declare const HeaderBlock: {
                 type: string;
                 contentType: string;
             };
+            switchingTitle: {
+                type: string;
+                additionalProperties: string;
+                required: string[];
+                properties: {
+                    name: string;
+                    type: string;
+                }[];
+            };
             overtitle: {
                 type: string;
                 contentType: string;

package/build/esm/blocks/Header/schema.js

@@ -13,6 +13,21 @@ export const HeaderProperties = {
         type: 'string',
         contentType: 'text',
     },
+    switchingTitle: {
+        type: 'object',
+        additionalProperties: 'false',
+        required: ['text'],
+        properties: [
+            {
+                name: 'text',
+                type: 'string',
+            },
+            {
+                name: 'switchingTime',
+                type: 'number',
+            },
+        ],
+    },
     overtitle: {
         type: 'string',
         contentType: 'text',

package/build/esm/blocks/Header/utils.d.ts

@@ -18,3 +18,4 @@ export declare function getTitleSizes(width: HeaderWidth): {
     md?: undefined;
 };
 export declare function getImageSize(width: HeaderWidth): "s" | "m";
+export declare const partitionSwitchingTitleInput: (str: string) => string[][];

package/build/esm/blocks/Header/utils.js

@@ -43,3 +43,16 @@ export function getImageSize(width) {
             return 'm';
     }
 }
+export const partitionSwitchingTitleInput = (str) => {
+    if (str.length === 0)
+        return [['']];
+    const fixedRegExp = new RegExp('\\[.*', 's');
+    const fixedPart = str.replace(fixedRegExp, '');
+    if (fixedPart === str)
+        return [[fixedPart]];
+    const switchingPartRegExp = new RegExp('\\][^/].*', 's');
+    const switchingPart = str.slice(fixedPart.length + 1).replace(switchingPartRegExp, '');
+    const switchingPartArr = switchingPart.replace(/[[\]]/g, '').split('/');
+    const rest = str.slice(fixedPart.length + switchingPart.length + 2);
+    return [[fixedPart], switchingPartArr, ...partitionSwitchingTitleInput(rest)].filter((arr) => arr.length !== 0 && (arr.length !== 1 || arr[0] !== ''));
+};

package/build/esm/blocks/HeaderSlider/schema.d.ts

@@ -14,6 +14,15 @@ export declare const HeaderSliderBlock: {
                             type: string;
                             contentType: string;
                         };
+                        switchingTitle: {
+                            type: string;
+                            additionalProperties: string;
+                            required: string[];
+                            properties: {
+                                name: string;
+                                type: string;
+                            }[];
+                        };
                         overtitle: {
                             type: string;
                             contentType: string;

package/build/esm/blocks/Reports/Reports.js

@@ -18,13 +18,7 @@ export const ReportsBlock = ({ title, typeKey, empty }) => {
     const filteredItems = useMemo(() => {
         const f = Object.entries(localFilters).filter(([_, value]) => value !== 'all');
         return f.length
-            ? items.filter((item) => f.reduce((acc, [key, value]) => {
-                var _a, _b;
-                if ((_b = (_a = item.filters) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.includes(value)) {
-                    return true;
-                }
-                return acc;
-            }, false))
+            ? items.filter((item) => f.every(([key, value]) => { var _a, _b; return (_b = (_a = item.filters) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.includes(value); }))
             : items;
     }, [items, localFilters]);
     const paginatedItems = useMemo(() => {

package/build/esm/models/constructor-items/blocks.d.ts

@@ -158,8 +158,13 @@ export interface HeaderStockSharesProps {
     }[];
     description?: string;
 }
+export interface SwitchingTitleProps {
+    text: string;
+    switchingTime?: number;
+}
 export interface HeaderBlockProps {
     title: string;
+    switchingTitle?: SwitchingTitleProps;
     topTags?: HeaderTag[];
     bottomTags?: HeaderTag[];
     overtitle?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doyourjob/gravity-ui-page-constructor",
-  "version": "5.31.64",
+  "version": "5.31.66",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {