├── .gitignore ├── README.md ├── package.json ├── src ├── Checkbox.tsx ├── Input.tsx ├── Radio.tsx ├── Select.tsx ├── TextField.tsx └── index.ts ├── tsconfig.json ├── webpack.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | /.idea 2 | /node_modules 3 | /dist 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Final Form Material UI 2 | [![NPM Version](https://img.shields.io/npm/v/final-form-material-ui.svg?style=flat-square)](https://www.npmjs.com/package/final-form-material-ui) 3 | [![NPM Downloads](https://img.shields.io/npm/dm/final-form-material-ui.svg?style=flat-square)](https://www.npmjs.com/package/final-form-material-ui) 4 | 5 | A set of wrapper components to facilitate using [Material-UI](https://github.com/mui-org/material-ui) with Final Form. 6 | 7 | ### Available fields 8 | ```jsx 9 | import {TextField, Checkbox, Radio, Select, Input} from 'final-form-material-ui'; 10 | ``` 11 | 12 | ##### TextField 13 | ```jsx 14 | import React from 'react'; 15 | import {Field} from 'react-final-form'; 16 | import {TextField} from 'final-form-material-ui'; 17 | 18 | 26 | ``` 27 | 28 | ##### Input 29 | ```jsx 30 | import React from 'react'; 31 | import {Field} from 'react-final-form'; 32 | import {Input} from 'final-form-material-ui'; 33 | import InputAdornment from '@material-ui/core/InputAdornment'; 34 | 35 | 43 | 44 | Forgot password? 45 | 46 | 47 | } 48 | /> 49 | ``` 50 | 51 | ##### Select 52 | Use can pass any props from [`Select docs`](https://material-ui.com/api/select/) to `Field`. 53 | Additional props for `Field`: 54 | * `label` - label for select 55 | * `formControlProps` - object of props for `FormControl` component 56 | 57 | ```jsx 58 | import React from 'react'; 59 | import {Field} from 'react-final-form'; 60 | import {Select} from 'final-form-material-ui'; 61 | import MenuItem from '@material-ui/core/MenuItem'; 62 | 63 | 69 | 70 | London 71 | 72 | 73 | 74 | Paris 75 | 76 | 77 | ``` 78 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "final-form-material-ui", 3 | "version": "0.3.0", 4 | "description": "A set of wrapper components to facilitate using Material UI with Final Form", 5 | "main": "./dist/final-form-material-ui.min.js", 6 | "author": "Igor Golovin ", 7 | "license": "MIT", 8 | "scripts": { 9 | "build": "webpack --display-modules" 10 | }, 11 | "peerDependencies": { 12 | "@material-ui/core": "^1.0.0 || ^2.0.0 || ^3.0.0", 13 | "final-form": "^4.0.0", 14 | "react": "^15.0.0 || ^16.0.0", 15 | "react-final-form": "^3.0.0 || ^4.0.0" 16 | }, 17 | "devDependencies": { 18 | "@material-ui/core": "^3.2.2", 19 | "final-form": "^4.0.0", 20 | "react": "^16.4.0", 21 | "react-dom": "^16.4.0", 22 | "react-final-form": "^4.0.2", 23 | "ts-loader": "^5.2.2", 24 | "typescript": "^3.1.3", 25 | "webpack": "^4.12.0", 26 | "webpack-cli": "^3.0.4" 27 | }, 28 | "typings": "dist/index.d.ts", 29 | "files": [ 30 | "dist", 31 | "src" 32 | ], 33 | "keywords": [ 34 | "react", 35 | "final-form", 36 | "material-ui", 37 | "final-form-material-ui", 38 | "adapter" 39 | ], 40 | "homepage": "https://github.com/Deadly0/final-form-material-ui", 41 | "bugs": "https://github.com/Deadly0/final-form-material-ui/issues", 42 | "repository": { 43 | "type": "git", 44 | "url": "https://github.com/Deadly0/final-form-material-ui.git" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/Checkbox.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Checkbox from '@material-ui/core/Checkbox'; 3 | import {FieldRenderProps} from 'react-final-form'; 4 | 5 | 6 | const CheckboxWrapper: React.SFC = ({ 7 | input: {checked, name, onChange, ...restInput}, 8 | meta, 9 | ...rest 10 | }) => ( 11 | 18 | ); 19 | 20 | export default CheckboxWrapper; 21 | -------------------------------------------------------------------------------- /src/Input.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {FieldRenderProps} from 'react-final-form'; 3 | import Input from '@material-ui/core/Input'; 4 | import FormHelperText from '@material-ui/core/FormHelperText'; 5 | 6 | 7 | const InputWrapper: React.SFC = ({input: {name, onChange, value, ...restInput}, meta, ...rest}) => { 8 | const showError = ((meta.submitError && !meta.dirtySinceLastSubmit) || meta.error) && meta.touched; 9 | 10 | return ( 11 | <> 12 | 20 | 21 | {showError && 22 | 23 | {meta.error || meta.submitError} 24 | 25 | } 26 | 27 | ); 28 | }; 29 | 30 | export default InputWrapper; 31 | -------------------------------------------------------------------------------- /src/Radio.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Radio from '@material-ui/core/Radio'; 3 | import {FieldRenderProps} from 'react-final-form'; 4 | 5 | 6 | const RadioWrapper: React.SFC = ({ 7 | input: {checked, value, name, onChange, ...restInput}, 8 | meta, 9 | ...rest 10 | }) => ( 11 | 19 | ); 20 | 21 | export default RadioWrapper; 22 | -------------------------------------------------------------------------------- /src/Select.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Select from '@material-ui/core/Select'; 3 | import FormControl from '@material-ui/core/FormControl'; 4 | import InputLabel from '@material-ui/core/InputLabel'; 5 | import FormHelperText from '@material-ui/core/FormHelperText'; 6 | import {FormControlProps} from '@material-ui/core/FormControl'; 7 | import {FieldRenderProps} from 'react-final-form'; 8 | 9 | 10 | interface FormHelperTextWrapperProps extends FieldRenderProps { 11 | label: string, 12 | formControlProps: FormControlProps, 13 | } 14 | 15 | const FormHelperTextWrapper: React.SFC = ({ 16 | input: {name, value, onChange, ...restInput}, 17 | meta, 18 | label, 19 | formControlProps, 20 | ...rest 21 | }) => { 22 | const showError = ((meta.submitError && !meta.dirtySinceLastSubmit) || meta.error) && meta.touched; 23 | 24 | return ( 25 | 26 | {label} 27 | 28 |