npm package: @simpleview/react-ui
Description: React components and UI/UX utilities
Author: Simpleview Inc.
Latest version: 1.1.9

# sv-react-ui

React UI for Simpleview

# Setup

## Necessary Dependencies

Your projects package.json file will need to install the following packages and allow them to be accessible by your webpack bundle system.

-   @material-ui/core
-   react
-   react-material-ui-form-validator
-   react-redux
-   react-select
-   redux
-   reduxsauce
-   redux-devtools-extension
-   redux-thunk
-   material-ui-phone-number
-   @yazeedloonat/ckeditor5-build-classic-sv
-   @date-io/moment
-   moment
-   material-ui-pickers
-   flag-icon-css

## RenderForm

Renders a form given a form definition (JSON), with sections, rows, columns and fields. Sections have rows, rows have columns, and columns can have rows or fields.

You can view the available fields via graphql:

```
  query { crm { get_form_def(...) {...} } }
```

Simple Form definition example:

```
{
    "name": "example_form",
    "sections": [
        {
            "name": "example_section",
            "label": "Example Section",
            "rows": [
                {
                    "columns": [
                        {
                            "width": 100,
                            "rows": [
                                {
                                    "columns": [
                                        {
                                            "width": 100,
                                            "fields": [
                                                {
                                                    "name": "recId",
                                                    "type": "TextField",
                                                    "dataType": "Int",
                                                    "hidden": true,
                                                    "validators": ["required"]
                                                }
                                            ]
                                        },
                                        {
                                            "width": 100,
                                            "fields": [
                                                {
                                                    "name": "title",
                                                    "label": "Title",
                                                    "type": "TextField",
                                                    "dataType": "String",
                                                    "formTitle": true,
                                                    "validators": ["required"]
                                                }
                                            ]
                                        },
                                        {
                                            "width": 100,
                                            "fields": [
                                                {
                                                    "name": "categoryID",
                                                    "label": "Type",
                                                    "type": "Select",
                                                    "dataType": "Int",
                                                    "relOptions": {
                                                        "name": "get_category", // it's up to you how use this to fetch options from your DB
                                                        "label": "title",
                                                        "value": "categoryID"
                                                    }
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}
```

Example of implmenting the component

```
submit = (data) => {...}

cancel = () => e => {...}

// handler for fetching options for the chip editor asynchronously
asyncOptionsHandler = async (field, data) => {...}

render() {
	const { type, def, data, dynamicFields, fieldIndex, formTitle } = this.props;

	if (def.section.length === 0) { return null; }

	return(
  		<RenderForm
			title={`${type} detail: ${formTitle}`}
			def={def}
			data={data}
			dynamicFields={dynamicFields} {/* dynamicFields are fields that listen to other fields, and change their own value */}
			fieldIndex={fieldIndex} {/* an index of the fields array, by field name */}
			onSubmit={this.submit}
			cancel={this.cancel}
			asyncOptionsHandler={debounce(this.asyncOptionsHandler, 500)} {/* you should probably _.debounce this too */}
		/>
	);
}
```