antd#Collapse TypeScript Examples

The following examples show how to use antd#Collapse. 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: index.tsx    From drip-table with MIT License 6 votes vote down vote up 
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>
    );
  }
Example #2
Source File: Aside.tsx    From ant-extensions with MIT License 6 votes vote down vote up 
Aside: React.FC = React.memo(() => {
  const { t } = useTranslation(I18nKey);
  const { selected, editConfig } = useContext(Context);

  const [active, setActive] = useState<string | string[]>(["widgets"]);

  useLayoutEffect(() => {
    setActive(selected ? ["config", "widgets"] : ["widgets"]);
  }, [selected]);

  return (
    <div className="ant-ext-pm__aside">
      <Collapse activeKey={active}>
        {selected && (
          <Collapse.Panel
            key="config"
            showArrow={false}
            header={t("label.config")}
            extra={<CloseOutlined onClick={() => editConfig(undefined)} />}
          >
            <Config />
          </Collapse.Panel>
        )}
        <Collapse.Panel showArrow={false} key="widgets" header={t("label.widgets")}>
          <WidgetList />
        </Collapse.Panel>
      </Collapse>
    </div>
  );
})
Example #3
Source File: BrickCollapseCard.tsx    From next-basics with GNU General Public License v3.0 6 votes vote down vote up 
export function BrickCollapseCard(
  props: BrickCollapseCardProps
): React.ReactElement {
  return (
    <Collapse activeKey={props.isActive ? "content" : ""} ghost={true}>
      <Collapse.Panel
        style={props.containerStyle}
        forceRender={true}
        key="content"
        showArrow={false}
        header={getHeaderNode(props)}
        extra={getExtraNode(props)}
      >
        <div
          className={classNames("contentContainer", {
            verticalCenter: props.verticalCenter,
          })}
          style={props.contentStyle}
        >
          <slot id="contentSlot" name="content" />
        </div>
      </Collapse.Panel>
    </Collapse>
  );
}
Example #4
Source File: index.tsx    From erda-ui with GNU Affero General Public License v3.0 6 votes vote down vote up 
SafetyManage = (props: IProps) => {
  const { artifacts } = props;
  const artifactId = artifacts.id;
  return (
    <div className="safety-manage">
      <Collapse defaultActiveKey="blackList">
        <Panel header={i18n.t('publisher:blacklist')} key="blackList">
          <BlackList artifactId={artifactId} />
        </Panel>
        <Panel header={i18n.t('publisher:erase data')} key="eraseData">
          <EraseList artifactId={artifactId} />
        </Panel>
      </Collapse>
      <Copy selector=".cursor-copy" />
    </div>
  );
}
Example #5
Source File: index.tsx    From imove with MIT License 6 votes vote down vote up 
SideBar: React.FC<ISideBarProps> = (props) => {
  const { flowChart } = props;
  const [groups, setGroups] = useState<IGroupItem[]>([]);
  const dnd = useMemo(() => new Dnd({ target: flowChart, scaled: true }), [
    flowChart,
  ]);

  // life
  useEffect(() => {
    // TODO: fetch to get custom group data
    setGroups([GENERAL_GROUP]);
  }, []);

  return (
    <div className={styles.container}>
      <Collapse
        className={styles.collapse}
        defaultActiveKey={['general', 'custom']}
      >
        {groups.map((group) => (
          <Panel key={group.key} header={group.name}>
            <PanelContent dnd={dnd} cellTypes={group.cellTypes} />
          </Panel>
        ))}
      </Collapse>
    </div>
  );
}
Example #6
Source File: SourceEditorDocumentationDrawer.tsx    From jitsu with MIT License 6 votes vote down vote up 
SourceEditorDocumentationDrawer: React.FC<Props> = ({ sourceDataFromCatalog, visible, setVisible }) => {
  return (
    <Drawer
      title={<h2>{sourceDataFromCatalog.displayName} documentation</h2>}
      placement="right"
      closable={true}
      onClose={() => setVisible(false)}
      width="70%"
      visible={visible}
    >
      <div className={styles.documentation}>
        <Collapse defaultActiveKey={["overview", "connection"]} ghost>
          <Collapse.Panel
            header={<div className="uppercase font-bold">{sourceDataFromCatalog.displayName} overview</div>}
            key="overview"
          >
            {sourceDataFromCatalog.documentation.overview}
          </Collapse.Panel>
          <Collapse.Panel header={<div className="uppercase font-bold">How to connect</div>} key="connection">
            {sourceDataFromCatalog.documentation.connection}
          </Collapse.Panel>
        </Collapse>
      </div>
    </Drawer>
  )
}
Example #7
Source File: index.tsx    From scorpio-h5-design with MIT License 6 votes vote down vote up 
export default function BaseConfig() {

  return (
    <div className="design-config-base">
      <Collapse defaultActiveKey={[1, 2, 3, 4, 5]}>
        <Panel header="布局" key={1}>
          <Descriptions column={1}>
            <Descriptions.Item label="边距">
              <MarginPadding />
            </Descriptions.Item>
          </Descriptions>
        </Panel>
        <Panel header="文字" key={2}>
          <Font />
        </Panel>
        <Panel header="背景" key={3}>
          <Background />
        </Panel>
        <Panel header="边框" key={4}>
          <Border />
        </Panel>
        <Panel header="阴影" key={5}>
          <Shadow />
        </Panel>
      </Collapse>
    </div>
  );
}
Example #8
Source File: index.tsx    From fe-v5 with Apache License 2.0 6 votes vote down vote up 
export default function Demo() {
  const [xCluster, setXCluster] = useState('Default');
  return (
    <div>
      <Collapse defaultActiveKey='3'>
        <Panel header='PromqlEditor' key='1'>
          <Row style={{ marginBottom: 20 }}>
            <p>PromqlEditor 的自动闭合及联想功能不支持动态切换集群，xCluster变化后自己销毁并重新初始化组件</p>
            <PromqlEditor style={{ width: '100%' }} xCluster={xCluster} />
          </Row>
        </Panel>
        <Panel header='G2PieChart' key='2'>
          <Row>
            <ColumnSelect />
          </Row>
        </Panel>
        <Panel header='Honeycomb' key='3'>
          <Row>
            <div style={{ height: 500, width: '100%' }}>{/* <Honeycomb data={honeyCombData} /> */}</div>
          </Row>
        </Panel>
      </Collapse>
    </div>
  );
}
Example #9
Source File: ChartSettingConfigPanel.tsx    From datart with Apache License 2.0 6 votes vote down vote up 
ChartSettingConfigPanel: FC<{
  configs?: ChartStyleConfig[];
  dataConfigs?: ChartDataConfig[];
  onChange: (
    ancestors: number[],
    config: ChartStyleConfig,
    needRefresh?: boolean,
  ) => void;
}> = memo(
  ({ configs, dataConfigs, onChange }) => {
    const t = useI18NPrefix(`viz.palette.setting`);

    return (
      <Collapse className="datart-config-panel" ghost>
        {configs?.map((c, index) => (
          <Collapse.Panel header={t(c.label, true)} key={c.key}>
            <GroupLayout
              ancestors={[index]}
              mode={
                c.comType === 'group'
                  ? FormGroupLayoutMode.INNER
                  : FormGroupLayoutMode.OUTER
              }
              data={c}
              translate={t}
              dataConfigs={dataConfigs}
              onChange={onChange}
              flatten
            />
          </Collapse.Panel>
        ))}
      </Collapse>
    );
  },
  (prev, next) =>
    prev.configs === next.configs && prev.dataConfigs === next.dataConfigs,
)
Example #10
Source File: index.tsx    From nebula-studio with Apache License 2.0 6 votes vote down vote up 
GQLCodeMirror = (props: { currentGQL: string; option?: IOptions }) => {
  const options = {
    keyMap: 'sublime',
    fullScreen: true,
    mode: 'nebula',
    readOnly: true,
    ...props.option,
  };
  return (
    <Collapse className={styles.exportGql}>
      <Panel header={intl.get('common.exportNGQL')} key="ngql">
        <CodeMirror value={props.currentGQL} options={options} height="80px" />
      </Panel>
    </Collapse>
  );
}
Example #11
Source File: RowCollapse.tsx    From pcap2socks-gui with MIT License 6 votes vote down vote up 
render() {
    return (
      <Row gutter={[this.props.gutter, this.props.tail ? 0 : this.props.gutter]}>
        <Col span={24}>
          <Collapse accordion={this.props.accordion} ghost>
            {() => {
              if (this.props.panels) {
                this.props.panels.map((value, index) => {
                  return (
                    <Panel key={index} header={value.label}>
                      {value.text}
                    </Panel>
                  );
                });
              }
            }}
          </Collapse>
        </Col>
      </Row>
    );
  }
