@simpleview/react-ui

1.1.9 • Public • Published

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 */}
		/>
	);
}

Readme

Keywords

none

Package Sidebar

Install

npm i @simpleview/react-ui

Weekly Downloads

8

Version

1.1.9

License

none

Unpacked Size

100 kB

Total Files

45

Last publish

Collaborators

  • georgeyb-sv
  • sloutrel
  • dlford
  • korychinn_sv
  • sv-mikael
  • actionawesome
  • arkmuntasser
  • leandrodalmassoglb
  • kristian.gonzalez
  • davidlpons
  • mauriciodeleonc
  • mpcarolin
  • csarantidessv
  • mikesan789
  • owenallenaz
  • qman33
  • svjoshua
  • mkes99
  • colin.booen
  • ssmith_sv
  • aglazebrook
  • rmaynes