@ant-design/icons#DoubleLeftOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#DoubleLeftOutlined.
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: form-panel.tsx From XFlow with MIT License | 5 votes |
|
FlowchartFormPanel: React.FC<IFlowchartFormPanelProps> = props => {
const [collpased, setCollpased] = useState(false)
const {
controlMapService = defaultControlMapService,
formSchemaService = defaultFormSchemaService,
position = { width: 240, top: 0, bottom: 0, right: 0 },
show = true,
...rest
} = props
if (!show) {
return null
}
const { width = 200, right } = position
return (
<WorkspacePanel
className={CONTAINER_CLASS}
position={{
...position,
right: !collpased ? right : -width,
}}
>
<div className={`${CONTAINER_CLASS}-wrapper`}>
{/* @ts-ignore */}
<JsonSchemaForm
targetType={['node', 'edge', 'canvas', 'group']}
controlMapService={controlMapService}
formSchemaService={formSchemaService}
position={{
...position,
top: 0,
}}
prefixClz="xflow-form-editor"
{...rest}
/>
<div
className={`${CONTAINER_CLASS}-icon`}
style={{
top: 21,
left: !collpased ? -10 : -20,
borderRadius: !collpased ? '50%' : '50% 0 0 50%',
borderRight: !collpased ? '' : 'none',
}}
onClick={() => {
setCollpased(!collpased)
}}
>
{collpased ? <DoubleLeftOutlined /> : <DoubleRightOutlined />}
</div>
</div>
</WorkspacePanel>
)
}
Example #2
| Source File: index.tsx From XFlow with MIT License | 5 votes |
|
FlowchartNodePanel: React.FC<IProps> = props => {
registerCustomNode(get(props, 'registerNode'))
const prefixClz = useXflowPrefixCls('node-panel')
const [collpased, setCollpased] = useState(false)
const { show = true, position = { width: 240, top: 40, bottom: 0, left: 0 }, ...rest } = props
if (!show) {
return null
}
const { width = 200, left } = position
return (
<WorkspacePanel
className={CONTAINER_CLASS}
position={{
...position,
left: !collpased ? left : -width,
}}
>
<div className={`${CONTAINER_CLASS}-wrapper`}>
<WorkspacePanel
className={prefixClz}
{...rest}
position={{
top: 0,
bottom: 0,
left: 0,
right: 0,
}}
>
<NodePanelMain {...props} prefixClz={prefixClz} position={position} />
</WorkspacePanel>
<div
className={`${CONTAINER_CLASS}-icon`}
style={{
top: 21,
right: !collpased ? -10 : -20,
borderRadius: !collpased ? '50%' : '0 50% 50% 0',
borderLeft: !collpased ? '' : 'none',
}}
onClick={() => {
setCollpased(!collpased)
}}
>
{collpased ? <DoubleRightOutlined /> : <DoubleLeftOutlined />}
</div>
</div>
</WorkspacePanel>
)
}
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>
);
}
Example #4
| Source File: Attr.tsx From ant-simple-draw with MIT License | 4 votes |
|
Attr = memo(function Attr(props) {
const dispatch = useDispatch();
const [collapsed, setCollapsed] = useState<boolean>(true);
const [isClickComponent, curComponent, canvasInformation, canvasEditableEl, zenMode] =
useSelector(
createSelector(
[(state: storeType) => state.component, (state: storeType) => state.config],
(component, config) => {
return [
component.isClickComponent,
component.curComponent,
config.canvasInformation,
config.canvasEditableEl,
config.zenMode,
] as const;
},
),
);
useEffect(() => {
if (zenMode) {
setCollapsed(false);
} else {
setCollapsed(true);
}
}, [zenMode]);
const toggleCollapsed = () => {
setCollapsed((pre) => !pre);
};
const handleFormSave = (flag: string, val: any) => {
if (flag === 'canvasConfig') {
dispatch(setCanvasInformationAction(val));
console.log('val', val);
} else {
dispatch(updatePropsAction(val));
console.log('2222val', val);
}
};
return (
<>
<div
className={styles.option}
onClick={toggleCollapsed}
style={{ left: collapsed ? '-17.5px' : '-40px' }}
>
{!collapsed ? <DoubleLeftOutlined /> : <DoubleRightOutlined />}
</div>
<div
className={styles.editContainer}
style={{
width: collapsed ? getCssProperty('--mjy-attr-editor-width') : '0px',
opacity: collapsed ? 1 : 0,
}}
>
<Tabs defaultActiveKey="1" centered>
{!curComponent ? (
<>
<TabPane tab={'画布配置'} key="1">
<div className={styles.attrsContainer}>
<FormRender
editType={canvasEditableEl}
onSave={(val: Store) => handleFormSave('canvasConfig', val)}
id={'canvasConfig'}
showEditPropsData={canvasInformation}
/>
</div>
</TabPane>
</>
) : (
<>
<TabPane tab={'属性'} key="1">
<div className={styles.attrsContainer}>
<WhXy />
<Divider />
<FormRender
editType={curComponent.editableEl}
onSave={(val: Store) => handleFormSave('shapeConfig', val)}
id={curComponent.componentId!}
showEditPropsData={curComponent.propValue}
/>
</div>
</TabPane>
<TabPane tab={'交互'} key="2">
<div className={styles.attrsContainer}>Content of Tab Pane 2</div>
</TabPane>
</>
)}
</Tabs>
</div>
</>
);
})
Example #5
| Source File: SliderComponent.tsx From ant-simple-draw with MIT License | 4 votes |
|
Slider = memo(function Slider() {
const dispatch = useDispatch();
const [tabKey, setTabKey] = useState<string>('1');
const [zenMode] = useSelector(
createSelector([(state: storeType) => state.config], ({ zenMode }) => [zenMode] as const),
);
const { getAllBaseModuleConfigList, textConfigList, pictureGather, graphicsData } =
useGetCompentConfigList();
const [isShowLeftComponents, setIsShowLeftComponents] = useState<boolean>(true);
const toggleShowLeftComponents = () => {
setIsShowLeftComponents((pre) => !pre);
};
useEffect(() => {
if (zenMode) {
setIsShowLeftComponents(false);
} else {
setIsShowLeftComponents(true);
}
}, [zenMode]);
const tabBarExtraContent = useMemo(() => {
return (
<div onClick={toggleShowLeftComponents} className={styles.tabBarExtraContent}>
{isShowLeftComponents ? <DoubleLeftOutlined /> : <DoubleRightOutlined />}
</div>
);
}, [isShowLeftComponents]);
const Render = useMemo(() => {
const mergeList = [
{
category: 'text',
title: '文本',
componentList: textConfigList,
},
{
category: 'picture',
title: '图片',
componentList: pictureGather,
},
{
category: 'graphics',
title: '图形',
componentList: graphicsData,
},
{
category: 'base',
title: '基础',
componentList: getAllBaseModuleConfigList,
},
];
return mergeList.map((item, index) => (
<React.Fragment key={index}>
<TabPane
key={index + 1}
tab={<TabTitle title={item.title} icon={<HighlightOutlined style={{ margin: 0 }} />} />}
>
<div
className={styles.leftMoveAnimate}
style={{
width: isShowLeftComponents ? '300px' : '0px',
opacity: isShowLeftComponents ? '1' : '0',
}}
>
<div className={styles.leftContainer}>
<div className={styles.search}>
<Input placeholder="请选择" prefix={<SearchOutlined />} allowClear />
</div>
{['picture', 'base', 'graphics'].includes(item.category) ? (
<>
<SecondaryList
data={item.componentList as getAllConfigListType[]}
fatherData={item as getAllConfigListType}
/>
</>
) : null}
{item.category === 'text' ? (
<div
className={styles.contentContainer}
style={{
visibility: isShowLeftComponents ? 'visible' : 'hidden',
}}
>
<Drag list={item.componentList as templateDataType[]} category={item.category} />
</div>
) : null}
</div>
</div>
</TabPane>
</React.Fragment>
));
}, [
getAllBaseModuleConfigList,
textConfigList,
pictureGather,
graphicsData,
isShowLeftComponents,
]);
return (
<>
<Tabs
tabPosition="left"
tabBarExtraContent={tabBarExtraContent}
onChange={(val) => setTabKey(val)}
>
{Render}
</Tabs>
</>
);
})
