I tried patching the package locally to see if creating a OneOfEnumCell would work but it didn’t. Here’s my code for it.
cells/OneOfEnumCell.tsx
import React, { useMemo } from 'react';
import {
EnumCellProps,
isOneOfEnumControl,
RankedTester,
rankWith,
} from '@jsonforms/core';
import {
TranslateProps,
withJsonFormsOneOfEnumCellProps,
withTranslateProps,
} from '@jsonforms/react';
import { i18nDefaults, withVanillaEnumCellProps } from '../util';
import type { VanillaRendererProps } from '../index';
export const OneOfEnumCell = (
props: EnumCellProps & VanillaRendererProps & TranslateProps
) => {
const {
data,
className,
id,
enabled,
schema,
uischema,
path,
handleChange,
options,
t,
} = props;
const noneOptionLabel = useMemo(
() => t('enum.none', i18nDefaults['enum.none'], { schema, uischema, path }),
[t, schema, uischema, path]
);
return (
<select
className={className}
id={id}
disabled={!enabled}
autoFocus={uischema.options && uischema.options.focus}
value={data || ''}
onChange={(ev) =>
handleChange(
path,
ev.target.selectedIndex === 0 ? undefined : ev.target.value
)
}
>
{[
<option value={''} key={'jsonforms.enum.none'}>
{noneOptionLabel}
</option>,
].concat(
options.map((optionValue) => (
<option
value={optionValue.value}
label={optionValue.label}
key={optionValue.value}
/>
))
)}
</select>
);
};
/**
* Default tester for enum controls.
* @type {RankedTester}
*/
export const oneOfEnumCellTester: RankedTester = rankWith(2, isOneOfEnumControl);
export default withJsonFormsOneOfEnumCellProps(
withTranslateProps(withVanillaEnumCellProps(OneOfEnumCell))
);
cells/index.ts
import BooleanCell, { booleanCellTester } from './BooleanCell';
import DateCell, { dateCellTester } from './DateCell';
import DateTimeCell, { dateTimeCellTester } from './DateTimeCell';
import EnumCell, { enumCellTester } from './EnumCell';
import OneOfEnumCell, { oneOfEnumCellTester } from './OneOfEnumCell';
import IntegerCell, { integerCellTester } from './IntegerCell';
import NumberCell, { numberCellTester } from './NumberCell';
import NumberFormatCell, { numberFormatCellTester } from './NumberFormatCell';
import SliderCell, { sliderCellTester } from './SliderCell';
import TextCell, { textCellTester } from './TextCell';
import TextAreaCell, { textAreaCellTester } from './TextAreaCell';
import TimeCell, { timeCellTester } from './TimeCell';
import * as Customizable from './CustomizableCells';
export {
BooleanCell,
booleanCellTester,
DateCell,
dateCellTester,
DateTimeCell,
dateTimeCellTester,
EnumCell,
enumCellTester,
OneOfEnumCell,
oneOfEnumCellTester,
IntegerCell,
integerCellTester,
NumberCell,
numberCellTester,
NumberFormatCell,
numberFormatCellTester,
SliderCell,
sliderCellTester,
TextCell,
textCellTester,
TextAreaCell,
textAreaCellTester,
TimeCell,
timeCellTester,
};
export { Customizable };
Is there a change I’m missing? Here’s the patch
diff --git a/src/cells/OneOfEnumCell.tsx b/src/cells/OneOfEnumCell.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3c1e8ae67475604f6a8f5c25b2610805da2ff9a5
--- /dev/null
+++ b/src/cells/OneOfEnumCell.tsx
@@ -0,0 +1,98 @@
+import React, { useMemo } from 'react';
+import {
+ EnumCellProps,
+ isOneOfEnumControl,
+ RankedTester,
+ rankWith,
+} from '@jsonforms/core';
+import {
+ TranslateProps,
+ withJsonFormsOneOfEnumCellProps,
+ withTranslateProps,
+} from '@jsonforms/react';
+import { i18nDefaults, withVanillaEnumCellProps } from '../util';
+import type { VanillaRendererProps } from '../index';
+
+export const OneOfEnumCell = (
+ props: EnumCellProps & VanillaRendererProps & TranslateProps
+) => {
+ const {
+ data,
+ className,
+ id,
+ enabled,
+ schema,
+ uischema,
+ path,
+ handleChange,
+ options,
+ t,
+ } = props;
+ const noneOptionLabel = useMemo(
+ () => t('enum.none', i18nDefaults['enum.none'], { schema, uischema, path }),
+ [t, schema, uischema, path]
+ );
+
+ return (
+ <select
+ className={className}
+ id={id}
+ disabled={!enabled}
+ autoFocus={uischema.options && uischema.options.focus}
+ value={data || ''}
+ onChange={(ev) =>
+ handleChange(
+ path,
+ ev.target.selectedIndex === 0 ? undefined : ev.target.value
+ )
+ }
+ >
+ {[
+ <option value={''} key={'jsonforms.enum.none'}>
+ {noneOptionLabel}
+ </option>,
+ ].concat(
+ options.map((optionValue) => (
+ <option
+ value={optionValue.value}
+ label={optionValue.label}
+ key={optionValue.value}
+ />
+ ))
+ )}
+ </select>
+ );
+};
+/**
+ * Default tester for enum controls.
+ * @type {RankedTester}
+ */
+export const oneOfEnumCellTester: RankedTester = rankWith(2, isOneOfEnumControl);
+
+export default withJsonFormsOneOfEnumCellProps(
+ withTranslateProps(withVanillaEnumCellProps(OneOfEnumCell))
+);
diff --git a/src/cells/index.ts b/src/cells/index.ts
index d098afd0c6c4cbba5325772b2a5211635e1b18c3..5abd2e30ead78792aa0876951c7417f1392bf92a 100644
--- a/src/cells/index.ts
+++ b/src/cells/index.ts
@@ -26,6 +26,7 @@ import BooleanCell, { booleanCellTester } from './BooleanCell';
import DateCell, { dateCellTester } from './DateCell';
import DateTimeCell, { dateTimeCellTester } from './DateTimeCell';
import EnumCell, { enumCellTester } from './EnumCell';
+import OneOfEnumCell, { oneOfEnumCellTester } from './OneOfEnumCell';
import IntegerCell, { integerCellTester } from './IntegerCell';
import NumberCell, { numberCellTester } from './NumberCell';
import NumberFormatCell, { numberFormatCellTester } from './NumberFormatCell';
@@ -44,6 +45,8 @@ export {
dateTimeCellTester,
EnumCell,
enumCellTester,
+ OneOfEnumCell,
+ oneOfEnumCellTester,
IntegerCell,
integerCellTester,
NumberCell,
