Add support for React Fragments to CardList and FormLayout (#44)

Fragments are not traversed with `React.children.map()` [1][2] so we are using the `react-keyed-flatten-children` bundle to flatten the children to a one-dimensional array. This is necessary to be able to pass props to children of these layouts. [1] https://reactjs.org/docs/react-api.html#reactchildrenmap [2] reactjs/rfcs#61 (comment)
react-ui-org · May 30, 2020 · 66b5cbb · 66b5cbb
1 parent 8c8103c
commit 66b5cbb
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 48 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,8 @@
     "normalize.css": "^8.0.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react-dom": "^16.13.1",
+    "react-keyed-flatten-children": "^1.2.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",

diff --git a/src/demo/pages/DemoContainer.jsx b/src/demo/pages/DemoContainer.jsx
@@ -422,49 +422,53 @@ class DemoContainer extends React.Component {
               name="Horizontal Form Layout"
               component={(
                 <FormLayout fieldLayout="horizontal">
-                  <TextField
-                    id="formLayoutHorizontalFirstName"
-                    changeHandler={logger}
-                    label="First Name"
-                  />
-                  <TextField
-                    id="formLayoutHorizontalLastName"
-                    changeHandler={logger}
-                    label="Last Name"
-                  />
+                  <>
+                    <TextField
+                      id="formLayoutHorizontalFirstName"
+                      changeHandler={logger}
+                      label="First Name"
+                    />
+                    <TextField
+                      id="formLayoutHorizontalLastName"
+                      changeHandler={logger}
+                      label="Last Name"
+                    />
+                  </>
                   <TextField
                     id="formLayoutHorizontalEmail"
                     changeHandler={logger}
                     label="Email address"
                     type="email"
                     helperText="Optional"
                   />
-                  <TextField
-                    id="formLayoutHorizontalAddress1"
-                    changeHandler={logger}
-                    label="Address"
-                    placeholder="Address line 1"
-                  />
-                  <TextField
-                    id="formLayoutHorizontalAddress2"
-                    changeHandler={logger}
-                    isLabelVisible={false}
-                    label="Address 2"
-                    placeholder="Address line 2"
-                  />
-                  <TextField
-                    id="formLayoutHorizontalZip"
-                    changeHandler={logger}
-                    helperText="ZIP should be 5 to 6 digits long code."
-                    label="ZIP"
-                    inputSize={6}
-                    validationState="invalid"
-                  />
-                  <TextField
-                    id="formLayoutHorizontalCountry"
-                    changeHandler={logger}
-                    label="Country"
-                  />
+                  <>
+                    <TextField
+                      id="formLayoutHorizontalAddress1"
+                      changeHandler={logger}
+                      label="Address"
+                      placeholder="Address line 1"
+                    />
+                    <TextField
+                      id="formLayoutHorizontalAddress2"
+                      changeHandler={logger}
+                      isLabelVisible={false}
+                      label="Address 2"
+                      placeholder="Address line 2"
+                    />
+                    <TextField
+                      id="formLayoutHorizontalZip"
+                      changeHandler={logger}
+                      helperText="ZIP should be 5 to 6 digits long code."
+                      label="ZIP"
+                      inputSize={6}
+                      validationState="invalid"
+                    />
+                    <TextField
+                      id="formLayoutHorizontalCountry"
+                      changeHandler={logger}
+                      label="Country"
+                    />
+                  </>
                   <SelectField
                     id="formLayoutHorizontalFruit"
                     changeHandler={logger}

diff --git a/src/lib/components/layout/CardList/CardList.jsx b/src/lib/components/layout/CardList/CardList.jsx
@@ -1,3 +1,4 @@
+import flattenChildren from 'react-keyed-flatten-children';
 import PropTypes from 'prop-types';
 import React from 'react';
 import styles from './CardList.scss';
@@ -19,7 +20,7 @@ const CardList = (props) => {
       className={styles.root}
       {...other}
     >
-      {React.Children.map(children, (child) => {
+      {flattenChildren(children).map((child) => {
         if (!React.isValidElement(child)) {
           return null;
         }

diff --git a/src/lib/components/layout/FormLayout/FormLayout.jsx b/src/lib/components/layout/FormLayout/FormLayout.jsx
@@ -1,3 +1,4 @@
+import flattenChildren from 'react-keyed-flatten-children';
 import PropTypes from 'prop-types';
 import React from 'react';
 import styles from './FormLayout.scss';
@@ -29,7 +30,7 @@ const FormLayout = (props) => {
         fieldLayoutClass(fieldLayout),
       ].join(' ')}
     >
-      {React.Children.map(children, (child) => {
+      {flattenChildren(children).map((child) => {
         if (!React.isValidElement(child)) {
           return null;
         }