@ant-design/icons#UpCircleTwoTone TypeScript Examples

The following examples show how to use @ant-design/icons#UpCircleTwoTone. 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: YakBatchExecutors.tsx    From yakit with GNU Affero General Public License v3.0 4 votes vote down vote up
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>
    )
}