React-cross-inputs NPM

react-cross-inputs

The work is still in progress, the inputs are cross-platform for now are: TextInput, MobileInput, DateTime

This library is a wrapper of inputs to help us move fast with the help of another library-

react-parse
react-cross-form
react-common-admin

some of the inputs are regular inputs and some of them are specific for use with this three other libraries

nothing special here, only a wrapper that renders different inputs with the same look and API when it is possible

Installation

Web - First You need to install Ant Design

Native - First You need to install NativeBase

npm i react-cross-inputs --save

Web

@import  "~react-cross-inputs/src/style/web.css";

Basic example

import  {TextInput}  from  'react-cross-inputs'

const UserNameInput= ({value, onChange}) => (
	<TextInput
		label='FirstName'
		value={value}
	    showWarnings={!value}
	    validatorMessage={"can't be blank"}
		onChange={onChange}
	/>
);

enter image description here

Available inputs

import {
	TextInput,
	NumberInput,
	MobileInput,
	DropDown,
	ObjectsDropDown,
	TextArea,
	Tags, // array of string input
	Switcher // For boolean values
	
// The next inputs are spiceal for react-parse

	UploadFile, // Upload files to parse server
	DateTime, // Select Date, get parse server date object
	AddressAutoComplete, // Need a mapbox key, address auto complete field
	Pointer, // parse server pointer
	GeoLocationMapView,// parse server geo location view on map
	AddressWithMapView, // For react-cross-from users, this for a group that make the update of address and geolocation work together
	ArrayOfPointer,
	ArrayOfPointerTableView
} from 'react-cross-inputs'

props

key	type	discription
id	string	input id
value	string/number/object/array	value type is different in each component
onFocus	function	Function that be call on input Focus with input event
onChange	function	Function that be call on input Focus with the new value
onBlur	function	Function that be call on input Blur with input event
placeholder	string	input placeholder
disabled	boolean	input disabled
autoFocus	boolean	input autoFocus
onRef	function	Function that be call with input ref
onKeyPress	function	Function that be call onKeyPress
label	string	input label
showWarnings	boolean	when false the error will not display to user
validatorMessage	array/string	input error to display to the user
onChangeAndBlur	function	Some of the fields do not exist onBlur event if you want you can pass a Change And Blur and it will replace the onChange event.you can use in- UploadFile DateTimeTags

some of the inputs didn't include onFocus/onBlur methods (uploadFile, AddressAutoComplete)

specific props

The props list are props that relevant for all inputs, here you can see props are relevant only for some of the inputs

DropDown, ObjectsDropDown

key	type	discription
option	array	array of objects, each object is an option example: {key:'red', label:'RedColor'} yoc can pass a customRender to option , for example: {key:'red', label:'RedColor'}, {key: 'pink', label: 'pink', customRender: ({label}) => <p style={{color: 'pink'}}>{label}}
valueKey	string	Default value is 'key'
labelKey	string	Default value is 'label'

Pointer

Pointer is relevant only for client of parse server

key	type	discription
options	array	same like DropDown option, but the key is objectId
schemaName	string (required)	parse server schemaName
onChange	function	function that be call with parse pointer object
stringPointer	boolean	Set true when the field is objectId string and not parse pointer
valueKey	string	When using stringPointer you can set the valueKey to Choose diffrent value , not objectId
createPointer	function	You can override ower pointer object (schemaName, objectId, fieldProps) => {...Pointer object}

key	type	discription
value	array	example - 'red', 'green'

AddressAutoComplete

key	type	discription
accessToken	string (required)	mapbox api key
onSelect	function	A function that is called when user selects an option, the function gets address and geolocation

GeoLocationMapView

Import mapbox-gl css

import 'mapbox-gl/dist/mapbox-gl.css';

key	type	discription
value	object	{latitude, longitude}

AddressWithMapView

This field is special for the use of react-common-admin se) When to use ? use it for a collection that includes a geo-location a location string that you want to let the user the ability to change and keep sync of both How to use ? See inside react-common-admin docs

Web screenshot

enter image description here

web style issue-

if the validate feedback is not in the right place, pleas add this line to your css .r-c-form is need to be the class name of the form/inputs wrapper div

.r-c-form  .ant-form-item-children {
position: initial  !important;
}

.r-c-input  .has-success.has-feedback  .ant-form-item-children:after, .has-warning.has-feedback  .ant-form-item-children:after, .has-error.has-feedback  .ant-form-item-children:after, .is-validating.has-feedback  .ant-form-item-children:after {
	position: absolute  !important;
	top: 20px  !important;
}