Example #12
Source File: InternalMetricsTab.tsx    From posthog-foss with MIT License 5 votes vote down vote up 
export function InternalMetricsTab(): JSX.Element {
    const { openSections, systemStatus, queries, queriesLoading, showAnalyzeQueryButton } = useValues(systemStatusLogic)
    const { setOpenSections, loadQueries } = useActions(systemStatusLogic)

    const [showIdle, setShowIdle] = useState(false)
    const postgresQueries = useMemo(
        () => queries?.postgres_running?.filter(({ state }) => showIdle || state !== 'idle'),
        [showIdle, queries]
    )

    const dashboard = systemStatus?.internal_metrics.clickhouse

    const reloadQueries = (e: React.MouseEvent): void => {
        e.stopPropagation()
        loadQueries()
    }

    return (
        <Card>
            <Collapse activeKey={openSections} onChange={(keys) => setOpenSections(keys as string[])}>
                {dashboard ? (
                    <Collapse.Panel header="Dashboards" key="0">
                        <Dashboard id={dashboard.id.toString()} shareToken={dashboard.share_token} internal />
                    </Collapse.Panel>
                ) : null}
                <Collapse.Panel header="PostgreSQL - currently running queries" key="1">
                    <div className="mb float-right">
                        <Checkbox
                            checked={showIdle}
                            onChange={(e) => {
                                setShowIdle(e.target.checked)
                            }}
                        >
                            Show idle queries
                        </Checkbox>
                        <Button style={{ marginLeft: 8 }} onClick={reloadQueries}>
                            <ReloadOutlined /> Reload Queries
                        </Button>
                    </div>
                    <QueryTable queries={postgresQueries} loading={queriesLoading} />
                </Collapse.Panel>
                {queries?.clickhouse_running != undefined ? (
                    <Collapse.Panel header="Clickhouse - currently running queries" key="2">
                        <div className="mb float-right">
                            <Button style={{ marginLeft: 8 }} onClick={reloadQueries}>
                                <ReloadOutlined /> Reload Queries
                            </Button>
                        </div>
                        <QueryTable
                            queries={queries?.clickhouse_running}
                            loading={queriesLoading}
                            showAnalyze={showAnalyzeQueryButton}
                        />
                    </Collapse.Panel>
                ) : null}
                {queries?.clickhouse_slow_log != undefined ? (
                    <Collapse.Panel header="Clickhouse - slow query log (past 6 hours)" key="3">
                        <div className="mb float-right">
                            <Button style={{ marginLeft: 8 }} onClick={reloadQueries}>
                                <ReloadOutlined /> Reload Queries
                            </Button>
                        </div>
                        <QueryTable
                            queries={queries?.clickhouse_slow_log}
                            loading={queriesLoading}
                            showAnalyze={showAnalyzeQueryButton}
                        />
                    </Collapse.Panel>
                ) : null}
            </Collapse>

            <AnalyzeQueryModal />
        </Card>
    )
}
Example #13
Source File: ComponentBank.tsx    From dnde with GNU General Public License v3.0 5 votes vote down vote up 
{ Panel } = Collapse
Example #14
Source File: index.tsx    From antdp with MIT License 5 votes vote down vote up 
Panel = Collapse.Panel
Example #15
Source File: panel-body.tsx    From XFlow with MIT License 5 votes vote down vote up 
{ Panel } = Collapse
Example #16
Source File: index.tsx    From brick-design with MIT License 5 votes vote down vote up 
{ Panel } = Collapse
Example #17
Source File: GraphFilterView.tsx    From dendron with GNU Affero General Public License v3.0 5 votes vote down vote up 
{ Panel } = Collapse
Example #18
Source File: ConfigurationController.tsx    From yugong with MIT License 5 votes vote down vote up 
{ Panel } = Collapse
Example #19
Source File: sla-select.tsx    From erda-ui with GNU Affero General Public License v3.0 5 votes vote down vote up 
{ Panel } = Collapse
Example #20
Source File: index.tsx    From imove with MIT License 5 votes vote down vote up 
{ Panel } = Collapse
Example #21
Source File: RuleItemPanel.tsx    From jetlinks-ui-antd with MIT License 5 votes vote down vote up 
{ Panel } = Collapse
Example #22
Source File: ErrorCard.tsx    From jitsu with MIT License 5 votes vote down vote up 
ErrorCard: FC<ErrorCardProps> = ({
  title,
  icon,
  error,
  description,
  descriptionWithContacts,
  stackTrace,
  className,
  onReload,
}) => {
  if (description === undefined && error !== undefined) {
    description = error.message
  }
  if (stackTrace === undefined && error !== undefined) {
    stackTrace = error.stack
  }
  return (
    <Card bordered={false} className={cn(className, "max-h-full")}>
      <Card.Meta
        avatar={icon || <ExclamationCircleOutlined className={styles.icon} />}
        title={title || "An Error Occured"}
        description={
          <>
            <Fragment key="description">
              {description !== undefined ? (
                description
              ) : (
                <span>
                  {descriptionWithContacts !== undefined ? (
                    <>
                      {descriptionWithContacts}
                      {descriptionWithContacts && <br />}
                    </>
                  ) : (
                    <>
                      {"The application component crashed because of an internal error."}
                      <br />
                    </>
                  )}
                  {"Please, try to reload the page first and if the problem is still present contact us at"}{" "}
                  <Typography.Paragraph copyable={{ tooltips: false }} className="inline">
                    {"[email protected]"}
                  </Typography.Paragraph>{" "}
                  {"and our engineers will fix the problem asap."}
                </span>
              )}
            </Fragment>
            {stackTrace && (
              <Collapse key="stack-trace" bordered={false} className={`mt-2 ${styles.stackTraceCard}`}>
                <Collapse.Panel key={1} header="Error Stack Trace">
                  <div className="overflow-y-auto">
                    <Typography.Paragraph
                      copyable={{
                        text: stackTrace,
                        icon: [<CopyOutlined />, <CheckOutlined />],
                      }}
                      className={`flex flex-row ${styles.errorStackContainer}`}
                    >
                      <pre className="text-xs">{stackTrace}</pre>
                    </Typography.Paragraph>
                  </div>
                </Collapse.Panel>
              </Collapse>
            )}
            {onReload && (
              <div key="reload-button" className="flex justify-center items-center mt-2">
                <Button type="default" onClick={onReload} icon={<ReloadOutlined />}>{`Reload`}</Button>
              </div>
            )}
          </>
        }
      />
    </Card>
  )
}
Example #23
Source File: index.tsx    From scorpio-h5-design with MIT License 5 votes vote down vote up 
{ Panel } = Collapse
Example #24
Source File: wallet.tsx    From metaplex with Apache License 2.0 5 votes vote down vote up 
{ Panel } = Collapse
Example #25
Source File: index.tsx    From fe-v5 with Apache License 2.0 5 votes vote down vote up 
{ Panel } = Collapse
Example #26
Source File: GroupLayout.tsx    From datart with Apache License 2.0 5 votes vote down vote up 
{ Panel } = Collapse
Example #27
Source File: TAQueueListSection.tsx    From office-hours with GNU General Public License v3.0 5 votes vote down vote up 
/**
 * A single section of the list. ie. WaitingInLine
 */
