Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

imporve(ui):BasicLayout less => css-in-js #201

Merged
merged 5 commits into from
Oct 23, 2023
Merged

imporve(ui):BasicLayout less => css-in-js #201

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4a5e3a0
feat(): BasicLayout component less => css-in-js
Vanleehao Sep 27, 2023
2b33af7
imporve(BasicLayout): less => css-in-js
Vanleehao Oct 20, 2023
8ad9e13
merge master
Vanleehao Oct 20, 2023
2be4b65
chore(ui): Remove obsolete files
Vanleehao Oct 20, 2023
0cc0f99
chore(merge): Merge master branch and fix conflicts
dengfuping Oct 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,8 @@
"editor.defaultFormatter": "esbenp.prettier-vscode",
"files.associations": {
"*.svg": "html"
},
"[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
}
}
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
"@emotion/css": "^11.11.2",
"@emotion/react": "^11.11.1",
"@emotion/server": "^11.11.0",
"@chenshuai2144/less2cssinjs": "^1.0.7",
"@qixian.cs/github-contributors-list": "^1.1.0",
"@stackblitz/sdk": "^1.9.0",
"@testing-library/dom": "^9.3.3",
Expand Down
134 changes: 0 additions & 134 deletions packages/ui/src/BasicLayout/Header.less
View file
Open in desktop

This file was deleted.

103 changes: 51 additions & 52 deletions packages/ui/src/BasicLayout/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
CopyrightOutlined,
ReadFilled,
UserOutlined,
UserFilled,
} from '@oceanbase/icons';
import { ConfigProvider, Button, Dropdown, Menu, Modal, Space, Tooltip } from '@oceanbase/design';
import classNames from 'classnames';
Expand All @@ -13,19 +14,17 @@ import { OB_SITE_LINK } from '../constant';
import type { Locale } from '../interface';
import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
import LocaleWrapper from '../locale/LocaleWrapper';
import { directTo, getPrefix } from '../_util';
import { directTo } from '../_util';
import useNavigate from '../_util/useNavigate';
import zhCN from './locale/zh-CN';
// @ts-ignore
// 自定义 SVG 图标需要将其导入为图片，而不能是 ReactComponent，因为需要依赖 webpack 插件
// 虽然本地开发可以生效，但构建后的产物在上层项目中不会生效，导致 SVG 展示为空
import logoImg from '../assets/logo/oceanbase_logo.svg';
// @ts-ignore
import logoImgDark from '../assets/logo/oceanbase_logo_dark.svg';
// @ts-ignore
// 自定义 SVG 图标需要将其导入为图片，而不能是 ReactComponent，因为需要依赖 webpack 插件
// 虽然本地开发可以生效，但构建后的产物在上层项目中不会生效，导致 SVG 展示为空
import UserSvg from '../assets/user.svg';
import LocaleDropdown from '../LocaleDropdown';
import './Header.less';
import useStyle from './style/Header';

export type OverlayFunc = () => React.ReactElement;

Expand All @@ -48,6 +47,7 @@ export interface AppData {
}

