fix array actions

kchobantonov · kchobantonov · commit 67fdc56bb003 · 2024-12-01T06:48:08.000-05:00
diff --git a/packages/antd-renderers/src/additional/ListWithDetailMasterItem.tsx b/packages/antd-renderers/src/additional/ListWithDetailMasterItem.tsx
@@ -64,19 +64,16 @@ export const ListWithDetailMasterItem = ({
       key={index}
       onClick={handleSelect(index)}
       style={listItemStyle}
-      actions={
-        enabled && !disableRemove
-          ? [
-              <Tooltip title={translations.removeTooltip} key='action_remove'>
-                <Button
-                  aria-label={translations.removeAriaLabel}
-                  icon={<DeleteFilled rev={undefined} />}
-                  onClick={removeItem(path, index)}
-                />
-              </Tooltip>,
-            ]
-          : []
-      }
+      actions={[
+        <Tooltip title={translations.removeTooltip} key='action_remove'>
+          <Button
+            disabled={!enabled || disableRemove}
+            aria-label={translations.removeAriaLabel}
+            icon={<DeleteFilled rev={undefined} />}
+            onClick={removeItem(path, index)}
+          />
+        </Tooltip>,
+      ]}
     >
       <List.Item.Meta
         style={{ marginLeft: '8px' }}
diff --git a/packages/antd-renderers/src/complex/TableControl.tsx b/packages/antd-renderers/src/complex/TableControl.tsx
@@ -159,6 +159,7 @@ interface ActionCellProps {
   rowIndex: number;
   moveUpCreator: (path: string, position: number) => () => void;
   moveDownCreator: (path: string, position: number) => () => void;
+  enabled: boolean;
   enableUp: boolean;
   enableDown: boolean;
   showSortButtons: boolean;
@@ -173,6 +174,7 @@ const ActionCell = ({
   openDeleteDialog,
   moveUpCreator,
   moveDownCreator,
+  enabled,
   enableUp,
   enableDown,
   showSortButtons,
@@ -199,7 +201,7 @@ const ActionCell = ({
               aria-label={translations.upAriaLabel}
               icon={<ArrowUpOutlined rev={undefined} />}
               onClick={moveUp}
-              disabled={!enableUp}
+              disabled={!enabled || !enableUp}
             />
           </Tooltip>
           <Tooltip title={translations.down}>
@@ -208,20 +210,19 @@ const ActionCell = ({
               aria-label={translations.downAriaLabel}
               icon={<ArrowDownOutlined rev={undefined} />}
               onClick={moveDown}
-              disabled={!enableDown}
+              disabled={!enabled || !enableDown}
             />
           </Tooltip>
         </>
       ) : null}
-      {!disableRemove ? (
-        <Tooltip title={translations.removeTooltip}>
-          <Button
-            aria-label={translations.removeAriaLabel}
-            icon={<DeleteFilled rev={undefined} />}
-            onClick={() => openDeleteDialog(childPath, rowIndex)}
-          />
-        </Tooltip>
-      ) : null}
+      <Tooltip title={translations.removeTooltip}>
+        <Button
+          disabled={!enabled || disableRemove}
+          aria-label={translations.removeAriaLabel}
+          icon={<DeleteFilled rev={undefined} />}
+          onClick={() => openDeleteDialog(childPath, rowIndex)}
+        />
+      </Tooltip>
     </div>
   );
 };
diff --git a/packages/antd-renderers/src/complex/TableToolbar.tsx b/packages/antd-renderers/src/complex/TableToolbar.tsx
@@ -85,27 +85,21 @@ const TableToolbar = React.memo(function TableToolbar({
       size='small'
       type='inner'
       title={renderTitle(label, errors, description)}
-      extra={
-        enabled && !disableAdd
-          ? [
-              <Tooltip
-                key='tooltip-add'
-                title={translations.addTooltip}
-                placement='bottom'
-              >
-                <Button
-                  aria-label={translations.addAriaLabel}
-                  onClick={addItem(
-                    path,
-                    createDefaultValue(schema, rootSchema)
-                  )}
-                  shape='circle'
-                  icon={<PlusOutlined rev={undefined} />}
-                />
-              </Tooltip>,
-            ]
-          : []
-      }
+      extra={[
+        <Tooltip
+          key='tooltip-add'
+          title={translations.addTooltip}
+          placement='bottom'
+        >
+          <Button
+            disabled={!enabled || disableAdd}
+            aria-label={translations.addAriaLabel}
+            onClick={addItem(path, createDefaultValue(schema, rootSchema))}
+            shape='circle'
+            icon={<PlusOutlined rev={undefined} />}
+          />
+        </Tooltip>,
+      ]}
     >
       {children}
     </Card>
diff --git a/packages/antd-renderers/src/layouts/ArrayLayout.tsx b/packages/antd-renderers/src/layouts/ArrayLayout.tsx
@@ -50,13 +50,20 @@ import {
   Tooltip,
   Typography,
 } from 'antd';
-import get from 'lodash/get';
 import map from 'lodash/map';
 import merge from 'lodash/merge';
 import range from 'lodash/range';
 import React, { ComponentType, useCallback, useMemo, useState } from 'react';
 import { ArrayLayoutToolbar } from './ArrayToolbar';
 
+interface ExtraProps {
+  rowIndex: number;
+  enableUp: boolean;
+  enableDown: boolean;
+  showSortButtons: boolean;
+  disableRemove?: boolean;
+}
+
 const ArrayLayoutComponent = (
   props: { ctx: JsonFormsStateContext } & ArrayLayoutProps & {
       translations: ArrayTranslations;
@@ -111,41 +118,55 @@ const ArrayLayoutComponent = (
     return style;
   }, [expanded]);
 
-  const getExtra = (data: number, index: number) => {
+  const getExtra = ({
+    rowIndex,
+    enableUp,
+    enableDown,
+    showSortButtons,
+    disableRemove,
+  }: ExtraProps) => {
     return (
       <>
-        {showSortButtons && enabled ? (
+        {showSortButtons ? (
           <>
-            <Tooltip key='tooltip-up' title={translations.up}>
+            <Tooltip title={translations.up}>
               <Button
-                onClick={moveUp(path, index)}
                 shape='circle'
-                icon={<ArrowUpOutlined rev={undefined} />}
-                disabled={index == 0}
                 aria-label={translations.upAriaLabel}
+                icon={<ArrowUpOutlined rev={undefined} />}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  moveUp(path, rowIndex)();
+                }}
+                disabled={!enabled || !enableUp}
               />
             </Tooltip>
-            <Tooltip key='tooltip-down' title={translations.down}>
+            <Tooltip title={translations.down}>
               <Button
-                onClick={moveDown(path, index)}
                 shape='circle'
-                icon={<ArrowDownOutlined rev={undefined} />}
-                disabled={index >= data - 1}
                 aria-label={translations.downAriaLabel}
+                icon={<ArrowDownOutlined rev={undefined} />}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  moveDown(path, rowIndex)();
+                }}
+                disabled={!enabled || !enableDown}
               />
             </Tooltip>
           </>
         ) : null}
-        {enabled ? (
-          <Tooltip key='tooltip-remove' title={translations.removeTooltip}>
-            <Button
-              onClick={removeItems(path, [index])}
-              shape='circle'
-              icon={<DeleteFilled rev={undefined} />}
-              aria-label={translations.removeAriaLabel}
-            />
-          </Tooltip>
-        ) : null}
+        <Tooltip key='tooltip-remove' title={translations.removeTooltip}>
+          <Button
+            onClick={(event) => {
+              event.stopPropagation();
+              removeItems(path, [rowIndex])();
+            }}
+            shape='circle'
+            disabled={!enabled || disableRemove}
+            icon={<DeleteFilled rev={undefined} />}
+            aria-label={translations.removeAriaLabel}
+          />
+        </Tooltip>
       </>
     );
   };
@@ -163,11 +184,44 @@ const ArrayLayoutComponent = (
       ),
     [uischemas, schema, uischema.scope, path, uischema, rootSchema]
   );
-  const doDisableAdd = disableAdd || appliedUiSchemaOptions.disableAdd;
-  const doDisableRemove = disableRemove || appliedUiSchemaOptions.disableRemove;
-  if (doDisableRemove) {
-    // TODO
-  }
+
+  const arraySchema = Resolve.schema(rootSchema, uischema.scope, rootSchema);
+
+  const doDisableAdd =
+    disableAdd ||
+    appliedUiSchemaOptions.disableAdd ||
+    (appliedUiSchemaOptions.restrict &&
+      arraySchema !== undefined &&
+      arraySchema.maxItems !== undefined &&
+      data >= arraySchema.maxItems);
+
+  const doDisableRemove =
+    disableRemove ||
+    appliedUiSchemaOptions.disableRemove ||
+    (appliedUiSchemaOptions.restrict &&
+      arraySchema !== undefined &&
+      arraySchema.minItems !== undefined &&
+      data <= arraySchema.minItems);
+
+  const childLabelForIndex = (childPath: string, index: number) => {
+    const childLabelProp =
+      uischema.options?.childLabelProp ?? getFirstPrimitiveProp(schema);
+    if (!childLabelProp) {
+      return `${index}`;
+    }
+    const labelValue = Resolve.data(
+      props.ctx.core.data,
+      composePaths(childPath, childLabelProp)
+    );
+    if (
+      labelValue === undefined ||
+      labelValue === null ||
+      Number.isNaN(labelValue)
+    ) {
+      return '';
+    }
+    return `${labelValue}`;
+  };
 
   return (
     <ArrayLayoutToolbar
@@ -188,13 +242,12 @@ const ArrayLayoutComponent = (
       {data > 0 ? (
         <Collapse
           accordion
+          expandIconPosition='end'
           onChange={(value: any) => handleChange(value)}
           items={map(range(data), (index) => {
             const childPath = composePaths(path, `${index}`);
-            const childData = Resolve.data(props.ctx.core.data, childPath);
-            const childLabel = appliedUiSchemaOptions.elementLabelProp
-              ? get(childData, appliedUiSchemaOptions.elementLabelProp, '')
-              : get(childData, getFirstPrimitiveProp(schema), '');
+
+            const text = childLabelForIndex(childPath, index);
 
             return {
               key: String(index),
@@ -203,12 +256,20 @@ const ArrayLayoutComponent = (
                   <Avatar aria-label='Index' style={avatarStyle}>
                     {index + 1}
                   </Avatar>
-                  {!childLabel ? (
-                    <Typography.Text>{childLabel}</Typography.Text>
-                  ) : null}
+                  {text ? <Typography.Text>{text}</Typography.Text> : null}
                 </>
               ),
-              extra: <Space>{getExtra(data, index)}</Space>,
+              extra: (
+                <Space>
+                  {getExtra({
+                    rowIndex: index,
+                    enableUp: index !== 0,
+                    enableDown: index !== props.data - 1,
+                    showSortButtons: showSortButtons,
+                    disableRemove: doDisableRemove,
+                  })}
+                </Space>
+              ),
               children: (
                 <JsonFormsDispatch
                   schema={schema}
diff --git a/packages/antd-renderers/src/layouts/ArrayToolbar.tsx b/packages/antd-renderers/src/layouts/ArrayToolbar.tsx
@@ -50,21 +50,17 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
       size='small'
       type='inner'
       title={renderTitle(label, errors, description)}
-      extra={
-        enabled && !disableAdd
-          ? [
-              <Tooltip key='1' title={translations.addTooltip}>
-                <Button
-                  disabled={!enabled}
-                  aria-label={translations.addTooltip}
-                  onClick={addItem(path, createDefault())}
-                  shape='circle'
-                  icon={<PlusOutlined rev={undefined} />}
-                />
-              </Tooltip>,
-            ]
-          : []
-      }
+      extra={[
+        <Tooltip key='1' title={translations.addTooltip}>
+          <Button
+            disabled={!enabled || disableAdd}
+            aria-label={translations.addTooltip}
+            onClick={addItem(path, createDefault())}
+            shape='circle'
+            icon={<PlusOutlined rev={undefined} />}
+          />
+        </Tooltip>,
+      ]}
     >
       {children}
     </Card>
