Built-in UI Components

src/common/typeConfig.ts -> enum ComponentType

Component	Description	Library
FORM_CONTROL (Default)	Text input	https://reactstrap.github.io/
TOGGLE	On/Off button	https://www.npmjs.com/package/react-toggle
DATE_PICKER	Date picker without time zone	https://react-day-picker.js.org/
DATE_PICKER_TZ	Date picker with time zone	https://react-day-picker.js.org/
TIME_PICKER	Time picker with hour and minute	http://react-component.github.io/time-picker/
DROPDOWN	Dropdown or Combobox	https://react-select.com/
DROPDOWN_ASYNC	Dropdown with online search capability as you type	https://react-select.com/
NUMERIC_INPUT	Number input	https://www.npmjs.com/package/react-number-format
UPLOAD_CONTAINER	Multiple file upload	https://reactjs.org/docs/uncontrolled-components.html#the-file-input-tag
COLOR_PICKER	Color picker	https://casesandberg.github.io/react-color/
FILE_UPLOADER	Single file upload	https://reactjs.org/docs/uncontrolled-components.html#the-file-input-tag
MULTIPLE_SELECT	Multiple selectable dropdown	https://react-select.com/
MULTIPLE_SELECT_ASYNC	Multiple selectable dropdown with online search capability as you type	https://react-select.com/
PHONE_INPUT	Phone input with country code selectable	https://www.npmjs.com/package/react-intl-tel-input
EDITOR	HTML editor	https://ckeditor.com/
TEXT_AREA	Text area	https://reactstrap.github.io/
TAG_INPUT	Special multiple addible text input	https://react-select.com/
LABEL	Disabled label	https://reactstrap.github.io/
BAR_CHART	Bar chart	https://github.com/jerairrest/react-chartjs-2
LINE_CHART	Line chart	https://github.com/jerairrest/react-chartjs-2
PIE_CHART	Pie chart	https://github.com/jerairrest/react-chartjs-2
JSON_VIEW	JSON input	https://www.npmjs.com/package/react-json-view
RADIO_BUTTON	Radio button	https://reactstrap.github.io/
PROGRESS_BAR	Progress bar	https://reactstrap.github.io/components/progress/
MULTIPLE_PROGRESS_BAR	Multiple progress bar	https://reactstrap.github.io/components/progress/
TABLE	Table to use for 1-n relations	https://www.ag-grid.com/

FORM_CONTROL

Property Name	Property Type	Description
type	string = "text" / "password"	type can be things like text, password, (typical input types) as well as select and textarea, providing children as you normally would to those.
size	string = "xs" / "sm" / "md" / "lg" / "xl"
bsSize	string = "xs" / "sm" / "md" / "lg" / "xl"
tag	function / string
innerRef	string	ref will only get you a reference to the Input component, use innerRef to get a reference to the DOM input (for things like focus management).
plaintext	string
addon	string
className	string
cssModule	string

TOGGLE

