Merge pull request rowyio#1112 from saravanan-inc/reorderImageFileField

Reorder image file field
DwareLab · Feb 22, 2023 · eee88d9 · eee88d9
2 parents a160407 + e41e481
commit eee88d9
Show file tree

Hide file tree

Showing 7 changed files with 579 additions and 275 deletions.
diff --git a/src/components/Table/Styled/StyledCell.tsx b/src/components/Table/Styled/StyledCell.tsx
@@ -19,6 +19,17 @@ export const StyledCell = styled("div")(({ theme }) => ({
  alignItems: "center",
  },
 
+ "& > .cell-contents-contain-none": {
+ padding: "0 var(--cell-padding)",
+ width: "100%",
+ height: "100%",
+ contain: "none",
+ overflow: "hidden",
+
+ display: "flex",
+ alignItems: "center",
+ },
+
  backgroundColor: "var(--cell-background-color)",
 
  border: `1px solid ${theme.palette.divider}`,

diff --git a/src/components/Table/TableCell/withRenderTableCell.tsx b/src/components/Table/TableCell/withRenderTableCell.tsx
@@ -192,7 +192,7 @@ export default function withRenderTableCell(
  if (editorMode === "inline") {
  return (
  <div
- className="cell-contents"
+ className="cell-contents-contain-none"
  style={options.disablePadding ? { padding: 0 } : undefined}
  ref={displayCellRef}
  >

diff --git a/src/components/fields/File/EditorCell.tsx b/src/components/fields/File/EditorCell.tsx
@@ -1,4 +1,3 @@
-import { useCallback } from "react";
 import { IEditorCellProps } from "@src/components/fields/types";
 import { useSetAtom } from "jotai";
 
@@ -15,6 +14,15 @@ import { DATE_TIME_FORMAT } from "@src/constants/dates";
 import { FileValue } from "@src/types/table";
 import useFileUpload from "./useFileUpload";
 
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import {
+ DragDropContext,
+ Droppable,
+ Draggable,
+ DropResult,
+ ResponderProvided,
+} from "react-beautiful-dnd";
+
 export default function File_({
  column,
  value,
@@ -25,18 +33,49 @@ export default function File_({
 }: IEditorCellProps) {
  const confirm = useSetAtom(confirmDialogAtom, projectScope);
 
- const { loading, progress, handleDelete, localFiles, dropzoneState } =
- useFileUpload(_rowy_ref, column.key, { multiple: true });
+ const {
+ loading,
+ progress,
+ handleDelete,
+ localFiles,
+ dropzoneState,
+ handleUpdate,
+ } = useFileUpload(_rowy_ref, column.key, { multiple: true });
 
  const { isDragActive, getRootProps, getInputProps } = dropzoneState;
  const dropzoneProps = getRootProps();
+
+ const onDragEnd = (result: DropResult, provided: ResponderProvided) => {
+ const { destination, source } = result;
+
+ if (!destination) {
+ return;
+ }
+
+ if (
+ destination.droppableId === source.droppableId &&
+ destination.index === source.index
+ ) {
+ return;
+ }
+
+ const newValue = Array.from(value);
+
+ newValue.splice(source.index, 1);
+ newValue.splice(destination.index, 0, value[source.index]);
+
+ handleUpdate([...newValue]);
+ };
+
  return (
  <Stack
  direction="row"
  alignItems="center"
  sx={{
  width: "100%",
  height: "100%",
+ py: 0,
+ pl: 1,
 
  ...(isDragActive
  ? {
@@ -54,70 +93,110 @@ export default function File_({
  tabIndex={tabIndex}
  onClick={undefined}
  >
- <ChipList rowHeight={rowHeight}>
- {Array.isArray(value) &&
- value.map((file: FileValue) => (
- <Grid
- item
- key={file.downloadURL}
- style={
- // Truncate so multiple files still visible
- value.length > 1 ? { maxWidth: `calc(100% - 12px)` } : {}
- }
- >
- <Tooltip
- title={`File last modified ${format(
- file.lastModifiedTS,
- DATE_TIME_FORMAT
- )}`}
+ <DragDropContext onDragEnd={onDragEnd}>
+ <Droppable droppableId="image-droppable" direction="horizontal">
+ {(provided) => (
+ <ChipList rowHeight={rowHeight}>
+ <Grid
+ container
+ spacing={0.5}
+ wrap="nowrap"
+ ref={provided.innerRef}
+ {...provided.droppableProps}
  >
- <Chip
- label={file.name}
- icon={<FileIcon />}
- sx={{
- "& .MuiChip-label": {
- lineHeight: 5 / 3,
- },
- }}
- onClick={(e: any) => e.stopPropagation()}
- component="a"
- href={file.downloadURL}
- target="_blank"
- rel="noopener noreferrer"
- clickable
- onDelete={
- disabled
- ? undefined
- : (e) => {
- e.preventDefault();
- confirm({
- handleConfirm: () => handleDelete(file),
- title: "Delete file?",
- body: "This file cannot be recovered after",
- confirm: "Delete",
- confirmColor: "error",
- });
- }
- }
- tabIndex={tabIndex}
- style={{ width: "100%", cursor: "pointer" }}
- />
- </Tooltip>
- </Grid>
- ))}
- {localFiles &&
- localFiles.map((file) => (
- <Grid item key={file.name}>
- <Chip
- icon={<FileIcon />}
- label={file.name}
- deleteIcon={
- <CircularProgressOptical size={20} color="inherit" />
- }
- />
- </Grid>
- ))}
- </ChipList>
+ {Array.isArray(value) &&
+ value.map((file: FileValue, i) => (
+ <Draggable
+ key={file.downloadURL}
+ draggableId={file.downloadURL}
+ index={i}
+ >
+ {(provided) => (
+ <Grid
+ item
+ ref={provided.innerRef}
+ {...provided.draggableProps}
+ style={{
+ display: "flex",
+ alignItems: "center",
+ // Truncate so multiple files still visible
+ maxWidth: `${
+ value.length > 1 ? "calc(100% - 12px)" : "initial"
+ }`,
+ ...provided.draggableProps.style,
+ }}
+ >
+ {value.length > 1 && (
+ <div
+ {...provided.dragHandleProps}
+ style={{
+ display: "flex",
+ alignItems: "center",
+ }}
+ >
+ <DragIndicatorIcon />
+ </div>
+ )}
+ <Tooltip
+ title={`File last modified ${format(
+ file.lastModifiedTS,
+ DATE_TIME_FORMAT
+ )}`}
+ >
+ <Chip
+ label={file.name}
+ icon={<FileIcon />}
+ sx={{
+ "& .MuiChip-label": {
+ lineHeight: 5 / 3,
+ },
+ }}
+ onClick={(e: any) => e.stopPropagation()}
+ component="a"
+ href={file.downloadURL}
+ target="_blank"
+ rel="noopener noreferrer"
+ clickable
+ onDelete={
+ disabled
+ ? undefined
+ : (e) => {
+ e.preventDefault();
+ confirm({
+ handleConfirm: () => handleDelete(file),
+ title: "Delete file?",
+ body: "This file cannot be recovered after",
+ confirm: "Delete",
+ confirmColor: "error",
+ });
+ }
+ }
+ tabIndex={tabIndex}
+ style={{ width: "100%", cursor: "pointer" }}
+ />
+ </Tooltip>
+ </Grid>
+ )}
+ </Draggable>
+ ))}
+ </Grid>
+
+ {localFiles &&
+ localFiles.map((file) => (
+ <Grid item key={file.name}>
+ <Chip
+ icon={<FileIcon />}
+ label={file.name}
+ deleteIcon={
+ <CircularProgressOptical size={20} color="inherit" />
+ }
+ />
+ </Grid>
+ ))}
+ </ChipList>
+ )}
+ </Droppable>
+ </DragDropContext>
 
  {!loading ? (
  !disabled && (