Allow overriding the default fields/widgets #371

olzraiti · 2016-11-02T13:25:12Z

Reasons for making this change

This pull request is conflicting with #363 and #366. There is some heated discussion about the technical details in the comments of those pull requests. I'm offering this pull request because I had the code changes lying around anyway (as I have mentioned in #310). My intention is not to step on anyones toes - I'm merely offering a solution or at least some insight to the issue.

The reason why I have sitted on this for so long time is because I was waiting for input on the issues I have raised (#354, #310).

This approach has the benefit that we aren't introducing any new techniques or new API designs to solve the issue. All fields and widgets are simply overridable through the fields and widgets props.

I didn't add any tests or update the documentation since this pull request is conflicting.

Checklist

I'm updating documentation
- I've checked the rendering of the Markdown text I've added
- If I'm adding a new section, I've updated the Table of Content
I'm adding or updating code
- I've added and/or updated tests
- I've updated docs if needed
I'm adding a new feature
- I've updated the playground with an example use of the feature

… descriptions & titles.

…onschema-form

…rom the registry

n1k0

I like the simplicity of your approach. I'd like to hear from @frassinier and @jmfrancois about it; do you guys feel like this could address your own use cases?

n1k0 · 2016-11-04T09:03:31Z

src/components/Form.js

-      SchemaField: _SchemaField,
-      TitleField: _TitleField,
-      DescriptionField: _DescriptionField,
-    }, this.props.fields);


These were kept for backward compatibility purpose, but I'm glad seeing them going away. The change should be documented though (in the next release changelog).

n1k0 · 2016-11-04T09:08:08Z

src/utils.js

+      StringField: require("./components/fields/StringField").default,
+      NumberField: require("./components/fields/NumberField").default,
+      TitleField: require("./components/fields/TitleField").default,
+      DescriptionField: require("./components/fields/DescriptionField").default,


For legibility, we could create some load helper, eg.

const load = comp => require(`./components/${comp}`).default; const fields = { ArrayField: load("fields/ArrayField"), // ... };

frassinier · 2016-11-04T11:10:05Z

@olzraiti Could you provide sample of customization please?

olzraiti · 2016-11-04T12:07:12Z

@frassinier for example if you would like to add a material theme, you would just override the specific widgets like so:

Example 1: Themes

If you need different themes, you could easily wrap your form like so:

function ThemedForm(props) {
    const themes = {
        material: {
            widgets: {
                CheckboxWidget: CustomMaterialCheckbox
            }
        },
        someOtherTheme: {
            ...what ever you would like to override
        }
    }

    <Form
        {...themes[props.theme]} 
    />
}

Now you have a form component which you can render with different themes:

<ThemedForm theme="material" />

Example 2: non orderable arrays as default

import ArrayField from 'react-jsonschema-form/lib/components/fields/ArrayField';

function NonOrderableArrayField(props) {
    return (
        <ArrayField 
                   {...props} 
                   uiSchema={
                       ...props.uiSchema, 
                       "ui:options": {...props.uiSchema["ui:options"], orderable: false} 
        />
    );  
}

<Form fields={{
  ArrayField: NonOrderableArrayField
}} />

frassinier · 2016-11-04T12:17:21Z

Love it, I will close my PR and help you by providing material-ui theme if you want?

olzraiti · 2016-11-04T12:27:04Z

I'm glad we came to an agreement so fast, thanks for being so flexible. :)

It's up to @n1k0 if this library should provide themes. I can think of two ways this library could go:

Provide no themes at all (not even the current bootstrap themes). Let the users handle the themes themselves.
Provide pluggable themes (I'd like to see the bootstrap theme also as a plugin)

olzraiti · 2016-11-04T16:33:09Z

I didn't add many new tests or extend the documentation, since we are mostly removing a special case instead of adding new features (SOME of the fields/widgets have been overridable before this pull request, but not all. Now all of them are overridable). Maybe the documentation for a custom SchemaField could be merged to the added documentation chapter? Though having a specific chapter for SchemaField makes sense, since it's a major building block.

frassinier · 2016-11-04T17:02:39Z

Good job @olzraiti ! I will work on a first theme impl ASAP :)

frassinier · 2016-11-04T17:06:13Z

playground/app.js

@@ -358,6 +358,7 @@ class App extends Component {
              formData={formData}
              onChange={this.onFormDataChange}
              fields={{geo: GeoPosition}}
+              widgets={{AltDateTimeWidget: () => <div id="#custom" >moi</div>}}


Is this really useful? :)

Haha wow... sorry for that :) It's "hi" in finnish.

frassinier · 2016-11-05T11:58:48Z

Hey @olzraiti, it works well! Here is an example. cc @n1k0

n1k0

This looks super good. A few nits and we're good to go, thank you 👍

n1k0 · 2016-11-06T09:01:30Z

README.md

@@ -897,6 +898,32 @@ If you're curious how this could ever be useful, have a look at the [Kinto formb

 Props passed to a custom SchemaField are the same as [the ones passed to a custom field](#field-props).

+### Customizing any fields or widgets


How about Customizing default fields and widgets?

n1k0 · 2016-11-06T09:08:41Z

README.md

+        uiSchema={uiSchema}
+        formData={formData}
+        widgets={widgets} />
+), document.getElementById("app"));


