@ant-design/icons#BankFilled TypeScript Examples
The following examples show how to use
@ant-design/icons#BankFilled.
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: OnBoardingContext.tsx From condo with MIT License | 6 votes |
onBoardingIcons = { organization: BankFilled, house: HouseIcon, user: UserIcon, division: WechatFilled, chat: WechatFilled, billing: ProfileFilled, creditCard: CreditCardFilled, }
Example #2
Source File: index.tsx From datart with Apache License 2.0 | 4 votes |
export function Navbar() {
const { actions } = useMainSlice();
const [profileVisible, setProfileVisible] = useState(false);
const [modifyPasswordVisible, setModifyPasswordVisible] = useState(false);
const dispatch = useDispatch();
const history = useHistory();
const { i18n } = useTranslation();
const systemInfo = useSelector(selectSystemInfo);
const orgId = useSelector(selectOrgId);
const currentOrganization = useSelector(selectCurrentOrganization);
const loggedInUser = useSelector(selectLoggedInUser);
const organizationListLoading = useSelector(selectOrganizationListLoading);
const downloadPolling = useSelector(selectDownloadPolling);
const themeKey = useSelector(selectThemeKey);
const matchModules = useRouteMatch<{ moduleName: string }>(
'/organizations/:orgId/:moduleName',
);
const t = useI18NPrefix('main');
const brandClick = useCallback(() => {
history.push('/');
}, [history]);
const hideProfile = useCallback(() => {
setProfileVisible(false);
}, []);
const hideModifyPassword = useCallback(() => {
setModifyPasswordVisible(false);
}, []);
const organizationListVisibleChange = useCallback(
visible => {
if (visible && !organizationListLoading) {
dispatch(getOrganizations());
}
},
[dispatch, organizationListLoading],
);
const subNavs = useMemo(
() => [
{
name: 'variables',
title: t('subNavs.variables.title'),
icon: <FunctionOutlined />,
module: ResourceTypes.Manager,
},
{
name: 'orgSettings',
title: t('subNavs.orgSettings.title'),
icon: <SettingOutlined />,
module: ResourceTypes.Manager,
},
],
[t],
);
const navs = useMemo(
() => [
{
name: 'vizs',
title: t('nav.vizs'),
icon: <i className="iconfont icon-xietongzhihuidaping" />,
module: ResourceTypes.Viz,
},
{
name: 'views',
title: t('nav.views'),
icon: <i className="iconfont icon-24gf-table" />,
module: ResourceTypes.View,
},
{
name: 'sources',
title: t('nav.sources'),
icon: <i className="iconfont icon-shujukupeizhi" />,
module: ResourceTypes.Source,
},
{
name: 'schedules',
title: t('nav.schedules'),
icon: <i className="iconfont icon-fasongyoujian" />,
module: ResourceTypes.Schedule,
},
{
name: 'members',
title: t('nav.members'),
icon: <i className="iconfont icon-users1" />,
isActive: (_, location) =>
!!location.pathname.match(
/\/organizations\/[\w]{32}\/(members|roles)/,
),
module: ResourceTypes.User,
},
{
name: 'permissions',
title: t('nav.permissions'),
icon: <SafetyCertificateFilled />,
module: ResourceTypes.Manager,
},
{
name: 'toSub',
title: t('nav.settings'),
icon: <SettingFilled />,
isActive: (_, location) => {
const reg = new RegExp(
`\\/organizations\\/[\\w]{32}\\/(${subNavs
.map(({ name }) => name)
.join('|')})`,
);
return !!location.pathname.match(reg);
},
module: ResourceTypes.Manager,
},
],
[subNavs, t],
);
const showSubNav = useMemo(
() => subNavs.some(({ name }) => name === matchModules?.params.moduleName),
[matchModules?.params.moduleName, subNavs],
);
const handleChangeThemeFn = useCallback(
(theme: ThemeKeyType) => {
if (themeKey !== theme) {
dispatch(themeSlice.actions.changeTheme(theme));
changeAntdTheme(theme);
saveTheme(theme);
}
},
[dispatch, themeKey],
);
const userMenuSelect = useCallback(
({ key }) => {
switch (key) {
case 'profile':
setProfileVisible(true);
break;
case 'logout':
dispatch(
logout(() => {
history.replace('/');
}),
);
break;
case 'password':
setModifyPasswordVisible(true);
break;
case 'zh':
case 'en':
if (i18n.language !== key) {
changeLang(key);
}
break;
case 'dark':
case 'light':
handleChangeThemeFn(key);
break;
default:
break;
}
},
[dispatch, history, i18n, handleChangeThemeFn],
);
const onSetPolling = useCallback(
(polling: boolean) => {
dispatch(actions.setDownloadPolling(polling));
},
[dispatch, actions],
);
return (
<>
<MainNav>
<Brand onClick={brandClick}>
<img src={logo} alt="logo" />
</Brand>
<Nav>
{navs.map(({ name, title, icon, isActive, module }) => {
return name !== 'toSub' || subNavs.length > 0 ? (
<Access
key={name}
type="module"
module={module}
level={PermissionLevels.Enable}
>
<Tooltip title={title} placement="right">
<NavItem
to={`/organizations/${orgId}/${
name === 'toSub' ? subNavs[0].name : name
}`}
activeClassName="active"
{...(isActive && { isActive })}
>
{icon}
</NavItem>
</Tooltip>
</Access>
) : null;
})}
</Nav>
<Toolbar>
<DownloadListPopup
polling={downloadPolling}
setPolling={onSetPolling}
onLoadTasks={loadTasks}
onDownloadFile={item => {
if (item.id) {
downloadFile(item.id).then(() => {
dispatch(actions.setDownloadPolling(true));
});
}
}}
/>
{systemInfo?.tenantManagementMode ===
TenantManagementMode.Platform && (
<Popup
content={<OrganizationList />}
trigger={['click']}
placement="rightBottom"
onVisibleChange={organizationListVisibleChange}
>
<li>
<Tooltip title={t('nav.organization.title')} placement="right">
<Avatar
src={`${BASE_RESOURCE_URL}${currentOrganization?.avatar}`}
>
<BankFilled />
</Avatar>
</Tooltip>
</li>
</Popup>
)}
<Popup
content={
<Menu
prefixCls="ant-dropdown-menu"
selectable={false}
onClick={userMenuSelect}
>
<MenuListItem
key="language"
prefix={<GlobalOutlined className="icon" />}
title={<p>{t('nav.account.switchLanguage.title')}</p>}
sub
>
<MenuListItem key="zh">中文</MenuListItem>
<MenuListItem key="en">English</MenuListItem>
</MenuListItem>
<MenuListItem
key="theme"
prefix={<SkinOutlined className="icon" />}
title={<p>{t('nav.account.switchTheme.title')}</p>}
sub
>
<MenuListItem key="light" prefix={<ThemeBadge />}>
{t('nav.account.switchTheme.light')}
</MenuListItem>
<MenuListItem
key="dark"
prefix={<ThemeBadge background={BLACK} />}
>
{t('nav.account.switchTheme.dark')}
</MenuListItem>
</MenuListItem>
<Menu.Divider />
<MenuListItem
key="profile"
prefix={<ProfileOutlined className="icon" />}
>
<p>{t('nav.account.profile.title')}</p>
</MenuListItem>
<MenuListItem
key="password"
prefix={<FormOutlined className="icon" />}
>
<p>{t('nav.account.changePassword.title')}</p>
</MenuListItem>
<MenuListItem
key="logout"
prefix={<ExportOutlined className="icon" />}
>
<p>{t('nav.account.logout.title')}</p>
</MenuListItem>
</Menu>
}
trigger={['click']}
placement="rightBottom"
>
<li>
<Avatar src={`${BASE_RESOURCE_URL}${loggedInUser?.avatar}`}>
<UserOutlined />
</Avatar>
</li>
</Popup>
</Toolbar>
<Profile visible={profileVisible} onCancel={hideProfile} />
<ModifyPassword
visible={modifyPasswordVisible}
onCancel={hideModifyPassword}
/>
</MainNav>
{showSubNav && (
<SubNav>
<List
dataSource={subNavs}
renderItem={({ name, title, icon }) => (
<SubNavTitle
key={name}
to={`/organizations/${orgId}/${name}`}
activeClassName="active"
>
{cloneElement(icon, { className: 'prefix' })}
<h4>{title}</h4>
</SubNavTitle>
)}
/>
</SubNav>
)}
</>
);
}