(pC-1573) changes given review

pass-culture · May 6, 2019 · ec87f9e · ec87f9e
1 parent 56f75af
commit ec87f9e
Show file tree

Hide file tree

Showing 22 changed files with 384 additions and 344 deletions.
diff --git a/src/components/layout/form/fields/DateField.jsx b/src/components/layout/form/fields/DateField.jsx
@@ -9,7 +9,7 @@ import { Field } from 'react-final-form'
 import { composeValidators } from 'react-final-form-utils'
 
 import Icon from 'components/layout/Icon'
-import validateRequiredField from 'components/layout/form/utils/validateRequiredField'
+import getRequiredValidate from 'components/layout/form/utils/getRequiredValidate'
 
 const renderReadOnlyInput = readOnlyValue => (
   <input className="field-input field-date" readOnly value={readOnlyValue} />
@@ -23,6 +23,11 @@ const renderDateInput = DatePickerProps => (
   </div>
 )
 
+const createOnDateChange = input => date => {
+  const changedValue = date ? date.toISOString() : null
+  input.onChange(changedValue)
+}
+
 export const DateField = ({
   autoComplete,
   className,
@@ -44,27 +49,35 @@ export const DateField = ({
   // see github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md
   ...DatePickerProps
 }) => {
-  const requiredIsAFunction = required && typeof required === 'function'
-  const defaultRequiredValidate =
-    (required && validateRequiredField) || undefined
-  const requiredValidate = requiredIsAFunction
-    ? required
-    : defaultRequiredValidate
-
   const inputName = id || name
   const isClearable = !readOnly && clearable
-
   return (
     <Field
       name={name}
-      validate={composeValidators(validate, requiredValidate)}
+      validate={composeValidators(validate, getRequiredValidate(required))}
       render={({ input, meta }) => {
         let readOnlyValue
         let selected
         if (input.value) {
           selected = moment(input.value)
           readOnlyValue = selected.format(dateFormat)
         }
+
+        const dateInputProps = {
+          className: 'date',
+          dateFormat,
+          id: inputName,
+          isClearable,
+          locale,
+          placeholderText: placeholder,
+          shouldCloseOnSelect: true,
+          selected,
+          ...DatePickerProps,
+          ...input,
+          onChange: createOnDateChange(input),
+          value: readOnlyValue,
+        }
+
         return (
           <div
             className={classnames('field date-field', className, {
@@ -86,25 +99,9 @@ export const DateField = ({
             <div className="field-control">
               <div className="field-value flex-columns items-center">
                 <div className="field-inner flex-columns items-center">
-                  {readOnly && renderReadOnlyInput(readOnlyValue)}
-                  {!readOnly &&
-                    renderDateInput({
-                      className: 'date',
-                      dateFormat,
-                      id: inputName,
-                      isClearable,
-                      locale,
-                      placeholderText: placeholder,
-                      shouldCloseOnSelect: true,
-                      selected,
-                      ...DatePickerProps,
-                      ...input,
-                      onChange: date => {
-                        const changedValue = date ? date.toISOString() : null
-                        input.onChange(changedValue)
-                      },
-                      value: readOnlyValue,
-                    })}
+                  {readOnly
+                    ? renderReadOnlyInput(readOnlyValue)
+                    : renderDateInput(dateInputProps)}
                 </div>
                 {renderValue()}
               </div>

diff --git a/src/components/layout/form/fields/HiddenField.jsx b/src/components/layout/form/fields/HiddenField.jsx
@@ -4,7 +4,7 @@ import { Field } from 'react-final-form'
 
 import FieldErrors from 'components/layout/form/FieldErrors'
 
-const noop = () => {}
+const noOperation = () => {}
 
 export const HiddenField = ({ name, validator }) => (
   <Field
@@ -20,7 +20,7 @@ export const HiddenField = ({ name, validator }) => (
 )
 
 HiddenField.defaultProps = {
-  validator: noop,
+  validator: noOperation,
 }
 
 HiddenField.propTypes = {

diff --git a/src/components/layout/form/fields/TextField.jsx b/src/components/layout/form/fields/TextField.jsx
@@ -10,13 +10,13 @@ import {
 } from 'react-final-form-utils'
 
 import FieldErrors from 'components/layout/form/FieldErrors'
-import validateRequiredField from 'components/layout/form/utils/validateRequiredField'
+import getRequiredValidate from 'components/layout/form/utils/getRequiredValidate'
 
 function getInputValue(inputType, value) {
-  if (inputType === 'number' && typeof value === 'string') {
+  if (!value || (inputType === 'number' && typeof value === 'string')) {
     return ''
   }
-  return value || ''
+  return value
 }
 
 export const TextField = ({
@@ -36,73 +36,64 @@ export const TextField = ({
   type,
   validate,
   ...inputProps
-}) => {
-  const requiredIsAFunction = required && typeof required === 'function'
-  const defaultRequiredValidate =
-    (required && validateRequiredField) || undefined
-  const requiredValidate = requiredIsAFunction
-    ? required
-    : defaultRequiredValidate
-
-  return (
-    <Field
-      format={format}
-      name={name}
-      validate={composeValidators(validate, requiredValidate)}
-      parse={parse || createParseNumberValue(type)}
-      render={({ input, meta }) => {
-        const inputType = readOnly ? 'text' : type
-        const inputValue = getInputValue(inputType, input.value)
-        return (
-          <div
-            className={classnames('field text-field', className, {
-              'is-label-aligned': label,
-              'is-read-only': readOnly,
-            })}
-            id={id}>
-            <label
-              htmlFor={name}
-              className={classnames('field-label', { empty: !label })}>
-              {label && (
-                <span>
-                  <span>{label}</span>
-                  {required && !readOnly && (
-                    <span className="field-asterisk">*</span>
-                  )}
-                </span>
-              )}
-            </label>
-            <div className="field-control">
-              <div className="field-value flex-columns items-center">
-                <div
-                  className={classnames(
-                    'field-inner flex-columns items-center',
-                    innerClassName
-                  )}>
-                  <input
-                    {...input}
-                    {...inputProps}
-                    className={`field-input field-${type}`}
-                    disabled={disabled || readOnly}
-                    placeholder={readOnly ? '' : placeholder}
-                    readOnly={readOnly}
-                    required={!!required}
-                    type={inputType}
-                    value={inputValue}
-                  />
-                  {renderInner()}
-                </div>
-                {renderValue()}
+}) => (
+  <Field
+    format={format}
+    name={name}
+    validate={composeValidators(validate, getRequiredValidate(required))}
+    parse={parse || createParseNumberValue(type)}
+    render={({ input, meta }) => {
+      const inputType = readOnly ? 'text' : type
+      const inputValue = getInputValue(inputType, input.value)
+      return (
+        <div
+          className={classnames('field text-field', className, {
+            'is-label-aligned': label,
+            'is-read-only': readOnly,
+          })}
+          id={id}>
+          <label
+            htmlFor={name}
+            className={classnames('field-label', { empty: !label })}>
+            {label && (
+              <span>
+                <span>{label}</span>
+                {required && !readOnly && (
+                  <span className="field-asterisk">*</span>
+                )}
+              </span>
+            )}
+          </label>
+          <div className="field-control">
+            <div className="field-value flex-columns items-center">
+              <div
+                className={classnames(
+                  'field-inner flex-columns items-center',
+                  innerClassName
+                )}>
+                <input
+                  {...input}
+                  {...inputProps}
+                  className={`field-input field-${type}`}
+                  disabled={disabled || readOnly}
+                  placeholder={readOnly ? '' : placeholder}
+                  readOnly={readOnly}
+                  required={!!required}
+                  type={inputType}
+                  value={inputValue}
+                />
+                {renderInner()}
               </div>
-              <FieldErrors meta={meta} />
+              {renderValue()}
             </div>
-            <div />
+            <FieldErrors meta={meta} />
           </div>
-        )
-      }}
-    />
-  )
-}
+          <div />
+        </div>
+      )
+    }}
+  />
+)
 
 TextField.defaultProps = {
   className: '',