@ant-design/icons#CloseSquareOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#CloseSquareOutlined.
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 visual-layout with MIT License | 5 votes |
|
Drawer: React.FC<{}> = () => {
const [width, setWidth] = useState(300);
const [isShow, setShow] = useState(false);
const { appService } = useContext(AppContext);
const page = appService.project.getCurrentPage();
useEffect(() => {
setShow(!!page?.currentNode[0]);
// eslint-disable-next-line
}, [page?.currentNode, page?.currentNode[0]]);
useEffect(() => {
setWidth(Number(localStorage.getItem(DrawerWidth) ?? 300));
}, []);
return (
<div
className={styles.drawer}
style={{ display: isShow ? 'flex' : 'none', width: width }}
>
<div className={styles.header}>
<div className={styles.slider}>
<Tooltip placement="bottom" title="宽度">
<span>
<ColumnWidthOutlined />
</span>
</Tooltip>
<InputNumber
min={300}
value={width}
size="small"
style={{ width: 60 }}
max={500}
onChange={value => {
setWidth(value);
localStorage.setItem(DrawerWidth, String(value));
}}
/>
</div>
<div className={styles.close} onClick={() => setShow(false)}>
<CloseSquareOutlined />
</div>
</div>
<Tabs className={styles.tabs}>
<>
<TabPane tab="属性" key="style">
<Attribute page={page} />
</TabPane>
<TabPane tab="组件" key="component" className="tests">
<ComponentEdit page={page} />
</TabPane>
<TabPane tab="CSS" key="css">
<CssEdit page={page} />
</TabPane>
</>
</Tabs>
</div>
);
}
Example #2
| Source File: ActionFilterRow.tsx From posthog-foss with MIT License | 4 votes |
|
export function ActionFilterRow({
logic,
filter,
index,
hideMathSelector,
hidePropertySelector,
singleFilter,
showOr,
hideFilter,
hideRename,
onRenameClick = () => {},
showSeriesIndicator,
seriesIndicatorType = 'alpha',
horizontalUI = false,
fullWidth = false,
filterCount,
customRowPrefix,
customRowSuffix,
rowClassName,
propertyFilterWrapperClassName,
stripeActionRow = true,
hasBreakdown,
showNestedArrow = false,
hideDeleteBtn = false,
actionsTaxonomicGroupTypes = [TaxonomicFilterGroupType.Events, TaxonomicFilterGroupType.Actions],
propertiesTaxonomicGroupTypes,
disabled = false,
renderRow,
}: ActionFilterRowProps): JSX.Element {
const { selectedFilter, entities, entityFilterVisible } = useValues(logic)
const {
updateFilter,
selectFilter,
updateFilterMath,
removeLocalFilter,
updateFilterProperty,
setEntityFilterVisibility,
duplicateFilter,
} = useActions(logic)
const { numericalPropertyNames } = useValues(propertyDefinitionsModel)
const { actions } = useValues(actionsModel)
const { mathDefinitions } = useValues(mathsLogic)
const visible = typeof filter.order === 'number' ? entityFilterVisible[filter.order] : false
let entity: BareEntity, name: string | null | undefined, value: PropertyFilterValue
const { math, math_property: mathProperty, math_group_type_index: mathGroupTypeIndex } = filter
const onClose = (): void => {
removeLocalFilter({ ...filter, index })
}
const onMathSelect = (_: unknown, selectedMath: string): void => {
updateFilterMath({
...mathTypeToApiValues(selectedMath),
math_property: mathDefinitions[selectedMath]?.onProperty ? mathProperty ?? '$time' : undefined,
type: filter.type,
index,
})
}
const onMathPropertySelect = (_: unknown, property: string): void => {
updateFilterMath({
...filter,
math_property: property,
index,
})
}
const dropDownCondition = Boolean(
selectedFilter && selectedFilter?.type === filter.type && selectedFilter?.index === index
)
const onClick = (): void => {
if (dropDownCondition) {
selectFilter(null)
} else {
selectFilter({ ...filter, index })
}
}
if (filter.type === EntityTypes.NEW_ENTITY) {
name = null
value = null
} else {
entity = (entities[filter.type] as BareEntity[])?.filter((action) => action.id === filter.id)[0] || {}
name = entity.name || filter.name
value = entity.id || filter.id
}
const orLabel = <div className="stateful-badge or width-locked">OR</div>
const seriesIndicator =
seriesIndicatorType === 'numeric' ? (
<SeriesGlyph style={{ borderColor: 'var(--border)' }}>{index + 1}</SeriesGlyph>
) : (
<SeriesLetter seriesIndex={index} hasBreakdown={hasBreakdown} />
)
const prefix = typeof customRowPrefix === 'function' ? customRowPrefix({ filter, index, onClose }) : customRowPrefix
const filterElement = (
<Popup
overlay={
<TaxonomicFilter
groupType={filter.type as TaxonomicFilterGroupType}
value={
filter.type === 'actions' && typeof value === 'string' ? parseInt(value) : value || undefined
}
onChange={(taxonomicGroup, changedValue, item) => {
updateFilter({
type: taxonomicFilterGroupTypeToEntityType(taxonomicGroup.type) || undefined,
id: `${changedValue}`,
name: item?.name,
index,
})
}}
onClose={() => selectFilter(null)}
taxonomicGroupTypes={actionsTaxonomicGroupTypes}
/>
}
visible={dropDownCondition}
onClickOutside={() => selectFilter(null)}
>
{({ setRef }) => (
<Button
data-attr={'trend-element-subject-' + index}
onClick={onClick}
block={fullWidth}
ref={setRef}
disabled={disabled}
style={{
maxWidth: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
}}
>
<span className="text-overflow" style={{ maxWidth: '100%' }}>
<EntityFilterInfo filter={filter} />
</span>
<DownOutlined style={{ fontSize: 10 }} />
</Button>
)}
</Popup>
)
const suffix = typeof customRowSuffix === 'function' ? customRowSuffix({ filter, index, onClose }) : customRowSuffix
const propertyFiltersButton = (
<Button
type="link"
onClick={() => {
typeof filter.order === 'number' ? setEntityFilterVisibility(filter.order, !visible) : undefined
}}
className={`row-action-btn show-filters${visible ? ' visible' : ''}`}
data-attr={'show-prop-filter-' + index}
title="Show filters"
>
<FilterOutlined />
{filter.properties?.length ? pluralize(filter.properties?.length, 'filter') : null}
</Button>
)
const renameRowButton = (
<Button
type="link"
onClick={() => {
selectFilter(filter)
onRenameClick()
}}
className={`row-action-btn show-rename`}
data-attr={'show-prop-rename-' + index}
title="Rename graph series"
>
<EditOutlined />
</Button>
)
const duplicateRowButton = (
<Button
type="link"
onClick={() => {
duplicateFilter(filter)
}}
className={`row-action-btn show-duplicabe`}
data-attr={'show-prop-duplicate-' + index}
title="Duplicate graph series"
>
<CopyOutlined />
</Button>
)
const deleteButton = (
<Button
type="link"
onClick={onClose}
className="row-action-btn delete"
data-attr={'delete-prop-filter-' + index}
title="Delete graph series"
>
<DeleteOutlined />
</Button>
)
return (
<div
className={clsx({
'action-row-striped': horizontalUI && stripeActionRow,
'action-row': !horizontalUI || !stripeActionRow,
'full-width': fullWidth,
})}
>
{!horizontalUI && index > 0 && showOr && (
<Row align="middle" style={{ marginTop: 12 }}>
{orLabel}
</Row>
)}
<Row gutter={8} align="middle" className={`${!horizontalUI ? 'mt' : ''} ${rowClassName}`} wrap={!fullWidth}>
{renderRow ? (
renderRow({
seriesIndicator,
prefix,
filter: filterElement,
suffix,
propertyFiltersButton: propertyFiltersButton,
renameRowButton,
deleteButton,
orLabel,
})
) : (
<>
{!hideDeleteBtn && horizontalUI && !singleFilter && filterCount > 1 && (
<Col>
<Button
type="link"
onClick={onClose}
className="row-action-btn delete"
title="Remove graph series"
danger
icon={<CloseSquareOutlined />}
/>
</Col>
)}
{showSeriesIndicator && <Col className="action-row-letter">{seriesIndicator}</Col>}
{customRowPrefix !== undefined ? (
<Col>{prefix}</Col>
) : (
<>{horizontalUI && <Col>Showing</Col>}</>
)}
<Col
className="column-filter"
style={fullWidth ? {} : { maxWidth: `calc(${hideMathSelector ? '100' : '50'}% - 16px)` }}
flex={fullWidth ? 'auto' : undefined}
>
{filterElement}
</Col>
{customRowSuffix !== undefined && <Col className="column-row-suffix">{suffix}</Col>}
{!hideMathSelector && (
<>
{horizontalUI && <Col>counted by</Col>}
<Col style={{ maxWidth: `calc(50% - 16px${showSeriesIndicator ? ' - 32px' : ''})` }}>
<MathSelector
math={math}
mathGroupTypeIndex={mathGroupTypeIndex}
index={index}
onMathSelect={onMathSelect}
areEventPropertiesNumericalAvailable={!!numericalPropertyNames.length}
style={{ maxWidth: '100%', width: 'initial' }}
/>
</Col>
{mathDefinitions[math || '']?.onProperty && (
<>
{horizontalUI && <Col>on property</Col>}
<Col
style={{
maxWidth: `calc(50% - 16px${showSeriesIndicator ? ' - 32px' : ''})`,
}}
>
<MathPropertySelector
name={name}
math={math}
mathProperty={mathProperty}
index={index}
onMathPropertySelect={onMathPropertySelect}
properties={numericalPropertyNames}
horizontalUI={horizontalUI}
/>
</Col>
</>
)}
</>
)}
{(horizontalUI || fullWidth) && !hideFilter && <Col>{propertyFiltersButton}</Col>}
{(horizontalUI || fullWidth) && !hideRename && <Col>{renameRowButton}</Col>}
{(horizontalUI || fullWidth) && !hideFilter && !singleFilter && <Col>{duplicateRowButton}</Col>}
{!hideDeleteBtn && !horizontalUI && !singleFilter && (
<Col className="column-delete-btn">{deleteButton}</Col>
)}
{horizontalUI && filterCount > 1 && index < filterCount - 1 && showOr && orLabel}
</>
)}
</Row>
{(!hidePropertySelector || (filter.properties && filter.properties.length > 0)) &&
!horizontalUI &&
!fullWidth && (
<div style={{ paddingTop: 6 }}>
<span style={{ color: '#C4C4C4', fontSize: 18, paddingLeft: 6, paddingRight: 2 }}>↳</span>
<Button
className="ant-btn-md"
onClick={() =>
typeof filter.order === 'number'
? setEntityFilterVisibility(filter.order, !visible)
: undefined
}
data-attr={'show-prop-filter-' + index}
>
{determineFilterLabel(visible, filter)}
</Button>
</div>
)}
{visible && (
<div
className={
propertyFilterWrapperClassName
? `mr property-filter-wrapper ${propertyFilterWrapperClassName}`
: 'mr property-filter-wrapper'
}
>
<PropertyFilters
pageKey={`${index}-${value}-filter`}
propertyFilters={filter.properties}
onChange={(properties) => updateFilterProperty({ properties, index })}
disablePopover={horizontalUI}
style={{ marginBottom: 0 }}
showNestedArrow={showNestedArrow}
taxonomicGroupTypes={propertiesTaxonomicGroupTypes}
eventNames={
filter.type === TaxonomicFilterGroupType.Events && filter.id
? [String(filter.id)]
: filter.type === TaxonomicFilterGroupType.Actions && filter.id
? getEventNamesForAction(parseInt(String(filter.id)), actions)
: []
}
/>
</div>
)}
</div>
)
}
Example #3
| 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>
);
}
