feat(forms): allow "required" prop to be a function

assisrafael · assisrafael · commit 79bb22164036 · 2020-07-16T15:11:21.000-03:00
diff --git a/demo/FormExamples.jsx b/demo/FormExamples.jsx
@@ -147,7 +147,7 @@ export function FormExamples() {
             onSearch={console.log}
             placeholder="Type some letters"
             openOnFocus={true}
-            required
+            required={() => true}
           />
         </div>
         <div className="col">
@@ -164,6 +164,7 @@ export function FormExamples() {
                 <strong>{option}</strong> - {option}
               </>
             )}
+            required={() => false}
           />
         </div>
       </div>
diff --git a/src/forms/FormAutocomplete.jsx b/src/forms/FormAutocomplete.jsx
@@ -1,6 +1,7 @@
 import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { handleInputChange, normalizeOptions, normalizeDisabled } from './helpers/form-helpers';
+
+import { handleInputChange, normalizeOptions, booleanOrFunction } from './helpers/form-helpers';
 import { Dropdown } from '../mixed/Dropdown';
 import { useOpenState } from '../utils/useOpenState';
 import { formatClasses } from '../utils/attributes';
@@ -10,7 +11,7 @@ import { isEmpty } from '../utils/types';
 export function FormAutocomplete({
   onSearch,
   options,
-  required,
+  required: _required,
   id,
   placeholder,
   name,
@@ -33,7 +34,8 @@ export function FormAutocomplete({
   const searchInputRef = useRef(null);
 
   const registerRef = useCallback(register, [register]);
-  const disabled = normalizeDisabled(_disabled, getFormData());
+  const disabled = booleanOrFunction(_disabled, getFormData());
+  const required = booleanOrFunction(_required, getFormData());
 
   const controlFeedback = getFormSubmitedAttempted() ? (isValid() ? 'is-valid' : 'is-invalid') : '';
 
@@ -194,7 +196,7 @@ FormAutocomplete.propTypes = {
     PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
   ]),
   placeholder: PropTypes.string,
-  required: PropTypes.bool,
+  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/FormCheckbox.jsx b/src/forms/FormCheckbox.jsx
@@ -1,12 +1,14 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
+
 import { useFormControl } from './helpers/useFormControl';
-import { normalizeDisabled } from './helpers/form-helpers';
+import { booleanOrFunction } from './helpers/form-helpers';
 
-export function FormCheckbox({ id, name, required, valueLabel, disabled: _disabled }) {
+export function FormCheckbox({ id, name, required: _required, valueLabel, disabled: _disabled }) {
   const { getValue, handleOnChange, register, getFormData } = useFormControl(name, 'boolean');
   const registerRef = useCallback(register, [register]);
-  const disabled = normalizeDisabled(_disabled, getFormData());
+  const disabled = booleanOrFunction(_disabled, getFormData());
+  const required = booleanOrFunction(_required, getFormData());
 
   return (
     <div className="custom-control custom-checkbox">
@@ -29,6 +31,6 @@ FormCheckbox.propTypes = {
   id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   valueLabel: PropTypes.string,
-  required: PropTypes.bool,
+  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
 };
diff --git a/src/forms/FormInput.jsx b/src/forms/FormInput.jsx
@@ -1,14 +1,15 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
+
 import { useFormControl } from './helpers/useFormControl';
-import { normalizeDisabled } from './helpers/form-helpers';
+import { booleanOrFunction } from './helpers/form-helpers';
 
 export function FormInput({
   id,
   type,
   name,
   placeholder,
-  required,
+  required: _required,
   minLength,
   maxLength,
   min,
@@ -19,7 +20,8 @@ export function FormInput({
 }) {
   const { getValue, handleOnChange, register, getFormData } = useFormControl(name, type);
   const registerRef = useCallback(register, [register]);
-  const disabled = normalizeDisabled(_disabled, getFormData());
+  const disabled = booleanOrFunction(_disabled, getFormData());
+  const required = booleanOrFunction(_required, getFormData());
 
   const attrs = { required, name, id, placeholder, type, minLength, maxLength, min, max, pattern, step, disabled };
 
@@ -45,7 +47,7 @@ FormInput.propTypes = {
   name: PropTypes.string.isRequired,
   pattern: PropTypes.string,
   placeholder: PropTypes.string,
-  required: 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/FormLabel.jsx b/src/forms/FormLabel.jsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function FormLabel({ id, label, required }) {
+export function FormLabel({ id, label, required: _required }) {
+  const required = typeof _required === 'boolean';
+
   return (
     <label htmlFor={id}>
       {label}
@@ -14,5 +16,5 @@ export function FormLabel({ id, label, required }) {
 FormLabel.propTypes = {
   id: PropTypes.string,
   label: PropTypes.string,
-  required: PropTypes.bool,
+  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
 };
diff --git a/src/forms/FormRadio.jsx b/src/forms/FormRadio.jsx
@@ -1,13 +1,15 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
+
 import { useFormControl } from './helpers/useFormControl';
-import { normalizeDisabled } from './helpers/form-helpers';
+import { booleanOrFunction } from './helpers/form-helpers';
 
-export function FormRadio({ id, name, required, checkedValue, valueLabel, inline, disabled: _disabled }) {
+export function FormRadio({ id, name, required: _required, checkedValue, valueLabel, inline, disabled: _disabled }) {
   const { getValue, handleOnChange, register, getFormData } = useFormControl(name, 'boolean');
   const registerRef = useCallback(register, [register]);
   const value = getValue();
-  const disabled = normalizeDisabled(_disabled, getFormData());
+  const disabled = booleanOrFunction(_disabled, getFormData());
+  const required = booleanOrFunction(_required, getFormData());
 
   return (
     <div className={`custom-control custom-radio ${inline ? 'custom-control-inline' : ''}`}>
@@ -36,7 +38,7 @@ FormRadio.propTypes = {
   id: PropTypes.string.isRequired,
   inline: PropTypes.bool,
   name: PropTypes.string.isRequired,
-  required: PropTypes.bool,
+  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
@@ -1,15 +1,17 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { normalizeOptions, normalizeDisabled } from './helpers/form-helpers';
-import { useFormControl } from './helpers/useFormControl';
+
 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, placeholder, trackBy, disabled: _disabled }) {
+export function FormSelect({ id, name, options, required: _required, placeholder, trackBy, disabled: _disabled }) {
   const { getFormData, getValue, handleOnChange, register } = useFormControl(name);
   const registerRef = useCallback(register, [register]);
   const value = getValue();
   const normalizedOptions = normalizeOptions(options, getFormData());
-  const disabled = normalizeDisabled(_disabled, getFormData());
+  const disabled = booleanOrFunction(_disabled, getFormData());
+  const required = booleanOrFunction(_required, getFormData());
 
   return (
     <select
@@ -34,7 +36,7 @@ FormSelect.propTypes = {
     PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
   ]),
   placeholder: PropTypes.string,
-  required: PropTypes.bool,
+  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   trackBy: PropTypes.string,
   disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
 };
diff --git a/src/forms/FormSwitch.jsx b/src/forms/FormSwitch.jsx
@@ -1,13 +1,15 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
+
 import { useFormControl } from './helpers/useFormControl';
-import { normalizeDisabled } from './helpers/form-helpers';
+import { booleanOrFunction } from './helpers/form-helpers';
 
-export function FormSwitch({ id, name, required, trueLabel, falseLabel, disabled: _disabled }) {
+export function FormSwitch({ id, name, required: _required, trueLabel, falseLabel, disabled: _disabled }) {
   const { getValue, handleOnChange, register, getFormData } = useFormControl(name, 'boolean');
   const registerRef = useCallback(register, [register]);
   const value = getValue();
-  const disabled = normalizeDisabled(_disabled, getFormData());
+  const disabled = booleanOrFunction(_disabled, getFormData());
+  const required = booleanOrFunction(_required, getFormData());
 
   return (
     <div className="custom-control custom-switch">
@@ -30,7 +32,7 @@ FormSwitch.propTypes = {
   falseLabel: PropTypes.string,
   id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
-  required: PropTypes.bool,
+  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
@@ -1,12 +1,14 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
+
 import { useFormControl } from './helpers/useFormControl';
-import { normalizeDisabled } from './helpers/form-helpers';
+import { booleanOrFunction } from './helpers/form-helpers';
 
-export function FormTextarea({ id, name, required, placeholder, rows, disabled: _disabled }) {
+export function FormTextarea({ id, name, required: _required, placeholder, rows, disabled: _disabled }) {
   const { getValue, handleOnChange, register, getFormData } = useFormControl(name);
   const registerRef = useCallback(register, [register]);
-  const disabled = normalizeDisabled(_disabled, getFormData());
+  const disabled = booleanOrFunction(_disabled, getFormData());
+  const required = booleanOrFunction(_required, getFormData());
 
   return (
     <textarea
@@ -27,7 +29,7 @@ FormTextarea.propTypes = {
   id: PropTypes.string,
   name: PropTypes.string.isRequired,
   placeholder: PropTypes.string,
-  required: PropTypes.bool,
+  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
 };
diff --git a/src/forms/helpers/form-helpers.js b/src/forms/helpers/form-helpers.js
@@ -56,10 +56,10 @@ export function normalizeOptions(options, formData, extraData) {
   });
 }
 
-export function normalizeDisabled(disabled, formData) {
-  if (!isFunction(disabled)) {
-    return disabled;
+export function booleanOrFunction(property, formData) {
+  if (!isFunction(property)) {
+    return property;
   }
 
-  return disabled(formData);
+  return property(formData);
 }

Original file line number	Diff line number	Diff line change
`@@ -56,10 +56,10 @@ export function normalizeOptions(options, formData, extraData) {`
`56`	`56`	`});`
`57`	`57`	`}`
`58`	`58`
`59`		`-export function normalizeDisabled(disabled, formData) {`
`60`		`- if (!isFunction(disabled)) {`
`61`		`- return disabled;`
	`59`	`+export function booleanOrFunction(property, formData) {`
	`60`	`+ if (!isFunction(property)) {`
	`61`	`+ return property;`
`62`	`62`	`}`
`63`	`63`
`64`		`- return disabled(formData);`
	`64`	`+ return property(formData);`
`65`	`65`	`}`