@doyourjob/gravity-ui-page-constructor 5.31.21 → 5.31.22

package/build/cjs/blocks/HighlightTable/HighlightTable.css

@@ -22,14 +22,6 @@ unpredictable css rules order in build */
     line-height: var(--g-text-display-1-line-height, var(--pc-text-display-1-line-height));
   }
 }
-.pc-highlight-table-block__content {
-  padding: 0 8px;
-}
-@media (max-width: 769px) {
-  .pc-highlight-table-block__content {
-    min-width: 1024px;
-  }
-}
 .pc-highlight-table-block__table {
   overflow: auto;
 }
@@ -44,6 +36,9 @@ unpredictable css rules order in build */
     display: none;
   }
 }
+.pc-highlight-table-block__content {
+  width: max-content;
+}
 .pc-highlight-table-block__head {
   color: rgba(0, 0, 0, 0.5);
 }
@@ -52,19 +47,19 @@ unpredictable css rules order in build */
 }
 .pc-highlight-table-block__head, .pc-highlight-table-block__body {
   border-radius: 10px;
-  padding: 0 20px;
-  margin: 0 -8px;
   overflow: hidden;
 }
-.pc-highlight-table-block__row.pc-highlight-table-block__row.pc-highlight-table-block__row.pc-highlight-table-block__row {
-  margin-left: -20px;
-  margin-right: -20px;
+.pc-highlight-table-block__row {
+  display: flex;
   padding: 12px;
 }
-
 .pc-highlight-table-block__row + .pc-highlight-table-block__row {
   border-top: 1px solid var(--g-color-private-black-100);
 }
+.pc-highlight-table-block__cell {
+  padding-right: 8px;
+  padding-left: 8px;
+}
 .pc-highlight-table-block__cell p {
   margin: 0;
 }

package/build/cjs/blocks/HighlightTable/HighlightTable.js

@@ -4,35 +4,42 @@ exports.HighlightTableBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const components_1 = require("../../components");
-const grid_1 = require("../../grid");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('highlight-table-block');
-function getColSize(value) {
-    switch (value) {
-        case 'xxl':
-            return 12;
-        case 'xl':
-            return 6;
-        case 'l':
-            return 4;
-        case 'm':
-            return 3;
-        case 's':
-            return 2;
-        case 'xs':
-            return 1;
-        default:
-            return undefined;
-    }
-}
 const HighlightTableBlock = (props) => {
     const { title, description, table } = props;
     const firstRow = table.content[0] || [];
     const otherRows = table.content.slice(1);
+    const customColumnWidth = table.customColumnWidth || [];
+    const maxContentColumns = Math.max(...table.content.map((row) => row.length));
+    const maxCustomColumn = customColumnWidth.reduce((val, value) => val + value, 0) || 0;
+    const maxColumns = maxContentColumns > maxCustomColumn
+        ? maxCustomColumn + (maxContentColumns - customColumnWidth.length) * 2
+        : maxCustomColumn;
+    const blockRef = (0, react_1.useRef)(null);
     const tableRef = (0, react_1.useRef)(null);
+    const tableContentRef = (0, react_1.useRef)(null);
     const scrollBarRef = (0, react_1.useRef)(null);
     const scrollThumbRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const blockElem = blockRef.current;
+        const tableContentElem = tableContentRef.current;
+        if (!tableContentElem || !blockElem)
+            return () => { };
+        const updateSizes = (0, debounce_1.default)(() => {
+            const width = Math.max(672, blockElem.clientWidth);
+            const tableWidth = (1 / (12 / maxColumns)) * width;
+            tableContentElem.style.setProperty('width', `${tableWidth}px`);
+            tableContentElem.style.setProperty('--block-width', `${width}px`);
+        });
+        updateSizes();
+        blockElem.addEventListener('resize', updateSizes);
+        return () => {
+            blockElem.removeEventListener('resize', updateSizes);
+        };
+    }, [maxColumns]);
     (0, react_1.useEffect)(() => {
         const tableElem = tableRef.current;
         const scrollBar = scrollBarRef.current;
@@ -45,7 +52,7 @@ const HighlightTableBlock = (props) => {
             scrollThumb.style.setProperty('transform', `translateX(${scrollLeft}px)`);
             scrollThumb.style.setProperty('width', `${scrollWidth}px`);
         };
-        updateProgress();
+        setTimeout(updateProgress, 0);
         tableElem.addEventListener('scroll', updateProgress);
         return () => {
             tableElem.removeEventListener('scroll', updateProgress);
@@ -53,18 +60,21 @@ const HighlightTableBlock = (props) => {
     }, []);
     const renderRow = (0, react_1.useCallback)((row, index) => {
         var _a, _b;
-        return (react_1.default.createElement(grid_1.Row, { key: index, className: b('row'), style: { backgroundColor: (_b = (_a = table.highlighter) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : '' } }, row.map((cell, cellIndex) => {
+        return (react_1.default.createElement("div", { key: index, className: b('row'), style: { backgroundColor: (_b = (_a = table.highlighter) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : '' } }, row.map((cell, cellIndex) => {
             var _a, _b, _c;
-            return (react_1.default.createElement(grid_1.Col, { sizes: getColSize((_a = table.customColumnWidth) === null || _a === void 0 ? void 0 : _a[cellIndex]), key: cellIndex, className: b('cell'), style: { textAlign: (_c = (_b = table.justify) === null || _b === void 0 ? void 0 : _b[cellIndex]) !== null && _c !== void 0 ? _c : 'left' } },
+            return (react_1.default.createElement("div", { key: cellIndex, className: b('cell'), style: {
+                    textAlign: (_b = (_a = table.justify) === null || _a === void 0 ? void 0 : _a[cellIndex]) !== null && _b !== void 0 ? _b : 'left',
+                    width: `calc(var(--block-width) * ${1 / (12 / (((_c = table.customColumnWidth) === null || _c === void 0 ? void 0 : _c[cellIndex]) || 2))})`,
+                } },
                 react_1.default.createElement(components_1.HTML, null, cell)));
         })));
     }, [table.customColumnWidth, table.highlighter, table.justify]);
-    return (react_1.default.createElement("div", { className: b() },
+    return (react_1.default.createElement("div", { ref: blockRef, className: b() },
         react_1.default.createElement(uikit_1.Text, { className: b('title'), variant: "header-2" }, title),
         description && (react_1.default.createElement("div", { className: b('description') },
             react_1.default.createElement(components_1.YFMWrapper, { content: description, modifiers: { constructor: true } }))),
         react_1.default.createElement("div", { ref: tableRef, className: b('table') },
-            react_1.default.createElement(grid_1.Grid, { className: b('content') },
+            react_1.default.createElement("div", { ref: tableContentRef, className: b('content') },
                 react_1.default.createElement("div", { className: b('head') }, renderRow(firstRow, 0)),
                 react_1.default.createElement("div", { className: b('body') }, otherRows.map(renderRow)))),
         react_1.default.createElement("div", { ref: scrollBarRef, className: b('scrollbar') },

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

@@ -39,7 +39,7 @@ export declare const HighlightTableBlock: {
                         type: string;
                         items: {
                             type: string;
-                            enum: string[];
+                            enum: number[];
                         };
                     };
                     type: {};

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

@@ -36,7 +36,7 @@ exports.HighlightTableBlock = {
                         type: 'array',
                         items: {
                             type: 'string',
-                            enum: ['xxl', 'xl', 'l', 'm', 's', 'xs'],
+                            enum: [12, 6, 4, 3, 2],
                         },
                     } }),
             } }),

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

@@ -267,7 +267,7 @@ export interface TableBlockProps {
 }
 export interface HighlightTableData {
     content: string[][];
-    customColumnWidth?: ('xxl' | 'xl' | 'l' | 'm' | 's' | 'xs')[];
+    customColumnWidth?: (12 | 6 | 4 | 3 | 2)[];
     justify?: ('left' | 'right' | 'center')[];
     highlighter?: string[];
 }

package/build/esm/blocks/HighlightTable/HighlightTable.css

@@ -22,14 +22,6 @@ unpredictable css rules order in build */
     line-height: var(--g-text-display-1-line-height, var(--pc-text-display-1-line-height));
   }
 }
-.pc-highlight-table-block__content {
-  padding: 0 8px;
-}
-@media (max-width: 769px) {
-  .pc-highlight-table-block__content {
-    min-width: 1024px;
-  }
-}
 .pc-highlight-table-block__table {
   overflow: auto;
 }
@@ -44,6 +36,9 @@ unpredictable css rules order in build */
     display: none;
   }
 }
+.pc-highlight-table-block__content {
+  width: max-content;
+}
 .pc-highlight-table-block__head {
   color: rgba(0, 0, 0, 0.5);
 }
@@ -52,19 +47,19 @@ unpredictable css rules order in build */
 }
 .pc-highlight-table-block__head, .pc-highlight-table-block__body {
   border-radius: 10px;
-  padding: 0 20px;
-  margin: 0 -8px;
   overflow: hidden;
 }
-.pc-highlight-table-block__row.pc-highlight-table-block__row.pc-highlight-table-block__row.pc-highlight-table-block__row {
-  margin-left: -20px;
-  margin-right: -20px;
+.pc-highlight-table-block__row {
+  display: flex;
   padding: 12px;
 }
-
 .pc-highlight-table-block__row + .pc-highlight-table-block__row {
   border-top: 1px solid var(--g-color-private-black-100);
 }
+.pc-highlight-table-block__cell {
+  padding-right: 8px;
+  padding-left: 8px;
+}
 .pc-highlight-table-block__cell p {
   margin: 0;
 }

package/build/esm/blocks/HighlightTable/HighlightTable.js

@@ -1,35 +1,42 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import { Text } from '@gravity-ui/uikit';
+import debounce from 'lodash/debounce';
 import { HTML, YFMWrapper } from '../../components';
-import { Col, Grid, Row } from '../../grid';
 import { block } from '../../utils';
 import './HighlightTable.css';
 const b = block('highlight-table-block');
-function getColSize(value) {
-    switch (value) {
-        case 'xxl':
-            return 12;
-        case 'xl':
-            return 6;
-        case 'l':
-            return 4;
-        case 'm':
-            return 3;
-        case 's':
-            return 2;
-        case 'xs':
-            return 1;
-        default:
-            return undefined;
-    }
-}
 export const HighlightTableBlock = (props) => {
     const { title, description, table } = props;
     const firstRow = table.content[0] || [];
     const otherRows = table.content.slice(1);
+    const customColumnWidth = table.customColumnWidth || [];
+    const maxContentColumns = Math.max(...table.content.map((row) => row.length));
+    const maxCustomColumn = customColumnWidth.reduce((val, value) => val + value, 0) || 0;
+    const maxColumns = maxContentColumns > maxCustomColumn
+        ? maxCustomColumn + (maxContentColumns - customColumnWidth.length) * 2
+        : maxCustomColumn;
+    const blockRef = useRef(null);
     const tableRef = useRef(null);
+    const tableContentRef = useRef(null);
     const scrollBarRef = useRef(null);
     const scrollThumbRef = useRef(null);
+    useEffect(() => {
+        const blockElem = blockRef.current;
+        const tableContentElem = tableContentRef.current;
+        if (!tableContentElem || !blockElem)
+            return () => { };
+        const updateSizes = debounce(() => {
+            const width = Math.max(672, blockElem.clientWidth);
+            const tableWidth = (1 / (12 / maxColumns)) * width;
+            tableContentElem.style.setProperty('width', `${tableWidth}px`);
+            tableContentElem.style.setProperty('--block-width', `${width}px`);
+        });
+        updateSizes();
+        blockElem.addEventListener('resize', updateSizes);
+        return () => {
+            blockElem.removeEventListener('resize', updateSizes);
+        };
+    }, [maxColumns]);
     useEffect(() => {
         const tableElem = tableRef.current;
         const scrollBar = scrollBarRef.current;
@@ -42,7 +49,7 @@ export const HighlightTableBlock = (props) => {
             scrollThumb.style.setProperty('transform', `translateX(${scrollLeft}px)`);
             scrollThumb.style.setProperty('width', `${scrollWidth}px`);
         };
-        updateProgress();
+        setTimeout(updateProgress, 0);
         tableElem.addEventListener('scroll', updateProgress);
         return () => {
             tableElem.removeEventListener('scroll', updateProgress);
@@ -50,18 +57,21 @@ export const HighlightTableBlock = (props) => {
     }, []);
     const renderRow = useCallback((row, index) => {
         var _a, _b;
-        return (React.createElement(Row, { key: index, className: b('row'), style: { backgroundColor: (_b = (_a = table.highlighter) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : '' } }, row.map((cell, cellIndex) => {
+        return (React.createElement("div", { key: index, className: b('row'), style: { backgroundColor: (_b = (_a = table.highlighter) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : '' } }, row.map((cell, cellIndex) => {
             var _a, _b, _c;
-            return (React.createElement(Col, { sizes: getColSize((_a = table.customColumnWidth) === null || _a === void 0 ? void 0 : _a[cellIndex]), key: cellIndex, className: b('cell'), style: { textAlign: (_c = (_b = table.justify) === null || _b === void 0 ? void 0 : _b[cellIndex]) !== null && _c !== void 0 ? _c : 'left' } },
+            return (React.createElement("div", { key: cellIndex, className: b('cell'), style: {
+                    textAlign: (_b = (_a = table.justify) === null || _a === void 0 ? void 0 : _a[cellIndex]) !== null && _b !== void 0 ? _b : 'left',
+                    width: `calc(var(--block-width) * ${1 / (12 / (((_c = table.customColumnWidth) === null || _c === void 0 ? void 0 : _c[cellIndex]) || 2))})`,
+                } },
                 React.createElement(HTML, null, cell)));
         })));
     }, [table.customColumnWidth, table.highlighter, table.justify]);
-    return (React.createElement("div", { className: b() },
+    return (React.createElement("div", { ref: blockRef, className: b() },
         React.createElement(Text, { className: b('title'), variant: "header-2" }, title),
         description && (React.createElement("div", { className: b('description') },
             React.createElement(YFMWrapper, { content: description, modifiers: { constructor: true } }))),
         React.createElement("div", { ref: tableRef, className: b('table') },
-            React.createElement(Grid, { className: b('content') },
+            React.createElement("div", { ref: tableContentRef, className: b('content') },
                 React.createElement("div", { className: b('head') }, renderRow(firstRow, 0)),
                 React.createElement("div", { className: b('body') }, otherRows.map(renderRow)))),
         React.createElement("div", { ref: scrollBarRef, className: b('scrollbar') },

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

@@ -39,7 +39,7 @@ export declare const HighlightTableBlock: {
                         type: string;
                         items: {
                             type: string;
-                            enum: string[];
+                            enum: number[];
                         };
                     };
                     type: {};

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

@@ -33,7 +33,7 @@ export const HighlightTableBlock = {
                         type: 'array',
                         items: {
                             type: 'string',
-                            enum: ['xxl', 'xl', 'l', 'm', 's', 'xs'],
+                            enum: [12, 6, 4, 3, 2],
                         },
                     } }),
             } }),

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

@@ -267,7 +267,7 @@ export interface TableBlockProps {
 }
 export interface HighlightTableData {
     content: string[][];
-    customColumnWidth?: ('xxl' | 'xl' | 'l' | 'm' | 's' | 'xs')[];
+    customColumnWidth?: (12 | 6 | 4 | 3 | 2)[];
     justify?: ('left' | 'right' | 'center')[];
     highlighter?: string[];
 }

package/package.json

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