@ant-design/icons#ArrowsAltOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#ArrowsAltOutlined.
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: TaskNameCell.tsx From RareCamp with Apache License 2.0 | 5 votes |
|
export default function TaskNameCell({ task, programId }) {
const [showEdit, setShowEdit] = useState(false)
const taskDetailsLink = `/tasks/${task.projectId}/${task.taskId}?programId=${programId}`
const editTaskNameMutation = useEditTaskMutation({
taskId: task.taskId,
projectId: task.projectId,
programId,
})
const [nameEditForm] = Form.useForm()
const submitForm = ({ name }) => {
editTaskNameMutation.mutate({ ...task, name })
}
return (
<td
className="ant-table-cell"
onFocus={() => setShowEdit(true)}
onBlur={() => setShowEdit(false)}
onMouseOver={() => setShowEdit(true)}
onMouseOut={() => setShowEdit(false)}
>
<div style={{ display: showEdit ? 'block' : 'none' }}>
<EditTask task={task} programId={programId} />
</div>
<Form
name={`edit_name_${task.taskId}`}
initialValues={{ name: task.name }}
form={nameEditForm}
onFinish={submitForm}
>
<EditTaskButton
name="name"
required={false}
rules={[
{
required: true,
message: 'Task name can not be empty',
},
]}
>
<Input
disabled={editTaskNameMutation.isLoading}
suffix={
editTaskNameMutation.isLoading ? (
<LoadingOutlined
style={{ color: 'rgba(0,0,0,.45)' }}
/>
) : null
}
/>
</EditTaskButton>
</Form>
<Link href={taskDetailsLink}>
<TaskDetailsButton
cssdisplay={showEdit ? 'inherit' : 'none'}
icon={<ArrowsAltOutlined />}
>
Task Details
</TaskDetailsButton>
</Link>
</td>
)
}
Example #2
| Source File: Icon.tsx From html2sketch with MIT License | 4 votes |
|
IconSymbol: FC = () => {
return (
<Row>
{/*<CaretUpOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
{/*/>*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
{/*/>*/}
{/*<StepBackwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
{/*<StepForwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
<StepForwardOutlined />
<ShrinkOutlined />
<ArrowsAltOutlined />
<DownOutlined />
<UpOutlined />
<LeftOutlined />
<RightOutlined />
<CaretUpOutlined />
<CaretDownOutlined />
<CaretLeftOutlined />
<CaretRightOutlined />
<VerticalAlignTopOutlined />
<RollbackOutlined />
<FastBackwardOutlined />
<FastForwardOutlined />
<DoubleRightOutlined />
<DoubleLeftOutlined />
<VerticalLeftOutlined />
<VerticalRightOutlined />
<VerticalAlignMiddleOutlined />
<VerticalAlignBottomOutlined />
<ForwardOutlined />
<BackwardOutlined />
<EnterOutlined />
<RetweetOutlined />
<SwapOutlined />
<SwapLeftOutlined />
<SwapRightOutlined />
<ArrowUpOutlined />
<ArrowDownOutlined />
<ArrowLeftOutlined />
<ArrowRightOutlined />
<LoginOutlined />
<LogoutOutlined />
<MenuFoldOutlined />
<MenuUnfoldOutlined />
<BorderBottomOutlined />
<BorderHorizontalOutlined />
<BorderInnerOutlined />
<BorderOuterOutlined />
<BorderLeftOutlined />
<BorderRightOutlined />
<BorderTopOutlined />
<BorderVerticleOutlined />
<PicCenterOutlined />
<PicLeftOutlined />
<PicRightOutlined />
<RadiusBottomleftOutlined />
<RadiusBottomrightOutlined />
<RadiusUpleftOutlined />
<RadiusUprightOutlined />
<FullscreenOutlined />
<FullscreenExitOutlined />
<QuestionOutlined />
<PauseOutlined />
<MinusOutlined />
<PauseCircleOutlined />
<InfoOutlined />
<CloseOutlined />
<ExclamationOutlined />
<CheckOutlined />
<WarningOutlined />
<IssuesCloseOutlined />
<StopOutlined />
<EditOutlined />
<CopyOutlined />
<ScissorOutlined />
<DeleteOutlined />
<SnippetsOutlined />
<DiffOutlined />
<HighlightOutlined />
<AlignCenterOutlined />
<AlignLeftOutlined />
<AlignRightOutlined />
<BgColorsOutlined />
<BoldOutlined />
<ItalicOutlined />
<UnderlineOutlined />
<StrikethroughOutlined />
<RedoOutlined />
<UndoOutlined />
<ZoomInOutlined />
<ZoomOutOutlined />
<FontColorsOutlined />
<FontSizeOutlined />
<LineHeightOutlined />
<SortAscendingOutlined />
<SortDescendingOutlined />
<DragOutlined />
<OrderedListOutlined />
<UnorderedListOutlined />
<RadiusSettingOutlined />
<ColumnWidthOutlined />
<ColumnHeightOutlined />
<AreaChartOutlined />
<PieChartOutlined />
<BarChartOutlined />
<DotChartOutlined />
<LineChartOutlined />
<RadarChartOutlined />
<HeatMapOutlined />
<FallOutlined />
<RiseOutlined />
<StockOutlined />
<BoxPlotOutlined />
<FundOutlined />
<SlidersOutlined />
<AndroidOutlined />
<AppleOutlined />
<WindowsOutlined />
<IeOutlined />
<ChromeOutlined />
<GithubOutlined />
<AliwangwangOutlined />
<DingdingOutlined />
<WeiboSquareOutlined />
<WeiboCircleOutlined />
<TaobaoCircleOutlined />
<Html5Outlined />
<WeiboOutlined />
<TwitterOutlined />
<WechatOutlined />
<AlipayCircleOutlined />
<TaobaoOutlined />
<SkypeOutlined />
<FacebookOutlined />
<CodepenOutlined />
<CodeSandboxOutlined />
<AmazonOutlined />
<GoogleOutlined />
<AlipayOutlined />
<AntDesignOutlined />
<AntCloudOutlined />
<ZhihuOutlined />
<SlackOutlined />
<SlackSquareOutlined />
<BehanceSquareOutlined />
<DribbbleOutlined />
<DribbbleSquareOutlined />
<InstagramOutlined />
<YuqueOutlined />
<AlibabaOutlined />
<YahooOutlined />
<RedditOutlined />
<SketchOutlined />
<AccountBookOutlined />
<AlertOutlined />
<ApartmentOutlined />
<ApiOutlined />
<QqOutlined />
<MediumWorkmarkOutlined />
<GitlabOutlined />
<MediumOutlined />
<GooglePlusOutlined />
<AppstoreAddOutlined />
<AppstoreOutlined />
<AudioOutlined />
<AudioMutedOutlined />
<AuditOutlined />
<BankOutlined />
<BarcodeOutlined />
<BarsOutlined />
<BellOutlined />
<BlockOutlined />
<BookOutlined />
<BorderOutlined />
<BranchesOutlined />
<BuildOutlined />
<BulbOutlined />
<CalculatorOutlined />
<CalendarOutlined />
<CameraOutlined />
<CarOutlined />
<CarryOutOutlined />
<CiCircleOutlined />
<CiOutlined />
<CloudOutlined />
<ClearOutlined />
<ClusterOutlined />
<CodeOutlined />
<CoffeeOutlined />
<CompassOutlined />
<CompressOutlined />
<ContactsOutlined />
<ContainerOutlined />
<ControlOutlined />
<CopyrightCircleOutlined />
<CopyrightOutlined />
<CreditCardOutlined />
<CrownOutlined />
<CustomerServiceOutlined />
<DashboardOutlined />
<DatabaseOutlined />
<DeleteColumnOutlined />
<DeleteRowOutlined />
<DisconnectOutlined />
<DislikeOutlined />
<DollarCircleOutlined />
<DollarOutlined />
<DownloadOutlined />
<EllipsisOutlined />
<EnvironmentOutlined />
<EuroCircleOutlined />
<EuroOutlined />
<ExceptionOutlined />
<ExpandAltOutlined />
<ExpandOutlined />
<ExperimentOutlined />
<ExportOutlined />
<EyeOutlined />
<FieldBinaryOutlined />
<FieldNumberOutlined />
<FieldStringOutlined />
<DesktopOutlined />
<DingtalkOutlined />
<FileAddOutlined />
<FileDoneOutlined />
<FileExcelOutlined />
<FileExclamationOutlined />
<FileOutlined />
<FileImageOutlined />
<FileJpgOutlined />
<FileMarkdownOutlined />
<FilePdfOutlined />
<FilePptOutlined />
<FileProtectOutlined />
<FileSearchOutlined />
<FileSyncOutlined />
<FileTextOutlined />
<FileUnknownOutlined />
<FileWordOutlined />
<FilterOutlined />
<FireOutlined />
<FlagOutlined />
<FolderAddOutlined />
<FolderOutlined />
<FolderOpenOutlined />
<ForkOutlined />
<FormatPainterOutlined />
<FrownOutlined />
<FunctionOutlined />
<FunnelPlotOutlined />
<GatewayOutlined />
<GifOutlined />
<GiftOutlined />
<GlobalOutlined />
<GoldOutlined />
<GroupOutlined />
<HddOutlined />
<HeartOutlined />
<HistoryOutlined />
<HomeOutlined />
<HourglassOutlined />
<IdcardOutlined />
<ImportOutlined />
<InboxOutlined />
<InsertRowAboveOutlined />
<InsertRowBelowOutlined />
<InsertRowLeftOutlined />
<InsertRowRightOutlined />
<InsuranceOutlined />
<InteractionOutlined />
<KeyOutlined />
<LaptopOutlined />
<LayoutOutlined />
<LikeOutlined />
<LineOutlined />
<LinkOutlined />
<Loading3QuartersOutlined />
<LoadingOutlined />
<LockOutlined />
<MailOutlined />
<ManOutlined />
<MedicineBoxOutlined />
<MehOutlined />
<MenuOutlined />
<MergeCellsOutlined />
<MessageOutlined />
<MobileOutlined />
<MoneyCollectOutlined />
<MonitorOutlined />
<MoreOutlined />
<NodeCollapseOutlined />
<NodeExpandOutlined />
<NodeIndexOutlined />
<NotificationOutlined />
<NumberOutlined />
<PaperClipOutlined />
<PartitionOutlined />
<PayCircleOutlined />
<PercentageOutlined />
<PhoneOutlined />
<PictureOutlined />
<PoundCircleOutlined />
<PoundOutlined />
<PoweroffOutlined />
<PrinterOutlined />
<ProfileOutlined />
<ProjectOutlined />
<PropertySafetyOutlined />
<PullRequestOutlined />
<PushpinOutlined />
<QrcodeOutlined />
<ReadOutlined />
<ReconciliationOutlined />
<RedEnvelopeOutlined />
<ReloadOutlined />
<RestOutlined />
<RobotOutlined />
<RocketOutlined />
<SafetyCertificateOutlined />
<SafetyOutlined />
<ScanOutlined />
<ScheduleOutlined />
<SearchOutlined />
<SecurityScanOutlined />
<SelectOutlined />
<SendOutlined />
<SettingOutlined />
<ShakeOutlined />
<ShareAltOutlined />
<ShopOutlined />
<ShoppingCartOutlined />
<ShoppingOutlined />
<SisternodeOutlined />
<SkinOutlined />
<SmileOutlined />
<SolutionOutlined />
<SoundOutlined />
<SplitCellsOutlined />
<StarOutlined />
<SubnodeOutlined />
<SyncOutlined />
<TableOutlined />
<TabletOutlined />
<TagOutlined />
<TagsOutlined />
<TeamOutlined />
<ThunderboltOutlined />
<ToTopOutlined />
<ToolOutlined />
<TrademarkCircleOutlined />
<TrademarkOutlined />
<TransactionOutlined />
<TrophyOutlined />
<UngroupOutlined />
<UnlockOutlined />
<UploadOutlined />
<UsbOutlined />
<UserAddOutlined />
<UserDeleteOutlined />
<UserOutlined />
<UserSwitchOutlined />
<UsergroupAddOutlined />
<UsergroupDeleteOutlined />
<VideoCameraOutlined />
<WalletOutlined />
<WifiOutlined />
<BorderlessTableOutlined />
<WomanOutlined />
<BehanceOutlined />
<DropboxOutlined />
<DeploymentUnitOutlined />
<UpCircleOutlined />
<DownCircleOutlined />
<LeftCircleOutlined />
<RightCircleOutlined />
<UpSquareOutlined />
<DownSquareOutlined />
<LeftSquareOutlined />
<RightSquareOutlined />
<PlayCircleOutlined />
<QuestionCircleOutlined />
<PlusCircleOutlined />
<PlusSquareOutlined />
<MinusSquareOutlined />
<MinusCircleOutlined />
<InfoCircleOutlined />
<ExclamationCircleOutlined />
<CloseCircleOutlined />
<CloseSquareOutlined />
<CheckCircleOutlined />
<CheckSquareOutlined />
<ClockCircleOutlined />
<FormOutlined />
<DashOutlined />
<SmallDashOutlined />
<YoutubeOutlined />
<CodepenCircleOutlined />
<AliyunOutlined />
<PlusOutlined />
<LinkedinOutlined />
<AimOutlined />
<BugOutlined />
<CloudDownloadOutlined />
<CloudServerOutlined />
<CloudSyncOutlined />
<CloudUploadOutlined />
<CommentOutlined />
<ConsoleSqlOutlined />
<EyeInvisibleOutlined />
<FileGifOutlined />
<DeliveredProcedureOutlined />
<FieldTimeOutlined />
<FileZipOutlined />
<FolderViewOutlined />
<FundProjectionScreenOutlined />
<FundViewOutlined />
<MacCommandOutlined />
<PlaySquareOutlined />
<OneToOneOutlined />
<RotateLeftOutlined />
<RotateRightOutlined />
<SaveOutlined />
<SwitcherOutlined />
<TranslationOutlined />
<VerifiedOutlined />
<VideoCameraAddOutlined />
<WhatsAppOutlined />
{/*</Col>*/}
</Row>
);
}
Example #3
| Source File: CodecPage.tsx From yakit with GNU Affero General Public License v3.0 | 4 votes |
|
CodecPage: React.FC<CodecPageProp> = (props) => {
const [text, setText] = useState("")
const [result, setResult] = useState("")
const [loading, setLoading] = useState(true)
const [leftWidth, setLeftWidth] = useState<boolean>(false)
const [rightWidth, setRightWidth] = useState<boolean>(false)
const [leftLine, setLeftLine] = useState<boolean>(true)
const [rightLine, setRightLine] = useState<boolean>(false)
const [codecType, setCodecType] = useState<CodecType>();
const [params, setParams] = useState<YakExecutorParam[]>([]);
const [codecPlugin, setCodecPlugin] = useState<CodecType[]>([]);
const [pluginLoading, setPluginLoading] = useState<boolean>(false)
const [pluginVisible, setPluginVisible] = useState<boolean>(false)
let timer: any = null
const codec = (t: string, params?: YakExecutorParam[], isYakScript?: boolean) => {
if (!t) {
failed("BUG: 空的解码类型")
return
}
if (!text && !isYakScript) {
failed("左侧编辑器内容为空，请输入内容后重试!")
return
}
ipcRenderer
.invoke("Codec", {Type: t, Text: text, Params: params || [], ScriptName: isYakScript ? t : ""})
.then((res) => {
onHandledResult(res?.Result || "")
})
.catch((err) => {
onHandleError(`${err}`)
})
}
const onHandledResult = (data: string) => {
setResult(data)
}
const onHandleError = (err: string) => {
if (err) failed(`CODEC 解码失败：${err}`)
}
useEffect(() => {
setLoading(true)
setTimeout(() => setLoading(false), 300)
}, [])
const renderCodecTypes = useMemoizedFn((items: CodecType[], notAutoExec?: boolean, isYakScript?: boolean) => {
return (
items.map((item) => {
if ((item.subTypes || []).length > 0) {
return (
<Dropdown
key={item.verbose}
overlay={
<Menu activeKey={codecType?.key}>
{item.subTypes?.map((subItem) => {
return (
<Menu.Item
key={`${subItem.key}`}
onClick={() => {
setCodecType(subItem)
if (!notAutoExec) {
codec(subItem.key || "", [], isYakScript)
}
}}>
<span>
{subItem.verbose}
</span>
</Menu.Item>
)
})}
</Menu>
}
placement='bottomLeft'
>
<Button
type={((item?.subTypes || []).filter(i => {
return i.key === codecType?.key
})).length > 0 ? "primary" : undefined}
>
{item.verbose}
<DownOutlined/>
</Button>
</Dropdown>
)
} else {
return (
<Button
key={item.key}
type={codecType?.key === item.key ? "primary" : undefined}
onClick={() => {
setCodecType(item);
if (!notAutoExec) {
codec(item.key || "", [], isYakScript)
}
}}
style={{marginRight: 8}}
>
{item.verbose}
</Button>
)
}
})
)
})
const search = useMemoizedFn((keyword?: string) => {
setPluginLoading(true)
queryYakScriptList(
"codec",
(i: YakScript[], total) => {
setCodecPlugin([{
subTypes: i.map(script => {
return {
key: script.ScriptName,
help: script.Help,
verbose: script.ScriptName,
isYakScript: true
}
}), key: "from-yakit-codec-plugin", verbose: "CODEC 社区插件"
}])
},
() => setTimeout(() => setPluginLoading(false), 300),
10,
undefined,
keyword
)
})
useEffect(() => {
search()
}, [])
return (
<AutoSpin spinning={loading}>
<PageHeader
title={"Codec"} className={"codec-pageheader-title"}
subTitle={<>
{codecType && <Tag color={"geekblue"}>当前类型：{codecType?.verbose}</Tag>}
{codecType && (codecType?.params || []).length <= 0 &&
<Button type={"primary"} size={"small"} onClick={e => {
codec(codecType?.key || "", [], codecType?.isYakScript)
}}>立即执行</Button>}
</>}
/>
<div className={"codec-function-bar"}>
<Space direction={"vertical"} style={{width: "100%"}}>
<Space>
{renderCodecTypes(CodecMenu)}
</Space>
<Space>
{renderCodecTypes(EncAmpDecMenu, true)}
{/* {renderCodecTypes(codecPlugin, false, true)} */}
<Popover
overlayClassName="codec-plugin-lib"
trigger="hover"
placement="bottomLeft"
visible={pluginVisible}
onVisibleChange={setPluginVisible}
content={
<div style={{width: 250}}>
<Input placeholder="模糊搜索插件名" allowClear onChange={event => {
if (timer) {
clearTimeout(timer)
timer = null
}
timer = setTimeout(() => {
search(event.target.value)
}, 500);
}}></Input>
<List
loading={pluginLoading}
size="small"
dataSource={codecPlugin[0]?.subTypes || []}
rowKey={row => row.key || ""}
renderItem={item => <List.Item>
<div style={{width: "100%", padding: "5px 7px"}} onClick={() => {
setCodecType(item)
codec(item.key || "", [], true)
setPluginVisible(false)
}}>
{item.key || ""}
</div>
</List.Item>}
/>
</div>
}>
<Button
type={(codecPlugin[0]?.subTypes || []).filter(item => codecType?.key === item.key).length !== 0 ? 'primary' : 'default'}>CODEC
社区插件 <DownOutlined style={{fontSize: 10}}/></Button>
</Popover>
</Space>
{codecType && codecType?.params && codecType.params.length > 0 && <Row
style={{width: "100%"}}
gutter={20}
>
<Col span={codecType?.help ? 18 : 24}>
<Divider>设置参数</Divider>
<YakScriptParamsSetter
primaryParamsOnly={true} styleSize={"small"}
Params={(codecType?.params || [])}
onParamsConfirm={finalParams => {
setParams([...finalParams])
codec(codecType?.key || "", finalParams, codecType?.isYakScript)
}}
hideClearButton={true}
submitVerbose={"执行"}
/>
</Col>
{codecType?.help && <Col span={6} style={{paddingTop: 30}}>
<Alert type={"info"} message={codecType?.help}/>
</Col>}
</Row>}
</Space>
</div>
<div className={"codec-content"}>
<Row wrap={false} justify='space-between' style={{flexGrow: 1}}>
<Col flex={leftWidth ? "0 1 80%" : rightWidth ? "0 1 18%" : "0 1 49%"}>
<AutoCard
className='codec-card-body'
headStyle={{height: 28, minHeight: 28, padding: 0}}
bodyStyle={{padding: 0}}
extra={
<>
<Button
size={"small"}
type={leftLine ? "primary" : "link"}
icon={<LineConversionIcon/>}
onClick={() => setLeftLine(!leftLine)}
/>
<Button
size={"small"}
type={leftWidth ? "primary" : "link"}
icon={<ArrowsAltOutlined/>}
onClick={() => {
setLeftWidth(!leftWidth)
setRightWidth(false)
}}
/>
</>
}
>
<div className='editor-body'>
<YakEditor value={text} noWordWrap={!leftLine} setValue={setText}/>
</div>
</AutoCard>
</Col>
<Col flex='0 1 2%'>
<div className={"exchange-btn"}>
<SwapOutlined
className={"exchange-icon"}
onClick={() => {
const left = text
const right = result
setText(right)
setResult(left)
}}
/>
</div>
</Col>
<Col flex={rightWidth ? "0 1 80%" : leftWidth ? "0 1 18%" : "0 1 49%"}>
<AutoCard
className='codec-card-body'
headStyle={{height: 28, minHeight: 28, padding: 0}}
bodyStyle={{padding: 0}}
extra={
<>
<Button
size={"small"}
type={rightLine ? "primary" : "link"}
icon={<LineConversionIcon/>}
onClick={() => setRightLine(!rightLine)}
/>
<Button
size={"small"}
type={rightWidth ? "primary" : "link"}
icon={<ArrowsAltOutlined/>}
onClick={() => {
setRightWidth(!rightWidth)
setLeftWidth(false)
}}
/>
</>
}
>
<div className='editor-body'>
<YakEditor value={result} noWordWrap={!rightLine} setValue={setResult} readOnly={true}
type={"http"}/>
</div>
</AutoCard>
</Col>
</Row>
</div>
</AutoSpin>
)
}
