Make material-ui and fluent-ui pull TextWidget from the registry; rem…

…ove registry prop from <div> in TextWidget (#2515) * Make material-ui and fluent-ui pull TextWidget from the registry - In all the `TextWidget` wrappers, rather than directly import `TextWidget` from the source hierarchy, instead pull from the `registry.widgets` - This allows all of these `TextWidget` wrappers (like `EmailWidget`, etc...) to immediately use a custom `TextWidget` class - Added a new `Registry` type in the `core/index.d.ts` file, refactoring it from `FieldProps`, and adding it to `WidgetProps` as well - Needed to updated the snapshots for the `material-ui` tests for `Form` since registry is now part of the snapshot - Also needed to update `UpDownWidget.test.tst` to add a mock `registry` - Updated `packages/bootstrap-4/test/helpers/createMocks.ts` to add a mock `registry` * - Updated `TextWidget` to strip out `registry` so that it doesn't become part of `textFieldProps` which just seems wrong
rjsf-team · Aug 13, 2021 · fa91f2b · fa91f2b
1 parent 7897735
commit fa91f2b
Show file tree

Hide file tree

Showing 20 changed files with 74 additions and 914 deletions.
diff --git a/packages/bootstrap-4/test/helpers/createMocks.ts b/packages/bootstrap-4/test/helpers/createMocks.ts
@@ -31,6 +31,12 @@ export function makeWidgetMockProps(
     formContext: {},
     id: "_id",
     placeholder: "",
+    registry: {
+      fields: {},
+      widgets: {},
+      formContext: {},
+      definitions: {},
+    },
     ...props,
   };
 }
diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts
@@ -114,10 +114,18 @@ declare module '@rjsf/core' {
         label: string;
         multiple: boolean;
         rawErrors: string[];
+        registry: Registry;
     }
 
     export type Widget = React.StatelessComponent<WidgetProps> | React.ComponentClass<WidgetProps>;
 