It may look super obvious to seasonned react developers, but maybe we should augment this section with an example of a reusable customized form class, eg.

const fields = {StringField: CustomString}; const widgets = {CheckboxWidget: CustomCheckbox}; function MyForm(props) { return <Form fields={customFields} widgets={customWidgets} {...props} />; } render(( <MyForm schema={schema} uiSchema={uiSchema} formData={formData} /> ), document.getElementById("app"));

Typo but +1

const customFields = {StringField: CustomString}; const customWidgets = {CheckboxWidget: CustomCheckbox}; function MyForm(props) { return <Form fields={customFields} widgets={customWidgets} {...props} />; }

n1k0 · 2016-11-06T09:14:22Z

src/components/fields/SchemaField.js

@@ -31,7 +26,7 @@ function getFieldComponent(schema, uiSchema, fields) {
  if (typeof field === "string" && field in fields) {
    return fields[field];
  }
-  return COMPONENT_TYPES[schema.type] || UnsupportedField;
+  return (COMPONENT_TYPES[schema.type] ? fields[COMPONENT_TYPES[schema.type]] : UnsupportedField) || UnsupportedField;


How about:

const componentName = COMPONENT_TYPES[schema.type]; return componentName in fields ? fields[componentName] : UnsupportedField;

olzraiti · 2016-11-07T07:54:10Z

Closes #272, closes #310, closes #363.

That's a neat example @frassinier, thanks for showing the potential this pull request brings!

n1k0 · 2016-11-07T12:50:01Z

Thanks for this great collaborative effort!

@olzraiti

This release has been made possible by the combined work of @olzraiti, @maartenth, @vinhlh, @tiemevanveen , @dehli, @enjoylife, @pabloen, @israelshirk, @sjhewitt and @rom10. Thank you folks! Breaking changes ---------------- Support for passing `DescriptionField`, `TitleField` and `SchemaField` as `Form` props as been dropped in this release. You now have to always pass them through the `fields` prop. Deprecations ------------ * Leverage `ui:options` everywhere (fix #370) (#378) There's now a unique recommended way to specify options for widgets in uiSchema, which is the `ui:options` directive. Previous ways are still supported, but you'll get a warning in the console if you use them. New features ------------ * Allow overriding the default fields/widgets (#371) * Pass data to `FieldTemplate` as strings instead of as React components (#341) * Pass `schema` & `uiSchema` to the field template component (#379) * Add `ui:order` wildcard feature and improve error messages (#368) * Add support for widget autofocus (#288) * Array field optional sortability (#345) * Radio widget support for integers and numbers (#325) * Add support for inline radios and checkboxes. (fix #346) (#348) * Added ref to `FileWidget`. (#355) * Added `removable` and `addable` options for array items (#373) * Enable Windows development (#320) Enhancements and bugfixes ------------------------- * Fix `minimum/maximum==0` for `UpDownWidget` and `RangeWidget` (#344) * Handle numbers requiring trailing zeros with more grace (#334) * Pass empty title to `TitleField` instead of name (#311) * `asNumber`: return `undefined` when value is empty string (#369) * Use [glyphicons](http://getbootstrap.com/components/#glyphicons) for buttons by default. (fix #337) (#375) * Support old versions of React (#312)

n1k0 · 2016-11-09T13:31:16Z

Released in v0.41.0.

AMongeEntytle · 2016-11-09T17:01:58Z

Great job guys ! Thank you for all the effort !

herzaso · 2017-08-07T06:16:50Z

I might have missed something but how do I change the default "number" input to an "updown" widget?
Obviously, I need the TextWidget for text inputs...

For example, I want the following schema to produce an "updown" widget without providing the "ui:schema":

schema: {
	title: "Registration",
	type: "object",
	properties: {
		quantity: {type: "integer", title: "Quantity", default: 4}
	}
}

Also, why is the default widget for numbers a TextWidget and not something more numbers oriented?

Natim · 2017-08-07T08:05:54Z

why is the default widget for numbers a TextWidget and not something more numbers oriented?

I guess because the TextWidget is the best compromise when you have no idea what kind of number one is talking about. For instance up and down button for a timestamp doesn't make any sense.

Natim · 2017-08-07T08:09:34Z

@herzaso The documentation for custom widget is here: https://github.com/mozilla-services/react-jsonschema-form#custom-widget-components

There apparently are some buildin widget for numbers: https://github.com/mozilla-services/react-jsonschema-form#for-number-and-integer-fields

const uiSchema = {
  quantity: {"ui:widget": "updown"}
};

herzaso · 2017-08-07T10:40:05Z

@Natim , thanks for your comments.

IMO, a better compromise would be to use a field that relates to a number and not to a string since I don't think there would be many real-world situations in which a user would want to have a text input for numbers (I'm not sure that showing a timestamp as is, and not as a date qualifies as a real-world situation). Either way, if the user has the ability to change the default widget, he could do so.

Regarding my main question, I'm looking for a way to change the default widget since my form would be dynamic and I wouldn't want to loop over it. Since your answer refers to a specific field (quantity), I'm not sure that will yield the required result. In my scenario, all number fields should be rendered as a number input field.

In that respect, the first link you provided (the uiSchema function) looks interesting but I do have 2 concerns:

I'll need a way to return the default widget (for all non-numeric fields)
I prefer not to implement the entire input myself as it wouldn't be future-proof. I just want to change the input type to number

Natim · 2017-08-07T11:52:46Z

I guess this pull-request allow you to do just that :) https://github.com/mozilla-services/react-jsonschema-form#customizing-the-default-fields-and-widgets

