Skip to content

Commit 6657a47

Browse files
bjoergebjoerge
committed
fixup! feat(form): add support for disabling various array input capabilities
1 parent f4a4627 commit 6657a47

File tree

7 files changed

+202
-87
lines changed

7 files changed

+202
-87
lines changed

‎dev/test-studio/schema/debug/arrayCapabilities.ts

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import {defineType} from '@sanity/types'
2+
3+
const DISABLED_ACTIONS = ['add', 'addBefore', 'addAfter', 'duplicate', 'remove', 'copy'] as const
4+
5+
export const arrayCapabilities = defineType({
6+
name: 'arrayCapabilitiesExample',
7+
type: 'document',
8+
title: 'Array Capabilities test',
9+
// icon,
10+
fields: [
11+
{
12+
name: 'title',
13+
title: 'Title',
14+
type: 'string',
15+
},
16+
{
17+
name: 'objectArray',
18+
options: {
19+
collapsible: true,
20+
collapsed: true,
21+
disableActions: DISABLED_ACTIONS,
22+
},
23+
title: 'Object array',
24+
description: `With disabledActions: ${DISABLED_ACTIONS.join(', ')}`,
25+
type: 'array',
26+
of: [
27+
{
28+
type: 'object',
29+
name: 'something',
30+
title: 'Something',
31+
fields: [{name: 'first', type: 'string', title: 'First string'}],
32+
},
33+
],
34+
},
35+
{
36+
name: 'objectArrayAsGrid',
37+
options: {
38+
layout: 'grid',
39+
collapsible: true,
40+
collapsed: true,
41+
disableActions: DISABLED_ACTIONS,
42+
},
43+
title: 'Object array with grid layout',
44+
description: `With disabledActions: ${DISABLED_ACTIONS.join(', ')}`,
45+
type: 'array',
46+
of: [
47+
{
48+
type: 'object',
49+
name: 'something',
50+
title: 'Something',
51+
fields: [{name: 'first', type: 'string', title: 'First string'}],
52+
},
53+
],
54+
},
55+
{
56+
name: 'primitiveArray',
57+
options: {
58+
collapsible: true,
59+
collapsed: true,
60+
disableActions: DISABLED_ACTIONS,
61+
},
62+
title: 'Primitive array',
63+
description: `With disabledActions: ${DISABLED_ACTIONS.join(', ')}`,
64+
type: 'array',
65+
of: [
66+
{
67+
type: 'string',
68+
title: 'A string',
69+
},
70+
{
71+
type: 'number',
72+
title: 'A number',
73+
},
74+
],
75+
},
76+
],
77+
})

‎dev/test-studio/schema/debug/simpleArrayOfObjects.js

