Skip to content

Commit 07e5538

Browse files
gigituxgigitux
committed
fix types
1 parent 5ef8f7d commit 07e5538

File tree

9 files changed

+146
-200
lines changed

9 files changed

+146
-200
lines changed

‎packages/dataviews/src/components/dataform/stories/index.story.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -169,8 +169,10 @@ export const Default = ( {
169169

170170
const form = useMemo(
171171
() => ( {
172-
type,
173-
labelPosition,
172+
layout: {
173+
type,
174+
labelPosition,
175+
},
174176
fields: [
175177
'title',
176178
'order',
@@ -226,8 +228,10 @@ const CombinedFieldsComponent = ( {
226228

227229
const form = useMemo(
228230
() => ( {
229-
type,
230-
labelPosition,
231+
layout: {
232+
type,
233+
labelPosition,
234+
},
231235
fields: [
232236
'title',
233237
{
@@ -517,11 +521,7 @@ const CardLayoutComponent = ( {
517521
{
518522
id: 'order',
519523
label: 'Order',
520-
customStyle: {
521-
innerLayout: 'panel' as const,
522-
innerLabelPosition: 'side' as const,
523-
labelPosition: 'none' as const,
524-
},
524+
layout: 'regular' as const,
525525
},
526526
{
527527
id: 'publishing',

‎packages/dataviews/src/dataforms-layouts/card/index.tsx‎

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,19 @@
55
/**
66
* WordPress dependencies
77
*/
8-
import { useContext, useMemo, useState, useCallback } from '@wordpress/element';
9-
import { Card, CardHeader, CardBody, Button } from '@wordpress/components';
8+
import { Button, Card, CardBody, CardHeader } from '@wordpress/components';
9+
import { useCallback, useContext, useMemo, useState } from '@wordpress/element';
1010
import { chevronDown, chevronUp } from '@wordpress/icons';
1111

1212
/**
1313
* Internal dependencies
1414
*/
15-
import type { Form, FieldLayoutProps, CardFieldConfig } from '../../types';
15+
import { getFormFieldLayout } from '..';
1616
import DataFormContext from '../../components/dataform-context';
17+
import type { FieldLayoutProps, Form } from '../../types';
1718
import { DataFormLayout } from '../data-form-layout';
1819
import { isCombinedField } from '../is-combined-field';
19-
import { getFormFieldLayout } from '..';
20+
import type { CardLayout } from '../../layout-types';
2021

2122
export function useCollapsibleCard( initialIsOpen: boolean = true ) {
2223
const [ isOpen, setIsOpen ] = useState( initialIsOpen );
@@ -68,21 +69,29 @@ export function useCollapsibleCard( initialIsOpen: boolean = true ) {
6869

6970
export default function FormCardField< Item >( {
7071
data,
71-
customStyle: customStyleProp,
7272
field,
7373
onChange,
7474
hideLabelFromVision,
7575
}: FieldLayoutProps< Item > ) {
7676
const { fields } = useContext( DataFormContext );
7777

78+
const layout: CardLayout = ( field.layout as CardLayout ) ?? {
79+
type: 'card',
80+
labelPosition: 'top',
81+
opened: true,
82+
};
83+
7884
const form = useMemo( () => {
7985
if ( isCombinedField( field ) ) {
8086
return {
8187
fields: field.children.map( ( child ) => {
8288
if ( typeof child === 'string' ) {
8389
return {
8490
id: child,
85-
customStyle: customStyleProp,
91+
layout: {
92+
type: 'regular',
93+
labelPosition: 'top',
94+
},
8695
};
8796
}
8897
return child;
@@ -92,24 +101,21 @@ export default function FormCardField< Item >( {
92101
}
93102

94103
return {
95-
customStyle: customStyleProp,
96-
type: 'regular' as const,
104+
layout: {
105+
type: 'regular',
106+
labelPosition: 'top',
107+
},
97108
fields: [],
98109
};
99-
}, [ customStyleProp, field ] );
100-
101-
const customStyle =
102-
( field.customStyle as CardFieldConfig ) ??
103-
( customStyleProp as CardFieldConfig );
110+
}, [ field ] );
104111

105112
const { isOpen, CollapsibleCardHeader } = useCollapsibleCard(
106-
customStyle?.opened ?? true
113+
layout.opened ?? true
107114
);
108115

109116
if ( isCombinedField( field ) ) {
110-
const Layout = getFormFieldLayout(
111-
customStyle?.innerLayout ?? 'regular'
112-
)?.component;
117+
const Layout = getFormFieldLayout( field.layout?.type ?? 'regular' )
118+
?.component;
113119

114120
if ( ! Layout ) {
115121
return null;
@@ -134,9 +140,10 @@ export default function FormCardField< Item >( {
134140
field={ {
135141
...nestedField,
136142
// Apply inner label position for nested fields
137-
labelPosition:
138-
customStyle?.innerLabelPosition ??
139-
customStyle?.labelPosition,
143+
layout: {
144+
type: 'regular',
145+
labelPosition: 'top',
146+
},
140147
} }
141148
onChange={ onChange }
142149
hideLabelFromVision={ hideLabelFromVision }
@@ -159,7 +166,7 @@ export default function FormCardField< Item >( {
159166

160167
const cardTitle = fieldDefinition.label;
161168

162-
const Layout = getFormFieldLayout( customStyle?.innerLayout ?? 'regular' )
169+
const Layout = getFormFieldLayout( field.layout?.type ?? 'regular' )
163170
?.component;
164171

165172
if ( ! Layout ) {
@@ -168,7 +175,7 @@ export default function FormCardField< Item >( {
168175

169176
return (
170177
<Card className="dataforms-layouts-card__field">
171-
{ cardTitle && customStyle?.labelPosition !== 'none' && (
178+
{ cardTitle && layout.labelPosition !== 'none' && (
172179
<CollapsibleCardHeader className="dataforms-layouts-card__field-label">
173180
{ cardTitle }
174181
</CollapsibleCardHeader>
@@ -186,9 +193,10 @@ export default function FormCardField< Item >( {
186193
field={ {
187194
...field,
188195
// The label position for inner layouts is always none
189-
labelPosition:
190-
customStyle?.innerLabelPosition ??
191-
customStyle?.labelPosition,
196+
layout: {
197+
type: 'regular',
198+
labelPosition: 'top',
199+
},
192200
} }
193201
onChange={ onChange }
194202
hideLabelFromVision={ hideLabelFromVision }

‎packages/dataviews/src/dataforms-layouts/data-form-layout.tsx‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import { useContext, useMemo } from '@wordpress/element';
77
/**
88
* Internal dependencies
99
*/
10-
import DataFormContext from '../components/dataform-context';
11-
import normalizeFormFields from '../normalize-form-fields';
1210
import type { Form, FormField, SimpleFormField } from '../types';
1311
import { getFormFieldLayout } from './index';
12+
import DataFormContext from '../components/dataform-context';
1413
import { isCombinedField } from './is-combined-field';
14+
import normalizeFormFields from '../normalize-form-fields';
1515

1616
export function DataFormLayout< Item >( {
1717
data,
@@ -48,9 +48,9 @@ export function DataFormLayout< Item >( {
4848
);
4949

5050
return (
51-
<VStack spacing={ form?.type === 'panel' ? 2 : 4 }>
51+
<VStack spacing={ form.layout?.type === 'panel' ? 2 : 4 }>
5252
{ normalizedFormFields.map( ( formField ) => {
53-
const FieldLayout = getFormFieldLayout( formField.layout )
53+
const FieldLayout = getFormFieldLayout( formField.layout.type )
5454
?.component;
5555

5656
if ( ! FieldLayout ) {
@@ -69,19 +69,12 @@ export function DataFormLayout< Item >( {
6969
return null;
7070
}
7171

72-
const customStyle = formField.customStyle ?? form.customStyle;
73-
7472
if ( children ) {
75-
// @ts-expect-error
76-
return children( FieldLayout, {
77-
...formField,
78-
customStyle,
79-
} );
73+
return children( FieldLayout, formField );
8074
}
8175

8276
return (
8377
<FieldLayout
84-
customStyle={ formField.customStyle }
8578
key={ formField.id }
8679
data={ data }
8780
field={ formField }

‎packages/dataviews/src/dataforms-layouts/panel/index.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import type {
3131
import DataFormContext from '../../components/dataform-context';
3232
import { DataFormLayout } from '../data-form-layout';
3333
import { isCombinedField } from '../is-combined-field';
34+
import type { PanelLayout } from '../../layout-types';
3435

3536
function DropdownHeader( {
3637
title,
@@ -85,7 +86,9 @@ function PanelDropdown< Item >( {
8586
const form = useMemo( () => {
8687
if ( isCombinedField( field ) ) {
8788
return {
88-
type: 'regular' as const,
89+
layout: {
90+
type: 'regular',
91+
},
8992
fields: field.children.map( ( child ) => {
9093
if ( typeof child === 'string' ) {
9194
return {
@@ -98,7 +101,9 @@ function PanelDropdown< Item >( {
98101
}
99102
// If not explicit children return the field id itself.
100103
return {
101-
type: 'regular' as const,
104+
layout: {
105+
type: 'regular',
106+
},
102107
fields: [ { id: field.id } ],
103108
};
104109
}, [ field ] );
@@ -209,7 +214,12 @@ export default function FormPanelField< Item >( {
209214
return null;
210215
}
211216

212-
const labelPosition = field.labelPosition ?? 'side';
217+
const layout: PanelLayout = ( field.layout as PanelLayout ) ?? {
218+
type: 'panel',
219+
labelPosition: 'side',
220+
};
221+
222+
const labelPosition = layout.labelPosition;
213223
const labelClassName = clsx(
214224
'dataforms-layouts-panel__field-label',
215225
`dataforms-layouts-panel__field-label--label-position-${ labelPosition }`

‎packages/dataviews/src/dataforms-layouts/regular/index.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import type { Form, FieldLayoutProps } from '../../types';
2121
import DataFormContext from '../../components/dataform-context';
2222
import { DataFormLayout } from '../data-form-layout';
2323
import { isCombinedField } from '../is-combined-field';
24+
import type { RegularLayout } from '../../layout-types';
2425

2526
function Header( { title }: { title: string } ) {
2627
return (
@@ -54,12 +55,18 @@ export default function FormRegularField< Item >( {
5455
}
5556
return child;
5657
} ),
57-
type: 'regular' as const,
58+
layout: {
59+
type: 'regular',
60+
labelPosition: 'top',
61+
},
5862
};
5963
}
6064

6165
return {
62-
type: 'regular' as const,
66+
layout: {
67+
type: 'regular',
68+
labelPosition: 'top',
69+
},
6370
fields: [],
6471
};
6572
}, [ field ] );
@@ -79,7 +86,12 @@ export default function FormRegularField< Item >( {
7986
);
8087
}
8188

82-
const labelPosition = field.labelPosition ?? 'top';
89+
const layout: RegularLayout = ( field.layout as RegularLayout ) ?? {
90+
type: 'regular',
91+
labelPosition: 'top',
92+
};
93+
94+
const labelPosition = layout.labelPosition;
8395
const fieldDefinition = fields.find(
8496
( fieldDef ) => fieldDef.id === field.id
8597
);

‎packages/dataviews/src/layout-types.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
export type LayoutType = 'regular' | 'panel' | 'card';
2+
export type LabelPosition = 'top' | 'side' | 'none';
3+
4+
export type RegularLayout = {
5+
type: 'regular';
6+
labelPosition: LabelPosition;
7+
};
8+
9+
export type PanelLayout = {
10+
type: 'panel';
11+
labelPosition: LabelPosition;
12+
};
13+
14+
export type CardLayout = {
15+
type: 'card';
16+
labelPosition: Extract< LabelPosition, 'top' | 'none' >;
17+
opened: boolean;
18+
};
19+
20+
export type Layout = RegularLayout | PanelLayout | CardLayout;

0 commit comments

Comments
 (0)