export interface HeaderProps extends LocaleWrapperProps {
prefixCls?: string;
// 单是否收起状态 菜单收起状态只展示：icon, 展开状态展示：icon 文字
showLabel?: boolean;
style?: React.CSSProperties;
Expand Down Expand Up @@ -78,9 +78,8 @@ export interface HeaderProps extends LocaleWrapperProps {
langs?: Locale[];
}

const prefix = getPrefix('layout-header');

const Header: React.FC<HeaderProps> = ({
prefixCls: customizePrefixCls,
showLabel = true,
title,
extra,
Expand All @@ -102,9 +101,13 @@ const Header: React.FC<HeaderProps> = ({
langs,
...restProps
}) => {
const { theme } = useContext(ConfigProvider.ConfigContext);
const { theme, getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('pro-basic-layout-header', `${customizePrefixCls}-header`);
const { wrapSSR } = useStyle(prefixCls);

const navigate = useNavigate();
const [visible, setVisible] = useState(false);

// 是否为欢迎页
// 主要是为了处理与欢迎页搭配使用的场景
const isWelcome = pathname === welcomePath;
Expand All @@ -128,50 +131,54 @@ const Header: React.FC<HeaderProps> = ({
}}
>
{welcomePath && <Menu.Item key="welcome">{locale.welcome}</Menu.Item>}
{docsPath && <Menu.Item key="viewDocs">{locale.viewDocs}</Menu.Item>}
{pdfPath && <Menu.Item key="downloadDocs">{locale.downloadDocs}</Menu.Item>}
<Menu.Item key="about">{`${locale.about}${
appData.shortName ? ` ${appData.shortName}` : ''
}`}</Menu.Item>
</Menu>
);

return (
return wrapSSR(
<div
{...restProps}
className={classNames(`${prefix}`, {
[`${prefix}-welcome`]: isWelcome,
className={classNames(prefixCls, {
[`${prefixCls}-welcome`]: isWelcome,
})}
>
<div className={`${prefix}-content`}>
<div className={`${prefixCls}-content`}>
<img
src={simpleLogoUrl}
alt=""
onClick={() => {
navigate?.('/');
}}
className={`${prefix}-logo`}
className={`${prefixCls}-logo`}
/>
{title && <div className={`${prefix}-title`}>{title}</div>}

{title && <div className={`${prefixCls}-title`}>{title}</div>}
{showLabel ? (
<div className={`${prefix}-extra ${prefix}-extra-with-label`}>
<div className={`${prefixCls}-extra ${prefixCls}-extra-with-label`}>
{extra}
{showHelp && (
<Dropdown overlay={helpMenu}>
<Space className={`${prefix}-extra-item`}>
<Space className={`${prefixCls}-extra-item`}>
<BulbOutlined />
<span data-testid="help">{locale.help}</span>
</Space>
</Dropdown>
)}

{showLocale && (
<span className={`${prefix}-extra-item`}>
<span className={`${prefixCls}-extra-item`}>
<LocaleDropdown locales={locales || langs} />
</span>
)}

{userMenu ? (
<Dropdown overlay={userMenu}>
<Button shape="round" size="small">
<Space className={`${prefix}-extra-item`}>
<Space className={`${prefixCls}-extra-item`}>
<UserOutlined />
<span>{username}</span>
</Space>
Expand All @@ -182,7 +189,7 @@ const Header: React.FC<HeaderProps> = ({
<>
{username ? (
<Button shape="round" size="small">
<Space className={`${prefix}-extra-item`}>
<Space className={`${prefixCls}-extra-item`}>
<UserOutlined />
<span>{username}</span>
</Space>
Expand All @@ -192,56 +199,48 @@ const Header: React.FC<HeaderProps> = ({
)}
</div>
) : (
<div className={`${prefix}-extra`}>
<span className={`${prefix}-extra-item`}>
<div className={`${prefixCls}-extra`}>
<span className={`${prefixCls}-extra-item`}>
<Dropdown overlay={helpMenu}>
<span className={`${prefix}-extra-icon-wrapper`}>
<span className={`${prefixCls}-extra-icon-wrapper`}>
<BulbFilled />
</span>
</Dropdown>
</span>
{docsPath && (
<Tooltip title={locale.viewDocs}>
<span
className={`${prefix}-extra-item`}
className={`${prefixCls}-extra-item`}
onClick={() => {
directTo(docsPath);
}}
>
<span className={`${prefix}-extra-icon-wrapper`}>
<span className={`${prefixCls}-extra-icon-wrapper`}>
<ReadFilled />
</span>
</span>
</Tooltip>
)}

{showLocale && (
<span className={`${prefix}-extra-item`}>
<span className={`${prefixCls}-extra-item`}>
<LocaleDropdown showLabel={true} locales={locales || langs} />
</span>
)}

{userMenu ? (
<span className={`${prefix}-extra-item`}>
<span className={`${prefixCls}-extra-item`}>
<Dropdown overlay={userMenu}>
<span className={`${prefix}-extra-user-wrapper`}>
<img
src={UserSvg}
alt=""
className={`${prefix}-extra-user-icon`}
style={{ height: 12 }}
/>
<span className={`${prefix}-extra-username`}>{username}</span>
<span className={`${prefixCls}-extra-user-wrapper`}>
<UserFilled className={`${prefixCls}-extra-user-icon`} />
<span className={`${prefixCls}-extra-username`}>{username}</span>
</span>
</Dropdown>
</span>
) : (
<span className={`${prefix}-extra-item`}>
<span className={`${prefix}-extra-user-wrapper`}>
<img
src={UserSvg}
alt=""
className={`${prefix}-extra-user-icon`}
style={{ height: 12 }}
/>
<span className={`${prefixCls}-extra-item`}>
<span className={`${prefixCls}-extra-user-wrapper`}>
<UserFilled className={`${prefixCls}-extra-user-icon`} />
<span>{username}</span>
</span>
</span>
Expand All @@ -259,17 +258,17 @@ const Header: React.FC<HeaderProps> = ({
setVisible(false);
}}
>
<div className={`${prefix}-about-wrapper`}>
<div className={`${prefix}-about`}>
<img src={logoUrl} alt="" className={`${prefix}-logo`} />
<div className={`${prefix}-release-info`}>
<div className={`${prefix}-version`}>
<div className={`${prefixCls}-about-wrapper`}>
<div className={`${prefixCls}-about`}>
<img src={logoUrl} alt="" className={`${prefixCls}-logo`} />
<div className={`${prefixCls}-release-info`}>
<div className={`${prefixCls}-version`}>
{locale.version}: {appData.version}
</div>
{appData.releaseTime && (
<div
className={`${prefix}-date`}
>{`${locale.releaseTime}: ${appData.releaseTime}`}</div>
<div className={`${prefixCls}-date`}>
{`${locale.releaseTime}: ${appData.releaseTime}`}
</div>
)}
</div>
<div>
Expand All @@ -281,7 +280,7 @@ const Header: React.FC<HeaderProps> = ({
<div
style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
>
<span className={`${prefix}-copyright`}>
<span className={`${prefixCls}-copyright`}>
{locale.right} <CopyrightOutlined /> {moment().year()} {locale.company}
</span>
<img src={theme.isDark ? logoImgDark : logoImg} alt="" style={{ height: 12 }} />
Expand Down
Loading