antd#Tabs TypeScript Examples

StyledTabs = styled(Tabs)`
  .ant-tabs-tab {
    margin-left: 40px;
    padding: 20px 0;
  }
  .ant-tabs-tabpane {
    padding: 4px 20px 20px 20px;
  }
`

MultiTabs = observer(() => {
  if (!tabs.tabs.length) {
    return null;
  }

  return (
    <Tabs activeKey={tabs.currentTab?.key} onChange={onTabChange} className={styles.tab}>
      {tabs.tabs.map((item) => (
        <TabPane
          tab={
            <Space size={10}>
              <FormattedMessage id={item.title}/>
              <CloseOutlined
                role={"button"}
                tabIndex={0}
                className={classNames(styles.icon, styles.closeButton)}
                onKeyDown={(e) => handleCloseKeyDown(e, item)}
                onClick={(e) => handleCloseClick(e, item)}
              />
            </Space>
          }
          key={item.key}
        >
          <TabContent item={item} />
        </TabPane>
      ))}
    </Tabs>
  );
})

export default function() {
  const { selectComponent, selectPage } = useModel('bridge');

  return (
    <Tabs defaultActiveKey="componentConfig" type="card" className="config-tabs">
      <TabPane tab="页面配置" key="pageConfig">
        {selectPage ? <PageConfig /> : <Empty description="请新建一个页面后配置" /> }
      </TabPane>
      <TabPane tab="组件配置" key="componentConfig">
        {selectComponent ? <ComponentConfig /> : <Empty description="请选取组件后配置组件" /> }
      </TabPane>
      <TabPane tab="外层容器配置" key="containerConfig">
        {selectComponent ? <BaseLayoutConfig /> : <Empty description="请选取组件后配置外层容器" /> }
      </TabPane>
      <TabPane tab="事件" key="3">
        开发中...
      </TabPane>
    </Tabs>
  );
}

public render() {
    const { configs } = this.props;
    if (this.props.groupType) {
      const groups = [...new Set(configs.map(item => item.group || ''))];
      const indexOfUnnamedGroup = groups.indexOf('');
      if (indexOfUnnamedGroup > -1) {
        groups[indexOfUnnamedGroup] = '其他';
      }
      if (this.props.groupType === 'collapse') {
        return (
          <Collapse>
            { groups.map((groupName, groupIndex) => (
              <Collapse.Panel key={groupIndex} header={groupName}>
                { configs.filter(item => groupName === (item.group || '其他')).map((item, index) => this.renderFormItem(item, index)) }
              </Collapse.Panel>
            )) }
          </Collapse>
        );
      }
      return (
        <Tabs tabPosition="left">
          { groups.map((groupName, groupIndex) => (
            <Tabs.TabPane key={groupIndex} tab={groupName}>
              { configs.filter(item => groupName === (item.group || '其他')).map((item, index) => this.renderFormItem(item, index)) }
            </Tabs.TabPane>
          )) }
        </Tabs>
      );
    }
    return (
      <div>
        { configs.map((item, index) => this.renderFormItem(item, index)) }
      </div>
    );
  }

export function EventsTabs({ tab }: { tab: EventsTab }): JSX.Element {
    const { setTab } = useActions(eventsTabsLogic)
    return (
        <Tabs tabPosition="top" animated={false} activeKey={tab} onTabClick={(t) => setTab(t as EventsTab)}>
            <Tabs.TabPane tab="Events" key="events" />
            <Tabs.TabPane tab={<span data-attr="events-actions-tab">Actions</span>} key="actions" />
            <Tabs.TabPane tab="Events stats" key="stats" />
            <Tabs.TabPane tab="Properties stats" key="properties" />
        </Tabs>
    )
}