export default function TAQueueListSection({
  title,
  questions,
  onClickQuestion,
  selectedQuestionId,
  showNumbers = false,
  collapsible = false,
  emptyDisplay = null,
}: {
  title: ReactNode;
  questions: Question[];
  onClickQuestion: (questionId: number) => void;
  selectedQuestionId?: number;
  showNumbers?: boolean;
  collapsible?: boolean;
  emptyDisplay?: ReactElement;
}): ReactElement {
  if (questions.length === 0 && !emptyDisplay) {
    return null;
  }
  return (
    <OverrideCollapse>
      <Collapse defaultActiveKey={[1]} ghost expandIconPosition="right">
        <Collapse.Panel
          style={{ padding: 0 }}
          key={1}
          header={
            <Title>
              {title}
              <span>{` (${questions.length})`}</span>
            </Title>
          }
          showArrow={collapsible}
          disabled={!collapsible}
        >
          {questions.length === 0 ? (
            emptyDisplay
          ) : (
            <div>
              {questions.map((q, i) => (
                <TAQueueListItem
                  key={q.id}
                  question={q}
                  index={showNumbers && i + 1}
                  selected={selectedQuestionId === q.id}
                  onClick={() => onClickQuestion(q.id)}
                />
              ))}
            </div>
          )}
        </Collapse.Panel>
      </Collapse>
    </OverrideCollapse>
  );
}
Example #28
Source File: CollectionSider.tsx    From Protoman with MIT License 5 votes vote down vote up 
{ Panel } = Collapse
Example #29
Source File: Entries.tsx    From subscan-multisig-react with Apache License 2.0 5 votes vote down vote up 
{ Panel } = Collapse