+    export interface Registry {
+      fields: { [name: string]: Field };
+      widgets: { [name: string]: Widget };
+      definitions: { [name: string]: any };
+      formContext: any;
+    }
+
     export interface FieldProps<T = any>
         extends Pick<React.HTMLAttributes<HTMLElement>, Exclude<keyof React.HTMLAttributes<HTMLElement>, 'onBlur'>> {
         schema: JSONSchema7;
@@ -127,12 +135,7 @@ declare module '@rjsf/core' {
         errorSchema: ErrorSchema;
         onChange: (e: IChangeEvent<T> | any, es?: ErrorSchema) => any;
         onBlur: (id: string, value: any) => void;
-        registry: {
-            fields: { [name: string]: Field };
-            widgets: { [name: string]: Widget };
-            definitions: { [name: string]: any };
-            formContext: any;
-        };
+        registry: Registry;
         formContext: any;
         autofocus: boolean;
         disabled: boolean;

diff --git a/packages/fluent-ui/src/AltDateTimeWidget/AltDateTimeWidget.tsx b/packages/fluent-ui/src/AltDateTimeWidget/AltDateTimeWidget.tsx
@@ -1,5 +1,12 @@
 import React from "react";
 import { WidgetProps } from "@rjsf/core";
-import TextWidget from '../TextWidget';
 
-export default (props: WidgetProps) => <TextWidget {...props} />;
+const AltDateTimeWidget = (props: WidgetProps) => {
+  const { registry } = props;
+  const { TextWidget } = registry.widgets;
+  return (
+    <TextWidget {...props} />
+  );
+};
+
+export default AltDateTimeWidget;
diff --git a/packages/fluent-ui/src/AltDateWidget/AltDateWidget.tsx b/packages/fluent-ui/src/AltDateWidget/AltDateWidget.tsx
@@ -1,5 +1,12 @@
 import React from "react";
 import { WidgetProps } from "@rjsf/core";
-import TextWidget from '../TextWidget';
 
-export default (props: WidgetProps) => <TextWidget {...props} />;
+const AltDateWidget = (props: WidgetProps) => {
+  const { registry } = props;
+  const { TextWidget } = registry.widgets;
+  return (
+    <TextWidget {...props} />
+  );
+};
+
+export default AltDateWidget;
diff --git a/packages/fluent-ui/src/DateTimeWidget/DateTimeWidget.tsx b/packages/fluent-ui/src/DateTimeWidget/DateTimeWidget.tsx
@@ -2,12 +2,12 @@ import React from "react";
 
 import { WidgetProps, utils } from "@rjsf/core";
 
-import TextWidget from "../TextWidget";
-
 const { localToUTC, utcToLocal } = utils;
 
 
 const DateTimeWidget = (props: WidgetProps) => {
+  const { registry } = props;
+  const { TextWidget } = registry.widgets;
   const uiProps: any = props.options["props"] || {};
 
   const value = utcToLocal(props.value);

diff --git a/packages/fluent-ui/src/EmailWidget/EmailWidget.tsx b/packages/fluent-ui/src/EmailWidget/EmailWidget.tsx
@@ -2,9 +2,9 @@ import React from "react";
 
 import { WidgetProps } from "@rjsf/core";
 
-import TextWidget from "../TextWidget";
-
 const EmailWidget = (props: WidgetProps) => {
+  const { registry } = props;
+  const { TextWidget } = registry.widgets;
   const uiProps: any = props.options["props"] || {};
   let options = {
     ...props.options,

diff --git a/packages/fluent-ui/src/PasswordWidget/PasswordWidget.tsx b/packages/fluent-ui/src/PasswordWidget/PasswordWidget.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 
-import { WidgetProps, utils } from "@rjsf/core";
-
-import TextWidget from "../TextWidget";
+import { WidgetProps } from "@rjsf/core";
 
 const PasswordWidget = (props: WidgetProps) => {
+  const { registry } = props;
+  const { TextWidget } = registry.widgets;
   const uiProps: any = props.options["props"] || {};
   let options = {
     ...props.options,

diff --git a/packages/fluent-ui/src/TextareaWidget/TextareaWidget.tsx b/packages/fluent-ui/src/TextareaWidget/TextareaWidget.tsx
@@ -2,9 +2,9 @@ import React from "react";
 
 import { WidgetProps } from "@rjsf/core";
 
-import TextWidget from '../TextWidget';
-
 const TextareaWidget = (props: WidgetProps) => {
+  const { registry } = props;
+  const { TextWidget } = registry.widgets;
   const uiProps: any = props.options["props"] || {};
   let options = {
     ...props.options,
@@ -19,4 +19,4 @@ const TextareaWidget = (props: WidgetProps) => {
   );
 }
 
-export default TextareaWidget;
+export default TextareaWidget;
diff --git a/packages/fluent-ui/src/URLWidget/URLWidget.tsx b/packages/fluent-ui/src/URLWidget/URLWidget.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 
-import { WidgetProps, utils } from "@rjsf/core";
-
-import TextWidget from "../TextWidget";
+import { WidgetProps } from "@rjsf/core";
 
 const URLWidget = (props: WidgetProps) => {
+  const { registry } = props;
+  const { TextWidget } = registry.widgets;
   const uiProps: any = props.options["props"] || {};
   let options = {
     ...props.options,

diff --git a/packages/material-ui/src/ColorWidget/ColorWidget.tsx b/packages/material-ui/src/ColorWidget/ColorWidget.tsx
@@ -1,7 +1,9 @@
 import React from "react";
-import TextWidget, { TextWidgetProps } from "../TextWidget";
+import { TextWidgetProps } from "../TextWidget";
 
 const ColorWidget = (props: TextWidgetProps) => {
+  const { registry } = props;
+  const { TextWidget } = registry.widgets;
   return <TextWidget type="color" {...props} />;
 };
 

diff --git a/packages/material-ui/src/DateTimeWidget/DateTimeWidget.tsx b/packages/material-ui/src/DateTimeWidget/DateTimeWidget.tsx
@@ -1,10 +1,12 @@
 import React from "react";
 import { utils } from "@rjsf/core";
-import TextWidget, { TextWidgetProps } from "../TextWidget";
+import { TextWidgetProps } from "../TextWidget";
 
 const { localToUTC, utcToLocal } = utils;
 
 const DateTimeWidget = (props: TextWidgetProps) => {
+  const { registry } = props;
+  const { TextWidget } = registry.widgets;
   const value = utcToLocal(props.value);
   const onChange = (value: any) => {
     props.onChange(localToUTC(value));

diff --git a/packages/material-ui/src/DateWidget/DateWidget.tsx b/packages/material-ui/src/DateWidget/DateWidget.tsx
@@ -1,7 +1,9 @@
 import React from "react";
-import TextWidget, { TextWidgetProps } from "../TextWidget";
+import { TextWidgetProps } from "../TextWidget";
 
 const DateWidget = (props: TextWidgetProps) => {
+  const { registry } = props;
+  const { TextWidget } = registry.widgets;
   return (
     <TextWidget
       type="date"

diff --git a/packages/material-ui/src/EmailWidget/EmailWidget.tsx b/packages/material-ui/src/EmailWidget/EmailWidget.tsx
@@ -1,7 +1,9 @@
 import React from "react";
-import TextWidget, { TextWidgetProps } from "../TextWidget";
+import { TextWidgetProps } from "../TextWidget";
 
 const EmailWidget = (props: TextWidgetProps) => {
+  const { registry } = props;
+  const { TextWidget } = registry.widgets;
   return <TextWidget type="email" {...props} />;
 };
 

diff --git a/packages/material-ui/src/PasswordWidget/PasswordWidget.tsx b/packages/material-ui/src/PasswordWidget/PasswordWidget.tsx
@@ -1,49 +1,11 @@
 import React from "react";
 
-import TextField from "@material-ui/core/TextField";
+import { TextWidgetProps } from "../TextWidget";
 
-import { WidgetProps } from "@rjsf/core";
-
-const PasswordWidget = ({
-  id,
-  required,
-  readonly,
-  disabled,
-  value,
-  label,
-  onFocus,
-  onBlur,
-  onChange,
-  options,
-  autofocus,
-  schema,
-  rawErrors = [],
-}: WidgetProps) => {
-  const _onChange = ({
-    target: { value },
-  }: React.ChangeEvent<HTMLInputElement>) =>
-    onChange(value === "" ? options.emptyValue : value);
-  const _onBlur = ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
-    onBlur(id, value);
-  const _onFocus = ({
-    target: { value },
-  }: React.FocusEvent<HTMLInputElement>) => onFocus(id, value);
-
-  return (
-    <TextField
-      id={id}
-      label={label || schema.title}
-      autoFocus={autofocus}
-      required={required}
-      disabled={disabled || readonly}
-      type="password"
-      value={value ? value : ""}
-      error={rawErrors.length > 0}
-      onFocus={_onFocus}
-      onBlur={_onBlur}
-      onChange={_onChange}
-    />
-  );
+const PasswordWidget = (props: TextWidgetProps) => {
+  const { registry } = props;
+  const { TextWidget } = registry.widgets;
+  return <TextWidget type="password" {...props} />;
 };
 
 export default PasswordWidget;
diff --git a/packages/material-ui/src/TextWidget/TextWidget.tsx b/packages/material-ui/src/TextWidget/TextWidget.tsx
@@ -28,6 +28,7 @@ const TextWidget = ({
   uiSchema,
   rawErrors = [],
   formContext,
+  registry, // pull out the registry so it doesn't end up in the textFieldProps
   ...textFieldProps
 }: TextWidgetProps) => {
   const _onChange = ({

diff --git a/packages/material-ui/src/URLWidget/URLWidget.tsx b/packages/material-ui/src/URLWidget/URLWidget.tsx
@@ -1,7 +1,9 @@
 import React from "react";
-import TextWidget, { TextWidgetProps } from "../TextWidget";
+import { TextWidgetProps } from "../TextWidget";
 
 const URLWidget = (props: TextWidgetProps) => {
+  const { registry } = props;
+  const { TextWidget } = registry.widgets;
   return <TextWidget type="url" {...props} />;
 };
 

diff --git a/packages/material-ui/test/UpDownWidget.test.tsx b/packages/material-ui/test/UpDownWidget.test.tsx
@@ -33,6 +33,12 @@ describe("UpDownWidget", () => {
       id: "_id",
       placeholder: "",
       value: 0,
+      registry: {
+        fields: {},
+        widgets: {},
+        definitions: {},
+        formContext: {},
+      }
     };
     const tree = renderer.create(<UpDownWidget {...props} />).toJSON();
     expect(tree).toMatchSnapshot();