mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +08:00
Code Issues Actions 18 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 GitHub
parent 9aec72c395
commit cf41f81dc7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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; display: inline-block;
width: 100%; width: 100%;
margin: 0 0 16px; margin: 0 0 16px;
overflow: hidden;
border: 1px solid ${token.colorSplit}; border: 1px solid ${token.colorSplit};
border-radius: ${token.borderRadius}px; border-radius: ${token.borderRadius}px;
transition: all 0.2s; transition: all 0.2s;
@ -40,6 +39,7 @@ export default () => {
&, &,
.code-box-demo { .code-box-demo {
background-color: ${token.colorBgContainer}; background-color: ${token.colorBgContainer};
border-radius: ${token.borderRadius}px;
&[data-compact] { &[data-compact] {
padding: 0; padding: 0;

1
.jest.js
View File

@ -4,6 +4,7 @@ const compileModules = [
'react-dnd-html5-backend', 'react-dnd-html5-backend',
'@react-dnd', '@react-dnd',
'dnd-core', 'dnd-core',
'react-sticky-box',
'tween-one', 'tween-one',
'@babel', '@babel',
'@ant-design', '@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`] = ` exports[`renders ./components/tabs/demo/custom-tab-bar.tsx extend context correctly 1`] = `
<div> <div
class="ant-tabs ant-tabs-top"
>
<div <div
class="ant-tabs ant-tabs-top" style="z-index:1"
> >
<div> <div
<div /> class="ant-tabs-nav"
role="tablist"
style="background:#ffffff"
>
<div <div
class="ant-tabs-nav" class="ant-tabs-nav-wrap"
role="tablist"
style="z-index:1"
> >
<div <div
class="ant-tabs-nav-wrap" class="ant-tabs-nav-list"
style="transform:translate(0px, 0px)"
> >
<div <div
class="ant-tabs-nav-list" class="ant-tabs-tab ant-tabs-tab-active"
style="transform:translate(0px, 0px)" data-node-key="1"
> >
<div <div
class="ant-tabs-tab ant-tabs-tab-active" aria-selected="true"
data-node-key="1" class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
> >
<div Tab 1
aria-selected="true"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Tab 1
</div>
</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> <div
<div class="ant-tabs-tab"
class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden" data-node-key="2"
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
class="ant-tabs-dropdown" aria-selected="false"
style="opacity:0" class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
> >
<ul Tab 2
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
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> </div>
</div>
<div
class="ant-tabs-content-holder"
>
<div <div
class="ant-tabs-content-holder" class="ant-tabs-content ant-tabs-content-top"
> >
<div <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 Content of Tab Pane 1
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> </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`] = ` exports[`renders ./components/tabs/demo/custom-tab-bar.tsx correctly 1`] = `
<div> <div
class="ant-tabs ant-tabs-top"
>
<div <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 <div
class="ant-tabs-content-holder" class="ant-tabs-nav"
role="tablist"
style="background:#ffffff"
> >
<div <div
class="ant-tabs-content ant-tabs-content-top" class="ant-tabs-nav-wrap"
> >
<div <div
aria-hidden="false" class="ant-tabs-nav-list"
class="ant-tabs-tabpane ant-tabs-tabpane-active" style="transform:translate(0px, 0px)"
role="tabpanel"
style="height:200px"
tabindex="0"
> >
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> </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> </div>
</div> </div>

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

@ -1,7 +1,7 @@
## zh-CN ## zh-CN
使用 react-sticky 组件实现吸顶效果。 使用 [react-sticky-box](https://www.npmjs.com/package/react-stickynode) 和 `renderTabBar` 实现吸顶效果。
## en-US ## 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 React from 'react';
import type { TabsProps } from 'antd'; import type { TabsProps } from 'antd';
import { Tabs } from 'antd'; import { Tabs, theme } from 'antd';
import { Sticky, StickyContainer } from 'react-sticky'; import StickyBox from 'react-sticky-box';
const renderTabBar: TabsProps['renderTabBar'] = (props, DefaultTabBar) => (
<Sticky bottomOffset={80}>
{({ style }) => <DefaultTabBar {...props} style={{ zIndex: 1, ...style }} />}
</Sticky>
);
const items = new Array(3).fill(null).map((_, i) => { const items = new Array(3).fill(null).map((_, i) => {
const id = String(i + 1); const id = String(i + 1);
@ -19,10 +13,16 @@ const items = new Array(3).fill(null).map((_, i) => {
}; };
}); });
const App: React.FC = () => ( const App: React.FC = () => {
<StickyContainer> const {
<Tabs defaultActiveKey="1" renderTabBar={renderTabBar} items={items} /> token: { colorBgContainer },
</StickyContainer> } = 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; export default App;

3
package.json
View File

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