Skip to content

Commit 3043455

Browse files
bocembocembocembocem
committed
feat: add table column width
1 parent ca2cedc commit 3043455

File tree

5 files changed

+162
-97
lines changed

5 files changed

+162
-97
lines changed

‎src/lib/core/types/specs.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export interface ArraySpec<
3232
label: string;
3333
property: string;
3434
description?: string;
35+
width?: number;
3536
}[];
3637
link?: LinkType;
3738
placeholder?: string;

‎src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@
99
}
1010
}
1111

12+
&__column-title {
13+
overflow: hidden;
14+
text-overflow: ellipsis;
15+
}
16+
1217
&__row {
1318
.g-table__cell {
1419
border-bottom: 0px transparent;
@@ -58,6 +63,20 @@
5863
}
5964
}
6065

66+
&__cell-without-limit {
67+
&_arr,
68+
&_obj {
69+
padding-left: var(--df-table-array-cell-obj-padding-left, var(--g-spacing-half));
70+
71+
& > .simple-vertical-accordeon {
72+
margin-bottom: var(
73+
--df-table-array-cell-obj-simple-vertical-accordeon-margin-bottom,
74+
var(--g-spacing-0)
75+
);
76+
}
77+
}
78+
}
79+
6180
&__idx {
6281
padding-top: var(--df-table-array-idx-padding-top, 6px);
6382
}

‎src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx‎

Lines changed: 74 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22

33
import {Plus, TrashBin} from '@gravity-ui/icons';
4-
import {Button, Flex, HelpMark, Icon, Table} from '@gravity-ui/uikit';
4+
import {Button, Flex, HelpMark, Icon, Table, type TableColumnConfig} from '@gravity-ui/uikit';
55
import noop from 'lodash/noop';
66
import set from 'lodash/set';
77

@@ -77,7 +77,7 @@ export const TableArrayInput: ArrayInput = ({spec, name, arrayInput, input}) =>
7777
return null;
7878
}
7979

80-
const idxColumn = {
80+
const idxColumn: TableColumnConfig<{key: string}> = {
8181
id: 'idx',
8282
name: '',
8383
sticky: 'left',
@@ -88,7 +88,7 @@ export const TableArrayInput: ArrayInput = ({spec, name, arrayInput, input}) =>
8888
),
8989
};
9090

91-
const removeColumn = {
91+
const removeColumn: TableColumnConfig<{key: string}> = {
9292
id: 'remove',
9393
name: '',
9494
sticky: 'right',
@@ -104,65 +104,79 @@ export const TableArrayInput: ArrayInput = ({spec, name, arrayInput, input}) =>
104104
),
105105
};
106106

107-
const columns = table.map(({property, label, description}) => ({
108-
id: property,
109-
name: !description
110-
? label
111-
: () => (
112-
<Flex gap={0.5} alignItems="center">
113-
{label}
114-
<HelpMark
115-
popoverProps={{
116-
placement: COMMON_POPOVER_PLACEMENT,
117-
}}
107+
const columns: TableColumnConfig<{key: string}>[] = table.map(
108+
({property, label, description, width}) => ({
109+
id: property,
110+
name: !description
111+
? () => (
112+
<div
113+
className={b('column-title')}
114+
style={{minWidth: width, maxWidth: width}}
118115
>
119-
<HTMLContent html={description} />
120-
</HelpMark>
121-
</Flex>
122-
),
123-
template: (
124-
{
125-
key,
126-
}: {
127-
key: string;
128-
},
129-
idx: number,
130-
) => {
131-
const entitySpec = items?.properties?.[property];
132-
133-
if (!entitySpec) {
134-
return null;
135-
}
136-
137-
const preparedEntitySpec = {
138-
...entitySpec,
139-
viewSpec: {
140-
...entitySpec.viewSpec,
141-
layoutTitle:
142-
table.map(({label}) => label).join(` ${idx + 1} `) + ` ${idx + 1}`,
116+
{label}
117+
</div>
118+
)
119+
: () => (
120+
<Flex
121+
gap={0.5}
122+
alignItems="center"
123+
style={{minWidth: width, maxWidth: width}}
124+
>
125+
<div className={b('column-title')}>{label}</div>
126+
<HelpMark
127+
popoverProps={{
128+
placement: COMMON_POPOVER_PLACEMENT,
129+
}}
130+
>
131+
<HTMLContent html={description} />
132+
</HelpMark>
133+
</Flex>
134+
),
135+
template: (
136+
{
137+
key,
138+
}: {
139+
key: string;
143140
},
144-
};
145-
146-
return (
147-
<div
148-
className={b('cell', {
149-
bool: isBooleanSpec(preparedEntitySpec),
150-
arr: isArraySpec(preparedEntitySpec),
151-
obj: isObjectSpec(preparedEntitySpec),
152-
})}
153-
key={`${name}.<${key}>.${property}`}
154-
>
155-
<Controller
156-
value={(input.value?.[`<${key}>`] as FieldObjectValue)?.[property]}
157-
spec={preparedEntitySpec}
158-
name={`${name}.<${key}>.${property}`}
159-
parentOnChange={parentOnChange}
160-
parentOnUnmount={noop}
161-
/>
162-
</div>
163-
);
164-
},
165-
}));
141+
idx: number,
142+
) => {
143+
const entitySpec = items?.properties?.[property];
144+
145+
if (!entitySpec) {
146+
return null;
147+
}
148+
149+
const preparedEntitySpec = {
150+
...entitySpec,
151+
viewSpec: {
152+
...entitySpec.viewSpec,
153+
layoutTitle:
154+
table.map(({label}) => label).join(` ${idx + 1} `) + ` ${idx + 1}`,
155+
},
156+
};
157+
158+
return (
159+
<div
160+
className={b(width ? 'cell-without-limit' : 'cell', {
161+
bool: isBooleanSpec(preparedEntitySpec),
162+
arr: isArraySpec(preparedEntitySpec),
163+
obj: isObjectSpec(preparedEntitySpec),
164+
})}
165+
style={{minWidth: width, maxWidth: width}}
166+
key={`${name}.<${key}>.${property}`}
167+
>
168+
<Controller
169+
value={(input.value?.[`<${key}>`] as FieldObjectValue)?.[property]}
170+
spec={preparedEntitySpec}
171+
name={`${name}.<${key}>.${property}`}
172+
parentOnChange={parentOnChange}
173+
parentOnUnmount={noop}
174+
/>
175+
</div>
176+
);
177+
},
178+
}),
179+
);
166180

167181
return [idxColumn, ...columns, removeColumn];
168182
}, [name, spec, onItemRemove, parentOnChange, input.parentOnUnmount, input.value]);

