@ant-design/icons#CloudUploadOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#CloudUploadOutlined.
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: H5UploadButton.tsx From whiteboard-demo with MIT License | 6 votes |
|
render(): React.ReactNode {
return (
<Popover
visible={this.state.visible}
onVisibleChange={this.onVisibleChange}
trigger="click"
placement={"bottomRight"}
content={this.renderContent()}>
<div className="page-preview-cell">
<CloudUploadOutlined style={{ fontSize: "14px" }} />
</div>
</Popover>
)
}
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: Responsive.tsx From yugong with MIT License | 4 votes |
|
Responsive: React.FC<Props> = () => {
useEffect(() => {
trackPageView('/首页');
}, []);
/**
* ----------
* 定义编辑模式
* ----------
*/
const { isEditing, auth } = useSelector(
(state: RootState) => state.controller,
);
const history = useHistory();
const appData = useSelector((state: RootState) => state.appData);
const activationItem = useSelector(
(state: RootState) => state.activationItem,
);
const stateTag = useSelector((state: RootState) => state.controller.stateTag);
const forceUpdateByStateTag =
useDispatch<Dispatch>().controller.forceUpdateByStateTag;
const setIsEditing = useDispatch<Dispatch>().controller.setIsEditing;
const updateAppData = useDispatch<Dispatch>().appData.updateAppData;
const updatePageData = useDispatch<Dispatch>().pageData.updatePage;
const setWindowHeight = useDispatch<Dispatch>().pageData.setWindowHeight;
const setWindowWidth = useDispatch<Dispatch>().pageData.setWindowWidth;
const updateActivationItem =
useDispatch<Dispatch>().activationItem.updateActivationItem;
const removeActivationItem =
useDispatch<Dispatch>().activationItem.removeActivationItem;
const setRunningTimes = useDispatch<Dispatch>().runningTimes.setRunningTimes;
const ref = useRef(null);
const pageData = useSelector((state: RootState) => state.pageData);
const runningTimes = useSelector((state: RootState) => state.runningTimes);
const setIsReady = useDispatch<Dispatch>().record.setIsReady;
const [, setLocalPageData] = useLocalStorage('pageData', null);
const [showDrawer, setShowDrawer] = useState(false);
const [showPageDrawer, setShowPageDrawer] = useState(false);
const [isCreate, setIsCreate] = useState(true);
const [showTemplateModal, setShowTemplateModal] = useState(false);
const [hideIframe, sethideIframe] = useState(true);
const [visibleQrcode, setVisibleQrcode] = useState(false);
// 创建postmessage通信 usePostMessage收集数据 redux 更新数据
const sendMessage = usePostMessage(({ tag, value }) => {
switch (tag) {
case 'setIsEditing':
setIsEditing(value);
break;
case 'updateAppData':
updateAppData(value);
// 同步更新被选模块的属性
if (activationItem.moduleId === undefined) return;
const asynAcactivationItem = (value as AppDataListTypes).find(
(item) => item.moduleId === activationItem.moduleId,
);
if (asynAcactivationItem?.moduleId) {
updateActivationItem(asynAcactivationItem);
}
break;
case 'updateRunningTimes':
setRunningTimes(value);
break;
case 'updatePage':
updatePageData(value);
break;
case 'id':
// 设置当前项正在被编辑
// 禁止重复设置当前编辑项
if (activationItem.moduleId === value) return;
for (let index = 0; index < appData.length; index++) {
const element = appData[index];
if (element.moduleId === value) {
updateActivationItem({ ...element });
break;
}
}
setShowDashboard(true);
break;
case 'record':
saveRecord(value)
break
default:
break;
}
});
// 收发处理，子窗口onload时向子窗口发送信息, 通知当前正处于编辑模式下，
const win: Window | null = ref.current
? (ref.current as any).contentWindow
: null;
useEffect(() => {
const windows = (document.getElementById('wrapiframe') as any)
?.contentWindow;
if (windows && !isCreate) {
windows.onload = () => {
sendMessage({ tag: 'setIsEditing', value: true }, windows);
setIsEditing(true);
setIsReady(true);
sethideIframe(false);
};
}
}, [sendMessage, setIsEditing, isCreate, setIsReady]);
useEffect(() => {
sendMessage({ tag: 'setIsEditing', value: true }, win);
setIsEditing(true);
}, [sendMessage, setIsEditing, win]);
const toggleEdit = useCallback(() => {
const states = !isEditing;
sendMessage({ tag: 'setIsEditing', value: states }, win);
setIsEditing(states);
}, [isEditing, sendMessage, setIsEditing, win]);
const toggleCreate = useCallback(() => {
setIsCreate(!isCreate);
}, [isCreate]);
// 收发处理，编辑完数据后通过sendMessage向子窗口发送最新数据。
useEffect(() => {
sendMessage(
{
tag: 'updateAppData',
value: appData,
},
win,
);
}, [sendMessage, win, appData]);
const onChangeRule = (
width: number,
height: number = window.innerHeight - 140,
) => {
setWindowWidth(width);
setWindowHeight(height);
const optPageData = { ...pageData };
optPageData.windowWidth = width;
optPageData.windowHeight = height;
setLocalPageData(optPageData);
if (win) {
sendMessage({ tag: 'updatePage', value: true }, win);
sendMessage({ tag: 'setIsEditing', value: isEditing }, win);
}
setIsEditing(true);
forceUpdateByStateTag();
};
const [showDashboard, setShowDashboard] = useState(false);
const [opacity, setOpacity] = useState('1');
// 无激活模块时隐藏设置面板
useEffect(() => {
if (!activationItem.moduleId) {
setShowDashboard(false);
}
}, [activationItem]);
const hideDashboard = useCallback(() => {
setShowDashboard(false);
removeActivationItem();
if (win) {
sendMessage({ tag: 'removeActivationItem', value: undefined }, win);
}
}, [removeActivationItem, sendMessage, win]);
const updateProject = useCallback(
(data: Template) => {
data.id = pageData.template?.id;
return updateTemplate(data);
},
[pageData],
);
interface TemplateAll extends Template {
pageData: string;
appData: string;
}
// 保存或更新项目
const onSaveProject = useCallback(
async ({
cove = [],
terminal,
isPublic,
describe,
tag,
title,
id,
}: TemplateInfo) => {
if (!auth?.isLogin) {
history.push('/login');
return;
}
// copy
const pageDataCopy = cloneDeep(pageData);
// template数据
const templateData: Template = {
title: title || pageData.pageTitle,
terminal,
cove: cove[0]?.thumbUrl,
describe,
tag: tag?.join(','),
isPublic: isPublic === true ? 1 : 0,
};
// 存入模板信息到pageData
if (!pageDataCopy.template) {
pageDataCopy.template = templateData;
}
// 完整数据
/**
* 完整数据包含页面数据、组件数据与模板信息三个部分，
* 页面数据同时也包含一份模板信息供页面处理
*/
const params: TemplateAll = {
pageData: JSON.stringify(pageData),
appData: JSON.stringify(appData),
id,
userId: auth.session?.id,
...templateData,
};
try {
loading.show();
// 更新
if (!!pageData.template?.id) {
await updateProject(params);
} else {
// 新增
const newId = await createTemplate(params);
pageDataCopy.template.id = newId;
}
message.success('已发布');
// 更新
updatePageData(pageDataCopy);
// 关闭弹窗
setShowTemplateModal(false);
// todo 展示二维码与模板访问链接，支持扫码访问
setVisibleQrcode(true);
loading.hide();
} catch (error) {
console.error(error);
loading.hide();
}
},
[
appData,
auth?.isLogin,
auth?.session?.id,
history,
pageData,
updatePageData,
updateProject,
],
);
const showPublishModal = useCallback(() => {
if (!auth?.isLogin) {
history.push('/login');
}
setShowTemplateModal(true);
}, [auth?.isLogin, history]);
const pageSearch = stringify({ tpl: pageData.template?.id, ...runningTimes.search });
const codeViewUrl = `${process.env.REACT_APP_SITE_PATH || ''}${pageSearch ? `?${pageSearch}` : ''}`;
const viewUrl = `${process.env.REACT_APP_SITE_PATH || ''}${window.location.search || '?isediting'
}`
return (
<>
{isCreate ? (
<CreateProject goBack={() => toggleCreate()} />
) : (
<div className={s.main}>
{showDashboard && isEditing ? (
<Draggable
axis="both"
handle={`.${s.header}`}
onDrag={() => setOpacity('0.5')}
onStop={() => setOpacity('1')}
>
<div className={s.dashboard} style={{ opacity }}>
<div className={s.header}>
<h3>设置面板</h3>
<CloseOutlined className={s.icon} onClick={hideDashboard} />
</div>
<MiniDashboard />
</div>
</Draggable>
) : null}
<div className={s.topmenu}>
<div className={s.create}>
<Button
type="primary"
onClick={toggleCreate}
icon={<FileAddOutlined />}
/>
{!isEditing ? (
<Button
type="default"
className={s.toggle}
onClick={toggleEdit}
icon={<EditOutlined />}
/>
) : null}
{isEditing ? (
<Button
type="default"
className={s.toggle}
onClick={toggleEdit}
icon={<EyeOutlined />}
/>
) : null}
<Button
type="default"
icon={<SettingOutlined />}
onClick={() => setShowPageDrawer(true)}
>
页面
</Button>
<Button
type="default"
icon={<PlusOutlined />}
onClick={() => setShowDrawer(true)}
>
组件
</Button>
<Undo />
<a href="https://github.com/eightfeet/yugong">
<Button type="default" icon={<GithubOutlined />}>
github
</Button>
</a>
</div>
<div className={s.save}>
<Button
type="primary"
icon={<CloudUploadOutlined />}
onClick={showPublishModal}
>
{pageData.template?.id ? '修改' : '发布'}
</Button>
{pageData.template?.id ? <>
<Button
icon={<QrcodeOutlined />}
onClick={() => setVisibleQrcode(true)}
/>
</> : null}
</div>
</div>
<Ruler onChange={onChangeRule} />
<Drawer
className={s.drawer}
title="页面设置"
width={580}
onClose={() => setShowPageDrawer(false)}
visible={showPageDrawer}
bodyStyle={{ padding: '0', overflow: 'auto' }}
maskStyle={{ backgroundColor: 'transparent' }}
footer={null}
>
{showPageDrawer ? <PageSetting /> : null}
</Drawer>
<Drawer
className={s.drawer}
title="组件库"
width={580}
onClose={() => setShowDrawer(false)}
visible={showDrawer}
bodyStyle={{ padding: '0px' }}
maskStyle={{ backgroundColor: 'transparent' }}
footer={null}
>
<Repository />
</Drawer>
<div className={s.box}>
<div
className={classNames({
[s.viewbg]: !isEditing,
})}
style={{ transition: 'all 0.5s' }}
/>
{!stateTag ? (
<div
className={s.iframebox}
style={{
width:
pageData.windowWidth === -1
? `100%`
: `${pageData.windowWidth}px`,
height: `${pageData.windowHeight}px`,
}}
>
<LoadingAnimate />
<iframe
ref={ref}
id="wrapiframe"
title="wrapiframe"
src={viewUrl}
style={{
border: 'none',
opacity: hideIframe ? 0 : 1,
minWidth: '100%',
minHeight: `${pageData.windowHeight}px`,
}}
/>
</div>
) : null}
</div>
</div>
)}
<TemplateInfoModal
visible={showTemplateModal}
onOk={onSaveProject}
onCancel={() => setShowTemplateModal(false)}
/>
<QrcodeModal
visible={visibleQrcode}
onCancel={() => setVisibleQrcode(false)}
sourceData={codeViewUrl}
title="请扫码访问"
info={<div className={s.viewurl}>访问地址:<a href={codeViewUrl} target={'_blank'} rel="noreferrer">{codeViewUrl}</a></div>}
options={{
width: 122,
margin: 1
}}
/>
</>
);
}
