Extend AutocompleteControl to allow custom filterOptions

* Extend AutocompleteControl * Extend enum example * Add custom autocomplete renderer for example

Author: eneufeld

packages/example/src/index.tsx

@@ -115,11 +115,13 @@ const setupStore = (
 export const renderExample = (
  renderers: { tester: RankedTester; renderer: any }[],
  cells: { tester: RankedTester; cell: any }[],
+ enhancer?: (examples: ReactExampleDescription[]) => ReactExampleDescription[],
  ...additionalStoreParams: AdditionalStoreParams[]
 ) => {
  const exampleData = enhanceExample(getExamples());
+ const enhancedExampleData = enhancer ? enhancer(exampleData) : exampleData;
  const store = setupStore(
- exampleData,
+ enhancedExampleData,
  cells,
  renderers,
  additionalStoreParams

packages/examples/src/enum.ts

@@ -39,14 +39,16 @@ export const schema = {
  type: 'string',
  oneOf: [
  {const: 'foo', title: 'Foo'},
- {const: 'bar', title: 'Bar'}
+ {const: 'bar', title: 'Bar'},
+ {const: 'foobar', title: 'FooBar'}
  ]
  },
  oneOfEnumSet: {
  type: 'string',
  oneOf: [
  {const: 'foo', title: 'Foo'},
- {const: 'bar', title: 'Bar'}
+ {const: 'bar', title: 'Bar'},
+ {const: 'foobar', title: 'FooBar'}
  ]
  }
  }

packages/material/example/CustomAutocomplete.tsx

@@ -0,0 +1,53 @@
+import {
+ ControlProps,
+ OwnPropsOfEnum,
+ RankedTester,
+ withIncreasedRank,
+ Actions
+} from '@jsonforms/core';
+import { ExtendedUnwrapped } from '../src/extended';
+import { materialAutocompleteOneOfEnumControlTester } from '../src/extended/MaterialAutocompleteOneOfEnumControl';
+import { withJsonFormsOneOfEnumProps } from '@jsonforms/react';
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import { AnyAction, Dispatch } from 'redux';
+const MyAutocompleteControl = (props: ControlProps & OwnPropsOfEnum) => {
+ return (
+ <ExtendedUnwrapped.MaterialAutocompleteOneOfEnumControl
+ {...props}
+ renderOption={option => (<Typography>{`${option?.value}\t-\t${option?.label}`}</Typography>)}
+ filterOptions={(options, state) => options.filter(o => o.label.includes(state.inputValue) || o.value.includes(state.inputValue))}
+ />
+ );
+};
+
+const myAutocompleteTester: RankedTester = withIncreasedRank(
+ 1,
+ materialAutocompleteOneOfEnumControlTester
+);
+
+const ConnectedControl = withJsonFormsOneOfEnumProps(MyAutocompleteControl);
+
+
+export const ExampleExtension = (dispatch: Dispatch<AnyAction>) => (
+ <div>
+ <button
+ onClick={() =>
+ dispatch(
+ Actions.registerRenderer(myAutocompleteTester, ConnectedControl)
+ )
+ }
+ >
+ Register Custom OneOf Autocomplete
+ </button>
+ <button
+ onClick={() =>
+ dispatch(
+ Actions.unregisterRenderer(myAutocompleteTester, ConnectedControl)
+ )
+ }
+ >
+ Unregister Custom OneOf Autocomplete
+ </button>
+ </div>
+);

packages/material/example/index.ts

@@ -25,5 +25,23 @@
 import { renderExample } from '../../example/src/index';
 import { materialCells } from '../src';
 import { extendedMaterialRenderers } from '../src/extended';
+import { ExampleExtension } from './CustomAutocomplete';
+import { ReactExampleDescription } from '../../example/src/util';
 
-renderExample(extendedMaterialRenderers, materialCells);
+const addCustomAutocompleteControl = (examples: ReactExampleDescription[]) => {
+ return examples.map(example => {
+ if(example.name === 'enum'){
+ const adjustedExample = Object.assign({}, example, {
+ customReactExtension: ExampleExtension
+ })
+ return adjustedExample;
+ }
+ return example;
+ });
+};
+
+renderExample(
+ extendedMaterialRenderers,
+ materialCells,
+ addCustomAutocompleteControl
+);

packages/material/src/extended/MuiAutocomplete.tsx

@@ -22,17 +22,19 @@
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  THE SOFTWARE.
 */
-import React, {ReactNode} from 'react';
+import React, { ReactNode } from 'react';
 import { EnumCellProps, EnumOption, WithClassname } from '@jsonforms/core';
 
 import Input from '@material-ui/core/Input';
 import Autocomplete, { AutocompleteRenderOptionState } from '@material-ui/lab/Autocomplete';
 import { areEqual } from '@jsonforms/react';
 import merge from 'lodash/merge';
+import { FilterOptionsState } from '@material-ui/lab/useAutocomplete';
 
 export interface WithOptionLabel {
  getOptionLabel?(option: EnumOption) : string;
  renderOption?(option: EnumOption, state: AutocompleteRenderOptionState): ReactNode;
+ filterOptions?(options: EnumOption[], state: FilterOptionsState<EnumOption>) : EnumOption[];
 }
 
 export const MuiAutocomplete = React.memo((props: EnumCellProps & WithClassname & WithOptionLabel) => {
@@ -47,7 +49,8 @@ export const MuiAutocomplete = React.memo((props: EnumCellProps & WithClassname
  options,
  config,
  getOptionLabel,
- renderOption
+ renderOption,
+ filterOptions
  } = props;
  const appliedUiSchemaOptions = merge({}, config, uischema.options);
  const [inputValue, setInputValue] = React.useState(data ?? '');
@@ -77,6 +80,7 @@ export const MuiAutocomplete = React.memo((props: EnumCellProps & WithClassname
  <Input style={{ width: '100%' }} type='text' inputProps={params.inputProps} inputRef={params.InputProps.ref} autoFocus={appliedUiSchemaOptions.focus}/>
  )}
  renderOption={renderOption}
+ filterOptions={filterOptions}
  />
  );
 }, areEqual);