TabsConfiguratorComponent = ({
  tabsList,
  className,
  type,
  activeTabKey,
  onTabChange = () => null,
  tabBarExtraContent = undefined,
}: Props) => (
  <Tabs
    type={type}
    className={className}
    activeKey={activeTabKey}
    onChange={onTabChange}
    tabBarExtraContent={tabBarExtraContent}
  >
    {tabsList.map((tab: Tab) => {
      if (!tab.isHidden) {
        return (
          <React.Fragment key={tab.key}>
            <Tabs.TabPane
              key={tab.key}
              tab={<TabName name={tab.name} errorsCount={tab.errorsCount} errorsLevel={tab.errorsLevel} />}
              disabled={tab.isDisabled}
              forceRender
            >
              {tab.getComponent?.(tab.form)}
            </Tabs.TabPane>
          </React.Fragment>
        )
      } else {
        return null
      }
    })}
  </Tabs>
)

SettingAutz: React.FC<Props> = (props) => {
    return (

        <PageHeaderWrapper
            title="功能权限管理"
        >
            <Card>
                <Tabs defaultActiveKey="1" onChange={() => { }}>
                    <Tabs.TabPane tab="用户维度分配" key="user-dimensions">
                        <UserDimensions type="user" />
                    </Tabs.TabPane>
                    <Tabs.TabPane tab="权限维度设置" key="setting-dimensions">
                        <UserDimensions type="setting" />
                    </Tabs.TabPane>
                </Tabs>
            </Card>
        </PageHeaderWrapper>

    );
}

DateDropdown: React.FC<
  {
    dropdown: RefObject<Popover>;
  } & BaseProps
> = React.memo(({ dropdown: { current: popup }, ...props }) => {
  const { t } = useTranslation(I18nKey);

  const activeTab = useMemo<Type>(() => superDateType(props.value), [props.value]);

  return (
    <Tabs
      destroyInactiveTabPane
      defaultActiveKey={activeTab}
      animated={{ tabPane: false, inkBar: true }}
      onChange={() => {
        popup && popup.forceUpdate();
      }}
    >
      <Tabs.TabPane key={Type.QUICK} tab={t("label.quick")} data-testid="tab-quick">
        <DatePresets {...props} />
      </Tabs.TabPane>
      <Tabs.TabPane key={Type.ABSOLUTE} tab={t("label.absolute")} data-testid="tab-absolute">
        <DatePicker {...props} />
      </Tabs.TabPane>
    </Tabs>
  );
})

CustomTabs = styled(Tabs)`
  .ant-tabs-tab {
    padding-top: 0px;
  }
  .ant-tabs-content {
    height: 100%;
  }

  .mods {
    padding: 24px 16px;
    padding-top: 4px;
    display: flex;
    flex-direction: column;
  }

  .ant-row {
    margin-bottom: 8px;
  }
`

MediaDevice: React.FC<Props> = () => {

  return (
    <PageHeaderWrapper title="基本配置">
      <Card style={{width: '60%',marginLeft:'20%'}}>
        <Tabs>
          <Tabs.TabPane tab="流媒体服务配置" key="MediaServer">
            <MediaServer loading={true}/>
          </Tabs.TabPane>
          <Tabs.TabPane tab="GB28181/2016" key="GatewayInfo">
            <GatewayInfo loading={true}/>
          </Tabs.TabPane>
        </Tabs>
      </Card>
    </PageHeaderWrapper>
  )
}

InputPanel: React.FC<IInputPanelProps> = (props) => {
  const cache: any = useRef({});
  const { data, onChange } = props;

  const onVisualChange = (newForm: any) => {
    clearTimeout(cache.current.timer);
    cache.current.timer = setTimeout(() => onChange(newForm), 1000);
  };
  const onEditorChange = (ev: any, newCode: string | undefined = '') => {
    clearTimeout(cache.current.timer);
    cache.current.timer = setTimeout(() => {
      try {
        onChange(JSON.parse(newCode));
      } catch (err) {
        // cancel log to avoid wasting Console outputs
      }
    }, 1000);
  };

  return (
    <Tabs type={'card'} defaultActiveKey={'visualTab'}>
      <Tabs.TabPane
        className={styles.tabPane}
        tab={'可视化模式'}
        key={'visualTab'}
      >
        <VisualPanel data={data} onChange={onVisualChange} />
      </Tabs.TabPane>
      <Tabs.TabPane className={styles.tabPane} tab={'源码模式'} key={'jsonTab'}>
        <CodeEditor
          height={'100%'}
          language={'json'}
          value={JSON.stringify(data, null, 2)}
          onChange={onEditorChange}
        />
      </Tabs.TabPane>
    </Tabs>
  );
}

