Is it possible to hide entire tabs using conditions?

[midas-glitch]

Just wondering if its possible to hide entire tabs using conditions? For example, I would have expected this to work, but it doesn't.

const tabSchema = {
  component: componentTypes.SUB_FORM,
  name: 'tab Info',
  title: 'tab Info',
  "fields": [
    {
      "component": "tabs",
      "name": "tabs",
      "fields": [
        { 
          "validateFields": [
            "apple"
          ],
          condition: { when: 'name', is: 'Michael', then: { visible: true } },
          "name": "1",
          "title": "Fruits",
          "description": "Here you can find fruits",
          "fields": [
            {
              "name": "apple",
              "label": "Apple",
              "title": "Apple",
              "component": "text-field",


              "validate": [
                {
                  "type": "required"
                }
              ]
            }
          ]
        },
        {
          "name": "2",
          "title": "Vegetables",
          "description": "Here you can find vegetables",
          "fields": [
            {
              "name": "carrot",
              "label": "Carrot",
              "title": "Carrot",
              "component": "text-field"
            }
          ]
        }
      ]
    }
  ]
};

[Hyperkid123]

@cowlikeobject You are correct this feature is not supported. But I believe it is something we could implement. However, you would have to be very careful about clearing the child fields values or re-initializing them.

I am going to think about this a bit more today and see what might be the best possible approach.

One question. What component mapper are you targeting?

[midas-glitch]

@Hyperkid123 Thanks for the quick response. I don't have a particular mapper in mind right now. Just seeing what the limitations are using this for my project. In terms of clearing the child field values...I don't believe they're cleared for text fields either are they? Is there a preferred method of doing so?

[rvsia]

@cowlikeobject The thing with tab items is that they are not implemented as regular fields, but they are actually a part of the tab component, so that's the reason why conditions do not work. (In our default mappers.)

It should be simple to reimplement tabs to avoid this, but then there has to be some code that will correctly generate the tab options based on shown children and will check if the currently open tab is visible (if not, it should switch to some tab that is visible.)

You can also implement the tab component using parseCondition (here) and formSpy to check the condition itself in the tab component.

Clearing and re-initializing is done automatically if you set clearOnUnmount and initializeOnMount attributes (please see documentation). It depends on your use-case.

[midas-glitch]

Okay, so I am a total newbie to all this and react, but after banging my head on the wall so much today, I finally got something that I think works. As you mentioned, I used parse condition and formspy. I copied the pf4 mapper and added some stuff to it. I'll just share it here I guess.

Also, I just want to mention: in my main schema I had set clearOnUnmount to true, but I noticed for my other 'normal' tabs, they would still keep their values when I clicked between my tabs which makes sense. However, this new tab component I created would clear all the values when I clicked between them so I had to put formOptions.clearOnUnmount = false

See code here:

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { useFormApi } from '@data-driven-forms/react-form-renderer';
import FormSpy from '@data-driven-forms/react-form-renderer/form-spy';
import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
import parseCondition from '@data-driven-forms/react-form-renderer/parse-condition';

const FormTabs = ({ fields, dataType, validate, component, ...rest }) => {
  const formOptions = useFormApi();
  console.log('formopts');
  console.log(formOptions);
  formOptions.clearOnUnmount = false;
  const [activeTabKey, setActiveTabKey] = useState(0);

  const handleTabClick = (event, tabIndex) => {
    event.preventDefault();
    setActiveTabKey(tabIndex);
  };

  const RenderTabItems = (fields) => {
    const { getState, change } = useFormApi();
    let newFields = [];

    for (let i=0;i<fields.fields.length;i++){
      if (fields.fields[i].hasOwnProperty('condition')){
        if (parseCondition(fields.fields[i].condition,getState().values).visible == true){
          newFields.push(fields.fields[i]);
        };
      }else{
        newFields.push(fields.fields[i]);
      }
    }
    
    console.log(newFields);
    let arr = newFields.map(({ fields, title, name }, index) => (
      <Tab key={name} eventKey={index} title={typeof title === 'string' ? <TabTitleText>{title}</TabTitleText> : title}>
        <div className="pf-c-form">{formOptions.renderForm(fields, formOptions)}</div>
      </Tab>
      
    ));
    return (<Tabs activeKey={activeTabKey} onSelect={handleTabClick} {...rest}>
            {arr}
            </Tabs>)
  }

  return (
    

      <FormSpy subcription={{ values: true }}>
      {()=> <RenderTabItems fields={fields} />}
      </FormSpy>

    
  );
};

