fix: fixes

settlin · Jun 28, 2021 · 49cb5ca · 49cb5ca
1 parent cfe9621
commit 49cb5ca
Show file tree

Hide file tree

Showing 8 changed files with 171 additions and 57 deletions.
diff --git a/formik-mui/src/Input.js b/formik-mui/src/Input.js
@@ -14,11 +14,18 @@ class ErrorBoundary extends React.Component {
 		console.log(error, info); // eslint-disable-line no-console
 	}
 	render() {
-		if (this.state.error) return <h1>{this.state.error.toString()}</h1>;
+		if (this.state.error) {
+			return (
+				<h1>
+					{this.state.error.toString()}
+				</h1>
+			);
+		}
 		return this.props.children;
 	}
 }
 
+// eslint-disable-next-line react/no-multi-comp
 class Input extends React.Component {
 	state = {}
 	extraProps() {
@@ -116,14 +123,16 @@ class Input extends React.Component {
 		const type = this.type();
 		const extraProps = {...(formik ? {fast, ...(input ? {component: input} : {})} : {}), compact, components, ...this.extraProps()};
 
-		return <ErrorBoundary>
-			<Container {...containerProps}>
-				{Field
-					? <Field {...rest} {...(type ? {type} : {})} {...extraProps}/>
-					: <Loader/>
-				}
-			</Container>
-		</ErrorBoundary>;
+		return (
+			<ErrorBoundary>
+				<Container {...containerProps}>
+					{Field
+						? <Field {...rest} {...(type ? {type} : {})} {...extraProps}/>
+						: <Loader/>
+					}
+				</Container>
+			</ErrorBoundary>
+		);
 	}
 }
 

diff --git a/formik-mui/src/formik/ButtonGroup.js b/formik-mui/src/formik/ButtonGroup.js
@@ -1,11 +1,13 @@
 import React from 'react';
 import ButtonGroup from '../forms/ButtonGroup';
 
-const FormikRadio = ({ children, render, fast, type, buttons, ...props }) => { // eslint-disable-line no-unused-vars
+function FormikRadio({children, render, fast, type, buttons, ...props}) { // eslint-disable-line no-unused-vars
 	const Field = require('formik')[fast ? 'FastField' : 'Field'];
-	return <Field {...props} component={ButtonGroup}>
-		{children}
-	</Field>;
-};
+	return (
+		<Field {...props} component={ButtonGroup}>
+			{children}
+		</Field>
+	);
+}
 
 export default FormikRadio;
diff --git a/react-hook-form-mui/src/Input.js b/react-hook-form-mui/src/Input.js
@@ -48,6 +48,8 @@ const module = function({type, rhf, components: {input} = {}}) {
 	switch (type) {
 		case 'select':
 			return rhf ? require('./react-hook-form/Select').default : input || require('./forms/Select').default;
+		case 'buttons':
+			return rhf ? require('./react-hook-form/ButtonGroup').default : input || require('./forms/ButtonGroup').default;
 	}
 	return rhf ?  require('./react-hook-form/TextField').default : input || require('./forms/TextField').default;
 };

diff --git a/react-hook-form-mui/src/forms/ButtonGroup.js b/react-hook-form-mui/src/forms/ButtonGroup.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import clsx from 'clsx';
 
@@ -32,75 +33,100 @@ class ToggleButtonGroup extends React.Component {
 	}
 
 	handleChange(event, value) {
-		if (this.props.field) this.props.form.setFieldValue(this.props.field.name, value);
-  	if (this.props.onChange) this.props.onChange(event.currentTarget.value);
+		if (this.props.onChange) this.props.onChange(value);
+		if (this.props.field) this.props.field.onChange(value);
 	}
 
-	handleBlur() {
-  	// take care of touched
-		if (this.props.field) this.props.form.setFieldTouched(this.props.field.name, true);
+	handleBlur(event) {
+		// take care of touched
+		if (this.props.onBlur) this.props.onBlur(event);
+		if (this.props.field) this.props.field.onBlur(event);
 	}
 
 	render() {
-  	let {
-  		label,
+		let {
+			label,
 			FormControlProps: {classes: fClasses = {}, ...FormControlProps} = {},
-  		FormLabelProps,
-  		FormHelperTextProps = {},
-  		ToggleButtonProps = {},
-  		ToggleButtonGroupProps: {classes: tClasses = {}, ...ToggleButtonGroupProps} = {},
-  		compact,
-  		classes,
+			FormLabelProps,
+			FormHelperTextProps = {},
+			ToggleButtonProps = {},
+			ToggleButtonGroupProps: {classes: tClasses = {}, ...ToggleButtonGroupProps} = {},
+			compact,
+			classes,
 			options,
 			exclusive = true,
-  		...props
-  	} = this.props;
+			required,
+			disabled,
+			...props
+		} = this.props;
 
 		const {error, helperText, ...fp} = formikToMuiProps(props);
 		ToggleButtonProps.classes = {...ToggleButtonProps.classes, root: clsx(classes.button, (ToggleButtonProps.classes || {}).root)};
 
-  	return (
-  		<FormControl
-  			error={error}
-  			{...FormControlProps}
+		return (
+			<FormControl
+				error={error}
+				{...FormControlProps}
+				{...{required, disabled}}
 				classes={{...fClasses, root: clsx(fClasses.root, classes[`formControl${compact ? 'Compact' : 'Normal'}`])}}
-  		>
-  			{label && (
-  				<FormLabel
-  					{...FormLabelProps}
-  					classes={{...(FormLabelProps || {}).classes, ...(compact ? {root: classes.formLabel} : {})}}
-  				>
+			>
+				{label && (
+					<FormLabel
+						{...FormLabelProps}
+						classes={{...(FormLabelProps || {}).classes, ...(compact ? {root: classes.formLabel} : {})}}
+					>
 						{label}
 						{helperText && (
 							<FormHelperText
 								{...FormHelperTextProps}
-								error={error}
 								className={FormHelperTextProps.className}
+								error={error}
 							>
 								{helperText}
 							</FormHelperText>
 						)}
-  				</FormLabel>
+					</FormLabel>
 				)}
-  			<MuiToggleButtonGroup
-  				{...ToggleButtonGroupProps}
-  				{...fp}
+				<MuiToggleButtonGroup
+					{...ToggleButtonGroupProps}
+					{...fp}
+					classes={compact ? {} : {root: clsx(tClasses.root, classes.buttonGroup)}}
 					exclusive={exclusive}
-					onChange={this.handleChange}
 					onBlur={this.handleBlur}
-					classes={compact ? {} : {root: clsx(tClasses.root, classes.buttonGroup)}}
-  			>
-  				{options.map(option => (
-  					<ToggleButton
-  						key={option.value}
-  						{...ToggleButtonProps}
+					onChange={this.handleChange}
+				>
+					{options.map(option => (
+						<ToggleButton
+							key={option.value}
+							{...ToggleButtonProps}
 							value={option.value}
-  					>{option.label}</ToggleButton>
-  				))}
-  			</MuiToggleButtonGroup>
-  		</FormControl>
-  	);
+						>
+							{option.label}
+
+						</ToggleButton>
+					))}
+				</MuiToggleButtonGroup>
+			</FormControl>
+		);
 	}
 }
 
+ToggleButtonGroup.propTypes = {
+	classes: PropTypes.object,
+	compact: PropTypes.bool,
+	disabled: PropTypes.bool,
+	exclusive: PropTypes.bool,
+	field: PropTypes.object,
+	FormControlProps: PropTypes.object,
+	FormHelperTextProps: PropTypes.object,
+	FormLabelProps: PropTypes.object,
+	label: PropTypes.string,
+	onBlur: PropTypes.func,
+	onChange: PropTypes.func,
+	options: PropTypes.array,
+	required: PropTypes.bool,
+	ToggleButtonGroupProps: PropTypes.object,
+	ToggleButtonProps: PropTypes.object,
+};
+
 export default withStyles(styles)(ToggleButtonGroup);
diff --git a/react-hook-form-mui/src/react-hook-form/ButtonGroup.js b/react-hook-form-mui/src/react-hook-form/ButtonGroup.js
@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {useController} from 'react-hook-form';
+import ButtonGroup from '../forms/ButtonGroup';
+
+export default function RHFButtonGroup({control, name, ...rest}) {
+	const {
+		field: {ref, ...inputProps},
+	} = useController({
+		name,
+		control,
+		rules: {required: rest.required},
+		defaultValue: rest.defaultValue,
+	});
+
+	return (
+		<ButtonGroup
+			aria-label='text alignment'
+			exclusive
+			ref={ref}
+			{...inputProps}
+			{...rest}
+		/>
+	);
+}
+
+RHFButtonGroup.propTypes = {
+	control: PropTypes.object,
+	name: PropTypes.string,
+};
diff --git a/react-hook-form-mui/src/react-hook-form/MultiButtonGroup.js b/react-hook-form-mui/src/react-hook-form/MultiButtonGroup.js
@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {useController} from 'react-hook-form';
+import ButtonGroup from '../forms/ButtonGroup';
+
+export default function RHFButtonGroup({control, name, ...rest}) {
+	const {
+		field: {ref, ...inputProps},
+	} = useController({
+		name,
+		control,
+		rules: {required: rest.required},
+		defaultValue: rest.defaultValue,
+	});
+
+	return (
+		<ButtonGroup
+			aria-label='text alignment'
+			exclusive
+			ref={ref}
+			{...inputProps}
+			{...rest}
+		/>
+	);
+}
+
+RHFButtonGroup.propTypes = {
+	control: PropTypes.object,
+	name: PropTypes.string,
+};
diff --git a/react-hook-form-mui/src/react-hook-form/TextField.js b/react-hook-form-mui/src/react-hook-form/TextField.js
@@ -5,7 +5,7 @@ import TextField from '../forms/TextField';
 
 export default function RHFTextField({control, name, ...rest}) {
 	const {
-		field: {ref, ...inputProps}
+		field: {ref, ...inputProps},
 	} = useController({
 		name,
 		control,

diff --git a/react-hook-form-mui/stories/react-hook-form/Fields.js b/react-hook-form-mui/stories/react-hook-form/Fields.js
@@ -148,6 +148,21 @@ function DemoForm({onSubmit}) {
 									<Input container={{xs: 6}} control={control} label='Text' name='text' type='text'/>
 									<Input container={{xs: 6}} control={control} label='Text Area' multiline name='textArea' required type='textarea'/>
 								</Grid>
+								<Grid container item spacing={1} style={{marginTop: '16px'}} xs={12}>
+									<Input
+										container={{xs: 6}}
+										control={control}
+										label='Button Groups'
+										name='buttonGroups'
+										// components={{input: ButtonGroup}}
+										options={[
+											{value: '1', label: '1'},
+											{value: '2', label: '2'},
+										]}
+										required
+										type='buttons'
+									/>
+								</Grid>
 							</Grid>
 						</Grid>
 						<Grid container item justify='center' xs={12}>