fix(migration ra-ui-2.8.5): migrated form/

bootstrap-styled · Apr 9, 2019 · a60798e · a60798e
1 parent 964aa2d
commit a60798e
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 26 deletions.
diff --git a/src/components/form/FormTab.js b/src/components/form/FormTab.js
@@ -34,12 +34,9 @@ class FormTab extends Component {
   };
 
   renderContent = ({
-    children,
-    hidden,
-    basePath,
-    record,
-    resource,
+    children, hidden, basePath, record, resource,
   }) => (
+
     <span style={hidden ? hiddenStyle : null}>
       {React.Children.map(
         children,

diff --git a/src/components/form/SimpleForm.js b/src/components/form/SimpleForm.js
@@ -45,6 +45,7 @@ const sanitizeRestProps = ({
   touch,
   translate,
   triggerSubmit,
+  undoable,
   untouch,
   valid,
   validate,
@@ -67,6 +68,7 @@ export class SimpleForm extends Component {
       saving,
       submitOnEnter,
       toolbar,
+      undoable,
       version,
       ...rest
     } = this.props;
@@ -89,8 +91,7 @@ export class SimpleForm extends Component {
         {toolbar
         && React.cloneElement(toolbar, {
           basePath,
-          handleSubmitWithRedirect: this
-            .handleSubmitWithRedirect,
+          handleSubmitWithRedirect: this.handleSubmitWithRedirect,
           handleSubmit: this.props.handleSubmit,
           invalid,
           pristine,
@@ -99,6 +100,7 @@ export class SimpleForm extends Component {
           resource,
           saving,
           submitOnEnter,
+          undoable,
         })}
       </Form>
     );
@@ -124,6 +126,7 @@ SimpleForm.propTypes = {
   saving: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
   submitOnEnter: PropTypes.bool,
   toolbar: PropTypes.element,
+  undoable: PropTypes.bool,
   validate: PropTypes.func,
   version: PropTypes.number,
 };

diff --git a/src/components/form/SimpleFormIterator.js b/src/components/form/SimpleFormIterator.js
@@ -1,4 +1,6 @@
-import React, { Children, cloneElement, Component } from 'react';
+import React, {
+  Children, cloneElement, Component, isValidElement,
+} from 'react';
 import PropTypes from 'prop-types';
 import compose from 'recompose/compose';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
@@ -88,6 +90,17 @@ export class SimpleFormIterator extends Component {
     fields.remove(index);
   };
 
+  // Returns a boolean to indicate whether to disable the remove button for certain fields.
+  // If disableRemove is a function, then call the function with the current record to
+  // determing if the button should be disabled. Otherwise, use a boolean property that
+  // enables or disables the button for all of the fields.
+  disableRemoveField = (record, disableRemove) => {
+    if (typeof disableRemove === 'boolean') {
+      return disableRemove;
+    }
+    return disableRemove && disableRemove(record);
+  };
+
   addField = () => {
     const { fields } = this.props;
     this.ids.push(this.nextId++); // eslint-disable-line
@@ -111,8 +124,9 @@ export class SimpleFormIterator extends Component {
     const records = get(record, source);
     return fields ? (
       <Ul className={className}>
-        {submitFailed
-        && error && <FormHelperText error>{error}</FormHelperText>}
+        {submitFailed && error && (
+          <FormHelperText error>{error}</FormHelperText>
+        )}
         <TransitionGroup>
           {fields.map((member, index) => (
             <CSSTransition
@@ -125,7 +139,7 @@ export class SimpleFormIterator extends Component {
                   {index + 1}
                 </P>
                 <section>
-                  {Children.map(children, (input, index2) => (
+                  {Children.map(children, (input, index2) => isValidElement(input) ? (
                     <FormInput
                       basePath={
                         input.props.basePath || basePath
@@ -146,9 +160,9 @@ export class SimpleFormIterator extends Component {
                       record={(records && records[index]) || {}}
                       resource={resource}
                     />
-                  ))}
+                  ) : null)}
                 </section>
-                {!disableRemove && (
+                {!(this.disableRemoveField((records && records[index]) || {}, disableRemove)) && (
                   <span>
                     <ButtonBs
                       className={classNames(
@@ -206,7 +220,7 @@ SimpleFormIterator.propTypes = {
   resource: PropTypes.string,
   translate: PropTypes.func,
   disableAdd: PropTypes.bool,
-  disableRemove: PropTypes.bool,
+  disableRemove: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
 };
 
 export default compose(

diff --git a/src/components/form/TabbedForm.js b/src/components/form/TabbedForm.js
@@ -1,4 +1,4 @@
-import React, { Children, Component } from 'react';
+import React, { Children, Component, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import {
@@ -58,6 +58,7 @@ const sanitizeRestProps = ({
   touch,
   translate,
   triggerSubmit,
+  undoable,
   untouch,
   valid,
   validate,
@@ -87,6 +88,7 @@ export class TabbedForm extends Component {
       tabsWithErrors,
       toolbar,
       translate,
+      undoable,
       value,
       version,
       ...rest
@@ -118,7 +120,7 @@ export class TabbedForm extends Component {
           indicatorColor="primary"
         >
           {Children.map(children, (tab, index) => {
-            if (!tab) return null;
+            if (!isValidElement(tab)) return null;
 
             // Builds the full tab tab which is the concatenation of the last matched route in the
             // TabbedShowLayout hierarchy (ex: '/posts/create', '/posts/12', , '/posts/12/show')
@@ -150,7 +152,7 @@ export class TabbedForm extends Component {
                 exact
                 path={getTabFullPath(tab, index, match.url)}
               >
-                {routeProps => React.cloneElement(tab, {
+                {routeProps => isValidElement(tab) ? React.cloneElement(tab, {
                   context: 'content',
                   resource,
                   record,
@@ -169,7 +171,7 @@ export class TabbedForm extends Component {
                      * @ref https://github.com/marmelab/react-admin/issues/1956
                      */
                   key: `${index}_${!routeProps.match}`, // eslint-disable-line react/no-array-index-key
-                })
+                }) : null
                 }
               </Route>
             )
@@ -179,8 +181,7 @@ export class TabbedForm extends Component {
         && React.cloneElement(toolbar, {
           basePath,
           className: 'toolbar',
-          handleSubmitWithRedirect: this
-            .handleSubmitWithRedirect,
+          handleSubmitWithRedirect: this.handleSubmitWithRedirect,
           handleSubmit: this.props.handleSubmit,
           invalid,
           pristine,
@@ -189,6 +190,7 @@ export class TabbedForm extends Component {
           resource,
           saving,
           submitOnEnter,
+          undoable,
         })}
       </Form>
     );
@@ -219,6 +221,7 @@ TabbedForm.propTypes = {
   tabsWithErrors: PropTypes.arrayOf(PropTypes.string),
   toolbar: PropTypes.element,
   translate: PropTypes.func,
+  undoable: PropTypes.bool,
   validate: PropTypes.func,
   value: PropTypes.number,
   version: PropTypes.number,
@@ -249,9 +252,13 @@ export const findTabsWithErrors = (
   const errors = collectErrorsImpl(state, props);
 
   return Children.toArray(props.children).reduce((acc, child) => {
+    if (!isValidElement(child)) {
+      return acc;
+    }
+
     const inputs = Children.toArray(child.props.children);
 
-    if (inputs.some(input => errors[input.props.source])) {
+    if (inputs.some(input => isValidElement(input) && errors[input.props.source])) {
       return [...acc, child.props.label];
     }
 
@@ -263,7 +270,7 @@ const enhance = compose(
   withRouter,
   connect((state, props) => {
     const children = Children.toArray(props.children).reduce(
-      (acc, child) => [...acc, ...Children.toArray(child.props.children)],
+      (acc, child) => [...acc, ...(isValidElement(child) ? Children.toArray(child.props.children) : [])],
       []
     );
 

diff --git a/src/components/form/Toolbar.js b/src/components/form/Toolbar.js
@@ -1,4 +1,4 @@
-import React, { Children, Fragment } from 'react';
+import React, { Children, Fragment, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import compose from 'recompose/compose';
 import styled from 'styled-components';
@@ -54,6 +54,7 @@ const Toolbar = ({
   resource,
   saving,
   submitOnEnter,
+  undoable,
   width,
   ...rest
 }) => (
@@ -74,19 +75,19 @@ const Toolbar = ({
             saving={saving}
             submitOnEnter={submitOnEnter}
           />
-          {record
-          && typeof record.id !== 'undefined' && (
+          {record && typeof record.id !== 'undefined' && (
             <DeleteButton
               basePath={basePath}
               record={record}
               resource={resource}
+              undoable={undoable}
             />
           )}
         </div>
       ) : (
         Children.map(
           children,
-          button => button
+          button => button && isValidElement(button)
             ? React.cloneElement(button, {
               basePath,
               handleSubmit: valueOrDefault(
@@ -104,6 +105,10 @@ const Toolbar = ({
                 button.props.submitOnEnter,
                 submitOnEnter
               ),
+              undoable: valueOrDefault(
+                button.props.undoable,
+                undoable
+              ),
             })
             : null
         )
@@ -131,6 +136,7 @@ Toolbar.propTypes = {
   saving: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
   submitOnEnter: PropTypes.bool,
   width: PropTypes.string,
+  undoable: PropTypes.bool,
 };
 
 Toolbar.defaultProps = {