diff --git a/.depslintrc.js b/.depslintrc.js new file mode 100644 index 0000000000..e6f0f4488a --- /dev/null +++ b/.depslintrc.js @@ -0,0 +1,18 @@ +module.exports = { + ignore: [ + '**/~*/**', + '**/_*/**', + '**/icon/**', + '**/__tests__/**', + '**/style/**', + '**/locale/**', + '**/*-provider/**', + '**/*.json', + ], + modulePattern: [ + { + pattern: /ConfigConsumer.*renderEmpty/sm, + module: '../empty', + }, + ], +}; \ No newline at end of file diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 8f75ffc19f..206c0a2c02 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,3 +1,4 @@ + ### 🤔 This is a ... - [ ] New feature @@ -32,7 +33,7 @@ Please makes sure that these form are filled before submitting your pull request ### 📝 Changelog description -> Describe changes from user side, and list all potential break changes or other risks. +> Describe changes from userside, and list all potential break changes or other risks. 1. English description diff --git a/.github/PULL_REQUEST_TEMPLATE/pr_cn.md b/.github/PULL_REQUEST_TEMPLATE/pr_cn.md index 806feaa92b..85e9b40e33 100644 --- a/.github/PULL_REQUEST_TEMPLATE/pr_cn.md +++ b/.github/PULL_REQUEST_TEMPLATE/pr_cn.md @@ -1,3 +1,4 @@ + ### 🤔 这个变动的性质是？ - [ ] 新特性提交 diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index df617e762c..efe16f4cc3 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -15,6 +15,71 @@ timeline: true --- +## 3.15.2 + +`2019-03-23` + +- 📖 New English translation for [Data Display](https://ant.design/docs/spec/data-display) and [Feedback](https://ant.design/docs/spec/feedback). [#15454](https://github.com/ant-design/ant-design/pull/15454) [@klouskingsley](https://github.com/klouskingsley) [#15460](https://github.com/ant-design/ant-design/pull/15460) [@klouskingsley](https://github.com/klouskingsley) +- 🌟 Add two less variables `@font-feature-settings` and `@select-item-selected-font-weight`. [#15506](https://github.com/ant-design/ant-design/pull/15506) [@dancerphil](https://github.com/dancerphil) [#15515](https://github.com/ant-design/ant-design/pull/15515) [@willc001](https://github.com/willc001) +- 🐞 Fix the scale calculate logic when Avatar is remounted. [#15503](https://github.com/ant-design/ant-design/pull/15503) +- 🐞 Fix inefficient custom `width` for DatePicker. [#15547](https://github.com/ant-design/ant-design/pull/15547) [@DiamondYuan](https://github.com/DiamondYuan) +- 🐞 Fix the incorrect priority of icon style for Notification. [#15530](https://github.com/ant-design/ant-design/pull/15530) +- 🐞 Fix that `notFound` content is not aligned for Select. [#15570](https://github.com/ant-design/ant-design/pull/15570) +- 🐞 Fix empty missing when `loading` property is true for Table. [#15583](https://github.com/ant-design/ant-design/pull/15583) +- 🐞 Fix the incorrect `white-space` style for Tag. [#15526](https://github.com/ant-design/ant-design/pull/15526) [@Kapiroska](https://github.com/Kapiroska) +- 🐞 Fix the incorrect judgement on image type for Upload. [#15354](https://github.com/ant-design/ant-design/pull/15354) + +## 3.15.1 + +`2019-03-17` + +- 🌟 Add four less variables `@pagination-item-bg-active`, `@icon-color`. [#15302](https://github.com/ant-design/ant-design/pull/15302) [#15343](https://github.com/ant-design/ant-design/issues/15343) +- 🐞 Fix tree-shaking not working for importing PageHeader. [#15354](https://github.com/ant-design/ant-design/pull/15354) +- List + - 🐞 Fix some List Item styling issues. [#15328](https://github.com/ant-design/ant-design/pull/15328) + - 🐞 Keep same content color of List like previous version. [#15301](https://github.com/ant-design/ant-design/pull/15301) +- 🐞 Fix Calendar can't switch type. [#15338](https://github.com/ant-design/ant-design/pull/15338) [@zy410419243](https://github.com/zy410419243) +- Badge + - 🐞 Fix the issue that customized color is not supported in Badge. [#15356](https://github.com/ant-design/ant-design/pull/15356) [@DiamondYuan](https://github.com/DiamondYuan) + - 🐞 Fix height problem of Badge with dot. [#15395](https://github.com/ant-design/ant-design/pull/15395) +- 🐞 Fix tabbar style of Tabs in card mode when browser is zoomed out. [#15299](https://github.com/ant-design/ant-design/pull/15299) [@rinick](https://github.com/rinick) +- 🐞 Fix Avatar component cannot calculate the offset when `display: none` is set. [#15351](https://github.com/ant-design/ant-design/pull/15351) [@ppbl](https://github.com/ppbl) +- 🐞 Correct suffix icon in Input.Password. [#15381](https://github.com/ant-design/ant-design/pull/15381) [@melchior-voidwolf](https://github.com/melchior-voidwolf) +- 🐞 Fix Layout has classname `ant-layout-has-sider` even if `hasFixer` is set to `false`. [#15396](https://github.com/ant-design/ant-design/pull/15396) [@SoraYama](https://github.com/SoraYama) +- 🐞 Fix Divider alignment issue in PageHeader. [#15400](https://github.com/ant-design/ant-design/pull/15400) +- 🐞 Fix a style issue of Skeleton. [#15421](https://github.com/ant-design/ant-design/pull/15421) [@Maktel](https://github.com/Maktel) +- 🌟 Adjust multiple TypeScript types + - 🌟 FormComponentProps added a generic type of form values. [#15355](https://github.com/ant-design/ant-design/pull/15355) + - 🌟 Export ConfigProviderProps interface. [#15446](https://github.com/ant-design/ant-design/pull/15446) [@DiamondYuan](https://github.com/DiamondYuan) + - 🐞 Add `onClick` prop for Breadcrumb.Item. [#15331](https://github.com/ant-design/ant-design/pull/15331) [@tgxpuisb](https://github.com/tgxpuisb) + - 🐞 Add `style` prop for Steps.Step component. [#15393](https://github.com/ant-design/ant-design/pull/15393) [@pavolgolias](https://github.com/pavolgolias) + - 🐞 Fix `itemRender` definition of Pagination. [#15428](https://github.com/ant-design/ant-design/pull/15428) [@DiamondYuan](https://github.com/DiamondYuan) + +## 3.15.0 + +`2019-03-08` + +- 🌟 Tree supports new prop `blockNode`. [#14858](https://github.com/ant-design/ant-design/pull/14858) [@kimochg](https://github.com/kimochg) +- Form + - 🌟 Supports `colon` prop in Form. [#15276](https://github.com/ant-design/ant-design/pull/15276) [@DiamondYuan](https://github.com/DiamondYuan) + - 🌟 Add new prop `labelAlign`. [#15252](https://github.com/ant-design/ant-design/pull/15252) [@yoyo837](https://github.com/yoyo837) + - 🐞 Fix two colons will appear in FormItem label. [15285](https://github.com/ant-design/ant-design/pull/15285) [@jinxin0112](https://github.com/jinxin0112) +- 🐞 Fix Typography dom structure. [#15210](https://github.com/ant-design/ant-design/pull/15210) +- 🐞 Fix Affix position update logic. [#15150](https://github.com/ant-design/ant-design/pull/15150) +- Input + - 🐞 Fix Password lost focus when change `visibilityToggle`. [#15184](https://github.com/ant-design/ant-design/pull/15184) + - 🐞 Fix `allowClear` do not focus after clear content. [#15184](https://github.com/ant-design/ant-design/pull/15184) + - 🐞 Fix Search style with `allowClear` or `suffix`/`prefix`. [#15242](https://github.com/ant-design/ant-design/pull/15242) + - 🐞 Fix Input warning logic for focus lose. [#15251](https://github.com/ant-design/ant-design/pull/15251) +- 🐞 Fix DatePicker and TimePicker cursor style. [#15218](https://github.com/ant-design/ant-design/pull/15218) +- 🐞 Fix Steps label text not align center. [#15256](https://github.com/ant-design/ant-design/pull/15256) [@yoyo837](https://github.com/yoyo837) +- TypeScript + - ⚡️ Refactor and simplify List Item dom structure, and fix spaces lost inside List Item. [#15197](https://github.com/ant-design/ant-design/pull/15197) + - 🐞 Fix Layout `tagName` definition. [#15181](https://github.com/ant-design/ant-design/pull/15181) [@ngolin](https://github.com/ngolin) + - 🐞 Fix Text `ellipsis` definition. [#15209](https://github.com/ant-design/ant-design/pull/15209) [@xiaohuoni](https://github.com/xiaohuoni) + - 🐞 Fix Badge `text` types. [#15264](https://github.com/ant-design/ant-design/pull/15264) +- 🇹🇷 Turkish translations of new components. [#15238](https://github.com/ant-design/ant-design/pull/15238) [@codesignist](https://github.com/codesignist) + ## 3.14.1 `2019-03-04` @@ -52,7 +117,7 @@ timeline: true - 🐞 Fix the TypeScript type problem for Table `Column Filter`. [#15056](https://github.com/ant-design/ant-design/pull/15056) - 🌟 Support goto button in Pagination. [#14819](https://github.com/ant-design/ant-design/pull/14819) - 🐞 Fix the problem that Carousel response prop TypeScript declaration is missing. [#15071](https://github.com/ant-design/ant-design/pull/15071) - + ## 3.13.6 `2019-02-23` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index c4425fca4f..745a1a23da 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -14,6 +14,73 @@ timeline: true * 主版本号：含有破坏性更新和新特性，不在发布周期内。 --- + +## 3.15.2 + +`2019-03-23` + +- 📖 翻译[模式-数据展示](https://ant.design/docs/spec/data-display)和[模式-反馈](https://ant.design/docs/spec/feedback)文档到英文。[#15454](https://github.com/ant-design/ant-design/pull/15454) [@klouskingsley](https://github.com/klouskingsley) [#15460](https://github.com/ant-design/ant-design/pull/15460) [@klouskingsley](https://github.com/klouskingsley) +- 🌟 新增 less 变量 `@font-feature-settings` 和 `@select-item-selected-font-weight`。[#15506](https://github.com/ant-design/ant-design/pull/15506) [@dancerphil](https://github.com/dancerphil) [#15515](https://github.com/ant-design/ant-design/pull/15515) [@willc001](https://github.com/willc001) +- 🐞 修复 Avatar 组件在重新挂载后字符大小和长度计算错误的问题。[#15503](https://github.com/ant-design/ant-design/pull/15503) +- 🐞 修复 DatePicker 组件的宽度无法自定义的问题。[#15547](https://github.com/ant-design/ant-design/pull/15547) [@DiamondYuan](https://github.com/DiamondYuan) +- 🐞 修复 Notification 组件的 icon 样式被全局默认样式覆盖的问题。[#15530](https://github.com/ant-design/ant-design/pull/15530) +- 🐞 修复 Select 组件的空状态文本和图片没有对齐的问题。[#15570](https://github.com/ant-design/ant-design/pull/15570) +- 🐞 修复 Table 组件在加载中时空状态丢失的问题。[#15583](https://github.com/ant-design/ant-design/pull/15583) +- 🐞 修复 Tag 组件的内容长度超过屏幕宽度时不可见的问题。[#15526](https://github.com/ant-design/ant-design/pull/15526) [@Kapiroska](https://github.com/Kapiroska) +- 🐞 修复 Upload 组件对图片类型文件判断不准确的问题。[#15354](https://github.com/ant-design/ant-design/pull/15354) + +## 3.15.1 + +`2019-03-17` + +- 🌟 补充了 less 变量 `@pagination-item-bg-active`、`@icon-color`。 [#15302](https://github.com/ant-design/ant-design/pull/15302) [#15345](https://github.com/ant-design/ant-design/pull/15345) +- 🐞 修复引入 PageHeader 导致 tree-shaking 失效的问题。[#15354](https://github.com/ant-design/ant-design/pull/15354) +- List + - 🐞 修复 List 的一些样式问题。[#15328](https://github.com/ant-design/ant-design/pull/15328) + - 🐞 保持 List 组件内容颜色与之前的版本一致。[#15301](https://github.com/ant-design/ant-design/pull/15301) +- 🐞 修复 Calendar 无法切换类型的问题。[#15338](https://github.com/ant-design/ant-design/pull/15338) [@zy410419243](https://github.com/zy410419243) +- Badge + - 🐞 修复 Badge 组件不支持自定义颜色的问题。[#15356](https://github.com/ant-design/ant-design/pull/15356) [@DiamondYuan](https://github.com/DiamondYuan) + - 🐞 修复 Badge 组件内带小圆点时的高度问题。[#15395](https://github.com/ant-design/ant-design/pull/15395) +- 🐞 微调 Tabs 标签模式在浏览器放大时丢失边框的问题。[#15299](https://github.com/ant-design/ant-design/pull/15299) [@rinick](https://github.com/rinick) +- 🐞 修复 Avatar 组件设置了 `display: none` 的时候无法计算偏移量的问题。[#15351](https://github.com/ant-design/ant-design/pull/15351) [@ppbl](https://github.com/ppbl) +- 🐞 修复 Input.Password 组件的 `suffix` 失效问题。[#15381](https://github.com/ant-design/ant-design/pull/15381) [@melchior-voidwolf](https://github.com/melchior-voidwolf) +- 🐞 修复 Layout 即使在 `hasSider` 属性为 `false` 的时候依然会加 `ant-layout-has-sider` 类名的问题[#15396](https://github.com/ant-design/ant-design/pull/15396) [@SoraYama](https://github.com/SoraYama) +- 🐞 修复 Divider 在 PageHeader 组件中的对齐问题。[#15400](https://github.com/ant-design/ant-design/pull/15400) +- 🐞 修复 Menu 收缩后，SubMenu 异常渲染的问题。[#15409](https://github.com/ant-design/ant-design/pull/15409) [@zy410419243](https://github.com/zy410419243) +- 🐞 修复 Skeleton 组件的样式问题。[#15421](https://github.com/ant-design/ant-design/pull/15421) [@Maktel](https://github.com/Maktel) +- 调整了多处 Typescript 类型 + - 🌟 FormComponentProps 新增 Form 值的泛型。[#15355](https://github.com/ant-design/ant-design/pull/15355) + - 🌟 导出 ConfigProviderProps 定义。[#15446](https://github.com/ant-design/ant-design/pull/15446) [@DiamondYuan](https://github.com/DiamondYuan) + - 🐞 添加 Breadcrumb.Item 的 `onClick` 定义。[#15331](https://github.com/ant-design/ant-design/pull/15331) [@tgxpuisb](https://github.com/tgxpuisb) + - 🐞 添加 Steps.Step 组件的 `style` 定义。[#15393](https://github.com/ant-design/ant-design/pull/15393) [@pavolgolias](https://github.com/pavolgolias) + - 🐞 修复 PaginationProps 组件 `itemRender` 函数的类型错误。[#15428](https://github.com/ant-design/ant-design/pull/15428) [@DiamondYuan](https://github.com/DiamondYuan) + +## 3.15.0 + +`2019-03-08` + +- 🌟 Tree 组件支持 `blockNode` 属性。[#14858](https://github.com/ant-design/ant-design/pull/14858) [@kimochg](https://github.com/kimochg) +- Form + - 🌟 支持直接在 Form 上面配置 `colon` 属性。[#15276](https://github.com/ant-design/ant-design/pull/15276) [@DiamondYuan](https://github.com/DiamondYuan) + - 🌟 支持 `labelAlign` 属性。[#15252](https://github.com/ant-design/ant-design/pull/15252) [@yoyo837](https://github.com/yoyo837) + - 🐞 修复可能出现两个冒号的问题。[15285](https://github.com/ant-design/ant-design/pull/15285) [@jinxin0112](https://github.com/jinxin0112) +- ⚡️ 重构并简化了 List Item 的 dom 结构，并且修复了 Item 中内容空格丢失的问题。[#15210](https://github.com/ant-design/ant-design/pull/15210) +- 🐞 修复 Affix 组件定位更新的逻辑问题。[#15150](https://github.com/ant-design/ant-design/pull/15150) +- Input + - 🐞 修复 Password 当 `visibilityToggle` 变化时丢失焦点的问题。[#15184](https://github.com/ant-design/ant-design/pull/15184) + - 🐞 修复通过 `allowClear` 清除内容后没有获得焦点的问题。[#15184](https://github.com/ant-design/ant-design/pull/15184) + - 🐞 修复 Search 当使用了 `allowClear` 或者 `suffix`/`prefix` 时的样式问题。[#15242](https://github.com/ant-design/ant-design/pull/15242) + - 🐞 修复 Input 丢失焦点时的警告问题。[#15251](https://github.com/ant-design/ant-design/pull/15251) +- 🐞 修复 DatePicker 和 TimePicker 的 cursor 样式问题。[#15218](https://github.com/ant-design/ant-design/pull/15218) +- 🐞 修复 Steps 的 label 不居中的问题。[#15256](https://github.com/ant-design/ant-design/pull/15256) [@yoyo837](https://github.com/yoyo837) +- TypeScript + - 🐞 修复 Typography 的 `setContentRef` 定义。[#15197](https://github.com/ant-design/ant-design/pull/15197) + - 🐞 修复 Layout 的 `tagName` 定义。[#15181](https://github.com/ant-design/ant-design/pull/15181) [@ngolin](https://github.com/ngolin) + - 🐞 修复 Text 的 `ellipsis` 定义。[#15209](https://github.com/ant-design/ant-design/pull/15209) [@xiaohuoni](https://github.com/xiaohuoni) + - 🐞 修复 Badge 的 `text` 定义。[#15264](https://github.com/ant-design/ant-design/pull/15264) +- 🇹🇷 添加一些新组件的土耳其语翻译。[#15238](https://github.com/ant-design/ant-design/pull/15238) [@codesignist](https://github.com/codesignist) + ## 3.14.1 `2019-03-04` @@ -49,7 +116,7 @@ timeline: true - 🐞 调整了多处 TypeScript 的类型 - 🐞 修复 `onPanelChange` TypeScript 声明缺失的问题。[#15043](https://github.com/ant-design/ant-design/pull/15043) - 🐞 订正了 Table `column filter` 的 TypeScript 类型问题。[#14777](https://github.com/ant-design/ant-design/issues/14777) - - 🌟 Pagination 支持添加分页跳转按钮。[#14819](https://github.com/ant-design/ant-design/pull/14819) + - 🌟 Pagination 支持添加分页跳转按钮。[#14819](https://github.com/ant-design/ant-design/pull/14819) - 🐞 修复 Carousel 的 responsive prop TypeScript 声明缺失的问题。[#15071](https://github.com/ant-design/ant-design/pull/15071) ## 3.13.6 diff --git a/CNAME b/CNAME new file mode 100644 index 0000000000..224102eb87 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +ant.design diff --git a/components/affix/__tests__/Affix.test.js b/components/affix/__tests__/Affix.test.js index 4fed4e1f18..08ddc06711 100644 --- a/components/affix/__tests__/Affix.test.js +++ b/components/affix/__tests__/Affix.test.js @@ -48,7 +48,7 @@ describe('Affix Render', () => { }; const originGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect; - HTMLElement.prototype.getBoundingClientRect = function() { + HTMLElement.prototype.getBoundingClientRect = function getBoundingClientRect() { return ( classRect[this.className] || { top: 0, diff --git a/components/affix/index.en-US.md b/components/affix/index.en-US.md index b450bafd50..413a21afd4 100644 --- a/components/affix/index.en-US.md +++ b/components/affix/index.en-US.md @@ -24,7 +24,7 @@ Please note that Affix should not cover other content on the page, especially wh **Note:** Children of `Affix` can not be `position: absolute`, but you can set `Affix` as `position: absolute`: ```jsx - + ... ``` diff --git a/components/affix/index.zh-CN.md b/components/affix/index.zh-CN.md index 520042f566..b9e0455327 100644 --- a/components/affix/index.zh-CN.md +++ b/components/affix/index.zh-CN.md @@ -25,7 +25,7 @@ title: Affix **注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位： ```jsx - + ... ``` diff --git a/components/anchor/style/index.tsx b/components/anchor/style/index.tsx index 3a3ab0de59..ff41dcf704 100644 --- a/components/anchor/style/index.tsx +++ b/components/anchor/style/index.tsx @@ -1,2 +1,5 @@ import '../../style/index.less'; import './index.less'; + +// style dependencies +import '../../affix/style'; diff --git a/components/auto-complete/style/index.tsx b/components/auto-complete/style/index.tsx index c90ced563e..d841ee8fa1 100644 --- a/components/auto-complete/style/index.tsx +++ b/components/auto-complete/style/index.tsx @@ -1,4 +1,6 @@ import '../../style/index.less'; import './index.less'; +// style dependencies import '../../select/style'; +import '../../input/style'; diff --git a/components/avatar/__tests__/Avatar.test.js b/components/avatar/__tests__/Avatar.test.js index f393599d5f..c703c52a4f 100644 --- a/components/avatar/__tests__/Avatar.test.js +++ b/components/avatar/__tests__/Avatar.test.js @@ -3,6 +3,27 @@ import { mount } from 'enzyme'; import Avatar from '..'; describe('Avatar Render', () => { + let originOffsetWidth; + beforeAll(() => { + // Mock offsetHeight + originOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth').get; + Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { + get() { + if (this.className === 'ant-avatar-string') { + return 100; + } + return 80; + }, + }); + }); + + afterAll(() => { + // Restore Mock offsetHeight + Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { + get: originOffsetWidth, + }); + }); + it('Render long string correctly', () => { const wrapper = mount(TestString); const children = wrapper.find('.ant-avatar-string'); @@ -14,8 +35,12 @@ describe('Avatar Render', () => { global.document.body.appendChild(div); const wrapper = mount(Fallback, { attachTo: div }); - wrapper.instance().setScale = jest.fn(() => wrapper.instance().setState({ scale: 0.5 })); - + wrapper.instance().setScale = jest.fn(() => { + if (wrapper.state().scale === 0.5) { + return; + } + wrapper.instance().setState({ scale: 0.5 }); + }); wrapper.find('img').simulate('error'); const children = wrapper.find('.ant-avatar-string'); @@ -90,4 +115,19 @@ describe('Avatar Render', () => { wrapper.detach(); global.document.body.removeChild(div); }); + + it('should calculate scale of avatar children correctly', () => { + const wrapper = mount(Avatar); + expect(wrapper.state().scale).toBe(0.72); + Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { + get() { + if (this.className === 'ant-avatar-string') { + return 100; + } + return 40; + }, + }); + wrapper.setProps({ children: 'xx' }); + expect(wrapper.state().scale).toBe(0.32); + }); }); diff --git a/components/avatar/__tests__/__snapshots__/demo.test.js.snap b/components/avatar/__tests__/__snapshots__/demo.test.js.snap index 4cd53f4560..16c18a904b 100644 --- a/components/avatar/__tests__/__snapshots__/demo.test.js.snap +++ b/components/avatar/__tests__/__snapshots__/demo.test.js.snap @@ -439,6 +439,81 @@ exports[`renders ./components/avatar/demo/dynamic.md correctly 1`] = ` `; +exports[`renders ./components/avatar/demo/toggle-debug.md correctly 1`] = ` +
+ + + +
+
+
+ + +
+ + + Avatar + + + + + +
+
+
+`; + exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
, - mountNode); +ReactDOM.render(, mountNode); ```` diff --git a/components/avatar/demo/toggle-debug.md b/components/avatar/demo/toggle-debug.md new file mode 100644 index 0000000000..c3b0d3eeb1 --- /dev/null +++ b/components/avatar/demo/toggle-debug.md @@ -0,0 +1,80 @@ +--- +order: 4 +title: + zh-CN: 隐藏情况下计算字符对齐 + en-US: Calculate text style when hiding +debug: true +--- + +## zh-CN + +切换 Avatar 显示的时候，文本样式应该居中并正确调整字体大小。 + +## en-US + +Text inside Avatar should be set a proper font size when toggle it's visibility. + +````jsx +import { Avatar, Button } from 'antd'; + +class App extends React.Component { + state = { + hide: true, + size: 'large', + scale: 1, + }; + + toggle = () => { + this.setState({ + hide: !this.state.hide, + }); + } + + toggleSize = () => { + const sizes = ['small', 'default', 'large']; + let current = sizes.indexOf(this.state.size) + 1; + if (current > 2) { + current = 0; + } + this.setState({ + size: sizes[current], + }); + } + + changeScale = () => { + this.setState({ + scale: this.state.scale === 1 ? 2 : 1, + }); + } + + render() { + const { hide, size, scale } = this.state; + return ( +
+ + + +
+
+
+ + Avatar + + + Invalid + +
+ + Avatar + + + Invalid + +
+
+
+ ); + } +} + +ReactDOM.render(, mountNode); diff --git a/components/avatar/index.tsx b/components/avatar/index.tsx index 252595966f..9bc3db5e49 100644 --- a/components/avatar/index.tsx +++ b/components/avatar/index.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import * as ReactDOM from 'react-dom'; import Icon from '../icon'; import classNames from 'classnames'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; @@ -44,43 +43,42 @@ export default class Avatar extends React.Component { isImgExist: true, }; - private avatarChildren: any; + private avatarNode: HTMLElement; + private avatarChildren: HTMLElement; + private lastChildrenWidth: number; + private lastNodeWidth: number; componentDidMount() { this.setScale(); } - componentDidUpdate(prevProps: AvatarProps, prevState: AvatarState) { - if ( - prevProps.children !== this.props.children || - (prevState.scale !== this.state.scale && this.state.scale === 1) || - prevState.isImgExist !== this.state.isImgExist - ) { - this.setScale(); - } - + componentDidUpdate(prevProps: AvatarProps) { + this.setScale(); if (prevProps.src !== this.props.src) { this.setState({ isImgExist: true, scale: 1 }); } } setScale = () => { - const childrenNode = this.avatarChildren; - if (childrenNode) { - const childrenWidth = childrenNode.offsetWidth; - const avatarNode = ReactDOM.findDOMNode(this) as Element; - const avatarWidth = avatarNode.getBoundingClientRect().width; - // add 4px gap for each side to get better performance - if (avatarWidth - 8 < childrenWidth) { - this.setState({ - scale: (avatarWidth - 8) / childrenWidth, - }); - } else { - this.setState({ - scale: 1, - }); - } + if (!this.avatarChildren || !this.avatarNode) { + return; } + const childrenWidth = this.avatarChildren.offsetWidth; // offsetWidth avoid affecting be transform scale + const nodeWidth = this.avatarNode.offsetWidth; + // denominator is 0 is no meaning + if ( + childrenWidth === 0 || + nodeWidth === 0 || + (this.lastChildrenWidth === childrenWidth && this.lastNodeWidth === nodeWidth) + ) { + return; + } + this.lastChildrenWidth = childrenWidth; + this.lastNodeWidth = nodeWidth; + // add 4px gap for each side to get better performance + this.setState({ + scale: nodeWidth - 8 < childrenWidth ? (nodeWidth - 8) / childrenWidth : 1, + }); }; handleImgLoadError = () => { @@ -152,7 +150,7 @@ export default class Avatar extends React.Component { children = ( (this.avatarChildren = span)} + ref={(node: HTMLElement) => (this.avatarChildren = node)} style={{ ...sizeChildrenStyle, ...childrenStyle }} > {children} @@ -160,14 +158,22 @@ export default class Avatar extends React.Component { ); } else { children = ( - (this.avatarChildren = span)}> + (this.avatarChildren = node)} + > {children} ); } } return ( - + (this.avatarNode = node)} + > {children} ); diff --git a/components/badge/ScrollNumber.tsx b/components/badge/ScrollNumber.tsx index 38d4f91f03..667c82a7ab 100644 --- a/components/badge/ScrollNumber.tsx +++ b/components/badge/ScrollNumber.tsx @@ -42,7 +42,9 @@ class ScrollNumber extends Component { if (nextState.count === nextProps.count) { return null; } - return { animateStarted: true }; + return { + animateStarted: true, + }; } return null; } @@ -78,13 +80,20 @@ class ScrollNumber extends Component { componentDidUpdate(_: any, prevState: ScrollNumberState) { this.lastCount = prevState.count; - if (this.state.animateStarted) { - this.setState({ animateStarted: false, count: this.props.count }, () => { - const { onAnimated } = this.props; - if (onAnimated) { - onAnimated(); - } - }); + const { animateStarted } = this.state; + const { onAnimated } = this.props; + if (animateStarted) { + this.setState( + { + animateStarted: false, + count: this.props.count, + }, + () => { + if (onAnimated) { + onAnimated(); + } + }, + ); } } diff --git a/components/badge/__tests__/index.test.js b/components/badge/__tests__/index.test.js index bcdc925841..0a1d02b339 100644 --- a/components/badge/__tests__/index.test.js +++ b/components/badge/__tests__/index.test.js @@ -89,4 +89,10 @@ describe('Badge', () => { ); expect(wrapper).toMatchSnapshot(); }); + + // https://github.com/ant-design/ant-design/issues/15349 + it('should color style works on Badge', () => { + const wrapper = mount(); + expect(wrapper.find('.ant-badge-status-text').props().style.color).toBe('red'); + }); }); diff --git a/components/badge/index.tsx b/components/badge/index.tsx index 36e0659bdf..381bf72453 100644 --- a/components/badge/index.tsx +++ b/components/badge/index.tsx @@ -183,14 +183,14 @@ export default class Badge extends React.Component { // if (!children && status) { + const styleWithOffset = this.getStyleWithOffset(); + const statusTextColor = styleWithOffset && styleWithOffset.color; return ( - + - {text} + + {text} + ); } diff --git a/components/badge/style/index.less b/components/badge/style/index.less index 4f43ec1ba6..73d1cd3592 100644 --- a/components/badge/style/index.less +++ b/components/badge/style/index.less @@ -113,7 +113,9 @@ } &-not-a-wrapper { - vertical-align: middle; + &:not(.@{badge-prefix-cls}-status) { + vertical-align: middle; + } .@{ant-prefix}-scroll-number { position: relative; diff --git a/components/breadcrumb/BreadcrumbItem.tsx b/components/breadcrumb/BreadcrumbItem.tsx index 228d3309ce..31f6e2ecd9 100644 --- a/components/breadcrumb/BreadcrumbItem.tsx +++ b/components/breadcrumb/BreadcrumbItem.tsx @@ -6,6 +6,7 @@ export interface BreadcrumbItemProps { prefixCls?: string; separator?: React.ReactNode; href?: string; + onClick?: React.MouseEventHandler; } export default class BreadcrumbItem extends React.Component { diff --git a/components/calendar/Header.tsx b/components/calendar/Header.tsx index b4f07c775d..0d07a9ed7a 100644 --- a/components/calendar/Header.tsx +++ b/components/calendar/Header.tsx @@ -144,14 +144,14 @@ export default class Header extends React.Component { const prefixCls = getPrefixCls('fullcalendar', customizePrefixCls); const yearSelect = this.getYearSelectElement(prefixCls, value.year()); const monthSelect = - type === 'date' + type === 'month' ? this.getMonthSelectElement(prefixCls, value.month(), this.getMonthsLocale(value)) : null; const size = (fullscreen ? 'default' : 'small') as any; const typeSwitch = ( - - + + ); diff --git a/components/calendar/__tests__/__snapshots__/demo.test.js.snap b/components/calendar/__tests__/__snapshots__/demo.test.js.snap index 6e10b1c3ed..29169dbc1a 100644 --- a/components/calendar/__tests__/__snapshots__/demo.test.js.snap +++ b/components/calendar/__tests__/__snapshots__/demo.test.js.snap @@ -120,7 +120,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = ` checked="" class="ant-radio-button-input" type="radio" - value="date" + value="month" /> { expect(onPanelChange).toBeCalled(); expect(onPanelChange.mock.calls[0][0].month()).toEqual(date.month() - 1); }); + + it('switch should work correctly without prop mode', async () => { + const onPanelChange = jest.fn(); + const date = new Moment(new Date(Date.UTC(2017, 7, 9, 8))); + const wrapper = mount(); + expect(wrapper.state().mode).toBe('month'); + expect(wrapper.find('.ant-fullcalendar-table').length).toBe(1); + expect(wrapper.find('.ant-fullcalendar-month-panel-table').length).toBe(0); + wrapper.find('.ant-radio-button-input[value="year"]').simulate('change'); + expect(wrapper.find('.ant-fullcalendar-table').length).toBe(0); + expect(wrapper.find('.ant-fullcalendar-month-panel-table').length).toBe(1); + expect(onPanelChange).toBeCalled(); + expect(onPanelChange.mock.calls[0][1]).toEqual('year'); + }); }); diff --git a/components/calendar/index.tsx b/components/calendar/index.tsx index a64ac79d43..65ae98fb60 100644 --- a/components/calendar/index.tsx +++ b/components/calendar/index.tsx @@ -53,7 +53,6 @@ class Calendar extends React.Component { static defaultProps = { locale: {}, fullscreen: true, - mode: 'month' as CalendarMode, onSelect: noop, onPanelChange: noop, onChange: noop, @@ -100,7 +99,7 @@ class Calendar extends React.Component { } this.state = { value, - mode: props.mode, + mode: props.mode || 'month', }; } @@ -145,20 +144,13 @@ class Calendar extends React.Component { } }; - setType = (type: string) => { - const mode = type === 'date' ? 'month' : 'year'; - if (this.state.mode !== mode) { - this.setState({ mode }); - this.onPanelChange(this.state.value, mode); - } - }; - onHeaderValueChange = (value: moment.Moment) => { this.setValue(value, 'changePanel'); }; - onHeaderTypeChange = (type: string) => { - this.setType(type); + onHeaderTypeChange = (mode: CalendarMode) => { + this.setState({ mode }); + this.onPanelChange(this.state.value, mode); }; onPanelChange(value: moment.Moment, mode: CalendarMode | undefined) { @@ -216,8 +208,6 @@ class Calendar extends React.Component { dateFullCellRender, monthFullCellRender, } = props; - const type = mode === 'year' ? 'month' : 'date'; - const monthCellRender = monthFullCellRender || this.monthCellRender; const dateCellRender = dateFullCellRender || this.dateCellRender; @@ -246,7 +236,7 @@ class Calendar extends React.Component {
{ disabledDate={disabledDate} Select={noop} locale={locale.lang} - type={type} + type={mode === 'year' ? 'month' : 'date'} prefixCls={prefixCls} showHeader={false} value={value} diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx index b3e369978a..1ab67bfcc5 100644 --- a/components/card/style/index.tsx +++ b/components/card/style/index.tsx @@ -3,3 +3,5 @@ import './index.less'; // style dependencies import '../../tabs/style'; +import '../../row/style'; +import '../../col/style'; diff --git a/components/col/style/index.tsx b/components/col/style/index.tsx index cc2ae69eee..2127e6804d 100644 --- a/components/col/style/index.tsx +++ b/components/col/style/index.tsx @@ -1,2 +1,5 @@ import '../../style/index.less'; -import '../../grid/style/index.less'; + +// style dependencies +// deps-lint-skip: grid +import '../../grid/style'; diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap index bc7e89f97c..9170a90f11 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap @@ -1276,7 +1276,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = ` checked="" class="config-radio-button-input" type="radio" - value="date" + value="month" /> HTMLElement; prefixCls?: string; children?: React.ReactNode; diff --git a/components/date-picker/__tests__/__snapshots__/demo.test.js.snap b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap index 6e16005cd2..b776c29694 100644 --- a/components/date-picker/__tests__/__snapshots__/demo.test.js.snap +++ b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap @@ -348,7 +348,7 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
= {}; - let open: boolean = prevState.open; + let { open } = prevState; if ('open' in nextProps) { state.open = nextProps.open; @@ -53,6 +53,7 @@ export default function createPicker(TheCalendar: React.ComponentClass): any { } private input: any; + private prefixCls?: string; constructor(props: any) { @@ -92,7 +93,7 @@ export default function createPicker(TheCalendar: React.ComponentClass): any { }; handleChange = (value: moment.Moment | null) => { - const props = this.props; + const { props } = this; if (!('value' in props)) { this.setState({ value, @@ -155,13 +156,13 @@ export default function createPicker(TheCalendar: React.ComponentClass): any { let pickerProps: Object = {}; let calendarProps: any = {}; - const pickerStyle: { width?: number } = {}; + const pickerStyle: { minWidth?: number } = {}; if (props.showTime) { calendarProps = { // fix https://github.com/ant-design/ant-design/issues/1902 onSelect: this.handleChange, }; - pickerStyle.width = 195; + pickerStyle.minWidth = 195; } else { pickerProps = { onChange: this.handleChange, diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index 98b76f0601..7ed1751509 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -77,7 +77,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | -| defaultValue | to set default date | [moment](http://momentjs.com/) | - | +| defaultValue | to set default date, if start time or end time is null or undefined, the date range will be an open interval | [moment](http://momentjs.com/) | - | | defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - | | disabledTime | to specify the time that cannot be selected | function(date) | - | | format | to set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting. | string \| string[] | "YYYY-MM-DD" | diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index dd73aacdd6..ad7f60b559 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -78,7 +78,7 @@ moment.locale('zh-cn'); | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 | +| defaultValue | 默认日期，如果开始时间或结束时间为 `null` 或者 `undefined`，日期范围将是一个开区间 | [moment](http://momentjs.com/) | 无 | | defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 | | disabledTime | 不可选择的时间 | function(date) | 无 | | format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [moment.js](http://momentjs.com/) | string \| string[] | "YYYY-MM-DD" | diff --git a/components/date-picker/style/index.tsx b/components/date-picker/style/index.tsx index 2fd3d93e55..f27ae9b25f 100644 --- a/components/date-picker/style/index.tsx +++ b/components/date-picker/style/index.tsx @@ -2,6 +2,7 @@ import '../../style/index.less'; import './index.less'; // style dependencies +// deps-lint-skip: input import '../../input/style'; import '../../time-picker/style'; import '../../tag/style'; diff --git a/components/drawer/style/index.tsx b/components/drawer/style/index.tsx index 416ec0177e..3a3ab0de59 100644 --- a/components/drawer/style/index.tsx +++ b/components/drawer/style/index.tsx @@ -1,5 +1,2 @@ import '../../style/index.less'; import './index.less'; - -// style dependencies -import '../../button/style'; diff --git a/components/empty/style/index.less b/components/empty/style/index.less index 7fffa45149..fe92413999 100644 --- a/components/empty/style/index.less +++ b/components/empty/style/index.less @@ -43,9 +43,3 @@ } } } - -// Patch for popup adjust -.@{ant-prefix}-select-dropdown--empty .@{ant-prefix}-select-dropdown-menu-item { - padding-right: 0; - padding-left: 0; -} diff --git a/components/form/Form.tsx b/components/form/Form.tsx index 84af82e8e0..4821bdb061 100755 --- a/components/form/Form.tsx +++ b/components/form/Form.tsx @@ -75,7 +75,7 @@ export type ValidationRule = { validator?: (rule: any, value: any, callback: any, source?: any, options?: any) => any; }; -export type ValidateCallback = (errors: any, values: any) => void; +export type ValidateCallback = (errors: any, values: V) => void; export type GetFieldDecoratorOptions = { /** 子节点的值的属性，如 Checkbox 的是 'checked' */ @@ -134,7 +134,7 @@ export type ValidateFieldsOptions = { }; // function create -export type WrappedFormUtils = { +export type WrappedFormUtils = { /** 获取一组输入控件的值，如不传入参数，则获取全部组件的值 */ getFieldsValue(fieldNames?: Array): { [field: string]: any }; /** 获取一个输入控件的值 */ @@ -147,26 +147,26 @@ export type WrappedFormUtils = { validateFields( fieldNames: Array, options: ValidateFieldsOptions, - callback: ValidateCallback, + callback: ValidateCallback, ): void; - validateFields(options: ValidateFieldsOptions, callback: ValidateCallback): void; - validateFields(fieldNames: Array, callback: ValidateCallback): void; + validateFields(options: ValidateFieldsOptions, callback: ValidateCallback): void; + validateFields(fieldNames: Array, callback: ValidateCallback): void; validateFields(fieldNames: Array, options: ValidateFieldsOptions): void; validateFields(fieldNames: Array): void; - validateFields(callback: ValidateCallback): void; + validateFields(callback: ValidateCallback): void; validateFields(options: ValidateFieldsOptions): void; validateFields(): void; /** 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 */ validateFieldsAndScroll( fieldNames: Array, options: ValidateFieldsOptions, - callback: ValidateCallback, + callback: ValidateCallback, ): void; - validateFieldsAndScroll(options: ValidateFieldsOptions, callback: ValidateCallback): void; - validateFieldsAndScroll(fieldNames: Array, callback: ValidateCallback): void; + validateFieldsAndScroll(options: ValidateFieldsOptions, callback: ValidateCallback): void; + validateFieldsAndScroll(fieldNames: Array, callback: ValidateCallback): void; validateFieldsAndScroll(fieldNames: Array, options: ValidateFieldsOptions): void; validateFieldsAndScroll(fieldNames: Array): void; - validateFieldsAndScroll(callback: ValidateCallback): void; + validateFieldsAndScroll(callback: ValidateCallback): void; validateFieldsAndScroll(options: ValidateFieldsOptions): void; validateFieldsAndScroll(): void; /** 获取某个输入控件的 Error */ @@ -185,8 +185,8 @@ export type WrappedFormUtils = { ): (node: React.ReactNode) => React.ReactNode; }; -export interface FormComponentProps { - form: WrappedFormUtils; +export interface FormComponentProps { + form: WrappedFormUtils; } export interface RcBaseFormProps { diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap index 5819b074e8..f17c665ad4 100644 --- a/components/form/__tests__/__snapshots__/demo.test.js.snap +++ b/components/form/__tests__/__snapshots__/demo.test.js.snap @@ -2550,7 +2550,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
⚠️ About the extra bundle size brought by all SVG icons we imported in 3.9.0, we will provide new API to allow developers importing icons as your need, you can trace [#12011](https://github.com/ant-design/ant-design/issues/12011) for further progress. +> +> Before this, you can use [webpack plugin](https://github.com/Beven91/webpack-ant-icon-loader) from community to chunk the icon file. The properties `theme`, `component` and `twoToneColor` are added in `3.9.0`. The best practice is to pass the property `theme` to every `` components. diff --git a/components/icon/index.zh-CN.md b/components/icon/index.zh-CN.md index b6cdce7c3c..709d857ede 100644 --- a/components/icon/index.zh-CN.md +++ b/components/icon/index.zh-CN.md @@ -47,6 +47,8 @@ ReactDOM.render(, mountNode); 更多讨论可参考：[#10353](https://github.com/ant-design/ant-design/issues/10353)。 > ⚠️ 3.9.0 之后我们全量引入了所有图标，导致 antd 默认的包体积有一定增加，我们会在不远的未来增加新的 API 来实现图标的按需使用，更多相关讨论可关注：[#12011](https://github.com/ant-design/ant-design/issues/12011)。 +> +> 在此之前，你可以通过来自社区同学的 [webpack 插件](https://github.com/Beven91/webpack-ant-icon-loader)将图标文件拆分。 其中 `theme`, `component`, `twoToneColor` 是 `3.9.x` 版本新增加的属性。最佳实践是给使用的 `` 组件传入属性 `theme` 以明确图标的主题风格。例如： diff --git a/components/input/Password.tsx b/components/input/Password.tsx index a8aedfadbc..d156d9160a 100644 --- a/components/input/Password.tsx +++ b/components/input/Password.tsx @@ -42,7 +42,7 @@ export default class Password extends React.Component { // Prevent focused state lost diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap index 0fb2f77ecb..d6e630ba7d 100644 --- a/components/input/__tests__/__snapshots__/demo.test.js.snap +++ b/components/input/__tests__/__snapshots__/demo.test.js.snap @@ -941,21 +941,24 @@ exports[`renders ./components/input/demo/password-input.md correctly 1`] = ` class="ant-input-suffix" > diff --git a/components/input/__tests__/__snapshots__/index.test.js.snap b/components/input/__tests__/__snapshots__/index.test.js.snap index ec439205b5..eb6fbf72b9 100644 --- a/components/input/__tests__/__snapshots__/index.test.js.snap +++ b/components/input/__tests__/__snapshots__/index.test.js.snap @@ -298,7 +298,7 @@ exports[`Input.Password should change type when click 1`] = ` className="ant-input-password-icon" onClick={[Function]} onMouseDown={[Function]} - type="eye" + type="eye-invisible" /> } type="password" @@ -317,92 +317,6 @@ exports[`Input.Password should change type when click 1`] = ` type="password" value="111" /> - - - - - - - - - - - - - - - -`; - -exports[`Input.Password should change type when click 2`] = ` - - - } - type="text" - > - - - @@ -457,7 +371,7 @@ exports[`Input.Password should change type when click 2`] = ` `; -exports[`Input.Password should change type when click 3`] = ` +exports[`Input.Password should change type when click 2`] = ` } - type="password" + type="text" > `; +exports[`Input.Password should change type when click 3`] = ` + + + } + type="password" + > + + + + + + + + + + + + + + + + + + +`; + exports[`Input.Search should support suffix 1`] = ` { const wrapper = mount(); expect(wrapper.find('.anticon-eye').length).toBe(0); wrapper.setProps({ visibilityToggle: true }); - expect(wrapper.find('.anticon-eye').length).toBe(1); + expect(wrapper.find('.anticon-eye-invisible').length).toBe(1); }); it('should keep focus state', () => { diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less index b7d1aba8f7..debe51afb1 100644 --- a/components/input/style/mixin.less +++ b/components/input/style/mixin.less @@ -69,6 +69,10 @@ .disabled(); } + &[disabled] { + .disabled(); + } + // Reset height for `textarea`s textarea& { max-width: 100%; // prevent textearea resize from coming out of its container diff --git a/components/layout/__tests__/index.test.js b/components/layout/__tests__/index.test.js index 7e8a60a868..24ebc40820 100644 --- a/components/layout/__tests__/index.test.js +++ b/components/layout/__tests__/index.test.js @@ -95,6 +95,15 @@ describe('Layout', () => { wrapper.setProps({ collapsed: true }); expect(wrapper.instance().state.collapsed).toBe(true); }); + + it('should not add ant-layout-has-sider when `hasSider` is `false`', () => { + const wrapper = mount( + + Sider + , + ); + expect(wrapper.find('.ant-layout').hasClass('ant-layout-has-sider')).toBe(false); + }); }); describe('Sider onBreakpoint', () => { diff --git a/components/layout/demo/side.md b/components/layout/demo/side.md index f2d9f91946..b72ec5befa 100644 --- a/components/layout/demo/side.md +++ b/components/layout/demo/side.md @@ -10,7 +10,7 @@ title: 侧边两列式布局。页面横向空间有限时，侧边导航可收起。 -侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。 +侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部分。 ## en-US diff --git a/components/layout/index.en-US.md b/components/layout/index.en-US.md index f2aefaf443..19cbf6726b 100644 --- a/components/layout/index.en-US.md +++ b/components/layout/index.en-US.md @@ -13,8 +13,8 @@ Handling the overall layout of a page. The first level navigation is inclined left near a logo, and the secondary menu is inclined right. -- Top Navigation (almost systems): the height of the first level navigation `64px`, the second level navigation `48px`. -- Top Navigation(contents page): the height of the first level navigation `80px`, the second level navigation `56px`. +- Top Navigation: the height of the first level navigation `64px`, the second level navigation `48px`. +- Top Navigation (for landing pages): the height of the first level navigation `80px`, the second level navigation `56px`. - Calculation formula of a top navigation: `48+8n`. - Calculation formula of an aside navigation: `200+8n`. diff --git a/components/layout/layout.tsx b/components/layout/layout.tsx index b257571286..79e9ae6d7c 100644 --- a/components/layout/layout.tsx +++ b/components/layout/layout.tsx @@ -77,7 +77,8 @@ class BasicLayout extends React.Component 0, + [`${prefixCls}-has-sider`]: + typeof hasSider === 'boolean' ? hasSider : this.state.siders.length > 0, }); return React.createElement(tagName, { className: classString, ...others }, children); } diff --git a/components/list/Item.tsx b/components/list/Item.tsx index 64758ee792..5762d61a15 100644 --- a/components/list/Item.tsx +++ b/components/list/Item.tsx @@ -66,6 +66,7 @@ export default class Item extends React.Component { static contextTypes = { grid: PropTypes.any, + itemLayout: PropTypes.string, }; context: any; @@ -81,8 +82,17 @@ export default class Item extends React.Component { return result; } + isFlexMode() { + const { extra } = this.props; + const { itemLayout } = this.context; + if (itemLayout === 'vertical') { + return !!extra; + } + return !this.isItemContainsTextNode(); + } + renderItem = ({ getPrefixCls }: ConfigConsumerProps) => { - const { grid } = this.context; + const { grid, itemLayout } = this.context; const { prefixCls: customizePrefixCls, children, @@ -106,10 +116,10 @@ export default class Item extends React.Component {
- {extra + {itemLayout === 'vertical' && extra ? [
{children} @@ -119,7 +129,11 @@ export default class Item extends React.Component { {extra}
, ] - : [children, actionsContent]} + : [ + children, + actionsContent, + extra ? React.cloneElement(extra as React.ReactElement, { key: 'extra' }) : null, + ]}
); diff --git a/components/list/__tests__/Item.test.js b/components/list/__tests__/Item.test.js new file mode 100644 index 0000000000..a697a93df3 --- /dev/null +++ b/components/list/__tests__/Item.test.js @@ -0,0 +1,123 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import List from '..'; + +describe('List Item Layout', () => { + const data = [ + { + key: 1, + href: 'http://ant.design', + title: `ant design`, + avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', + description: + 'Ant Design, a design language for background applications, is refined by Ant UED Team.', + content: + 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.', + extra: 'extra', + }, + ]; + + it('horizontal itemLayout List which contains string nodes should not be flex container', () => { + const wrapper = mount( + ( + + I am ant design list item + + )} + />, + ); + expect( + wrapper + .find('.ant-list-item') + .at(0) + .hasClass('ant-list-item-no-flex'), + ).toBe(true); + }); + + it('horizontal itemLayout List should be flex container defaultly', () => { + const wrapper = mount( + ( + + {item.title}} + description={item.description} + /> + + )} + />, + ); + expect( + wrapper + .find('.ant-list-item') + .at(0) + .hasClass('ant-list-item-no-flex'), + ).toBe(false); + }); + + it('vertical itemLayout List should be flex container when there is extra node', () => { + const wrapper = mount( + ( + + {item.title}} + description={item.description} + /> + + )} + />, + ); + expect( + wrapper + .find('.ant-list-item') + .at(0) + .hasClass('ant-list-item-no-flex'), + ).toBe(false); + }); + + it('vertical itemLayout List should not be flex container when there is not extra node', () => { + const wrapper = mount( + ( + + {item.title}} + description={item.description} + /> + + )} + />, + ); + expect( + wrapper + .find('.ant-list-item') + .at(0) + .hasClass('ant-list-item-no-flex'), + ).toBe(true); + }); + + it('horizontal itemLayout List should accept extra node', () => { + const wrapper = mount( + ( + Action]} extra={{item.extra}}> + {item.title}} + description={item.description} + /> + + )} + />, + ); + expect(wrapper.render()).toMatchSnapshot(); + }); +}); diff --git a/components/list/__tests__/__snapshots__/Item.test.js.snap b/components/list/__tests__/__snapshots__/Item.test.js.snap new file mode 100644 index 0000000000..ec6bd80f9b --- /dev/null +++ b/components/list/__tests__/__snapshots__/Item.test.js.snap @@ -0,0 +1,54 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`List Item Layout horizontal itemLayout List should accept extra node 1`] = ` +
+
+
+
+
+
+

+ + ant design + +

+
+ Ant Design, a design language for background applications, is refined by Ant UED Team. +
+
+
+ + + extra + +
+
+
+
+`; diff --git a/components/list/index.tsx b/components/list/index.tsx index d114b29c23..9510222add 100644 --- a/components/list/index.tsx +++ b/components/list/index.tsx @@ -29,6 +29,8 @@ export interface ListGridType { export type ListSize = 'small' | 'default' | 'large'; +export type ListItemLayout = 'horizontal' | 'vertical'; + export interface ListProps { bordered?: boolean; className?: string; @@ -37,7 +39,7 @@ export interface ListProps { extra?: React.ReactNode; grid?: ListGridType; id?: string; - itemLayout?: string; + itemLayout?: ListItemLayout; loading?: boolean | SpinProps; loadMore?: React.ReactNode; pagination?: PaginationConfig | false; @@ -52,7 +54,7 @@ export interface ListProps { } export interface ListLocale { - emptyText: string; + emptyText: React.ReactNode | (() => React.ReactNode); } export default class List extends React.Component { @@ -60,6 +62,7 @@ export default class List extends React.Component { static childContextTypes = { grid: PropTypes.any, + itemLayout: PropTypes.string, }; static defaultProps = { @@ -94,6 +97,7 @@ export default class List extends React.Component { getChildContext() { return { grid: this.props.grid, + itemLayout: this.props.itemLayout, }; } diff --git a/components/list/style/index.less b/components/list/style/index.less index 9f3e97aeb3..e48eac4f64 100644 --- a/components/list/style/index.less +++ b/components/list/style/index.less @@ -6,13 +6,16 @@ .@{list-prefix-cls} { .reset-component; position: relative; + * { outline: none; } + &-pagination { margin-top: 24px; text-align: right; } + &-more { margin-top: 12px; text-align: center; @@ -21,24 +24,32 @@ padding-left: 32px; } } + &-spin { min-height: 40px; text-align: center; } + &-empty-text { padding: @list-empty-text-padding; color: @text-color-secondary; font-size: @font-size-base; text-align: center; } + &-item { display: flex; + align-items: center; padding: @list-item-padding; &-no-flex { display: block; } + &-content { + color: @text-color; + } + &-meta { display: flex; flex: 1; @@ -151,6 +162,8 @@ } &-vertical &-item { + align-items: initial; + &-main { display: block; flex: 1; diff --git a/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap b/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap index 7815cc745e..a1c5de08ae 100644 --- a/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap +++ b/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap @@ -800,7 +800,7 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = ` checked="" class="ant-radio-button-input" type="radio" - value="date" + value="month" /> document.body | | loading | loading mode | boolean | false | | multiLines | multilines mode | boolean | false | -| notFoundContent | suggestion when suggestions empty | string | '无匹配结果，轻敲空格完成输入' | +| notFoundContent | suggestion when suggestions empty | string | 'No matches found' | | placeholder | placeholder of input | string | null | | placement | The position of the suggestion relative to the target, which can be one of `top` and `bottom` | string | 'bottom'. | | prefix | character which will trigger Mention to show mention list | string or Array<string> | '@' | diff --git a/components/mention/index.tsx b/components/mention/index.tsx index 0ff8deaf6d..94c1635825 100644 --- a/components/mention/index.tsx +++ b/components/mention/index.tsx @@ -40,7 +40,7 @@ export interface MentionState { class Mention extends React.Component { static getMentions = getMentions; static defaultProps = { - notFoundContent: '无匹配结果，轻敲空格完成输入', + notFoundContent: 'No matches found', loading: false, multiLines: false, placement: 'bottom' as MentionPlacement, diff --git a/components/menu/SubMenu.tsx b/components/menu/SubMenu.tsx index a36dd03725..364649b5a6 100644 --- a/components/menu/SubMenu.tsx +++ b/components/menu/SubMenu.tsx @@ -31,9 +31,11 @@ class SubMenu extends React.Component { onKeyDown = (e: React.MouseEvent) => { this.subMenu.onKeyDown(e); }; + saveSubMenu = (subMenu: any) => { this.subMenu = subMenu; }; + render() { const { rootPrefixCls, className } = this.props; const theme = this.context.antdMenuTheme; diff --git a/components/menu/__tests__/index.test.js b/components/menu/__tests__/index.test.js index e5c1f682a1..6974c90484 100644 --- a/components/menu/__tests__/index.test.js +++ b/components/menu/__tests__/index.test.js @@ -2,6 +2,7 @@ import React from 'react'; import { mount } from 'enzyme'; import Menu from '..'; import Icon from '../../icon'; +import Layout from '../../layout'; jest.mock('mutationobserver-shim', () => { global.MutationObserver = function MutationObserver() { @@ -494,4 +495,46 @@ describe('Menu', () => { const text = wrapper.find('.ant-tooltip-inner').text(); expect(text).toBe('bamboo lucky'); }); + + it('render correctly when using with Layout.Sider', () => { + class Demo extends React.Component { + state = { + collapsed: false, + }; + + onCollapse = collapsed => this.setState({ collapsed }); + + render() { + const { collapsed } = this.state; + return ( + + +
+ + + + User + + } + > + Tom + Bill + Alex + + + + + ); + } + } + const wrapper = mount(); + wrapper.find('.ant-menu-submenu-title').simulate('click'); + wrapper.find('.ant-layout-sider-trigger').simulate('click'); + jest.runAllTimers(); + wrapper.update(); + expect(wrapper.find('.ant-menu-submenu-popup').length).toBe(0); + }); }); diff --git a/components/menu/index.en-US.md b/components/menu/index.en-US.md index 391d6fe351..bd68424fe7 100644 --- a/components/menu/index.en-US.md +++ b/components/menu/index.en-US.md @@ -28,7 +28,7 @@ More layouts with navigation: [layout](/components/layout). | Param | Description | Type | Default value | | ----- | ----------- | ---- | ------------- | -| defaultOpenKeys | array with the keys of default opened sub menus | | | +| defaultOpenKeys | array with the keys of default opened sub menus | string\[] | | | defaultSelectedKeys | array with the keys of default selected menu items | string\[] | | | forceSubMenuRender | render submenu into DOM before it shows | boolean | false | | inlineCollapsed | specifies the collapsed status when menu is inline mode | boolean | - | diff --git a/components/menu/index.tsx b/components/menu/index.tsx index 43d6e1d86c..ed49ad5259 100644 --- a/components/menu/index.tsx +++ b/components/menu/index.tsx @@ -90,6 +90,7 @@ class Menu extends React.Component { context: any; switchingModeFromInline: boolean; inlineOpenKeys: string[] = []; + contextSiderCollapsed: boolean = true; constructor(props: MenuProps) { super(props); @@ -130,12 +131,20 @@ class Menu extends React.Component { if (prevProps.mode === 'inline' && this.props.mode !== 'inline') { this.switchingModeFromInline = true; } - if (this.props.inlineCollapsed && !prevProps.inlineCollapsed) { + if ( + (this.props.inlineCollapsed && !prevProps.inlineCollapsed) || + (this.getInlineCollapsed() && this.contextSiderCollapsed) + ) { + this.contextSiderCollapsed = false; this.switchingModeFromInline = true; this.inlineOpenKeys = this.state.openKeys; this.setState({ openKeys: [] }); } - if (!this.props.inlineCollapsed && prevProps.inlineCollapsed) { + if ( + (!this.props.inlineCollapsed && prevProps.inlineCollapsed) || + (!this.getInlineCollapsed() && !this.contextSiderCollapsed) + ) { + this.contextSiderCollapsed = true; this.setState({ openKeys: this.inlineOpenKeys }); this.inlineOpenKeys = []; } @@ -158,6 +167,7 @@ class Menu extends React.Component { onMouseEnter(e); } }; + handleTransitionEnd = (e: TransitionEvent) => { // when inlineCollapsed menu width animation finished // https://github.com/ant-design/ant-design/issues/12864 @@ -170,6 +180,7 @@ class Menu extends React.Component { this.restoreModeVerticalFromInline(); } }; + handleClick = (e: ClickParam) => { this.handleOpenChange([]); @@ -186,6 +197,7 @@ class Menu extends React.Component { onOpenChange(openKeys); } }; + setOpenKeys(openKeys: string[]) { if (!('openKeys' in this.props)) { this.setState({ openKeys }); diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md index 9d009e9871..e52f811f81 100644 --- a/components/menu/index.zh-CN.md +++ b/components/menu/index.zh-CN.md @@ -29,7 +29,7 @@ subtitle: 导航菜单 | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | | | +| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | string\[] | | | defaultSelectedKeys | 初始选中的菜单项 key 数组 | string\[] | | | forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false | | inlineCollapsed | inline 时菜单是否收起状态 | boolean | - | diff --git a/components/modal/style/modal.less b/components/modal/style/modal.less index 75dfe1e7d9..4b86bee4de 100644 --- a/components/modal/style/modal.less +++ b/components/modal/style/modal.less @@ -1,5 +1,7 @@ @dialog-prefix-cls: ~'@{ant-prefix}-modal'; @table-prefix-cls: ~'@{ant-prefix}-table'; +@modal-footer-padding-vertical: 10px; +@modal-footer-padding-horizontal: 16px; .@{dialog-prefix-cls} { .reset-component; @@ -89,7 +91,7 @@ } &-footer { - padding: 10px 16px; + padding: @modal-footer-padding-vertical @modal-footer-padding-horizontal; text-align: right; background: @modal-footer-bg; border-top: @border-width-base @border-style-base @border-color-split; diff --git a/components/notification/style/index.less b/components/notification/style/index.less index 5cec28825f..14508c3969 100644 --- a/components/notification/style/index.less +++ b/components/notification/style/index.less @@ -83,7 +83,7 @@ font-size: @font-size-base; } - &-icon { + .@{iconfont-css-prefix}&-icon { position: absolute; margin-left: 4px; font-size: 24px; diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx index f09d7c1020..9fb79f0971 100644 --- a/components/page-header/index.tsx +++ b/components/page-header/index.tsx @@ -3,7 +3,8 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import Icon from '../icon'; import classnames from 'classnames'; import { BreadcrumbProps } from '../breadcrumb'; -import { Divider, Breadcrumb } from '../index'; +import Divider from '../divider'; +import Breadcrumb from '../breadcrumb'; import Tag from '../tag'; import Wave from '../_util/wave'; diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less index 3013005c77..c2c6c5ddbf 100644 --- a/components/page-header/style/index.less +++ b/components/page-header/style/index.less @@ -28,8 +28,6 @@ .@{ant-prefix}-divider { height: 14px; margin: 0 12px; - margin-top: 3px; - vertical-align: top; } .@{ant-prefix}-breadcrumb { diff --git a/components/page-header/style/index.tsx b/components/page-header/style/index.tsx index c24c4f5990..abbb262478 100644 --- a/components/page-header/style/index.tsx +++ b/components/page-header/style/index.tsx @@ -1,5 +1,5 @@ import './index.less'; +// style dependencies import '../../divider/style'; import '../../breadcrumb/style'; -import '../../typography/style'; diff --git a/components/pagination/Pagination.tsx b/components/pagination/Pagination.tsx index c85e63da3b..9ef10a5b80 100644 --- a/components/pagination/Pagination.tsx +++ b/components/pagination/Pagination.tsx @@ -31,7 +31,7 @@ export interface PaginationProps { itemRender?: ( page: number, type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next', - originalElement: HTMLElement, + originalElement: React.ReactElement, ) => React.ReactNode; role?: string; } diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less index b6ea0e43cb..4cf4555ff2 100644 --- a/components/pagination/style/index.less +++ b/components/pagination/style/index.less @@ -66,6 +66,7 @@ &-active { font-weight: @pagination-font-weight-active; + background: @pagination-item-bg-active; border-color: @primary-color; a { diff --git a/components/pagination/style/index.tsx b/components/pagination/style/index.tsx index d841ee8fa1..17626c8e42 100644 --- a/components/pagination/style/index.tsx +++ b/components/pagination/style/index.tsx @@ -3,4 +3,3 @@ import './index.less'; // style dependencies import '../../select/style'; -import '../../input/style'; diff --git a/components/popconfirm/style/index.tsx b/components/popconfirm/style/index.tsx index c4708ebddb..3a57ddc783 100644 --- a/components/popconfirm/style/index.tsx +++ b/components/popconfirm/style/index.tsx @@ -1,5 +1,6 @@ import '../../style/index.less'; // style dependencies +// deps-lint-skip: tooltip, popover import '../../popover/style'; import '../../button/style'; diff --git a/components/popover/style/index.tsx b/components/popover/style/index.tsx index 3a3ab0de59..9f2a34a79c 100644 --- a/components/popover/style/index.tsx +++ b/components/popover/style/index.tsx @@ -1,2 +1,5 @@ import '../../style/index.less'; import './index.less'; + +// style dependencies +// deps-lint-skip: tooltip diff --git a/components/rate/style/index.tsx b/components/rate/style/index.tsx index 3a3ab0de59..7bd39f61bf 100644 --- a/components/rate/style/index.tsx +++ b/components/rate/style/index.tsx @@ -1,2 +1,5 @@ import '../../style/index.less'; import './index.less'; + +// style dependencies +import '../../tooltip/style'; diff --git a/components/row/style/index.tsx b/components/row/style/index.tsx index cc2ae69eee..2127e6804d 100644 --- a/components/row/style/index.tsx +++ b/components/row/style/index.tsx @@ -1,2 +1,5 @@ import '../../style/index.less'; -import '../../grid/style/index.less'; + +// style dependencies +// deps-lint-skip: grid +import '../../grid/style'; diff --git a/components/select/style/index.less b/components/select/style/index.less index 0c37cce423..cc9e1a22b0 100644 --- a/components/select/style/index.less +++ b/components/select/style/index.less @@ -530,7 +530,7 @@ &, &:hover { color: @text-color; - font-weight: 600; + font-weight: @select-item-selected-font-weight; background-color: @background-color-light; } } @@ -580,6 +580,12 @@ } } + // Patch for popup adjust + // https://github.com/ant-design/ant-design/issues/14422 + &--empty&--multiple &-menu-item { + padding-right: @control-padding-horizontal; + } + &-container-open, &-open { .@{select-prefix-cls}-dropdown { diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx index b64c64e2f9..a914d0b4bd 100644 --- a/components/select/style/index.tsx +++ b/components/select/style/index.tsx @@ -3,4 +3,3 @@ import './index.less'; // style dependencies import '../../empty/style'; -import '../../input/style'; diff --git a/components/skeleton/__tests__/__snapshots__/demo.test.js.snap b/components/skeleton/__tests__/__snapshots__/demo.test.js.snap index 2712875d3e..de86edde96 100644 --- a/components/skeleton/__tests__/__snapshots__/demo.test.js.snap +++ b/components/skeleton/__tests__/__snapshots__/demo.test.js.snap @@ -123,7 +123,7 @@ exports[`renders ./components/skeleton/demo/list.md correctly 1`] = ` class="ant-spin-container" >
li { width: 100%; height: 16px; diff --git a/components/steps/index.tsx b/components/steps/index.tsx index 04e7356ff2..ae00c20c31 100644 --- a/components/steps/index.tsx +++ b/components/steps/index.tsx @@ -25,6 +25,7 @@ export interface StepProps { onClick?: React.MouseEventHandler; status?: 'wait' | 'process' | 'finish' | 'error'; title?: React.ReactNode; + style?: React.CSSProperties; } export default class Steps extends React.Component { diff --git a/components/style/core/base.less b/components/style/core/base.less index daa08e42ef..9fac56edd0 100644 --- a/components/style/core/base.less +++ b/components/style/core/base.less @@ -77,7 +77,7 @@ body { font-variant: @font-variant-base; line-height: @line-height-base; background-color: @body-background; // 2 - font-feature-settings: 'tnum'; + font-feature-settings: @font-feature-settings-base; } // Suppress the focus outline on elements that cannot be accessed via keyboard. diff --git a/components/style/mixins/iconfont.less b/components/style/mixins/iconfont.less index 2e4bfcf8df..c548bcb888 100644 --- a/components/style/mixins/iconfont.less +++ b/components/style/mixins/iconfont.less @@ -1,5 +1,6 @@ .iconfont-mixin() { display: inline-block; + color: @icon-color; font-style: normal; line-height: 0; text-align: center; diff --git a/components/style/mixins/reset.less b/components/style/mixins/reset.less index b164dc53d7..69d1ac945a 100644 --- a/components/style/mixins/reset.less +++ b/components/style/mixins/reset.less @@ -9,5 +9,5 @@ font-variant: @font-variant-base; line-height: @line-height-base; list-style: none; - font-feature-settings: 'tnum'; + font-feature-settings: @font-feature-settings-base; } diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 783717917d..6c6843f35a 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -47,12 +47,14 @@ @text-color-warning: @gold-7; @text-color-danger: @red-7; @text-color-inverse: @white; +@icon-color: inherit; @icon-color-hover: fade(@black, 75%); @heading-color: fade(#000, 85%); @heading-color-dark: fade(@white, 100%); @text-color-dark: fade(@white, 85%); @text-color-secondary-dark: fade(@white, 65%); @font-variant-base: tabular-nums; +@font-feature-settings-base: 'tnum'; @font-size-base: 14px; @font-size-lg: @font-size-base + 2px; @font-size-sm: 12px; @@ -304,6 +306,7 @@ // Select // --- @select-border-color: @border-color-base; +@select-item-selected-font-weight: 600; // Tooltip // --- @@ -498,6 +501,7 @@ @pagination-item-size-sm: 24px; @pagination-font-family: Arial; @pagination-font-weight-active: 500; +@pagination-item-bg-active: transparent; // Breadcrumb // --- diff --git a/components/table/Table.tsx b/components/table/Table.tsx index 4185d34146..11d62e9845 100755 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -1121,7 +1121,6 @@ export default class Table extends React.Component, TableState< renderEmpty: RenderEmptyHandler, dropdownPrefixCls: string, contextLocale: TableLocale, - loading: SpinProps, ) => { const { style, className, showHeader, locale, ...restProps } = this.props; const data = this.getCurrentPageData(); @@ -1164,7 +1163,7 @@ export default class Table extends React.Component, TableState< className={classString} expandIconColumnIndex={expandIconColumnIndex} expandIconAsCell={expandIconAsCell} - emptyText={!loading.spinning && mergedLocale.emptyText} + emptyText={mergedLocale.emptyText} /> ); }; @@ -1189,7 +1188,7 @@ export default class Table extends React.Component, TableState< const dropdownPrefixCls = getPrefixCls('dropdown', customizeDropdownPrefixCls); const table = ( - {locale => this.renderTable(prefixCls, renderEmpty, dropdownPrefixCls, locale, loading)} + {locale => this.renderTable(prefixCls, renderEmpty, dropdownPrefixCls, locale)} ); diff --git a/components/table/__tests__/__snapshots__/empty.test.js.snap b/components/table/__tests__/__snapshots__/empty.test.js.snap index e39ed23cfb..3a9dff7876 100644 --- a/components/table/__tests__/__snapshots__/empty.test.js.snap +++ b/components/table/__tests__/__snapshots__/empty.test.js.snap @@ -600,7 +600,25 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
+ > +
+
+ No Data +
+

+ No Data +

+
+
diff --git a/components/table/demo/edit-cell.md b/components/table/demo/edit-cell.md index edfb1eac44..884bbdaf2c 100644 --- a/components/table/demo/edit-cell.md +++ b/components/table/demo/edit-cell.md @@ -43,10 +43,10 @@ class EditableCell extends React.Component { }); } - save = () => { + save = (e) => { const { record, handleSave } = this.props; this.form.validateFields((error, values) => { - if (error) { + if (error && error[e.currentTarget.id]) { return; } this.toggleEdit(); @@ -66,7 +66,7 @@ class EditableCell extends React.Component { ...restProps } = this.props; return ( - (this.cell = node)} {...restProps}> + {editable ? ( {(form) => { diff --git a/components/table/demo/edit-row.md b/components/table/demo/edit-row.md index f199d0231e..458c8aabdc 100644 --- a/components/table/demo/edit-row.md +++ b/components/table/demo/edit-row.md @@ -30,14 +30,6 @@ for (let i = 0; i < 100; i++) { const FormItem = Form.Item; const EditableContext = React.createContext(); -const EditableRow = ({ form, index, ...props }) => ( - - - -); - -const EditableFormRow = Form.create()(EditableRow); - class EditableCell extends React.Component { getInput = () => { if (this.props.inputType === 'number') { @@ -108,6 +100,7 @@ class EditableTable extends React.Component { title: 'operation', dataIndex: 'operation', render: (text, record) => { + const { editingKey } = this.state; const editable = this.isEditing(record); return (
@@ -132,7 +125,7 @@ class EditableTable extends React.Component { ) : ( - this.edit(record.key)}>Edit + this.edit(record.key)}>Edit )}
); @@ -175,7 +168,6 @@ class EditableTable extends React.Component { render() { const components = { body: { - row: EditableFormRow, cell: EditableCell, }, }; @@ -197,21 +189,25 @@ class EditableTable extends React.Component { }); return ( - + +
+ ); } } -ReactDOM.render(, mountNode); +const EditableFormTable = Form.create()(EditableTable); + +ReactDOM.render(, mountNode); ``` ```css diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index e88aecdc34..4ac03fe700 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -127,6 +127,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t | render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - | | sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | Function\|boolean | - | | sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean\|string | - | +| sortDirections | supported sort way, could be `'ascend'`, `'descend'` | Array | `['ascend', 'descend']` | | title | Title of this column | ReactNode\|({ sortOrder, filters }) => ReactNode | - | | width | Width of this column | string\|number | - | | onCell | Set props on per cell | Function(record, rowIndex) | - | diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index 6fcdcfe0de..93c03f34ed 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -132,6 +132,7 @@ const columns = [{ | render | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return里面可以设置表格[行/列合并](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - | | sorter | 排序函数，本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction)，需要服务端排序可设为 true | Function\|boolean | - | | sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 `'ascend'` `'descend'` `false` | boolean\|string | - | +| sortDirections | 支持的排序方式，取值为 `'ascend'` `'descend'` | Array | `['ascend', 'descend']` | | title | 列头显示文字 | ReactNode\|({ sortOrder, filters }) => ReactNode | - | | width | 列宽度 | string\|number | - | | onCell | 设置单元格属性 | Function(record, rowIndex) | - | diff --git a/components/table/style/index.tsx b/components/table/style/index.tsx index 3d02361cdf..c1ff86a1ad 100644 --- a/components/table/style/index.tsx +++ b/components/table/style/index.tsx @@ -2,6 +2,7 @@ import '../../style/index.less'; import './index.less'; // style dependencies +// deps-lint-skip: menu import '../../empty/style'; import '../../radio/style'; import '../../checkbox/style'; diff --git a/components/tabs/__tests__/demo.test.js b/components/tabs/__tests__/demo.test.js index cc291e81ca..d3ca3526e6 100644 --- a/components/tabs/__tests__/demo.test.js +++ b/components/tabs/__tests__/demo.test.js @@ -1,3 +1,3 @@ import demoTest from '../../../tests/shared/demoTest'; -demoTest('tabs', { skip: process.env.REACT === '15' ? ['custom-tab-bar-node.md'] : [] }); +demoTest('tabs', { skip: process.env.REACT === '15' ? ['custom-tab-bar-node.md'] : [] }); diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md index e0dfcd57e6..f6ce8d5e3e 100644 --- a/components/tabs/index.en-US.md +++ b/components/tabs/index.en-US.md @@ -36,7 +36,9 @@ Ant Design has 3 types of Tabs for different situations. | onEdit | Callback executed when tab is added or removed. Only works while `type="editable-card"` | (targetKey, action): void | - | | onNextClick | Callback executed when next button is clicked | Function | - | | onPrevClick | Callback executed when prev button is clicked | Function | - | -| onTabClick | Callback executed when tab is clicked | Function | - | +| onTabClick | Callback executed when tab is clicked | Function(key: string, event: MouseEvent) | - | + +More option at [rc-tabs option](https://github.com/react-component/tabs#tabs) ### Tabs.TabPane @@ -45,3 +47,5 @@ Ant Design has 3 types of Tabs for different situations. | forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false | | key | TabPane's key | string | - | | tab | Show text in TabPane's head | string\|ReactNode | - | + +More option at [rc-tabs option](https://github.com/react-component/tabs#tabpane) diff --git a/components/tabs/style/card-style.less b/components/tabs/style/card-style.less index 58e447df19..813ca11aa5 100644 --- a/components/tabs/style/card-style.less +++ b/components/tabs/style/card-style.less @@ -12,21 +12,22 @@ visibility: hidden; } &&-card &-card-bar &-tab { + height: @tabs-card-height; margin: 0; margin-right: 2px; padding: 0 16px; line-height: @tabs-card-height - 2px; background: @tabs-card-head-background; border: @border-width-base @border-style-base @border-color-split; - border-bottom: 0; border-radius: @border-radius-base @border-radius-base 0 0; transition: all 0.3s @ease-in-out; } &&-card &-card-bar &-tab-active { - padding-bottom: 1px; + height: @tabs-card-height; color: @tabs-card-active-color; background: @component-background; border-color: @border-color-split; + border-bottom: @border-width-base solid @component-background; } &&-card &-card-bar &-tab-inactive { padding: 0; diff --git a/components/tag/style/index.less b/components/tag/style/index.less index 3ca30b461a..db8869ce86 100644 --- a/components/tag/style/index.less +++ b/components/tag/style/index.less @@ -6,12 +6,12 @@ .@{tag-prefix-cls} { .reset-component; display: inline-block; - height: 22px; + height: auto; margin-right: 8px; padding: 0 7px; font-size: @tag-font-size; line-height: 20px; - white-space: nowrap; + white-space: normal; background: @tag-default-bg; border: @border-width-base @border-style-base @border-color-base; border-radius: @border-radius-base; diff --git a/components/time-picker/style/index.tsx b/components/time-picker/style/index.tsx index 0e54062b35..3a3ab0de59 100644 --- a/components/time-picker/style/index.tsx +++ b/components/time-picker/style/index.tsx @@ -1,5 +1,2 @@ import '../../style/index.less'; import './index.less'; - -// style dependencies -import '../../input/style'; diff --git a/components/tooltip/index.en-US.md b/components/tooltip/index.en-US.md index 3d3016892a..f5445cf6c5 100644 --- a/components/tooltip/index.en-US.md +++ b/components/tooltip/index.en-US.md @@ -27,7 +27,7 @@ The following APIs are shared by Tooltip, Popconfirm, Popover. | autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | `true` | | defaultVisible | Whether the floating tooltip card is visible by default | boolean | `false` | | getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body` | Function(triggerNode) | () => document.body | -| mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0 | +| mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0.1 | | mouseLeaveDelay | Delay in seconds, before tooltip is hidden on mouse leave | number | 0.1 | | overlayClassName | Class name of the tooltip card | string | - | | overlayStyle | Style of the tooltip card | object | - | diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md index bb417a223a..22a398fb4d 100644 --- a/components/tooltip/index.zh-CN.md +++ b/components/tooltip/index.zh-CN.md @@ -29,7 +29,7 @@ title: Tooltip | autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | `true` | | defaultVisible | 默认是否显隐 | boolean | false | | getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | Function(triggerNode) | () => document.body | -| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0 | +| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | | mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | | overlayClassName | 卡片类名 | string | 无 | | overlayStyle | 卡片样式 | object | 无 | diff --git a/components/tree-select/style/index.tsx b/components/tree-select/style/index.tsx index c3f91d2d60..04ee7ce2f9 100644 --- a/components/tree-select/style/index.tsx +++ b/components/tree-select/style/index.tsx @@ -2,5 +2,6 @@ import '../../style/index.less'; import './index.less'; // style dependencies +// deps-lint-skip: select import '../../select/style'; -import '../../checkbox/style'; +import '../../empty/style'; diff --git a/components/tree/demo/search.md b/components/tree/demo/search.md index c0c18b6586..ab9d884323 100644 --- a/components/tree/demo/search.md +++ b/components/tree/demo/search.md @@ -54,7 +54,7 @@ const generateList = (data) => { const key = node.key; dataList.push({ key, title: key }); if (node.children) { - generateList(node.children, node.key); + generateList(node.children); } } }; diff --git a/components/tree/style/index.tsx b/components/tree/style/index.tsx index 68627a2a99..3a3ab0de59 100644 --- a/components/tree/style/index.tsx +++ b/components/tree/style/index.tsx @@ -1,5 +1,2 @@ import '../../style/index.less'; import './index.less'; - -// style dependencies -import '../../checkbox/style'; diff --git a/components/typography/Editable.tsx b/components/typography/Editable.tsx index 9ac7225939..3299b3b34e 100644 --- a/components/typography/Editable.tsx +++ b/components/typography/Editable.tsx @@ -109,7 +109,7 @@ class Editable extends React.Component { const { prefixCls, ['aria-label']: ariaLabel } = this.props; return ( -
+