Disable vanilla array buttons when readonly

packages/examples/src/example.ts

@@ -41,6 +41,7 @@ export interface ExampleDescription {
  config?: any;
  actions?: { label: string; apply: (props: StateProps) => any }[];
  i18n?: JsonFormsI18nState;
+ readonly?: boolean;
 }
 
 export interface StateProps {
@@ -51,4 +52,5 @@ export interface StateProps {
  cells?: JsonFormsCellRendererRegistryEntry[];
  config?: any;
  uischemas?: JsonFormsUISchemaRegistryEntry[];
+ readonly?: boolean;
 }

packages/examples/src/examples/arrays-with-detail.ts

@@ -24,6 +24,7 @@
 */
 import { registerExamples } from '../register';
 import { personCoreSchema } from './person';
+import { StateProps } from '../example';
 
 export const schema = {
  type: 'object',
@@ -93,12 +94,22 @@ export const data = {
  ],
 };
 
+const actions = [
+ {
+ label: 'Toggle readonly',
+ apply: (props: StateProps) => {
+ return { ...props, readonly: !props.readonly };
+ },
+ },
+];
+
 registerExamples([
  {
  name: 'array-with-detail',
  label: 'Array with detail',
  data,
  schema,
  uischema,
+ actions,
  },
 ]);

packages/examples/src/examples/arrays.ts

@@ -123,6 +123,12 @@ const actions = [
  };
  },
  },
+ {
+ label: 'Toggle readonly',
+ apply: (props: StateProps) => {
+ return { ...props, readonly: !props.readonly };
+ },
+ },
 ];
 
 registerExamples([

packages/vanilla-renderers/src/complex/TableArrayControl.tsx

@@ -83,6 +83,7 @@ class TableArrayControl extends React.Component<
  getStyleAsClassName,
  childErrors,
  translations,
+ enabled,
  } = this.props;
 
  const controlElement = uischema as ControlElement;
@@ -112,6 +113,7 @@ class TableArrayControl extends React.Component<
  <label className={labelClass}>{label}</label>
  <button
  type='button'
+ disabled={!enabled}
  className={buttonClass}
  onClick={addItem(path, createDefaultValue(schema, rootSchema))}
  >
@@ -216,6 +218,7 @@ class TableArrayControl extends React.Component<
  <td>
  <button
  type='button'
+ disabled={!enabled}
  aria-label={translations.removeAriaLabel}
  onClick={() => {
  if (

packages/vanilla-renderers/src/complex/array/ArrayControlRenderer.tsx

@@ -58,6 +58,7 @@ export const ArrayControl = ({
  renderers,
  rootSchema,
  translations,
+ enabled,
 }: ArrayControlProps & VanillaRendererProps) => {
  const controlElement = uischema as ControlElement;
  const childUiSchema = useMemo(
@@ -98,6 +99,7 @@ export const ArrayControl = ({
  <button
  type='button'
  className={buttonClassAdd}
+ disabled={!enabled}
  onClick={addItem(path, createDefaultValue(schema, rootSchema))}
  >
  Add to {label}
@@ -121,6 +123,7 @@ export const ArrayControl = ({
  <button
  type='button'
  className={buttonClassUp}
+ disabled={!enabled}
  aria-label={translations.upAriaLabel}
  onClick={() => {
  moveUp(path, index)();
@@ -131,6 +134,7 @@ export const ArrayControl = ({
  <button
  type='button'
  className={buttonClassDown}
+ disabled={!enabled}
  aria-label={translations.downAriaLabel}
  onClick={() => {
  moveDown(path, index)();
@@ -141,6 +145,7 @@ export const ArrayControl = ({
  <button
  type='button'
  className={buttonClassDelete}
+ disabled={!enabled}
  aria-label={translations.removeAriaLabel}
  onClick={() => {
  if (

packages/vanilla-renderers/test/renderers/ArrayControl.test.tsx

@@ -75,4 +75,54 @@ describe('Array control renderer', () => {
 
  expect(controls).toHaveLength(3);
  });
+
+ test('renders buttons', () => {
+ const core = initCore(fixture.schema, fixture.uischema, fixture.data);
+ const cells = [{ tester: integerCellTester, cell: IntegerCell }];
+ const wrapper = mount(
+ <JsonFormsStateProvider
+ initState={{
+ renderers: vanillaRenderers,
+ cells,
+ core,
+ uischemas: [{ tester: () => 1, uischema: { type: 'Control' } }],
+ }}
+ >
+ <ArrayControl schema={fixture.schema} uischema={fixture.uischema} />
+ </JsonFormsStateProvider>
+ );
+
+ const buttons = wrapper.find('button');
+ expect(buttons).toHaveLength(4);
+ buttons.forEach((button) => {
+ expect(button.prop('disabled')).toBe(false);
+ });
+ });
+
+ test('disabled control renders disabled buttons', () => {
+ const core = initCore(fixture.schema, fixture.uischema, fixture.data);
+ const cells = [{ tester: integerCellTester, cell: IntegerCell }];
+ const wrapper = mount(
+ <JsonFormsStateProvider
+ initState={{
+ renderers: vanillaRenderers,
+ cells,
+ core,
+ uischemas: [{ tester: () => 1, uischema: { type: 'Control' } }],
+ }}
+ >
+ <ArrayControl
+ schema={fixture.schema}
+ uischema={fixture.uischema}
+ enabled={false}
+ />
+ </JsonFormsStateProvider>
+ );
+
+ const buttons = wrapper.find('button');
+ expect(buttons).toHaveLength(4);
+ buttons.forEach((button) => {
+ expect(button.prop('disabled')).toBe(true);
+ });
+ });
 });

packages/vanilla-renderers/test/renderers/TableArrayControl.test.tsx

@@ -91,6 +91,47 @@ const fixture2 = {
  },
 };
 
+describe('Table array control', () => {
+ test('renders buttons', () => {
+ const core = initCore(fixture.schema, fixture.uischema, fixture.data);
+ const cells = [{ tester: integerCellTester, cell: IntegerCell }];
+ const wrapper = mount(
+ <JsonFormsStateProvider initState={{ core, cells }}>
+ <TableArrayControl
+ schema={fixture.schema}
+ uischema={fixture.uischema}
+ />
+ </JsonFormsStateProvider>
+ );
+
+ const buttons = wrapper.find('button');
+ expect(buttons).toHaveLength(2);
+ buttons.forEach((button) => {
+ expect(button.prop('disabled')).toBe(false);
+ });
+ });
+
+ test('disabled control renders disabled buttons', () => {
+ const core = initCore(fixture.schema, fixture.uischema, fixture.data);
+ const cells = [{ tester: integerCellTester, cell: IntegerCell }];
+ const wrapper = mount(
+ <JsonFormsStateProvider initState={{ core, cells }}>
+ <TableArrayControl
+ schema={fixture.schema}
+ uischema={fixture.uischema}
+ enabled={false}
+ />
+ </JsonFormsStateProvider>
+ );
+
+ const buttons = wrapper.find('button');
+ expect(buttons).toHaveLength(2);
+ buttons.forEach((button) => {
+ expect(button.prop('disabled')).toBe(true);
+ });
+ });
+});
+
 describe('Table array tester', () => {
  test('tester with recursive document ref only', () => {
  const control: ControlElement = {