@arbor-education/design-system.components 0.25.7 → 0.25.9

package/src/components/table/cellRenderers/NumberInputCellRenderer.test.tsx

@@ -0,0 +1,99 @@
+import { describe, expect, test, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import userEvent from '@testing-library/user-event';
+import type { CustomCellRendererProps } from 'ag-grid-react';
+import { NumberInputCellRenderer } from './NumberInputCellRenderer.js';
+
+const createMockProps = (overrides: Partial<CustomCellRendererProps & { value: number | null; min?: number; max?: number; disabled?: boolean }> = {}): CustomCellRendererProps => ({
+  value: 0,
+  node: { setDataValue: vi.fn() },
+  colDef: { field: 'count' },
+  ...overrides,
+} as unknown as CustomCellRendererProps);
+
+describe('NumberInputCellRenderer', () => {
+  test('renders a number input', () => {
+    render(<NumberInputCellRenderer {...createMockProps()} />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  test('renders the supplied value in the input', () => {
+    render(<NumberInputCellRenderer {...createMockProps({ value: 42 })} />);
+    expect(screen.getByRole('textbox')).toHaveValue('42');
+  });
+
+  test('renders null value as 0', () => {
+    render(<NumberInputCellRenderer {...createMockProps({ value: null })} />);
+    expect(screen.getByRole('textbox')).toHaveValue('0');
+  });
+
+  test('disables the input when disabled prop is true', () => {
+    render(<NumberInputCellRenderer {...createMockProps({ disabled: true })} />);
+    expect(screen.getByRole('textbox')).toBeDisabled();
+  });
+
+  test('minus button is disabled when value equals min', () => {
+    render(<NumberInputCellRenderer {...createMockProps({ value: 5, min: 5 })} />);
+    expect(screen.getByRole('button', { name: 'Minus button' })).toBeDisabled();
+  });
+
+  test('plus button is disabled when value equals max', () => {
+    render(<NumberInputCellRenderer {...createMockProps({ value: 10, max: 10 })} />);
+    expect(screen.getByRole('button', { name: 'Plus button' })).toBeDisabled();
+  });
+
+  test('calls node.setDataValue with the updated value when the input changes', async () => {
+    const setDataValue = vi.fn();
+    render(
+      <NumberInputCellRenderer
+        {...createMockProps({
+          value: 5,
+          node: { setDataValue } as unknown as CustomCellRendererProps['node'],
+          colDef: { field: 'count' },
+        })}
+      />,
+    );
+    setDataValue.mockClear();
+
+    await userEvent.click(screen.getByRole('button', { name: 'Plus button' }));
+
+    expect(setDataValue).toHaveBeenCalledWith('count', 6);
+  });
+
+  test('calls node.setDataValue with 0 when the input is cleared', async () => {
+    const setDataValue = vi.fn();
+    render(
+      <NumberInputCellRenderer
+        {...createMockProps({
+          value: 5,
+          node: { setDataValue } as unknown as CustomCellRendererProps['node'],
+          colDef: { field: 'count' },
+        })}
+      />,
+    );
+    setDataValue.mockClear();
+
+    await userEvent.clear(screen.getByRole('textbox'));
+
+    expect(setDataValue).toHaveBeenCalledWith('count', 0);
+  });
+
+  test('does not call node.setDataValue when colDef.field is undefined', async () => {
+    const setDataValue = vi.fn();
+    render(
+      <NumberInputCellRenderer
+        {...createMockProps({
+          value: 5,
+          node: { setDataValue } as unknown as CustomCellRendererProps['node'],
+          colDef: {},
+        })}
+      />,
+    );
+    setDataValue.mockClear();
+
+    await userEvent.click(screen.getByRole('button', { name: 'Plus button' }));
+
+    expect(setDataValue).not.toHaveBeenCalled();
+  });
+});

package/src/components/table/cellRenderers/NumberInputCellRenderer.tsx

@@ -0,0 +1,36 @@
+import type { CustomCellRendererProps } from 'ag-grid-react';
+import { NumberInput } from 'Components/formField/inputs/number/NumberInput';
+
+type NumberInputCellRendererProps = {
+  value: number | null;
+  min?: number;
+  max?: number;
+  disabled?: boolean;
+} & CustomCellRendererProps;
+
+export const NumberInputCellRenderer = (
+  props: NumberInputCellRendererProps,
+) => {
+  const { value, min, max, disabled, node, colDef = {} } = props;
+
+  return (
+    <div className="cell-input-wrapper">
+      <NumberInput
+        min={min}
+        max={max}
+        disabled={disabled}
+        value={value ?? 0}
+        onChange={(e) => {
+          if (!colDef.field) {
+            return;
+          }
+          const next = parseFloat(e.currentTarget.value);
+          node.setDataValue(
+            colDef.field,
+            Number.isFinite(next) ? next : 0,
+          );
+        }}
+      />
+    </div>
+  );
+};

package/src/index.ts

@@ -69,6 +69,7 @@ export { DSDefaultColDef } from 'Components/table/DSDefaultColDef';
 export { GridApiContext } from 'Components/table/GridApiContext';
 export { NumberCellEditor } from 'Components/table/cellEditors/NumberCellEditor';
 export { CheckboxCellRenderer } from 'Components/table/cellRenderers/CheckboxCellRenderer';
+export { NumberInputCellRenderer } from 'Components/table/cellRenderers/NumberInputCellRenderer';
 export { Table } from 'Components/table/Table';
 export { Tabs } from 'Components/tabs/Tabs';
 export { Tag } from 'Components/tag/Tag';