drop to action

AokiApp · Jan 27, 2024 · ef58a32 · ef58a32
1 parent 5211790
commit ef58a32
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 43 deletions.
diff --git a/packages/mantine-corporate/src/templates/ArrayFieldItemTemplate.tsx b/packages/mantine-corporate/src/templates/ArrayFieldItemTemplate.tsx
@@ -13,24 +13,8 @@ export default function ArrayFieldItemTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: ArrayFieldTemplateItemType<T, S, F>) {
-  const {
-    children,
-    className,
-    disabled,
-    hasToolbar,
-    hasCopy,
-    hasMoveDown,
-    hasMoveUp,
-    hasRemove,
-    index,
-    onCopyIndexClick,
-    onDropIndexClick,
-    readonly,
-    uiSchema,
-    registry,
-  } = props;
-  const { CopyButton, RemoveButton } = registry.templates.ButtonTemplates;
-  const isDraggable = !disabled && !readonly && hasToolbar && (hasMoveDown || hasMoveUp);
+  const { children, className, disabled, hasToolbar, index, readonly } = props;
+  const isDraggable = !disabled && !readonly && hasToolbar;
   const key = useId();
   return (
     <Draggable index={index} draggableId={key} key={key} isDragDisabled={!isDraggable}>
@@ -40,34 +24,13 @@ export default function ArrayFieldItemTemplate<
           {...provided.draggableProps}
           className={`armt-template-arrayfielditem ${className}`}
         >
-          <Group style={{ flexGrow: 1 }}>
+          <Group style={{ flexGrow: 1 }} gap={0}>
             {isDraggable && (
               <div {...provided.dragHandleProps} className={classes.dragHandle}>
                 <IconGripVertical style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
               </div>
             )}
             <Box style={{ flexGrow: 1 }}>{children}</Box>
-            <Stack gap='4px'>
-              {hasRemove && (
-                <RemoveButton
-                  className='armt-template-afit-remove'
-                  disabled={disabled || readonly}
-                  onClick={onDropIndexClick(index)}
-                  uiSchema={uiSchema}
-                  registry={registry}
-                />
-              )}
-
-              {hasCopy && (
-                <CopyButton
-                  className='armt-template-afit-copy'
-                  disabled={disabled || readonly}
-                  onClick={onCopyIndexClick(index)}
-                  uiSchema={uiSchema}
-                  registry={registry}
-                />
-              )}
-            </Stack>
           </Group>
         </Box>
       )}

diff --git a/packages/mantine-corporate/src/templates/ArrayFieldTemplate.module.css b/packages/mantine-corporate/src/templates/ArrayFieldTemplate.module.css
@@ -8,4 +8,43 @@
   color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-1));
   width: 32px;
   height: 32px;
+}
+.dropToAction {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 0.5rem;
+  flex-grow: 1;
+  border-radius: var(--mantine-radius-sm);
+  padding: 4px;
+  border: 1px solid transparent;
+  opacity: 0.5;
+
+  .dtaIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .dtaLabel {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+
+  }
+  &.dtaDraggingOver {
+    opacity: 1;
+  }
+}
+.dropToCopy {
+  color: var(--mantine-color-blue-6);
+  border-color: var(--mantine-color-blue-6);
+  background-color: var(--mantine-color-blue-0);
+}
+.dropToRemove {
+  color: var(--mantine-color-red-6);
+  border-color: var(--mantine-color-red-6);
+  background-color: var(--mantine-color-red-0);
 }
diff --git a/packages/mantine-corporate/src/templates/ArrayFieldTemplate.tsx b/packages/mantine-corporate/src/templates/ArrayFieldTemplate.tsx
@@ -10,6 +10,9 @@ import {
 
 import { Group, Box, Divider } from '@mantine/core';
 import { DragDropContext, Droppable } from '@hello-pangea/dnd';
+import { useState } from 'react';
+import classes from './ArrayFieldTemplate.module.css';
+import { IconCopy, IconTrash } from '@tabler/icons-react';
 
 /** The `ArrayFieldTemplate` component is the template used to render all items in an array.
  *
@@ -79,18 +82,28 @@ export default function ArrayFieldTemplate<
     </Group>
   );
 
+  const [isDragging, setIsDragging] = useState(false);
+
   let arrItems;
   if (items && items.length > 0) {
     arrItems = (
       <>
         <Divider my='xs' label={`${_title || '配列'} の先頭`} labelPosition='center' />
         <DragDropContext
+          onBeforeCapture={() => setIsDragging(true)}
           onDragEnd={({ destination, source }) => {
-            // ad hoc solution for calling onReorderClick
-            items[0].onReorderClick(source.index, destination?.index || 0)();
+            setIsDragging(false);
+            if (destination?.droppableId === 'array') {
+              // ad hoc solution for calling onReorderClick
+              items[0].onReorderClick(source.index, destination?.index || 0)();
+            } else if (destination?.droppableId === 'copy') {
+              items[0].onCopyIndexClick(source.index)();
+            } else if (destination?.droppableId === 'remove') {
+              items[0].onDropIndexClick(source.index)();
+            }
           }}
         >
-          <Droppable droppableId='dnd-list' direction='vertical'>
+          <Droppable droppableId='array' direction='vertical'>
             {(provided) => (
               <div {...provided.droppableProps} ref={provided.innerRef}>
                 {items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => {
@@ -100,6 +113,16 @@ export default function ArrayFieldTemplate<
               </div>
             )}
           </Droppable>
+          {items[0].hasToolbar && isDragging && (
+            <Group m='sm'>
+              {items[0].hasCopy && (
+                <DropToAction icon={<IconCopy />} label='コピー' className={classes.dropToCopy} droppableId='copy' />
+              )}
+              {items[0].hasRemove && (
+                <DropToAction icon={<IconTrash />} label='削除' className={classes.dropToRemove} droppableId='remove' />
+              )}
+            </Group>
+          )}
         </DragDropContext>
         <Divider my='xs' label={`${_title || '配列'} の末尾`} labelPosition='center' />
       </>
@@ -126,3 +149,30 @@ export default function ArrayFieldTemplate<
     </Box>
   );
 }
+
+function DropToAction({
+  icon,
+  label,
+  className,
+  droppableId,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  className: string;
+  droppableId: string;
+}) {
+  return (
+    <Droppable droppableId={droppableId} direction='horizontal'>
+      {(provided, snapshot) => (
+        <div
+          className={`${classes.dropToAction} ${className} ${snapshot.isDraggingOver && classes.dtaDraggingOver}`}
+          {...provided.droppableProps}
+          ref={provided.innerRef}
+        >
+          <div className={classes.dtaIcon}>{icon}</div>
+          <div className={classes.dtaLabel}>{label}</div>
+        </div>
+      )}
+    </Droppable>
+  );
+}