Built-in UI Components
src/common/typeConfig.ts -> enum ComponentType
| Component | Description | Library |
|---|---|---|
| FORM_CONTROL (Default) | Text input | reactstrap |
| TOGGLE | On/Off button | react-toggle |
| DATE_PICKER | Date picker without time zone | react-day-picker |
| DATE_PICKER_TZ | Date picker with time zone | react-day-picker |
| TIME_PICKER | Time picker with hour and minute | rc-time-picker |
| DROPDOWN | Dropdown or Combobox | react-select |
| DROPDOWN_ASYNC | Dropdown with online search capability as you type | react-select |
| NUMERIC_INPUT | Number input | react-number-format |
| COLOR_PICKER | Color picker | react-color |
| MULTIPLE_SELECT | Multiple selectable dropdown | react-select |
| MULTIPLE_SELECT_ASYNC | Multiple selectable dropdown with online search capability as you type | react-select |
| PHONE_INPUT | Phone input with country code selectable | react-intl-tel-input |
| EDITOR | HTML editor | react-quill |
| TEXT_AREA | Text area | reactstrap |
| TAG_INPUT | Special multiple addible text input | react-select |
| LABEL | Disabled label | reactstrap |
| BAR_CHART | Bar chart | react-chartjs-2 |
| LINE_CHART | Line chart | react-chartjs-2 |
| PIE_CHART | Pie chart | react-chartjs-2 |
| JSON_VIEW | JSON input | react-json-view |
| RADIO_BUTTON | Radio button | reactstrap |
| PROGRESS_BAR | Progress bar | reactstrap |
| MULTIPLE_PROGRESS_BAR | Multiple progress bar | reactstrap |
| TABLE | Table to use for 1-n relations | ag-grid, react-bootstrap-table-next |
| FILE_UPLOADER | Single file upload | custom |
| UPLOAD_CONTAINER | Multiple file upload | custom |
Customized Prop Types​
These are customized props by our framework to speed up development process. Not all component props will be exists below, please check the original component site for further information.
TABLE​
| Property | PropType | Required | Default | Description |
|---|---|---|---|---|
| referredPageConfig | IPageConfig | Yes | - | Page config to use for the table and related features |
| referredTabIndex | number | - | 0 | Tab index in the specified page config |
| customEvents | ITableCustomEvent | - | - | |
| forceGetRecordFromPageConfig | boolean | - | true | |
| hideRefreshButton | boolean | - | false | |
| hideFilters | boolean | - | false | |
| filterBy | Function | - | - | (params: object, type: ITypeRuntime) |
| refreshButtonProps | object | - | - | ICustomProps & { refreshButtonText?: string } |
UPLOAD_CONTAINER​
| Property | PropType | Required | Default | Description |
|---|---|---|---|---|
| accept | string | - | - | see. https://www.w3schools.com/tags/att_input_accept.asp |
| disabled | boolean | - | false | Adding new files not permitted when true |
| onAdd | Function | - | - | (newFile :any) |
| onRemove | Function | - | - | (removedIndex: number) |
| onChange | Function | - | - | (files: any[]) |
| maxFileSize | number | - | 10240 | (KB) Limit for each individual file to be able to uploaded. |
FILE_UPLOADER​
| Property | PropType | Required | Default | Description |
|---|---|---|---|---|
| accept | string | - | - | see. https://www.w3schools.com/tags/att_input_accept.asp |
| mode | string | - | - | Default file is an object with mimeType etc. if mode value is "base64" then only this value will be managed. |
| data | any | - | - | File object or base64 value according to specified mode. |
| onChange | Function | - | - | (file: any) |
| disabled | boolean | - | false | Adding new files not permitted when true. |
| maxFileSize | number | - | 10240 | (KB) Limit for each individual file to be able to uploaded. |
| modalSize | string | - | 'lg' | Preview modal size. |
| style | string | - | - | Styling prop for container element. |
| imageStyle | string | - | - | Styling prop for image preview element. |