@redneckz/wildless-cms-uni-blocks 0.3.9 → 0.3.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle/blocks.schema.json +1 -1
- package/dist/components/ComparisonTable/ComparisonTable.mobile.d.ts +5 -0
- package/dist/components/ComparisonTable/ComparisonTable.mobile.js +46 -0
- package/dist/components/ComparisonTable/ComparisonTable.mobile.js.map +1 -0
- package/dist/components/ComparisonTable/ComparisonTableContent.d.ts +4 -0
- package/dist/components/ComparisonTable/HeaderCell.mobile.d.ts +12 -0
- package/dist/components/ComparisonTable/HeaderCell.mobile.js +9 -0
- package/dist/components/ComparisonTable/HeaderCell.mobile.js.map +1 -0
- package/dist/components/ComparisonTable/TableCell.d.ts +3 -2
- package/dist/components/ComparisonTable/TableCell.js.map +1 -1
- package/dist/components/ComparisonTable/TableCell.mobile.d.ts +9 -0
- package/dist/components/ComparisonTable/TableCell.mobile.js +12 -0
- package/dist/components/ComparisonTable/TableCell.mobile.js.map +1 -0
- package/dist/components/ComparisonTable/TableColumn.d.ts +10 -0
- package/dist/components/ComparisonTable/TableColumn.js +19 -0
- package/dist/components/ComparisonTable/TableColumn.js.map +1 -0
- package/dist/components/Gallery/Gallery.mobile.js +2 -2
- package/dist/components/Gallery/Gallery.mobile.js.map +1 -1
- package/dist/ui-kit/SwipeListControl/SwipeListControl.js +11 -6
- package/dist/ui-kit/SwipeListControl/SwipeListControl.js.map +1 -1
- package/dist/ui-kit/SwipeListControl/SwipeListControlProps.d.ts +1 -0
- package/lib/common.css +1 -1
- package/lib/components/ComparisonTable/ComparisonTable.fixture.mobile.d.ts +5 -0
- package/lib/components/ComparisonTable/ComparisonTable.mobile.d.ts +5 -0
- package/lib/components/ComparisonTable/ComparisonTable.mobile.js +44 -0
- package/lib/components/ComparisonTable/ComparisonTable.mobile.js.map +1 -0
- package/lib/components/ComparisonTable/ComparisonTableContent.d.ts +4 -0
- package/lib/components/ComparisonTable/HeaderCell.mobile.d.ts +12 -0
- package/lib/components/ComparisonTable/HeaderCell.mobile.js +7 -0
- package/lib/components/ComparisonTable/HeaderCell.mobile.js.map +1 -0
- package/lib/components/ComparisonTable/TableCell.d.ts +3 -2
- package/lib/components/ComparisonTable/TableCell.js.map +1 -1
- package/lib/components/ComparisonTable/TableCell.mobile.d.ts +9 -0
- package/lib/components/ComparisonTable/TableCell.mobile.js +10 -0
- package/lib/components/ComparisonTable/TableCell.mobile.js.map +1 -0
- package/lib/components/ComparisonTable/TableColumn.d.ts +10 -0
- package/lib/components/ComparisonTable/TableColumn.js +17 -0
- package/lib/components/ComparisonTable/TableColumn.js.map +1 -0
- package/lib/components/Gallery/Gallery.mobile.js +2 -2
- package/lib/components/Gallery/Gallery.mobile.js.map +1 -1
- package/lib/ui-kit/SwipeListControl/SwipeListControl.js +12 -7
- package/lib/ui-kit/SwipeListControl/SwipeListControl.js.map +1 -1
- package/lib/ui-kit/SwipeListControl/SwipeListControlProps.d.ts +1 -0
- package/mobile/bundle/bundle.umd.js +65 -60
- package/mobile/bundle/bundle.umd.min.js +1 -1
- package/mobile/dist/components/ComparisonTable/ComparisonTable.js +38 -28
- package/mobile/dist/components/ComparisonTable/ComparisonTable.js.map +1 -1
- package/mobile/dist/components/ComparisonTable/ComparisonTableContent.d.ts +4 -0
- package/mobile/dist/components/ComparisonTable/HeaderCell.d.ts +2 -0
- package/mobile/dist/components/ComparisonTable/HeaderCell.js +1 -3
- package/mobile/dist/components/ComparisonTable/HeaderCell.js.map +1 -1
- package/mobile/dist/components/ComparisonTable/TableCell.d.ts +4 -3
- package/mobile/dist/components/ComparisonTable/TableCell.js +5 -5
- package/mobile/dist/components/ComparisonTable/TableCell.js.map +1 -1
- package/mobile/dist/components/ComparisonTable/TableColumn.d.ts +10 -0
- package/mobile/dist/components/ComparisonTable/TableColumn.js +19 -0
- package/mobile/dist/components/ComparisonTable/TableColumn.js.map +1 -0
- package/mobile/dist/components/Gallery/Gallery.js +2 -2
- package/mobile/dist/components/Gallery/Gallery.js.map +1 -1
- package/mobile/dist/ui-kit/SwipeListControl/SwipeListControl.js +11 -6
- package/mobile/dist/ui-kit/SwipeListControl/SwipeListControl.js.map +1 -1
- package/mobile/dist/ui-kit/SwipeListControl/SwipeListControlProps.d.ts +1 -0
- package/mobile/lib/components/ComparisonTable/ComparisonTable.js +38 -28
- package/mobile/lib/components/ComparisonTable/ComparisonTable.js.map +1 -1
- package/mobile/lib/components/ComparisonTable/ComparisonTableContent.d.ts +4 -0
- package/mobile/lib/components/ComparisonTable/HeaderCell.d.ts +2 -0
- package/mobile/lib/components/ComparisonTable/HeaderCell.js +1 -3
- package/mobile/lib/components/ComparisonTable/HeaderCell.js.map +1 -1
- package/mobile/lib/components/ComparisonTable/TableCell.d.ts +4 -3
- package/mobile/lib/components/ComparisonTable/TableCell.js +6 -6
- package/mobile/lib/components/ComparisonTable/TableCell.js.map +1 -1
- package/mobile/lib/components/ComparisonTable/TableColumn.d.ts +10 -0
- package/mobile/lib/components/ComparisonTable/TableColumn.js +17 -0
- package/mobile/lib/components/ComparisonTable/TableColumn.js.map +1 -0
- package/mobile/lib/components/Gallery/Gallery.js +2 -2
- package/mobile/lib/components/Gallery/Gallery.js.map +1 -1
- package/mobile/lib/ui-kit/SwipeListControl/SwipeListControl.js +12 -7
- package/mobile/lib/ui-kit/SwipeListControl/SwipeListControl.js.map +1 -1
- package/mobile/lib/ui-kit/SwipeListControl/SwipeListControlProps.d.ts +1 -0
- package/mobile/src/common.css +0 -2
- package/mobile/src/components/ComparisonTable/ComparisonTable.tsx +90 -102
- package/mobile/src/components/ComparisonTable/ComparisonTableContent.ts +4 -0
- package/mobile/src/components/ComparisonTable/HeaderCell.tsx +34 -30
- package/mobile/src/components/ComparisonTable/TableCell.tsx +30 -27
- package/mobile/src/components/ComparisonTable/TableColumn.tsx +66 -0
- package/mobile/src/components/Gallery/Gallery.tsx +2 -2
- package/mobile/src/ui-kit/SwipeListControl/SwipeListControl.tsx +27 -19
- package/mobile/src/ui-kit/SwipeListControl/SwipeListControlProps.ts +1 -0
- package/package.json +1 -1
- package/src/common.css +0 -2
- package/src/components/ComparisonTable/ComparisonTable.fixture.mobile.tsx +152 -0
- package/src/components/ComparisonTable/ComparisonTable.mobile.tsx +121 -0
- package/src/components/ComparisonTable/ComparisonTableContent.ts +4 -0
- package/src/components/ComparisonTable/HeaderCell.mobile.tsx +50 -0
- package/src/components/ComparisonTable/TableCell.mobile.tsx +46 -0
- package/src/components/ComparisonTable/TableCell.tsx +3 -2
- package/src/components/ComparisonTable/TableColumn.tsx +66 -0
- package/src/components/Gallery/Gallery.mobile.tsx +2 -2
- package/src/ui-kit/Button/Button.fixture.tsx +2 -6
- package/src/ui-kit/SwipeListControl/SwipeListControl.tsx +27 -19
- package/src/ui-kit/SwipeListControl/SwipeListControlProps.ts +1 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SwipeListControl.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListControl.tsx"],"names":[],"mappings":";;;AAAA,+CAAwC;
|
|
1
|
+
{"version":3,"file":"SwipeListControl.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListControl.tsx"],"names":[],"mappings":";;;AAAA,+CAAwC;AACxC,2CAA2D;AAC3D,iEAA8D;AAC9D,iEAA8D;AAE9D,yDAAsD;AACtD,6DAA0D;AAE7C,QAAA,gBAAgB,GAAG,IAAA,aAAG,EACjC,CAAC,EACC,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,GAAG,uBAAW,EACjB,OAAO,GAAG,2BAAe,EACzB,QAAQ,GAAG,IAAI,EACf,aAAa,GACd,EAAE,EAAE;IACH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,OAAO,CAAC,QAAQ,CAAS,CAAC,CAAC,CAAC;IAClE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,OAAO,CAAC,QAAQ,CAAS,CAAC,CAAC,CAAC;IAEtE,MAAM,YAAY,GAAG,CAAC,CAAU,EAAE,EAAE;QAClC,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,WAAW,EAAE,QAAQ,EAAE,GACzE,CAAC,CAAC,aAA4B,CAAC;QAEjC,+EAA+E;QAC/E,gGAAgG;QAChG,MAAM,SAAS,GAAI,QAAQ,CAAC,CAAC,CAAiB,CAAC,WAAW,GAAG,OAAO,GAAG,CAAC,CAAC;QACzE,MAAM,YAAY,GAAG,IAAA,iCAAe,EAAC;YACnC,GAAG;YACH,OAAO;YACP,WAAW;YACX,WAAW;YACX,iBAAiB;YACjB,SAAS;SACV,CAAC,CAAC;QAEH,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAA,6BAAa,EAAC,UAAU,EAAE,YAAY,CAAC,CAAC;QACpE,IAAI,KAAK,KAAK,WAAW,IAAI,aAAa,EAAE;YAC1C,aAAa,EAAE,CAAC;SACjB;QACD,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAE,SAAS,aACtB,eAAe,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC,EACtE,mBAAmB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,IACpE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACjF,uBAAC,2CAAoB,IACnB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,YAAY,YAErB,QAAQ,GACY,CACxB,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAClF,uBAAC,2CAAoB,IAAC,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,YAC7F,QAAQ,GACY,CACxB,CAAC"}
|
|
@@ -1,34 +1,44 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
|
|
2
2
|
import { JSX } from '@redneckz/uni-jsx';
|
|
3
|
-
import { useComparisonTableScroll } from '../../hooks/useComparisonTableScroll.js';
|
|
4
|
-
import { useLink } from '../../hooks/useLink.js';
|
|
5
|
-
import { ArrowButton } from '../../ui-kit/Button/ArrowButton.js';
|
|
6
3
|
import { Heading } from '../../ui-kit/Heading/Heading.js';
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
import { TableRowContainer } from './TableRowContainer.js';
|
|
12
|
-
export const ComparisonTable = JSX(({ className, context, title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, }) => {
|
|
13
|
-
const router = context.useRouter();
|
|
14
|
-
const { handlerDecorator } = context;
|
|
15
|
-
const [activeCardIndex, setActiveCardIndex] = context.useState(0);
|
|
16
|
-
const [isShowAllRow, setIsShowAllRow] = context.useState(!visibleRowLength);
|
|
17
|
-
const colHeaders = columns?.map(({ header }) => header || {});
|
|
18
|
-
const colData = columns?.map(({ data }) => data) || [];
|
|
19
|
-
const rowData = rowHeaders
|
|
20
|
-
?.map((header, i) => ({
|
|
4
|
+
import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl.js';
|
|
5
|
+
import { TableColumn } from './TableColumn.js';
|
|
6
|
+
export const ComparisonTable = JSX(({ className, context, title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, useSwiper = false, }) => {
|
|
7
|
+
const tableData = columns?.map(({ data, header }) => ({
|
|
21
8
|
header,
|
|
22
|
-
|
|
23
|
-
}))
|
|
24
|
-
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
9
|
+
column: data?.map((cell, i) => ({ cell, rowHeader: rowHeaders?.[i]?.title })),
|
|
10
|
+
})) || [];
|
|
11
|
+
const [columnsViewState, setColumnsViewState] = context.useState(new Array(columns?.length).fill(!visibleRowLength));
|
|
12
|
+
const handleToggleColumn = (i) => {
|
|
13
|
+
columnsViewState[i] = !columnsViewState[i];
|
|
14
|
+
setColumnsViewState([...columnsViewState]);
|
|
15
|
+
};
|
|
16
|
+
return (_jsxs("section", { className: `bg-white font-sans px-4 py-6 overflow-hidden text-primary-text relative ${className || ''}`, children: [title && (_jsx(Heading, { headingType: "h3", className: "font-medium text-center m-0 mb-5", title: title })), renderColumns({
|
|
17
|
+
tableData,
|
|
18
|
+
context,
|
|
19
|
+
visibleRowLength,
|
|
20
|
+
isColoredFirstColumn,
|
|
21
|
+
columnsViewState,
|
|
22
|
+
handleToggleColumn,
|
|
23
|
+
useSwiper,
|
|
24
|
+
setColumnsViewState,
|
|
25
|
+
})] }));
|
|
33
26
|
});
|
|
27
|
+
const renderColumns = ({ context, tableData, visibleRowLength, isColoredFirstColumn, columnsViewState, handleToggleColumn, useSwiper, setColumnsViewState, }) => (_jsx("div", { role: "table", children: tableData?.length ? (useSwiper ? (_jsx(SwipeListControl, { context: context, onSlideChange: onSlideChange(columnsViewState, setColumnsViewState), children: tableData.map(renderColumn({
|
|
28
|
+
context,
|
|
29
|
+
visibleRowLength,
|
|
30
|
+
isColoredFirstColumn,
|
|
31
|
+
columnsViewState,
|
|
32
|
+
handleToggleColumn,
|
|
33
|
+
})) })) : (tableData.map(renderColumn({
|
|
34
|
+
context,
|
|
35
|
+
visibleRowLength,
|
|
36
|
+
isColoredFirstColumn,
|
|
37
|
+
columnsViewState,
|
|
38
|
+
handleToggleColumn,
|
|
39
|
+
})))) : null }));
|
|
40
|
+
const renderColumn = ({ context, visibleRowLength, isColoredFirstColumn, columnsViewState, handleToggleColumn }) => (columnData, i) => (_jsx(TableColumn, { context: context, visibleRowLength: visibleRowLength, showRow: columnsViewState[i], header: columnData.header, columnData: columnData.column, isFillGradient: i === 0 && isColoredFirstColumn, onToggleColumn: () => handleToggleColumn(i) }, String(i)));
|
|
41
|
+
const onSlideChange = (columnsViewState, setColumnsViewState) => () => {
|
|
42
|
+
setColumnsViewState(new Array(columnsViewState.length).fill(false));
|
|
43
|
+
};
|
|
34
44
|
//# sourceMappingURL=ComparisonTable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComparisonTable.js","sourceRoot":"","sources":["../../../src/components/ComparisonTable/ComparisonTable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"ComparisonTable.js","sourceRoot":"","sources":["../../../src/components/ComparisonTable/ComparisonTable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -23,6 +23,8 @@ export interface CellData {
|
|
|
23
23
|
export interface ColumnHeader {
|
|
24
24
|
/** @title Заголовок */
|
|
25
25
|
title?: string;
|
|
26
|
+
/** @title Подзаголовок */
|
|
27
|
+
subtitle?: string;
|
|
26
28
|
icon?: IconName;
|
|
27
29
|
image?: Picture;
|
|
28
30
|
link?: LinkProps;
|
|
@@ -56,4 +58,6 @@ export interface ComparisonTableContent {
|
|
|
56
58
|
isColoredFirstColumn?: boolean;
|
|
57
59
|
/** @title Отображать заданное количество строк */
|
|
58
60
|
visibleRowLength?: number;
|
|
61
|
+
/** @title Использовать свайпер- */
|
|
62
|
+
useSwiper?: boolean;
|
|
59
63
|
}
|
|
@@ -5,6 +5,8 @@ export interface HeaderCellProps {
|
|
|
5
5
|
icon?: IconName;
|
|
6
6
|
image?: Picture;
|
|
7
7
|
title?: string;
|
|
8
|
+
subtitle?: string;
|
|
9
|
+
isFillGradient?: boolean;
|
|
8
10
|
link?: LinkProps;
|
|
9
11
|
}
|
|
10
12
|
export declare const HeaderCell: (props: import("@redneckz/uni-jsx").PropsWithChildren<HeaderCellProps, any>, context?: any) => any;
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
|
|
2
2
|
import { JSX } from '@redneckz/uni-jsx';
|
|
3
|
-
import { Button } from '../../ui-kit/Button/Button.js';
|
|
4
3
|
import { Heading } from '../../ui-kit/Heading/Heading.js';
|
|
5
4
|
import { Icon } from '../../ui-kit/Icon/Icon.js';
|
|
6
5
|
import { Img } from '../../ui-kit/Img/Img.js';
|
|
7
|
-
|
|
8
|
-
export const HeaderCell = JSX(({ icon, image, title, link }) => (_jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES} ${GRADIENT}`, role: "columnheader", scope: "col", children: [icon && !image?.src && (_jsx(Icon, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", name: icon, width: "63", height: "63" })), image?.src && _jsx(Img, { className: "mb-[18px]", image: image }), title && _jsx(Heading, { headingType: "h4", className: "text-center text-white", title: title }), link?.text && (_jsx("div", { className: "mt-auto w-full", children: _jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: _jsx("div", { className: "font-medium text-xs py-[11px]", children: link.text }) }) }))] })));
|
|
6
|
+
export const HeaderCell = JSX(({ icon, image, title, subtitle, isFillGradient }) => (_jsxs("div", { role: "columnheader", scope: "col", children: [icon && (_jsx(Icon, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", name: icon, width: "63", height: "63" })), image?.src && (_jsx("div", { className: "mb-3.5", children: _jsx(Img, { image: image }) })), title && (_jsx(Heading, { headingType: "h4", className: `${isFillGradient ? 'text-white' : ''}`, title: title })), subtitle && (_jsx("div", { className: `text-m-sm mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`, children: subtitle }))] })));
|
|
9
7
|
//# sourceMappingURL=HeaderCell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderCell.js","sourceRoot":"","sources":["../../../src/components/ComparisonTable/HeaderCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"HeaderCell.js","sourceRoot":"","sources":["../../../src/components/ComparisonTable/HeaderCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAW3C,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAC3B,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CACpD,eAAK,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,KAAK,aACjC,IAAI,IAAI,CACP,KAAC,IAAI,IACH,SAAS,EAAC,kDAAkD,EAC5D,IAAI,EAAE,IAAI,EACV,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,GACX,CACH,EACA,KAAK,EAAE,GAAG,IAAI,CACb,cAAK,SAAS,EAAC,QAAQ,YACrB,KAAC,GAAG,IAAC,KAAK,EAAE,KAAK,GAAI,GACjB,CACP,EACA,KAAK,IAAI,CACR,KAAC,OAAO,IACN,WAAW,EAAC,IAAI,EAChB,SAAS,EAAE,GAAG,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,EAClD,KAAK,EAAE,KAAK,GACZ,CACH,EACA,QAAQ,IAAI,CACX,cACE,SAAS,EAAE,oBAAoB,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,wBAAwB,EAAE,YAExF,QAAQ,GACL,CACP,IACG,CACP,CACF,CAAC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import type { CellData } from './ComparisonTableContent';
|
|
2
2
|
export interface TableCellProps {
|
|
3
3
|
cell: CellData[];
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
rowHeader?: string;
|
|
5
|
+
isLastRow?: boolean;
|
|
6
|
+
isFirstRow?: boolean;
|
|
7
|
+
isFillGradient?: boolean;
|
|
7
8
|
}
|
|
8
9
|
export declare const TableCell: (props: import("@redneckz/uni-jsx").PropsWithChildren<TableCellProps, any>, context?: any) => any;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
|
|
2
2
|
import { JSX } from '@redneckz/uni-jsx';
|
|
3
|
-
import {
|
|
4
|
-
export const TableCell = JSX(({ cell,
|
|
5
|
-
const cellWrapperClasses = `
|
|
6
|
-
const cellClasses = `
|
|
7
|
-
return (_jsx("div", { className: cellWrapperClasses, role: "cell", children: _jsx("div", { className: cellClasses, children: cell.map(
|
|
3
|
+
import { DIVIDER_CLASSES } from './constants.js';
|
|
4
|
+
export const TableCell = JSX(({ cell, rowHeader, isFillGradient = false }) => {
|
|
5
|
+
const cellWrapperClasses = `box-border flex flex-col`;
|
|
6
|
+
const cellClasses = `h-full ${DIVIDER_CLASSES}`;
|
|
7
|
+
return (_jsx("div", { className: cellWrapperClasses, role: "cell", children: _jsx("div", { className: cellClasses, children: cell.map(renderCellInner(isFillGradient, rowHeader)) }) }));
|
|
8
8
|
});
|
|
9
|
-
const renderCellInner = ({ label, description }, i
|
|
9
|
+
const renderCellInner = (isFillGradient, rowHeader) => ({ label, description }, i) => (_jsxs("div", { className: "flex justify-between text-m-sm py-3.5", children: [_jsx("div", { className: `${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`, children: rowHeader }), _jsxs("div", { className: "basis-1/2", children: [label && (_jsx("div", { className: `text-right ${isFillGradient ? 'text-white' : ''}`, children: label })), description && (_jsx("div", { className: `text-right ${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`, children: description }))] })] }, String(i)));
|
|
10
10
|
//# sourceMappingURL=TableCell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.js","sourceRoot":"","sources":["../../../src/components/ComparisonTable/TableCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"TableCell.js","sourceRoot":"","sources":["../../../src/components/ComparisonTable/TableCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAU9C,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAiB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,GAAG,KAAK,EAAE,EAAE,EAAE;IAC3F,MAAM,kBAAkB,GAAG,0BAA0B,CAAC;IAEtD,MAAM,WAAW,GAAG,UAAU,eAAe,EAAE,CAAC;IAEhD,OAAO,CACL,cAAK,SAAS,EAAE,kBAAkB,EAAE,IAAI,EAAC,MAAM,YAC7C,cAAK,SAAS,EAAE,WAAW,YAAG,IAAI,CAAC,GAAG,CAAC,eAAe,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC,GAAO,GACrF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,eAAe,GACnB,CAAC,cAAuB,EAAE,SAAkB,EAAE,EAAE,CAChD,CAAC,EAAE,KAAK,EAAE,WAAW,EAAY,EAAE,CAAS,EAAE,EAAE,CAC9C,CACE,eAAqB,SAAS,EAAC,uCAAuC,aACpE,cAAK,SAAS,EAAE,GAAG,cAAc,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,qBAAqB,EAAE,YAC1E,SAAS,GACN,EACN,eAAK,SAAS,EAAC,WAAW,aACvB,KAAK,IAAI,CACR,cAAK,SAAS,EAAE,cAAc,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,YAAG,KAAK,GAAO,CAClF,EACA,WAAW,IAAI,CACd,cACE,SAAS,EAAE,cAAc,cAAc,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,qBAAqB,EAAE,YAElF,WAAW,GACR,CACP,IACG,KAfE,MAAM,CAAC,CAAC,CAAC,CAgBb,CACP,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { UniBlockProps } from '../../types';
|
|
2
|
+
export interface TableColumnProps extends UniBlockProps {
|
|
3
|
+
header: any;
|
|
4
|
+
columnData: any;
|
|
5
|
+
visibleRowLength: number;
|
|
6
|
+
isFillGradient: boolean;
|
|
7
|
+
showRow: boolean;
|
|
8
|
+
onToggleColumn: () => void;
|
|
9
|
+
}
|
|
10
|
+
export declare const TableColumn: (props: import("@redneckz/uni-jsx").PropsWithChildren<TableColumnProps, any>, context?: any) => any;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
|
|
2
|
+
import { JSX } from '@redneckz/uni-jsx';
|
|
3
|
+
import { Button } from '../../ui-kit/Button/Button.js';
|
|
4
|
+
import { GRADIENT } from './constants.js';
|
|
5
|
+
import { HeaderCell } from './HeaderCell.js';
|
|
6
|
+
import { TableCell } from './TableCell.js';
|
|
7
|
+
export const TableColumn = JSX(({ header, columnData, visibleRowLength = 0, isFillGradient, showRow, onToggleColumn }) => {
|
|
8
|
+
const columnDataView = columnData.slice(0, showRow ? columnData.length : visibleRowLength);
|
|
9
|
+
const gradientClassName = isFillGradient ? GRADIENT : '';
|
|
10
|
+
const buttonVersion = isFillGradient ? 'secondary' : 'primary';
|
|
11
|
+
return (_jsxs("div", { className: `border border-main-stroke rounded-md p-4 mb-3.5 ${gradientClassName}`, children: [_jsx(HeaderCell, { ...header, isFillGradient: isFillGradient }), columnDataView?.length
|
|
12
|
+
? columnDataView.map(({ rowHeader, cell }, i) => (_jsx(TableCell, { cell: cell, rowHeader: rowHeader, isFillGradient: isFillGradient }, String(i))))
|
|
13
|
+
: null, showRow && renderButton({ header, buttonVersion }), renderToggleButton({ onToggleColumn, isFillGradient, showRow })] }));
|
|
14
|
+
});
|
|
15
|
+
const renderButton = ({ header, buttonVersion }) => (_jsx(Button, { href: header.link.href, target: header.link.target, version: buttonVersion, className: "font-medium text-m-sm mt-4 py-[11px]", children: header.link.text }));
|
|
16
|
+
const renderToggleButton = ({ onToggleColumn, isFillGradient, showRow }) => (_jsx("div", { className: "mt-5", children: _jsx("a", { onClick: onToggleColumn, className: `font-medium text-m-sm cursor-pointer ${isFillGradient ? 'text-white/80' : 'text-primary-main'}`, children: !showRow ? 'Показать описание' : 'Скрыть' }) }));
|
|
17
|
+
//# sourceMappingURL=TableColumn.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableColumn.js","sourceRoot":"","sources":["../../../src/components/ComparisonTable/TableColumn.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAWxC,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAC5B,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,gBAAgB,GAAG,CAAC,EAAE,cAAc,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE;IACxF,MAAM,cAAc,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC;IAC3F,MAAM,iBAAiB,GAAG,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IACzD,MAAM,aAAa,GAAkB,cAAc,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC;IAC9E,OAAO,CACL,eAAK,SAAS,EAAE,mDAAmD,iBAAiB,EAAE,aACpF,KAAC,UAAU,OAAK,MAAM,EAAE,cAAc,EAAE,cAAc,GAAI,EACzD,cAAc,EAAE,MAAM;gBACrB,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAC7C,KAAC,SAAS,IAER,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,IAHzB,MAAM,CAAC,CAAC,CAAC,CAId,CACH,CAAC;gBACJ,CAAC,CAAC,IAAI,EAEP,OAAO,IAAI,YAAY,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC,EAClD,kBAAkB,CAAC,EAAE,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,CAAC,IAC5D,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CAClD,KAAC,MAAM,IACL,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,EACtB,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,EAC1B,OAAO,EAAE,aAAa,EACtB,SAAS,EAAC,sCAAsC,YAE/C,MAAM,CAAC,IAAI,CAAC,IAAI,GACV,CACV,CAAC;AAEF,MAAM,kBAAkB,GAAG,CAAC,EAAE,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAC1E,cAAK,SAAS,EAAC,MAAM,YACnB,YACE,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,wCACT,cAAc,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,mBACrC,EAAE,YAED,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,QAAQ,GACxC,GACA,CACP,CAAC"}
|
|
@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
|
|
|
2
2
|
import { JSX } from '@redneckz/uni-jsx';
|
|
3
3
|
import { Button } from '../../ui-kit/Button/Button.js';
|
|
4
4
|
import { Heading } from '../../ui-kit/Heading/Heading.js';
|
|
5
|
+
import { Icon } from '../../ui-kit/Icon/Icon.js';
|
|
5
6
|
import { Img } from '../../ui-kit/Img/Img.js';
|
|
6
7
|
import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl.js';
|
|
7
|
-
import { Icon } from '../../ui-kit/Icon/Icon.js';
|
|
8
8
|
const blockStyle = {
|
|
9
9
|
primary: 'bg-white',
|
|
10
10
|
secondary: 'bg-primary-main text-white',
|
|
@@ -17,7 +17,7 @@ function renderCardsLayout(isScroll, cards, context) {
|
|
|
17
17
|
}
|
|
18
18
|
function renderCard(card, key) {
|
|
19
19
|
return (_jsxs("div", { className: `box-border horizontal-list-item border-solid border rounded-md border-main-stroke p-4 flex flex-col
|
|
20
|
-
${blockStyle[card.version ?? 'primary']}`, children: [_jsxs("div", { children: [card.image?.src ? (_jsx("div", { className: "flex justify-center", children: _jsx(Img, { className: "mb-6", image: card.image }) })) : null, card.title ? _jsx("h4", { className: `font-medium text-m-title-xs m-0`, children: card.title }) : null, card.description ? renderDescription(card) : null, card.items?.length ? renderItems(card.items) : null] }), card?.button?.
|
|
20
|
+
${blockStyle[card.version ?? 'primary']}`, children: [_jsxs("div", { children: [card.image?.src ? (_jsx("div", { className: "flex justify-center", children: _jsx(Img, { className: "mb-6", image: card.image }) })) : null, card.title ? _jsx("h4", { className: `font-medium text-m-title-xs m-0`, children: card.title }) : null, card.description ? renderDescription(card) : null, card.items?.length ? renderItems(card.items) : null] }), card?.button?.text ? renderButton(card.button) : null] }, key));
|
|
21
21
|
}
|
|
22
22
|
function renderButton(button) {
|
|
23
23
|
return (_jsx(Button, { className: "mt-3", appendLeft: button?.icon && _jsx(Icon, { name: button?.icon, width: "24px", height: "24px", asSVG: true }), ...button }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Gallery.js","sourceRoot":"","sources":["../../../src/components/Gallery/Gallery.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Gallery.js","sourceRoot":"","sources":["../../../src/components/Gallery/Gallery.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs as _jsxs, jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
|
|
2
2
|
import { JSX } from '@redneckz/uni-jsx';
|
|
3
|
-
import { getScrollPoints } from './utils/getScrollPoints.js';
|
|
4
|
-
import { getIndexParts } from './utils/getIndexParts.js';
|
|
5
|
-
import { SwipeListControlList } from './SwipeListControlList.js';
|
|
6
|
-
import { SwipeListControlDots } from './SwipeListControlDots.js';
|
|
7
3
|
import { DEFAULT_GAP, DEFAULT_PADDING } from './constants.js';
|
|
8
|
-
|
|
4
|
+
import { SwipeListControlDots } from './SwipeListControlDots.js';
|
|
5
|
+
import { SwipeListControlList } from './SwipeListControlList.js';
|
|
6
|
+
import { getIndexParts } from './utils/getIndexParts.js';
|
|
7
|
+
import { getScrollPoints } from './utils/getScrollPoints.js';
|
|
8
|
+
export const SwipeListControl = JSX(({ className, context, children, gap = DEFAULT_GAP, padding = DEFAULT_PADDING, showDots = true, onSlideChange, }) => {
|
|
9
9
|
const [activeIndex, setActiveIndex] = context.useState(0);
|
|
10
10
|
const [indexFraction, setIndexFraction] = context.useState(0);
|
|
11
11
|
const handleScroll = (e) => {
|
|
@@ -22,9 +22,14 @@ export const SwipeListControl = JSX(({ className, context, children, gap = DEFAU
|
|
|
22
22
|
itemWidth,
|
|
23
23
|
});
|
|
24
24
|
const { index, fraction } = getIndexParts(scrollLeft, scrollPoints);
|
|
25
|
+
if (index !== activeIndex && onSlideChange) {
|
|
26
|
+
onSlideChange();
|
|
27
|
+
}
|
|
25
28
|
setActiveIndex(index);
|
|
26
29
|
setIndexFraction(fraction);
|
|
27
30
|
};
|
|
28
|
-
return (_jsxs("div", { className: className, children: [
|
|
31
|
+
return (_jsxs("div", { className: className, children: [renderSwipeList({ gap, padding, activeIndex, handleScroll, children }), renderSwipelistDots({ activeIndex, indexFraction, showDots, children })] }));
|
|
29
32
|
});
|
|
33
|
+
const renderSwipeList = ({ gap, padding, activeIndex, handleScroll, children }) => (_jsx(SwipeListControlList, { gap: gap, padding: padding, activeIndex: activeIndex, onScroll: handleScroll, children: children }));
|
|
34
|
+
const renderSwipelistDots = ({ activeIndex, indexFraction, showDots, children }) => (_jsx(SwipeListControlDots, { activeIndex: activeIndex, indexFraction: indexFraction, showDots: showDots, children: children }));
|
|
30
35
|
//# sourceMappingURL=SwipeListControl.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SwipeListControl.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"SwipeListControl.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE1D,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CACjC,CAAC,EACC,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,GAAG,WAAW,EACjB,OAAO,GAAG,eAAe,EACzB,QAAQ,GAAG,IAAI,EACf,aAAa,GACd,EAAE,EAAE;IACH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,OAAO,CAAC,QAAQ,CAAS,CAAC,CAAC,CAAC;IAClE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,OAAO,CAAC,QAAQ,CAAS,CAAC,CAAC,CAAC;IAEtE,MAAM,YAAY,GAAG,CAAC,CAAU,EAAE,EAAE;QAClC,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,WAAW,EAAE,QAAQ,EAAE,GACzE,CAAC,CAAC,aAA4B,CAAC;QAEjC,+EAA+E;QAC/E,gGAAgG;QAChG,MAAM,SAAS,GAAI,QAAQ,CAAC,CAAC,CAAiB,CAAC,WAAW,GAAG,OAAO,GAAG,CAAC,CAAC;QACzE,MAAM,YAAY,GAAG,eAAe,CAAC;YACnC,GAAG;YACH,OAAO;YACP,WAAW;YACX,WAAW;YACX,iBAAiB;YACjB,SAAS;SACV,CAAC,CAAC;QAEH,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,aAAa,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;QACpE,IAAI,KAAK,KAAK,WAAW,IAAI,aAAa,EAAE;YAC1C,aAAa,EAAE,CAAC;SACjB;QACD,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,aACtB,eAAe,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC,EACtE,mBAAmB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,IACpE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACjF,KAAC,oBAAoB,IACnB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,YAAY,YAErB,QAAQ,GACY,CACxB,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAClF,KAAC,oBAAoB,IAAC,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,YAC7F,QAAQ,GACY,CACxB,CAAC"}
|
package/mobile/src/common.css
CHANGED
|
@@ -1,15 +1,9 @@
|
|
|
1
1
|
import { JSX } from '@redneckz/uni-jsx';
|
|
2
|
-
import { useComparisonTableScroll } from '../../hooks/useComparisonTableScroll';
|
|
3
|
-
import { useLink } from '../../hooks/useLink';
|
|
4
2
|
import type { UniBlockProps } from '../../types';
|
|
5
|
-
import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
|
|
6
3
|
import { Heading } from '../../ui-kit/Heading/Heading';
|
|
4
|
+
import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
|
|
7
5
|
import type { ComparisonTableContent } from './ComparisonTableContent';
|
|
8
|
-
import {
|
|
9
|
-
import { HeaderCell } from './HeaderCell';
|
|
10
|
-
import { TableCarouselContainer } from './TableCarouselContainer';
|
|
11
|
-
import { TableRow } from './TableRow';
|
|
12
|
-
import { TableRowContainer } from './TableRowContainer';
|
|
6
|
+
import { TableColumn } from './TableColumn';
|
|
13
7
|
|
|
14
8
|
export interface ComparisonTableProps extends ComparisonTableContent, UniBlockProps {}
|
|
15
9
|
|
|
@@ -22,112 +16,106 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
|
|
|
22
16
|
columns,
|
|
23
17
|
visibleRowLength = 0,
|
|
24
18
|
isColoredFirstColumn = false,
|
|
19
|
+
useSwiper = false,
|
|
25
20
|
}) => {
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
const [activeCardIndex, setActiveCardIndex] = context.useState(0);
|
|
30
|
-
const [isShowAllRow, setIsShowAllRow] = context.useState(!visibleRowLength);
|
|
31
|
-
|
|
32
|
-
const colHeaders = columns?.map(({ header }) => header || {});
|
|
33
|
-
const colData = columns?.map(({ data }) => data) || [];
|
|
34
|
-
const rowData = rowHeaders
|
|
35
|
-
?.map((header, i) => ({
|
|
21
|
+
const tableData =
|
|
22
|
+
columns?.map(({ data, header }) => ({
|
|
36
23
|
header,
|
|
37
|
-
|
|
38
|
-
}))
|
|
39
|
-
.slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
|
|
24
|
+
column: data?.map((cell, i) => ({ cell, rowHeader: rowHeaders?.[i]?.title })),
|
|
25
|
+
})) || [];
|
|
40
26
|
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
colsLengthForScroll: COLS_LENGTH_FOR_SCROLL,
|
|
45
|
-
activeCardIndex,
|
|
46
|
-
setActiveCardIndex,
|
|
47
|
-
});
|
|
27
|
+
const [columnsViewState, setColumnsViewState] = context.useState<boolean[]>(
|
|
28
|
+
new Array(columns?.length).fill(!visibleRowLength),
|
|
29
|
+
);
|
|
48
30
|
|
|
49
|
-
const
|
|
31
|
+
const handleToggleColumn = (i: number) => {
|
|
32
|
+
columnsViewState[i] = !columnsViewState[i];
|
|
33
|
+
setColumnsViewState([...columnsViewState]);
|
|
34
|
+
};
|
|
50
35
|
|
|
51
36
|
return (
|
|
52
37
|
<section
|
|
53
|
-
className={`bg-white font-sans
|
|
38
|
+
className={`bg-white font-sans px-4 py-6 overflow-hidden text-primary-text relative ${
|
|
54
39
|
className || ''
|
|
55
40
|
}`}
|
|
56
41
|
>
|
|
57
|
-
|
|
58
|
-
headingType="
|
|
59
|
-
|
|
60
|
-
title={title}
|
|
61
|
-
/>
|
|
62
|
-
<div role="table">
|
|
63
|
-
{colHeaders?.length ? (
|
|
64
|
-
<TableRowContainer>
|
|
65
|
-
<div className={FIRST_CELL_CLASSES} role="columnheader" scope="col" />
|
|
66
|
-
<TableCarouselContainer activeCardIndex={activeCardIndex} columnWidth={COLUMN_WIDTH}>
|
|
67
|
-
{colHeaders.map((header, i) => (
|
|
68
|
-
<HeaderCell
|
|
69
|
-
key={String(i)}
|
|
70
|
-
{...header}
|
|
71
|
-
link={header.link && useLink({ router, handlerDecorator }, header.link)}
|
|
72
|
-
/>
|
|
73
|
-
))}
|
|
74
|
-
</TableCarouselContainer>
|
|
75
|
-
</TableRowContainer>
|
|
76
|
-
) : null}
|
|
77
|
-
|
|
78
|
-
{rowData?.length ? (
|
|
79
|
-
<div className="relative">
|
|
80
|
-
{rowData.map((row, i, { length }) => (
|
|
81
|
-
<TableRow
|
|
82
|
-
key={String(i)}
|
|
83
|
-
row={row}
|
|
84
|
-
isFirstRow={i === 0}
|
|
85
|
-
isLastRow={i + 1 === length}
|
|
86
|
-
activeCardIndex={activeCardIndex}
|
|
87
|
-
isColoredFirstColumn={isColoredFirstColumn}
|
|
88
|
-
/>
|
|
89
|
-
))}
|
|
90
|
-
{isScrollAvailable ? (
|
|
91
|
-
<div>
|
|
92
|
-
<div className="absolute top-7 right-7 z-10">
|
|
93
|
-
<ArrowButton
|
|
94
|
-
onClick={nextClick}
|
|
95
|
-
disabled={!showNextButton}
|
|
96
|
-
ariaLabel="Пролистать вправо"
|
|
97
|
-
/>
|
|
98
|
-
<ArrowButton
|
|
99
|
-
className="mt-4 rotate-180"
|
|
100
|
-
onClick={prevClick}
|
|
101
|
-
disabled={!showPrevButton}
|
|
102
|
-
ariaLabel="Пролистать влево"
|
|
103
|
-
/>
|
|
104
|
-
</div>
|
|
105
|
-
</div>
|
|
106
|
-
) : null}
|
|
107
|
-
</div>
|
|
108
|
-
) : null}
|
|
109
|
-
</div>
|
|
110
|
-
|
|
111
|
-
{isScrollAvailable ? (
|
|
112
|
-
<div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
|
|
113
|
-
) : null}
|
|
42
|
+
{title && (
|
|
43
|
+
<Heading headingType="h3" className="font-medium text-center m-0 mb-5" title={title} />
|
|
44
|
+
)}
|
|
114
45
|
|
|
115
|
-
{
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
</div>
|
|
126
|
-
</button>
|
|
127
|
-
</div>
|
|
128
|
-
</div>
|
|
129
|
-
) : null}
|
|
46
|
+
{renderColumns({
|
|
47
|
+
tableData,
|
|
48
|
+
context,
|
|
49
|
+
visibleRowLength,
|
|
50
|
+
isColoredFirstColumn,
|
|
51
|
+
columnsViewState,
|
|
52
|
+
handleToggleColumn,
|
|
53
|
+
useSwiper,
|
|
54
|
+
setColumnsViewState,
|
|
55
|
+
})}
|
|
130
56
|
</section>
|
|
131
57
|
);
|
|
132
58
|
},
|
|
133
59
|
);
|
|
60
|
+
|
|
61
|
+
const renderColumns = ({
|
|
62
|
+
context,
|
|
63
|
+
tableData,
|
|
64
|
+
visibleRowLength,
|
|
65
|
+
isColoredFirstColumn,
|
|
66
|
+
columnsViewState,
|
|
67
|
+
handleToggleColumn,
|
|
68
|
+
useSwiper,
|
|
69
|
+
setColumnsViewState,
|
|
70
|
+
}) => (
|
|
71
|
+
<div role="table">
|
|
72
|
+
{tableData?.length ? (
|
|
73
|
+
useSwiper ? (
|
|
74
|
+
<SwipeListControl
|
|
75
|
+
context={context}
|
|
76
|
+
onSlideChange={onSlideChange(columnsViewState, setColumnsViewState)}
|
|
77
|
+
>
|
|
78
|
+
{tableData.map(
|
|
79
|
+
renderColumn({
|
|
80
|
+
context,
|
|
81
|
+
visibleRowLength,
|
|
82
|
+
isColoredFirstColumn,
|
|
83
|
+
columnsViewState,
|
|
84
|
+
handleToggleColumn,
|
|
85
|
+
}),
|
|
86
|
+
)}
|
|
87
|
+
</SwipeListControl>
|
|
88
|
+
) : (
|
|
89
|
+
tableData.map(
|
|
90
|
+
renderColumn({
|
|
91
|
+
context,
|
|
92
|
+
visibleRowLength,
|
|
93
|
+
isColoredFirstColumn,
|
|
94
|
+
columnsViewState,
|
|
95
|
+
handleToggleColumn,
|
|
96
|
+
}),
|
|
97
|
+
)
|
|
98
|
+
)
|
|
99
|
+
) : null}
|
|
100
|
+
</div>
|
|
101
|
+
);
|
|
102
|
+
|
|
103
|
+
const renderColumn =
|
|
104
|
+
({ context, visibleRowLength, isColoredFirstColumn, columnsViewState, handleToggleColumn }) =>
|
|
105
|
+
(columnData, i) =>
|
|
106
|
+
(
|
|
107
|
+
<TableColumn
|
|
108
|
+
key={String(i)}
|
|
109
|
+
context={context}
|
|
110
|
+
visibleRowLength={visibleRowLength}
|
|
111
|
+
showRow={columnsViewState[i]}
|
|
112
|
+
header={columnData.header}
|
|
113
|
+
columnData={columnData.column}
|
|
114
|
+
isFillGradient={i === 0 && isColoredFirstColumn}
|
|
115
|
+
onToggleColumn={() => handleToggleColumn(i)}
|
|
116
|
+
/>
|
|
117
|
+
);
|
|
118
|
+
|
|
119
|
+
const onSlideChange = (columnsViewState, setColumnsViewState) => () => {
|
|
120
|
+
setColumnsViewState(new Array(columnsViewState.length).fill(false));
|
|
121
|
+
};
|
|
@@ -26,6 +26,8 @@ export interface CellData {
|
|
|
26
26
|
export interface ColumnHeader {
|
|
27
27
|
/** @title Заголовок */
|
|
28
28
|
title?: string;
|
|
29
|
+
/** @title Подзаголовок */
|
|
30
|
+
subtitle?: string;
|
|
29
31
|
icon?: IconName;
|
|
30
32
|
image?: Picture;
|
|
31
33
|
link?: LinkProps;
|
|
@@ -61,4 +63,6 @@ export interface ComparisonTableContent {
|
|
|
61
63
|
isColoredFirstColumn?: boolean;
|
|
62
64
|
/** @title Отображать заданное количество строк */
|
|
63
65
|
visibleRowLength?: number;
|
|
66
|
+
/** @title Использовать свайпер- */
|
|
67
|
+
useSwiper?: boolean;
|
|
64
68
|
}
|