Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make material-ui and fluent-ui pull TextWidget from the registry; remove registry prop from <div> in TextWidget #2515

Merged
merged 2 commits into from
Aug 13, 2021
Merged

Make material-ui and fluent-ui pull TextWidget from the registry; remove registry prop from <div> in TextWidget #2515

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8f13615
Make material-ui and fluent-ui pull TextWidget from the registry
heath-freenome Aug 12, 2021
b7b00bf
- Updated `TextWidget` to strip out `registry` so that it doesn't bec…
heath-freenome Aug 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/bootstrap-4/test/helpers/createMocks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,12 @@ export function makeWidgetMockProps(
formContext: {},
id: "_id",
placeholder: "",
registry: {
fields: {},
widgets: {},
formContext: {},
definitions: {},
},
...props,
};
}
15 changes: 9 additions & 6 deletions packages/core/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
11 changes: 9 additions & 2 deletions packages/fluent-ui/src/AltDateTimeWidget/AltDateTimeWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
11 changes: 9 additions & 2 deletions packages/fluent-ui/src/AltDateWidget/AltDateWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
4 changes: 2 additions & 2 deletions packages/fluent-ui/src/DateTimeWidget/DateTimeWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions packages/fluent-ui/src/EmailWidget/EmailWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
6 changes: 3 additions & 3 deletions packages/fluent-ui/src/PasswordWidget/PasswordWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
6 changes: 3 additions & 3 deletions packages/fluent-ui/src/TextareaWidget/TextareaWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -19,4 +19,4 @@ const TextareaWidget = (props: WidgetProps) => {
);
}

export default TextareaWidget;
export default TextareaWidget;
6 changes: 3 additions & 3 deletions packages/fluent-ui/src/URLWidget/URLWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
4 changes: 3 additions & 1 deletion packages/material-ui/src/ColorWidget/ColorWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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} />;
};

Expand Down
4 changes: 3 additions & 1 deletion packages/material-ui/src/DateTimeWidget/DateTimeWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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));
Expand Down
4 changes: 3 additions & 1 deletion packages/material-ui/src/DateWidget/DateWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
4 changes: 3 additions & 1 deletion packages/material-ui/src/EmailWidget/EmailWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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} />;
};

Expand Down
48 changes: 5 additions & 43 deletions packages/material-ui/src/PasswordWidget/PasswordWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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} />;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will this render the exact same content as the old PasswordWidget component? Trying to see if this will be a breaking change or not.

Copy link
Member Author

@heath-freenome heath-freenome Aug 12, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The snapshot update was to add the registry to the outer div (which seems weird and probably should be removed). The only other thing was adding an empty placeholder to the input, which honestly might have been a bug with the PasswordWidget before.

Copy link
Member Author

@heath-freenome heath-freenome Aug 12, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@epicfaace let me know if stripping the registry from the outer div (as seen in the snapshots) is considered a breaking change. Honestly, to me it feels like a super helpful fix since the whole registry object being dumped to the div was just useless clutter on the div tag... especially when the rootSchema is HUGE

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I think it should be fine, not considered a breaking change since that doesn't affect how users use the library / any of the look-and-feel at all.

};

export default PasswordWidget;
4 changes: 3 additions & 1 deletion packages/material-ui/src/URLWidget/URLWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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} />;
};

Expand Down
6 changes: 6 additions & 0 deletions packages/material-ui/test/UpDownWidget.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
48 changes: 48 additions & 0 deletions packages/material-ui/test/__snapshots__/Form.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1236,6 +1236,53 @@ exports[`single fields password field 1`] = `
>
<div
className="MuiFormControl-root MuiTextField-root"
registry={
Object {
"ArrayFieldTemplate": [Function],
"FieldTemplate": [Function],
"ObjectFieldTemplate": [Function],
"definitions": Object {},
"fields": Object {
"AnyOfField": [Function],
"ArrayField": [Function],
"BooleanField": [Function],
"DescriptionField": [Function],
"NullField": [Function],
"NumberField": [Function],
"ObjectField": [Function],
"OneOfField": [Function],
"SchemaField": [Function],
"StringField": [Function],
"TitleField": [Function],
"UnsupportedField": [Function],
},
"formContext": Object {},
"rootSchema": Object {
"type": "string",
},
"widgets": Object {
"AltDateTimeWidget": [Function],
"AltDateWidget": [Function],
"BaseInput": [Function],
"CheckboxWidget": [Function],
"CheckboxesWidget": [Function],
"ColorWidget": [Function],
"DateTimeWidget": [Function],
"DateWidget": [Function],
"EmailWidget": [Function],
"FileWidget": [Function],
"HiddenWidget": [Function],
"PasswordWidget": [Function],
"RadioWidget": [Function],
"RangeWidget": [Function],
"SelectWidget": [Function],
"TextWidget": [Function],
"TextareaWidget": [Function],
"URLWidget": [Function],
"UpDownWidget": [Function],
},
}
}
>
<div
className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
Expand All @@ -1251,6 +1298,7 @@ exports[`single fields password field 1`] = `
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder=""
required={false}
type="password"
value=""
Expand Down