Property Name	Property Type	Description
checked	boolean	If true, the toggle is checked. If false, the toggle is unchecked. Use this if you want to treat the toggle as a controlled component
defaultChecked	boolean	If true on initial render, the toggle is checked. If false on initial render, the toggle is unchecked. Use this if you want to treat the toggle as an uncontrolled component
onChange	function	Callback function to invoke when the user clicks on the toggle. The function signature should be the following: function(e) { }. To get the current checked status from the event, use e.target.checked.
onFocus	function	Callback function to invoke when field has focus. The function signature should be the following: function(e) { }
onBlur	function	Callback function to invoke when field loses focus. The function signature should be the following: function(e) { }
name	string	The value of the name attribute of the wrapped <input> element
value	string	The value of the value attribute of the wrapped <input> element
id	string	The value of the id attribute of the wrapped <input> element
icons	object	If false, no icons are displayed. You may also pass custom icon components in icons={{{checked: <CheckedIcon />, unchecked: <UncheckedIcon />}}
aria-labelledby	string	The value of the aria-labelledby attribute of the wrapped <input> element
aria-label	string	The value of the aria-label attribute of the wrapped <input> element
disabled	boolean	If true, the toggle is disabled. If false, the toggle is enabled

DATE_PICKER / DATE_PICKER_TZ

Property Name	Property Type	Description
classNames	object	Customize the CSS class names used when rendering the component.
clickUnselectsDay	boolean = false
component	string / React.Component = "input"
dayPickerProps	object
format	string / string[]	ref will only get you a reference to the Input component, use innerRef to get a reference to the DOM input (for things like focus management).
formatDate	(date: Date?, format: string? / string[]?, locale: string?) ⇒ string
hideOnDayClick	boolean = true
inputProps	object
keepFocus	boolean = true
overlayComponent	React.Component
parseDate	(str: string?, format: string? / string[]?, locale: string?) ⇒ Date	void
placeholder	string
showOverlay	boolean = false
style	object
value	string / Date
onDayChange	(day: ?Date, modifiers: Object, dayPickerInput: DayPickerInput) ⇒ void
onDayPickerHide	() ⇒ void
onDayPickerShow	() ⇒ void

TIME_PICKER

Name	Type	Default	Description
prefixCls	String	'rc-time-picker'	prefixCls of this component
clearText	String	'clear'	clear tooltip of icon
disabled	Boolean	false	whether picker is disabled
allowEmpty	Boolean	true	allow clearing text
open	Boolean	false	current open state of picker. controlled prop
defaultValue	moment	null	default initial value
defaultOpenValue	moment	moment()	default open panel value, used to set utcOffset,locale if value/defaultValue absent
value	moment	null	current value
placeholder	String	''	time input's placeholder
className	String	''	time picker className
id	String	''	time picker id
popupClassName	String	''	time panel className
popupStyle	object	{}	customize popup style
showHour	Boolean	true	whether show hour
showMinute	Boolean	true	whether show minute
showSecond	Boolean	true	whether show second
format	String	-	moment format
disabledHours	Function	-	disabled hour options
disabledMinutes	Function	-	disabled minute options
disabledSeconds	Function	-	disabled second options
use12Hours	Boolean	false	12 hours display mode
hideDisabledOptions	Boolean	false	whether hide disabled options
onChange	Function	null	called when select a different value
onAmPmChange	Function	null	called when select an am/pm value
addon	Function	-	called from timepicker panel to render some addon to its bottom, like an OK button. Receives panel instance as parameter, to be able to close it like panel.close()
placement	String	bottomLeft	one of ['topLeft', 'topRight', 'bottomLeft', 'bottomRight']
transitionName	String	''
name	String	-	sets the name of the generated input
onOpen	Function({ open })		when TimePicker panel is opened
onClose	Function({ open })		when TimePicker panel is closed
hourStep	Number	1	interval between hours in picker
minuteStep	Number	1	interval between minutes in picker
secondStep	Number	1	interval between seconds in picker
focusOnOpen	Boolean	false	automatically focus the input when the picker opens
inputReadOnly	Boolean	false	set input to read only
inputIcon	ReactNode		specific the select icon
clearIcon	ReactNode		specific the clear icon

DROPDOWN / DROPDOWN_ASYNC / MULTIPLE_SELECT / MULTIPLE_SELECT_ASYNC / TAG_INPUT

These are too comprehensive components to write down in a limited area. Please visit https://react-select.com/props for prop details.

NUMERIC_INPUT

Props	Options	Default	Description
thousandSeparator	mixed: single character string or boolean true (true is default to ,)	none	Add thousand separators on number
decimalSeparator	single character string	.	Support decimal point on a number
thousandsGroupStyle	One of ['thousand', 'lakh', 'wan']	thousand	Define the thousand grouping style, It support three types. thousand style (thousand) : 123,456,789, indian style (lakh) : 12,34,56,789, chinese style (wan) : 1,2345,6789
decimalScale	number	none	If defined it limits to given decimal scale
fixedDecimalScale	boolean	false	If true it add 0s to match given decimalScale
allowNegative	boolean	true	allow negative numbers (Only when format option is not provided)
allowEmptyFormatting	boolean	true	Apply formatting to empty inputs
allowLeadingZeros	boolean	false	Allow leading zeros at beginning of number
prefix	String (ex : $)	none	Add a prefix before the number
suffix	String (ex : /-)	none	Add a suffix after the number
value	Number or String	null	Value to the number format. It can be a float number, or formatted string. If value is string representation of number (unformatted), isNumericString props should be passed as true.
defaultValue	Number or String	null	Value to the used as default value if value is not provided. The format of defaultValue should be similar as defined for the value.
isNumericString	boolean	false	If value is passed as string representation of numbers (unformatted) then this should be passed as true
displayType	String: text / input	input	If input it renders a input element where formatting happens as you input characters. If text it renders it as a normal text in a span formatting the given value
type	One of ['text', 'tel', 'password']	text	Input type attribute
format	String : Hash based ex (#### #### #### ####) Or Function	none	If format given as hash string allow number input inplace of hash. If format given as function, component calls the function with unformatted number and expects formatted number.
removeFormatting	(formattedValue) => numericString	none	If you are providing custom format method and it add numbers as format you will need to add custom removeFormatting logic
mask	String (ex : _)	' '	If mask defined, component will show non entered placed with masked value.
customInput	Component Reference	input	This allow supporting custom inputs with number format.
onValueChange	(values) => {}	none	onValueChange handler accepts values object
isAllowed	values => true or false	none	A checker function to check if input value is valid or not
renderText	(formattedValue) => React Element	null	A renderText method useful if you want to render formattedValue in different element other than span.
getInputRef	(elm) => void	null	Method to get reference of input, span (based on displayType prop) or the customInput's reference.
allowedDecimalSeparators	array of char

PHONE_INPUT

Property	PropType	Required	Default	Description
containerClassName	string	-	'intl-tel-input'	Container CSS class name.
inputClassName	string	-	''	Text input CSS class name.
fieldName	string	-	''	It's used as input field name attribute.
fieldId	string	-	''	It's used as input field id attribute.
defaultValue	string	-	''	The value used to initialize input. This will only work on uncontrolled component.
countriesData	[array]	-	null	Countries data can be configured, it defaults to data defined in AllCountries.
allowDropdown	bool	-	true	Whether or not to allow the dropdown. If disabled, there is no dropdown arrow, and the selected flag is not clickable. Also we display the selected flag on the right instead because it is just a marker of state.
autoHideDialCode	bool	-	true	If there is just a dial code in the input: remove it on blur, and re-add it on focus.
autoPlaceholder	bool	-	true	Add or remove input placeholder with an example number for the selected country.
customPlaceholder	func	-	null	Change the placeholder generated by autoPlaceholder. Must return a string.
excludeCountries	[string]	-	[]	Don't display the countries you specify. (Array)
formatOnInit	bool	-	true	Format the input value during initialisation.
separateDialCode	bool	-	false	Display the country dial code next to the selected flag so it's not part of the typed number. Note that this will disable nationalMode because technically we are dealing with international numbers, but with the dial code separated.
defaultCountry	string	-	''	Default country.
geoIpLookup	func	-	null	GeoIp lookup function.
nationalMode	bool	-	true	Don't insert international dial codes.
numberType	string	-	'MOBILE'	Number type to use for placeholders.
noCountryDataHandler	func	-	null	The function which can catch the "no this default country" exception.
onlyCountries	[string]	-	[]	Display only these countries.
preferredCountries	[string]	-	['us', 'gb']	The countries at the top of the list. defaults to United States and United Kingdom.
onPhoneNumberChange	func	-	null	Optional validation callback function. It returns validation status, input box value and selected country data.
onPhoneNumberBlur	func	-	null	Optional validation callback function. It returns validation status, input box value and selected country data.
onPhoneNumberFocus	func	-	null	Optional validation callback function. It returns validation status, input box value and selected country data.
onSelectFlag	func	-	null	Allow main app to do things when a country is selected.
disabled	bool	-	false	Disable this component.
autoFocus	bool	-	false	Enable auto focus
useMobileFullscreenDropdown	bool	-	true	Render fullscreen flag dropdown when mobile useragent is detected. The dropdown element is rendered as a direct child of document.body
autoComplete	string	-	'off'	Set the value of the autoComplete attribute on the input. For example, set it to phone to tell the browser where to auto complete phone numbers.
telInputProps	object	-	{}	Pass through arbitrary props to the tel input element.
format	bool	-	false	Format the number.
onFlagClick	func	-	null	Allow main app to do things when flag icon is clicked.
value	string	-	-	The value of the input field. Useful for making input value controlled from outside the component.
placeholder	string	-	-	Static placeholder for input controller. When defined it takes priority over autoPlaceholder.
style	custom	-	-	Style object for the wrapper div. Useful for setting 100% width on the wrapper, etc.

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	bool	-	true
hideRefreshButton	bool	-	false
hideFilters	bool	-	false
filterBy	func	-	'	(params: object, type: ITypeRuntime)
refreshButtonProps	object	-	-	ICustomProps & { refreshButtonText?: string }

TODOs

UPLOAD_CONTAINER

FILE_UPLOADER

EDITOR

TEXT_AREA

LABEL

BAR_CHART / LINE_CHART / PIE_CHART

JSON_VIEW

RADIO_BUTTON