herzaso · 2017-08-07T12:00:04Z

Actually, I'm not sure it does as it rely on the default widget to replace and in my situation it will be TextWidget (and I don't want to replace the TextWidget).
I need some mapping between a property type (e.g. "number" / "integer") and a widget (UpDownWidget).
Ideally, that would be a mapping object (e.g. {"number": UpDownWidget}) and not a function replacing the whole implementation...

Update: I see that it relates to #637 although the actual behavior described there does not work for me (widget={{integer: UpDownWidget}})

annjawn · 2020-02-21T02:29:28Z

Hey everyone, I am really struggling to find out how to override widgets globally. We have multiple json schema templates and customizing them individually is going to be painful. Just like MaterialUI we would like to use AntD components but I am not sure how to globally override Text inputs, checkboxes, radio buttons, select's etc. any pointer here would be appreciated. I have pretty much same requirement as @herzaso.

epicfaace · 2020-02-25T07:56:36Z

@annjawn you'd have to customize each component individually. Eventually if people are interested they could contribute an antd theme (like for material ui) which would take a lot of work to initially make, but would then be easy for others to use.

To globally override things, check out FieldTemplate in the docs.

olzraiti added 25 commits July 12, 2016 15:28

fix HiddenWidget error when value is undefined

251974c

add context prop

8e69465

Replace tabs with spaces and add context PropType to Form.

7ae018c

Pass context to FieldTemplate

1217215

Fix passing context to SchemaField

4136956

Replace tabs with spaces

f8158b9

replace context with formContext

9eeaf75

Don't pass formContext to fields that don't use it

39fb8c3

Remove duplicate default export from Form

7ada187

Add tests for formContext

6ab8b12

Fix formContext tests lint issues

933f808

FormContext is passed internally inside registry. Pass formContext to…

b7670f4

… descriptions & titles.

update README

770f761

fix lint and package.json

295e572

fix tests. FormContext must be and object.

7bc5952

Fix minor style issues

90c0bd8

Update README

2861c92

Merge branch 'master' of https://github.com/mozilla-services/react-js…

9e0caac

…onschema-form

Use empty title instead of name

9c158ed

Use empty label instead of name

4974362

Add tests for passing titles/labels

8d120e4

fix lint issues

a919ae1

Merge branch 'master' of https://github.com/mozilla-services/react-js…

2dc4169

…onschema-form

Merge branch 'master' of https://github.com/mozilla-services/react-js…

a76d9a6

…onschema-form

Allow replacing all fields & widgets & import fields/widgets always f…

71c3994

…rom the registry

n1k0 reviewed Nov 4, 2016

View reviewed changes

olzraiti added 3 commits November 4, 2016 15:42

add loader function to getDefaultRegistry()

0688e9f

update tests and utils.getAlternativeWidget

a881bed

Update README

f4bfbee

frassinier approved these changes Nov 4, 2016

View reviewed changes

Fix tests that got broken during refactoring

3d01251

frassinier reviewed Nov 4, 2016

View reviewed changes

rm debug code from playground

fe79dd6

n1k0 approved these changes Nov 6, 2016

View reviewed changes

olzraiti added 2 commits November 7, 2016 09:43

Update README

06f2494

