semantic-ui-react#Tab JavaScript Examples

render() {
    var panes = [
      {
        menuItem: 'Customer',
        render: () => <Tab.Pane attached={false}><CCPData /></Tab.Pane>,
      },
      {
        menuItem: 'Lookup',
        render: () => <Tab.Pane attached={false}><CCPDebug /></Tab.Pane>,
      },
    ]

    // add Upload pane if group is Uploaders
    if (this.state.primarygroup === 'Uploaders')
    {
      panes.push({
        menuItem: 'Upload',
        render: () => <Tab.Pane attached={false}><CCPDataUploader /></Tab.Pane>,
      });
      panes.push({
        menuItem: 'Manage',
        render: () => <Tab.Pane attached={false}><CCPManageCustomers /></Tab.Pane>,
      });
    }
    
    var CCPDataTabs = () => <Tab 
      menu={{ pointing: true }} 
      activeIndex={this.state.activeIndex}
      panes={panes} 
      onTabChange={this.handleTabChange}
      />;

    return (
      <div>
        <CCPDataTabs />
      </div>
    );
  }

render() {
    return (
      <Tab
        menu={{ secondary: true, pointing: true }}
        panes={this.renderTabPanes()}
        id="series-metadata-tabs"
      />
    );
  }

render() {
    return (
      <Tab
        className="bo-metadata-tab mb-20"
        menu={{ attached: 'top' }}
        panes={this.panes()}
        /* needed for DocumentActionMenu scroll */
        id="metadata"
      />
    );
  }

function Related({ id, specter }) {
  const query = new URLSearchParams();
  query.set('id', id);
  query.set('summary', 'short');
  query.set('hits', 5);
  if (specter) query.set('use-specter', true);
  const { loading, response, error } = Get(
    '/search/?' + query.toString()
  ).state();

  if (loading) return <Loading message="Searching..." />;
  if (error)
    return <Error message={error.message || 'Unknown search error...'} />;

  console.log(response);
  if (!('children' in response.root)) return null;
  return (
    <Tab.Pane>
      <React.Fragment>
        {response.root.children.map((article, i) => (
          <ResultCard key={i} {...article} />
        ))}
        <Link to={`/search/?query=related_to:${id}&use-specter=${specter}`}>
          Show more
        </Link>
      </React.Fragment>
    </Tab.Pane>
  );
}

Support = () => {
  return (
    <div className="support-wrapper">
      <p>Thanks for vising this page</p>
      <h5>How would you like to support us? </h5>
      <Tab menu={{ pointing: true }} panes={panes} />
    </div>
  );
}

render() {
    return (
      <Tab
        className="bo-metadata-tab mb-20"
        menu={{ attached: 'top' }}
        panes={this.panes()}
      />
    );
  }

render() {
    images.length = 0;
    videos.length = 0;

    let multimedia = [];

    multimedia = cache.default.getFilePathsForRoute(this.props.route);
    console.log(multimedia)
    multimedia.forEach((element) => {
      if(element.contentType !== null){
        if (element.contentType.includes("image")) {
          images.push(element);
        } else if (element.contentType.includes("video")) {
          videos.push(element);
        }
      }
      
    });
    return (
      <div className="MyTabDiv">
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css"
        />
        <Tab panes={this.panes()} renderActiveOnly={false} />
      </div>
    );
  }

render() {
    return (
      <Tab
        onTabChange={this.onTabChangeHandler}
        menu={{
          secondary: true,
          pointing: true,
          className: 'document-items-tab-menu',
        }}
        panes={this.createPanes()}
      />
    );
  }

render() {
    const { activeTab } = this.props;
    return (
      <Tab
        activeIndex={activeTab}
        menu={{ secondary: true, pointing: true }}
        panes={this.renderTabPanes()}
        onTabChange={this.onTabChange}
        id="document-metadata-section"
        className="document-metadata-tabs"
      />
    );
  }

