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

Jump to bottom

Feat/menu arrow #1813

Merged
merged 6 commits into from
Dec 16, 2022
Merged

Feat/menu arrow #1813

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
78b1c12
feat: remove popup menu arrow animation in level 2
xiaosansiji Dec 15, 2022
81c7a1d
chore: remove useless log
xiaosansiji Dec 15, 2022
c641c85
chore: add menu demo style in react
xiaosansiji Dec 15, 2022
f400b70
chore: optimize menu demo
xiaosansiji Dec 15, 2022
f8eec2c
test: update snapshot
xiaosansiji Dec 15, 2022
677f268
Merge branch 'develop' into feat/menu-arrow
xiaosansiji Dec 16, 2022
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
2 changes: 1 addition & 1 deletion src/_common
Open in desktop
Submodule _common updated 6 files
+2 −1 js/global-config/default-config.ts
+5 −5 js/global-config/locale/en_US.ts
+5 −5 js/global-config/locale/ja_JP.ts
+5 −5 js/global-config/locale/ko_KR.ts
+5 −5 js/global-config/locale/zh_CN.ts
+37 −0 style/web/components/menu/_docs.less
8 changes: 5 additions & 3 deletions src/menu/SubMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export interface SubMenuWithCustomizeProps extends SubMenuProps {

const SubAccordion: FC<SubMenuWithCustomizeProps> = (props) => {
const { content, children = content, disabled, icon, title, value, className, style, level = 1 } = props;

const { classPrefix } = useConfig();

// popup 状态下控制开关
Expand Down Expand Up @@ -87,7 +88,7 @@ const SubAccordion: FC<SubMenuWithCustomizeProps> = (props) => {
})}
>
{icon} <span className={`${classPrefix}-menu__content`}>{title}</span>
<FakeArrow style={fakeArrowStyle} isActive={isOpen} disabled={disabled} />
<FakeArrow style={fakeArrowStyle} isActive={level === 1 && isOpen} disabled={disabled} />
</div>
{isPopUp ? (
<div
Expand Down Expand Up @@ -119,7 +120,8 @@ const SubAccordion: FC<SubMenuWithCustomizeProps> = (props) => {
};

const SubTitleMenu: FC<SubMenuWithCustomizeProps> = (props) => {
const { className, style, children, title, value, level } = props;
const { className, style, children, title, value, level = 1 } = props;

const { active, onChange, expandType } = useContext(MenuContext);
const { classPrefix } = useConfig();
const [open, setOpen] = useState(false);
Expand Down Expand Up @@ -167,7 +169,7 @@ const SubTitleMenu: FC<SubMenuWithCustomizeProps> = (props) => {
style={style}
>
<span>{title}</span>
{showPopup && <FakeArrow style={fakeArrowStyle} isActive={open} />}
{showPopup && <FakeArrow style={fakeArrowStyle} isActive={level === 1 && open} />}
</div>
{showPopup && (
<div
Expand Down
16 changes: 5 additions & 11 deletions src/menu/_example/closable-side.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,7 @@
// @ts-nocheck
import React, { useState } from 'react';
import { Menu } from 'tdesign-react';
import {
AppIcon,
CodeIcon,
FileIcon,
UserIcon,
ViewListIcon,
MailIcon,
RollbackIcon,
} from 'tdesign-icons-react';
import { Menu, Button } from 'tdesign-react';
import { AppIcon, CodeIcon, FileIcon, UserIcon, ViewListIcon, MailIcon, RollbackIcon } from 'tdesign-icons-react';

const { SubMenu, MenuItem } = Menu;

Expand All @@ -23,7 +15,9 @@ function ClosableSide() {
collapsed={collapsed}
expandMutex={false}
onChange={(v) => setActive(v)}
operations={<ViewListIcon className="t-menu__operations-icon" onClick={() => setCollapsed(!collapsed)} />}
operations={
<Button variant="text" shape="square" icon={<ViewListIcon />} onClick={() => setCollapsed(!collapsed)} />
}
logo={<span>LOGO</span>}
>
<MenuItem value="0" icon={<AppIcon />}>
Expand Down
31 changes: 26 additions & 5 deletions src/menu/_example/custom-header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,39 @@
// @ts-nocheck
import React, { Fragment, useState } from 'react';
import { Menu } from 'tdesign-react';
import { Menu, Button } from 'tdesign-react';
import { SearchIcon, MailIcon, UserIcon, EllipsisIcon } from 'tdesign-icons-react';

const { HeadMenu, MenuItem } = Menu;

function Single() {
const [active, setActive] = useState('0');
const [darkActive, setDarkActive] = useState('1');

const operations = () => (
<div className="tdesign-demo-menu__operations">
<Button variant="text" shape="square" icon={<SearchIcon />} />
<Button variant="text" shape="square" icon={<MailIcon />} />
<Button variant="text" shape="square" icon={<UserIcon />} />
<Button variant="text" shape="square" icon={<EllipsisIcon />} />
</div>
);

const operationsDark = () => (
<div className="tdesign-demo-menu__operations--dark">
<Button variant="text" shape="square" icon={<SearchIcon />} />
<Button variant="text" shape="square" icon={<MailIcon />} />
<Button variant="text" shape="square" icon={<UserIcon />} />
<Button variant="text" shape="square" icon={<EllipsisIcon />} />
</div>
);

return (
<Fragment>
<HeadMenu
value={active}
onChange={(v) => setActive(v)}
logo={<img src="https://www.tencent.com/img/index/menu_logo_hover.png" width="136" alt="logo" />}
operations={<div className="tdesign-demo-menu__block">自定义内容区域</div>}
logo={<img src="https://tdesign.gtimg.com/site/baseLogo-light.png" width="136" alt="logo" />}
operations={operations()}
style={{ marginBottom: 20 }}
>
<MenuItem value={'0'}>
Expand All @@ -35,8 +54,10 @@ function Single() {
theme="dark"
value={darkActive}
onChange={(v) => setDarkActive(v)}
logo={<img className="margin_0" src="https://www.tencent.com/img/index/menu_logo.png" width="136" alt="logo" />}
operations={<div className="tdesign-demo-menu__block">自定义内容区域</div>}
logo={
<img className="margin_0" src="https://tdesign.gtimg.com/site/baseLogo-dark.png" width="136" alt="logo" />
}
operations={operationsDark()}
>
<MenuItem value={'0'}>
<span>菜单1</span>
Expand Down
4 changes: 2 additions & 2 deletions src/menu/_example/custom-side.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ function CustomSide() {
<Menu
value={active}
onChange={(v) => setActive(v)}
logo={<img src="https://www.tencent.com/img/index/menu_logo_hover.png" width="136" alt="logo" />}
logo={<img src="https://tdesign.gtimg.com/site/baseLogo-light.png" width="136" alt="logo" />}
style={{ marginRight: 20 }}
>
<MenuItem value={'0'}>
Expand Down Expand Up @@ -43,7 +43,7 @@ function CustomSide() {
value={darkActive}
theme="dark"
onChange={(v) => setDarkActive(v)}
logo={<img src="https://www.tencent.com/img/index/menu_logo.png" width="136" alt="logo" />}
logo={<img src="https://tdesign.gtimg.com/site/baseLogo-dark.png" width="136" alt="logo" />}
>
<MenuItem value={'0'}>
<span>仪表盘</span>
Expand Down
4 changes: 2 additions & 2 deletions src/menu/_example/double.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ function Double() {
<HeadMenu
value={active}
onChange={(v) => setActive(v)}
logo={<img src="https://www.tencent.com/img/index/menu_logo_hover.png" width="136" alt="logo" />}
logo={<img src="https://tdesign.gtimg.com/site/baseLogo-light.png" width="136" alt="logo" />}
style={{ marginBottom: 20 }}
>
<SubMenu value="sub-0" title="菜单1">
Expand Down Expand Up @@ -47,7 +47,7 @@ function Double() {
theme="dark"
value={darkActive}
onChange={(v) => setDarkActive(v)}
logo={<img src="https://www.tencent.com/img/index/menu_logo.png" width="136" alt="logo" />}
logo={<img src="https://tdesign.gtimg.com/site/baseLogo-dark.png" width="136" alt="logo" />}
>
<SubMenu value="sub-0" title="菜单1">
<MenuItem value="1">子菜单1</MenuItem>
Expand Down
67 changes: 40 additions & 27 deletions src/menu/_example/group-side.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
// @ts-nocheck
import React, { useState } from 'react';
import { Menu } from 'tdesign-react';
import { ViewListIcon, ChartIcon, FileIcon } from 'tdesign-icons-react';
import { Menu, Button } from 'tdesign-react';
import {
ViewListIcon,
ServerIcon,
Edit1Icon,
RootListIcon,
CheckIcon,
UserIcon,
AppIcon,
LoginIcon,
} from 'tdesign-icons-react';

const { MenuGroup, MenuItem, SubMenu } = Menu;

Expand All @@ -14,7 +23,9 @@ function GroupSide() {
value={value}
onChange={(value) => setValue(value)}
collapsed={collapsed}
operations={<ViewListIcon onClick={() => setCollapsed(!collapsed)} />}
operations={
<Button variant="text" shape="square" icon={<ViewListIcon />} onClick={() => setCollapsed(!collapsed)} />
}
logo={
collapsed ? (
<img
Expand All @@ -23,37 +34,39 @@ function GroupSide() {
alt="logo"
/>
) : (
<img src="https://www.tencent.com/img/index/menu_logo_hover.png" width="136" alt="logo" />
<img src="https://tdesign.gtimg.com/site/baseLogo-light.png" width="136" alt="logo" />
)
}
>
<MenuGroup title="Classification A">
<MenuItem value="1" icon={<ChartIcon />}>
<MenuGroup title="主导航">
<MenuItem value="item1" icon={<AppIcon />}>
仪表盘
</MenuItem>
</MenuGroup>
<MenuGroup title="Classification B">
<MenuItem value="2">调度平台</MenuItem>
<MenuItem value="3">菜单内容二很长很长很长很长很长很长很长很长</MenuItem>
</MenuGroup>
<MenuGroup title="Classification C">
<MenuItem value="4">精准监控</MenuItem>
<SubMenu value="5" title={<span>资源列表</span>} icon={<FileIcon />}>
<MenuGroup title="inner Classification D">
<SubMenu value="2-1" title="二级菜单-1">
<MenuGroup title="inner Classification E">
<MenuItem value="3-1">三级菜单-1</MenuItem>
</MenuGroup>
<MenuItem value="3-2">三级菜单-2</MenuItem>
<MenuItem value="3-3">三级菜单-3</MenuItem>
</SubMenu>
</MenuGroup>
<MenuGroup title="inner Classification E">
<MenuItem value="2-2">
<span>二级菜单-2</span>
</MenuItem>
</MenuGroup>
<MenuGroup title="组件">
<SubMenu title="列表项" value="2-1" icon={<ServerIcon />}>
<MenuItem value="2-1-1">基础列表项</MenuItem>
<MenuItem value="2-1-2">卡片列表项</MenuItem>
<MenuItem value="2-1-3">筛选列表项</MenuItem>
<MenuItem value="2-1-4">树状筛选列表项</MenuItem>
</SubMenu>
<MenuItem value="2-2" icon={<Edit1Icon />}>
表单项
</MenuItem>
<MenuItem value="2-3" icon={<RootListIcon />}>
详情页
</MenuItem>
<MenuItem value="2-4" icon={<CheckIcon />}>
结果页
</MenuItem>
</MenuGroup>
<MenuGroup title="更多">
<MenuItem value="item3" icon={<UserIcon />}>
个人页
</MenuItem>
<MenuItem value="item4" icon={<LoginIcon />}>
登录页
</MenuItem>
</MenuGroup>
</Menu>
);
Expand Down
15 changes: 12 additions & 3 deletions src/menu/_example/multi-side.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// @ts-nocheck
import React, { Fragment, useState } from 'react';
import { Menu } from 'tdesign-react';
import { Menu, Button } from 'tdesign-react';
import { AppIcon, CodeIcon, FileIcon, UserIcon, ViewListIcon, MailIcon, RollbackIcon } from 'tdesign-icons-react';

const { SubMenu, MenuItem } = Menu;
Expand All @@ -23,7 +23,9 @@ function MultiSide() {
expanded={expands}
onExpand={(values) => setExpands(values)}
onChange={(v) => setActive(v)}
operations={<ViewListIcon className="t-menu__operations-icon" onClick={() => setCollapsed(!collapsed)} />}
operations={
<Button variant="text" shape="square" icon={<ViewListIcon />} onClick={() => setCollapsed(!collapsed)} />
}
style={{ marginRight: 20 }}
>
<MenuItem value="0" icon={<AppIcon />}>
Expand Down Expand Up @@ -74,7 +76,14 @@ function MultiSide() {
onExpand={(values) => setDarkExpands(values)}
onChange={(v) => setDarkActive(v)}
operations={
<ViewListIcon className="t-menu__operations-icon" onClick={() => setDarkCollapsed(!darkCollapsed)} />
<div className="tdesign-demo-menu-collapse--dark">
<Button
variant="text"
shape="square"
icon={<ViewListIcon />}
onClick={() => setDarkCollapsed(!darkCollapsed)}
/>
</div>
}
>
<MenuItem value="0" icon={<AppIcon />}>
Expand Down
4 changes: 2 additions & 2 deletions src/menu/_example/multiple.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ function Multiple() {
value={active}
expandType="popup"
onChange={(v) => setActive(v)}
logo={<img src="https://www.tencent.com/img/index/menu_logo_hover.png" width="136" alt="logo" />}
logo={<img src="https://tdesign.gtimg.com/site/baseLogo-light.png" width="136" alt="logo" />}
style={{ marginBottom: 20 }}
>
<SubMenu value="0" title="电器">
Expand Down Expand Up @@ -45,7 +45,7 @@ function Multiple() {
value={darkActive}
expandType="popup"
onChange={(v) => setDarkActive(v)}
logo={<img src="https://www.tencent.com/img/index/menu_logo.png" width="136" alt="logo" />}
logo={<img src="https://tdesign.gtimg.com/site/baseLogo-dark.png" width="136" alt="logo" />}
style={{ marginBottom: 20 }}
>
<SubMenu value="0" title="电器">
Expand Down
4 changes: 2 additions & 2 deletions src/menu/_example/single-side.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ function SingleSide() {
<Menu
value={active}
onChange={(v) => setActive(v)}
logo={<img src="https://www.tencent.com/img/index/menu_logo_hover.png" width="136" alt="logo" />}
logo={<img src="https://tdesign.gtimg.com/site/baseLogo-light.png" width="136" alt="logo" />}
style={{ marginRight: 20 }}
>
<MenuItem value={'0'}>
Expand Down Expand Up @@ -43,7 +43,7 @@ function SingleSide() {
value={darkActive}
theme="dark"
onChange={(v) => setDarkActive(v)}
logo={<img src="https://www.tencent.com/img/index/menu_logo.png" width="136" alt="logo" />}
logo={<img src="https://tdesign.gtimg.com/site/baseLogo-dark.png" width="136" alt="logo" />}
>
<MenuItem value={'0'}>
<span>仪表盘</span>
Expand Down
42 changes: 24 additions & 18 deletions src/menu/_example/single.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,40 @@
// @ts-nocheck
import React, { Fragment, useState } from 'react';
import { Menu, MessagePlugin } from 'tdesign-react';
import { UserAddIcon, AppIcon, CallIcon } from 'tdesign-icons-react';
import { Menu, MessagePlugin, Button } from 'tdesign-react';
import { UserAddIcon, AppIcon, CallIcon, SearchIcon, MailIcon, UserIcon, EllipsisIcon } from 'tdesign-icons-react';

const { HeadMenu, MenuItem } = Menu;

function Single() {
const [active, setActive] = useState('0');
const [darkActive, setDarkActive] = useState('1');

const operations = () => (
<div className="tdesign-demo-menu__operations">
<Button variant="text" shape="square" icon={<SearchIcon />} />
<Button variant="text" shape="square" icon={<MailIcon />} />
<Button variant="text" shape="square" icon={<UserIcon />} />
<Button variant="text" shape="square" icon={<EllipsisIcon />} />
</div>
);

const operationsDark = () => (
<div className="tdesign-demo-menu__operations--dark">
<Button variant="text" shape="square" icon={<SearchIcon />} />
<Button variant="text" shape="square" icon={<MailIcon />} />
<Button variant="text" shape="square" icon={<UserIcon />} />
<Button variant="text" shape="square" icon={<EllipsisIcon />} />
</div>
);

return (
<Fragment>
<HeadMenu
theme="light"
value={active}
onChange={(v) => setActive(v)}
logo={<img src="https://www.tencent.com/img/index/menu_logo_hover.png" width="136" alt="logo" />}
operations={
<>
<UserAddIcon className="t-menu__operations-icon" />
<AppIcon className="t-menu__operations-icon" />
<CallIcon className="t-menu__operations-icon" />
</>
}
logo={<img src="https://tdesign.gtimg.com/site/baseLogo-light.png" width="136" alt="logo" />}
operations={operations()}
style={{ marginBottom: 20 }}
>
<MenuItem value={'0'} onClick={() => MessagePlugin.info('click 菜单1')}>
Expand All @@ -43,14 +55,8 @@ function Single() {
theme="dark"
value={darkActive}
onChange={(v) => setDarkActive(v)}
logo={<img src="https://www.tencent.com/img/index/menu_logo.png" width="136" alt="logo" />}
operations={
<>
<UserAddIcon className="t-menu__operations-icon" />
<AppIcon className="t-menu__operations-icon" />
<CallIcon className="t-menu__operations-icon" />
</>
}
logo={<img src="https://tdesign.gtimg.com/site/baseLogo-dark.png" width="136" alt="logo" />}
operations={operationsDark()}
>
<MenuItem value={'0'}>
<span>菜单1</span>
Expand Down
Loading