From e22bfcdc4de44956d624578659c6c6f80ef5877d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Fri, 19 Apr 2019 15:42:01 +0800 Subject: [PATCH 1/9] fix #16038, back icon should is a button --- components/page-header/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx index 05111dfd14..cfd6ffb978 100644 --- a/components/page-header/index.tsx +++ b/components/page-header/index.tsx @@ -6,7 +6,7 @@ import { BreadcrumbProps } from '../breadcrumb'; import Divider from '../divider'; import Tag from '../tag'; import Breadcrumb from '../breadcrumb'; -import Wave from '../_util/wave'; +import TransButtonProps from '../_util/transButton'; export interface PageHeaderProps { backIcon?: React.ReactNode; @@ -39,7 +39,7 @@ const renderBack = ( } }} > - {backIcon} + {backIcon} ); From b2c734c169294fe3681517d8b98cfc0db2ecfdf3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Fri, 19 Apr 2019 15:55:43 +0800 Subject: [PATCH 2/9] snapshots updated --- .../__tests__/__snapshots__/demo.test.js.snap | 76 ++++++++++--------- 1 file changed, 42 insertions(+), 34 deletions(-) diff --git a/components/page-header/__tests__/__snapshots__/demo.test.js.snap b/components/page-header/__tests__/__snapshots__/demo.test.js.snap index be82c5a6fd..6bdd8cd850 100644 --- a/components/page-header/__tests__/__snapshots__/demo.test.js.snap +++ b/components/page-header/__tests__/__snapshots__/demo.test.js.snap @@ -7,25 +7,29 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
- - - + + +
@@ -408,25 +412,29 @@ exports[`renders ./components/page-header/demo/basic.md correctly 1`] = `
- - - + + +
From fa81af5abb16777485e0cecd2193582016bbd957 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Fri, 19 Apr 2019 17:52:27 +0800 Subject: [PATCH 3/9] TransButton use div#role=button --- components/_util/transButton.tsx | 25 ++++++++++++---------- components/locale-provider/default.tsx | 3 +++ components/locale-provider/zh_CN.tsx | 3 +++ components/locale-provider/zh_TW.tsx | 3 +++ components/page-header/index.tsx | 29 +++++++++++++++----------- 5 files changed, 40 insertions(+), 23 deletions(-) diff --git a/components/_util/transButton.tsx b/components/_util/transButton.tsx index f7aca9865a..e67b38b25f 100644 --- a/components/_util/transButton.tsx +++ b/components/_util/transButton.tsx @@ -5,7 +5,7 @@ import * as React from 'react'; import KeyCode from 'rc-util/lib/KeyCode'; -interface TransButtonProps extends React.HTMLAttributes { +interface TransButtonProps extends React.HTMLAttributes { onClick?: () => void; } @@ -14,20 +14,21 @@ const inlineStyle: React.CSSProperties = { background: 'transparent', padding: 0, lineHeight: 'inherit', + display: 'inline-block', }; class TransButton extends React.Component { - button?: HTMLButtonElement; + div?: HTMLDivElement; lastKeyCode?: number; - onKeyDown: React.KeyboardEventHandler = event => { + onKeyDown: React.KeyboardEventHandler = event => { const { keyCode } = event; if (keyCode === KeyCode.ENTER) { event.preventDefault(); } }; - onKeyUp: React.KeyboardEventHandler = event => { + onKeyUp: React.KeyboardEventHandler = event => { const { keyCode } = event; const { onClick } = this.props; if (keyCode === KeyCode.ENTER && onClick) { @@ -35,26 +36,28 @@ class TransButton extends React.Component { } }; - setRef = (btn: HTMLButtonElement) => { - this.button = btn; + setRef = (btn: HTMLDivElement) => { + this.div = btn; }; focus() { - if (this.button) { - this.button.focus(); + if (this.div) { + this.div.focus(); } } blur() { - if (this.button) { - this.button.blur(); + if (this.div) { + this.div.blur(); } } render() { const { style } = this.props; return ( -
+ + {({ back }: { back: string }) => ( +
{ + if (onBack) { + onBack(e); + } + }} + > + {backIcon} + +
+ )} + ); }; From a1c4d9f45bfb4df842d7c87e8f280563ca26d9a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Sat, 20 Apr 2019 10:56:11 +0800 Subject: [PATCH 4/9] use operation-unit function --- components/_util/transButton.tsx | 2 +- components/page-header/index.tsx | 4 +++- components/page-header/style/index.less | 6 ++++-- components/style/mixins/index.less | 1 + components/style/mixins/operationUnit.less | 18 ++++++++++++++++++ components/typography/style/index.less | 17 ----------------- 6 files changed, 27 insertions(+), 21 deletions(-) create mode 100644 components/style/mixins/operationUnit.less diff --git a/components/_util/transButton.tsx b/components/_util/transButton.tsx index e67b38b25f..08c3d780af 100644 --- a/components/_util/transButton.tsx +++ b/components/_util/transButton.tsx @@ -57,7 +57,7 @@ class TransButton extends React.Component { return (
- {backIcon} + + {backIcon} +
)} diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less index 64a1544b88..62ba043b09 100644 --- a/components/page-header/style/index.less +++ b/components/page-header/style/index.less @@ -20,8 +20,10 @@ font-size: 16px; line-height: 100%; cursor: pointer; - i:hover { - color: @primary-color; + &-button { + .operation-unit(); + + color: @text-color; } } diff --git a/components/style/mixins/index.less b/components/style/mixins/index.less index 44c88a764b..49a5eb77e0 100644 --- a/components/style/mixins/index.less +++ b/components/style/mixins/index.less @@ -6,3 +6,4 @@ @import 'iconfont'; @import 'motion'; @import 'reset'; +@import 'operationUnit'; diff --git a/components/style/mixins/operationUnit.less b/components/style/mixins/operationUnit.less new file mode 100644 index 0000000000..03ee5f93d1 --- /dev/null +++ b/components/style/mixins/operationUnit.less @@ -0,0 +1,18 @@ +@import '../../style/themes/default'; + +.operation-unit() { + color: @link-color; + text-decoration: none; + outline: none; + cursor: pointer; + transition: color 0.3s; + + &:focus, + &:hover { + color: @link-hover-color; + } + + &:active { + color: @link-active-color; + } +} diff --git a/components/typography/style/index.less b/components/typography/style/index.less index 4fbc2e38ff..dfa8d750a4 100644 --- a/components/typography/style/index.less +++ b/components/typography/style/index.less @@ -30,23 +30,6 @@ .typography-title(@heading-4-size, 1.4); } -.operation-unit() { - color: @link-color; - text-decoration: none; - outline: none; - cursor: pointer; - transition: color 0.3s; - - &:focus, - &:hover { - color: @link-hover-color; - } - - &:active { - color: @link-active-color; - } -} - // =============== Basic =============== .@{typography-prefix-cls} { color: @text-color; From ea444bd7eb81f7d6cd0978f957ed344f1dfd42a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Sat, 20 Apr 2019 13:26:17 +0800 Subject: [PATCH 5/9] snapshots updated --- .../__tests__/__snapshots__/demo.test.js.snap | 20 +++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/components/page-header/__tests__/__snapshots__/demo.test.js.snap b/components/page-header/__tests__/__snapshots__/demo.test.js.snap index 6bdd8cd850..429faddd94 100644 --- a/components/page-header/__tests__/__snapshots__/demo.test.js.snap +++ b/components/page-header/__tests__/__snapshots__/demo.test.js.snap @@ -7,8 +7,12 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
- +
@@ -412,8 +416,12 @@ exports[`renders ./components/page-header/demo/basic.md correctly 1`] = `
- +
From 1ece80f6bcd63b9bf83d806e36efecbbc7f2c2b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Mon, 22 Apr 2019 10:14:44 +0800 Subject: [PATCH 6/9] snapshot updated --- .../__tests__/__snapshots__/demo.test.js.snap | 24 ++++++++++++------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/components/typography/__tests__/__snapshots__/demo.test.js.snap b/components/typography/__tests__/__snapshots__/demo.test.js.snap index c3f0c87b31..8f15774ad7 100644 --- a/components/typography/__tests__/__snapshots__/demo.test.js.snap +++ b/components/typography/__tests__/__snapshots__/demo.test.js.snap @@ -283,10 +283,12 @@ exports[`renders ./components/typography/demo/interactive.md correctly 1`] = ` class="ant-typography" > This is an editable text. - +
This is a copyable text. - +
Replace copy text. - +
`; From 6055905ae4d50cf0656e2af08318ef8bc4a0fafd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Thu, 25 Apr 2019 12:18:01 +0800 Subject: [PATCH 7/9] change onclick dom --- components/_util/transButton.tsx | 2 +- .../page-header/__tests__/index.test.js | 4 ++-- components/page-header/index.tsx | 21 ++++++++++--------- 3 files changed, 14 insertions(+), 13 deletions(-) diff --git a/components/_util/transButton.tsx b/components/_util/transButton.tsx index 08c3d780af..5fc0ec7a02 100644 --- a/components/_util/transButton.tsx +++ b/components/_util/transButton.tsx @@ -6,7 +6,7 @@ import * as React from 'react'; import KeyCode from 'rc-util/lib/KeyCode'; interface TransButtonProps extends React.HTMLAttributes { - onClick?: () => void; + onClick?: (e?: React.MouseEvent) => void; } const inlineStyle: React.CSSProperties = { diff --git a/components/page-header/__tests__/index.test.js b/components/page-header/__tests__/index.test.js index 7c67957a19..83fc6954c0 100644 --- a/components/page-header/__tests__/index.test.js +++ b/components/page-header/__tests__/index.test.js @@ -21,7 +21,7 @@ describe('PageHeader', () => { const wrapper = mount(); expect(wrapper.find('.ant-page-header-back-icon')).toHaveLength(0); }); - it('pageHeader should no contain back it back', () => { + it('pageHeader should no contain back', () => { const wrapper = mount(); expect(wrapper.find('.ant-page-header-back-icon')).toHaveLength(0); }); @@ -35,7 +35,7 @@ describe('PageHeader', () => { it('pageHeader onBack transfer', () => { const callback = jest.fn(() => true); const wrapper = mount(); - wrapper.find('.ant-page-header-back-icon').simulate('click'); + wrapper.find('div.ant-page-header-back-icon-button').simulate('click'); expect(callback).toHaveBeenCalled(); }); diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx index 52fbb83d4f..fb626de5e0 100644 --- a/components/page-header/index.tsx +++ b/components/page-header/index.tsx @@ -19,7 +19,7 @@ export interface PageHeaderProps { tags?: React.ReactElement | React.ReactElement[]; footer?: React.ReactNode; extra?: React.ReactNode; - onBack?: (e: React.MouseEvent) => void; + onBack?: (e: React.MouseEvent) => void; className?: string; } @@ -34,15 +34,16 @@ const renderBack = ( return ( {({ back }: { back: string }) => ( -
{ - if (onBack) { - onBack(e); - } - }} - > - +
+ ) => { + if (onBack) { + onBack(e); + } + }} + className={`${prefixCls}-back-icon-button`} + aria-label={back} + > {backIcon} From c7e4027398e9c0cec20e0d4841f970453c957203 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Thu, 25 Apr 2019 15:13:13 +0800 Subject: [PATCH 8/9] beter class name --- .../page-header/__tests__/__snapshots__/demo.test.js.snap | 8 ++++---- components/page-header/__tests__/index.test.js | 8 ++++---- components/page-header/index.tsx | 4 ++-- components/page-header/style/index.less | 2 +- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/components/page-header/__tests__/__snapshots__/demo.test.js.snap b/components/page-header/__tests__/__snapshots__/demo.test.js.snap index 429faddd94..d65dbf9f7b 100644 --- a/components/page-header/__tests__/__snapshots__/demo.test.js.snap +++ b/components/page-header/__tests__/__snapshots__/demo.test.js.snap @@ -5,11 +5,11 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = ` class="ant-page-header ant-page-header-has-footer" >
{ }, ]; const wrapper = mount(); - expect(wrapper.find('.ant-page-header-back-icon')).toHaveLength(0); + expect(wrapper.find('.ant-page-header-back')).toHaveLength(0); }); it('pageHeader should no contain back', () => { const wrapper = mount(); - expect(wrapper.find('.ant-page-header-back-icon')).toHaveLength(0); + expect(wrapper.find('.ant-page-header-back')).toHaveLength(0); }); it('pageHeader should contain back it back', () => { const callback = jest.fn(() => true); const wrapper = mount(); - expect(wrapper.find('.ant-page-header-back-icon')).toHaveLength(1); + expect(wrapper.find('.ant-page-header-back')).toHaveLength(1); }); it('pageHeader onBack transfer', () => { const callback = jest.fn(() => true); const wrapper = mount(); - wrapper.find('div.ant-page-header-back-icon-button').simulate('click'); + wrapper.find('div.ant-page-header-back-button').simulate('click'); expect(callback).toHaveBeenCalled(); }); diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx index fb626de5e0..4c59b7a5a2 100644 --- a/components/page-header/index.tsx +++ b/components/page-header/index.tsx @@ -34,14 +34,14 @@ const renderBack = ( return ( {({ back }: { back: string }) => ( -
+
) => { if (onBack) { onBack(e); } }} - className={`${prefixCls}-back-icon-button`} + className={`${prefixCls}-back-button`} aria-label={back} > {backIcon} diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less index 62ba043b09..c2ced32a3e 100644 --- a/components/page-header/style/index.less +++ b/components/page-header/style/index.less @@ -14,7 +14,7 @@ padding-bottom: 0; } - &-back-icon { + &-back { display: inline-block; padding: 4px 0; font-size: 16px; From dd01852c23b42b4c6c84cd05950daf37d35e8bc5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Thu, 25 Apr 2019 15:39:14 +0800 Subject: [PATCH 9/9] change use name --- components/style/mixins/index.less | 2 +- .../style/mixins/{operationUnit.less => operation-unit.less} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename components/style/mixins/{operationUnit.less => operation-unit.less} (100%) diff --git a/components/style/mixins/index.less b/components/style/mixins/index.less index 49a5eb77e0..ec3ada64dc 100644 --- a/components/style/mixins/index.less +++ b/components/style/mixins/index.less @@ -6,4 +6,4 @@ @import 'iconfont'; @import 'motion'; @import 'reset'; -@import 'operationUnit'; +@import 'operation-unit'; diff --git a/components/style/mixins/operationUnit.less b/components/style/mixins/operation-unit.less similarity index 100% rename from components/style/mixins/operationUnit.less rename to components/style/mixins/operation-unit.less