panes = [
    {
      menuItem: "Patreon",
      render: () => (
        <Tab.Pane attached={false}>
          {" "}
          <a href="https://www.patreon.com/user?u=35633615" target="_blank">
            Monthly subscription based
            <img src={weblink} alt="web link" />
          </a>
        </Tab.Pane>
      ),
    },
    {
      menuItem: "Gofundme",
      render: () => (
        <Tab.Pane attached={false}>
          <a href="https://gf.me/u/x93tkd" target="_blank">
            One time support
            <img src={weblink} alt="web link" />
          </a>
        </Tab.Pane>
      ),
    },
  ]

render() {
    const { isLoading, error, seriesDetails, relations } = this.props;

    const languages = relations['language'] || [];
    const editions = relations['edition'] || [];
    const other = relations['other'] || [];
    const sequence = relations['sequence'] || [];

    const panes = [
      {
        menuItem: {
          key: 'languages',
          content: (
            <>
              Languages <Label>{languages.length}</Label>{' '}
            </>
          ),
        },
        render: () => (
          <Tab.Pane className="bo-relations-tab">
            <RelationLanguages />
          </Tab.Pane>
        ),
      },
      {
        menuItem: {
          key: 'editions',
          content: (
            <>
              Editions <Label>{editions.length}</Label>{' '}
            </>
          ),
        },
        render: () => (
          <Tab.Pane className="bo-relations-tab">
            <RelationEdition recordDetails={seriesDetails} />
          </Tab.Pane>
        ),
      },
      {
        menuItem: {
          key: 'sequences',
          content: (
            <>
              Sequences <Label>{sequence.length}</Label>{' '}
            </>
          ),
        },
        render: () => (
          <Tab.Pane className="bo-relations-tab">
            <RelationSequence recordDetails={seriesDetails} />
          </Tab.Pane>
        ),
      },
      {
        menuItem: {
          key: 'Other',
          content: (
            <>
              Other <Label>{other.length}</Label>{' '}
            </>
          ),
        },
        render: () => (
          <Tab.Pane className="bo-relations-tab">
            <RelationOther />
          </Tab.Pane>
        ),
      },
    ];

    return (
      <Loader isLoading={isLoading}>
        <Error error={error}>
          <Tab id="series-siblings" panes={panes} />
        </Error>
      </Loader>
    );
  }

function Article({ id }) {
  const url = new URL(window.location);
  const { loading, response, error } = Get(
    `/document/v1/covid-19/doc/docid/${id}`
  ).state();

  if (loading) return <Loading message="Loading..." />;
  if (error)
    return <Error message={error.message || `Failed to load article #${id}`} />;

  console.log(response);

  const citations = uniq([
    ...(response.fields.cited_by || []),
    ...(response.fields.citations_inbound || [])
      .map(c => c.source_id)
      .filter(c => !isNaN(c)),
  ]);

  const panes = [
    {
      menuItem: 'Similar articles by Sent-SciBERT',
      render: () => <Related id={response.fields.id} specter={false} />,
    },
    {
      menuItem: 'Similar articles by SPECTER',
      render: () => <Related id={response.fields.id} specter={true} />,
    },
    {
      menuItem: {
        key: 'citations',
        content: `${citations.length} citing articles`,
        disabled: citations.length === 0,
      },
      render: () => (
        <CitedBy
          citedBy={citations}
          offset={parseInt(url.searchParams.get('offset')) || 0}
          total={citations.length}
          onOffsetChange={offset => {
            url.searchParams.set('offset', offset);
            navigate(url);
          }}
        />
      ),
    },
  ];

  return (
    <React.Fragment>
      <ContainerContent>
        <Content {...response.fields} />
        <Tab
          panes={panes}
          defaultActiveIndex={url.searchParams.get('tab') || 0}
          onTabChange={(e, tabInfo) => {
            // Reset all query params when changing tab
            [...url.searchParams.keys()].forEach(k =>
              url.searchParams.delete(k)
            );
            url.searchParams.set('tab', tabInfo.activeIndex);
            navigate(url);
          }}
        />
      </ContainerContent>
      <Footer />
    </React.Fragment>
  );
}

