Reimplement #2369 in both material ui themes (#3068)

* Reimplement #2369 in both material ui themes - Updated the `BaseInputTemplate` in both `@rjsf/material-ui` and `@rjsf/mui` to add the examples implementation from #2369 - Added the `schema.examples` tests in the `Form.test.tsx` * - Updated `CHANGELOG.md` for this fix as well as the fix for the previous commit - Commit the `semantic-ui` lock file since it was updated on my install * - Fixed issue with the wrong placement of the list - Updated tests accordingly - Also added `source-map-loader` to `playground` dev dependencies to fix playground * - Added antd, fluent-ui and semantic-ui as well
rjsf-team · Aug 29, 2022 · 9c9488b · 9c9488b
1 parent 7184f66
commit 9c9488b
Show file tree

Hide file tree

Showing 21 changed files with 2,189 additions and 325 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,24 @@ it according to semantic versioning. For example, if your PR adds a breaking cha
 should change the heading of the (upcoming) version to include a major version bump.
 
 -->
+# v5.0.0-beta.3
+
+## @rjsf/antd
+- Added support for `schema.examples` in the material ui theme fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/2368, https://github.com/rjsf-team/react-jsonschema-form/issues/2557)
+
+## @rjsf/fluent-ui
+- Added support for `schema.examples` in the material ui theme fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/2368, https://github.com/rjsf-team/react-jsonschema-form/issues/2557)
+
+## @rjsf/material-ui
+- Added support for `schema.examples` in the material ui theme fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/2368, https://github.com/rjsf-team/react-jsonschema-form/issues/2557)
+
+## @rjsf/material-ui
+- Added support for `schema.examples` in the material ui theme fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/2368, https://github.com/rjsf-team/react-jsonschema-form/issues/2557)
+
+## @rjsf/semantic-ui
+- Upgraded from the `1.x` to `2.x` version of `semantic-ui-react`
+- Added support for `schema.examples` in the material ui theme fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/2368, https://github.com/rjsf-team/react-jsonschema-form/issues/2557)
+
 # v5.0.0-beta.2
 - Added peer dependencies to new `@rjsf/utils` library now that it is published on npm
 