+1-5
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,7 @@ export const simpleArrayOfObjects = {
1313
},
1414
{
1515
name: 'arrayWithObjects',
16-
options: {
17-
collapsible: true,
18-
collapsed: true,
19-
disableActions: ['add'],
20-
},
16+
options: {collapsible: true, collapsed: true},
2117
title: 'Array with named objects',
2218
description: 'This array contains objects of type as defined inline',
2319
type: 'array',

‎dev/test-studio/schema/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import conditionalFieldset from './ci/conditionalFieldset'
66
import validationTest from './ci/validationCI'
77
import actions from './debug/actions'
88
import {allNativeInputComponents} from './debug/allNativeInputComponents'
9+
import {arrayCapabilities} from './debug/arrayCapabilities'
910
import button from './debug/button'
1011
import {circularCrossDatasetReferenceTest} from './debug/circularCrossDatasetReference'
1112
import {collapsibleObjects} from './debug/collapsibleObjects'
@@ -241,6 +242,7 @@ export const schemaTypes = [
241242
recursivePopover,
242243
patchOnMountDebug,
243244
simpleArrayOfObjects,
245+
arrayCapabilities,
244246
simpleReferences,
245247
reservedFieldNames,
246248
review,

‎dev/test-studio/structure/constants.ts

+1
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ export const DEBUG_INPUT_TYPES = [
8181
'scrollBug',
8282
'select',
8383
'simpleArrayOfObjects',
84+
'arrayCapabilities',
8485
'simpleReferences',
8586
'thesis',
8687
'typeWithNoToplevelStrings',

‎packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx

+43-25
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ function getTone({
6262
return hasWarnings ? 'caution' : 'default'
6363
}
6464
const MENU_POPOVER_PROPS = {portal: true, tone: 'default'} as const
65-
65+
const EMPTY_ARRAY: never[] = []
6666
export function GridItem<Item extends ObjectItem = ObjectItem>(props: GridItemProps<Item>) {
6767
const {
6868
schemaType,
@@ -162,9 +162,48 @@ export function GridItem<Item extends ObjectItem = ObjectItem>(props: GridItemPr
162162
referenceElement: contextMenuButtonElement,
163163
})
164164

165+
const disableActions = parentSchemaType.options?.disableActions || EMPTY_ARRAY
166+
167+
const menuItems = useMemo(() => {
168+
return [
169+
!disableActions.includes('remove') && (
170+
<MenuItem
171+
text={t('inputs.array.action.remove')}
172+
tone="critical"
173+
icon={TrashIcon}
174+
onClick={onRemove}
175+
/>
176+
),
177+
!disableActions.includes('copy') && (
178+
<MenuItem text={t('inputs.array.action.copy')} icon={CopyIcon} onClick={handleCopy} />
179+
),
180+
!disableActions.includes('duplicate') && (
181+
<MenuItem
182+
text={t('inputs.array.action.duplicate')}
183+
icon={AddDocumentIcon}
184+
onClick={handleDuplicate}
185+
/>
186+
),
187+
!disableActions.includes('add') &&
188+
!disableActions.includes('addBefore') &&
189+
insertBefore.menuItem,
190+
!disableActions.includes('add') &&
191+
!disableActions.includes('addAfter') &&
192+
insertAfter.menuItem,
193+
].filter(Boolean)
194+
}, [
195+
disableActions,
196+
handleCopy,
197+
handleDuplicate,
198+
insertAfter.menuItem,
199+
insertBefore.menuItem,
200+
onRemove,
201+
t,
202+
])
203+
165204
const menu = useMemo(
166205
() =>
167-
readOnly ? null : (
206+
readOnly || menuItems.length === 0 ? null : (
168207
<>
169208
<MenuButton
170209
ref={setContextMenuButtonElement}
@@ -178,35 +217,14 @@ export function GridItem<Item extends ObjectItem = ObjectItem>(props: GridItemPr
178217
/>
179218
}
180219
id={`${props.inputId}-menuButton`}
181-
menu={
182-
<Menu>
183-
<MenuItem
184-
text={t('inputs.array.action.remove')}
185-
tone="critical"
186-
icon={TrashIcon}
187-
onClick={onRemove}
188-
/>
189-
<MenuItem
190-
text={t('inputs.array.action.copy')}
191-
icon={CopyIcon}
192-
onClick={handleCopy}
193-
/>
194-
<MenuItem
195-
text={t('inputs.array.action.duplicate')}
196-
icon={AddDocumentIcon}
197-
onClick={handleDuplicate}
198-
/>
199-
{insertBefore.menuItem}
200-
{insertAfter.menuItem}
201-
</Menu>
202-
}
220+
menu={<Menu>{menuItems}</Menu>}
203221
popover={MENU_POPOVER_PROPS}
204222
/>
205223
{insertBefore.popover}
206224
{insertAfter.popover}
207225
</>
208226
),
209-
[insertBefore, insertAfter, handleCopy, handleDuplicate, onRemove, props.inputId, readOnly, t],
227+
[readOnly, insertBefore, insertAfter, props.inputId, menuItems],
210228
)
211229

212230
const tone = getTone({readOnly, hasErrors, hasWarnings})

‎packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx

+63-55
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export type DefaultItemProps = Omit<PrimitiveItemProps, 'renderDefault'> & {
1919
}
2020

2121
const MENU_BUTTON_POPOVER_PROPS = {portal: true, tone: 'default'} as const
22+
const EMPTY_ARRAY: never[] = []
2223

2324
export const ItemRow = forwardRef(function ItemRow(
2425
props: DefaultItemProps,
@@ -73,69 +74,76 @@ export const ItemRow = forwardRef(function ItemRow(
7374

7475
const {t} = useTranslation()
7576

76-
const disableActions = parentSchemaType.options?.disableActions || []
77+
const disableActions = parentSchemaType.options?.disableActions || EMPTY_ARRAY
7778

78-
const menuItems = [
79-
!disableActions.includes('remove') && (
80-
<MenuItem
81-
key="remove"
82-
text={t('inputs.array.action.remove')}
83-
tone="critical"
84-
icon={TrashIcon}
85-
onClick={onRemove}
86-
/>
87-
),
88-
!disableActions.includes('copy') && (
89-
<MenuItem
90-
key="copy"
91-
text={t('inputs.array.action.copy')}
92-
icon={CopyIcon}
93-
onClick={handleCopy}
94-
/>
95-
),
96-
!disableActions.includes('duplicate') && (
97-
<MenuItem
98-
key="duplicate"
99-
text={t('inputs.array.action.duplicate')}
100-
icon={AddDocumentIcon}
101-
onClick={handleDuplicate}
102-
/>
103-
),
104-
!(disableActions.includes('add') || disableActions.includes('addBefore')) && (
105-
<InsertMenuGroup
106-
pos="before"
107-
types={insertableTypes}
108-
onInsert={handleInsert}
109-
text={t('inputs.array.action.add-before')}
110-
icon={InsertAboveIcon}
111-
/>
112-
),
113-
!disableActions.includes('add') &&
114-
!(disableActions.includes('addAfter') && disableActions.includes('addBefore')) && (
115-
<InsertMenuGroup
116-
pos="after"
117-
types={insertableTypes}
118-
onInsert={handleInsert}
119-
text={t('inputs.array.action.add-after')}
120-
icon={InsertBelowIcon}
79+
const menuItems = useMemo(
80+
() =>
81+
[
82+
!disableActions.includes('remove') && (
83+
<MenuItem
84+
key="remove"
85+
text={t('inputs.array.action.remove')}
86+
tone="critical"
87+
icon={TrashIcon}
88+
onClick={onRemove}
89+
/>
90+
),
91+
!disableActions.includes('copy') && (
92+
<MenuItem
93+
key="copy"
94+
text={t('inputs.array.action.copy')}
95+
icon={CopyIcon}
96+
onClick={handleCopy}
97+
/>
98+
),
99+
!disableActions.includes('duplicate') && (
100+
<MenuItem
101+
key="duplicate"
102+
text={t('inputs.array.action.duplicate')}
103+
icon={AddDocumentIcon}
104+
onClick={handleDuplicate}
105+
/>
106+
),
107+
!(disableActions.includes('add') || disableActions.includes('addBefore')) && (
108+
<InsertMenuGroup
109+
pos="before"
110+
types={insertableTypes}
111+
onInsert={handleInsert}
112+
text={t('inputs.array.action.add-before')}
113+
icon={InsertAboveIcon}
114+
/>
115+
),
116+
!disableActions.includes('add') &&
117+
!(disableActions.includes('addAfter') && disableActions.includes('addBefore')) && (
118+
<InsertMenuGroup
119+
pos="after"
120+
types={insertableTypes}
121+
onInsert={handleInsert}
122+
text={t('inputs.array.action.add-after')}
123+
icon={InsertBelowIcon}
124+
/>
125+
),
126+
].filter(Boolean),
127+
[disableActions, handleCopy, handleDuplicate, handleInsert, insertableTypes, onRemove, t],
128+
)
129+
130+
const menu = useMemo(
131+
() =>
132+
readOnly || menuItems.length === 0 ? null : (
133+
<MenuButton
134+
button={<ContextMenuButton />}
135+
id={`${inputId}-menuButton`}
136+
popover={MENU_BUTTON_POPOVER_PROPS}
137+
menu={<Menu>{menuItems}</Menu>}
121138
/>
122139
),
123-
]
124-
125-
const menu = (
126-
<MenuButton
127-
button={<ContextMenuButton />}
128-
id={`${inputId}-menuButton`}
129-
popover={MENU_BUTTON_POPOVER_PROPS}
130-
menu={<Menu>{menuItems}</Menu>}
131-
/>
140+
[inputId, menuItems, readOnly],
132141
)
133-
134142
return (
135143
<RowLayout
136144
tone={tone}
137145
readOnly={!!readOnly}
138-
menu={!readOnly && menu}
146+
menu={menu}
139147
dragHandle={sortable}
140148
presence={presence.length === 0 ? null : <FieldPresence presence={presence} maxAvatars={1} />}
141149
validation={

‎packages/sanity/src/core/form/studio/inputResolver/fieldResolver.tsx

+15-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
isReferenceSchemaType,
66
type SchemaType,
77
} from '@sanity/types'
8-
import {type ComponentType, useState} from 'react'
8+
import {type ComponentType, useMemo, useState} from 'react'
99

1010
import {ChangeIndicator} from '../../../changeIndicators'
1111
import {type DocumentFieldActionNode} from '../../../config'
@@ -81,11 +81,24 @@ function ObjectOrArrayField(field: ObjectFieldProps | ArrayFieldProps) {
8181
const documentId = usePublishedId()
8282
const focused = Boolean(field.inputProps.focused)
8383

84+
const disableActions = field.schemaType.options?.disableActions || EMPTY_ARRAY
85+
86+
const actions = useMemo(() => {
87+
return field.actions?.filter((a) => {
88+
if (a.name === 'pasteField') {
89+
return !disableActions.includes('add')
90+
}
91+
if (a.name === 'copyField') {
92+
return !disableActions.includes('copy')
93+
}
94+
return true
95+
})
96+
}, [disableActions, field.actions])
8497
return (
8598
<>
8699
{documentId && field.actions && field.actions.length > 0 && (
87100
<FieldActionsResolver
88-
actions={field.actions}
101+
actions={actions || EMPTY_ARRAY}
89102
documentId={documentId}
90103
documentType={field.schemaType.name}
91104
onActions={setFieldActionNodes}

0 commit comments

Comments
 (0)