Merge pull request #100 from fhlavac/fix-tabs

Fix tabs

Author: Hyperkid123

packages/mui-component-mapper/demo/demo-schemas/sandbox.js

@@ -10,7 +10,7 @@ const output = {
         {
           title: 'Tab 1',
           description: 'Text boxes and text areas',
-          key: '553',
+          name: '553',
           fields: [
             {
               title: 'Text boxes',

packages/mui-component-mapper/src/form-fields/tabs.js

@@ -4,8 +4,8 @@ import AppBar from '@material-ui/core/AppBar';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 
-const renderTabHeader = items => items.map(({ title, key }) => <Tab key={ key } label={ title } />);
-const renderTabContet = ({ key, fields }, formOptions) => <Fragment key={ key }>{ formOptions.renderForm(fields, formOptions) }</Fragment>;
+const renderTabHeader = items => items.map(({ title, key, name }) => <Tab key={ name || key } label={ title } />);
+const renderTabContet = ({ key, name, fields }, formOptions) => <Fragment key={ name || key }>{ formOptions.renderForm(fields, formOptions) }</Fragment>;
 
 class FormTabs extends Component {
   state = {

packages/pf3-component-mapper/demo/demo-schemas/sandbox.js

@@ -10,7 +10,7 @@ const output = {
         {
           title: 'Tab 1',
           description: 'Text boxes and text areas',
-          key: '553',
+          name: '553',
           fields: [
             {
               title: 'Text boxes',

packages/pf3-component-mapper/src/form-fields/tabs.js

@@ -3,19 +3,19 @@ import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import { TabContainer, Nav, NavItem, TabContent, TabPane, Icon } from 'patternfly-react';
 
-const renderTabHeader = (items, formOptions) => items.map(({ title, key, validateFields = []}, index) => {
+const renderTabHeader = (items, formOptions) => items.map(({ title, key, name, validateFields = []}, index) => {
   const errors = formOptions.getState().errors;
   const hasError = validateFields.find(name => !!get(errors, name));
   return (
-    <NavItem key={ key } eventKey={ index }>
+    <NavItem key={ name || key } eventKey={ index }>
       { hasError && <Icon style={{ marginRight: 8, color: '#CC0000' }} type="fa" name="exclamation-circle" /> }
       { title }
     </NavItem>
   );
 });
 const renderTabContent = (items, formOptions) =>
-  items.map(({ key, fields }, index) =>
-    <TabPane key={ key } eventKey={ index } >{ formOptions.renderForm(fields, formOptions) }</TabPane>);
+  items.map(({ key, name, fields }, index) =>
+    <TabPane key={ name || key } eventKey={ index } >{ formOptions.renderForm(fields, formOptions) }</TabPane>);
 
 const FormTabs = ({ fields, formOptions }) => (
   <TabContainer id="basic-tabs-pf" defaultActiveKey={ 0 }>

packages/pf4-component-mapper/demo/demo-schemas/sandbox.js

@@ -29,7 +29,7 @@ const output = {
         {
           title: 'Tab 1',
           description: 'Text boxes and text areas',
-          key: '553',
+          name: '553',
           fields: [
             {
               title: 'Text boxes',

packages/pf4-component-mapper/src/form-fields/tabs.js

@@ -16,7 +16,7 @@ class FormTabs extends React.Component {
   };
 
   renderTabItems = (fields, formOptions) => fields.map(({ key, fields, title, name }, index) => (
-    <Tab key={ key || name } eventKey={ index } title={ title }>
+    <Tab key={ name || key } eventKey={ index } title={ title }>
       <div className='pf-c-form'>
         { formOptions.renderForm(fields, formOptions) }
       </div>

packages/pf4-component-mapper/src/tests/__snapshots__/tabs.test.js.snap

@@ -13,7 +13,7 @@ exports[`Tabs component should render tabs correctly 1`] = `
 >
   <ForwardRef
     eventKey={0}
-    key="cosiKey"
+    key="cosiName"
     title="cosiTitle"
   >
     <div
@@ -26,7 +26,7 @@ exports[`Tabs component should render tabs correctly 1`] = `
   </ForwardRef>
   <ForwardRef
     eventKey={1}
-    key="cosiKey2"
+    key="cosiName2"
     title="cosiTitle2"
   >
     <div

packages/react-renderer-demo/src/common/examples-definitions.js

@@ -232,7 +232,7 @@ export const baseExamples = [{
       {
         component: componentTypes.TAB_ITEM,
         validateFields: [ 'apple' ],
-        key: '1',
+        name: '1',
         title: 'Fruits',
         description: 'Here you can find fruits',
         fields: [
@@ -249,7 +249,7 @@ export const baseExamples = [{
       },
       {
         component: componentTypes.TAB_ITEM,
-        key: '2',
+        name: '2',
         title: 'Vegetables',
         description: 'Here you can find vegetables',
         fields: [