fix: prevent changing order of readOnly arrays (#563)

src/admin/components/forms/DraggableSection/PositionPanel/index.tsx

@@ -7,34 +7,45 @@ import './index.scss';
 const baseClass = 'position-panel';
 
 const PositionPanel: React.FC<Props> = (props) => {
-  const { moveRow, positionIndex, rowCount } = props;
+  const { moveRow, positionIndex, rowCount, readOnly } = props;
 
   const adjustedIndex = positionIndex + 1;
 
   const classes = [
     baseClass,
+    `${baseClass}__${readOnly ? 'read-only' : ''}`,
   ].filter(Boolean).join(' ');
 
   return (
     <div className={classes}>
-      <Button
-        className={`${baseClass}__move-backward ${positionIndex === 0 ? 'first-row' : ''}`}
-        buttonStyle="none"
-        icon="chevron"
-        round
-        onClick={() => moveRow(positionIndex, positionIndex - 1)}
-      />
+      {!readOnly && (
+        <Button
+          className={`${baseClass}__move-backward ${positionIndex === 0 ? 'first-row' : ''}`}
+          buttonStyle="none"
+          icon="chevron"
+          round
+          onClick={() => moveRow(positionIndex, positionIndex - 1)}
+        />
+      )}
 
       {(adjustedIndex && typeof positionIndex === 'number')
-        && <div className={`${baseClass}__current-position`}>{adjustedIndex >= 10 ? adjustedIndex : `0${adjustedIndex}`}</div>}
+        && (
+        <div
+          className={`${baseClass}__current-position`}
+        >
+          {adjustedIndex >= 10 ? adjustedIndex : `0${adjustedIndex}`}
+        </div>
+        )}
 
-      <Button
-        className={`${baseClass}__move-forward ${(positionIndex === rowCount - 1) ? 'last-row' : ''}`}
-        buttonStyle="none"
-        icon="chevron"
-        round
-        onClick={() => moveRow(positionIndex, positionIndex + 1)}
-      />
+      {!readOnly && (
+        <Button
+          className={`${baseClass}__move-forward ${(positionIndex === rowCount - 1) ? 'last-row' : ''}`}
+          buttonStyle="none"
+          icon="chevron"
+          round
+          onClick={() => moveRow(positionIndex, positionIndex + 1)}
+        />
+      )}
     </div>
   );
 };

src/admin/components/forms/DraggableSection/PositionPanel/types.ts

@@ -2,4 +2,5 @@ export type Props = {
   moveRow: (fromIndex: number, toIndex: number) => void
   positionIndex: number
   rowCount: number
+  readOnly: boolean
 }

src/admin/components/forms/DraggableSection/index.tsx

@@ -70,6 +70,7 @@ const DraggableSection: React.FC<Props> = (props) => {
                 moveRow={moveRow}
                 rowCount={rowCount}
                 positionIndex={rowIndex}
+                readOnly={readOnly}
               />
             </FieldTypeGutter>