From b5dc0792284e782f6daca1a5740190c9a32fbf59 Mon Sep 17 00:00:00 2001 From: Tom Xu Date: Wed, 21 Oct 2020 10:35:06 +0800 Subject: [PATCH] chore: improve code style (#27266) --- README-zh_CN.md | 1 - .../auto-complete/__tests__/focus.test.js | 15 ++----- .../breadcrumb/__tests__/router.test.js | 21 +++------- components/card/__tests__/index.test.js | 5 +-- components/cascader/__tests__/type.test.tsx | 1 - .../date-picker/__tests__/other.test.js | 18 +------- components/date-picker/__tests__/utils.js | 16 ++----- components/descriptions/style/index.less | 2 +- components/list/__tests__/index.test.js | 7 +--- components/locale-provider/by_BY.tsx | 2 +- components/locale/ar_EG.tsx | 4 +- components/result/__tests__/type.test.tsx | 12 +----- components/select/__tests__/index.test.js | 42 +++---------------- components/skeleton/Paragraph.tsx | 2 +- components/spin/__tests__/delay.test.js | 21 ++-------- components/spin/__tests__/index.test.js | 14 +------ components/statistic/__tests__/index.test.js | 4 +- components/style/mixins/customize.less | 14 +++++-- components/timeline/__tests__/index.test.js | 28 ++++--------- components/transfer/__tests__/list.test.js | 7 +--- scripts/previewEditor/template.html | 2 +- site/theme/static/template.html | 4 +- .../template/Content/Demo/CodePreview.jsx | 4 +- site/theme/template/Home/RecommendPage.tsx | 8 ++-- 24 files changed, 62 insertions(+), 192 deletions(-) diff --git a/README-zh_CN.md b/README-zh_CN.md index 51359f393aca..c0f50629674d 100644 --- a/README-zh_CN.md +++ b/README-zh_CN.md @@ -10,7 +10,6 @@ 一套企业级 UI 设计语言和 React 组件库。 - [![CircleCI status][circleci-image]][circleci-url] [![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url] [![david deps][david-image]][david-url] [![david devDeps][david-dev-image]][david-dev-url] [![Total alerts][lgtm-image]][lgtm-url] [![FOSSA Status][fossa-image]][fossa-url] [![Issues need help][help-wanted-image]][help-wanted-url] diff --git a/components/auto-complete/__tests__/focus.test.js b/components/auto-complete/__tests__/focus.test.js index c5aec8a152d6..2f4193f75f57 100644 --- a/components/auto-complete/__tests__/focus.test.js +++ b/components/auto-complete/__tests__/focus.test.js @@ -24,10 +24,7 @@ describe('AutoComplete children could be focus', () => { it('focus() and onFocus', () => { const handleFocus = jest.fn(); const wrapper = mount(, { attachTo: container }); - wrapper - .find('input') - .instance() - .focus(); + wrapper.find('input').instance().focus(); jest.runAllTimers(); expect(handleFocus).toHaveBeenCalled(); }); @@ -35,15 +32,9 @@ describe('AutoComplete children could be focus', () => { it('blur() and onBlur', () => { const handleBlur = jest.fn(); const wrapper = mount(, { attachTo: container }); - wrapper - .find('input') - .instance() - .focus(); + wrapper.find('input').instance().focus(); jest.runAllTimers(); - wrapper - .find('input') - .instance() - .blur(); + wrapper.find('input').instance().blur(); jest.runAllTimers(); expect(handleBlur).toHaveBeenCalled(); }); diff --git a/components/breadcrumb/__tests__/router.test.js b/components/breadcrumb/__tests__/router.test.js index 86b8643b69ce..d06c7d559628 100644 --- a/components/breadcrumb/__tests__/router.test.js +++ b/components/breadcrumb/__tests__/router.test.js @@ -72,23 +72,12 @@ describe('react router', () => { , ); expect(wrapper.find('BreadcrumbItem').length).toBe(1); - expect( - wrapper - .find('BreadcrumbItem .ant-breadcrumb-link') - .at(0) - .text(), - ).toBe('Home'); - wrapper - .find('.demo-nav a') - .at(1) - .simulate('click'); + expect(wrapper.find('BreadcrumbItem .ant-breadcrumb-link').at(0).text()).toBe('Home'); + wrapper.find('.demo-nav a').at(1).simulate('click'); expect(wrapper.find('BreadcrumbItem').length).toBe(2); - expect( - wrapper - .find('BreadcrumbItem .ant-breadcrumb-link') - .at(1) - .text(), - ).toBe('Application List'); + expect(wrapper.find('BreadcrumbItem .ant-breadcrumb-link').at(1).text()).toBe( + 'Application List', + ); }); it('react router 3', () => { diff --git a/components/card/__tests__/index.test.js b/components/card/__tests__/index.test.js index f179f14006b7..8e1cade399d8 100644 --- a/components/card/__tests__/index.test.js +++ b/components/card/__tests__/index.test.js @@ -52,10 +52,7 @@ describe('Card', () => { xxx , ); - wrapper - .find('.ant-tabs-tab') - .at(1) - .simulate('click'); + wrapper.find('.ant-tabs-tab').at(1).simulate('click'); expect(onTabChange).toHaveBeenCalledWith('tab2'); }); diff --git a/components/cascader/__tests__/type.test.tsx b/components/cascader/__tests__/type.test.tsx index d401efeae5e1..b3330ffdd825 100644 --- a/components/cascader/__tests__/type.test.tsx +++ b/components/cascader/__tests__/type.test.tsx @@ -38,7 +38,6 @@ describe('Cascader.typescript', () => { }, ]; - const result = ; expect(result).toBeTruthy(); diff --git a/components/date-picker/__tests__/other.test.js b/components/date-picker/__tests__/other.test.js index 9ce8d91eab60..c7bde7f6ebd5 100644 --- a/components/date-picker/__tests__/other.test.js +++ b/components/date-picker/__tests__/other.test.js @@ -43,27 +43,13 @@ describe('MonthPicker and WeekPicker', () => { const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn'); const wrapper = mount(); wrapper.setProps({ value: birthday }); - expect( - render( - wrapper - .find('Trigger') - .instance() - .getComponent(), - ), - ).toMatchSnapshot(); + expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot(); }); it('render WeekPicker', () => { const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn'); const wrapper = mount(); wrapper.setProps({ value: birthday }); - expect( - render( - wrapper - .find('Trigger') - .instance() - .getComponent(), - ), - ).toMatchSnapshot(); + expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot(); }); }); diff --git a/components/date-picker/__tests__/utils.js b/components/date-picker/__tests__/utils.js index 51a42886012c..a8062e5aff3b 100644 --- a/components/date-picker/__tests__/utils.js +++ b/components/date-picker/__tests__/utils.js @@ -18,10 +18,7 @@ export function openPanel(wrapper) { } export function clearInput(wrapper) { - wrapper - .find('.ant-calendar-picker-clear') - .hostNodes() - .simulate('click'); + wrapper.find('.ant-calendar-picker-clear').hostNodes().simulate('click'); } export function nextYear(wrapper) { @@ -33,17 +30,10 @@ export function nextMonth(wrapper) { } export function openPicker(wrapper, index = 0) { - wrapper - .find('input') - .at(index) - .simulate('mousedown') - .simulate('focus'); + wrapper.find('input').at(index).simulate('mousedown').simulate('focus'); } export function closePicker(wrapper, index = 0) { - wrapper - .find('input') - .at(index) - .simulate('blur'); + wrapper.find('input').at(index).simulate('blur'); } export function selectCell(wrapper, text, index = 0) { diff --git a/components/descriptions/style/index.less b/components/descriptions/style/index.less index ec0afba4a19c..a945a58172a8 100644 --- a/components/descriptions/style/index.less +++ b/components/descriptions/style/index.less @@ -87,7 +87,7 @@ font-size: @font-size-base; line-height: @line-height-base; word-break: break-word; - overflow-wrap: break-word; + overflow-wrap: break-word; } &-item { diff --git a/components/list/__tests__/index.test.js b/components/list/__tests__/index.test.js index 053381f89696..6ff852735685 100644 --- a/components/list/__tests__/index.test.js +++ b/components/list/__tests__/index.test.js @@ -17,11 +17,6 @@ describe('List', () => { const dataSource = []; const wrapper = mount(); - expect( - wrapper - .find('div') - .first() - .props().locale, - ).toBe(undefined); + expect(wrapper.find('div').first().props().locale).toBe(undefined); }); }); diff --git a/components/locale-provider/by_BY.tsx b/components/locale-provider/by_BY.tsx index f2c5a76b821c..61e41a6f342a 100644 --- a/components/locale-provider/by_BY.tsx +++ b/components/locale-provider/by_BY.tsx @@ -1,3 +1,3 @@ import locale from '../locale/by_BY'; -export default locale; \ No newline at end of file +export default locale; diff --git a/components/locale/ar_EG.tsx b/components/locale/ar_EG.tsx index ffa20853437d..ec103d1df712 100644 --- a/components/locale/ar_EG.tsx +++ b/components/locale/ar_EG.tsx @@ -68,9 +68,9 @@ const localeValues: Locale = { }, Form: { defaultValidateMessages: { - "default": 'خطأ في حقل الإدخال ${label}', + default: 'خطأ في حقل الإدخال ${label}', required: 'يرجى إدخال ${label}', - "enum": '${label} يجب أن يكون واحدا من [${enum}]', + enum: '${label} يجب أن يكون واحدا من [${enum}]', whitespace: '${label} لا يمكن أن يكون حرفًا فارغًا', date: { format: '${label} تنسيق التاريخ غير صحيح', diff --git a/components/result/__tests__/type.test.tsx b/components/result/__tests__/type.test.tsx index aed3cc0a511b..14d8f6d7fbf4 100644 --- a/components/result/__tests__/type.test.tsx +++ b/components/result/__tests__/type.test.tsx @@ -5,16 +5,8 @@ describe('Result.typescript', () => { it('status', () => { const result = ( <> - - + + ); diff --git a/components/select/__tests__/index.test.js b/components/select/__tests__/index.test.js index d23139d841ec..d64a6a9363be 100644 --- a/components/select/__tests__/index.test.js +++ b/components/select/__tests__/index.test.js @@ -40,24 +40,14 @@ describe('Select', () => { it('should support set notFoundContent to null', () => { const wrapper = mount(); toggleOpen(wrapper); - const dropdownWrapper = mount( - wrapper - .find('Trigger') - .instance() - .getComponent(), - ); + const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent()); expect(dropdownWrapper.find('MenuItem').length).toBe(0); }); @@ -66,19 +56,9 @@ describe('Select', () => { , ); - let dropdownWrapper = mount( - wrapper - .find('Trigger') - .instance() - .getComponent(), - ); + let dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent()); expect(dropdownWrapper.props().visible).toBe(true); toggleOpen(wrapper); expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(false); expect(dropdownWrapper.props().visible).toBe(true); wrapper.setProps({ open: false }); - dropdownWrapper = mount( - wrapper - .find('Trigger') - .instance() - .getComponent(), - ); + dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent()); expect(dropdownWrapper.props().visible).toBe(false); toggleOpen(wrapper); expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(true); diff --git a/components/skeleton/Paragraph.tsx b/components/skeleton/Paragraph.tsx index 0948b6271167..7ba690bc6034 100644 --- a/components/skeleton/Paragraph.tsx +++ b/components/skeleton/Paragraph.tsx @@ -26,7 +26,7 @@ const Paragraph = (props: SkeletonParagraphProps) => { const { prefixCls, className, style, rows } = props; const rowList = [...Array(rows)].map((_, index) => ( // eslint-disable-next-line react/no-array-index-key -
  • +
  • )); return (
      diff --git a/components/spin/__tests__/delay.test.js b/components/spin/__tests__/delay.test.js index 0f23199ae058..bdeb570433b4 100644 --- a/components/spin/__tests__/delay.test.js +++ b/components/spin/__tests__/delay.test.js @@ -5,35 +5,20 @@ import Spin from '..'; describe('delay spinning', () => { it("should render with delay when it's mounted with spinning=true and delay", () => { const wrapper = mount(); - expect( - wrapper - .find('.ant-spin') - .at(0) - .hasClass('ant-spin-spinning'), - ).toEqual(false); + expect(wrapper.find('.ant-spin').at(0).hasClass('ant-spin-spinning')).toEqual(false); }); it('should render when delay is init set', async () => { const wrapper = mount(); - expect( - wrapper - .find('.ant-spin') - .at(0) - .hasClass('ant-spin-spinning'), - ).toEqual(false); + expect(wrapper.find('.ant-spin').at(0).hasClass('ant-spin-spinning')).toEqual(false); // use await not jest.runAllTimers() // because of https://github.com/facebook/jest/issues/3465 await new Promise(resolve => setTimeout(resolve, 500)); wrapper.update(); - expect( - wrapper - .find('.ant-spin') - .at(0) - .hasClass('ant-spin-spinning'), - ).toEqual(true); + expect(wrapper.find('.ant-spin').at(0).hasClass('ant-spin-spinning')).toEqual(true); }); it('should cancel debounce function when unmount', async () => { diff --git a/components/spin/__tests__/index.test.js b/components/spin/__tests__/index.test.js index 4120d2abbd18..fbab47323ba6 100644 --- a/components/spin/__tests__/index.test.js +++ b/components/spin/__tests__/index.test.js @@ -14,18 +14,8 @@ describe('Spin', () => {
      content
      , ); - expect( - wrapper - .find('.ant-spin-nested-loading') - .at(0) - .prop('style'), - ).toBeFalsy(); - expect( - wrapper - .find('.ant-spin') - .at(0) - .prop('style').background, - ).toBe('red'); + expect(wrapper.find('.ant-spin-nested-loading').at(0).prop('style')).toBeFalsy(); + expect(wrapper.find('.ant-spin').at(0).prop('style').background).toBe('red'); }); it("should render custom indicator when it's set", () => { diff --git a/components/statistic/__tests__/index.test.js b/components/statistic/__tests__/index.test.js index 406786d62689..cc7a106714d5 100644 --- a/components/statistic/__tests__/index.test.js +++ b/components/statistic/__tests__/index.test.js @@ -95,7 +95,9 @@ describe('Statistic', () => { it('responses hover events for Countdown', () => { const onMouseEnter = jest.fn(); const onMouseLeave = jest.fn(); - const wrapper = mount(); + const wrapper = mount( + , + ); wrapper.simulate('mouseenter'); expect(onMouseEnter).toHaveBeenCalled(); wrapper.simulate('mouseleave'); diff --git a/components/style/mixins/customize.less b/components/style/mixins/customize.less index f3a91e8743ce..e393c8ca306f 100644 --- a/components/style/mixins/customize.less +++ b/components/style/mixins/customize.less @@ -1,6 +1,8 @@ // customize dark components background in popover containers(like Modal, Drawer, Card, Popover, Popconfirm, Notification, ...) // for dark theme -.popover-customize-bg(@containerClass, @background: @popover-background, @prefix: @ant-prefix) when (@theme = dark) { +.popover-customize-bg(@containerClass, @background: @popover-background, @prefix: @ant-prefix) + when + (@theme = dark) { @picker-prefix-cls: ~'@{prefix}-picker'; @slider-prefix-cls: ~'@{prefix}-slider'; @anchor-prefix-cls: ~'@{prefix}-anchor'; @@ -18,7 +20,12 @@ @popover-border: @border-width-base @border-style-base @popover-customize-border-color; .@{containerClass} { - .@{picker-prefix-cls}-clear, .@{slider-prefix-cls}-handle, .@{anchor-prefix-cls}-wrapper, .@{collapse-prefix-cls}-content, .@{timeline-prefix-cls}-item-head, .@{card-prefix-cls} { + .@{picker-prefix-cls}-clear, + .@{slider-prefix-cls}-handle, + .@{anchor-prefix-cls}-wrapper, + .@{collapse-prefix-cls}-content, + .@{timeline-prefix-cls}-item-head, + .@{card-prefix-cls} { background-color: @background; } @@ -77,7 +84,8 @@ > tr { > td { border-bottom: @popover-border; - &.@{table-prefix-cls}-cell-fix-left, &.@{table-prefix-cls}-cell-fix-right { + &.@{table-prefix-cls}-cell-fix-left, + &.@{table-prefix-cls}-cell-fix-right { background-color: @background; } } diff --git a/components/timeline/__tests__/index.test.js b/components/timeline/__tests__/index.test.js index a9774e47db4b..1c4ea9ab3825 100644 --- a/components/timeline/__tests__/index.test.js +++ b/components/timeline/__tests__/index.test.js @@ -34,12 +34,9 @@ describe('TimeLine', () => { }); it('its last item is marked as the last item', () => { - expect( - wrapper - .find('li.ant-timeline-item') - .last() - .hasClass('ant-timeline-item-last'), - ).toBe(true); + expect(wrapper.find('li.ant-timeline-item').last().hasClass('ant-timeline-item-last')).toBe( + true, + ); }); }); @@ -65,10 +62,7 @@ describe('TimeLine', () => { it('its last item is marked as the pending item', () => { const wrapper = wrapperFactory({ pending }); expect( - wrapper - .find('li.ant-timeline-item') - .last() - .hasClass('ant-timeline-item-pending'), + wrapper.find('li.ant-timeline-item').last().hasClass('ant-timeline-item-pending'), ).toBe(true); }); @@ -119,21 +113,15 @@ describe('TimeLine', () => { it('its last item is marked as the last item', () => { const wrapper = wrapperFactory({ pending, reverse: true }); - expect( - wrapper - .find('li.ant-timeline-item') - .last() - .hasClass('ant-timeline-item-last'), - ).toBe(true); + expect(wrapper.find('li.ant-timeline-item').last().hasClass('ant-timeline-item-last')).toBe( + true, + ); }); it('its first item is marked as the pending item', () => { const wrapper = wrapperFactory({ pending, reverse: true }); expect( - wrapper - .find('li.ant-timeline-item') - .first() - .hasClass('ant-timeline-item-pending'), + wrapper.find('li.ant-timeline-item').first().hasClass('ant-timeline-item-pending'), ).toBe(true); }); }); diff --git a/components/transfer/__tests__/list.test.js b/components/transfer/__tests__/list.test.js index c2c115e5da22..367806fed3e2 100644 --- a/components/transfer/__tests__/list.test.js +++ b/components/transfer/__tests__/list.test.js @@ -33,12 +33,7 @@ describe('Transfer.List', () => { it('should check top Checkbox while all available items are checked', () => { const wrapper = mount(); - expect( - wrapper - .find('.ant-transfer-list-header') - .find(Checkbox) - .prop('checked'), - ).toBeTruthy(); + expect(wrapper.find('.ant-transfer-list-header').find(Checkbox).prop('checked')).toBeTruthy(); }); it('when component has been unmounted, componentWillUnmount should be called', () => { diff --git a/scripts/previewEditor/template.html b/scripts/previewEditor/template.html index 412b99c90ea1..53338c596954 100644 --- a/scripts/previewEditor/template.html +++ b/scripts/previewEditor/template.html @@ -17,7 +17,7 @@ /> -
      - {{ content | safe }} -
      +
      {{ content | safe }}
      {% for jsFile in manifest["js"] %} {% endfor %} diff --git a/site/theme/template/Content/Demo/CodePreview.jsx b/site/theme/template/Content/Demo/CodePreview.jsx index d733f77715c1..fc06cb7847c3 100644 --- a/site/theme/template/Content/Demo/CodePreview.jsx +++ b/site/theme/template/Content/Demo/CodePreview.jsx @@ -9,9 +9,7 @@ const LANGS = { }; const CodePreview = ({ toReactComponent, codes }) => { - const langList = Object.keys(codes) - .sort() - .reverse(); + const langList = Object.keys(codes).sort().reverse(); let content; diff --git a/site/theme/template/Home/RecommendPage.tsx b/site/theme/template/Home/RecommendPage.tsx index 7ee8d11f473d..d2d30898186d 100644 --- a/site/theme/template/Home/RecommendPage.tsx +++ b/site/theme/template/Home/RecommendPage.tsx @@ -17,16 +17,14 @@ interface Recommend { const LIST_CN: Recommend[] = [ { title: '树形控件在生产力工具中的设计', - description: - '惊！半年实践血泪史，3000 字深度好文，一个爱树的设计师手把手教你如何设计「树 」！', + description: '惊！半年实践血泪史，3000 字深度好文，一个爱树的设计师手把手教你如何设计「树 」！', img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Z4eXS55fMigAAAAAAAAAAAAAARQnAQ', href: 'https://zhuanlan.zhihu.com/p/260068653', popularize: true, }, { title: '或许这就是下一代组件库', - description: - '随着 React hooks、Vue composition API 的推出，或许组件库有了新的突破点。', + description: '随着 React hooks、Vue composition API 的推出，或许组件库有了新的突破点。', img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*SU6hQ5jHVEsAAAAAAAAAAAAAARQnAQ', href: 'https://zhuanlan.zhihu.com/p/252824872', }, @@ -41,7 +39,7 @@ const LIST_CN: Recommend[] = [ const LIST_EN: Recommend[] = [ { - title: "How to Design Tree Component", + title: 'How to Design Tree Component', description: '🌲 Surprise! With half-a-year practice of blood and tears, here comes a designer who deeply loves trees to teach you how to design 「tree」component!', img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Z4eXS55fMigAAAAAAAAAAAAAARQnAQ',