Merge pull request #396 from vip-git/auto-complete

vip-git · web-flow · commit 14b489bd3aba · 2021-09-01T21:22:33.000+02:00
feat: integration with auto complete component from Material UI
diff --git a/package.json b/package.json
@@ -35,15 +35,16 @@
   ],
   "dependencies": {
     "@date-io/moment": "1.3.9",
-    "@material-ui/core": "4.11.4",
+    "@material-ui/core": "4.12.3",
     "@material-ui/icons": "4.11.2",
-    "@material-ui/lab": "4.0.0-alpha.58",
+    "@material-ui/lab": "4.0.0-alpha.60",
     "@material-ui/pickers": "3.3.10",
     "@react-jsonschema-form-components/material-radio-group": "2.0.1",
     "@react-jsonschema-form-utils/enum-utils": "2.0.1",
     "@react-jsonschema-form-utils/parse-values": "2.0.1",
     "@react-jsonschema-form-interceptors/translate-range-date": "2.0.0",
     "@react-jsonschema-form-interceptors/translate-ratings": "2.0.0",
+    "@react-jsonschema-form-interceptors/translate-currency": "2.0.0",
     "ajv": "6.12.6",
     "body-parser": "1.19.0",
     "brace": "0.11.1",
diff --git a/scripts/generator/components.json b/scripts/generator/components.json
@@ -63,6 +63,16 @@
               "@react-jsonschema-form-utils/parse-values"
             ]
         },
+        "@react-jsonschema-form-components/material-auto-complete": {
+            "version": "2.0.0",
+            "type": "string",
+            "isEnum": true,
+            "name": "material-auto-complete",
+            "utils": [
+              "@react-jsonschema-form-utils/enum-utils",
+              "@react-jsonschema-form-utils/parse-values"
+            ]
+        },
         "@react-jsonschema-form-components/material-checkbox": {
             "version": "2.0.4",
             "type": "string",
diff --git a/scripts/generator/package-lock.json b/scripts/generator/package-lock.json
diff --git a/scripts/generator/package.json b/scripts/generator/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@react-jsonschema-form-components/creatable-react-select": "2.0.2",
     "@react-jsonschema-form-components/empty-div": "2.0.1",
+    "@react-jsonschema-form-components/material-auto-complete": "1.0.0",
     "@react-jsonschema-form-components/material-checkbox": "2.0.4",
     "@react-jsonschema-form-components/material-input": "2.0.1",
     "@react-jsonschema-form-components/material-picker": "2.0.1",
diff --git a/src/demo/examples/simple/schema.json b/src/demo/examples/simple/schema.json
@@ -29,6 +29,11 @@
           "title": "Example React select",
           "enum": ["Yes", "No"]
         },
+        "auto-complete": {
+          "type": "string",
+          "title": "Example Auto Complete",
+          "enum": ["Yes", "No"]
+        },
         "password": {
           "type": "string",
           "title": "Password",
@@ -131,6 +136,14 @@
             ]
           }
         },
+        "autoComplete": {
+          "type": "array",
+          "title": "Example Multi-Select Auto Complete",
+          "items": {
+            "type": "string",
+            "enum": ["test", "teete", "etetet"]
+          }
+        },
         "creatableSelectTest": {
           "type": "array",
           "title": "Example creatable select",
diff --git a/src/demo/examples/simple/ui-schema.json b/src/demo/examples/simple/ui-schema.json
@@ -24,6 +24,12 @@
       "ui:autofocus": true,
       "ui:emptyValue": ""
     },
+    "auto-complete": {
+      "ui:widget": "material-auto-complete",
+      "ui:props": {
+        "disableClearable": false
+      }
+    },
     "react-select": {
       "ui:widget": "material-select",
       "ui:isClearable": true,
@@ -109,6 +115,12 @@
         "className": "money"
       }
     },
+    "autoComplete": {
+      "ui:widget": "material-auto-complete",
+      "ui:props": {
+        "disableClearable": false
+      }
+    },
     "xhrSelectTest": {
       "ui:widget": "material-multiselect"
     },
diff --git a/src/demo/examples/simple/xhr-schema.json b/src/demo/examples/simple/xhr-schema.json
@@ -26,6 +26,7 @@
             "lastName:last_name": "${string.lastName}",
             "select": "${string.select}",
             "react-select:react_select": "${string.react-select}",
