From 71e3212fa7834bf1af69516a1c57bc98706503a3 Mon Sep 17 00:00:00 2001
From: Herman Wikner <wiknerherman@gmail.com>
Date: Tue, 20 Dec 2022 15:26:07 +0100
Subject: [PATCH] fix(core): add transition effect when sorting array of
 primitives

---
 .../ArrayOfPrimitivesInput.tsx                | 39 ++++++++++++++++++-
 .../core/form/inputs/arrays/common/list.tsx   | 26 ++++++++++---
 2 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesInput.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesInput.tsx
index a66dd35d583..3be7f1af51f 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesInput.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesInput.tsx
@@ -14,11 +14,25 @@ import {nearestIndexOf} from './utils/nearestIndex'
 import {ItemRow} from './ItemRow'
 import {ArrayOfPrimitivesFunctions} from './ArrayOfPrimitivesFunctions'
 
+interface State {
+  disableTransition: boolean
+}
 // Note: this should be a class component until React provides support for a hook version of getSnapshotBeforeUpdate
 /** @beta */
-export class ArrayOfPrimitivesInput extends React.PureComponent<ArrayOfPrimitivesInputProps> {
+export class ArrayOfPrimitivesInput extends React.PureComponent<
+  ArrayOfPrimitivesInputProps,
+  State
+> {
   _element: HTMLElement | null = null
 
+  constructor(props: ArrayOfPrimitivesInputProps) {
+    super(props)
+
+    this.state = {
+      disableTransition: false,
+    }
+  }
+
   handleAppend = (itemValue: PrimitiveValue) => {
     const {value = [], onIndexFocus, onItemAppend} = this.props
     onItemAppend(itemValue)
@@ -30,12 +44,26 @@ export class ArrayOfPrimitivesInput extends React.PureComponent<ArrayOfPrimitive
     onItemPrepend(itemValue)
     onIndexFocus(value.length)
   }
+
   handleSortEnd = (event: {fromIndex: number; toIndex: number}) => {
     const {onIndexFocus, onMoveItem, value} = this.props
+
     if (value) onMoveItem(event)
     onIndexFocus(event.toIndex)
   }
 
+  // Enable transition when the user starts dragging an item
+  handleItemMoveStart = () => {
+    this.setState({disableTransition: false})
+  }
+
+  // Disable transition when the user stops dragging an item.
+  // Note: there's an issue with the transition of items when the sorting is completed, so we disable the
+  // transition effect when the user stops dragging.
+  handleItemMoveEnd = () => {
+    this.setState({disableTransition: true})
+  }
+
   focus() {
     if (this._element) {
       this._element.focus()
@@ -154,13 +182,20 @@ export class ArrayOfPrimitivesInput extends React.PureComponent<ArrayOfPrimitive
               <Card padding={1} border>
                 <List
                   onItemMove={this.handleSortEnd}
+                  onItemMoveStart={this.handleItemMoveStart}
+                  onItemMoveEnd={this.handleItemMoveEnd}
                   items={membersWithSortIds.map((m) => m.id)}
                   sortable={isSortable}
                   gap={1}
                 >
                   {membersWithSortIds.map(({member, id}, index) => {
                     return (
-                      <Item key={member.key} id={id} sortable={isSortable} disableTransition>
+                      <Item
+                        key={member.key}
+                        id={id}
+                        sortable={isSortable}
+                        disableTransition={this.state.disableTransition}
+                      >
                         {member.kind === 'item' && (
                           <ArrayOfPrimitivesItem
                             member={member}
diff --git a/packages/sanity/src/core/form/inputs/arrays/common/list.tsx b/packages/sanity/src/core/form/inputs/arrays/common/list.tsx
index 548b4d3da12..2b5a60f2683 100644
--- a/packages/sanity/src/core/form/inputs/arrays/common/list.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/common/list.tsx
@@ -61,7 +61,7 @@ function sortingStrategy(axis: Axis) {
 }
 
 function SortableList(props: ListProps) {
-  const {items, axis, onItemMove, children, ...rest} = props
+  const {items, axis, onItemMove, onItemMoveStart, onItemMoveEnd, children, ...rest} = props
 
   const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, SENSOR_OPTIONS))
 
@@ -75,8 +75,10 @@ function SortableList(props: ListProps) {
           toIndex: items.indexOf(over?.id as string),
         })
       }
+
+      onItemMoveEnd?.()
     },
-    [items, onItemMove]
+    [items, onItemMove, onItemMoveEnd]
   )
   const modifiers = useMemo(
     () => [restrictToParentElementWithMargins({y: 4}), ...(axis ? [restrictToAxis(axis)] : [])],
@@ -90,6 +92,7 @@ function SortableList(props: ListProps) {
       modifiers={modifiers}
       collisionDetection={closestCenter}
       onDragEnd={handleDragEnd}
+      onDragStart={onItemMoveStart}
     >
       <SortableContext items={items} strategy={axis ? sortingStrategy(axis) : undefined}>
         <Grid {...rest}>{children}</Grid>
@@ -133,19 +136,32 @@ interface ListProps extends ComponentProps<typeof Grid> {
   axis?: Axis
   items: string[]
   onItemMove?: (event: {fromIndex: number; toIndex: number}) => void
+  onItemMoveStart?: () => void
+  onItemMoveEnd?: () => void
   children?: React.ReactNode
 }
 
 export function List(props: ListProps) {
-  const {onItemMove, sortable, ...rest} = props
+  const {onItemMove, onItemMoveEnd, onItemMoveStart, sortable, ...rest} = props
 
   // Note: this is here to make SortableList API compatible with onItemMove
   const handleSortEnd = useCallback(
-    (event: {fromIndex: number; toIndex: number}) => onItemMove?.(event),
+    (event: {fromIndex: number; toIndex: number}) => {
+      onItemMove?.(event)
+    },
     [onItemMove]
   )
 
-  return sortable ? <SortableList onItemMove={handleSortEnd} {...rest} /> : <Grid {...rest} />
+  return sortable ? (
+    <SortableList
+      onItemMove={handleSortEnd}
+      onItemMoveStart={onItemMoveStart}
+      onItemMoveEnd={onItemMoveEnd}
+      {...rest}
+    />
+  ) : (
+    <Grid {...rest} />
+  )
 }
 
 interface ItemProps {