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
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";
import {TextInput} from 'react-cross-inputs'
const UserNameInput= ({value, onChange}) => (
<TextInput
label='FirstName'
value={value}
showWarnings={!value}
validatorMessage={"can't be blank"}
onChange={onChange}
/>
);
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'
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 DateTime Tags |
- some of the inputs didn't include onFocus/onBlur methods (uploadFile, AddressAutoComplete)
The props list are props that relevant for all inputs, here you can see props are relevant only for some of the inputs
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 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'] |
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 |
Import mapbox-gl css
import 'mapbox-gl/dist/mapbox-gl.css';
key | type | discription |
---|---|---|
value | object | {latitude, longitude} |
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
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;
}