networknt/react-schema-form-rc-select

An add-on of react-schema-form that support multiple select and a demo for extending react-schema-form with new components.

react-schema-form-rc-select

The RcSelect is an add-on of react-schema-form, and it supports both single and multiple select with async retrieval data from the Internet APIs. It is a demo for extending react-schema-form with new components externally.

It is a react-schema-form field component that wraps around rc-select

Features

1. Single select or multiple select with an option to add new items
2. Static dropdown values defined in schema or form
3. Dynamic dropdown values in JSON format load from the same server or Internet by get or post request
4. Dynamic dropdown values enriched on the API server when schema/form is loaded.

Live demo

To run the example locally

Clone the project and run

git clone https://github.com/networknt/react-schema-form-rc-select.git
cd react-schema-form-rc-select/example
npm install
npm start

A browser tab will be automatically opened with http://localhost:3000.

Installation

npm install react-schema-form-rc-select

This module is an extension of react-schema-form, and it must be called from react-schema-form to handle rc-select form type. It shows how to customize the react-schema-form to add a new field and map a new form type to it. Please see App.js in the example folder for the details.

import RcSelect from "react-schema-form-rc-select";
...

        var schemaForm = '';
        if (this.state.form.length > 0) {
            schemaForm = (
                <SchemaForm schema={this.state.schema} form={this.state.form} model={this.state.model} onModelChange={this.onModelChange} mapper={{"rc-select": RcSelect}} />
            );
        }

Documentation

For more detailed document, please visit the networknt document site

Contributing

See our CONTRIBUTING.md for information on how to contribute.

License

MIT Licensed. Copyright (c) Network New Technologies Inc. 2016-2020.

react-schema-form-rc-select's Issues

Upgrade to the react 17 and material ui 5

Refresh array items

The items in the select dropdown are different depending on the answer of the previous question. Is there any way to update the items in the select dropdown on the fly?

change the format of the dynmaic url to string format

add onInputKeyDown to handle the combobox single value update

Bypassing the multiple values for tags.

upgrade the rc-select to the latest 13.x from 9.x

Tried to upgrade but failed due to the latest version has changed the index.css to index.less and the current build doesn't support the less file.

Even adding the node-sass module to the package.json, it is still doesn't work.

So extra info that might help.

transitive-bullshit/create-react-library#57

avoid setting the value if the value is null

This is to handle the API returns nothing.

update README.md to reflect the latest changes

rc-select/assets/index.css file is missing

add credentials omit in the fetch for light-portal query

remove all the cookies so that we can bypass the StatelessAuthHandler as there is no access token available in the request.

add filterOption and optionFilterProp to the rc-select component

Recently, we created a form with up to 50 US states and it is too long for users to find the exact state to choose. To make it easier to use, we have added this filterOption in the form property.

Here is the form mentioned when selecting US as the country.

https://maproot.net/#/app/form/covidMapForm

refactor the fetch and resolve lint issues

do not reset the emptyValue for dynamic field with params

The bug was introduced in #33 and it will make the update form contains some empty dropdown fields if they are the dynamic conditional select with params.

upgrade object-path to 0.11.5 based on github scanner

Resolve a defect with replacer when model is empty

interested

Wanted to check out the live demo but the url for the API is down. Do you know if it is still compatible with the newer versions of Mozilla's lib?

add X-CSRF-TOKEN to the header to integrate with light-portal

The dynamic dropdown default value does not work in the update form

For example, the lob is not displayed in the Service Update form as it is dynamically retrieved from the reference service based on the host as a parameter.

handle the model is undefined when calling the replacer

In most of the cases, the form will pass in an empty model. However, this is not guaranteed. If null is passed in, the replacer will fail. To prevent the problem, we need to avoid calling replacer if the passed in data is undefined.

Clean up dependencies

I think this add-on project should be cleaned up to contain nothing else than the add-on. Not react, not babel or webpack. The demos that make use of can all reside in the main repository (https://github.com/networknt/react-schema-form) and have the addons as dev dependencies.

If you think this is a good idea I'm willing to PR

update the remote data format to reduce the size

The JSON response from API has been changed from

[
    {"value": "json-value1", "label": "json-label1"},
    {"value": "json-value2", "label": "json-label2"},
    {"value": "json-value3", "label": "json-label3"}
]

to

[
    {"json-value1": "json-label1"},
    {"json-value2": "json-label2"},
    {"json-value3": "json-label3"}
]

upgrade the project structure with create-react-library

for the fetch request, output the entire error instead of error code only

use material-ui Grid for the example app layout

This is to make the layout the same as the react-schema-form example that is using bootstrap. It doesn't make sense for us to mix the material-ui and bootstrap at the same time.

remove the jquery from the dependency as it is not used

This is to resolve a security alert from GitHub.

upgrade all dependencies to the latest

switch to InputLabel to support required flag in title

switch onInputKeydown to onChange as the last char is not captured

add dynamic examples to point to the reference api

update the example to connect to the dev.lightapi.net instead for localhost cors suport

Only the dev server supports the https://localhost:3000 to invoke the reference API directly.

HTTPS=true yarn start

reset value only for single and params are not empty

only a single select with a dynamic URL should reset currentValue after fetching from the server. This is to keep the model data on the form field such as tags.

resolve the issues with npm lint

There are still a lot of lint errors or warnings that need to be fixed.

add support to the cascade select between multiple selects

For example, you have a country, province, and city in a form and all three are loaded from the remote reference website. When you select a country, you need to ensure that the province is reloaded based on the country selected in the model. After you select a province, you need to make sure that the city is reloaded dynamically.

The above is only part of the deal. If you select another country, you need to make sure that the province is cleared out and reloaded with the provinces belong to the selected country.

Upgrade dependencies along with react-schema-form