‎src/lib/kit/components/Views/TableArrayView/TableArrayView.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@
55
margin-bottom: var(--df-table-array-view-table-margin-bottom, var(--g-spacing-3));
66
}
77

8+
&__column-title {
9+
overflow: hidden;
10+
text-overflow: ellipsis;
11+
}
12+
813
&__cell {
914
max-width: var(--df-table-array-view-cell-min-width, 150px);
1015
min-width: var(--df-table-array-view-cell-max-width, 150px);
@@ -23,4 +28,13 @@
2328
min-width: 50px;
2429
}
2530
}
31+
32+
&__cell-without-limit {
33+
&_arr,
34+
&_obj {
35+
& > .simple-vertical-accordeon {
36+
margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child);
37+
}
38+
}
39+
}
2640
}

‎src/lib/kit/components/Views/TableArrayView/TableArrayView.tsx‎

Lines changed: 54 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22

3-
import {Flex, HelpMark, Table} from '@gravity-ui/uikit';
3+
import {Flex, HelpMark, Table, type TableColumnConfig} from '@gravity-ui/uikit';
44

55
import type {ArrayView, FormValue, ObjectValue} from '../../../../core';
66
import {
@@ -31,7 +31,7 @@ export const TableArrayView: ArrayView = ({value = [], spec, name}) => {
3131
return null;
3232
}
3333

34-
const idxColumn = {
34+
const idxColumn: TableColumnConfig<ObjectValue> = {
3535
id: 'idx',
3636
name: '',
3737
sticky: 'left',
@@ -42,44 +42,61 @@ export const TableArrayView: ArrayView = ({value = [], spec, name}) => {
4242
),
4343
};
4444

45-
const columns = table.map(({property, label, description}) => ({
46-
id: property,
47-
name:
48-
description && showLayoutDescription
49-
? () => (
50-
<Flex gap={0.5} alignItems="center">
51-
{label}
52-
<HelpMark
53-
popoverProps={{
54-
placement: COMMON_POPOVER_PLACEMENT,
55-
}}
45+
const columns: TableColumnConfig<ObjectValue>[] = table.map(
46+
({property, label, description, width}) => ({
47+
id: property,
48+
name:
49+
description && showLayoutDescription
50+
? () => (
51+
<Flex
52+
gap={0.5}
53+
alignItems="center"
54+
style={{minWidth: width, maxWidth: width}}
5655
>
57-
<HTMLContent html={description} />
58-
</HelpMark>
59-
</Flex>
60-
)
61-
: label,
62-
template: (_: FormValue, idx: number) => {
63-
const entitySpec = items?.properties?.[property];
56+
<div className={b('column-title')}>{label}</div>
57+
<HelpMark
58+
popoverProps={{
59+
placement: COMMON_POPOVER_PLACEMENT,
60+
}}
61+
>
62+
<HTMLContent html={description} />
63+
</HelpMark>
64+
</Flex>
65+
)
66+
: () => (
67+
<div
68+
className={b('column-title')}
69+
style={{minWidth: width, maxWidth: width}}
70+
>
71+
{label}
72+
</div>
73+
),
74+
template: (_: FormValue, idx: number) => {
75+
const entitySpec = items?.properties?.[property];
6476

65-
if (!entitySpec) {
66-
return null;
67-
}
77+
if (!entitySpec) {
78+
return null;
79+
}
6880

69-
return (
70-
<div
71-
className={b('cell', {
72-
bool: isBooleanSpec(entitySpec),
73-
arr: isArraySpec(entitySpec),
74-
obj: isObjectSpec(entitySpec),
75-
})}
76-
key={`${name}[${idx}].${property}`}
77-
>
78-
<ViewController spec={entitySpec} name={`${name}[${idx}].${property}`} />
79-
</div>
80-
);
81-
},
82-
}));
81+
return (
82+
<div
83+
className={b(width ? 'cell-without-limit' : 'cell', {
84+
bool: isBooleanSpec(entitySpec),
85+
arr: isArraySpec(entitySpec),
86+
obj: isObjectSpec(entitySpec),
87+
})}
88+
style={{minWidth: width, maxWidth: width}}
89+
key={`${name}[${idx}].${property}`}
90+
>
91+
<ViewController
92+
spec={entitySpec}
93+
name={`${name}[${idx}].${property}`}
94+
/>
95+
</div>
96+
);
97+
},
98+
}),
99+
);
83100

84101
return [idxColumn, ...columns];
85102
}, [name, spec, showLayoutDescription]);

0 commit comments

Comments
 (0)