Skip to content

Commit 78baa28

Browse files
NasgulNexusNasgulNexus
authored
feat: add layout props variant header for section and accordeon and a… (#271)
1 parent 00a3bb4 commit 78baa28

25 files changed

+175
-14
lines changed

‎docs/spec.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,7 @@ You can provide all props of [original component](https://preview.gravity-ui.com
184184
| iconColor | `'primary'` `'complementary'` `'secondary'` `'hint'` `'info'` `'info-heavy'` `'positive'` `'positive-heavy'` `'warning'` `'warning-heavy'` `'danger'` `'danger-heavy'` `'utility'` `'utility-heavy'` `'misc'` `'misc-heavy'` `'brand'` `'dark-primary'` `'dark-complementary'` `'dark-secondary'` | | The color of the icon, if it does not have the themeLabel parameter |
185185
| themeIcon | `'normal'` `'info'` `'success'` `'warning'` `'danger'` `'utility'` | | Alert color |
186186
| titleAlert | `string` | | Alert title |
187+
| viewAlert | `'filled'` `'outlined'` | | Alert view |
187188

188189
#### SelectParams
189190

‎src/lib/core/components/View/types/layout.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ import {FormValue, Spec} from '../../../';
44

55
import {ViewProps} from './';
66

7-
export type ViewLayoutProps<Value extends FormValue, SpecType extends Spec> = {
7+
export type ViewLayoutProps<
8+
Value extends FormValue,
9+
SpecType extends Spec<undefined, undefined, Record<string, any> | undefined> = Spec,
10+
> = {
811
children: React.ReactElement;
912
} & ViewProps<Value, SpecType>;
1013

‎src/lib/core/components/View/types/views.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ import {FormValue, Spec} from '../../../';
44

55
import {ViewLayoutType} from './';
66

7-
export type ViewProps<Value extends FormValue, SpecType extends Spec> = {
7+
export type ViewProps<
8+
Value extends FormValue,
9+
SpecType extends Spec<undefined, undefined, Record<string, any> | undefined> = Spec,
10+
> = {
811
spec: SpecType;
912
name: string;
1013
value?: Value;

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {AlertProps, LabelProps} from '@gravity-ui/uikit';
1+
import type {AlertProps, LabelProps} from '@gravity-ui/uikit';
22
import {ColorTextBaseProps} from '@gravity-ui/uikit/build/esm/components/Text/colorText/colorText';
33

44
import {ReadAsMethod, SpecTypes} from '../constants';
@@ -175,6 +175,7 @@ export interface StringSpec<
175175
iconColor?: ColorTextBaseProps['color'];
176176
titleAlert?: string;
177177
themeAlert?: AlertProps['theme'];
178+
viewAlert?: AlertProps['view'];
178179
};
179180
fileInput?: {
180181
accept?: string;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ export const TextContentComponent: React.FC<TextContentComponentProps> = ({
5656
// If the title is an empty line, then you need to explicitly write undefined, otherwise there will be an additional indent
5757
title={titleAlert}
5858
theme={textContentParams?.themeAlert}
59+
view={textContentParams?.viewAlert}
5960
/>
6061
);
6162
} else if (textContentParams?.themeLabel) {

‎src/lib/kit/components/Layouts/Accordeon/Accordeon.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,30 @@
11
import React from 'react';
22

3+
import {TextProps} from '@gravity-ui/uikit';
4+
35
import {ArrayLayoutProps, ObjectLayoutProps, isArrayItem} from '../../../../core';
46
import {ErrorWrapper} from '../../../components';
57
import {useErrorChecker} from '../../../hooks';
68
import {RemoveButton} from '../../RemoveButton';
79
import {SimpleVerticalAccordeon} from '../../SimpleVerticalAccordeon';
810

9-
export const Accordeon = <T extends ArrayLayoutProps | ObjectLayoutProps>({
11+
interface AccordeonLayoutProps {
12+
variantTitle?: TextProps['variant'];
13+
}
14+
15+
export const Accordeon = <
16+
T extends
17+
| ArrayLayoutProps<Record<string, any> | undefined, AccordeonLayoutProps | undefined>
18+
| ObjectLayoutProps<Record<string, any> | undefined, AccordeonLayoutProps | undefined>,
19+
>({
1020
name,
1121
spec,
1222
input,
1323
meta,
1424
children,
1525
}: T): JSX.Element => {
26+
const {variantTitle} = spec.viewSpec.layoutProps || {};
27+
1628
const [open, setOpen] = React.useState(Boolean(spec.viewSpec?.layoutOpen));
1729

1830
const onDrop = React.useCallback(() => {
@@ -40,6 +52,7 @@ export const Accordeon = <T extends ArrayLayoutProps | ObjectLayoutProps>({
4052
headerActionsTemplate={removeButton}
4153
hideInsteadOfDestroy
4254
withBranchView
55+
variantTitle={variantTitle}
4356
>
4457
<ErrorWrapper name={name} meta={meta} withoutChildErrorStyles>
4558
{children}

‎src/lib/kit/components/Layouts/Section/Section.tsx‎

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

33
import {HelpPopover} from '@gravity-ui/components';
4-
import {Popover, Text} from '@gravity-ui/uikit';
4+
import {Popover, Text, TextProps} from '@gravity-ui/uikit';
55

66
import {GroupIndent} from '../../';
77
import {RemoveButton} from '../../RemoveButton';
@@ -23,14 +23,22 @@ import './Section.scss';
2323

2424
const b = block('section');
2525

26+
interface SectionLayoutProps {
27+
variantTitle?: TextProps['variant'];
28+
}
29+
2630
interface SectionProps {
2731
titleSize: 's' | 'm';
2832
withIndent?: boolean;
2933
ignoreDescription?: boolean;
3034
descriptionAsSubtitle?: boolean;
3135
}
3236

33-
const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>({
37+
const SectionBase = <
38+
D extends FieldValue,
39+
T extends FormValue,
40+
S extends Spec<any, any, SectionLayoutProps>,
41+
>({
3442
name,
3543
spec,
3644
titleSize,
@@ -39,7 +47,7 @@ const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>(
3947
descriptionAsSubtitle,
4048
children,
4149
...restProps
42-
}: (LayoutProps<D, undefined, undefined, S> | ViewLayoutProps<T, S>) & SectionProps) => {
50+
}: (LayoutProps<D, undefined, SectionLayoutProps, S> | ViewLayoutProps<T, S>) & SectionProps) => {
4351
const input = (restProps as FieldRenderProps<D>).input as
4452
| FieldRenderProps<D>['input']
4553
| undefined;
@@ -48,6 +56,29 @@ const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>(
4856
const titleRef = React.useRef<HTMLHeadingElement>(null);
4957
let content = children;
5058

59+
const {variantTitle: variantTitleProp} = spec.viewSpec.layoutProps || {};
60+
61+
const {sizeTitle, variantTitle} = React.useMemo(() => {
62+
if (variantTitleProp) {
63+
return {
64+
sizeTitle: undefined,
65+
variantTitle: variantTitleProp,
66+
};
67+
}
68+
69+
if (titleSize === 'm') {
70+
return {
71+
sizeTitle: titleSize,
72+
variantTitle: 'body-2',
73+
};
74+
}
75+
76+
return {
77+
sizeTitle: titleSize,
78+
variantTitle: 'body-1',
79+
};
80+
}, [variantTitleProp, titleSize]);
81+
5182
const removeButton = React.useMemo(() => {
5283
if (input?.value && input?.onDrop && isArrayItem(name)) {
5384
return (
@@ -107,7 +138,7 @@ const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>(
107138
<div
108139
className={b('header', {
109140
'with-popover': !descriptionAsSubtitle,
110-
size: titleSize,
141+
size: sizeTitle,
111142
})}
112143
>
113144
<Popover
@@ -118,7 +149,7 @@ const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>(
118149
>
119150
<Text
120151
className={b('title')}
121-
variant={titleSize === 'm' ? 'body-2' : 'body-1'}
152+
variant={variantTitle as TextProps['variant']}
122153
ref={titleRef}
123154
ellipsis
124155
>

‎src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22

33
import {HelpPopover} from '@gravity-ui/components';
44
import {ChevronDown} from '@gravity-ui/icons';
5-
import {Button, Icon, Popover, Text} from '@gravity-ui/uikit';
5+
import {Button, Icon, Popover, Text, TextProps} from '@gravity-ui/uikit';
66

77
import {COMMON_POPOVER_PLACEMENT} from '../../constants/common';
88
import {block} from '../../utils';
@@ -27,6 +27,7 @@ interface SimpleVerticalAccordeonProps {
2727
hideInsteadOfDestroy?: boolean;
2828
withBranchView?: boolean;
2929
viewLayout?: boolean;
30+
variantTitle?: TextProps['variant'];
3031
}
3132

3233
interface SimpleVerticalAccordeonState {
@@ -81,6 +82,7 @@ export class SimpleVerticalAccordeon extends React.Component<
8182
withBranchView,
8283
viewLayout,
8384
name,
85+
variantTitle,
8486
} = this.props;
8587
const {open, hidden, isFirstRender} = this.state;
8688

@@ -104,7 +106,7 @@ export class SimpleVerticalAccordeon extends React.Component<
104106
const titlePopoverDisabled =
105107
(this.titleRef.current?.offsetWidth || 0) <= TITLE_TEXT_MAX_WIDTH;
106108

107-
const currentTitleVariant = this.getCurrentTitleVariant();
109+
const currentTitleVariant = variantTitle || this.getCurrentTitleVariant();
108110

109111
return (
110112
Boolean(React.Children.count(children)) && (

‎src/lib/kit/components/ViewLayouts/ViewAccordeon/ViewAccordeon.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
11
import React from 'react';
22

33
import isBoolean from 'lodash/isBoolean';
4+
import {TextProps} from '@gravity-ui/uikit';
45

5-
import {ArrayViewLayoutProps, ObjectViewLayoutProps, useDynamicFormsCtx} from '../../../../core';
6+
import {ArrayValue, ObjectValue, Spec, ViewLayoutProps, useDynamicFormsCtx} from '../../../../core';
67
import {isNotEmptyValue} from '../../../utils';
78
import {SimpleVerticalAccordeon} from '../../SimpleVerticalAccordeon';
89

9-
export const ViewAccordeon = <T extends ArrayViewLayoutProps | ObjectViewLayoutProps>({
10+
interface ViewAccordeonLayoutProps {
11+
variantTitle?: TextProps['variant'];
12+
}
13+
14+
export const ViewAccordeon = <
15+
T extends ViewLayoutProps<ArrayValue | ObjectValue, Spec<any, any, ViewAccordeonLayoutProps>>,
16+
>({
1017
name,
1118
value,
1219
spec,
@@ -17,7 +24,9 @@ export const ViewAccordeon = <T extends ArrayViewLayoutProps | ObjectViewLayoutP
1724
isBoolean(spec.viewSpec.layoutOpen) ? spec.viewSpec.layoutOpen : true,
1825
);
1926

20-
if (!isNotEmptyValue(value, spec)) {
27+
const {variantTitle} = spec.viewSpec.layoutProps || {};
28+
29+
if (!isNotEmptyValue(value, spec as Spec)) {
2130
return null;
2231
}
2332

@@ -35,6 +44,7 @@ export const ViewAccordeon = <T extends ArrayViewLayoutProps | ObjectViewLayoutP
3544
hideInsteadOfDestroy
3645
withBranchView
3746
viewLayout
47+
variantTitle={variantTitle}
3848
>
3949
{children}
4050
</SimpleVerticalAccordeon>

‎src/lib/kit/utils/common.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,11 @@ export const prepareSpec = <Type extends Spec>(
120120
result.viewSpec.textContentParams.themeAlert.toLowerCase();
121121
}
122122

123+
if (isString(result.viewSpec?.textContentParams?.viewAlert)) {
124+
result.viewSpec.textContentParams.viewAlert =
125+
result.viewSpec.textContentParams.viewAlert.toLowerCase();
126+
}
127+
123128
if (isString(result.validator)) {
124129
result.validator = result.validator.toLowerCase();
125130
}

0 commit comments

Comments
 (0)