Minor code style improvement

d9049ec

n1k0 merged commit f24a728 into rjsf-team:master Nov 7, 2016

n1k0 mentioned this pull request Nov 9, 2016

Allows the modification of default fields #283

Closed

olzraiti mentioned this pull request Nov 9, 2016

Allow replacing hard coded fields & widgets through the registry #310

Closed

LucianBuzzo mentioned this pull request Feb 25, 2019

Default widget for each field instance #272

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow overriding the default fields/widgets #371

Allow overriding the default fields/widgets #371

olzraiti commented Nov 2, 2016 •

edited

Loading

n1k0 left a comment •

edited

Loading

n1k0 Nov 4, 2016 •

edited

Loading

n1k0 Nov 4, 2016

frassinier commented Nov 4, 2016

olzraiti commented Nov 4, 2016 •

edited by n1k0

Loading

frassinier commented Nov 4, 2016

olzraiti commented Nov 4, 2016

olzraiti commented Nov 4, 2016

frassinier commented Nov 4, 2016

frassinier Nov 4, 2016 •

edited

Loading

olzraiti Nov 5, 2016

frassinier commented Nov 5, 2016

n1k0 left a comment

n1k0 Nov 6, 2016

n1k0 Nov 6, 2016

frassinier Nov 6, 2016 •

edited

Loading

n1k0 Nov 6, 2016

olzraiti commented Nov 7, 2016

n1k0 commented Nov 7, 2016

n1k0 commented Nov 9, 2016

AMongeEntytle commented Nov 9, 2016

herzaso commented Aug 7, 2017 •

edited

Loading

Natim commented Aug 7, 2017

Natim commented Aug 7, 2017

herzaso commented Aug 7, 2017

Natim commented Aug 7, 2017

herzaso commented Aug 7, 2017 •

edited

Loading

annjawn commented Feb 21, 2020 •

edited

Loading

epicfaace commented Feb 25, 2020 •

edited

Loading

		@@ -897,6 +898,32 @@ If you're curious how this could ever be useful, have a look at the [Kinto formb

		Props passed to a custom SchemaField are the same as [the ones passed to a custom field](#field-props).

		### Customizing any fields or widgets

Allow overriding the default fields/widgets #371

Allow overriding the default fields/widgets #371

Conversation

olzraiti commented Nov 2, 2016 • edited Loading

Reasons for making this change

Checklist

n1k0 left a comment • edited Loading

Choose a reason for hiding this comment

n1k0 Nov 4, 2016 • edited Loading

Choose a reason for hiding this comment

n1k0 Nov 4, 2016

Choose a reason for hiding this comment

frassinier commented Nov 4, 2016

olzraiti commented Nov 4, 2016 • edited by n1k0 Loading

Example 1: Themes

Example 2: non orderable arrays as default

frassinier commented Nov 4, 2016

olzraiti commented Nov 4, 2016

olzraiti commented Nov 4, 2016

frassinier commented Nov 4, 2016

frassinier Nov 4, 2016 • edited Loading

Choose a reason for hiding this comment

olzraiti Nov 5, 2016

Choose a reason for hiding this comment

frassinier commented Nov 5, 2016

n1k0 left a comment

Choose a reason for hiding this comment

n1k0 Nov 6, 2016

Choose a reason for hiding this comment

n1k0 Nov 6, 2016

Choose a reason for hiding this comment

frassinier Nov 6, 2016 • edited Loading

Choose a reason for hiding this comment

n1k0 Nov 6, 2016

Choose a reason for hiding this comment

olzraiti commented Nov 7, 2016

n1k0 commented Nov 7, 2016

n1k0 commented Nov 9, 2016

AMongeEntytle commented Nov 9, 2016

herzaso commented Aug 7, 2017 • edited Loading

Natim commented Aug 7, 2017

Natim commented Aug 7, 2017

herzaso commented Aug 7, 2017

Natim commented Aug 7, 2017

herzaso commented Aug 7, 2017 • edited Loading

annjawn commented Feb 21, 2020 • edited Loading

epicfaace commented Feb 25, 2020 • edited Loading

olzraiti commented Nov 2, 2016 •

edited

Loading

n1k0 left a comment •

edited

Loading

n1k0 Nov 4, 2016 •

edited

Loading

olzraiti commented Nov 4, 2016 •

edited by n1k0

Loading

frassinier Nov 4, 2016 •

edited

Loading

frassinier Nov 6, 2016 •

edited

Loading

herzaso commented Aug 7, 2017 •

edited

Loading

herzaso commented Aug 7, 2017 •

edited

Loading

annjawn commented Feb 21, 2020 •

edited

Loading

epicfaace commented Feb 25, 2020 •

edited

Loading