Skip to content

Commit ab23f6c

Browse files
authored
feat: added accordeon card to config (#162)
Authored-by: Aleksei <[email protected]>
1 parent 2fd9531 commit ab23f6c

File tree

50 files changed

+343
-11
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+343
-11
lines changed

src/lib/kit/components/AccordeonCard/AccordeonCard.scss

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,25 @@
55
flex-direction: column;
66
justify-content: space-between;
77
box-sizing: border-box;
8-
max-width: 750px;
98
box-shadow: 0 1px 5px var(--g-color-sfx-shadow);
109
border-radius: 5px;
1110
color: var(--g-color-text-primary);
1211
background-color: var(--g-color-base-float);
12+
.#{$ns}row {
13+
width: 100%;
14+
max-width: unset;
15+
16+
.#{$ns}select,
17+
.#{$ns}multi-select,
18+
.#{$ns}transparent_array-item {
19+
max-width: unset;
20+
}
21+
}
22+
23+
.#{$ns}monaco-input,
24+
.#{$ns}monaco-base-view {
25+
width: 100%;
26+
}
1327

1428
&:hover {
1529
box-shadow: 0 3px 10px var(--g-color-sfx-shadow);
@@ -85,7 +99,6 @@
8599

86100
&__body {
87101
display: none;
88-
margin-top: -10px 0 8px;
89102
padding: 16px;
90103

91104
&_open {

src/lib/kit/components/AccordeonCard/AccordeonCard.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export interface AccordeonCardProps {
2222
ignoreHeaderToggle?: boolean;
2323
titleSize?: 's' | 'm';
2424
alwaysOpen?: boolean;
25+
classNameBody?: string;
2526
}
2627
export const AccordeonCard: React.FC<AccordeonCardProps> = ({
2728
className,
@@ -35,6 +36,7 @@ export const AccordeonCard: React.FC<AccordeonCardProps> = ({
3536
titleSize = 'm',
3637
alwaysOpen,
3738
children,
39+
classNameBody,
3840
}) => {
3941
const accordeonRef = React.useRef<HTMLDivElement>(null);
4042
const bodyRef = React.useRef<HTMLDivElement>(null);
@@ -114,7 +116,7 @@ export const AccordeonCard: React.FC<AccordeonCardProps> = ({
114116
</div>
115117
) : null}
116118
</div>
117-
<div ref={bodyRef} className={b('body', {open: open && !emptyBody})}>
119+
<div ref={bodyRef} className={b('body', {open: open && !emptyBody}, classNameBody)}>
118120
{children}
119121
</div>
120122
</div>

src/lib/kit/components/Inputs/CardOneOf/CardOneOf.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
} from '../../../../core';
1313
import {useErrorChecker, useOneOf} from '../../../hooks';
1414
import {Row} from '../../Layouts';
15-
import {RemoveButton} from '../../Layouts/Accordeon/RemoveButton';
15+
import {RemoveButton} from '../../RemoveButton';
1616

1717
export const CardOneOf: ObjectIndependentInput = (props) => {
1818
const {input, meta, spec, name} = props;

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@ import React from 'react';
33
import {ArrayLayoutProps, ObjectLayoutProps} from '../../../../core';
44
import {ErrorWrapper} from '../../../components';
55
import {useErrorChecker} from '../../../hooks';
6+
import {RemoveButton} from '../../RemoveButton';
67
import {SimpleVerticalAccordeon} from '../../SimpleVerticalAccordeon';
78

8-
import {RemoveButton} from './RemoveButton';
9-
109
export const Accordeon = <T extends ArrayLayoutProps | ObjectLayoutProps>({
1110
name,
1211
spec,
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@import '../../../styles/variables.scss';
2+
3+
.#{$ns}accordeon-card-form {
4+
&__accordeon-card-body {
5+
padding-right: 32px;
6+
}
7+
}
Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
3+
import {ArrayLayoutProps, ObjectLayoutProps} from '../../../../core';
4+
import {useErrorChecker} from '../../../hooks';
5+
import {block} from '../../../utils';
6+
import {AccordeonCard} from '../../AccordeonCard';
7+
import {ErrorWrapper} from '../../ErrorWrapper';
8+
import {RemoveButton} from '../../RemoveButton';
9+
10+
import './AccordeonCardForm.scss';
11+
12+
const b = block('accordeon-card-form');
13+
14+
export const AccordeonCardForm = <T extends ArrayLayoutProps | ObjectLayoutProps>({
15+
name,
16+
spec,
17+
input,
18+
children,
19+
meta,
20+
}: T): JSX.Element => {
21+
const [open, setOpen] = React.useState(Boolean(spec.viewSpec?.layoutOpen));
22+
23+
const onDrop = React.useCallback(() => {
24+
setOpen(false);
25+
input.onDrop();
26+
}, [input.onDrop, setOpen]);
27+
28+
const removeButton = React.useMemo(() => {
29+
if (spec.required || !input.value) {
30+
return null;
31+
}
32+
33+
return <RemoveButton name={name} onDrop={onDrop} />;
34+
}, [spec.required, input.value, onDrop, name]);
35+
36+
useErrorChecker({name, meta, open, setOpen});
37+
38+
return (
39+
<AccordeonCard
40+
classNameBody={b('accordeon-card-body')}
41+
name={name}
42+
header={spec.viewSpec.layoutTitle || ''}
43+
description={spec.viewSpec.layoutDescription || ''}
44+
open={open}
45+
onToggle={setOpen}
46+
headerActionsTemplate={removeButton}
47+
>
48+
<ErrorWrapper name={name} meta={meta} withoutChildErrorStyles>
49+
{children}
50+
</ErrorWrapper>
51+
</AccordeonCard>
52+
);
53+
};
19.2 KB
15.8 KB
19.1 KB
15.5 KB

0 commit comments

Comments
 (0)