components#ConditionalWrapper TypeScript Examples

The following examples show how to use components#ConditionalWrapper. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ApiEnvironmentSection.tsx    From one-platform with MIT License 4 votes vote down vote up 
ApiEnvironmentSection = ({ environments = [], category }: Props): JSX.Element => {
  const urlParser = useURLParser();

  const getToolTip = useCallback(
    (child: JSX.Element) => (
      <Tooltip content="Owners didn't add schema for these environment">{child}</Tooltip>
    ),
    []
  );

  return (
    <Stack hasGutter style={{ width: '85%' }}>
      <StackItem>
        <Title headingLevel="h3">Environments</Title>
        <Divider />
      </StackItem>
      <StackItem>
        {environments.length === 0 && (
          <EmptyState>
            <EmptyStateIcon icon={CubesIcon} />
            <Title headingLevel="h4" size="lg">
              No environments found
            </Title>
          </EmptyState>
        )}
        <DataList aria-label="environment-list" className={styles['catalog-env-list']} isCompact>
          {environments.map(({ apiBasePath, name, slug, isPublic, schemaEndpoint }) => (
            <DataListItem key={`${name}-${apiBasePath}`} className="pf-u-p-xs">
              <DataListItemRow>
                <DataListItemCells
                  dataListCells={[
                    <DataListCell
                      key="stage"
                      className="pf-u-display-flex pf-u-align-items-center"
                      isFilled={false}
                    >
                      <span id="simple-item1" className="uppercase pf-u-font-weight-bold">
                        {name}
                      </span>
                      {!isPublic && (
                        <Label
                          isCompact
                          color="red"
                          style={{ fontSize: '0.5rem' }}
                          className="pf-u-ml-xs"
                        >
                          VPN
                        </Label>
                      )}
                    </DataListCell>,
                    <DataListCell
                      key="secondary content"
                      className="pf-u-display-flex pf-u-align-items-center pf-u-justify-content-center"
                    >
                      <a
                        href={apiBasePath}
                        className={styles['catalog-mailing-list']}
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        {urlParser(apiBasePath)}
                      </a>
                    </DataListCell>,
                  ]}
                />
                <ConditionalWrapper isWrapped={!schemaEndpoint} wrapper={getToolTip}>
                  <DataListAction
                    aria-labelledby="check-action-item2 check-action-action2"
                    id="check-action-action2"
                    aria-label="Actions"
                    className="pf-u-display-flex pf-u-align-items-center"
                    style={{ filter: !schemaEndpoint ? 'grayscale(100%)' : '' }}
                  >
                    {category === ApiCategory.GRAPHQL ? (
                      <Tooltip content="Playground">
                        <Link to={schemaEndpoint ? `/apis/graphql/playground/${slug}` : '#'}>
                          <Split style={{ whiteSpace: 'nowrap' }}>
                            <SplitItem style={{ height: '1.5rem', width: '1.5rem' }}>
                              <img
                                src={PLAYGROUND_ICON}
                                alt="playground"
                                style={{
                                  height: '1.5rem',
                                  width: '1.5rem',
                                  borderRadius: '12px',
                                }}
                              />
                            </SplitItem>
                            <SplitItem className="pf-u-ml-xs pf-u-display-flex pf-u-align-items-center">
                              <span className="pf-u-font-size-xs">Try it</span>
                            </SplitItem>
                          </Split>
                        </Link>
                      </Tooltip>
                    ) : (
                      <>
                        <Tooltip content="Swagger">
                          <Link to={schemaEndpoint ? `/apis/rest/swagger/${slug}` : '#'}>
                            <Split style={{ whiteSpace: 'nowrap' }}>
                              <SplitItem style={{ height: '1.5rem', width: '1.5rem' }}>
                                <img
                                  src={SWAGGER_ICON}
                                  alt="swagger"
                                  style={{
                                    height: '1.5rem',
                                    width: '1.5rem',
                                    borderRadius: '12px',
                                  }}
                                />
                              </SplitItem>
                              <SplitItem className="pf-u-ml-xs pf-u-display-flex pf-u-align-items-center">
                                <span className="pf-u-font-size-xs ">Try it</span>
                              </SplitItem>
                            </Split>
                          </Link>
                        </Tooltip>
                        <Tooltip content="Redoc">
                          <Link to={schemaEndpoint ? `/apis/rest/redoc/${slug}` : '#'}>
                            <Split style={{ whiteSpace: 'nowrap' }}>
                              <SplitItem style={{ height: '1.5rem', width: '1.5rem' }}>
                                <img
                                  src={REDOC_LOGO}
                                  alt="redoc"
                                  style={{
                                    height: '1.5rem',
                                    width: '1.5rem',
                                    borderRadius: '12px',
                                  }}
                                />
                              </SplitItem>
                              <SplitItem className="pf-u-ml-xs pf-u-display-flex pf-u-align-items-center">
                                <span className="pf-u-font-size-xs">Try it</span>
                              </SplitItem>
                            </Split>
                          </Link>
                        </Tooltip>
                      </>
                    )}
                  </DataListAction>
                </ConditionalWrapper>
              </DataListItemRow>
            </DataListItem>
          ))}
        </DataList>
      </StackItem>
    </Stack>
  );
}