FormTabs.propTypes = {
  fields: PropTypes.array.isRequired,
  dataType: PropTypes.any,
  validate: PropTypes.any,
  component: PropTypes.any
};

export default FormTabs;

[Hyperkid123]

Yeah, I think we could actually use it and integrate it. Would you mind cleaning up the code a bit and opening a PR? Once merged we will make the code a bit more generic and apply it to other mappers as well.

[midas-glitch]

Thanks for the feedback. It looks like the pf4 and mui tabs are implemented a little differently. For pf4, I'm not sure how I would hide the tab itself since it is using a Tab object and wont utilize the hidden property, where as in mui, it looks like it is all wrapped in a div, so you can use the hidden property? It seems like wrapping each Tab in a div for pf4 won't work, as it doesn't render properly. I'm going to keep playing with it for a while. Maybe if you guys have any other suggestions, please let me know.

[midas-glitch]

Ok after some further testing it seems something weird happens. When one of the text fields in one of the tabs is the first field I type into, the whole thing goes into an infinite loop, re-instantiating the whole Form itself over and over? The same thing happens if I first type into a different field that's not in the tabs, then type into the a field in the tabs, then remove what I typed into the non tab field.

[midas-glitch]

Ok, so, it seems I may have figured it out. Instead of calling RenderTabItems as a component, I had to call it as a function. See below

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { useFormApi } from '@data-driven-forms/react-form-renderer';
import FormSpy from '@data-driven-forms/react-form-renderer/form-spy';
import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
import parseCondition from '@data-driven-forms/react-form-renderer/parse-condition';

const FormTabs = ({ fields, dataType, validate, component, ...rest }) => {

  const formOptions = useFormApi();
  //formOptions.pristine = false;
  console.log('formopts',formOptions);
  formOptions.clearOnUnmount = false;
  const [activeTabKey, setActiveTabKey] = useState(0);

  const handleTabClick = (event, tabIndex) => {
    event.preventDefault();
    setActiveTabKey(tabIndex);
  };

  const RenderTabItems = (fields) => {
    //debugger;
    
    const { getState, change } = useFormApi();
    let newFields = [];
    console.log('re-rendered tabs');
    console.log('state', getState());
    console.log('statevals', getState().values);
    console.log('pristine',getState().pristine);
    for (let i=0;i<fields.length;i++){
      if (fields[i].hasOwnProperty('condition')){
        if (parseCondition(fields[i].condition,getState().values).visible == true){
          newFields.push(fields[i]);
        };
      }else{
        newFields.push(fields[i]);
      }
    }
    
    console.log('tabfieldstorender', newFields);
    let arr = newFields.map(({ fields, title, name }, index) => (
      <Tab key={name} eventKey={index} title={typeof title === 'string' ? <TabTitleText>{title}</TabTitleText> : title}>
        <div className="pf-c-form" >{formOptions.renderForm(fields, formOptions)}</div>
      </Tab>

      
    ));
    return (<Tabs activeKey={activeTabKey} onSelect={handleTabClick} {...rest}>
      {arr}
      </Tabs>)
  }

  return (
    <FormSpy subcription={{ values: true }}>
      {()=> {return (
        <div>
        {RenderTabItems(fields)}
        </div>
      )}
      }

    </FormSpy>
  );
};

FormTabs.propTypes = {
  fields: PropTypes.array.isRequired,
  dataType: PropTypes.any,
  validate: PropTypes.any,
  component: PropTypes.any
};

export default FormTabs;

[Hyperkid123]

Instead of calling RenderTabItems as a component, I had to call it a function. See below

I think that was because you had the component defined within another component, so it was re-created on each render. If you would extract it from the function It should even work as a component. 🙂

Thanks for the feedback. It looks like the pf4 and mui tabs are implemented a little differently.

As I said above, feel free to open a PR, we will merge it and generalize the code so its applied on each tab component in each mapper. We don't want to just "steal" your code without any credit 🙂