Merge pull request #53 from TangibleInc/featuretabswitch-to-controlled-component-for-content

Tab: Content - Switch to controlled component

Author: nicolas-jaussaud

assets/build/example.min.js

@@ -1,14 +1,13 @@
+import { useState, useEffect } from 'react'
 import Button from '../button/Button'
 
 /**
- * No logic/state, just to share the CSS/classes
- * 
  *  <Container>
  *    <Header>
  *      <Title>Content 1</Title>
  *      <Title>Content 2</Title>
  *    <Header>
- *    <Content>
+ *    <Content isActive={ true }>
  *      <Row>
  *        <RowTitle>Content 1</RowTitle>
  *      </Row>
@@ -20,6 +19,9 @@ import Button from '../button/Button'
  *      </Row>
  *      // ...
  *    <Content>
+ *    <Content isActive={ false }>
+ *      // ...
+ *    <Content>
  *  <Tabs>
  */
 
@@ -52,11 +54,22 @@ const Title = props => (
   </div>
 )
 
-const Content = props => (
-  <div className={ 'tf-tab-content ' + (props.className ?? '') }>
-    { props.children }
-  </div>
-)
+const Content = props => {
+
+  const [ isActive, setIsActive ] = useState( props.isActive ?? false )
+
+  useEffect(() => {
+    if ( props.isActive !== isActive ) setIsActive( props.isActive )
+  }, [ props.isActive ])
+
+  if ( ! isActive ) return;
+
+  return(
+    <div className={ 'tf-tab-content ' + (props.className ?? '') }>
+      { props.children }
+    </div>
+  )
+}
 
 const Row = props => (
   <div className={ 'tf-tab-row ' + (props.className ?? '') }>

assets/build/index.min.js

@@ -40,19 +40,22 @@ const Tab = props => {
             </Title>
           )) }
         </Header>
-        <Content>
-          { activeTab &&
-            <FieldGroup key={ activeTab }
+        { tabs && tabs.map((tab, indexTab) => (
+          <Content
+            key={ tab.name }
+            isActive={ tab.name === activeTab }
+          >
+            <FieldGroup
               { ...props }
               name={ null } 
-              fields={ props.tabs[ activeTab ].fields } 
-              value={ value[ activeTab ] ?? {} }
+              fields={ tab.fields } 
+              value={ value[ indexTab ] ?? {} }
               onChange={ tabValue => setValue({
                 ...value,
-                [activeTab]: tabValue
+                [indexTab]: tabValue
               }) }
-            /> }
-        </Content>
+            />
+          </Content> )) }
       </Container>
     </>
   )

assets/src/components/base/tab/Tab.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useLayoutEffect } from 'react'
 import { renderTitle } from '../../common/helpers'
 
 import {
@@ -85,29 +85,30 @@ const Tab = ({
           </Title>
         )) }
       </Header>
-    { items[ activeItem ] &&
-      <Content
-        key={ items[ activeItem ].key ?? activeItem }
-        className='tf-repeater-tab-content'
-      >
-        { rowFields.map((control, i) => (
-          <Row key={ control.name ?? i } className='tf-repeater-tab-row'>
-            { beforeRow && beforeRow(items[ activeItem ], activeItem, dispatch) }
-            { control.type === 'title'
-              ? <RowTitle className='tf-repeater-tab-row-title tf-repeater-tab-row-title-section'>
-                  { renderItem(control, items[ activeItem ], activeItem) }
-                </RowTitle>
-              : <>
-                  <RowLabel className='tf-repeater-tab-row-title'>
-                    { control.label ?? '' }
-                  </RowLabel>
-                  <RowField className="tf-repeater-tab-item-field">
-                    { renderItem(control, items[ activeItem ], activeItem) }
-                  </RowField>
-                </> }
-            { afterRow && afterRow(items[ activeItem ], activeItem, dispatch) }
-          </Row> )) }
-      </Content> }
+      { items && items.map((item, itemIndex) => (
+        <Content
+          key={ item.key ?? itemIndex }
+          isActive={ activeItem === itemIndex }
+          className='tf-repeater-tab-content'
+        >
+          { rowFields.map((control, i) => (
+            <Row key={ control.name ?? i } className='tf-repeater-tab-row'>
+              { beforeRow && beforeRow(item, itemIndex, dispatch) }
+              { control.type === 'title'
+                ? <RowTitle className='tf-repeater-tab-row-title tf-repeater-tab-row-title-section'>
+                    { renderItem(control, item, itemIndex) }
+                  </RowTitle>
+                : <>
+                    <RowLabel className='tf-repeater-tab-row-title'>
+                      { control.label ?? '' }
+                    </RowLabel>
+                    <RowField className="tf-repeater-tab-item-field">
+                      { renderItem(control, item, itemIndex) }
+                    </RowField>
+                  </> }
+              { afterRow && afterRow(item, itemIndex, dispatch) }
+            </Row> )) }
+        </Content> )) }
     </Container>
   )
 }