diff --git a/packages/antd/src/templates/BaseInputTemplate/index.js b/packages/antd/src/templates/BaseInputTemplate/index.js
@@ -36,32 +36,50 @@ const TextWidget = ({
 
   const handleFocus = ({ target }) => onFocus(id, target.value);
 
-  return inputProps.type === "number" || inputProps.type === "integer" ? (
-    <InputNumber
-      disabled={disabled || (readonlyAsDisabled && readonly)}
-      id={id}
-      name={id}
-      onBlur={!readonly ? handleBlur : undefined}
-      onChange={!readonly ? handleNumberChange : undefined}
-      onFocus={!readonly ? handleFocus : undefined}
-      placeholder={placeholder}
-      style={INPUT_STYLE}
-      {...inputProps}
-      value={value}
-    />
-  ) : (
-    <Input
-      disabled={disabled || (readonlyAsDisabled && readonly)}
-      id={id}
-      name={id}
-      onBlur={!readonly ? handleBlur : undefined}
-      onChange={!readonly ? handleTextChange : undefined}
-      onFocus={!readonly ? handleFocus : undefined}
-      placeholder={placeholder}
-      style={INPUT_STYLE}
-      {...inputProps}
-      value={value}
-    />
+  const input =
+    inputProps.type === "number" || inputProps.type === "integer" ? (
+      <InputNumber
+        disabled={disabled || (readonlyAsDisabled && readonly)}
+        id={id}
+        name={id}
+        onBlur={!readonly ? handleBlur : undefined}
+        onChange={!readonly ? handleNumberChange : undefined}
+        onFocus={!readonly ? handleFocus : undefined}
+        placeholder={placeholder}
+        style={INPUT_STYLE}
+        list={schema.examples ? `examples_${id}` : undefined}
+        {...inputProps}
+        value={value}
+      />
+    ) : (
+      <Input
+        disabled={disabled || (readonlyAsDisabled && readonly)}
+        id={id}
+        name={id}
+        onBlur={!readonly ? handleBlur : undefined}
+        onChange={!readonly ? handleTextChange : undefined}
+        onFocus={!readonly ? handleFocus : undefined}
+        placeholder={placeholder}
+        style={INPUT_STYLE}
+        list={schema.examples ? `examples_${id}` : undefined}
+        {...inputProps}
+        value={value}
+      />
+    );
+
+  return (
+    <>
+      {input}
+      {schema.examples && (
+        <datalist id={`examples_${id}`}>
+          {schema.examples
+            .concat(schema.default ? [schema.default] : [])
+            .map((example) => {
+              return <option key={example} value={example} />;
+            })}
+        </datalist>
+      )}
+    </>
   );
 };
 

diff --git a/packages/antd/test/Form.test.js b/packages/antd/test/Form.test.js
@@ -361,4 +361,14 @@ describe("single fields", () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+  test("schema examples", () => {
+    const schema = {
+      type: "string",
+      examples: ["Firefox", "Chrome", "Opera", "Vivaldi", "Safari"],
+    };
+    const tree = renderer
+      .create(<Form schema={schema} validator={validator} tagName="div" />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/packages/antd/test/__snapshots__/Form.test.js.snap b/packages/antd/test/__snapshots__/Form.test.js.snap
@@ -1212,6 +1212,66 @@ exports[`single fields radio field 1`] = `
 </form>
 `;
 
+exports[`single fields schema examples 1`] = `
+<div
+  className="rjsf"
+  noValidate={false}
+  onSubmit={[Function]}
+>
+  <div
+    className="form-group field field-string"
+  >
+    <input
+      className="ant-input"
+      id="root"
+      list="examples_root"
+      name="root"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      placeholder=""
+      style={
+        Object {
+          "width": "100%",
+        }
+      }
+      type="text"
+      value=""
+    />
+    <datalist
+      id="examples_root"
+    >
+      <option
+        value="Firefox"
+      />
+      <option
+        value="Chrome"
+      />
+      <option
+        value="Opera"
+      />
+      <option
+        value="Vivaldi"
+      />
+      <option
+        value="Safari"
+      />
+    </datalist>
+  </div>
+  <button
+    className="ant-btn ant-btn-submit"
+    disabled={false}
+    onClick={[Function]}
+    type="submit"
+  >
+    <span>
+      Submit
+    </span>
+  </button>
+</div>
+`;
+
 exports[`single fields select field 1`] = `
 <form
   className="rjsf"

diff --git a/packages/bootstrap-4/test/Form.test.tsx b/packages/bootstrap-4/test/Form.test.tsx
@@ -359,4 +359,14 @@ describe("single fields", () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+  test("schema examples", () => {
+    const schema: RJSFSchema = {
+      type: "string",
+      examples: ["Firefox", "Chrome", "Opera", "Vivaldi", "Safari"],
+    };
+    const tree = renderer
+      .create(<Form schema={schema} validator={validator} tagName="div" />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/packages/chakra-ui/test/Form.test.tsx b/packages/chakra-ui/test/Form.test.tsx
@@ -360,4 +360,14 @@ describe("single fields", () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+  test("schema examples", () => {
+    const schema: RJSFSchema = {
+      type: "string",
+      examples: ["Firefox", "Chrome", "Opera", "Vivaldi", "Safari"],
+    };
+    const tree = renderer
+      .create(<Form schema={schema} validator={validator} tagName="div" />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/packages/fluent-ui/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/fluent-ui/src/BaseInputTemplate/BaseInputTemplate.tsx
@@ -76,25 +76,37 @@ const BaseInputTemplate = ({
   const uiProps = _pick((options.props as object) || {}, allowedProps);
 
   return (
-    <TextField
-      id={id}
-      placeholder={placeholder}
-      label={label || schema.title}
-      autoFocus={autofocus}
-      required={required}
-      disabled={disabled}
-      readOnly={readonly}
-      multiline={multiline}
-      // TODO: once fluent-ui supports the name prop, we can add it back in here.
-      // name={name}
-      {...inputProps}
-      value={value || value === 0 ? value : ""}
-      onChange={_onChange as any}
-      onBlur={_onBlur}
-      onFocus={_onFocus}
-      errorMessage={(rawErrors || []).join("\n")}
-      {...uiProps}
-    />
+    <>
+      <TextField
+        id={id}
+        placeholder={placeholder}
+        label={label || schema.title}
+        autoFocus={autofocus}
+        required={required}
+        disabled={disabled}
+        readOnly={readonly}
+        multiline={multiline}
+        // TODO: once fluent-ui supports the name prop, we can add it back in here.
+        // name={name}
+        {...inputProps}
+        value={value || value === 0 ? value : ""}
+        onChange={_onChange as any}
+        onBlur={_onBlur}
+        onFocus={_onFocus}
+        errorMessage={(rawErrors || []).join("\n")}
+        list={schema.examples ? `examples_${id}` : undefined}
+        {...uiProps}
+      />
+      {schema.examples && (
+        <datalist id={`examples_${id}`}>
+          {(schema.examples as string[])
+            .concat(schema.default ? ([schema.default] as string[]) : [])
+            .map((example: any) => {
+              return <option key={example} value={example} />;
+            })}
+        </datalist>
+      )}
+    </>
   );
 };
 

diff --git a/packages/fluent-ui/test/Form.test.tsx b/packages/fluent-ui/test/Form.test.tsx
@@ -359,4 +359,14 @@ describe("single fields", () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+  test("schema examples", () => {
+    const schema: RJSFSchema = {
+      type: "string",
+      examples: ["Firefox", "Chrome", "Opera", "Vivaldi", "Safari"],
+    };
+    const tree = renderer
+      .create(<Form schema={schema} validator={validator} tagName="div" />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/packages/fluent-ui/test/__snapshots__/Form.test.tsx.snap b/packages/fluent-ui/test/__snapshots__/Form.test.tsx.snap
@@ -1761,6 +1761,107 @@ exports[`single fields radio field 1`] = `
 </form>
 `;
 
+exports[`single fields schema examples 1`] = `
+<div
+  className="rjsf"
+  noValidate={false}
+  onSubmit={[Function]}
+>
+  <div
+    className="ms-Grid-col ms-sm12  field field-string"
+    style={
+      Object {
+        "display": undefined,
+        "marginBottom": 15,
+      }
+    }
+  >
+    <div
+      className="ms-TextField root-42"
+    >
+      <div
+        className="ms-TextField-wrapper"
+      >
+        <div
+          className="ms-TextField-fieldGroup fieldGroup-43"
+        >
+          <input
+            aria-invalid={false}
+            autoFocus={false}
+            className="ms-TextField-field field-44"
+            disabled={false}
+            id="root"
+            list="examples_root"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onInput={[Function]}
+            placeholder=""
+            readOnly={false}
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+    <datalist
+      id="examples_root"
+    >
+      <option
+        value="Firefox"
+      />
+      <option
+        value="Chrome"
+      />
+      <option
+        value="Opera"
+      />
+      <option
+        value="Vivaldi"
+      />
+      <option
+        value="Safari"
+      />
+    </datalist>
+    
+  </div>
+  <div>
+    <br />
+    <div
+      className="ms-Grid-col ms-sm12"
+    >
+      <button
+        className="ms-Button ms-Button--primary root-53"
+        data-is-focusable={true}
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        onKeyPress={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        type="submit"
+      >
+        <span
+          className="ms-Button-flexContainer flexContainer-54"
+          data-automationid="splitbuttonprimary"
+        >
+          <span
+            className="ms-Button-textContainer textContainer-55"
+          >
+            <span
+              className="ms-Button-label label-57"
+              id="id__159"
+            >
+              Submit
+            </span>
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`single fields select field 1`] = `
 <form
   className="rjsf"