How to use @jsonforms/react - 10 common examples

return (
    <input value="{data" type="date"> handleChange(path, ev.target.value)}
      className={className}
      id={id}
      disabled={!enabled}
      autoFocus={appliedUiSchemaOptions.focus}
      fullWidth={true}
    /&gt;
  );
};
export const materialDateCellTester: RankedTester = rankWith(2, isDateControl);

export default withJsonFormsCellProps(MaterialDateCell);

import React from 'react';
import {
  CellProps,
  isTimeControl,
  RankedTester,
  rankWith,
  WithClassname
} from '@jsonforms/core';
import { withJsonFormsCellProps } from '@jsonforms/react';
import { MuiInputTime } from '../mui-controls/MuiInputTime';

export const MaterialTimeCell = (props: CellProps & WithClassname) => (
  
);
export const materialTimeCellTester: RankedTester = rankWith(2, isTimeControl);
export default withJsonFormsCellProps(MaterialTimeCell);

RankedTester,
  rankWith,
  WithClassname
} from '@jsonforms/core';
import { withJsonFormsCellProps } from '@jsonforms/react';
import { MuiInputInteger } from '../mui-controls/MuiInputInteger';

export const MaterialIntegerCell = (props: CellProps & WithClassname) => (
  
);
export const materialIntegerCellTester: RankedTester = rankWith(
  2,
  isIntegerControl
);

export default withJsonFormsCellProps(MaterialIntegerCell);

id={id}
      disabled={!enabled}
      autoFocus={appliedUiSchemaOptions.focus}
      maxLength={appliedUiSchemaOptions.restrict ? maxLength : undefined}
      size={appliedUiSchemaOptions.trim ? maxLength : undefined}
    />
  );
};

/**
 * Default tester for text-based/string controls.
 * @type {RankedTester}
 */
export const textCellTester: RankedTester = rankWith(1, isStringControl);

export default withJsonFormsCellProps(TextCell);

import { MuiInputText } from '../mui-controls/MuiInputText';

export const MaterialTextCell = (props: CellProps & WithClassname) => (
  
);

/**
 * Default tester for text-based/string controls.
 * @type {RankedTester}
 */
export const materialTextCellTester: RankedTester = rankWith(
  1,
  isStringControl
);

export default withJsonFormsCellProps(MaterialTextCell);

value={data || schema.default}
        onChange={ev => handleChange(path, Number(ev.target.value))}
        className={className}
        id={id}
        disabled={!enabled}
        autoFocus={uischema.options && uischema.options.focus}
        style={{ flex: '1' }}
      />
      <label style="{{">{data || schema.default}</label>
    
  );
};

export const sliderCellTester: RankedTester = rankWith(4, isRangeControl);

export default withJsonFormsCellProps(SliderCell);

}
        className={className}
        id={id}
        disabled={!enabled}
        autoFocus={uischema.options && uischema.options.focus}
      />
    );
  };

/**
 * Default tester for boolean controls.
 * @type {RankedTester}
 */
export const booleanCellTester: RankedTester = rankWith(2, isBooleanControl);

export default withJsonFormsCellProps(BooleanCell);

id={id}
      disabled={!enabled}
      autoFocus={uischema.options && uischema.options.focus}
      maxLength={uischema.options && uischema.options.restrict ? maxLength : undefined}
      size={uischema.options && uischema.options.trim ? maxLength : undefined}
    />
  );
};

/**
 * Default tester for text-based/string controls.
 * @type {RankedTester}
 */
export const numberFormatCellTester: RankedTester = rankWith(4, isNumberFormatControl);

export default withJsonFormsCellProps(NumberFormatCell);

onChange={ev => handleChange(path, ev.target.value)}
      className={className}
      id={id}
      disabled={!enabled}
      autoFocus={uischema.options && uischema.options.focus}
    />
  );
};

/**
 * Tester for a multi-line string control.
 * @type {RankedTester}
 */
export const textAreaCellTester: RankedTester = rankWith(2, isMultiLineControl);

export default withJsonFormsCellProps(TextAreaCell);

value={data || ''}
      onChange={ev => handleChange(path, ev.target.value)}
      className={className}
      id={id}
      disabled={!enabled}
      autoFocus={uischema.options && uischema.options.focus}
    />
  );
};
/**
 * Default tester for date controls.
 * @type {RankedTester}
 */
export const timeCellTester: RankedTester = rankWith(2, isTimeControl);

export default withJsonFormsCellProps(TimeCell);