GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

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

* test: fix test case
pull/39901/head
afc163 2 years ago
committed by GitHub
parent
9aec72c395
commit
cf41f81dc7
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 206 additions and 208 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      .dumi/theme/common/styles/Demo.tsx
  2. 1
      .jest.js
  3. 205
      components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
  4. 173
      components/tabs/__tests__/__snapshots__/demo.test.ts.snap
  5. 4
      components/tabs/demo/custom-tab-bar.md
  6. 26
      components/tabs/demo/custom-tab-bar.tsx
  7. 3
      package.json

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',

205
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>
<div
class="ant-tabs-tab"
data-node-key="2"
>
<div
class="ant-tabs-tab"
data-node-key="2"
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
<div
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Tab 2
</div>
Tab 2
</div>
</div>
<div
class="ant-tabs-tab"
data-node-key="3"
>
<div
class="ant-tabs-tab"
data-node-key="3"
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
<div
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Tab 3
</div>
Tab 3
</div>
<div
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
/>
</div>
<div
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
/>
</div>
<div
class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
style="z-index:1"
</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"
>
<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"
>
<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"
<svg
aria-hidden="true"
data-icon="ellipsis"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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"
<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"
/>
</div>
</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>

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

@ -820,121 +820,120 @@ 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="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>
<div
class="ant-tabs-tab"
data-node-key="2"
>
<div
class="ant-tabs-tab"
data-node-key="2"
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
<div
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Tab 2
</div>
Tab 2
</div>
</div>
<div
class="ant-tabs-tab"
data-node-key="3"
>
<div
class="ant-tabs-tab"
data-node-key="3"
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
<div
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Tab 3
</div>
Tab 3
</div>
<div
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
/>
</div>
<div
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
/>
</div>
<div
class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
style="z-index:1"
</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"
>
<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"
>
<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"
>
<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>
<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-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>

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",

Write Preview
Loading…
Cancel
Save