Add ability to reorder fields in DatagridConfigurable and SimpleFormConfigurable

docs/Configurable.md

@@ -11,7 +11,9 @@ This component makes another component configurable by the end user. When users
 
 Some react-admin components are already configurable - or rather they have a configurable counterpart:
 
+- [`<DatagridConfigurable>`](./Datagrid.md#configurable)
 - [`<SimpleListConfigurable>`](./SimpleList.md#configurable)
+- [`<SimpleFormConfigurable>`](./SimpleForm.md#configurable)
 - `<PageTitleConfigurable>` - used by the `<Title>` component
 
 ## Usage

docs/Datagrid.md

@@ -800,7 +800,7 @@ const PostList = () => (
 
 ## Showing / Hiding Columns
 
-The [`<SelectColumnsButton>`](./SelectColumnsButton.md) lets users hide or show datagrid columns. 
+The [`<SelectColumnsButton>`](./SelectColumnsButton.md) component lets users hide, show, and reorder datagrid columns. 
 
 ![SelectColumnsButton](./img/SelectColumnsButton.gif)
 

docs/SelectColumnsButton.md

@@ -9,6 +9,10 @@ This button lets users show or hide columns in a Datagrid. It must be used in co
 
 ![SelectColumnsButton](./img/SelectColumnsButton.gif)
 
+## Usage 
+
+Add the `<SelectColumnsButton>` component to the `<List actions>` prop:
+
 ```jsx
 import {
     DatagridConfigurable,
@@ -36,7 +40,7 @@ const PostList = () => (
 );
 ```
 
-**Note**: `<SelectColumnsButton>` doesn't work with `<Datagrid>` - you must use `<DatagridConfigurable>` instead.
+**Note**: `<SelectColumnsButton>` doesn't work with `<Datagrid>` - you must use [`<DatagridConfigurable>`](./Datagrid.md#configurable) instead.
 
 If you want to add the `<SelectColumnsButton>` to the usual List Actions, use the following snippet:
 

packages/ra-ui-materialui/src/form/SimpleFormConfigurable.tsx

@@ -30,26 +30,26 @@ export const SimpleFormConfigurable = ({
     );
 
     React.useEffect(() => {
-        // first render, or the preference have been cleared
-        const inputs = React.Children.map(props.children, (child, index) =>
-            React.isValidElement(child)
-                ? {
-                      index: String(index),
-                      source: child.props.source,
-                      label:
-                          child.props.source || child.props.label
-                              ? child.props.label
-                              : translate(
-                                    'ra.configurable.SimpleForm.unlabeled',
-                                    {
-                                        input: index,
-                                        _: `Unlabeled input #%{input}`,
-                                    }
-                                ),
-                  }
-                : null
-        ).filter(column => column != null);
-        if (JSON.stringify(inputs) !== JSON.stringify(availableInputs)) {
+        if (availableInputs.length === 0) {
+            // first render, or the preference have been cleared
+            const inputs = React.Children.map(props.children, (child, index) =>
+                React.isValidElement(child)
+                    ? {
+                          index: String(index),
+                          source: child.props.source,
+                          label:
+                              child.props.source || child.props.label
+                                  ? child.props.label
+                                  : translate(
+                                        'ra.configurable.SimpleForm.unlabeled',
+                                        {
+                                            input: index,
+                                            _: `Unlabeled input #%{input}`,
+                                        }
+                                    ),
+                      }
+                    : null
+            ).filter(column => column != null);
             setAvailableInputs(inputs);
             setOmit(omit);
         }

packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.tsx

@@ -57,26 +57,26 @@ export const DatagridConfigurable = ({
     );
 
     React.useEffect(() => {
-        // first render, or the preference have been cleared
-        const columns = React.Children.map(props.children, (child, index) =>
-            React.isValidElement(child)
-                ? {
-                      index: String(index),
-                      source: child.props.source,
-                      label:
-                          child.props.source || child.props.label
-                              ? child.props.label
-                              : translate(
-                                    'ra.configurable.Datagrid.unlabeled',
-                                    {
-                                        column: index,
-                                        _: `Unlabeled column #%{column}`,
-                                    }
-                                ),
-                  }
-                : null
-        ).filter(column => column != null);
-        if (JSON.stringify(columns) !== JSON.stringify(availableColumns)) {
+        if (availableColumns.length === 0) {
+            // first render, or the preference have been cleared
+            const columns = React.Children.map(props.children, (child, index) =>
+                React.isValidElement(child)
+                    ? {
+                          index: String(index),
+                          source: child.props.source,
+                          label:
+                              child.props.source || child.props.label
+                                  ? child.props.label
+                                  : translate(
+                                        'ra.configurable.Datagrid.unlabeled',
+                                        {
+                                            column: index,
+                                            _: `Unlabeled column #%{column}`,
+                                        }
+                                    ),
+                      }
+                    : null
+            ).filter(column => column != null);
             setAvailableColumns(columns);
             setOmit(omit);
         }

packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.tsx

@@ -43,10 +43,9 @@ export const SelectColumnsButton = props => {
     const preferenceKey =
         props.preferenceKey || `preferences.${resource}.datagrid`;
     const [anchorEl, setAnchorEl] = React.useState(null);
-    const [availableColumns] = useStore<ConfigurableDatagridColumn[]>(
-        `${preferenceKey}.availableColumns`,
-        []
-    );
+    const [availableColumns, setAvailableColumns] = useStore<
+        ConfigurableDatagridColumn[]
+    >(`${preferenceKey}.availableColumns`, []);
     const [omit] = useStore<string[]>(`${preferenceKey}.omit`, []);
     const [columns, setColumns] = useStore<string[]>(
         `${preferenceKey}.columns`,
@@ -86,6 +85,43 @@ export const SelectColumnsButton = props => {
         }
     };
 
+    const handleMove = (index1, index2) => {
+        const index1Pos = availableColumns.findIndex(
+            // eslint-disable-next-line eqeqeq
+            field => field.index == index1
+        );
+        const index2Pos = availableColumns.findIndex(
+            // eslint-disable-next-line eqeqeq
+            field => field.index == index2
+        );
+        if (index1Pos === -1 || index2Pos === -1) {
+            return;
+        }
+        let newAvailableColumns;
+        if (index1Pos > index2Pos) {
+            newAvailableColumns = [
+                ...availableColumns.slice(0, index2Pos),
+                availableColumns[index1Pos],
+                ...availableColumns.slice(index2Pos, index1Pos),
+                ...availableColumns.slice(index1Pos + 1),
+            ];
+        } else {
+            newAvailableColumns = [
+                ...availableColumns.slice(0, index1Pos),
+                ...availableColumns.slice(index1Pos + 1, index2Pos + 1),
+                availableColumns[index1Pos],
+                ...availableColumns.slice(index2Pos + 1),
+            ];
+        }
+        setAvailableColumns(newAvailableColumns);
+        setColumns(columns =>
+            newAvailableColumns
+                .filter(column => !omit?.includes(column.source))
+                .filter(column => columns.includes(column.index))
+                .map(column => column.index)
+        );
+    };
+
     return (
         <>
             {isXSmall ? (
@@ -130,6 +166,7 @@ export const SelectColumnsButton = props => {
                             index={column.index}
                             selected={columns.includes(column.index)}
                             onToggle={handleToggle}
+                            onMove={handleMove}
                         />
                     ))}
                 </Box>

packages/ra-ui-materialui/src/preferences/FieldToggle.tsx

@@ -1,26 +1,71 @@
 import * as React from 'react';
 import { FieldTitle, useResourceContext } from 'ra-core';
 import { Switch, Typography } from '@mui/material';
+import DragIcon from '@mui/icons-material/DragIndicator';
+import { styled } from '@mui/material/styles';
 
 /**
  * UI to enable/disable a field
  */
 export const FieldToggle = props => {
-    const { selected, label, onToggle, source, index } = props;
+    const { selected, label, onToggle, onMove, source, index } = props;
     const resource = useResourceContext();
+    const dropIndex = React.useRef<number>(null);
+
+    const handleDrag = event => {
+        // imperative DOM manipulations using the native Drag API
+        const selectedItem = event.target;
+        selectedItem.classList.add('drag-active');
+        const list = selectedItem.parentNode;
+        const x = event.clientX;
+        const y = event.clientY;
+        let dropItem =
+            document.elementFromPoint(x, y) === null
+                ? selectedItem
+                : document.elementFromPoint(x, y);
+        if (dropItem.classList.contains('dragIcon')) {
+            dropItem = dropItem.parentNode;
+        }
+        if (dropItem === selectedItem) {
+            return;
+        }
+        if (list === dropItem.parentNode) {
+            dropIndex.current = dropItem.dataset.index;
+            if (dropItem === selectedItem.nextSibling) {
+                dropItem = dropItem.nextSibling;
+            }
+            list.insertBefore(selectedItem, dropItem);
+        }
+    };
+
+    const handleDragEnd = event => {
+        const selectedItem = event.target;
+        onMove(selectedItem.dataset.index, dropIndex.current);
+        selectedItem.classList.remove('drag-active');
+    };
+
+    const handleDragOver = event => {
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'move';
+    };
+
     return (
-        <div key={source}>
+        <Root
+            key={source}
+            draggable={onMove ? 'true' : undefined}
+            onDrag={onMove ? handleDrag : undefined}
+            onDragEnd={onMove ? handleDragEnd : undefined}
+            onDragOver={onMove ? handleDragOver : undefined}
+            data-index={index}
+        >
             <label htmlFor={`switch_${index}`}>
                 <Switch
                     checked={selected}
                     onChange={onToggle}
                     name={index}
                     id={`switch_${index}`}
                     size="small"
-                    sx={{
-                        mr: 0.5,
-                        ml: -0.5,
-                    }}
+                    sx={{ mr: 0.5, ml: -0.5 }}
                 />
                 <Typography variant="body2" component="span">
                     <FieldTitle
@@ -30,6 +75,29 @@ export const FieldToggle = props => {
                     />
                 </Typography>
             </label>
-        </div>
+            {onMove && (
+                <DragIcon
+                    className="dragIcon"
+                    color="disabled"
+                    fontSize="small"
+                />
+            )}
+        </Root>
     );
 };
+
+const Root = styled('div')(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    '& svg': {
+        cursor: 'move',
+    },
+    '&.drag-active': {
+        background: 'transparent',
+        color: 'transparent',
+        outline: `1px solid ${theme.palette.action.selected}`,
+        '& .MuiSwitch-root, & svg': {
+            visibility: 'hidden',
+        },
+    },
+}));

packages/ra-ui-materialui/src/preferences/FieldsSelector.tsx

@@ -13,10 +13,9 @@ export const FieldsSelector = ({
 }) => {
     const translate = useTranslate();
 
-    const [availableFields] = usePreference<SelectableField[]>(
-        availableName,
-        []
-    );
+    const [availableFields, setAvailableFields] = usePreference<
+        SelectableField[]
+    >(availableName, []);
     const [omit] = usePreference('omit', []);
 
     const [fields, setFields] = usePreference(
@@ -43,14 +42,52 @@ export const FieldsSelector = ({
         }
     };
 
+    const handleMove = (index1, index2) => {
+        const index1Pos = availableFields.findIndex(
+            // eslint-disable-next-line eqeqeq
+            field => field.index == index1
+        );
+        const index2Pos = availableFields.findIndex(
+            // eslint-disable-next-line eqeqeq
+            field => field.index == index2
+        );
+        if (index1Pos === -1 || index2Pos === -1) {
+            return;
+        }
+        let newAvailableFields;
+        if (index1Pos > index2Pos) {
+            newAvailableFields = [
+                ...availableFields.slice(0, index2Pos),
+                availableFields[index1Pos],
+                ...availableFields.slice(index2Pos, index1Pos),
+                ...availableFields.slice(index1Pos + 1),
+            ];
+        } else {
+            newAvailableFields = [
+                ...availableFields.slice(0, index1Pos),
+                ...availableFields.slice(index1Pos + 1, index2Pos + 1),
+                availableFields[index1Pos],
+                ...availableFields.slice(index2Pos + 1),
+            ];
+        }
+        setAvailableFields(newAvailableFields);
+        setFields(fields =>
+            newAvailableFields
+                .filter(field => !omit?.includes(field.source))
+                .filter(field => fields.includes(field.index))
+                .map(field => field.index)
+        );
+    };
+
     const handleHideAll = () => {
         setFields([]);
     };
     const handleShowAll = () => {
         setFields(availableFields.map(field => field.index));
     };
+
     return (
-        <div>
+        <Box pt={0.5}>
             {availableFields.map(field => (
                 <FieldToggle
                     key={field.index}
@@ -59,6 +96,7 @@ export const FieldsSelector = ({
                     index={field.index}
                     selected={fields.includes(field.index)}
                     onToggle={handleToggle}
+                    onMove={handleMove}
                 />
             ))}
             <Box display="flex" justifyContent="space-between" mx={-0.5} mt={1}>
@@ -73,7 +111,7 @@ export const FieldsSelector = ({
                     })}
                 </Button>
             </Box>
-        </div>
+        </Box>
     );
 };