From 234d00982693f6dc98ac79caa26cc7f09502a574 Mon Sep 17 00:00:00 2001 From: Pedro Bonamin <46196328+pedrobonamin@users.noreply.github.com> Date: Mon, 8 Apr 2024 08:20:22 +0200 Subject: [PATCH] fix(core): add readOnly prop to dragHandle (#6190) * fix(core): add readOnly prop to dragHandle * fix(core): disable tooltip on dragHandle when readOnly Signed-off-by: Fred Carlsen * fix(core): persist dragHandle in grid layout --------- Signed-off-by: Fred Carlsen Co-authored-by: Fred Carlsen --- .../inputs/ReferenceInput/ReferenceItem.tsx | 3 ++- .../ArrayOfObjectsInput/Grid/ErrorItem.tsx | 5 +++-- .../Grid/GridArrayInput.tsx | 4 +++- .../ArrayOfObjectsInput/Grid/GridItem.tsx | 3 ++- .../ArrayOfObjectsInput/List/ErrorItem.tsx | 4 +++- .../List/ListArrayInput.tsx | 1 + .../ArrayOfObjectsInput/List/PreviewItem.tsx | 3 ++- .../ArrayOfPrimitivesInput.tsx | 1 + .../arrays/ArrayOfPrimitivesInput/ItemRow.tsx | 3 ++- .../form/inputs/arrays/common/DragHandle.tsx | 21 ++++++++++++------- .../form/inputs/arrays/layouts/CellLayout.tsx | 15 +++++++++++-- .../form/inputs/arrays/layouts/RowLayout.tsx | 16 ++++++++++++-- 12 files changed, 60 insertions(+), 19 deletions(-) diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx index d3ce0e394ad..96b3aa04e50 100644 --- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx +++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx @@ -89,7 +89,7 @@ export function ReferenceItem(null) @@ -296,6 +296,7 @@ export function ReferenceItem 0 && } diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx index abdbd8de4ce..1eb7a3e0ec7 100644 --- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx +++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx @@ -13,8 +13,8 @@ import {IncompatibleItemType} from './IncompatibleItemType' const MENU_POPOVER_PROPS = {portal: true, tone: 'default'} as const -export function ErrorItem(props: {member: ArrayItemError; sortable?: boolean}) { - const {member, sortable} = props +export function ErrorItem(props: {member: ArrayItemError; sortable?: boolean; readOnly?: boolean}) { + const {member, sortable, readOnly} = props const id = useId() const {onChange} = useFormCallbacks() const {t} = useTranslation() @@ -26,6 +26,7 @@ export function ErrorItem(props: {member: ArrayItemError; sortable?: boolean}) { return ( (props: ArrayOfObjectsInp renderPreview={renderPreview} /> )} - {member.kind === 'error' && } + {member.kind === 'error' && ( + + )} ))} diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx index 450ecc3daf0..bf20ab14f0b 100644 --- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx +++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx @@ -82,7 +82,7 @@ export function GridItem(props: GridItemPr } = props const {t} = useTranslation() - const sortable = !readOnly && parentSchemaType.options?.sortable !== false + const sortable = parentSchemaType.options?.sortable !== false const insertableTypes = parentSchemaType.of const previewCardRef = useRef(null) @@ -175,6 +175,7 @@ export function GridItem(props: GridItemPr border dragHandle={sortable} selected={open} + readOnly={readOnly} > void + readOnly?: boolean }) { - const {member, sortable, onRemove} = props + const {member, sortable, onRemove, readOnly} = props const id = useId() const {t} = useTranslation() @@ -25,6 +26,7 @@ export function ErrorItem(props: { (props: ArrayOfObjectsInp )} {member.kind === 'error' && ( props.onItemRemove(member.key)} diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx index 2d2cb8d889e..32e900791d1 100644 --- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx +++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx @@ -65,7 +65,7 @@ export function PreviewItem(props: Preview } = props const {t} = useTranslation() - const sortable = !readOnly && parentSchemaType.options?.sortable !== false + const sortable = parentSchemaType.options?.sortable !== false const insertableTypes = parentSchemaType.of const previewCardRef = useRef(null) @@ -156,6 +156,7 @@ export function PreviewItem(props: Preview focused={focused} dragHandle={sortable} selected={open} + readOnly={!!readOnly} > onItemRemove(index)} diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx index 066064d16ca..75260f354b5 100644 --- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx +++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx @@ -92,8 +92,9 @@ export const ItemRow = forwardRef(function ItemRow( return ( } validation={ validation.length > 0 ? ( diff --git a/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx b/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx index ee6c3c1fe54..af8834f2244 100644 --- a/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx +++ b/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx @@ -1,14 +1,18 @@ import {useSortable} from '@dnd-kit/sortable' import {DragHandleIcon} from '@sanity/icons' import {createContext, useContext} from 'react' -import {styled} from 'styled-components' +import {css, styled} from 'styled-components' import {Button, type ButtonProps} from '../../../../../ui-components' import {useTranslation} from '../../../../i18n' -const DragHandleButton = styled(Button)<{$grid?: boolean}>` - cursor: ${(props) => (props.$grid ? 'move' : 'ns-resize')}; -` +const DragHandleButton = styled(Button)<{$grid?: boolean; disabled?: boolean}>((props) => { + const {$grid, disabled} = props + if (disabled) return css`` + return css` + cursor: ${$grid ? 'move' : 'ns-resize'}; + ` +}) export const SortableItemIdContext = createContext(null) @@ -17,13 +21,14 @@ interface DragHandleProps { size?: ButtonProps['size'] mode?: ButtonProps['mode'] paddingY?: ButtonProps['paddingY'] + readOnly: boolean } export const DragHandle = function DragHandle(props: DragHandleProps) { const id = useContext(SortableItemIdContext)! - const {listeners, attributes} = useSortable({id}) + const {mode = 'bleed', readOnly, ...rest} = props + const {listeners, attributes} = useSortable({id, disabled: readOnly}) const {t} = useTranslation() - const {mode = 'bleed', ...rest} = props return ( ) } diff --git a/packages/sanity/src/core/form/inputs/arrays/layouts/CellLayout.tsx b/packages/sanity/src/core/form/inputs/arrays/layouts/CellLayout.tsx index ccd8b1f7dc0..0bd090014fd 100644 --- a/packages/sanity/src/core/form/inputs/arrays/layouts/CellLayout.tsx +++ b/packages/sanity/src/core/form/inputs/arrays/layouts/CellLayout.tsx @@ -66,7 +66,18 @@ const Root = styled(Card)` * Use this to get the layout for grid items */ export function CellLayout(props: RowLayoutProps & ComponentProps) { - const {validation, selected, tone, presence, children, dragHandle, menu, footer, ...rest} = props + const { + validation, + selected, + tone, + presence, + children, + dragHandle, + menu, + footer, + readOnly, + ...rest + } = props return ( ) tone="inherit" data-ui="DragHandleCard" > - + )} diff --git a/packages/sanity/src/core/form/inputs/arrays/layouts/RowLayout.tsx b/packages/sanity/src/core/form/inputs/arrays/layouts/RowLayout.tsx index 11f5ccae43d..4c040927c64 100644 --- a/packages/sanity/src/core/form/inputs/arrays/layouts/RowLayout.tsx +++ b/packages/sanity/src/core/form/inputs/arrays/layouts/RowLayout.tsx @@ -16,6 +16,7 @@ interface RowLayoutProps { footer?: ReactNode selected?: boolean children?: ReactNode + readOnly: boolean } const Root = styled(Card)` @@ -42,7 +43,18 @@ const Root = styled(Card)` ` export function RowLayout(props: RowLayoutProps) { - const {validation, selected, tone, presence, focused, children, dragHandle, menu, footer} = props + const { + validation, + selected, + tone, + presence, + focused, + children, + dragHandle, + menu, + footer, + readOnly, + } = props const elementRef = useRef(null) @@ -63,7 +75,7 @@ export function RowLayout(props: RowLayoutProps) { > - {dragHandle && } + {dragHandle && } {children}