react-generic v1.2.6
react-generic
With react-generic you can print quickly a Field, Table, Form 1. GenericField- Input Field With Edit Mode InLine/Popup for numbers of fields Type: 1.1 String - With Validate. 1.2 Number- With Validate. 1.3 Array- With Validate, Tags Mode, JSON Mode, autocomplete. 1.4 Date- Select Date From Calendar . 1.5 Pointer- Get Data To Drop Down From API. 1.6 Telephone - With Auto autocomplete , flagsImage. 1.7 File - DragAndDrop File Upload , Show image/Video In the field . 1.6 Telephone - With Auto autocomplete , flagsImage. Each field with OnSave CallBack. 2. GenericTable- - Pass Data props + Schema Props and get beautiful react-table with all field in EditMode by One Click 3. GenericForm - Pass Data props + Schema Props and get beautiful Form with all field in EditMode by One Click
How To Start
- install with npm, run in the command line: npm install generic-table --save
- import The package to your page: import {GenericTable , GenericForm , Field } from 'react-generic';
- import the Style.css to your app.css: @import '~react-generic/style.css';
Some Of The Fields ScreenShot: Generic Table ScreenShot: Generic Form ScreenShot:
Generic field
Use Field for show Input text with edit mode for different type of fields: String, Number, Object, Date, Pointer, and Array of Pointers
import {Field} from 'components';
<Field row={row} //All Row Data value={value} type={field.type} name={field.name} handleSubmit={handleSubmitFromField} config={this.getFieldConfig(fieldsConfiguration,field.name)} defaultConfiguration={defaultConfiguration} handlePointerClick={handlePointerClick}
Props | Type | Default value | |
---|---|---|---|
Row | Object | ||
Value | String ,Array, Pointer, Boolean ,Number | String | |
Name | String | ||
handleSubmit | function | On Save button click this function run with object of data: | |
{name: 'fieldName', | |||
objectId: 'objectId', | |||
Value: 'the new value', | |||
oldValue: 'oldValue ', | |||
row :'Row Data' | |||
} | |||
config | object | The options for each type are different, look at Field Configuration by type , this is the place to set specific option for the field | |
defaultConfiguration | object | Use this for config your all field by type | |
handlePointerClick | function | When user click on the pointer button this function run with pointer value | |
getPointerOptions | function | When user open the pointer drop down this function need to return call back like this: | |
return callback(null, { | |||
options: [ | |||
{ value:{__type :"Pointer",className: dataClassName,objectId: obj.objectId} | |||
label: 'the text that show in the drop box' | |||
} | |||
], | |||
complete: true | |||
}); | |||
Field(the schema object of this field, for pointer is require, from this object the pointer take the 'targetClass' value for the pointers options ) | object | {name:"pointerfieldsName", | |
targetClass:"Categories", | |||
type:"Pointer", | |||
} | |||
*You can use Field and Set The Type or, Use directly with the specific type by import Specific Type: import {DateField,StringField,NumberField,TelephoneField,ArrayField,FileField,PointerField,SpecialPointer} from 'react-generic'
Field Configuration by type:
YOU CAN LOOK/COPY CONFIG OPTIONS FROM THIS LINK: a link
DefaultConfiguration:
Set DefaultConfiguration for GenericTable/GenericForm YOU CAN LOOK/COPY CONFIG OPTIONS FROM THIS LINK: a link
Generic Table
Pass Data props + Schema Props and get beautiful react-table with all field in EditMode by One Click
import {GenericTable} from 'react-generic';
<GenericTable
data ={this.data}
dataClassName={dataClassName}
fields={this.schemaFields}
countResults={countResults}
handleSubmitFromField={::this.handleSubmitFromField}
getPointerOptions={::this.getPointerOptions}
handlePointerClick={::this.handlePointerClick}
fieldsConfiguration={this.fieldsConfiguration}
defaultConfiguration={this.defaultConfiguration}
defaultPageSize={${countResults < 20 ? countResults : 20}
}
loading={false}
onRowSelectd={::this.onRowSelectd}
/ >
Generic Form
Pass Data props + Schema Props and get beautiful Form with all field in EditMode by One Click
import {GenericForm } from 'react-generic';
<GenericForm data ={this.data} dataClassName={dataClassName} fields={this.schemaFields} handleSubmitFromField={::this.handleSubmitFromField} getPointerOptions={::this.getPointerOptions} handlePointerClick={::this.handlePointerClick} fieldsConfiguration={this.fieldsConfiguration} defaultConfiguration={this.defaultConfiguration} loading={false} / >