ProjectsSection = ({ data }) => {
  const projectColumns = useBreakpoint().l ? 3 : 4

  const projectPanes = Object.entries(data)
    .map(([year, yearData]) => {
      return {
        menuItem: year,
        render: () => {
          if (yearData.projects.length) {
            return (
              <Tab.Pane attached={false} className="project-cards-container">
                <Grid
                  className="project-cards-grid"
                  stackable
                  columns={projectColumns}
                >
                  {yearData.projects.map(project => (
                    <Grid.Column>
                      <ProjectCard data={project} />
                    </Grid.Column>
                  ))}
                </Grid>
              </Tab.Pane>
            )
          } else {
            return (
              <Tab.Pane
                attached={false}
                className="project-cards-container projects-section-message-container"
              >
                No completed projects :(
              </Tab.Pane>
            )
          }
        },
      }
    })
    .reverse()

  return (
    <div className="projects-section-container">
      <Tab
        className="projects-section-year-headings"
        menu={{ secondary: true }}
        menuPosition="center"
        panes={projectPanes}
      />
    </div>
  )
}

render() {
    const { isLoading, error, documentDetails, relations } = this.props;

    const languages = _get(relations, 'language', []);
    const editions = _get(relations, 'edition', []);
    const other = _get(relations, 'other', []);

    const panes = [
      {
        menuItem: {
          key: 'languages',
          content: (
            <>
              Languages <Label>{languages.length}</Label>{' '}
            </>
          ),
        },
        render: () => (
          <Tab.Pane className="bo-relations-tab">
            <RelationLanguages />
          </Tab.Pane>
        ),
      },
      {
        menuItem: {
          key: 'editions',
          content: (
            <>
              Editions <Label>{editions.length}</Label>{' '}
            </>
          ),
        },
        render: () => (
          <Tab.Pane className="bo-relations-tab">
            <RelationEdition recordDetails={documentDetails} />
          </Tab.Pane>
        ),
      },
      {
        menuItem: {
          key: 'Other',
          content: (
            <>
              Other <Label>{other.length}</Label>{' '}
            </>
          ),
        },
        render: () => (
          <Tab.Pane className="bo-relations-tab">
            <RelationOther />
          </Tab.Pane>
        ),
      },
    ];

    return (
      <Loader isLoading={isLoading}>
        <Error error={error}>
          <Tab id="document-siblings" panes={panes} />
        </Error>
      </Loader>
    );
  }

render() {
    const { isLoading, error, documentDetails, relations } = this.props;
    const multipart = _get(relations, 'multipart_monograph', []);
    const serial = _get(relations, 'serial', []);

    const panes = [
      {
        menuItem: {
          key: 'multipart',
          content: (
            <>
              Multipart monograph <Label>{multipart.length}</Label>{' '}
            </>
          ),
        },
        render: () => (
          <Tab.Pane className="bo-relations-tab">
            <RelationMultipart />
          </Tab.Pane>
        ),
      },
      {
        menuItem: {
          key: 'series',
          content: (
            <>
              Serials <Label>{serial.length}</Label>{' '}
            </>
          ),
        },
        render: () => (
          <Tab.Pane className="bo-relations-tab">
            <RelationSerial recordDetails={documentDetails} />
          </Tab.Pane>
        ),
      },
    ];

    return (
      <Loader isLoading={isLoading}>
        <Error error={error}>
          <Tab id="document-series" panes={panes} />
        </Error>
      </Loader>
    );
  }

PostPanel = (props) => {
  const posts = props.posts;
  if (!posts)
    return (
      <Segment textAlign="center">
        <Loader inline active>
          Loading...
        </Loader>
      </Segment>
    );
  const published = posts.filter((post) => !post.isDeleted && !post.isDraft);
  const drafts = posts.filter((post) => !post.isDeleted && post.isDraft);
  const deleted = posts.filter((post) => post.isDeleted);

  const publishedPanel = () => (
    <Tab.Pane attached={false}>
      <PostItemView items={published} onRemove={props.onRemove} />
    </Tab.Pane>
  );

  const draftsPanel = () => (
    <Tab.Pane attached={false}>
      <PostItemView items={drafts} onRemove={props.onRemove} />
    </Tab.Pane>
  );

  const deletedPanel = () => (
    <Tab.Pane attached={false}>
      <PostItemView
        items={deleted}
        onRemove={props.onPermanentlyRemove}
        onRecover={props.onRecover}
      />
    </Tab.Pane>
  );

  const panes = [
    {
      menuItem: "Published",
      displayName: "Published",
      render: publishedPanel,
    },
    {
      menuItem: "Drafts",
      displayName: "Drafts",
      render: draftsPanel,
    },
    {
      menuItem: "Deleted",
      displayName: "Deleted",
      render: deletedPanel,
    },
  ];

  return <Tab menu={{ secondary: true, pointing: true }} panes={panes} />;
}

BuyCoffeeModal = () => {
  const panes = [
    {
      menuItem: 'Wechat',
      render: () => (
        <Tab.Pane attached={false}>
          <div className='tab-content'>
            <img src='./wechat.jpeg' alt='wechat' width='100px' />
          </div>
        </Tab.Pane>
      )
    },
    {
      menuItem: 'Beem it',
      render: () => (
        <Tab.Pane attached={false}>
          <div className='tab-content'>
            <img src='./beem.svg' alt='beemit logo' width='100px' />
            <img src='./beemit.jpeg' alt='beemit' width='100px' />
          </div>
        </Tab.Pane>
      )
    },
    {
      menuItem: 'Alipay',
      render: () => (
        <Tab.Pane attached={false}>
          <div className='tab-content'>
            <img src='./alipay.jpeg' alt='alipay' width='100px' />
          </div>
        </Tab.Pane>
      )
    }
    // {
    //   menuItem: 'Paypal or card',
    //   render: () => (
    //     <Tab.Pane attached={false}>
    //       <Iframe
    //         url='https://www.buymeacoffee.com/widget/page/6bpOFt7'
    //         frameborder='0'
    //         onmousewheel=''
    //         width='100%'
    //         height='500'
    //       />
    //     </Tab.Pane>
    //   )
    // }
  ];
  return (
    <Modal
      className='buy-coffee-modal'
      closeIcon
      trigger={
        // eslint-disable-next-line
        <a className='bmc-button' href='#' onClick={e => e.preventDefault()}>
          <img
            src='https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg'
            alt='Buy me a coffee'
          />
          <span style={{ marginLeft: '7px', fontSize: '14px' }}>
            Buy me a coffee
          </span>
        </a>
      }
    >
      <Modal.Header>Buy me a coffee</Modal.Header>
      <Modal.Content>
        <Modal.Description>
          <Grid textAlign='center' columns='equal' stackable>
            <Grid.Row>
              <Tab
                menu={{ secondary: true, pointing: true }}
                panes={panes}
                width={'100%'}
              />
            </Grid.Row>

            <Grid.Row>
              <a
                target='_blank'
                rel='noopener noreferrer'
                href='https://www.buymeacoffee.com/6bpOFt7'
              >
                <Icon name='external'></Icon>Paypal or card
              </a>
            </Grid.Row>
            <Divider />
            <Grid.Row>
              <p>
                {/* so far we got {sponsor.AUD} AUD and{' '}
                {sponsor.CNY} CNY, details */}
                Thank you for your support, sponsor list see:{' '}
                <a
                  target='_blank'
                  rel='noopener noreferrer'
                  href='https://airtable.com/shrZ0h28K3ENwWfvc'
                >
                  sponsor list
                </a>
              </p>
            </Grid.Row>
          </Grid>
        </Modal.Description>
      </Modal.Content>
    </Modal>
  );
}