mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-04 00:49:39 +08:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

chore: replace react-sticky to react-sticky-box in Tabs demo (#39898)

Browse Source 
* docs: replace react-sticky to react-sticky-box in Tabs demo

* test: fix test case
This commit is contained in:
afc163 2022-12-29 18:37:06 +08:00 committed by yoyo837
parent 3ed7ec906e
commit b554e061ee
7 changed files with 232 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.dumi/theme/common/styles/Demo.tsx
View File

@ -24,7 +24,6 @@ export default () => {
display: inline-block;
width: 100%;
margin: 0 0 16px;
overflow: hidden;
border: 1px solid ${token.colorSplit};
border-radius: ${token.borderRadius}px;
transition: all 0.2s;
@ -40,6 +39,7 @@ export default () => {
&,
.code-box-demo {
background-color: ${token.colorBgContainer};
border-radius: ${token.borderRadius}px;
&[data-compact] {
padding: 0;

1
.jest.js
View File

@ -4,6 +4,7 @@ const compileModules = [
'react-dnd-html5-backend',
'@react-dnd',
'dnd-core',
'react-sticky-box',
'tween-one',
'@babel',
'@ant-design',

219
components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -934,140 +934,139 @@ exports[`renders ./components/tabs/demo/custom-add-trigger.tsx extend context co
`;
exports[`renders ./components/tabs/demo/custom-tab-bar.tsx extend context correctly 1`] = `
<div>
<div
class="ant-tabs ant-tabs-top"
>
<div
class="ant-tabs ant-tabs-top"
style="z-index:1"
>
<div>
<div />
<div
class="ant-tabs-nav"
role="tablist"
style="background:#ffffff"
>
<div
class="ant-tabs-nav"
role="tablist"
style="z-index:1"
class="ant-tabs-nav-wrap"
>
<div
class="ant-tabs-nav-wrap"
class="ant-tabs-nav-list"
style="transform:translate(0px, 0px)"
>
<div
class="ant-tabs-nav-list"
style="transform:translate(0px, 0px)"
class="ant-tabs-tab ant-tabs-tab-active"
data-node-key="1"
>
<div
class="ant-tabs-tab ant-tabs-tab-active"
data-node-key="1"
aria-selected="true"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
<div
aria-selected="true"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Tab 1
</div>
Tab 1
</div>
<div
class="ant-tabs-tab"
data-node-key="2"
>
<div
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Tab 2
</div>
</div>
<div
class="ant-tabs-tab"
data-node-key="3"
>
<div
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Tab 3
</div>
</div>
<div
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
/>
</div>
</div>
<div
class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
style="z-index:1"
>
<button
aria-controls="null-more-popup"
aria-expanded="false"
aria-haspopup="listbox"
aria-hidden="true"
class="ant-tabs-nav-more"
id="null-more"
style="visibility:hidden;order:1"
tabindex="-1"
type="button"
<div
class="ant-tabs-tab"
data-node-key="2"
>
<span
aria-label="ellipsis"
class="anticon anticon-ellipsis"
role="img"
>
<svg
aria-hidden="true"
data-icon="ellipsis"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
/>
</svg>
</span>
</button>
<div>
<div
class="ant-tabs-dropdown"
style="opacity:0"
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-menu-list="true"
id="null-more-popup"
role="listbox"
tabindex="-1"
/>
<div
aria-hidden="true"
style="display:none"
/>
Tab 2
</div>
</div>
<div
class="ant-tabs-tab"
data-node-key="3"
>
<div
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Tab 3
</div>
</div>
<div
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
/>
</div>
</div>
<div
class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
style="background:#ffffff"
>
<button
aria-controls="null-more-popup"
aria-expanded="false"
aria-haspopup="listbox"
aria-hidden="true"
class="ant-tabs-nav-more"
id="null-more"
style="visibility:hidden;order:1"
tabindex="-1"
type="button"
>
<span
aria-label="ellipsis"
class="anticon anticon-ellipsis"
role="img"
>
<svg
aria-hidden="true"
data-icon="ellipsis"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
/>
</svg>
</span>
</button>
<div>
<div
class="ant-tabs-dropdown"
style="opacity:0"
>
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-menu-list="true"
id="null-more-popup"
role="listbox"
tabindex="-1"
/>
<div
aria-hidden="true"
style="display:none"
/>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-tabs-content-holder"
>
<div
class="ant-tabs-content-holder"
class="ant-tabs-content ant-tabs-content-top"
>
<div
class="ant-tabs-content ant-tabs-content-top"
aria-hidden="false"
class="ant-tabs-tabpane ant-tabs-tabpane-active"
role="tabpanel"
style="height:200px"
tabindex="0"
>
<div
aria-hidden="false"
class="ant-tabs-tabpane ant-tabs-tabpane-active"
role="tabpanel"
style="height:200px"
tabindex="0"
>
Content of Tab Pane 1
</div>
Content of Tab Pane 1
</div>
</div>
</div>

211
components/tabs/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -820,122 +820,121 @@ exports[`renders ./components/tabs/demo/custom-add-trigger.tsx correctly 1`] = `
`;
exports[`renders ./components/tabs/demo/custom-tab-bar.tsx correctly 1`] = `
<div>
<div
class="ant-tabs ant-tabs-top"
>
<div
class="ant-tabs ant-tabs-top"
style="z-index:1"
>
<div>
<div />
<div
class="ant-tabs-nav"
role="tablist"
style="z-index:1"
>
<div
class="ant-tabs-nav-wrap"
>
<div
class="ant-tabs-nav-list"
style="transform:translate(0px, 0px)"
>
<div
class="ant-tabs-tab ant-tabs-tab-active"
data-node-key="1"
>
<div
aria-selected="true"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Tab 1
</div>
</div>
<div
class="ant-tabs-tab"
data-node-key="2"
>
<div
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Tab 2
</div>
</div>
<div
class="ant-tabs-tab"
data-node-key="3"
>
<div
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Tab 3
</div>
</div>
<div
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
/>
</div>
</div>
<div
class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
style="z-index:1"
>
<button
aria-controls="null-more-popup"
aria-expanded="false"
aria-haspopup="listbox"
aria-hidden="true"
class="ant-tabs-nav-more"
id="null-more"
style="visibility:hidden;order:1"
tabindex="-1"
type="button"
>
<span
aria-label="ellipsis"
class="anticon anticon-ellipsis"
role="img"
>
<svg
aria-hidden="true"
data-icon="ellipsis"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
/>
</svg>
</span>
</button>
</div>
</div>
</div>
<div
class="ant-tabs-content-holder"
class="ant-tabs-nav"
role="tablist"
style="background:#ffffff"
>
<div
class="ant-tabs-content ant-tabs-content-top"
class="ant-tabs-nav-wrap"
>
<div
aria-hidden="false"
class="ant-tabs-tabpane ant-tabs-tabpane-active"
role="tabpanel"
style="height:200px"
tabindex="0"
class="ant-tabs-nav-list"
style="transform:translate(0px, 0px)"
>
Content of Tab Pane 1
<div
class="ant-tabs-tab ant-tabs-tab-active"
data-node-key="1"
>
<div
aria-selected="true"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Tab 1
</div>
</div>
<div
class="ant-tabs-tab"
data-node-key="2"
>
<div
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Tab 2
</div>
</div>
<div
class="ant-tabs-tab"
data-node-key="3"
>
<div
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Tab 3
</div>
</div>
<div
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
/>
</div>
</div>
<div
class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
style="background:#ffffff"
>
<button
aria-controls="null-more-popup"
aria-expanded="false"
aria-haspopup="listbox"
aria-hidden="true"
class="ant-tabs-nav-more"
id="null-more"
style="visibility:hidden;order:1"
tabindex="-1"
type="button"
>
<span
aria-label="ellipsis"
class="anticon anticon-ellipsis"
role="img"
>
<svg
aria-hidden="true"
data-icon="ellipsis"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
/>
</svg>
</span>
</button>
</div>
</div>
</div>
<div
class="ant-tabs-content-holder"
>
<div
class="ant-tabs-content ant-tabs-content-top"
>
<div
aria-hidden="false"
class="ant-tabs-tabpane ant-tabs-tabpane-active"
role="tabpanel"
style="height:200px"
tabindex="0"
>
Content of Tab Pane 1
</div>
</div>
</div>
</div>

4
components/tabs/demo/custom-tab-bar.md
View File

@ -1,7 +1,7 @@
## zh-CN
使用 react-sticky 组件实现吸顶效果。
使用 [react-sticky-box](https://www.npmjs.com/package/react-stickynode) 和 `renderTabBar` 实现吸顶效果。
## en-US
Use react-sticky.
Use [react-sticky-box](https://www.npmjs.com/package/react-stickynode) and `renderTabBar`.

26
components/tabs/demo/custom-tab-bar.tsx
View File

@ -1,13 +1,7 @@
import React from 'react';
import type { TabsProps } from 'antd';
import { Tabs } from 'antd';
import { Sticky, StickyContainer } from 'react-sticky';
const renderTabBar: TabsProps['renderTabBar'] = (props, DefaultTabBar) => (
<Sticky bottomOffset={80}>
{({ style }) => <DefaultTabBar {...props} style={{ zIndex: 1, ...style }} />}
</Sticky>
);
import { Tabs, theme } from 'antd';
import StickyBox from 'react-sticky-box';
const items = new Array(3).fill(null).map((_, i) => {
const id = String(i + 1);
@ -19,10 +13,16 @@ const items = new Array(3).fill(null).map((_, i) => {
};
});
const App: React.FC = () => (
<StickyContainer>
<Tabs defaultActiveKey="1" renderTabBar={renderTabBar} items={items} />
</StickyContainer>
);
const App: React.FC = () => {
const {
token: { colorBgContainer },
} = theme.useToken();
const renderTabBar: TabsProps['renderTabBar'] = (props, DefaultTabBar) => (
<StickyBox offsetTop={0} offsetBottom={20} style={{ zIndex: 1 }}>
<DefaultTabBar {...props} style={{ background: colorBgContainer }} />
</StickyBox>
);
return <Tabs defaultActiveKey="1" renderTabBar={renderTabBar} items={items} />;
};
export default App;

3
package.json
View File

@ -184,7 +184,6 @@
"@types/react-dom": "^18.0.0",
"@types/react-highlight-words": "^0.16.4",
"@types/react-resizable": "^3.0.0",
"@types/react-sticky": "^6.0.4",
"@types/react-window": "^1.8.2",
"@types/throttle-debounce": "^5.0.0",
"@types/warning": "^3.0.0",
@ -262,7 +261,7 @@
"react-infinite-scroll-component": "^6.1.0",
"react-resizable": "^3.0.1",
"react-router-dom": "^6.0.2",
"react-sticky": "^6.0.3",
"react-sticky-box": "^1.0.2",
"react-window": "^1.8.5",
"remark": "^14.0.1",
"remark-cli": "^11.0.0",