MachineTabs = ({ activeMachine, activeMachineTab }: IProps) => {
  const [activeKey, setActiveKey] = useState(activeMachineTab || 'overview');
  const { clusterName, ip } = activeMachine;

  const clusters = React.useRef([{ clusterName, hostIPs: [ip] }]);

  return (
    <Tabs activeKey={activeKey} onChange={setActiveKey}>
      <TabPane tab={i18n.t('Machine Overview')} key="overview">
        <MachineDetail type="insight" machineDetail={activeMachine} />
      </TabPane>
      <TabPane tab={i18n.t('cmp:Machine Alerts')} key="alarm">
        <AlarmRecord clusters={clusters.current} />
      </TabPane>
      <TabPane tab={i18n.t('cmp:Instance')} key="instance">
        <InstanceList instanceType="all" clusters={clusters.current} />
      </TabPane>
      <TabPane tab={firstCharToUpper(i18n.t('service-menu'))} key="service">
        <InstanceList instanceType="service" clusters={clusters.current} />
      </TabPane>
      <TabPane tab={i18n.t('Task-list')} key="job">
        <InstanceList instanceType="job" clusters={clusters.current} />
      </TabPane>
      <TabPane tab={i18n.t('cmp:Machine Details')} key="info">
        <MachineDetail type="info" machineDetail={activeMachine} />
      </TabPane>
    </Tabs>
  );
}

{ TabPane } = Tabs

{ TabPane } = Tabs

Drawer: React.FC<{}> = () => {
  const [width, setWidth] = useState(300);
  const [isShow, setShow] = useState(false);
  const { appService } = useContext(AppContext);

  const page = appService.project.getCurrentPage();

  useEffect(() => {
    setShow(!!page?.currentNode[0]);
    // eslint-disable-next-line
  }, [page?.currentNode, page?.currentNode[0]]);

  useEffect(() => {
    setWidth(Number(localStorage.getItem(DrawerWidth) ?? 300));
  }, []);

  return (
    <div
      className={styles.drawer}
      style={{ display: isShow ? 'flex' : 'none', width: width }}
    >
      <div className={styles.header}>
        <div className={styles.slider}>
          <Tooltip placement="bottom" title="宽度">
            <span>
              <ColumnWidthOutlined />
            </span>
          </Tooltip>
          <InputNumber
            min={300}
            value={width}
            size="small"
            style={{ width: 60 }}
            max={500}
            onChange={value => {
              setWidth(value);
              localStorage.setItem(DrawerWidth, String(value));
            }}
          />
        </div>
        <div className={styles.close} onClick={() => setShow(false)}>
          <CloseSquareOutlined />
        </div>
      </div>
      <Tabs className={styles.tabs}>
        <>
          <TabPane tab="属性" key="style">
            <Attribute page={page} />
          </TabPane>
          <TabPane tab="组件" key="component" className="tests">
            <ComponentEdit page={page} />
          </TabPane>
          <TabPane tab="CSS" key="css">
            <CssEdit page={page} />
          </TabPane>
        </>
      </Tabs>
    </div>
  );
}

{ TabPane } = Tabs

{ TabPane } = Tabs

