@ant-design/icons#CaretUpOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#CaretUpOutlined.
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 fe-v5 with Apache License 2.0 | 6 votes |
|
export default function OrderSort(props: Props) {
const { t } = useTranslation();
const { onChange, showLabel } = props;
const [isDesc, setIsDesc] = useState<Boolean>(true);
const handleClick = (e) => {
setIsDesc(!isDesc);
onChange(!isDesc);
e.preventDefault()
};
return (
<div className='desc-sort'>
{showLabel && (isDesc ? t('降序') : t('升序'))}
<div className='desc-sort-icon' onClick={handleClick}>
<CaretUpOutlined
style={{
color: isDesc === false ? 'blue' : '',
}}
/>
<CaretDownOutlined
style={{
color: isDesc === true ? 'blue' : '',
marginTop: '-0.3em',
}}
/>
</div>
</div>
);
}
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: tasks.tsx From leek with Apache License 2.0 | 4 votes |
|
TasksPage: React.FC = () => {
// STATE
const service = new TaskService();
const controlService = new ControlService();
const { currentApp, currentEnv } = useApplication();
// Filters
const [filters, setFilters] = useState<any>();
const [timeFilters, setTimeFilters] = useState<any>({
timestamp_type: "timestamp",
interval_type: "past",
offset: 900000,
});
const [order, setOrder] = useState<string>("desc");
// Data
const columns = TaskDataColumns();
const [pagination, setPagination] = useState<any>({
pageSize: 20,
current: 1,
});
const [loading, setLoading] = useState<boolean>();
const [tasksRetrying, setTasksRetrying] = useState<boolean>();
const [tasks, setTasks] = useState<any[]>([]);
// API Calls
function filterTasks(pager = { current: 1, pageSize: 20 }) {
if (!currentApp) return;
setLoading(true);
let allFilters = {
...filters,
...timeFilters,
};
let from_ = (pager.current - 1) * pager.pageSize;
service
.filter(currentApp, currentEnv, pager.pageSize, from_, order, allFilters)
.then(handleAPIResponse)
.then((result: any) => {
// Prepare pagination
let p = fixPagination(result.hits.total.value, pager, filterTasks);
if (p) setPagination(p);
else return;
// Result
let tasksList: { any }[] = [];
result.hits.hits.forEach(function (hit) {
tasksList.push(hit._source);
});
setTasks(tasksList);
}, handleAPIError)
.catch(handleAPIError)
.finally(() => setLoading(false));
}
// Hooks
useEffect(() => {
refresh(pagination);
}, [currentApp, currentEnv, filters, timeFilters, order]);
useEffect(() => {
//console.log(tasks)
}, [tasks]);
// UI Callbacks
function refresh(pager = { current: 1, pageSize: 20 }) {
filterTasks(pager);
}
function handleShowTaskDetails(record) {
window.open(
`/task?app=${currentApp}&env=${currentEnv}&uuid=${record.uuid}`,
"_blank"
);
}
function handleRefresh() {
refresh(pagination);
}
function handleShowTotal(total) {
return `Total of ${total} tasks`;
}
function handleTableChange(pagination, filters, sorter) {
refresh(pagination);
}
function handleFilterChange(values) {
setFilters(values);
}
function prepareList(items) {
return (
<List
header={
<Row justify="center">
<Text strong>Ineligible Tasks IDs</Text>
</Row>
}
dataSource={items}
style={{ maxHeight: 200, overflow: "auto" }}
size="small"
bordered
renderItem={(item) => <List.Item>{item}</List.Item>}
/>
);
}
function bulkRetryConfirmation(result) {
if (result.eligible_tasks_count == 0) {
message.warning("Found no eligible tasks for retrying!");
return;
}
confirm({
title: "Retry Filtered Tasks",
icon: <ExclamationCircleOutlined />,
content: (
<>
<Typography.Paragraph>
Do you really want to retry filtered tasks?
<ul>
<li>
{result.eligible_tasks_count} tasks are eligible to be retried.
</li>
<li>
{result.ineligible_tasks_count} tasks are not eligible to be
retried.
</li>
</ul>
</Typography.Paragraph>
{result.ineligible_tasks_count > 0 &&
prepareList(result.ineligible_tasks_ids)}
</>
),
onOk() {
return retryFiltered(false);
},
});
}
function pendingBulkRetry(result) {
confirm({
title: "Bulk tasks retry initiated!",
icon: <CheckCircleOutlined style={{ color: "#00BFA6" }} />,
content: (
<>
<Typography.Paragraph>
Tasks queued to the broker, you can filter the retried tasks using
the client name.
<ul>
<li>
Client name:{" "}
<Text copyable code>
{result.origin}
</Text>
</li>
<li>{result.succeeded_retries_count} tasks set to retry.</li>
<li>{result.failed_retries_count} tasks could not be retried.</li>
</ul>
</Typography.Paragraph>
{result.failed_retries_count > 0 &&
prepareList(result.failed_retries)}
</>
),
okText: "Ok",
cancelButtonProps: { style: { display: "none" } },
});
}
function retryFiltered(dryRun) {
if (!currentApp || !currentEnv) return;
setTasksRetrying(true);
let allFilters = { ...filters, ...timeFilters };
return controlService
.retryTasksByQuery(currentApp, currentEnv, allFilters, dryRun)
.then(handleAPIResponse)
.then((result: any) => {
if (dryRun) {
bulkRetryConfirmation(result);
} else {
pendingBulkRetry(result);
}
}, handleAPIError)
.catch(handleAPIError)
.finally(() => setTasksRetrying(false));
}
function handleRetryFiltered() {
retryFiltered(true);
}
return (
<>
<Helmet>
<html lang="en" />
<title>Tasks</title>
<meta name="description" content="List of tasks" />
<meta name="keywords" content="celery, tasks" />
</Helmet>
<Row style={{ marginBottom: "16px" }} gutter={[12, 12]}>
<Col xxl={5} xl={6} md={7} lg={8} sm={24} xs={24}>
<AttributesFilter
onFilter={handleFilterChange}
filters={timeFilters}
/>
</Col>
<Col xxl={19} xl={18} md={17} lg={16} sm={24} xs={24}>
<Row justify="center" style={{ width: "100%" }}>
<Card
bodyStyle={{ paddingBottom: 0, paddingRight: 0, paddingLeft: 0 }}
size="small"
style={{ width: "100%" }}
title={
<Row align="middle">
<Col span={3}>
<Switch
defaultChecked={order == "desc"}
style={{ marginLeft: "10px" }}
onChange={(e) => {
setOrder(e ? "desc" : "asc");
}}
size="small"
checkedChildren={
<CaretUpOutlined style={{ color: "#333" }} />
}
unCheckedChildren={<CaretDownOutlined />}
/>
</Col>
<Col span={18} style={{ textAlign: "center" }}>
<TimeFilter
timeFilter={timeFilters}
onTimeFilterChange={setTimeFilters}
/>
</Col>
<Col span={3}>
<Space style={{ float: "right" }}>
{filters &&
filters.state &&
filters.state.length &&
filters.state.every((s) =>
TerminalStates.includes(s)
) && (
<Button
ghost
type="primary"
size="small"
onClick={handleRetryFiltered}
loading={tasksRetrying}
>
Retry Filtered
</Button>
)}
<Button
size="small"
onClick={handleRefresh}
icon={<SyncOutlined />}
/>
</Space>
</Col>
</Row>
}
>
<Table
dataSource={tasks}
columns={columns}
pagination={{ ...pagination, showTotal: handleShowTotal }}
loading={loading}
size="small"
rowKey="uuid"
showHeader={false}
onChange={handleTableChange}
style={{ width: "100%" }}
scroll={{ x: "100%" }}
locale={{
emptyText: (
<div style={{ textAlign: "center" }}>
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={
<span>
No <a href="#API">tasks</a> found
</span>
}
/>
</div>
),
}}
onRow={(record, rowIndex) => {
return {
onClick: (event) => {
handleShowTaskDetails(record);
},
};
}}
/>
</Card>
</Row>
</Col>
</Row>
</>
);
}
