make draghandles configurable

sanity-io · Sep 20, 2024 · 3fb0ebd · 3fb0ebd
1 parent 0c886ba
commit 3fb0ebd
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 45 deletions.
diff --git a/dev/test-studio/schema/debug/simpleArrayOfObjects.js b/dev/test-studio/schema/debug/simpleArrayOfObjects.js
@@ -13,11 +13,10 @@ export const simpleArrayOfObjects = {
     },
     {
       name: 'arrayWithObjects',
-      options: {collapsible: true, collapsed: true},
+      options: {collapsible: true, collapsed: true, dragHandle: true},
       title: 'Array with named objects',
       description: 'This array contains objects of type as defined inline',
       type: 'array',
-      readOnly: true,
       of: [
         {
           type: 'object',

diff --git a/dev/test-studio/schema/standard/arrays.tsx b/dev/test-studio/schema/standard/arrays.tsx
@@ -58,6 +58,7 @@ export default defineType({
       name: 'arrayOfReferences',
       title: 'Array of references to authors',
       type: 'array',
+      options: {dragHandle: false},
       of: [{type: 'reference', to: [{type: 'author'}]}],
     },
     predefinedStringArray,
@@ -524,6 +525,7 @@ export default defineType({
       description: 'An array of multiple types. options: {layout: "grid"}',
       type: 'array',
       options: {
+        dragHandle: false,
         layout: 'grid',
       },
       of: [

diff --git a/packages/@sanity/types/src/schema/types.ts b/packages/@sanity/types/src/schema/types.ts
@@ -270,7 +270,7 @@ export interface BooleanSchemaType extends BaseSchemaType {
 export interface ArraySchemaType<V = unknown> extends BaseSchemaType {
   jsonType: 'array'
   of: (Exclude<SchemaType, ArraySchemaType> | ReferenceSchemaType)[]
-  options?: ArrayOptions<V> & {layout?: V extends string ? 'tag' : 'grid'}
+  options?: ArrayOptions<V> & {layout?: V extends string ? 'tag' : 'grid'; dragHandle?: boolean}
 }
 
 // Note: this would ideally be a type parameter in `ArraySchemaType` however

diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
@@ -99,6 +99,7 @@ export function ReferenceItem<Item extends ReferenceItemValue = ReferenceItemVal
   } = props
 
   const sortable = parentSchemaType.options?.sortable !== false
+  const showDragHandle = parentSchemaType.options?.dragHandle !== false
   const insertableTypes = parentSchemaType.of
 
   const elementRef = useRef<HTMLDivElement | null>(null)
@@ -361,7 +362,7 @@ export function ReferenceItem<Item extends ReferenceItemValue = ReferenceItemVal
         selected={selected}
         onUnselect={onUnselect}
         onSelect={onSelect}
-        dragHandle={sortable}
+        dragHandle={showDragHandle && sortable}
         selectable={selectable}
         readOnly={!!readOnly}
         presence={

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
@@ -99,6 +99,7 @@ export function GridItem<Item extends ObjectItem = ObjectItem>(props: GridItemPr
   const openPortal = open && (!treeEditing.enabled || legacyEditing)
 
   const sortable = parentSchemaType.options?.sortable !== false
+  const showDragHandle = parentSchemaType.options?.dragHandle !== false
   const insertableTypes = parentSchemaType.of
 
   const previewCardRef = useRef<FIXME | null>(null)
@@ -240,6 +241,7 @@ export function GridItem<Item extends ObjectItem = ObjectItem>(props: GridItemPr
       onUnselect={onUnselect}
       tone={tone}
       radius={2}
+      dragHandle={showDragHandle && sortable}
       border
       selectable={selectable}
       open={openPortal}

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
@@ -89,6 +89,7 @@ export function PreviewItem<Item extends ObjectItem = ObjectItem>(props: Preview
   const openPortal = open && (!treeEditing.enabled || legacyEditing)
 
   const sortable = parentSchemaType.options?.sortable !== false
+  const showDragHandle = parentSchemaType.options?.dragHandle !== false
   const insertableTypes = parentSchemaType.of
 
   const previewCardRef = useRef<HTMLDivElement | null>(null)
@@ -233,7 +234,7 @@ export function PreviewItem<Item extends ObjectItem = ObjectItem>(props: Preview
       selectable={selectable}
       presence={presence}
       validation={validation}
-      dragHandle={sortable}
+      dragHandle={showDragHandle && sortable}
       tone={tone}
       focused={focused}
       open={open}

diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx
@@ -102,6 +102,7 @@ export const ItemRow = forwardRef(function ItemRow(
       tone={tone}
       readOnly={!!readOnly}
       menu={!readOnly && menu}
+      dragHandle={sortable}
       presence={presence.length === 0 ? null : <FieldPresence presence={presence} maxAvatars={1} />}
       validation={
         validation.length > 0 ? (

diff --git a/packages/sanity/src/core/form/inputs/arrays/layouts/CellLayout.tsx b/packages/sanity/src/core/form/inputs/arrays/layouts/CellLayout.tsx
@@ -10,6 +10,7 @@ import {
 import {styled} from 'styled-components'
 
 import {SortableItemIdContext} from '../../../../../_singletons'
+import {DragHandle} from '../common/DragHandle'
 import {MOVING_ITEM_CLASS_NAME} from '../common/list'
 
 interface RowLayoutProps {
@@ -36,13 +37,7 @@ const PresenceFlex = styled(Flex)`
   height: 33px;
 `
 
-const DragHandleCard = styled(Card)`
-  position: absolute;
-  top: 0;
-  left: 0;
-`
-
-const CheckBoxCard = styled(Flex)`
+const Controls = styled(Card)`
   position: absolute;
   top: 0;
   left: 0;
@@ -54,13 +49,13 @@ const Root = styled(Card)`
   position: relative;
 
   @media (hover: hover) {
-    ${DragHandleCard} {
+    ${Controls} {
       opacity: 0;
     }
 
     &:hover,
     &:focus-within {
-      ${DragHandleCard} {
+      ${Controls} {
         opacity: 1;
       }
     }
@@ -130,7 +125,7 @@ export function CellLayout(props: RowLayoutProps & Omit<ComponentProps<typeof Ro
       <Box
         flex={1}
         onClickCapture={(e) => {
-          if (selectable && (e.metaKey || e.shiftKey)) {
+          if (e.metaKey || e.shiftKey) {
             e.preventDefault()
             e.stopPropagation()
             onSelect?.({metaKey: true, shiftKey: e.shiftKey})
@@ -140,11 +135,26 @@ export function CellLayout(props: RowLayoutProps & Omit<ComponentProps<typeof Ro
         {children}
       </Box>
 
-      <CheckBoxCard>
-        <Card as="label" display="flex" margin={0} padding={2} radius={2} tone="inherit">
-          <Checkbox checked={selected} onClick={handleCheckboxChange} />
-        </Card>
-      </CheckBoxCard>
+      <Controls
+        display="flex"
+        margin={0}
+        padding={2}
+        radius={2}
+        tone="inherit"
+        borderRight
+        borderBottom
+      >
+        <Flex align="center" gap={3}>
+          {dragHandle && (
+            <Flex>
+              <DragHandle $grid mode="ghost" readOnly={!!readOnly} />
+            </Flex>
+          )}
+          <Flex as="label">
+            <Checkbox checked={selected} onClick={handleCheckboxChange} />
+          </Flex>
+        </Flex>
+      </Controls>
 
       {presence && (
         <PresenceFlex align="center" marginX={1}>

diff --git a/packages/sanity/src/core/form/inputs/arrays/layouts/RowLayout.tsx b/packages/sanity/src/core/form/inputs/arrays/layouts/RowLayout.tsx
@@ -25,6 +25,7 @@ interface RowLayoutProps {
   readOnly: boolean
 }
 
+const Controls = styled(Flex)``
 const Root = styled(Card)`
   position: relative;
   border: 1px solid transparent;
@@ -38,11 +39,12 @@ const Root = styled(Card)`
       0 3px 14px 2px var(--card-shadow-penumbra-color),
       0 5px 5px -3px var(--card-shadow-ambient-color);
   }
-  [data-ui='DragHandleButton'] {
+  ${Controls} {
+    transition: opacity 400ms;
     opacity: 0.6;
   }
 
-  &:hover:not([readOnly]) [data-ui='DragHandleButton'] {
+  .${MOVING_ITEM_CLASS_NAME} & ${Controls}, &:hover:not([readOnly]) ${Controls} {
     opacity: 1;
   }
 
@@ -117,18 +119,20 @@ export function RowLayout(props: RowLayoutProps) {
     >
       <Stack space={1}>
         <Flex align="center" gap={1}>
-          <Flex as="label" padding={1}>
-            <Checkbox
-              readOnly={readOnly}
-              checked={!!selected}
-              onClick={handleCheckboxChange}
-              onChange={
-                // shut up, react
-                noop
-              }
-            />
-          </Flex>
-          {dragHandle && <DragHandle size="default" paddingY={3} readOnly={readOnly} />}
+          <Controls align="center">
+            <Flex as="label" padding={1}>
+              <Checkbox
+                readOnly={readOnly}
+                checked={!!selected}
+                onClick={handleCheckboxChange}
+                onChange={
+                  // shut up, react
+                  noop
+                }
+              />
+            </Flex>
+            {dragHandle && <DragHandle size="default" paddingY={3} readOnly={readOnly} />}
+          </Controls>
           <Box
             flex={1}
             onClickCapture={(e) => {
@@ -140,17 +144,6 @@ export function RowLayout(props: RowLayoutProps) {
             }}
             style={{position: 'relative'}}
           >
-            {false && (
-              <Flex
-                align="center"
-                justify="center"
-                flex={1}
-                marginLeft={-6}
-                style={{position: 'absolute', zIndex: 400, height: '100%', left: -72}}
-              >
-                {dragHandle && <DragHandle paddingY={3} paddingX={3} readOnly={readOnly} />}
-              </Flex>
-            )}
             {children}
           </Box>