@ant-design/icons#UpCircleTwoTone TypeScript Examples

YakBatchExecutors: React.FC<YakBatchExecutorsProp> = (props) => {
    const [tabList, setTabList] = useState<BugInfoProps[]>([
        {
            key: "struts-0",
            title: "Struts-1"
        }
    ])
    const [currentTabKey, setCurrentTabKey] = useState("struts-0")
    const [listCount, setListCount] = useState<number>(2)
    const [collapsed, setCollapsed] = useState<boolean>(false)
    const [menuHeight, setMenuHeight] = useState<number>(400)
    // 自定义POC种类
    const [loading, setLoading] = useState<boolean>(false)
    const [extendList, setExtendList] = useState<BugInfoProps[]>([])
    // 编辑自定义POC种类弹框
    const [visible, setVisible] = useState<boolean>(false)
    const [pocParams, setPocParams] = useState<BugInfoProps>({key: "", title: ""})
    const [pocList, setPocList] = useState<{total: number; data: string[]}>({total: 0, data: []})
    const [listLoading, setListLoading] = useState<boolean>(false)
    const [editInfo, setEditInfo] = useState<BugInfoProps>()

    const clearTab = (id: any, key: any) => {
        const kind = `${id}`.split("-")[0]
        let index
        for (let i in tabList) if (tabList[i].key === id) index = i
        switch (key) {
            case "all":
                setCurrentTabKey("")
                setTabList([])
                return
            case "route":
                const tabs = tabList.filter((item) => item.key.split("-")[0] !== kind)
                setCurrentTabKey(tabs.length !== 0 ? tabs[0].key : "")
                setTabList(tabs)
                break
            case "other":
                const tabInfo = cloneDeep(tabList[index])
                setCurrentTabKey(`${tabInfo.key}-0`)
                setTabList([tabInfo])
                break
        }
    }

    useEffect(() => {
        setMenuHeight(window.innerHeight - 350 >= 200 ? window.innerHeight - 350 : 200)
        let timer: any = null
        window.onresize = () => {
            if (timer) clearTimeout(timer)
            timer = setTimeout(() => {
                setMenuHeight(window.innerHeight - 350 >= 200 ? window.innerHeight - 350 : 200)
            }, 100)
        }
    }, [])

    const addTab = useMemoizedFn((res: any) => {
        const {type = [], data = ""} = res

        setTabList(tabList.concat(type.map((item, index) => {
            item.key = `${item.key}-${listCount + index}`
            item.title = `${item.title}-${listCount + index}`
            item.sendTarget = data
            return item
        })))
        setListCount(listCount + type.length)
        setCurrentTabKey(`${type[type.length - 1].key}`)
    })

    useEffect(() => {
        ipcRenderer.on("fetch-send-to-bug-test", (e, res: any) => addTab(res))
        return () => ipcRenderer.removeAllListeners("fetch-send-to-bug-test")
    }, [])

    const searchPoc = debounce(
        useMemoizedFn((keyword?: string, page?: number) => {
            setListLoading(true)
            if (keyword) {
                queryYakScriptList(
                    "nuclei",
                    (i: YakScript[], total) => {
                        setPocList({total: total || 0, data: i.map((info) => info.ScriptName)})
                    },
                    () => setTimeout(() => setListLoading(false), 300),
                    10,
                    page || 1,
                    keyword
                )
            } else {
                setPocList({total: 0, data: []})
            }
        }),
        500
    )
    const editPocKind = useMemoizedFn((info: BugInfoProps) => {
        setEditInfo(info)
        setPocParams({key: info.key, title: info.title})
        searchPoc(info.key)
    })
    const delPocKind = useMemoizedFn((index: number) => {
        if (extendList.length !== 0) {
            const arr = cloneDeep(extendList)
            arr.splice(index, 1)
            setExtendList(arr)
            saveExtendList(arr)
        }
    })
    const savePocKind = useMemoizedFn(() => {
        if (!editInfo && !pocParams.key && !pocParams.title) {
            setVisible(false)
            return
        }
        if (!pocParams.key || !pocParams.title) {
            failed("请填写标题和关键词后再次点击")
            return
        }

        let arr = cloneDeep(extendList)
        if (editInfo) {
            for (let i of arr) {
                if (i.key === editInfo.key && i.title === editInfo.title) {
                    i.key = pocParams.key
                    i.title = pocParams.title
                }
            }
        }
        if (!editInfo) arr = arr.concat([pocParams])

        setExtendList(arr)
        saveExtendList(arr)
        setVisible(false)
        clearModal()
    })
    const clearModal = useMemoizedFn(() => {
        setPocParams({key: "", title: ""})
        setEditInfo(undefined)
        setPocList({total: 0, data: []})
    })

    const saveExtendList = useMemoizedFn((arr) => {
        ipcRenderer.invoke("set-value", CustomBugList, JSON.stringify(arr))
    })
    useEffect(() => {
        setLoading(true)
        ipcRenderer
            .invoke("get-value", CustomBugList)
            .then((res: any) => {
                setExtendList(res ? JSON.parse(res) : [])
            })
            .catch(() => {})
            .finally(() => {
                setTimeout(() => setLoading(false), 300)
            })
    }, [])

    return (
        <div style={{width: "100%", height: "100%"}}>
            <Tabs
                className={"bug-test-executor"}
                type='editable-card'
                hideAdd={true}
                size='small'
                renderTabBar={(props, TabBarDefault) => {
                    return TabBarMenu(props, TabBarDefault, MenuList, clearTab)
                }}
                tabBarExtraContent={{
                    left: (
                        <div style={{margin: "0 5px", fontSize: 20}}>
                            <Popover
                                placement='bottomLeft'
                                trigger='click'
                                visible={!collapsed}
                                content={
                                    <div style={{height: menuHeight}}>
                                        <div style={{height: menuHeight - 30}}>
                                            <AutoSpin spinning={loading}>
                                                <Menu
                                                    style={{height: "100%", overflow: "hidden auto"}}
                                                    mode='inline'
                                                    selectedKeys={[]}
                                                    onClick={({key}) => {
                                                        const title = BugList.concat(extendList).filter(
                                                            (item) => item.key === key
                                                        )[0].title
                                                        const tabInfo: BugInfoProps = {
                                                            key: `${key}-${listCount}`,
                                                            title: `${title}-${listCount}`
                                                        }
                                                        setCurrentTabKey(tabInfo.key)
                                                        setTabList(tabList.concat([tabInfo]))
                                                        setListCount(listCount + 1)
                                                    }}
                                                >
                                                    {BugList.concat(extendList).map((item, index) => (
                                                        <Item key={item.key} title={item.title}>
                                                            {item.title}
                                                        </Item>
                                                    ))}
                                                </Menu>
                                            </AutoSpin>
                                        </div>
                                        <div style={{textAlign: "center"}}>
                                            <Button
                                                style={{height: 30}}
                                                type='link'
                                                onClick={() => {
                                                    setVisible(true)
                                                }}
                                            >
                                                配置自定义类型
                                            </Button>
                                        </div>
                                    </div>
                                }
                                onVisibleChange={(value) => setCollapsed(!value)}
                            >
                                {collapsed ? (
                                    <UpCircleTwoTone
                                        onClick={() => {
                                            setCollapsed(false)
                                        }}
                                    />
                                ) : (
                                    <DownCircleTwoTone
                                        onClick={() => {
                                            setCollapsed(true)
                                        }}
                                    />
                                )}
                            </Popover>
                        </div>
                    )
                }}
                activeKey={currentTabKey}
                onChange={setCurrentTabKey}
                onEdit={(key: any, event: string) => {
                    switch (event) {
                        case "remove":
                            const tabs = cloneDeep(tabList)
                            for (let index in tabs)
                                if (tabs[index].key === key) {
                                    tabs.splice(index, 1)
                                    if (tabs.length !== 0) setCurrentTabKey(tabs[0].key)
                                    setTabList(tabs)
                                    return
                                }
                    }
                }}
            >
                {tabList.map((item, index) => {
                    return (
                        <TabPane tab={item.title} key={item.key}>
                            <BugTestExecutor keyword={item.key} verbose={item.title} sendTarget={item?.sendTarget}></BugTestExecutor>
                        </TabPane>
                    )
                })}
            </Tabs>
            <Modal
                title='自定义POC种类'
                width={625}
                visible={visible}
                maskClosable={false}
                okText={editInfo ? "修改" : "新增"}
                cancelText='取消'
                onCancel={() => {
                    setVisible(false)
                    clearModal()
                }}
                onOk={savePocKind}
            >
                <div className='extend-info-body'>
                    <div className='left-body'>
                        <div style={{textAlign: "left"}}>
                            <Button className='add-btn' type='link' onClick={clearModal}>
                                新增
                            </Button>
                        </div>
                        <List
                            className='poc-list'
                            size='small'
                            dataSource={extendList}
                            rowKey={(row) => row.key}
                            renderItem={(item, index) => (
                                <List.Item style={{padding: 0}}>
                                    <div className='list-opt'>
                                        <Text style={{lineHeight: "32px", maxWidth: 165}} ellipsis={{tooltip: true}}>
                                            {item.title}
                                        </Text>
                                        <div>
                                            <Button
                                                style={{padding: "4px 0"}}
                                                type='link'
                                                icon={<EditOutlined />}
                                                onClick={() => editPocKind(item)}
                                            />
                                            <Button
                                                style={{padding: "4px 0"}}
                                                type='link'
                                                danger
                                                icon={<DeleteOutlined />}
                                                onClick={() => delPocKind(index)}
                                            />
                                        </div>
                                    </div>
                                </List.Item>
                            )}
                        />
                    </div>
                    <Divider type='vertical' style={{height: "auto"}} />
                    <div className='right-body'>
                        <Form labelCol={{span: 6}}>
                            <Form.Item label='标题'>
                                <Input
                                    placeholder='POC列表展示内容'
                                    value={pocParams.title}
                                    allowClear
                                    onChange={(e) => setPocParams({...pocParams, title: e.target.value})}
                                />
                            </Form.Item>
                            <Form.Item label='关键词'>
                                <Input
                                    placeholder='YAML POC标题的关键词'
                                    value={pocParams.key}
                                    allowClear
                                    onChange={(e) => {
                                        setPocParams({...pocParams, key: e.target.value})
                                        searchPoc(e.target.value)
                                    }}
                                />
                            </Form.Item>
                            <Form.Item style={{marginBottom: 0}}>
                                <List
                                    size='small'
                                    loading={listLoading}
                                    dataSource={pocList.data}
                                    pagination={
                                        pocList.total === 0
                                            ? false
                                            : {
                                                  size: "small",
                                                  total: pocList.total,
                                                  showTotal: (total) => <span>{`共${total}个`}</span>,
                                                  showSizeChanger: false,
                                                  onChange: (page) => searchPoc(pocParams.key, page)
                                              }
                                    }
                                    rowKey={(row) => row}
                                    renderItem={(item) => (
                                        <List.Item>
                                            <Text style={{maxWidth: 290}} ellipsis={{tooltip: true}}>
                                                {item}
                                            </Text>
                                        </List.Item>
                                    )}
                                ></List>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </Modal>
        </div>
    )
}