Login: LoginType = (props) => {
  const { className } = props;
  const [tabs, setTabs] = useState<string[]>([]);
  const [active, setActive] = useState({});
  const [type, setType] = useMergeValue('', {
    value: props.activeKey,
    onChange: props.onTabChange,
  });
  const TabChildren: React.ReactComponentElement<typeof LoginTab>[] = [];
  const otherChildren: React.ReactElement<unknown>[] = [];
  React.Children.forEach(
    props.children,
    (child: React.ReactComponentElement<typeof LoginTab> | React.ReactElement<unknown>) => {
      if (!child) {
        return;
      }
      if ((child.type as { typeName: string }).typeName === 'LoginTab') {
        TabChildren.push(child as React.ReactComponentElement<typeof LoginTab>);
      } else {
        otherChildren.push(child);
      }
    },
  );
  return (
    <LoginContext.Provider
      value={{
        tabUtil: {
          addTab: (id) => {
            setTabs([...tabs, id]);
          },
          removeTab: (id) => {
            setTabs(tabs.filter((currentId) => currentId !== id));
          },
        },
        updateActive: (activeItem) => {
          if (!active) return;
          if (active[type]) {
            active[type].push(activeItem);
          } else {
            active[type] = [activeItem];
          }
          setActive(active);
        },
      }}
    >
      <div className={classNames(className, styles.login)}>
        <Form
          form={props.from}
          onFinish={(values) => {
            if (props.onSubmit) {
              props.onSubmit(values as LoginParamsType);
            }
          }}
        >
          {tabs.length ? (
            <React.Fragment>
              <Tabs
                animated={false}
                className={styles.tabs}
                activeKey={type}
                onChange={(activeKey) => {
                  setType(activeKey);
                }}
              >
                {TabChildren}
              </Tabs>
              {otherChildren}
            </React.Fragment>
          ) : (
            props.children
          )}
        </Form>
      </div>
    </LoginContext.Provider>
  );
}

render() {
    const { className, children } = this.props;
    const { type, tabs = [] } = this.state;
    const TabChildren: React.ReactComponentElement<typeof LoginTab>[] = [];
    const otherChildren: React.ReactElement<unknown>[] = [];
    React.Children.forEach(
      children,
      (child: React.ReactComponentElement<typeof LoginTab> | React.ReactElement<unknown>) => {
        if (!child) {
          return;
        }
        if ((child.type as { typeName: string }).typeName === 'LoginTab') {
          TabChildren.push(child as React.ReactComponentElement<typeof LoginTab>);
        } else {
          otherChildren.push(child);
        }
      },
    );
    return (
      <LoginContext.Provider value={this.getContext()}>
        <div className={classNames(className, styles.login)}>
          <Form onSubmit={this.handleSubmit}>
            {tabs.length ? (
              <React.Fragment>
                <Tabs
                  animated={false}
                  className={styles.tabs}
                  activeKey={type}
                  onChange={this.onSwitch}
                >
                  {TabChildren}
                </Tabs>
                {otherChildren}
              </React.Fragment>
            ) : (
              children
            )}
          </Form>
        </div>
      </LoginContext.Provider>
    );
  }

{ TabPane } = Tabs

