mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-16 01:41:02 +08:00
github-actions[bot]
GitHub
commit
aacb408f7a
19
.github/workflows/pr-check-merge.yml
vendored
Normal file
19
.github/workflows/pr-check-merge.yml
vendored
Normal file
@ -0,0 +1,19 @@
|
||||
name: PR Check Merge
|
||||
|
||||
on:
|
||||
pull_request_target:
|
||||
types: [opened]
|
||||
|
||||
jobs:
|
||||
comment:
|
||||
runs-on: ubuntu-latest
|
||||
if: (github.event.pull_request.head.ref == 'feature' && github.event.pull_request.base.ref == 'master') || (github.event.pull_request.base.ref == 'feature' && github.event.pull_request.head.ref == 'master')
|
||||
steps:
|
||||
- uses: actions-cool/issues-helper@v2.2.1
|
||||
with:
|
||||
actions: 'create-comment'
|
||||
issue-number: ${{ github.event.number }}
|
||||
body: |
|
||||
Hi @${{ github.event.pull_request.user.login }}。
|
||||
|
||||
**请注意**，当前 PR 是分支间的互相合并，请使用 `BranchAutoMerge` 标签来进行自动合并。切记**不要、不要、不要使用 `Squash`**。
|
||||
@ -15,6 +15,49 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 4.16.0
|
||||
|
||||
`2021-05-24`
|
||||
|
||||
- 🔥 Refactor Menu and supports keyboard operation and optimization of accessibility experience. [#30382](https://github.com/ant-design/ant-design/pull/30382)
|
||||
- Table
|
||||
- 🆕 Table.Summary supports `sticky` mode. [#30631](https://github.com/ant-design/ant-design/pull/30631)
|
||||
- 🐞 Fix the problem that the extra margin of the embedded Table with fixed columns is lost. [#30587](https://github.com/ant-design/ant-design/pull/30587)
|
||||
- 🆕 Table adds the `expandable.fixed` property to set the expansion icon to be fixed. [#29959](https://github.com/ant-design/ant-design/pull/29959)
|
||||
- Upload
|
||||
- 🆕 Upload component `itemRender` adds `actions` call parameters. [#30236](https://github.com/ant-design/ant-design/pull/30236) [@kerm1it](https://github.com/kerm1it)
|
||||
- 🆕 Upload Remove `stopPropagation` from drag event and add `onDrop` callback. [#30319](https://github.com/ant-design/ant-design/pull/30319) [@ebonow](https://github.com/ebonow)
|
||||
- Typography
|
||||
- 🆕 Typography adds support for italics. [#30458](https://github.com/ant-design/ant-design/pull/30458) [@alwaysloseall](https://github.com/alwaysloseall)
|
||||
- 🐞 Fix the flickering problem when configuring `ellipsis={{ suffix:'xxx' }}` in Typography. [#30582](https://github.com/ant-design/ant-design/pull/30582)
|
||||
- Collapse
|
||||
- 💄 Fix the problem of arrow misalignment when Collapse does not specify `header`. [#30586](https://github.com/ant-design/ant-design/pull/30586)
|
||||
- 🐞 Fix Collapse content disappears when set `activeKey` while it is hidden. [#30555](https://github.com/ant-design/ant-design/pull/30555) [@zjffun](https://github.com/zjffun)
|
||||
- 🆕 RadioGroup supports `data-*` and `aria-*` attributes. [#30507](https://github.com/ant-design/ant-design/pull/30507) [@kerm1it](https://github.com/kerm1it)
|
||||
- 🆕 Statistic.CountDown component adds `onChange` event. [#30265](https://github.com/ant-design/ant-design/pull/30265) [@appleshell](https://github.com/appleshell)
|
||||
- 🆕 PageHeader's `breadcrumb` allows to set as a component. [#30019](https://github.com/ant-design/ant-design/pull/30019) [@gepd](https://github.com/gepd)
|
||||
- 🆕 ConfigProvider supports dynamic setting of `prefixCls`. [#30625](https://github.com/ant-design/ant-design/pull/30625) [@kerm1it](https://github.com/kerm1it)
|
||||
- 🐞 Fix the problem that Anchor cannot trigger `onChange` after specifying `getCurrentAnchor`. [#30601](https://github.com/ant-design/ant-design/pull/30601)
|
||||
- 🐞 Fix the problem that the scope of notification box `className` generated by Notification `useNotification` is inconsistent. [#30588](https://github.com/ant-design/ant-design/pull/30588)
|
||||
- 🐞 Fix Tabs `tabBarGutter` property failure. [#30545](https://github.com/ant-design/ant-design/pull/30545)
|
||||
- 💄 Rewrite Space to use `flexGap` instead of `margin` style to deal with layout issues under certain border situations. [#30023](https://github.com/ant-design/ant-design/pull/30023)
|
||||
- 🐞 Fix the wrong border color of Input.Group and Cascader under Form check error state. [#30640](https://github.com/ant-design/ant-design/pull/30640)
|
||||
- 🌐 Internationalization
|
||||
- 🇷🇴 Added Romanian internationalization. [#30419](https://github.com/ant-design/ant-design/pull/30419) [@stefy](https://github.com/stefy)
|
||||
- 🌐 Added Dutch (Netherland 🇳🇱) and Dutch (Belgium 🇧🇪) internationalization. [#30389](https://github.com/ant-design/ant-design/pull/30389) [@lewis-fidlers](https://github.com/lewis-fidlers)
|
||||
- TypeScript
|
||||
- 🤖 Space TypeScript definition supports HTMLAttribute attribute. [#30590](https://github.com/ant-design/ant-design/pull/30590)
|
||||
|
||||
## 4.15.6
|
||||
|
||||
`2021-05-18`
|
||||
|
||||
- 🐞 Upload will ignore `accept` if it's invalidate MIME type to follow native behavior. [#30549](https://github.com/ant-design/ant-design/pull/30549)
|
||||
- 💄 Remove reset style of `th` `text-align`. [#30399](https://github.com/ant-design/ant-design/pull/30399) [@lbwa](https://github.com/lbwa)
|
||||
- 🌐 Locale
|
||||
- 🇮🇳 Improve hi_IN locale. [#30541](https://github.com/ant-design/ant-design/pull/30541) [@jaideepghosh](https://github.com/jaideepghosh)
|
||||
- 🇧🇷 Improve pt-BR locale. [#30532](https://github.com/ant-design/ant-design/pull/30532) [@buzs](https://github.com/buzs)
|
||||
|
||||
## 4.15.5
|
||||
|
||||
`2021-05-10`
|
||||
|
||||
@ -15,6 +15,49 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 4.16.0
|
||||
|
||||
`2021-05-24`
|
||||
|
||||
- 🔥 重构 Menu，支持键盘操作以及无障碍体验优化。[#30382](https://github.com/ant-design/ant-design/pull/30382)
|
||||
- Table
|
||||
- 🆕 Table.Summary 支持 `sticky` 模式。[#30631](https://github.com/ant-design/ant-design/pull/30631)
|
||||
- 🐞 修复有固定列的 Table 内嵌 Table 的额外边距丢失的问题。[#30587](https://github.com/ant-design/ant-design/pull/30587)
|
||||
- 🆕 Table 新增 `expandable.fixed` 属性用于设置扩展图标固定。[#29959](https://github.com/ant-design/ant-design/pull/29959)
|
||||
- Upload
|
||||
- 🆕 Upload 组件 `itemRender` 添加 `actions` 调用参数。[#30236](https://github.com/ant-design/ant-design/pull/30236) [@kerm1it](https://github.com/kerm1it)
|
||||
- 🆕 Upload 从拖动事件中删除 `stopPropagation`，并添加`onDrop` 回调。[#30319](https://github.com/ant-design/ant-design/pull/30319) [@ebonow](https://github.com/ebonow)
|
||||
- Typography
|
||||
- 🆕 Typography 增加斜体字支持。[#30458](https://github.com/ant-design/ant-design/pull/30458) [@alwaysloseall](https://github.com/alwaysloseall)
|
||||
- 🐞 修复 Typography 配置 `ellipsis={{ suffix: 'xxx' }}` 时换行闪动问题。[#30582](https://github.com/ant-design/ant-design/pull/30582)
|
||||
- Collapse
|
||||
- 💄 修复 Collapse 不指定 `header` 时箭头错位的问题。[#30586](https://github.com/ant-design/ant-design/pull/30586)
|
||||
- 🐞 修复 Collapse 隐藏时设置 `activeKey` 时内容会消失的问题。[#30555](https://github.com/ant-design/ant-design/pull/30555) [@zjffun](https://github.com/zjffun)
|
||||
- 🆕 RadioGroup 支持 `data-*` 和 `aria-*` 属性。[#30507](https://github.com/ant-design/ant-design/pull/30507) [@kerm1it](https://github.com/kerm1it)
|
||||
- 🆕 Statistic.CountDown 组件增加 `onChange` 事件。[#30265](https://github.com/ant-design/ant-design/pull/30265) [@appleshell](https://github.com/appleshell)
|
||||
- 🆕 PageHeader 的 `breadcrumb` 中允许设置为组件。[#30019](https://github.com/ant-design/ant-design/pull/30019) [@gepd](https://github.com/gepd)
|
||||
- 🆕 ConfigProvider 支持动态设置 `prefixCls`。[#30625](https://github.com/ant-design/ant-design/pull/30625) [@kerm1it](https://github.com/kerm1it)
|
||||
- 🐞 修复 Anchor 指定 `getCurrentAnchor` 后无法触发 `onChange` 的问题。[#30601](https://github.com/ant-design/ant-design/pull/30601)
|
||||
- 🐞 修复 Notification `useNotification` 生成的通知框 `className` 作用范围不一致的问题。[#30588](https://github.com/ant-design/ant-design/pull/30588)
|
||||
- 🐞 修复 Tabs `tabBarGutter` 属性失效的问题。[#30545](https://github.com/ant-design/ant-design/pull/30545)
|
||||
- 💄 改写 Space 使用 `flexGap` 以代替 `margin` 样式以处理某些边界情况下的布局问题。[#30023](https://github.com/ant-design/ant-design/pull/30023)
|
||||
- 🐞 修复 Form 校验错误状态下 Input.Group 和 Cascader 边框颜色错误。[#30640](https://github.com/ant-design/ant-design/pull/30640)
|
||||
- 🌐 国际化
|
||||
- 🇷🇴 补充罗马尼亚语国际化。[#30419](https://github.com/ant-design/ant-design/pull/30419) [@stefy](https://github.com/stefy)
|
||||
- 🌐 补充荷兰语（荷兰 🇳🇱）及荷兰语（比利时 🇧🇪）国际化。[#30389](https://github.com/ant-design/ant-design/pull/30389) [@lewis-fidlers](https://github.com/lewis-fidlers)
|
||||
- TypeScript
|
||||
- 🤖 Space TypeScript 定义支持 HTMLAttribute 属性。[#30590](https://github.com/ant-design/ant-design/pull/30590)
|
||||
|
||||
## 4.15.6
|
||||
|
||||
`2021-05-18`
|
||||
|
||||
- 🐞 Upload `accept` 将无视无效的 MIME 类型，以更贴近原生行为。[#30549](https://github.com/ant-design/ant-design/pull/30549)
|
||||
- 💄 移除全局样式中对 `th` 的 `text-align` 属性的重置。[#30399](https://github.com/ant-design/ant-design/pull/30399) [@lbwa](https://github.com/lbwa)
|
||||
- 🌐 国际化
|
||||
- 🇮🇳 补充印地语国际化文案。[#30541](https://github.com/ant-design/ant-design/pull/30541) [@jaideepghosh](https://github.com/jaideepghosh)
|
||||
- 🇧🇷 补充葡萄牙语（巴西）国际化文案。[#30532](https://github.com/ant-design/ant-design/pull/30532) [@buzs](https://github.com/buzs)
|
||||
|
||||
## 4.15.5
|
||||
|
||||
`2021-05-10`
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
import { CSSMotionProps, MotionEventHandler, MotionEndEventHandler } from 'rc-motion';
|
||||
import { MotionEvent } from 'rc-motion/lib/interface';
|
||||
|
||||
// ================== Collapse Motion ==================
|
||||
const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
|
||||
const getRealHeight: MotionEventHandler = node => ({ height: node.scrollHeight, opacity: 1 });
|
||||
const getCurrentHeight: MotionEventHandler = node => ({ height: node.offsetHeight });
|
||||
const skipOpacityTransition: MotionEndEventHandler = (_, event) =>
|
||||
(event as TransitionEvent).propertyName === 'height';
|
||||
const skipOpacityTransition: MotionEndEventHandler = (_, event: MotionEvent) =>
|
||||
event?.deadline === true || (event as TransitionEvent).propertyName === 'height';
|
||||
|
||||
const collapseMotion: CSSMotionProps = {
|
||||
motionName: 'ant-motion-collapse',
|
||||
|
||||
@ -163,12 +163,6 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState, Co
|
||||
}
|
||||
|
||||
getCurrentAnchor(offsetTop = 0, bounds = 5): string {
|
||||
const { getCurrentAnchor } = this.props;
|
||||
|
||||
if (typeof getCurrentAnchor === 'function') {
|
||||
return getCurrentAnchor();
|
||||
}
|
||||
|
||||
const linkSections: Array<Section> = [];
|
||||
const container = this.getContainer();
|
||||
this.links.forEach(link => {
|
||||
@ -229,14 +223,15 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState, Co
|
||||
|
||||
setCurrentActiveLink = (link: string) => {
|
||||
const { activeLink } = this.state;
|
||||
const { onChange } = this.props;
|
||||
|
||||
if (activeLink !== link) {
|
||||
this.setState({
|
||||
activeLink: link,
|
||||
});
|
||||
onChange?.(link);
|
||||
const { onChange, getCurrentAnchor } = this.props;
|
||||
if (activeLink === link) {
|
||||
return;
|
||||
}
|
||||
// https://github.com/ant-design/ant-design/issues/30584
|
||||
this.setState({
|
||||
activeLink: typeof getCurrentAnchor === 'function' ? getCurrentAnchor() : link,
|
||||
});
|
||||
onChange?.(link);
|
||||
};
|
||||
|
||||
handleScroll = () => {
|
||||
|
||||
@ -359,6 +359,23 @@ describe('Anchor Render', () => {
|
||||
expect(onChange).toHaveBeenCalledWith(hash2);
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/30584
|
||||
it('should trigger onChange when have getCurrentAnchor', async () => {
|
||||
const hash1 = getHashUrl();
|
||||
const hash2 = getHashUrl();
|
||||
const onChange = jest.fn();
|
||||
const wrapper = mount<Anchor>(
|
||||
<Anchor onChange={onChange} getCurrentAnchor={() => hash1}>
|
||||
<Link href={`#${hash1}`} title={hash1} />
|
||||
<Link href={`#${hash2}`} title={hash2} />
|
||||
</Anchor>,
|
||||
);
|
||||
expect(onChange).toHaveBeenCalledTimes(1);
|
||||
wrapper.instance().handleScrollTo(hash2);
|
||||
expect(onChange).toHaveBeenCalledTimes(2);
|
||||
expect(onChange).toHaveBeenCalledWith(hash2);
|
||||
});
|
||||
|
||||
it('invalid hash', async () => {
|
||||
const wrapper = mount<Anchor>(
|
||||
<Anchor>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { sleep } from '../../../tests/utils';
|
||||
import { resetWarned } from '../../_util/devWarning';
|
||||
|
||||
@ -101,4 +102,39 @@ describe('Collapse', () => {
|
||||
wrapper.find('.ant-collapse-header').simulate('click');
|
||||
expect(wrapper.find('.ant-collapse-item-active').length).toBe(0);
|
||||
});
|
||||
|
||||
it('should end motion when set activeKey while hiding', async () => {
|
||||
jest.useFakeTimers();
|
||||
jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => {
|
||||
setTimeout(cb, 16.66);
|
||||
});
|
||||
|
||||
let setActiveKeyOuter;
|
||||
const Test = () => {
|
||||
const [activeKey, setActiveKey] = React.useState();
|
||||
setActiveKeyOuter = setActiveKey;
|
||||
return (
|
||||
<div hidden>
|
||||
<Collapse activeKey={activeKey}>
|
||||
<Collapse.Panel header="header" key="1">
|
||||
content
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const wrapper = mount(<Test />);
|
||||
|
||||
await act(async () => {
|
||||
setActiveKeyOuter('1');
|
||||
await Promise.resolve();
|
||||
jest.runAllTimers();
|
||||
});
|
||||
|
||||
expect(wrapper.render().find('.ant-motion-collapse').length).toBe(0);
|
||||
|
||||
window.requestAnimationFrame.mockRestore();
|
||||
jest.useRealTimers();
|
||||
});
|
||||
});
|
||||
|
||||
@ -24,7 +24,6 @@
|
||||
> .@{collapse-prefix-cls}-header {
|
||||
position: relative;
|
||||
padding: @collapse-header-padding;
|
||||
padding-left: @collapse-header-padding-extra;
|
||||
color: @heading-color;
|
||||
line-height: @line-height-base;
|
||||
cursor: pointer;
|
||||
@ -32,17 +31,10 @@
|
||||
.clearfix();
|
||||
|
||||
.@{collapse-prefix-cls}-arrow {
|
||||
.iconfont-mixin();
|
||||
|
||||
position: absolute;
|
||||
top: ((@font-size-base * @line-height-base - @font-size-sm) / 2);
|
||||
left: @collapse-header-arrow-left;
|
||||
display: inline-block;
|
||||
padding: @collapse-header-padding;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 0;
|
||||
margin-right: 12px;
|
||||
font-size: @font-size-sm;
|
||||
vertical-align: -1px;
|
||||
|
||||
& svg {
|
||||
transition: transform 0.24s;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { SmileOutlined } from '@ant-design/icons';
|
||||
import ConfigProvider, { ConfigContext } from '..';
|
||||
@ -57,6 +57,30 @@ describe('ConfigProvider', () => {
|
||||
expect(wrapper.find('button').props().className).toEqual('bamboo-btn');
|
||||
});
|
||||
|
||||
it('dynamic prefixCls', () => {
|
||||
const DynamicPrefixCls = () => {
|
||||
const [prefixCls, setPrefixCls] = useState('bamboo');
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={() => setPrefixCls('light')} className="toggle-button">
|
||||
toggle
|
||||
</Button>
|
||||
<ConfigProvider prefixCls={prefixCls}>
|
||||
<ConfigProvider>
|
||||
<Button />
|
||||
</ConfigProvider>
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const wrapper = mount(<DynamicPrefixCls />);
|
||||
|
||||
expect(wrapper.find('button').last().props().className).toEqual('bamboo-btn');
|
||||
wrapper.find('.toggle-button').first().simulate('click');
|
||||
expect(wrapper.find('button').last().props().className).toEqual('light-btn');
|
||||
});
|
||||
|
||||
it('iconPrefixCls', () => {
|
||||
const wrapper = mount(
|
||||
<ConfigProvider iconPrefixCls="bamboo">
|
||||
|
||||
@ -15,18 +15,29 @@ debug: true
|
||||
Config component and icon prefixCls.
|
||||
|
||||
```jsx
|
||||
import { ConfigProvider, Select } from 'antd';
|
||||
import { ConfigProvider, Select, Button } from 'antd';
|
||||
import { SmileOutlined } from '@ant-design/icons';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
// Ant Design site use `es` module for view
|
||||
// but do not replace related lib `lib` with `es`
|
||||
// which do not show correct in site.
|
||||
// We may need do convert in site also.
|
||||
const FormSizeDemo = () => (
|
||||
<ConfigProvider prefixCls="light" iconPrefixCls="bamboo">
|
||||
<SmileOutlined />
|
||||
<Select />
|
||||
</ConfigProvider>
|
||||
);
|
||||
const FormSizeDemo = () => {
|
||||
const [prefixCls, setPrefixCls] = useState('light');
|
||||
return (
|
||||
<div>
|
||||
<Button style={{ marginBottom: '12px' }} type="primary" onClick={() => setPrefixCls('dark')}>
|
||||
toggle prefixCls
|
||||
</Button>
|
||||
<div>
|
||||
<ConfigProvider prefixCls={prefixCls} iconPrefixCls="bamboo">
|
||||
<SmileOutlined />
|
||||
<Select />
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
ReactDOM.render(<FormSizeDemo />, mountNode);
|
||||
```
|
||||
|
||||
@ -149,7 +149,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = props => {
|
||||
|
||||
return suffixCls ? `${mergedPrefixCls}-${suffixCls}` : mergedPrefixCls;
|
||||
},
|
||||
[parentContext.getPrefixCls],
|
||||
[parentContext.getPrefixCls, props.prefixCls],
|
||||
);
|
||||
|
||||
const config = {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import '../../style/themes/default';
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
|
||||
|
||||
@ -3532,6 +3532,92 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
|
||||
>
|
||||
<label
|
||||
class="ant-form-item-required"
|
||||
for="register_gender"
|
||||
title="Gender"
|
||||
>
|
||||
Gender
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="register_gender_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="register_gender_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="register_gender_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="register_gender"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
>
|
||||
select your gender
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
|
||||
@ -15,17 +15,7 @@ Fill in this form to create a new account for you.
|
||||
|
||||
```tsx
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Form,
|
||||
Input,
|
||||
Cascader,
|
||||
Select,
|
||||
Row,
|
||||
Col,
|
||||
Checkbox,
|
||||
Button,
|
||||
AutoComplete,
|
||||
} from 'antd';
|
||||
import { Form, Input, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete } from 'antd';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
@ -221,6 +211,18 @@ const RegistrationForm = () => {
|
||||
</AutoComplete>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="gender"
|
||||
label="Gender"
|
||||
rules={[{ required: true, message: 'Please select gender!' }]}
|
||||
>
|
||||
<Select placeholder="select your gender">
|
||||
<Option value="male">Male</Option>
|
||||
<Option value="female">Female</Option>
|
||||
<Option value="other">Other</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="Captcha" extra="We must make sure that your are a human.">
|
||||
<Row gutter={8}>
|
||||
<Col span={12}>
|
||||
|
||||
@ -182,7 +182,9 @@
|
||||
.@{ant-prefix}-input-group-addon .@{ant-prefix}-select {
|
||||
&.@{ant-prefix}-select-single:not(.@{ant-prefix}-select-customize-input)
|
||||
.@{ant-prefix}-select-selector {
|
||||
background-color: inherit;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -221,9 +223,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
.@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
|
||||
background-color: @form-error-input-bg;
|
||||
.active(@error-color);
|
||||
// cascader
|
||||
.@{ant-prefix}-cascader-picker {
|
||||
&:hover
|
||||
.@{ant-prefix}-cascader-picker-label:hover
|
||||
+ .@{ant-prefix}-cascader-input.@{ant-prefix}-input {
|
||||
border-color: @error-color;
|
||||
}
|
||||
|
||||
&:focus .@{ant-prefix}-cascader-input {
|
||||
background-color: @form-error-input-bg;
|
||||
.active(@error-color);
|
||||
}
|
||||
}
|
||||
|
||||
// transfer
|
||||
|
||||
@ -1067,7 +1067,7 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="user"
|
||||
class="anticon anticon-user"
|
||||
class="anticon anticon-user ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -1108,7 +1108,7 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="team"
|
||||
class="anticon anticon-team"
|
||||
class="anticon anticon-team ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -1511,7 +1511,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="user"
|
||||
class="anticon anticon-user"
|
||||
class="anticon anticon-user ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -1589,7 +1589,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="laptop"
|
||||
class="anticon anticon-laptop"
|
||||
class="anticon anticon-laptop ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -1630,7 +1630,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="notification"
|
||||
class="anticon anticon-notification"
|
||||
class="anticon anticon-notification ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -1770,7 +1770,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="user"
|
||||
class="anticon anticon-user"
|
||||
class="anticon anticon-user ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -1848,7 +1848,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="laptop"
|
||||
class="anticon anticon-laptop"
|
||||
class="anticon anticon-laptop ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -1889,7 +1889,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="notification"
|
||||
class="anticon anticon-notification"
|
||||
class="anticon anticon-notification ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,9 +1,10 @@
|
||||
import * as React from 'react';
|
||||
import { SubMenu as RcSubMenu } from 'rc-menu';
|
||||
import { useFullPath } from 'rc-menu/lib/context/PathContext';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'rc-util/lib/omit';
|
||||
import MenuContext, { MenuContextProps } from './MenuContext';
|
||||
import { isValidElement } from '../_util/reactNode';
|
||||
import MenuContext from './MenuContext';
|
||||
import { isValidElement, cloneElement } from '../_util/reactNode';
|
||||
|
||||
interface TitleEventEntity {
|
||||
key: string;
|
||||
@ -22,53 +23,56 @@ export interface SubMenuProps {
|
||||
onTitleMouseLeave?: (e: TitleEventEntity) => void;
|
||||
popupOffset?: [number, number];
|
||||
popupClassName?: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
class SubMenu extends React.Component<SubMenuProps, any> {
|
||||
static contextType = MenuContext;
|
||||
function SubMenu(props: SubMenuProps) {
|
||||
const { popupClassName, icon, title } = props;
|
||||
const context = React.useContext(MenuContext);
|
||||
const { prefixCls, inlineCollapsed, antdMenuTheme } = context;
|
||||
|
||||
context: MenuContextProps;
|
||||
const parentPath = useFullPath();
|
||||
|
||||
renderTitle(inlineCollapsed: boolean) {
|
||||
const { icon, title, level } = this.props;
|
||||
const { prefixCls } = this.context;
|
||||
let titleNode: React.ReactNode;
|
||||
|
||||
if (!icon) {
|
||||
return inlineCollapsed && level === 1 && title && typeof title === 'string' ? (
|
||||
if (!icon) {
|
||||
titleNode =
|
||||
inlineCollapsed && !parentPath.length && title && typeof title === 'string' ? (
|
||||
<div className={`${prefixCls}-inline-collapsed-noicon`}>{title.charAt(0)}</div>
|
||||
) : (
|
||||
title
|
||||
);
|
||||
}
|
||||
} else {
|
||||
// inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span
|
||||
// ref: https://github.com/ant-design/ant-design/pull/23456
|
||||
const titleIsSpan = isValidElement(title) && title.type === 'span';
|
||||
return (
|
||||
titleNode = (
|
||||
<>
|
||||
{icon}
|
||||
{cloneElement(icon, {
|
||||
className: classNames(
|
||||
isValidElement(icon) ? icon.props?.className : '',
|
||||
`${prefixCls}-item-icon`,
|
||||
),
|
||||
})}
|
||||
{titleIsSpan ? title : <span className={`${prefixCls}-title-content`}>{title}</span>}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { popupClassName } = this.props;
|
||||
const { prefixCls, inlineCollapsed, antdMenuTheme } = this.context;
|
||||
return (
|
||||
<MenuContext.Provider
|
||||
value={{
|
||||
...this.context,
|
||||
firstLevel: false,
|
||||
}}
|
||||
>
|
||||
<RcSubMenu
|
||||
{...omit(this.props, ['icon'])}
|
||||
title={this.renderTitle(inlineCollapsed)}
|
||||
popupClassName={classNames(prefixCls, `${prefixCls}-${antdMenuTheme}`, popupClassName)}
|
||||
/>
|
||||
</MenuContext.Provider>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<MenuContext.Provider
|
||||
value={{
|
||||
...context,
|
||||
firstLevel: false,
|
||||
}}
|
||||
>
|
||||
<RcSubMenu
|
||||
{...omit(props, ['icon'])}
|
||||
title={titleNode}
|
||||
popupClassName={classNames(prefixCls, `${prefixCls}-${antdMenuTheme}`, popupClassName)}
|
||||
/>
|
||||
</MenuContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export default SubMenu;
|
||||
|
||||
@ -83,7 +83,7 @@ exports[`renders ./components/menu/demo/horizontal.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting"
|
||||
class="anticon anticon-setting ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -169,7 +169,7 @@ exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="mail"
|
||||
class="anticon anticon-mail"
|
||||
class="anticon anticon-mail ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -275,7 +275,7 @@ exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="appstore"
|
||||
class="anticon anticon-appstore"
|
||||
class="anticon anticon-appstore ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -316,7 +316,7 @@ exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting"
|
||||
class="anticon anticon-setting ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -488,7 +488,7 @@ exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="mail"
|
||||
class="anticon anticon-mail"
|
||||
class="anticon anticon-mail ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -566,7 +566,7 @@ exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="appstore"
|
||||
class="anticon anticon-appstore"
|
||||
class="anticon anticon-appstore ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -619,7 +619,7 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="mail"
|
||||
class="anticon anticon-mail"
|
||||
class="anticon anticon-mail ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -697,7 +697,7 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="appstore"
|
||||
class="anticon anticon-appstore"
|
||||
class="anticon anticon-appstore ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -738,7 +738,7 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting"
|
||||
class="anticon anticon-setting ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -807,7 +807,7 @@ Array [
|
||||
>
|
||||
<span
|
||||
aria-label="mail"
|
||||
class="anticon anticon-mail"
|
||||
class="anticon anticon-mail ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -848,7 +848,7 @@ Array [
|
||||
>
|
||||
<span
|
||||
aria-label="appstore"
|
||||
class="anticon anticon-appstore"
|
||||
class="anticon anticon-appstore ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -1034,7 +1034,7 @@ Array [
|
||||
>
|
||||
<span
|
||||
aria-label="appstore"
|
||||
class="anticon anticon-appstore"
|
||||
class="anticon anticon-appstore ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -1115,7 +1115,7 @@ Array [
|
||||
>
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting"
|
||||
class="anticon anticon-setting ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -1223,7 +1223,7 @@ Array [
|
||||
>
|
||||
<span
|
||||
aria-label="mail"
|
||||
class="anticon anticon-mail"
|
||||
class="anticon anticon-mail ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -1301,7 +1301,7 @@ Array [
|
||||
>
|
||||
<span
|
||||
aria-label="appstore"
|
||||
class="anticon anticon-appstore"
|
||||
class="anticon anticon-appstore ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -1342,7 +1342,7 @@ Array [
|
||||
>
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting"
|
||||
class="anticon anticon-setting ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -1394,7 +1394,7 @@ exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="mail"
|
||||
class="anticon anticon-mail"
|
||||
class="anticon anticon-mail ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -1434,7 +1434,7 @@ exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="appstore"
|
||||
class="anticon anticon-appstore"
|
||||
class="anticon anticon-appstore ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -1474,7 +1474,7 @@ exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting"
|
||||
class="anticon anticon-setting ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
|
||||
@ -82,7 +82,7 @@ exports[`Menu Menu.Item with icon children auto wrap span 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="mail"
|
||||
class="anticon anticon-mail"
|
||||
class="anticon anticon-mail ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -124,7 +124,7 @@ exports[`Menu Menu.Item with icon children auto wrap span 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="mail"
|
||||
class="anticon anticon-mail"
|
||||
class="anticon anticon-mail ant-menu-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
|
||||
@ -815,10 +815,12 @@ describe('Menu', () => {
|
||||
it('Use first char as Icon when collapsed', () => {
|
||||
const wrapper = mount(
|
||||
<Menu mode="inline" inlineCollapsed>
|
||||
<Menu.SubMenu title="Light" />
|
||||
<Menu.Item>Bamboo</Menu.Item>
|
||||
</Menu>,
|
||||
);
|
||||
|
||||
expect(wrapper.find('.ant-menu-inline-collapsed-noicon').text()).toEqual('B');
|
||||
expect(wrapper.find('.ant-menu-inline-collapsed-noicon').first().text()).toEqual('L');
|
||||
expect(wrapper.find('.ant-menu-inline-collapsed-noicon').last().text()).toEqual('B');
|
||||
});
|
||||
});
|
||||
|
||||
@ -218,6 +218,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.@{menu-prefix-cls}-item-icon.svg {
|
||||
vertical-align: -0.125em;
|
||||
}
|
||||
|
||||
&.@{menu-prefix-cls}-item-only-child {
|
||||
> .@{iconfont-css-prefix},
|
||||
> .@{menu-prefix-cls}-item-icon {
|
||||
|
||||
@ -31,14 +31,19 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-hook-holder,
|
||||
&-hook-holder {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-notice {
|
||||
position: relative;
|
||||
width: @notification-width;
|
||||
max-width: ~'calc(100vw - @{notification-margin-edge} * 2)';
|
||||
margin-bottom: @notification-margin-bottom;
|
||||
margin-left: auto;
|
||||
padding: @notification-padding;
|
||||
overflow: hidden;
|
||||
line-height: @line-height-base;
|
||||
word-wrap: break-word;
|
||||
background: @notification-bg;
|
||||
border-radius: @border-radius-base;
|
||||
@ -49,16 +54,6 @@
|
||||
margin-right: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-hook-holder > &-notice {
|
||||
margin-bottom: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&-notice {
|
||||
padding: @notification-padding;
|
||||
line-height: @line-height-base;
|
||||
|
||||
&-message {
|
||||
margin-bottom: 8px;
|
||||
|
||||
@ -1581,8 +1581,9 @@ exports[`renders ./components/select/demo/responsive.md correctly 1`] = `
|
||||
class="ant-select-selection-overflow"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="ant-select-selection-overflow-item ant-select-selection-overflow-item-rest"
|
||||
style="opacity:0.2;height:0;overflow-y:hidden;order:9007199254740991;pointer-events:none"
|
||||
style="opacity:0;height:0;overflow-y:hidden;order:9007199254740991;pointer-events:none"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
@ -1643,8 +1644,9 @@ exports[`renders ./components/select/demo/responsive.md correctly 1`] = `
|
||||
class="ant-select-selection-overflow"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="ant-select-selection-overflow-item ant-select-selection-overflow-item-rest"
|
||||
style="opacity:0.2;height:0;overflow-y:hidden;order:9007199254740991;pointer-events:none"
|
||||
style="opacity:0;height:0;overflow-y:hidden;order:9007199254740991;pointer-events:none"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
|
||||
@ -15,7 +15,7 @@ export const SpaceContext = React.createContext({
|
||||
|
||||
export type SpaceSize = SizeType | number;
|
||||
|
||||
export interface SpaceProps {
|
||||
export interface SpaceProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
|
||||
@ -310,6 +310,7 @@
|
||||
@table-header-bg: #1d1d1d;
|
||||
@table-body-sort-bg: fade(@white, 1%);
|
||||
@table-row-hover-bg: #262626;
|
||||
@table-header-cell-split-color: fade(@white, 8%);
|
||||
@table-header-sort-bg: #262626;
|
||||
@table-header-filter-active-bg: #434343;
|
||||
@table-header-sort-active-bg: #303030;
|
||||
|
||||
@ -609,11 +609,12 @@
|
||||
@table-font-size: @font-size-base;
|
||||
@table-font-size-md: @table-font-size;
|
||||
@table-font-size-sm: @table-font-size;
|
||||
@table-header-cell-split-color: rgba(0, 0, 0, 0.06);
|
||||
// Sorter
|
||||
// Legacy: `table-header-sort-active-bg` is used for hover not real active
|
||||
@table-header-sort-active-bg: darken(@table-header-bg, 3%);
|
||||
@table-header-sort-active-bg: rgba(0, 0, 0, 0.04);
|
||||
// Filter
|
||||
@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);
|
||||
@table-header-filter-active-bg: rgba(0, 0, 0, 0.04);
|
||||
@table-filter-btns-bg: inherit;
|
||||
@table-filter-dropdown-bg: @component-background;
|
||||
@table-expand-icon-bg: @component-background;
|
||||
|
||||
@ -182,15 +182,14 @@ describe('Table.sorter', () => {
|
||||
jest.useFakeTimers();
|
||||
const wrapper = mount(createTable({}));
|
||||
// default show sorter tooltip
|
||||
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseenter');
|
||||
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
|
||||
jest.runAllTimers();
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
|
||||
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseout');
|
||||
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
|
||||
|
||||
// set table props showSorterTooltip is false
|
||||
wrapper.setProps({ showSorterTooltip: false });
|
||||
expect(wrapper.find('.ant-table-column-sorters-with-tooltip')).toHaveLength(0);
|
||||
jest.runAllTimers();
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
|
||||
@ -199,17 +198,16 @@ describe('Table.sorter', () => {
|
||||
showSorterTooltip: false,
|
||||
columns: [{ ...column, showSorterTooltip: true }],
|
||||
});
|
||||
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseenter');
|
||||
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
|
||||
jest.runAllTimers();
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
|
||||
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseout');
|
||||
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
|
||||
// set table props showSorterTooltip is true, column showSorterTooltip is false
|
||||
wrapper.setProps({
|
||||
showSorterTooltip: true,
|
||||
columns: [{ ...column, showSorterTooltip: false }],
|
||||
});
|
||||
expect(wrapper.find('.ant-table-column-sorters-with-tooltip')).toHaveLength(0);
|
||||
jest.runAllTimers();
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
|
||||
@ -221,14 +219,13 @@ describe('Table.sorter', () => {
|
||||
const wrapper = mount(
|
||||
createTable({ showSorterTooltip: { placement: 'bottom', title: 'static title' } }),
|
||||
);
|
||||
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseenter');
|
||||
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
|
||||
jest.runAllTimers();
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
|
||||
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseout');
|
||||
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
|
||||
|
||||
wrapper.setProps({ showSorterTooltip: false });
|
||||
expect(wrapper.find('.ant-table-column-sorters-with-tooltip')).toHaveLength(0);
|
||||
jest.runAllTimers();
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
|
||||
@ -236,16 +233,15 @@ describe('Table.sorter', () => {
|
||||
showSorterTooltip: false,
|
||||
columns: [{ ...column, showSorterTooltip: true }],
|
||||
});
|
||||
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseenter');
|
||||
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
|
||||
jest.runAllTimers();
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
|
||||
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseout');
|
||||
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
|
||||
wrapper.setProps({
|
||||
showSorterTooltip: true,
|
||||
columns: [{ ...column, showSorterTooltip: false }],
|
||||
});
|
||||
expect(wrapper.find('.ant-table-column-sorters-with-tooltip')).toHaveLength(0);
|
||||
jest.runAllTimers();
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
|
||||
|
||||
@ -67,23 +67,15 @@ exports[`Table.filter renders custom filter icon as ReactNode 1`] = `
|
||||
<div
|
||||
class="ant-table-filter-column"
|
||||
>
|
||||
Name
|
||||
<span
|
||||
class="ant-table-filter-column-title"
|
||||
>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-filter-trigger-container"
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="customize-icon"
|
||||
/>
|
||||
</span>
|
||||
class="customize-icon"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
@ -175,21 +167,13 @@ exports[`Table.filter renders custom filter icon as string correctly 1`] = `
|
||||
<div
|
||||
class="ant-table-filter-column"
|
||||
>
|
||||
Name
|
||||
<span
|
||||
class="ant-table-filter-column-title"
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-filter-trigger-container"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
string
|
||||
</span>
|
||||
string
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
@ -297,49 +281,41 @@ exports[`Table.filter renders custom filter icon with right Tooltip title 1`] =
|
||||
<div
|
||||
class="ant-table-filter-column"
|
||||
>
|
||||
Name
|
||||
<span
|
||||
class="ant-table-filter-column-title"
|
||||
>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-filter-trigger-container"
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
class="ant-tooltip-open"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-open"
|
||||
Tooltip
|
||||
</span>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
|
||||
style="opacity: 0; pointer-events: none;"
|
||||
>
|
||||
Tooltip
|
||||
</span>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
|
||||
style="opacity: 0; pointer-events: none;"
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
title
|
||||
</div>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
@ -431,38 +407,30 @@ exports[`Table.filter renders filter correctly 1`] = `
|
||||
<div
|
||||
class="ant-table-filter-column"
|
||||
>
|
||||
Name
|
||||
<span
|
||||
class="ant-table-filter-column-title"
|
||||
>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-filter-trigger-container"
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
aria-label="filter"
|
||||
class="anticon anticon-filter"
|
||||
role="img"
|
||||
>
|
||||
<span
|
||||
aria-label="filter"
|
||||
class="anticon anticon-filter"
|
||||
role="img"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="filter"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="filter"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<path
|
||||
d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
@ -559,157 +527,149 @@ exports[`Table.filter should support getPopupContainer 1`] = `
|
||||
<div
|
||||
class="ant-table-filter-column"
|
||||
>
|
||||
Name
|
||||
<span
|
||||
class="ant-table-filter-column-title"
|
||||
>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-filter-trigger-container ant-table-filter-trigger-container-open"
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
aria-label="filter"
|
||||
class="anticon anticon-filter"
|
||||
role="img"
|
||||
>
|
||||
<span
|
||||
aria-label="filter"
|
||||
class="anticon anticon-filter"
|
||||
role="img"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="filter"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="filter"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<path
|
||||
d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div>
|
||||
</span>
|
||||
<div>
|
||||
<div
|
||||
class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
|
||||
style="opacity: 0; pointer-events: none;"
|
||||
>
|
||||
<div
|
||||
class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
|
||||
style="opacity: 0; pointer-events: none;"
|
||||
class="ant-table-filter-dropdown"
|
||||
>
|
||||
<div
|
||||
class="ant-table-filter-dropdown"
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
<li
|
||||
class="ant-dropdown-menu-item"
|
||||
data-menu-id="rc-menu-uuid-test-boy"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<li
|
||||
class="ant-dropdown-menu-item"
|
||||
data-menu-id="rc-menu-uuid-test-boy"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span>
|
||||
Boy
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-dropdown-menu-item"
|
||||
data-menu-id="rc-menu-uuid-test-girl"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span>
|
||||
Girl
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-vertical"
|
||||
role="none"
|
||||
>
|
||||
<div
|
||||
aria-controls="rc-menu-uuid-test-title-popup"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-dropdown-menu-submenu-title"
|
||||
data-menu-id="rc-menu-uuid-test-title"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
title="Title"
|
||||
>
|
||||
Title
|
||||
<i
|
||||
class="ant-dropdown-menu-submenu-arrow"
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
class="ant-table-filter-dropdown-btns"
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span>
|
||||
Boy
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-dropdown-menu-item"
|
||||
data-menu-id="rc-menu-uuid-test-girl"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-link ant-btn-sm"
|
||||
disabled=""
|
||||
type="button"
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span>
|
||||
Reset
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
type="button"
|
||||
</label>
|
||||
<span>
|
||||
Girl
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-vertical"
|
||||
role="none"
|
||||
>
|
||||
<div
|
||||
aria-controls="rc-menu-uuid-test-title-popup"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-dropdown-menu-submenu-title"
|
||||
data-menu-id="rc-menu-uuid-test-title"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
title="Title"
|
||||
>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
Title
|
||||
<i
|
||||
class="ant-dropdown-menu-submenu-arrow"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
class="ant-table-filter-dropdown-btns"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-link ant-btn-sm"
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Reset
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
@ -800,157 +760,149 @@ exports[`Table.filter should support getPopupContainer from ConfigProvider 1`] =
|
||||
<div
|
||||
class="ant-table-filter-column"
|
||||
>
|
||||
Name
|
||||
<span
|
||||
class="ant-table-filter-column-title"
|
||||
>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-filter-trigger-container ant-table-filter-trigger-container-open"
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
aria-label="filter"
|
||||
class="anticon anticon-filter"
|
||||
role="img"
|
||||
>
|
||||
<span
|
||||
aria-label="filter"
|
||||
class="anticon anticon-filter"
|
||||
role="img"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="filter"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="filter"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<path
|
||||
d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div>
|
||||
</span>
|
||||
<div>
|
||||
<div
|
||||
class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
|
||||
style="opacity: 0; pointer-events: none;"
|
||||
>
|
||||
<div
|
||||
class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
|
||||
style="opacity: 0; pointer-events: none;"
|
||||
class="ant-table-filter-dropdown"
|
||||
>
|
||||
<div
|
||||
class="ant-table-filter-dropdown"
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
<li
|
||||
class="ant-dropdown-menu-item"
|
||||
data-menu-id="rc-menu-uuid-test-boy"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<li
|
||||
class="ant-dropdown-menu-item"
|
||||
data-menu-id="rc-menu-uuid-test-boy"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span>
|
||||
Boy
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-dropdown-menu-item"
|
||||
data-menu-id="rc-menu-uuid-test-girl"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span>
|
||||
Girl
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-vertical"
|
||||
role="none"
|
||||
>
|
||||
<div
|
||||
aria-controls="rc-menu-uuid-test-title-popup"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-dropdown-menu-submenu-title"
|
||||
data-menu-id="rc-menu-uuid-test-title"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
title="Title"
|
||||
>
|
||||
Title
|
||||
<i
|
||||
class="ant-dropdown-menu-submenu-arrow"
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
class="ant-table-filter-dropdown-btns"
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span>
|
||||
Boy
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-dropdown-menu-item"
|
||||
data-menu-id="rc-menu-uuid-test-girl"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-link ant-btn-sm"
|
||||
disabled=""
|
||||
type="button"
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span>
|
||||
Reset
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
type="button"
|
||||
</label>
|
||||
<span>
|
||||
Girl
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-vertical"
|
||||
role="none"
|
||||
>
|
||||
<div
|
||||
aria-controls="rc-menu-uuid-test-title-popup"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-dropdown-menu-submenu-title"
|
||||
data-menu-id="rc-menu-uuid-test-title"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
title="Title"
|
||||
>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
Title
|
||||
<i
|
||||
class="ant-dropdown-menu-submenu-arrow"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
class="ant-table-filter-dropdown-btns"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-link ant-btn-sm"
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Reset
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
@ -9,61 +9,57 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
>
|
||||
<div
|
||||
class="ant-table-column-sorters-with-tooltip"
|
||||
class="ant-table-column-sorters"
|
||||
>
|
||||
<div
|
||||
class="ant-table-column-sorters"
|
||||
<span>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter ant-table-column-sorter-full"
|
||||
>
|
||||
<span>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter ant-table-column-sorter-full"
|
||||
class="ant-table-column-sorter-inner"
|
||||
>
|
||||
<span
|
||||
class="ant-table-column-sorter-inner"
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
>
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
<path
|
||||
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<path
|
||||
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
@ -101,61 +97,57 @@ exports[`Table.sorter should support defaultOrder in Column 1`] = `
|
||||
class="ant-table-cell ant-table-column-sort ant-table-column-has-sorters"
|
||||
>
|
||||
<div
|
||||
class="ant-table-column-sorters-with-tooltip"
|
||||
class="ant-table-column-sorters"
|
||||
>
|
||||
<div
|
||||
class="ant-table-column-sorters"
|
||||
<span>
|
||||
Age
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter ant-table-column-sorter-full"
|
||||
>
|
||||
<span>
|
||||
Age
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter ant-table-column-sorter-full"
|
||||
class="ant-table-column-sorter-inner"
|
||||
>
|
||||
<span
|
||||
class="ant-table-column-sorter-inner"
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up active"
|
||||
role="img"
|
||||
>
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up active"
|
||||
role="img"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
<path
|
||||
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<path
|
||||
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -152,6 +152,8 @@ class App extends React.Component {
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
...this.getColumnSearchProps('address'),
|
||||
sorter: (a, b) => a.address.length - b.address.length,
|
||||
sortDirections: ['descend', 'ascend'],
|
||||
},
|
||||
];
|
||||
return <Table columns={columns} dataSource={data} />;
|
||||
|
||||
@ -85,10 +85,7 @@ const columns = [
|
||||
value: 'New York',
|
||||
},
|
||||
],
|
||||
filterMultiple: false,
|
||||
onFilter: (value, record) => record.address.indexOf(value) === 0,
|
||||
sorter: (a, b) => a.address.length - b.address.length,
|
||||
sortDirections: ['descend', 'ascend'],
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@ -282,35 +282,28 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
|
||||
|
||||
return (
|
||||
<div className={classNames(`${prefixCls}-column`)}>
|
||||
<span className={`${prefixCls}-column-title`}>{children}</span>
|
||||
|
||||
<span
|
||||
className={classNames(`${prefixCls}-trigger-container`, {
|
||||
[`${prefixCls}-trigger-container-open`]: mergedVisible,
|
||||
})}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
{children}
|
||||
<Dropdown
|
||||
overlay={menu}
|
||||
trigger={['click']}
|
||||
visible={mergedVisible}
|
||||
onVisibleChange={onVisibleChange}
|
||||
getPopupContainer={getPopupContainer}
|
||||
placement={direction === 'rtl' ? 'bottomLeft' : 'bottomRight'}
|
||||
>
|
||||
<Dropdown
|
||||
overlay={menu}
|
||||
trigger={['click']}
|
||||
visible={mergedVisible}
|
||||
onVisibleChange={onVisibleChange}
|
||||
getPopupContainer={getPopupContainer}
|
||||
placement={direction === 'rtl' ? 'bottomLeft' : 'bottomRight'}
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
className={classNames(`${prefixCls}-trigger`, {
|
||||
active: filtered,
|
||||
})}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
className={classNames(`${prefixCls}-trigger`, {
|
||||
active: filtered,
|
||||
})}
|
||||
>
|
||||
{filterIcon}
|
||||
</span>
|
||||
</Dropdown>
|
||||
</span>
|
||||
{filterIcon}
|
||||
</span>
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -168,9 +168,7 @@ function injectSorter<RecordType>(
|
||||
</div>
|
||||
);
|
||||
return showSorterTooltip ? (
|
||||
<Tooltip {...tooltipProps}>
|
||||
<div className={`${prefixCls}-column-sorters-with-tooltip`}>{renderSortTitle}</div>
|
||||
</Tooltip>
|
||||
<Tooltip {...tooltipProps}>{renderSortTitle}</Tooltip>
|
||||
) : (
|
||||
renderSortTitle
|
||||
);
|
||||
|
||||
@ -32,6 +32,12 @@
|
||||
> tr:not(:last-child) > th {
|
||||
border-bottom: @border-width-base @border-style-base @table-border-color;
|
||||
}
|
||||
|
||||
> tr > th {
|
||||
&::before {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed right should provides additional border
|
||||
|
||||
@ -8,7 +8,6 @@
|
||||
@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
|
||||
@table-header-icon-color: #bfbfbf;
|
||||
@table-header-icon-color-hover: darken(@table-header-icon-color, 10%);
|
||||
@table-header-sort-active-filter-bg: lighten(@table-header-sort-active-bg, 2%);
|
||||
@table-sticky-zindex: (@zindex-table-fixed + 1);
|
||||
@table-sticky-scroll-bar-active-bg: fade(@table-sticky-scroll-bar-bg, 80%);
|
||||
|
||||
@ -79,6 +78,7 @@
|
||||
&-thead {
|
||||
> tr {
|
||||
> th {
|
||||
position: relative;
|
||||
color: @table-header-color;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
@ -89,6 +89,18 @@
|
||||
&[colspan]:not([colspan='1']) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:not(:last-child):not(.@{table-prefix-cls}-selection-column):not(.@{table-prefix-cls}-row-expand-icon-cell):not([colspan])::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 1.6em;
|
||||
background-color: @table-header-cell-split-color;
|
||||
transform: translateY(-50%);
|
||||
transition: background-color 0.3s;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -107,7 +119,8 @@
|
||||
transition: background 0.3s;
|
||||
|
||||
// ========================= Nest Table ===========================
|
||||
> .@{table-prefix-cls}-wrapper:only-child {
|
||||
> .@{table-prefix-cls}-wrapper:only-child,
|
||||
> .@{table-prefix-cls}-expanded-row-fixed > .@{table-prefix-cls}-wrapper:only-child {
|
||||
.@{table-prefix-cls} {
|
||||
margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical (@table-padding-horizontal +
|
||||
ceil(@font-size-sm * 1.4));
|
||||
@ -194,47 +207,52 @@
|
||||
|
||||
// ============================ Sorter ============================
|
||||
&-thead th.@{table-prefix-cls}-column-has-sorters {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: @table-header-sort-active-bg;
|
||||
|
||||
.@{table-prefix-cls}-filter-trigger-container {
|
||||
background: @table-header-sort-active-filter-bg;
|
||||
&::before {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-thead th.@{table-prefix-cls}-column-sort {
|
||||
background: @table-header-sort-bg;
|
||||
|
||||
&::before {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
td&-column-sort {
|
||||
background: @table-body-sort-bg;
|
||||
}
|
||||
|
||||
&-column-sorters-with-tooltip {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-column-sorters {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
flex: auto;
|
||||
align-items: center;
|
||||
padding: @table-padding-vertical @table-padding-horizontal;
|
||||
justify-content: space-between;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&-column-sorter {
|
||||
margin-top: 0.15em;
|
||||
margin-bottom: -0.15em;
|
||||
margin-left: @padding-xs;
|
||||
color: @table-header-icon-color;
|
||||
|
||||
&-full {
|
||||
margin-top: -0.2em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
font-size: 0;
|
||||
transition: color 0.3s;
|
||||
|
||||
&-inner {
|
||||
display: inline-flex;
|
||||
@ -256,65 +274,31 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-column-sorters:hover &-column-sorter {
|
||||
color: darken(@table-header-icon-color, 10%);
|
||||
}
|
||||
|
||||
// ============================ Filter ============================
|
||||
&-filter-column {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: -@table-padding-vertical -@table-padding-horizontal;
|
||||
}
|
||||
|
||||
&-filter-column-title {
|
||||
flex: auto;
|
||||
padding: @table-padding-vertical 2.3em @table-padding-vertical @table-padding-horizontal;
|
||||
}
|
||||
|
||||
// Remove padding when sorter also provided
|
||||
&-thead tr th.@{table-prefix-cls}-column-has-sorters {
|
||||
.@{table-prefix-cls}-filter-column {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-filter-column-title {
|
||||
padding: 0 2.3em 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-filter-trigger-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: stretch;
|
||||
align-self: stretch;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&-open,
|
||||
&:hover,
|
||||
.@{table-prefix-cls}-thead th.@{table-prefix-cls}-column-has-sorters:hover &:hover {
|
||||
background: @table-header-filter-active-bg;
|
||||
}
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&-filter-trigger {
|
||||
display: block;
|
||||
width: 2.3em;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: -4px (-@table-padding-horizontal / 2) -4px 4px;
|
||||
padding: 0 4px;
|
||||
color: @table-header-icon-color;
|
||||
font-size: @font-size-sm;
|
||||
transition: color 0.3s;
|
||||
border-radius: @border-radius-base;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-filter-trigger-container-open &,
|
||||
&:hover {
|
||||
color: @text-color-secondary;
|
||||
background: @table-header-filter-active-bg;
|
||||
}
|
||||
|
||||
&.active {
|
||||
@ -387,6 +371,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
table tr th&-selection-column::after {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
&-selection {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
@ -563,6 +551,7 @@
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&-cell-fix-right-first::after,
|
||||
&-cell-fix-right-last::after {
|
||||
position: absolute;
|
||||
@ -610,6 +599,10 @@
|
||||
.@{table-prefix-cls}-cell-fix-left-last::after {
|
||||
box-shadow: inset 10px 0 8px -8px darken(@shadow-color, 5%);
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-cell-fix-left-last::before {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-ping-right {
|
||||
|
||||
@ -13,22 +13,8 @@
|
||||
padding: @padding-vertical @padding-horizontal;
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-thead {
|
||||
th.@{table-prefix-cls}-column-has-sorters {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-filter-column {
|
||||
margin: -@padding-vertical -@padding-horizontal;
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-filter-column-title {
|
||||
padding: @padding-vertical 2.3em @padding-vertical @padding-horizontal;
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-column-sorters {
|
||||
padding: @padding-vertical @padding-horizontal;
|
||||
}
|
||||
.@{table-prefix-cls}-filter-trigger {
|
||||
margin-right: -(@padding-horizontal / 2);
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-expanded-row-fixed {
|
||||
|
||||
@ -47,14 +47,14 @@ One or more elements can be selected from either column, one click on the proper
|
||||
|
||||
Transfer accept `children` to customize render list, using follow props:
|
||||
|
||||
| Property | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| direction | List render direction | `left` \| `right` | |
|
||||
| disabled | Disable list or not | boolean | |
|
||||
| filteredItems | Filtered items | RecordType\[] | |
|
||||
| selectedKeys | Selected items | string\[] | |
|
||||
| onItemSelect | Select item | (key: string, selected: boolean) | |
|
||||
| onItemSelectAll | Select a group of items | (keys: string\[], selected: boolean) | |
|
||||
| Property | Description | Type | Version |
|
||||
| --------------- | ----------------------- | ------------------------------------ | ------- |
|
||||
| direction | List render direction | `left` \| `right` | |
|
||||
| disabled | Disable list or not | boolean | |
|
||||
| filteredItems | Filtered items | RecordType\[] | |
|
||||
| selectedKeys | Selected items | string\[] | |
|
||||
| onItemSelect | Select item | (key: string, selected: boolean) | |
|
||||
| onItemSelectAll | Select a group of items | (keys: string\[], selected: boolean) | |
|
||||
|
||||
#### example
|
||||
|
||||
@ -77,4 +77,4 @@ return <Transfer rowKey={record => record.uid} />;
|
||||
|
||||
### How to support fetch and present data from a remote server in Transfer column.
|
||||
|
||||
In order to keep the page number synchronized, you can disable columns you checked without removing the option: <https://codesandbox.io/s/93xeb>
|
||||
In order to keep the page number synchronized, you can disable columns you checked without removing the option: <https://codesandbox.io/s/objective-wing-6iqbx>
|
||||
|
||||
@ -49,14 +49,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QAXskNI4G/Transfer.svg
|
||||
|
||||
Transfer 支持接收 `children` 自定义渲染列表，并返回以下参数：
|
||||
|
||||
| 参数 | 说明 | 类型 | 版本 |
|
||||
| --- | --- | --- | --- |
|
||||
| direction | 渲染列表的方向 | `left` \| `right` | |
|
||||
| disabled | 是否禁用列表 | boolean | |
|
||||
| filteredItems | 过滤后的数据 | RecordType\[] | |
|
||||
| selectedKeys | 选中的条目 | string\[] | |
|
||||
| onItemSelect | 勾选条目 | (key: string, selected: boolean) | |
|
||||
| onItemSelectAll | 勾选一组条目 | (keys: string\[], selected: boolean) | |
|
||||
| 参数 | 说明 | 类型 | 版本 |
|
||||
| --------------- | -------------- | ------------------------------------ | ---- |
|
||||
| direction | 渲染列表的方向 | `left` \| `right` | |
|
||||
| disabled | 是否禁用列表 | boolean | |
|
||||
| filteredItems | 过滤后的数据 | RecordType\[] | |
|
||||
| selectedKeys | 选中的条目 | string\[] | |
|
||||
| onItemSelect | 勾选条目 | (key: string, selected: boolean) | |
|
||||
| onItemSelectAll | 勾选一组条目 | (keys: string\[], selected: boolean) | |
|
||||
|
||||
#### 参考示例
|
||||
|
||||
@ -79,4 +79,4 @@ return <Transfer rowKey={record => record.uid} />;
|
||||
|
||||
### 怎样让 Transfer 穿梭框列表支持异步数据加载
|
||||
|
||||
为了保持页码同步，在勾选时可以不移除选项而以禁用代替：<https://codesandbox.io/s/93xeb>
|
||||
为了保持页码同步，在勾选时可以不移除选项而以禁用代替：<https://codesandbox.io/s/objective-wing-6iqbx>
|
||||
|
||||
@ -524,6 +524,7 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
|
||||
[`${prefixCls}-${type}`]: type,
|
||||
[`${prefixCls}-disabled`]: disabled,
|
||||
[`${prefixCls}-ellipsis`]: rows,
|
||||
[`${prefixCls}-single-line`]: rows === 1,
|
||||
[`${prefixCls}-ellipsis-single-line`]: cssTextOverflow,
|
||||
[`${prefixCls}-ellipsis-multiple-line`]: cssLineClamp,
|
||||
},
|
||||
|
||||
@ -231,7 +231,7 @@ Array [
|
||||
/>
|
||||
</button>,
|
||||
<div
|
||||
class="ant-typography ant-typography-ellipsis"
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
|
||||
</div>,
|
||||
@ -241,7 +241,7 @@ Array [
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
|
||||
</div>,
|
||||
<span
|
||||
class="ant-typography ant-typography-ellipsis"
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
|
||||
style="width:100px"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team.
|
||||
@ -333,7 +333,7 @@ Array [
|
||||
/>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-typography ant-typography-ellipsis"
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team. This is a nest sample
|
||||
<span
|
||||
@ -352,7 +352,7 @@ Array [
|
||||
<p>
|
||||
2333
|
||||
<span
|
||||
class="ant-typography ant-typography-ellipsis"
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
|
||||
>
|
||||
2333
|
||||
</span>
|
||||
@ -853,7 +853,7 @@ Array [
|
||||
/>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-typography ant-typography-ellipsis"
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
|
||||
title="To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare"
|
||||
>
|
||||
To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare
|
||||
|
||||
@ -259,9 +259,12 @@
|
||||
}
|
||||
|
||||
// ============ Ellipsis ============
|
||||
&-single-line {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&-ellipsis-single-line {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
// https://blog.csdn.net/iefreer/article/details/50421025
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "4.16.0-alpha.2",
|
||||
"version": "4.16.0",
|
||||
"description": "An enterprise-class UI design language and React components implementation",
|
||||
"title": "Ant Design",
|
||||
"keywords": [
|
||||
@ -126,7 +126,7 @@
|
||||
"rc-image": "~5.2.4",
|
||||
"rc-input-number": "~7.1.0",
|
||||
"rc-mentions": "~1.6.0",
|
||||
"rc-menu": "~9.0.0-alpha.6",
|
||||
"rc-menu": "~9.0.0",
|
||||
"rc-motion": "^2.4.0",
|
||||
"rc-notification": "~4.5.2",
|
||||
"rc-pagination": "~3.1.6",
|
||||
@ -292,7 +292,7 @@
|
||||
"bundlesize": [
|
||||
{
|
||||
"path": "./dist/antd.min.js",
|
||||
"maxSize": "270 kB"
|
||||
"maxSize": "275 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/antd.min.css",
|
||||
|
||||
@ -116,5 +116,12 @@
|
||||
a.appendChild(r);
|
||||
})(window, document, '//static.hotjar.com/c/hotjar-', '.js?sv=');
|
||||
</script>
|
||||
|
||||
<!--
|
||||
感谢每位为开源理想而奋斗的人们，愿你们在人生新的旅途一帆风顺！~
|
||||
https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*_7M0S7zdFBcAAAAAAAAAAAAAARQnAQ
|
||||
|
||||
2021.05.21
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user