reactjsoffice-ui-fabricoffice-fabric

React Fabric UI remove the Pivot Item


I am using Pivot component in Office Fabric UI, I need to remove PivotItem for some views. Is there any possible way?

etc. I need to remove 'Insert' Pivot with using isComposeMode() in below

import * as React from "react";
import { Label } from "office-ui-fabric-react/lib/Label";
import { Pivot, PivotItem } from "office-ui-fabric-react/lib/Pivot";
import InsertView from "./InsertView";

export interface PivotProps {}

export interface PivotState {}

class MainNav extends React.Component<PivotProps, PivotState> {
  render() {
    return (
      <div>
        <Pivot>
          <PivotItem headerText="Insert">
            <InsertView />
          </PivotItem>
          <PivotItem headerText="Review">
            <Label>Review</Label>
          </PivotItem>
          <PivotItem headerText="Settings">
            <Label>Settings</Label>
          </PivotItem>
        </Pivot>
      </div>
    );
  }

  isComposeMode = (): boolean => {
    if (Office.context.mailbox.item.displayReplyForm != undefined) {
      return false;
    } else {
      return true;
    }
  };
}

export default MainNav;

Solution

  • Array approach above is great, but you can conditionally include items in the array and then filter out “falsy” values using the .filter(Boolean) method. This allows you to include the item only if the condition is true.

    import * as React from 'react'
    import { Pivot, PivotItem, InsertView, Label } from '.'
    
    export interface PivotProps {
        isComposeMode: boolean
    }
    
    class MainNav extends React.Component<PivotProps> {
        public render() {
            const items = [
                this.props.isComposeMode && <PivotItem key="insert" headerText="Insert"><InsertView /></PivotItem>,
                <PivotItem key="review"headerText="Review"><Label>Review</Label></PivotItem>,
                <PivotItem key="settings" headerText="Settings"><Label>Settings</Label></PivotItem>
            ].filter(Boolean)
    
            return (
                <Pivot>
                    {items}
                </Pivot>
            )
        }
    }
    

    You should also derive isComposeMode in a parent component and pass it in as a prop. This will make your component more reusable and won’t tie it to your business logic.