SettingBar: React.FC<IProps> = (props) => {
  const { flowChart } = props;
  const forceUpdate = useReducer((n) => n + 1, 0)[1];

  useEffect(() => {
    flowChart.on('settingBar:forceUpdate', forceUpdate);
    return () => {
      flowChart.off('settingBar:forceUpdate');
    };
  }, []);

  const nodes = flowChart.getSelectedCells().filter((v) => v.shape !== 'edge');
  if (nodes.length === 1) {
    return (
      <div className={styles.container}>
        <Tabs
          tabBarGutter={0}
          defaultActiveKey={'basic'}
          tabBarStyle={{
            display: 'flex',
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <TabPane tab={'节点配置'} key={'basic'}>
            <Basic selectedCell={nodes[0]} flowChart={flowChart} />
          </TabPane>
          {/* <TabPane tab={'测试用例'} key={'testCase'} forceRender>
            <TestCase selectedCell={nodes[0]} flowChart={flowChart} />
          </TabPane> */}
        </Tabs>
      </div>
    );
  } else {
    return (
      <div className={`${styles.container} ${styles.center}`}>
        <Empty
          description={'请选择一个节点'}
          image={Empty.PRESENTED_IMAGE_SIMPLE}
        />
      </div>
    );
  }
}

{ TabPane } = Tabs

{ TabPane } = Tabs

render() {
    const { withTabs, content, visible, closeSlidePanel, title = null, slidePanelComps, ...rest } = this.props;
    const { activeKey } = this.state;

    let sliderContent = null;
    if (!isEmpty(withTabs)) {
      const { contents = [], TopTabRight = null } = withTabs || {};
      const tabBarExtraContent = TopTabRight ? <TopTabRight /> : null;
      sliderContent = (
        <Tabs
          defaultActiveKey={activeKey}
          key={activeKey}
          onChange={this.onTabChange}
          animated={false}
          tabBarExtraContent={tabBarExtraContent}
        >
          {map(contents, ({ Comp, props, key }) => {
            const { ipAddress } = props.instance;
            return (
              <TabPane tab={ipAddress} key={key}>
                <Comp {...props} />
              </TabPane>
            );
          })}
        </Tabs>
      );
    } else {
      sliderContent = content;
    }

    return (
      <Drawer
        className="slider"
        title={slidePanelComps.length ? slidePanelComps[slidePanelComps.length - 1].getTitle() : title}
        visible={visible}
        placement="right"
        width="80%"
        destroyOnClose
        onClose={closeSlidePanel}
        afterVisibleChange={(vis: boolean) => {
          if (vis && !this.state.showContent) this.setState({ showContent: true });
        }}
        {...rest}
      >
        {this.state.showContent ? <CompSwitcher comps={slidePanelComps}>{sliderContent}</CompSwitcher> : null}
      </Drawer>
    );
  }

{ TabPane } = Tabs

{ TabPane } = Tabs

{ TabPane } = Tabs

export function EventDetails({ event }: { event: EventType }): JSX.Element {
    const [showHiddenProps, setShowHiddenProps] = useState(false)

    const displayedEventProperties: Properties = {}
    const visibleHiddenProperties: Properties = {}
    let hiddenPropsCount = 0
    for (const key of Object.keys(event.properties)) {
        if (keyMapping.event[key] && keyMapping.event[key].hide) {
            hiddenPropsCount += 1
            if (showHiddenProps) {
                visibleHiddenProperties[key] = event.properties[key]
            }
        }
        if (!keyMapping.event[key] || !keyMapping.event[key].hide) {
            displayedEventProperties[key] = event.properties[key]
        }
    }

    return (
        <Tabs
            data-attr="event-details"
            defaultActiveKey="properties"
            style={{ float: 'left', width: '100%' }}
            tabBarStyle={{ margin: 0 }}
        >
            <TabPane tab="Properties" key="properties">
                <PropertiesTable
                    properties={{
                        $timestamp: dayjs(event.timestamp).toISOString(),
                        ...displayedEventProperties,
                        ...visibleHiddenProperties,
                    }}
                />
                {hiddenPropsCount > 0 && (
                    <small>
                        <Button
                            style={{ margin: '8px 0 0 8px' }}
                            type="link"
                            onClick={() => setShowHiddenProps(!showHiddenProps)}
                        >
                            {showHiddenProps ? 'Showing ' : ''}
                            {hiddenPropsCount} hidden properties. Click to {showHiddenProps ? 'hide' : 'show'}.
                        </Button>
                    </small>
                )}
            </TabPane>
            <TabPane tab="JSON" key="json">
                <EventJSON event={event} />
            </TabPane>
            {event.elements && event.elements.length > 0 && (
                <TabPane tab="Elements" key="elements">
                    <EventElements event={event} />
                </TabPane>
            )}
        </Tabs>
    )
}

{ TabPane } = Tabs