fix(forms): allow readOnly on FormInput and FormTextarea

assisrafael · assisrafael · commit b33dfa00d8a2 · 2020-07-29T08:30:13.000-03:00
diff --git a/src/forms/FormAutocomplete.jsx b/src/forms/FormAutocomplete.jsx
@@ -186,6 +186,7 @@ FormAutocomplete.defaultProps = {
 };
 
 FormAutocomplete.propTypes = {
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   filter: PropTypes.func,
   id: PropTypes.string,
   name: PropTypes.string.isRequired,
@@ -199,5 +200,4 @@ FormAutocomplete.propTypes = {
   required: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   template: PropTypes.func,
   type: PropTypes.string,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
 };
diff --git a/src/forms/FormGroup.jsx b/src/forms/FormGroup.jsx
@@ -10,7 +10,7 @@ import { FormSwitch } from './FormSwitch';
 import { FormTextarea } from './FormTextarea';
 import { FormValidationFeedback } from './FormValidationFeedback';
 
-function FormGroup({ children, name, feedback, mockInvalidSibling, ...props }) {
+export function FormGroup({ children, name, feedback, mockInvalidSibling, ...props }) {
   return (
     <div className="form-group">
       <FormLabel {...props} />
@@ -40,6 +40,23 @@ export function FormGroupAutocomplete(props) {
   );
 }
 
+FormGroupAutocomplete.propTypes = {
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  filter: PropTypes.func,
+  id: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onSearch: PropTypes.func,
+  openOnFocus: PropTypes.bool,
+  options: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
+  ]),
+  placeholder: PropTypes.string,
+  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  template: PropTypes.func,
+  type: PropTypes.string,
+};
+
 export function FormGroupCheckbox(props) {
   return (
     <FormGroup mockInvalidSibling={true} {...props}>
@@ -48,6 +65,15 @@ export function FormGroupCheckbox(props) {
   );
 }
 
+FormGroupCheckbox.propTypes = {
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  falseLabel: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  trueLabel: PropTypes.string,
+};
+
 export function FormGroupInput(props) {
   return (
     <FormGroup {...props}>
@@ -56,6 +82,22 @@ export function FormGroupInput(props) {
   );
 }
 
+FormGroupInput.propTypes = {
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  id: PropTypes.string,
+  max: PropTypes.string,
+  maxLength: PropTypes.string,
+  min: PropTypes.string,
+  minLength: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  pattern: PropTypes.string,
+  placeholder: PropTypes.string,
+  readOnly: PropTypes.bool,
+  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  step: PropTypes.string,
+  type: PropTypes.string,
+};
+
 export function FormGroupRadio({ options, id, ...props }) {
   return (
     <FormGroup mockInvalidSibling={true} {...props}>
@@ -79,9 +121,12 @@ FormGroupRadio.defaultProps = {
 };
 
 FormGroupRadio.propTypes = {
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   id: PropTypes.string,
-  options: PropTypes.arrayOf(PropTypes.object),
   inline: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  options: PropTypes.arrayOf(PropTypes.shape({ value: PropTypes.any.isRequired, label: PropTypes.string.isRequired })),
+  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
 };
 
 export function FormGroupSelect(props) {
@@ -92,6 +137,24 @@ export function FormGroupSelect(props) {
   );
 }
 
+FormGroupSelect.propTypes = {
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  id: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  options: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.shape({ value: PropTypes.any.isRequired, label: PropTypes.string.isRequired }),
+      ])
+    ),
+  ]),
+  placeholder: PropTypes.string,
+  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  trackBy: PropTypes.string,
+};
+
 export function FormGroupSwitch(props) {
   return (
     <FormGroup mockInvalidSibling={true} {...props}>
@@ -100,10 +163,29 @@ export function FormGroupSwitch(props) {
   );
 }
 
+FormGroupSwitch.propTypes = {
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  falseLabel: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  trueLabel: PropTypes.string,
+};
+
 export function FormGroupTextarea(props) {
   return (
     <FormGroup {...props}>
       <FormTextarea {...props} />
     </FormGroup>
   );
 }
+
+FormGroupTextarea.propTypes = {
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  id: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+  readOnly: PropTypes.bool,
+  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};
diff --git a/src/forms/FormInput.jsx b/src/forms/FormInput.jsx
@@ -4,26 +4,19 @@ import PropTypes from 'prop-types';
 import { useFormControl } from './helpers/useFormControl';
 import { booleanOrFunction } from './helpers/form-helpers';
 
-export function FormInput({
-  id,
-  type,
-  name,
-  placeholder,
-  required: _required,
-  minLength,
-  maxLength,
-  min,
-  max,
-  pattern,
-  step,
-  disabled: _disabled,
-}) {
+export function FormInput({ type, name, required: _required, disabled: _disabled, ..._attrs }) {
   const { getValue, handleOnChange, register, getFormData } = useFormControl(name, type);
   const registerRef = useCallback(register, [register]);
   const disabled = booleanOrFunction(_disabled, getFormData());
   const required = booleanOrFunction(_required, getFormData());
 
-  const attrs = { required, name, id, placeholder, type, minLength, maxLength, min, max, pattern, step, disabled };
+  const attrs = {
+    ..._attrs,
+    disabled,
+    name,
+    required,
+    type,
+  };
 
   if (type === 'datetime-local') {
     attrs.defaultValue = getValue();
@@ -39,6 +32,7 @@ FormInput.defaultProps = {
 };
 
 FormInput.propTypes = {
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   id: PropTypes.string,
   max: PropTypes.string,
   maxLength: PropTypes.string,
@@ -47,8 +41,8 @@ FormInput.propTypes = {
   name: PropTypes.string.isRequired,
   pattern: PropTypes.string,
   placeholder: PropTypes.string,
+  readOnly: PropTypes.bool,
   required: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   step: PropTypes.string,
   type: PropTypes.string,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
 };
diff --git a/src/forms/FormRadio.jsx b/src/forms/FormRadio.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import { useFormControl } from './helpers/useFormControl';
 import { booleanOrFunction } from './helpers/form-helpers';
+import { formatClasses } from '../utils/attributes';
 
 export function FormRadio({ id, name, required: _required, checkedValue, valueLabel, inline, disabled: _disabled }) {
   const { getValue, handleOnChange, register, getFormData } = useFormControl(name, 'boolean');
@@ -12,7 +13,7 @@ export function FormRadio({ id, name, required: _required, checkedValue, valueLa
   const required = booleanOrFunction(_required, getFormData());
 
   return (
-    <div className={`custom-control custom-radio ${inline ? 'custom-control-inline' : ''}`}>
+    <div className={formatClasses([`custom-control`, `custom-radio`, inline && 'custom-control-inline'])}>
       <input
         {...{ required, name, id, disabled }}
         type="radio"
@@ -35,10 +36,10 @@ FormRadio.defaultProps = {
 
 FormRadio.propTypes = {
   checkedValue: PropTypes.any,
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   id: PropTypes.string.isRequired,
   inline: PropTypes.bool,
   name: PropTypes.string.isRequired,
   required: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   valueLabel: PropTypes.string,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
 };
diff --git a/src/forms/FormSelect.jsx b/src/forms/FormSelect.jsx
@@ -5,17 +5,32 @@ import { getValueByPath } from '../utils/getters-setters';
 import { normalizeOptions, booleanOrFunction } from './helpers/form-helpers';
 import { useFormControl } from './helpers/useFormControl';
 
-export function FormSelect({ id, name, options, required: _required, placeholder, trackBy, disabled: _disabled }) {
+export function FormSelect({
+  name,
+  options,
+  required: _required,
+  placeholder,
+  trackBy,
+  disabled: _disabled,
+  ..._attrs
+}) {
   const { getFormData, getValue, handleOnChange, register } = useFormControl(name);
   const registerRef = useCallback(register, [register]);
   const value = getValue();
   const normalizedOptions = normalizeOptions(options, getFormData());
   const disabled = booleanOrFunction(_disabled, getFormData());
   const required = booleanOrFunction(_required, getFormData());
 
+  const attrs = {
+    ..._attrs,
+    disabled,
+    name,
+    required,
+  };
+
   return (
     <select
-      {...{ required, name, id, disabled }}
+      {...attrs}
       className="custom-select"
       onChange={handleOnChange}
       value={getSelectedOption(value, normalizedOptions, trackBy)}
@@ -29,16 +44,21 @@ export function FormSelect({ id, name, options, required: _required, placeholder
 }
 
 FormSelect.propTypes = {
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   id: PropTypes.string,
   name: PropTypes.string.isRequired,
   options: PropTypes.oneOfType([
     PropTypes.func,
-    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.shape({ value: PropTypes.any.isRequired, label: PropTypes.string.isRequired }),
+      ])
+    ),
   ]),
   placeholder: PropTypes.string,
   required: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   trackBy: PropTypes.string,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
 };
 
 function renderOptions(options, trackBy) {
diff --git a/src/forms/FormSwitch.jsx b/src/forms/FormSwitch.jsx
@@ -29,10 +29,10 @@ export function FormSwitch({ id, name, required: _required, trueLabel, falseLabe
 }
 
 FormSwitch.propTypes = {
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   falseLabel: PropTypes.string,
   id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   required: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   trueLabel: PropTypes.string,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
 };
diff --git a/src/forms/FormTextarea.jsx b/src/forms/FormTextarea.jsx
@@ -4,15 +4,22 @@ import PropTypes from 'prop-types';
 import { useFormControl } from './helpers/useFormControl';
 import { booleanOrFunction } from './helpers/form-helpers';
 
-export function FormTextarea({ id, name, required: _required, placeholder, rows, disabled: _disabled }) {
+export function FormTextarea({ name, required: _required, disabled: _disabled, ..._attrs }) {
   const { getValue, handleOnChange, register, getFormData } = useFormControl(name);
   const registerRef = useCallback(register, [register]);
   const disabled = booleanOrFunction(_disabled, getFormData());
   const required = booleanOrFunction(_required, getFormData());
 
+  const attrs = {
+    ..._attrs,
+    disabled,
+    name,
+    required,
+  };
+
   return (
     <textarea
-      {...{ required, name, id, placeholder, rows, disabled }}
+      {...attrs}
       className="form-control"
       onChange={handleOnChange}
       value={getValue()}
@@ -26,10 +33,11 @@ FormTextarea.defaultProps = {
 };
 
 FormTextarea.propTypes = {
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   id: PropTypes.string,
   name: PropTypes.string.isRequired,
   placeholder: PropTypes.string,
+  readOnly: PropTypes.bool,
   required: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
 };
