@inovando/react-components

Very opinionated reusable components (some binded to final-form exclusively)

Demo

Install

npm install --save @inovando/react-components
# or
yarn add @inovando/react-components

Usage

<Upload />

importReact,{Component}from"react";import{Upload}from"@inovando/react-components";import"@inovando/react-components/dist/index.css";constApp=()=>{const[files,setFiles]=useState([]);return(<UploadonChange={(files)=>{setFiles(files);}}value={files}// This overrides "locale" proplabel="Arraste arquivos ou clique aqui para fazer upload"// Only "pt" or "en" yet, defaults to "pt"locale="pt"// Accept file type range (Optional)// https://react-dropzone.js.org/#section-accepting-specific-file-typesaccept="image/*"// in mb (Optional)maxSize={3}// custom style for containerstyle={{margin: '0 auto',maxWidth: 400}}/>);};

Final-Form Adapters

Install final-form

npm install --save final-form react-final-form
# or
yarn add final-form react-final-form

<UploadField /> (based on React Dropzone)

Check out "initialValues" example

importReactfrom'react';import{Form,Field}from'react-final-form';import{UploadField}from'@inovando/react-components';import'@inovando/react-components/dist/index.css';functionExampleForm(){constonSubmit=values=>{console.log('values:',values)}return(<FormonSubmit={onSubmit}initialValues={{files: [],}}render={({ handleSubmit, submitting })=>(<formonSubmit={handleSubmit}noValidate><Fieldname="files"component={UploadField}label="Arraste arquivos ou clique aqui para fazer upload"validate={(value)=>value.length ? undefined : 'Campo obrigatório'}/><buttondisabled={submitting}type="submit">
submit
</button></form>)}/>);}

<MoneyField /> (based on React Number Format)

Check out "initialValues" example

importReactfrom'react';import{Form,Field}from'react-final-form';import{MoneyField}from'@inovando/react-components';import'@inovando/react-components/dist/index.css';functionExampleForm(){constonSubmit=values=>{console.log('values:',values)}return(<FormonSubmit={onSubmit}initialValues={{money: 0.5,}}render={({ handleSubmit, submitting })=>(<formonSubmit={handleSubmit}noValidate><Fieldname="money"component={MoneyField}fullWidthmargin="normal"variant="outlined"label="Valor (R$)"validate={(value)=>(value ? undefined : 'Campo obrigatório')}/><buttondisabled={submitting}type="submit">
submit
</button></form>)}/>);}

<AutocompleteField /> (based on Material-UI Autocomplete)

Check out "initialValues" example

importReactfrom'react';import{Form,Field}from'react-final-form';import{AutocompleteField}from'@inovando/react-components';import'@inovando/react-components/dist/index.css';constsleep=ms=>newPromise(resolve=>setTimeout(resolve,ms));functionExampleForm(){const[loading,setLoading]=useState(false);constonSubmit=values=>{console.log('values:',values)}return(<FormonSubmit={onSubmit}render={({ handleSubmit, submitting })=>(<formonSubmit={handleSubmit}noValidate><Fieldname="state"component={AutocompleteField}fullWidthmargin="normal"variant="outlined"label="Estado"options={[{label: 'Paraná',value: 'PR'},// ...]}handleChange={(value)=>{console.log('value:',value);}}onSearch={async(text)=>{setLoading(true);awaitsleep(1000);setLoading(false);}}kind="value"// expects "initialValue" as anything but an object, defaults to "object"delay={500}// "onSearch" debounce delay in ms, defaults to 250loading={loading}validate={(value)=>(value ? undefined : 'Campo obrigatório')}/><buttondisabled={submitting}type="submit">
submit
</button></form>)}/>);}

<DateField /> (based on Material-UI Pickers)

Check out "initialValues" example

importReactfrom'react';import{Form,Field}from'react-final-form';import{DateField}from'@inovando/react-components';import'@inovando/react-components/dist/index.css';// Material-UI Pickers Dependenciesimport{MuiPickersUtilsProvider}from'@material-ui/pickers';importDateFnsUtilsfrom'@date-io/date-fns';importptLocalefrom'date-fns/locale/pt';constsleep=ms=>newPromise(resolve=>setTimeout(resolve,ms));functionExampleForm(){const[loading,setLoading]=useState(false);constonSubmit=values=>{console.log('values:',values)}return(// this tag can be at your global scope, such as "App.js"<MuiPickersUtilsProviderutils={DateFnsUtils}locale={ptLocale}><FormonSubmit={onSubmit}render={({ handleSubmit, submitting })=>(<formonSubmit={handleSubmit}noValidate><Fieldname="dataInicio"component={DateField}minDate={newDate()}// final-form validation logic must be at "validate" propfullWidthmargin="normal"variant="outlined"label="Data de início"validate={(value)=>value&&isBefore(subDays(newDate(),1),parseISO(value))
? undefined
: 'Campo inválido'}/><buttondisabled={submitting}type="submit">
submit
</button></form>)}/></MuiPickersUtilsProvider>);}

License

MIT © inovando