+            "auto-complete:auto_complete": "${string.auto-complete}",
             "upload": "${string.upload}",
             "bio": "${string.bio}",
             "date": "${string.date}",
@@ -81,6 +82,7 @@
         "lastName": "${string.last_name}",
         "select": "${string.select}",
         "react-select": "${string.react_select}",
+        "auto-complete": "${string.auto_complete}",
         "upload": "${string.upload}",
         "bio": "${string.bio}",
         "date": "${string.date}",
diff --git a/src/fields/ConfiguredField.tsx b/src/fields/ConfiguredField.tsx
@@ -81,6 +81,7 @@ export const RawConfiguredField = ({
 			value={data}
 			type={type}
 			error={!isEmpty(hasError) || undefined}
+			title={title}
 			{...componentProps}
 		/>
 		{helpText && !isCustomComponent && (
diff --git a/src/fields/components/AutoComplete/.npmignore b/src/fields/components/AutoComplete/.npmignore
@@ -0,0 +1,5 @@
+__tests__
+src
+node_modules
+tsconfig.json
+package-lock.json
diff --git a/src/fields/components/AutoComplete/package.json b/src/fields/components/AutoComplete/package.json
@@ -0,0 +1,14 @@
+{
+    "name": "@react-jsonschema-form-components/material-auto-complete",
+    "version": "2.0.0",
+    "main": "dist/index.js",
+    "scripts": {
+        "build": "rm -rf dist && tsc",
+        "prepublishOnly": "npm run build"
+    },
+    "dependencies": {
+        "@react-jsonschema-form-utils/enum-utils": "2.0.1",
+        "@react-jsonschema-form-utils/parse-values": "2.0.1"
+    },
+    "author": "Vipin Tanna"
+}
diff --git a/src/fields/components/AutoComplete/src/__tests__/auto-complete.spec.tsx b/src/fields/components/AutoComplete/src/__tests__/auto-complete.spec.tsx
@@ -0,0 +1,160 @@
+// Library
+import React from 'react';
+import { mount } from 'enzyme';
+
+// Internal
+import { default as AutoCompleteComp } from '..';
+
+// Types
+import { JSONSchema7 } from 'json-schema';
+
+const schema: JSONSchema7 = {
+    'type': 'string',
+    'title': 'Which  Theme ?',
+    'enum': [
+        'Material UI',
+        'No Theme'
+    ],
+    'default': 'Material UI'
+};
+const multiOptionSchema: JSONSchema7 & { parsedArray: boolean } = {
+    'type': 'string',
+    'enum': [
+        'foo',
+        'bar',
+        'fuzz',
+        'qux'
+    ],
+    'uniqueItems': true,
+    'parsedArray': true
+};
+const value = 'Material UI';
+const htmlid = 'test';
+
+describe('AutoComplete', () => {
+    it('mounts with standard attributes (control)', () => {
+        const path = 'done'; 
+        const label = 'Done';
+        schema.description = label;
+        const wrapper = mount(
+          <AutoCompleteComp 
+            type={'string'}
+            htmlid={htmlid}
+            label={label}
+            path={path}
+            value={value}
+            schema={schema}
+            onChange={jest.fn}
+          />,
+        );
+    
+        const fcComp = wrapper.find('WithStyles(ForwardRef(TextField))');
+        expect(fcComp).toHaveLength(1);
+        expect(fcComp.prop('id')).toBe(htmlid);
+    
+        const cbComp = wrapper.find('input');
+        expect(cbComp).toHaveLength(1);
+        expect(cbComp.prop('value')).toBe(value);
+      });
+    
+      it('passes additional properties to the Checkbox component', () => {
+        const props = {
+          color: 'secondary',
+        }
+        const wrapper = mount(
+          <AutoCompleteComp
+            type={'string'}
+            htmlid={htmlid}
+            label={'label'}
+            path={'path'}
+            schema={schema}
+            onChange={jest.fn}
+            options={
+              {...props}
+            }
+          />,
+        );
+    
+        const cbComp = wrapper.find('WithStyles(ForwardRef(Autocomplete))');
+        expect(cbComp.prop('color')).toBe(props.color);
+      });
+    
+      it('calls onChange when clicked', () => {
+        const onChange = jest.fn();
+        const wrapper = mount(
+          <AutoCompleteComp 
+            path={'a'} 
+            value={value} 
+            onChange={onChange} 
+            schema={schema}
+            type={'string'}
+            htmlid={htmlid}
+            label={'label'}
+          />,
+        );
+        const cbComp = wrapper.find('WithStyles(ForwardRef(Autocomplete))');
+        expect(cbComp).toHaveLength(1);
+        cbComp.prop('onChange')({
+            target: {
+                value: 'new change'
+            }
+        });
+        cbComp.prop('getOptionSelected')('new change');
+        cbComp.prop('getOptionLabel')('new change');
+        cbComp.prop('groupBy')('new change');
+        cbComp.prop('getOptionDisabled')('new change');
+        expect(onChange).toHaveBeenCalledTimes(1);
+      });
+    
+      it('calls onChange when clicked (multiple)', () => {
+        const onChange = jest.fn();
+        const wrapper = mount(
+          <AutoCompleteComp 
+            path={'a'} 
+            value={['foo', 'bar']} 
+            onChange={onChange} 
+            schema={multiOptionSchema}
+            type={'string'}
+            htmlid={htmlid}
+            label={'label'}
+            options={{ multiple: true }}
+          />,
+        );
+        const cbComp = wrapper.find('WithStyles(ForwardRef(Autocomplete))');
+        expect(cbComp).toHaveLength(1);
+        cbComp.prop('onChange')({
+          target: { value: ['foo', 'bar'] }
+        });
+        cbComp.prop('onChange')({
+          target: { value: undefined }
+        });
+        cbComp.prop('groupBy')('new change');
+        cbComp.prop('getOptionDisabled')('new change');
+        expect(onChange).toHaveBeenCalledTimes(2);
+      });
+    
+      it('calls onChange when clicked (multiple) (edge case)', () => {
+        const onChange = jest.fn();
+        multiOptionSchema.anyOf = [];
+        const wrapper = mount(
+          <AutoCompleteComp 
+            path={'a'} 
+            value={'foo'} 
+            onChange={onChange} 
+            schema={multiOptionSchema}
+            type={'string'}
+            htmlid={htmlid}
+            label={'label'}
+          />,
+        );
+        const cbComp = wrapper.find('WithStyles(ForwardRef(Autocomplete))');
+        expect(cbComp).toHaveLength(1);
+        cbComp.prop('onChange')({
+          target: { value: ['foo', 'bar'] }
+        });
+        cbComp.prop('onChange')({
+          target: { value: undefined }
+        });
+        expect(onChange).toHaveBeenCalledTimes(2);
+      });
+});
diff --git a/src/fields/components/AutoComplete/src/auto-complete.props.ts b/src/fields/components/AutoComplete/src/auto-complete.props.ts
@@ -0,0 +1,35 @@
+// Utils
+import { isEnum, getEnumTitle } from '@react-jsonschema-form-utils/enum-utils';
+import { coerceValue } from '@react-jsonschema-form-utils/parse-values';
+
+// Types
+import { JSONSchema7, JSONSchema7Type } from 'json-schema';
+
+type Value = boolean | string | Array<string> | JSONSchema7Type;
+
+export type AutoSelectProps = {
+  type: any;
+  value?: Value;
+  schema: JSONSchema7 & { parsedArray?: boolean };
+  disabled?: boolean;
+  onChange: Function;
+  htmlid: any;
+  xhrSchema?: any;
+  options?: any;
+  [key: string]: any;
+}
+
+const onChangeHandler = (onChange, type, isMultiple) => (e, givenValue) => {
+  const newValue = givenValue || '';
+  const value = isMultiple
+    ? newValue
+    : coerceValue(type, newValue);
+  if (value !== undefined) onChange(value);
+};
+
+export default ({ onChange, schema, type, isMultiple }) => ({
+  onChange: onChange && onChangeHandler(onChange, type, isMultiple),
+  choices: isEnum(schema),
+  nullOption: 'Please select...',
+  label: getEnumTitle(schema),
+});
diff --git a/src/fields/components/AutoComplete/src/index.tsx b/src/fields/components/AutoComplete/src/index.tsx
diff --git a/src/fields/components/AutoComplete/tsconfig.json b/src/fields/components/AutoComplete/tsconfig.json
diff --git a/src/fields/configure/label/get-label-component.ts b/src/fields/configure/label/get-label-component.ts
