From 8e11f0bdb98bbdfc51d2df244c194ae3625cc343 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Fri, 7 Dec 2018 20:02:01 +0800 Subject: [PATCH] merge support prettier --- .eslintrc.js | 27 +- .prettierignore | 7 + .prettierrc | 19 + .stylelintrc | 2 +- components/__tests__/index.test.js | 2 +- components/_util/__tests__/util.test.js | 12 +- components/_util/isFlexSupported.tsx | 6 +- components/_util/raf.ts | 4 +- components/_util/warning.tsx | 2 +- components/_util/wave.tsx | 39 +- components/affix/__tests__/Affix.test.js | 31 +- components/affix/index.tsx | 44 +- components/affix/style/index.less | 2 +- components/alert/__tests__/index.test.js | 14 +- components/alert/index.tsx | 71 +-- components/alert/style/index.less | 12 +- components/anchor/Anchor.tsx | 62 ++- components/anchor/AnchorLink.tsx | 17 +- components/anchor/__tests__/Anchor.test.js | 24 +- components/anchor/style/index.less | 8 +- components/auto-complete/InputElement.tsx | 22 +- .../auto-complete/__tests__/index.test.js | 11 +- components/auto-complete/index.tsx | 99 ++-- components/auto-complete/style/index.less | 12 +- components/avatar/__tests__/Avatar.test.js | 4 +- components/avatar/index.tsx | 74 ++- components/avatar/style/index.less | 6 +- components/back-top/index.tsx | 20 +- components/back-top/style/index.less | 13 +- components/badge/ScrollNumber.tsx | 112 +++-- components/badge/__tests__/index.test.js | 16 +- components/badge/index.tsx | 45 +- components/badge/style/index.less | 16 +- components/breadcrumb/Breadcrumb.tsx | 34 +- components/breadcrumb/BreadcrumbItem.tsx | 30 +- .../breadcrumb/__tests__/Breadcrumb.test.js | 8 +- .../breadcrumb/__tests__/router.test.js | 171 ++++--- components/breadcrumb/style/index.less | 8 +- components/button/__tests__/index.test.js | 90 ++-- components/button/button-group.tsx | 10 +- components/button/button.tsx | 55 +- components/button/style/index.less | 25 +- components/button/style/mixin.less | 34 +- components/calendar/Header.tsx | 41 +- components/calendar/__tests__/index.test.js | 105 ++-- components/calendar/index.tsx | 67 ++- components/calendar/style/index.less | 12 +- components/card/Meta.tsx | 26 +- components/card/__tests__/index.test.js | 12 +- components/card/index.tsx | 87 ++-- components/card/style/index.less | 28 +- components/carousel/__tests__/index.test.js | 30 +- components/carousel/index.tsx | 18 +- components/carousel/style/index.less | 14 +- components/cascader/__tests__/index.test.js | 363 +++++++++----- components/cascader/index.tsx | 188 +++---- components/cascader/style/index.less | 12 +- components/checkbox/Checkbox.tsx | 24 +- components/checkbox/Group.tsx | 22 +- .../checkbox/__tests__/checkbox.test.js | 7 +- components/checkbox/__tests__/group.test.js | 78 +-- components/checkbox/style/index.less | 4 +- components/checkbox/style/mixin.less | 14 +- components/collapse/Collapse.tsx | 25 +- components/collapse/CollapsePanel.tsx | 25 +- components/collapse/style/index.less | 12 +- components/comment/index.tsx | 46 +- components/comment/style/index.less | 10 +- .../__snapshots__/index.test.js.snap | 18 +- .../config-provider/__tests__/index.test.js | 192 +++---- components/config-provider/index.tsx | 16 +- components/config-provider/style/index.less | 2 +- components/date-picker/RangePicker.tsx | 136 ++--- components/date-picker/WeekPicker.tsx | 103 ++-- .../date-picker/__tests__/DatePicker.test.js | 52 +- .../date-picker/__tests__/MonthPicker.test.js | 14 +- .../date-picker/__tests__/RangePicker.test.js | 226 ++++++--- .../date-picker/__tests__/WeekPicker.test.js | 4 +- .../date-picker/__tests__/focus.test.js | 31 +- .../date-picker/__tests__/other.test.js | 26 +- .../date-picker/__tests__/showTime.test.js | 110 +++- components/date-picker/__tests__/utils.js | 9 +- components/date-picker/createPicker.tsx | 73 ++- components/date-picker/index.tsx | 4 +- components/date-picker/interface.tsx | 31 +- components/date-picker/locale/example.json | 5 +- components/date-picker/locale/it_IT.tsx | 2 +- components/date-picker/style/Calendar.less | 8 +- components/date-picker/style/DecadePanel.less | 4 +- components/date-picker/style/MonthPanel.less | 7 +- components/date-picker/style/Picker.less | 6 +- components/date-picker/style/RangePicker.less | 4 +- components/date-picker/style/TimePicker.less | 2 +- components/date-picker/style/WeekPicker.less | 2 +- components/date-picker/style/YearPanel.less | 7 +- components/date-picker/style/index.less | 30 +- components/date-picker/wrapPicker.tsx | 47 +- components/divider/index.tsx | 5 +- components/divider/style/index.less | 8 +- components/drawer/__tests__/Drawer.test.js | 50 +- .../drawer/__tests__/DrawerEvent.test.js | 10 +- .../drawer/__tests__/MultiDrawer.test.js | 6 +- components/drawer/index.tsx | 83 ++-- components/drawer/style/drawer.less | 6 +- components/drawer/style/index.less | 6 +- .../__tests__/dropdown-button.test.js | 4 +- components/dropdown/dropdown-button.tsx | 41 +- components/dropdown/dropdown.tsx | 35 +- components/dropdown/style/index.less | 16 +- components/form/Form.tsx | 51 +- components/form/FormItem.tsx | 88 ++-- components/form/__tests__/index.test.js | 16 +- components/form/__tests__/label.test.js | 109 +++- components/form/__tests__/message.test.js | 34 +- components/form/__tests__/type.tsx | 4 +- components/form/index.tsx | 8 +- components/form/style/index.less | 50 +- components/form/style/mixin.less | 18 +- components/grid/RowContext.tsx | 2 +- components/grid/__tests__/index.test.js | 10 +- components/grid/col.tsx | 47 +- components/grid/index.tsx | 5 +- components/grid/row.tsx | 108 ++-- components/grid/style/index.less | 6 +- components/grid/style/mixin.less | 23 +- components/icon/IconFont.tsx | 18 +- components/icon/__tests__/index.test.js | 77 ++- components/icon/index.tsx | 54 +- components/icon/style/index.less | 6 +- components/icon/utils.ts | 38 +- components/index.tsx | 8 +- components/input-number/index.tsx | 28 +- components/input-number/style/index.less | 8 +- components/input/Group.tsx | 16 +- components/input/Input.tsx | 58 +-- components/input/Password.tsx | 8 +- components/input/Search.tsx | 40 +- components/input/TextArea.tsx | 24 +- components/input/__tests__/Search.test.js | 108 ++-- components/input/__tests__/index.test.js | 52 +- components/input/calculateNodeHeight.tsx | 35 +- components/input/style/index.less | 16 +- components/input/style/mixin.less | 20 +- components/input/style/search-input.less | 12 +- components/layout/Sider.tsx | 76 +-- components/layout/__tests__/index.test.js | 60 ++- components/layout/layout.tsx | 16 +- components/layout/style/index.less | 12 +- components/list/Item.tsx | 27 +- components/list/__tests__/empty.test.js | 4 +- components/list/__tests__/index.test.js | 11 +- components/list/__tests__/loading.test.js | 14 +- components/list/__tests__/pagination.test.js | 50 +- components/list/index.tsx | 74 +-- components/list/style/index.less | 8 +- .../locale-provider/__tests__/index.test.js | 112 +++-- components/locale-provider/hu_HU.tsx | 2 +- components/locale-provider/style/index.less | 2 +- components/mention/__tests__/index.test.js | 41 +- components/mention/index.tsx | 42 +- components/mention/style/index.less | 6 +- components/menu/MenuItem.tsx | 6 +- components/menu/SubMenu.tsx | 4 +- components/menu/__tests__/index.test.js | 287 ++++++++--- components/menu/index.tsx | 38 +- components/menu/style/dark.less | 4 +- components/menu/style/index.less | 60 ++- components/message/__tests__/index.test.js | 2 +- components/message/index.tsx | 54 +- components/message/style/index.less | 8 +- components/modal/ActionButton.tsx | 21 +- components/modal/Modal.tsx | 43 +- components/modal/__tests__/Modal.test.js | 12 +- components/modal/__tests__/confirm.test.js | 6 +- components/modal/confirm.tsx | 40 +- components/modal/index.tsx | 10 +- components/modal/style/confirm.less | 4 +- components/modal/style/index.less | 8 +- components/modal/style/modal.less | 10 +- .../notification/__tests__/index.test.js | 4 +- .../notification/__tests__/placement.test.js | 3 - components/notification/index.tsx | 113 +++-- components/notification/style/index.less | 12 +- components/pagination/Pagination.tsx | 32 +- components/pagination/style/index.less | 22 +- components/popconfirm/__tests__/index.test.js | 26 +- components/popconfirm/index.tsx | 39 +- components/popover/__tests__/index.test.js | 2 +- components/popover/index.tsx | 20 +- components/popover/style/index.less | 54 +- components/progress/__tests__/index.test.js | 2 +- components/progress/progress.tsx | 66 ++- components/progress/style/index.less | 18 +- components/radio/__tests__/group.test.js | 59 +-- components/radio/__tests__/radio.test.js | 7 +- components/radio/group.tsx | 40 +- components/radio/radio.tsx | 32 +- components/radio/radioButton.tsx | 8 +- components/radio/style/index.less | 24 +- components/rate/index.tsx | 8 +- components/rate/style/index.less | 10 +- components/select/__tests__/index.test.js | 74 ++- components/select/index.tsx | 84 ++-- components/select/style/index.less | 26 +- components/skeleton/Avatar.tsx | 6 +- components/skeleton/Paragraph.tsx | 5 +- components/skeleton/Title.tsx | 7 +- components/skeleton/__tests__/index.test.js | 11 +- components/skeleton/index.tsx | 38 +- components/skeleton/style/index.less | 21 +- components/slider/__tests__/index.test.js | 63 ++- components/slider/index.tsx | 52 +- components/slider/style/index.less | 11 +- components/spin/__tests__/index.test.js | 39 +- components/spin/index.tsx | 51 +- components/spin/style/index.less | 14 +- components/steps/index.tsx | 17 +- components/steps/style/index.less | 22 +- components/steps/style/progress-dot.less | 6 +- components/steps/style/small.less | 3 +- components/steps/style/vertical.less | 4 +- components/style/color/colors.less | 234 ++++----- components/style/core/base.less | 98 ++-- components/style/core/iconfont.less | 4 +- components/style/core/index.less | 8 +- components/style/core/motion.less | 16 +- components/style/core/motion/other.less | 4 +- components/style/core/motion/slide.less | 16 +- components/style/core/motion/swing.less | 2 +- components/style/core/motion/zoom.less | 20 +- components/style/index.less | 4 +- components/style/mixins/clearfix.less | 2 +- components/style/mixins/iconfont.less | 2 +- components/style/mixins/index.less | 12 +- components/style/mixins/motion.less | 4 +- components/style/themes/default.less | 470 +++++++++--------- components/style/v2-compatible-reset.less | 39 +- components/switch/__tests__/index.test.js | 5 +- components/switch/index.tsx | 20 +- components/switch/style/index.less | 10 +- components/table/SelectionBox.tsx | 20 +- components/table/SelectionCheckboxAll.tsx | 95 ++-- components/table/Table.tsx | 271 +++++----- .../table/__tests__/SelectionBox.test.js | 31 +- .../table/__tests__/Table.filter.test.js | 443 +++++++++++------ .../table/__tests__/Table.pagination.test.js | 72 ++- .../__tests__/Table.rowSelection.test.js | 338 ++++++++----- .../table/__tests__/Table.sorter.test.js | 323 +++++++++--- components/table/__tests__/Table.test.js | 69 ++- components/table/__tests__/empty.test.js | 26 +- components/table/createBodyRow.tsx | 21 +- components/table/filterDropdown.tsx | 82 +-- components/table/interface.tsx | 32 +- components/table/style/index.less | 38 +- components/table/style/size.less | 30 +- components/table/util.tsx | 8 +- components/tabs/__tests__/index.test.js | 23 +- components/tabs/index.tsx | 73 +-- components/tabs/style/card-style.less | 10 +- components/tabs/style/index.less | 27 +- components/tag/CheckableTag.tsx | 30 +- components/tag/__tests__/index.test.js | 18 +- components/tag/index.tsx | 64 ++- components/tag/style/index.less | 23 +- .../time-picker/__tests__/index.test.js | 2 +- components/time-picker/index.tsx | 64 +-- components/time-picker/locale/fr_BE.tsx | 2 +- components/time-picker/locale/fr_FR.tsx | 2 +- components/time-picker/locale/it_IT.tsx | 2 +- components/time-picker/style/index.less | 12 +- components/timeline/Timeline.tsx | 54 +- components/timeline/TimelineItem.tsx | 23 +- components/timeline/__tests__/index.test.js | 59 ++- components/timeline/style/index.less | 7 +- components/tooltip/__tests__/tooltip.test.js | 78 +-- components/tooltip/index.tsx | 96 ++-- components/tooltip/placements.tsx | 25 +- components/tooltip/style/index.less | 6 +- components/transfer/__tests__/index.test.js | 240 ++++++--- components/transfer/__tests__/list.test.js | 34 +- components/transfer/__tests__/search.test.js | 55 +- components/transfer/index.tsx | 76 ++- components/transfer/item.tsx | 12 +- components/transfer/list.tsx | 66 ++- components/transfer/search.tsx | 21 +- components/transfer/style/index.less | 12 +- components/tree-select/index.tsx | 48 +- components/tree-select/style/index.less | 52 +- components/tree/DirectoryTree.tsx | 51 +- components/tree/Tree.tsx | 45 +- components/tree/__tests__/directory.test.js | 74 ++- components/tree/__tests__/util.test.js | 2 +- components/tree/index.tsx | 13 +- components/tree/style/directory.less | 8 +- components/tree/style/index.less | 27 +- components/tree/style/mixin.less | 12 +- components/tree/util.ts | 19 +- components/upload/Dragger.tsx | 2 +- components/upload/Upload.tsx | 53 +- components/upload/UploadList.tsx | 98 ++-- components/upload/__tests__/mock.js | 1 - components/upload/__tests__/upload.test.js | 162 +++--- .../upload/__tests__/uploadlist.test.js | 160 +++--- components/upload/style/index.less | 32 +- components/upload/utils.tsx | 2 +- index-with-locales.js | 2 +- index.js | 2 +- package.json | 20 +- scripts/generateColorLess.js | 4 +- scripts/lint-prettier.js | 48 ++ scripts/prepub.js | 16 +- scripts/prettier.js | 82 +++ scripts/sort-api-table.js | 26 +- site/bisheng.config.js | 17 +- site/theme/en-US.js | 17 +- site/theme/index.js | 88 ++-- site/theme/static/colors.less | 10 +- site/theme/static/common.less | 8 +- site/theme/static/demo.less | 34 +- site/theme/static/docsearch.less | 2 +- site/theme/static/highlight.less | 62 +-- site/theme/static/home.less | 11 +- site/theme/static/icons.less | 10 +- site/theme/static/markdown.less | 81 ++- site/theme/static/mock-browser.less | 8 +- site/theme/static/page-nav.less | 6 +- site/theme/static/preview-img.less | 6 +- site/theme/static/resource.less | 5 +- site/theme/static/responsive.less | 13 +- site/theme/static/toc.less | 2 +- site/theme/template/BrowserFrame.jsx | 6 +- site/theme/template/Color/ColorBlock.jsx | 17 +- .../theme/template/Color/ColorPaletteTool.jsx | 20 +- site/theme/template/Color/ColorPalettes.jsx | 4 +- site/theme/template/Color/ColorPicker.jsx | 22 +- site/theme/template/Color/Palette.jsx | 22 +- site/theme/template/Content/Article.jsx | 88 ++-- site/theme/template/Content/ComponentDoc.jsx | 75 +-- site/theme/template/Content/Demo.jsx | 178 ++++--- site/theme/template/Content/EditButton.jsx | 7 +- site/theme/template/Content/MainContent.jsx | 161 +++--- site/theme/template/Content/index.jsx | 8 +- site/theme/template/Home/Banner.jsx | 64 ++- site/theme/template/Home/BannerImage.jsx | 162 +++++- site/theme/template/Home/Page1.jsx | 231 +++++++-- site/theme/template/Home/Page2.jsx | 155 ++++-- site/theme/template/Home/Page3.jsx | 79 ++- site/theme/template/Home/index.jsx | 2 +- site/theme/template/Home/util.jsx | 4 +- site/theme/template/IconDisplay/Category.tsx | 20 +- .../template/IconDisplay/CopyableIcon.tsx | 18 +- site/theme/template/IconDisplay/fields.ts | 414 ++++++++++++--- site/theme/template/IconDisplay/index.tsx | 140 ++++-- .../theme/template/IconDisplay/themeIcons.tsx | 30 +- site/theme/template/Layout/Footer.jsx | 172 +++++-- site/theme/template/Layout/Header.jsx | 112 +++-- site/theme/template/Layout/index.jsx | 10 +- site/theme/template/NotFound.jsx | 4 +- site/theme/template/Redirect.jsx | 3 +- site/theme/template/utils.jsx | 28 +- site/theme/zh-CN.js | 6 +- tests/__mocks__/rc-trigger.js | 5 +- tests/dekko/lib.test.js | 3 +- tests/shared/demoTest.js | 4 +- tsconfig.json | 11 +- tslint.json | 4 +- typings/custom-typings.d.ts | 14 +- webpack.config.js | 2 +- 368 files changed, 8987 insertions(+), 6409 deletions(-) create mode 100644 .prettierignore create mode 100644 .prettierrc create mode 100644 scripts/lint-prettier.js create mode 100644 scripts/prettier.js diff --git a/.eslintrc.js b/.eslintrc.js index c0d2c19f91..8b675f955c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,5 +1,5 @@ const eslintrc = { - extends: ['eslint-config-airbnb'], + extends: ['airbnb', 'prettier'], env: { browser: true, node: true, @@ -8,18 +8,27 @@ const eslintrc = { es6: true, }, parser: 'babel-eslint', - plugins: [ - 'markdown', - 'react', - 'babel', - ], + plugins: ['markdown', 'react', 'babel'], rules: { 'react/jsx-one-expression-per-line': 0, 'react/prop-types': 0, 'react/forbid-prop-types': 0, - 'import/no-extraneous-dependencies': ['error', { - devDependencies: ['site/**', 'tests/**', 'scripts/**', '**/*.test.js', '**/__tests__/*', '*.config.js', '**/*.md'], - }], + 'react/jsx-indent': 0, + 'react/jsx-wrap-multilines': ['error', { declaration: false, assignment: false }], + 'import/no-extraneous-dependencies': [ + 'error', + { + devDependencies: [ + 'site/**', + 'tests/**', + 'scripts/**', + '**/*.test.js', + '**/__tests__/*', + '*.config.js', + '**/*.md', + ], + }, + ], 'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.md'] }], 'jsx-a11y/no-static-element-interactions': 0, 'jsx-a11y/anchor-has-content': 0, diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000000..b50172d492 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,7 @@ +**/*.md +**/*.svg +**/*.ejs +**/*.html +package.json +.umi +.umi-production \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000000..9f5ab919f7 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,19 @@ +{ + "singleQuote": true, + "trailingComma": "all", + "printWidth": 100, + "overrides": [ + { + "files": ".prettierrc", + "options": { + "parser": "json" + } + }, + { + "files": ".stylelintrc", + "options": { + "parser": "json" + } + } + ] +} diff --git a/.stylelintrc b/.stylelintrc index 1e5e8983f4..9d422fb7ca 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,5 +1,5 @@ { - "extends": "stylelint-config-standard", + "extends": ["stylelint-config-standard", "stylelint-config-prettier"], "rules": { "comment-empty-line-before": null, "declaration-empty-line-before": null, diff --git a/components/__tests__/index.test.js b/components/__tests__/index.test.js index 5082b7f6b1..1716b3502c 100644 --- a/components/__tests__/index.test.js +++ b/components/__tests__/index.test.js @@ -14,7 +14,7 @@ describe('antd', () => { it('should hint when import all components in dev mode', () => { expect(warnSpy).toBeCalledWith( - 'You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.' + 'You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.', ); warnSpy.mockRestore(); }); diff --git a/components/_util/__tests__/util.test.js b/components/_util/__tests__/util.test.js index 584258e709..21a67d4cd5 100644 --- a/components/_util/__tests__/util.test.js +++ b/components/_util/__tests__/util.test.js @@ -88,7 +88,7 @@ describe('Test utils function', () => { }); }); - it('delayRaf', (done) => { + it('delayRaf', done => { jest.useRealTimers(); let bamboo = false; @@ -118,9 +118,13 @@ describe('Test utils function', () => { it('triggerEvent', () => { const button = document.createElement('button'); - button.addEventListener('click', () => { - button.style.width = '100px'; - }, true); + button.addEventListener( + 'click', + () => { + button.style.width = '100px'; + }, + true, + ); triggerEvent(button, 'click'); expect(button.style.width).toBe('100px'); }); diff --git a/components/_util/isFlexSupported.tsx b/components/_util/isFlexSupported.tsx index 78b9babed7..dd6a5ae7ed 100644 --- a/components/_util/isFlexSupported.tsx +++ b/components/_util/isFlexSupported.tsx @@ -1,10 +1,12 @@ export default function isFlexSupported() { if (typeof window !== 'undefined' && window.document && window.document.documentElement) { const { documentElement } = window.document; - return 'flex' in documentElement.style || + return ( + 'flex' in documentElement.style || 'webkitFlex' in documentElement.style || 'Flex' in documentElement.style || - 'msFlex' in documentElement.style; + 'msFlex' in documentElement.style + ); } return false; } diff --git a/components/_util/raf.ts b/components/_util/raf.ts index e70e2e640b..7d3e12dc8b 100644 --- a/components/_util/raf.ts +++ b/components/_util/raf.ts @@ -1,7 +1,7 @@ import raf from 'raf'; interface RafMap { - [id: number]: number, + [id: number]: number; } let id: number = 0; @@ -31,4 +31,4 @@ export default function wrapperRaf(callback: () => void, delayFrames: number = 1 wrapperRaf.cancel = function(id: number) { raf.cancel(ids[id]); delete ids[id]; -} \ No newline at end of file +}; diff --git a/components/_util/warning.tsx b/components/_util/warning.tsx index 144130e529..6a9f7a59c6 100644 --- a/components/_util/warning.tsx +++ b/components/_util/warning.tsx @@ -1,6 +1,6 @@ import warning from 'warning'; -const warned: { [msg: string]: boolean} = {}; +const warned: { [msg: string]: boolean } = {}; export default (valid: boolean, message: string): void => { if (!valid && !warned[message]) { warning(false, message); diff --git a/components/_util/wave.tsx b/components/_util/wave.tsx index aa89247701..63d284ba7e 100644 --- a/components/_util/wave.tsx +++ b/components/_util/wave.tsx @@ -13,7 +13,7 @@ function isHidden(element: HTMLElement) { return !element || element.offsetParent === null; } -export default class Wave extends React.Component<{insertExtraNode?: boolean}> { +export default class Wave extends React.Component<{ insertExtraNode?: boolean }> { private instance?: { cancel: () => void; }; @@ -22,7 +22,7 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> { private clickWaveTimeoutId: number; private animationStartId: number; private animationStart: boolean = false; - private destroy: boolean = false + private destroy: boolean = false; isNotGrey(color: string) { const match = (color || '').match(/rgba?\((\d*), (\d*), (\d*)(, [\.\d]*)?\)/); @@ -45,15 +45,16 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> { node.setAttribute(attributeName, 'true'); // Not white or transparnt or grey styleForPesudo = styleForPesudo || document.createElement('style'); - if (waveColor && - waveColor !== '#ffffff' && - waveColor !== 'rgb(255, 255, 255)' && - this.isNotGrey(waveColor) && - !/rgba\(\d*, \d*, \d*, 0\)/.test(waveColor) && // any transparent rgba color - waveColor !== 'transparent') { + if ( + waveColor && + waveColor !== '#ffffff' && + waveColor !== 'rgb(255, 255, 255)' && + this.isNotGrey(waveColor) && + !/rgba\(\d*, \d*, \d*, 0\)/.test(waveColor) && // any transparent rgba color + waveColor !== 'transparent' + ) { extraNode.style.borderColor = waveColor; - styleForPesudo.innerHTML = - `[ant-click-animating-without-extra-node]:after { border-color: ${waveColor}; }`; + styleForPesudo.innerHTML = `[ant-click-animating-without-extra-node]:after { border-color: ${waveColor}; }`; if (!document.body.contains(styleForPesudo)) { document.body.appendChild(styleForPesudo); } @@ -63,13 +64,15 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> { } TransitionEvents.addStartEventListener(node, this.onTransitionStart); TransitionEvents.addEndEventListener(node, this.onTransitionEnd); - } + }; bindAnimationEvent = (node: HTMLElement) => { - if (!node || - !node.getAttribute || - node.getAttribute('disabled') || - node.className.indexOf('disabled') >= 0) { + if ( + !node || + !node.getAttribute || + node.getAttribute('disabled') || + node.className.indexOf('disabled') >= 0 + ) { return; } const onClick = (e: MouseEvent) => { @@ -99,7 +102,7 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> { node.removeEventListener('click', onClick, true); }, }; - } + }; getAttributeName() { const { insertExtraNode } = this.props; @@ -132,14 +135,14 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> { if (!this.animationStart) { this.resetEffect(node); } - } + }; onTransitionEnd = (e: AnimationEvent) => { if (!e || e.animationName !== 'fadeEffect') { return; } this.resetEffect(e.target as HTMLElement); - } + }; removeExtraStyleNode() { if (styleForPesudo) { diff --git a/components/affix/__tests__/Affix.test.js b/components/affix/__tests__/Affix.test.js index b135454f32..be147e5353 100644 --- a/components/affix/__tests__/Affix.test.js +++ b/components/affix/__tests__/Affix.test.js @@ -12,7 +12,7 @@ class AffixMounter extends React.Component { }); } - getTarget = () => this.container + getTarget = () => this.container; render() { return ( @@ -21,7 +21,9 @@ class AffixMounter extends React.Component { height: 100, overflowY: 'scroll', }} - ref={(node) => { this.container = node; }} + ref={node => { + this.container = node; + }} >
this.container} - ref={(ele) => { this.affix = ele; }} + ref={ele => { + this.affix = ele; + }} {...this.props} > - +
@@ -56,9 +58,14 @@ describe('Affix Render', () => { jest.useRealTimers(); }); - const scrollTo = (top) => { + const scrollTo = top => { wrapper.instance().affix.fixedNode.parentNode.getBoundingClientRect = jest.fn(() => ({ - bottom: 100, height: 28, left: 0, right: 0, top: 50 - top, width: 195, + bottom: 100, + height: 28, + left: 0, + right: 0, + top: 50 - top, + width: 195, })); wrapper.instance().container.scrollTop = top; events.scroll({ @@ -86,7 +93,9 @@ describe('Affix Render', () => { it('support offsetBottom', () => { document.body.innerHTML = '
'; - wrapper = mount(, { attachTo: document.getElementById('mounter') }); + wrapper = mount(, { + attachTo: document.getElementById('mounter'), + }); jest.runAllTimers(); scrollTo(0); @@ -102,7 +111,9 @@ describe('Affix Render', () => { it('updatePosition when offsetTop changed', () => { document.body.innerHTML = '
'; - wrapper = mount(, { attachTo: document.getElementById('mounter') }); + wrapper = mount(, { + attachTo: document.getElementById('mounter'), + }); jest.runAllTimers(); scrollTo(100); diff --git a/components/affix/index.tsx b/components/affix/index.tsx index 5c049d43d0..188dc4f2d7 100644 --- a/components/affix/index.tsx +++ b/components/affix/index.tsx @@ -10,9 +10,9 @@ import getScroll from '../_util/getScroll'; import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame'; function getTargetRect(target: HTMLElement | Window | null): ClientRect { - return target !== window ? - (target as HTMLElement).getBoundingClientRect() : - { top: 0, left: 0, bottom: 0 } as ClientRect; + return target !== window + ? (target as HTMLElement).getBoundingClientRect() + : ({ top: 0, left: 0, bottom: 0 } as ClientRect); } function getOffset(element: HTMLElement, target: HTMLElement | Window | null) { @@ -27,10 +27,8 @@ function getOffset(element: HTMLElement, target: HTMLElement | Window | null) { const clientLeft = docElem.clientLeft || 0; return { - top: elemRect.top - targetRect.top + - scrollTop - clientTop, - left: elemRect.left - targetRect.left + - scrollLeft - clientLeft, + top: elemRect.top - targetRect.top + scrollTop - clientTop, + left: elemRect.left - targetRect.left + scrollLeft - clientLeft, width: elemRect.width, height: elemRect.height, }; @@ -102,8 +100,7 @@ export default class Affix extends React.Component { } this.setState({ affixStyle: affixStyle as React.CSSProperties }, () => { const affixed = !!this.state.affixStyle; - if ((affixStyle && !originalAffixStyle) || - (!affixStyle && originalAffixStyle)) { + if ((affixStyle && !originalAffixStyle) || (!affixStyle && originalAffixStyle)) { onChange(affixed); } }); @@ -182,10 +179,10 @@ export default class Affix extends React.Component { }); } else if ( scrollTop < elemOffset.top + elemSize.height + (offsetBottom as number) - targetInnerHeight && - offsetMode.bottom + offsetMode.bottom ) { // Fixed Bottom - const targetBottomOffet = targetNode === window ? 0 : (window.innerHeight - targetRect.bottom); + const targetBottomOffet = targetNode === window ? 0 : window.innerHeight - targetRect.bottom; const width = elemOffset.width; this.setAffixStyle(e, { position: 'fixed', @@ -199,7 +196,12 @@ export default class Affix extends React.Component { }); } else { const { affixStyle } = this.state; - if (e.type === 'resize' && affixStyle && affixStyle.position === 'fixed' && affixNode.offsetWidth) { + if ( + e.type === 'resize' && + affixStyle && + affixStyle.position === 'fixed' && + affixNode.offsetWidth + ) { this.setAffixStyle(e, { ...affixStyle, width: affixNode.offsetWidth }); } else { this.setAffixStyle(e, null); @@ -265,11 +267,11 @@ export default class Affix extends React.Component { saveFixedNode = (node: HTMLDivElement) => { this.fixedNode = node; - } + }; savePlaceholderNode = (node: HTMLDivElement) => { this.placeholderNode = node; - } + }; renderAffix = ({ getPrefixCls }: ConfigConsumerProps) => { const { prefixCls } = this.props; @@ -277,7 +279,13 @@ export default class Affix extends React.Component { [getPrefixCls('affix', prefixCls)]: this.state.affixStyle, }); - const props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target', 'onChange']); + const props = omit(this.props, [ + 'prefixCls', + 'offsetTop', + 'offsetBottom', + 'target', + 'onChange', + ]); const placeholderStyle = { ...this.state.placeholderStyle, ...this.props.style }; return (
@@ -289,10 +297,6 @@ export default class Affix extends React.Component { }; render() { - return ( - - {this.renderAffix} - - ); + return {this.renderAffix}; } } diff --git a/components/affix/style/index.less b/components/affix/style/index.less index cd61d1ed08..9f19860e55 100644 --- a/components/affix/style/index.less +++ b/components/affix/style/index.less @@ -1,4 +1,4 @@ -@import "../../style/themes/default"; +@import '../../style/themes/default'; .@{ant-prefix}-affix { position: fixed; diff --git a/components/alert/__tests__/index.test.js b/components/alert/__tests__/index.test.js index d721ffd389..addaad4b58 100644 --- a/components/alert/__tests__/index.test.js +++ b/components/alert/__tests__/index.test.js @@ -21,7 +21,7 @@ describe('Alert', () => { closable onClose={onClose} afterClose={afterClose} - /> + />, ); wrapper.find('.ant-alert-close-icon').simulate('click'); expect(onClose).toBeCalled(); @@ -31,26 +31,20 @@ describe('Alert', () => { describe('data and aria props', () => { it('sets data attributes on input', () => { - const wrapper = mount( - - ); + const wrapper = mount(); const input = wrapper.find('.ant-alert').getDOMNode(); expect(input.getAttribute('data-test')).toBe('test-id'); expect(input.getAttribute('data-id')).toBe('12345'); }); it('sets aria attributes on input', () => { - const wrapper = mount( - - ); + const wrapper = mount(); const input = wrapper.find('.ant-alert').getDOMNode(); expect(input.getAttribute('aria-describedby')).toBe('some-label'); }); it('sets role attribute on input', () => { - const wrapper = mount( - - ); + const wrapper = mount(); const input = wrapper.find('.ant-alert').getDOMNode(); expect(input.getAttribute('role')).toBe('status'); }); diff --git a/components/alert/index.tsx b/components/alert/index.tsx index d1a7fae486..4d129a9530 100755 --- a/components/alert/index.tsx +++ b/components/alert/index.tsx @@ -6,7 +6,7 @@ import classNames from 'classnames'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import getDataOrAriaProps from '../_util/getDataOrAriaProps'; -function noop() { } +function noop() {} export interface AlertProps { /** @@ -36,8 +36,8 @@ export interface AlertProps { } export interface AlertState { - closing: boolean, - closed: boolean + closing: boolean; + closed: boolean; } export default class Alert extends React.Component { @@ -58,7 +58,7 @@ export default class Alert extends React.Component { closing: false, }); (this.props.onClose || noop)(e); - } + }; animationEnd = () => { this.setState({ @@ -66,12 +66,18 @@ export default class Alert extends React.Component { closing: true, }); (this.props.afterClose || noop)(); - } + }; renderAlert = ({ getPrefixCls }: ConfigConsumerProps) => { const { - description, prefixCls: customizePrefixCls, message, closeText, banner, - className = '', style, icon, + description, + prefixCls: customizePrefixCls, + message, + closeText, + banner, + className = '', + style, + icon, } = this.props; let { closable, type, showIcon, iconType } = this.props; @@ -114,13 +120,18 @@ export default class Alert extends React.Component { closable = true; } - const alertCls = classNames(prefixCls, `${prefixCls}-${type}`, { - [`${prefixCls}-close`]: !this.state.closing, - [`${prefixCls}-with-description`]: !!description, - [`${prefixCls}-no-icon`]: !showIcon, - [`${prefixCls}-banner`]: !!banner, - [`${prefixCls}-closable`]: closable, - }, className); + const alertCls = classNames( + prefixCls, + `${prefixCls}-${type}`, + { + [`${prefixCls}-close`]: !this.state.closing, + [`${prefixCls}-with-description`]: !!description, + [`${prefixCls}-no-icon`]: !showIcon, + [`${prefixCls}-banner`]: !!banner, + [`${prefixCls}-closable`]: closable, + }, + className, + ); const closeIcon = closable ? ( @@ -130,19 +141,17 @@ export default class Alert extends React.Component { const dataOrAriaProps = getDataOrAriaProps(this.props); - const iconNode = icon && ( - React.isValidElement<{ className?: string }>(icon) - ? React.cloneElement( - icon, - { - className: classNames({ - [icon.props.className as string]: icon.props.className, - [`${prefixCls}-icon`]: true, - }), - }, - ) : {icon}) || ( - - ); + const iconNode = (icon && + (React.isValidElement<{ className?: string }>(icon) ? ( + React.cloneElement(icon, { + className: classNames({ + [icon.props.className as string]: icon.props.className, + [`${prefixCls}-icon`]: true, + }), + }) + ) : ( + {icon} + ))) || ; return this.state.closed ? null : ( {
); - } + }; render() { - return ( - - {this.renderAlert} - - ); + return {this.renderAlert}; } } diff --git a/components/alert/style/index.less b/components/alert/style/index.less index 2153348ea7..b20ffef8a3 100644 --- a/components/alert/style/index.less +++ b/components/alert/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@alert-prefix-cls: ~"@{ant-prefix}-alert"; +@alert-prefix-cls: ~'@{ant-prefix}-alert'; @alert-message-color: @heading-color; @alert-text-color: @text-color; @@ -76,7 +76,7 @@ .@{iconfont-css-prefix}-close { color: @alert-close-color; - transition: color .3s; + transition: color 0.3s; &:hover { color: @icon-color-hover; } @@ -131,12 +131,12 @@ margin: 0; padding-top: 0; padding-bottom: 0; - transition: all .3s @ease-in-out-circ; + transition: all 0.3s @ease-in-out-circ; transform-origin: 50% 0; } &-slide-up-leave { - animation: antAlertSlideUpOut .3s @ease-in-out-circ; + animation: antAlertSlideUpOut 0.3s @ease-in-out-circ; animation-fill-mode: both; } diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index 6466bf9468..810a5b76f0 100644 --- a/components/anchor/Anchor.tsx +++ b/components/anchor/Anchor.tsx @@ -39,17 +39,24 @@ function easeInOutCubic(t: number, b: number, c: number, d: number) { const cc = c - b; t /= d / 2; if (t < 1) { - return cc / 2 * t * t * t + b; + return (cc / 2) * t * t * t + b; } - return cc / 2 * ((t -= 2) * t * t + 2) + b; + return (cc / 2) * ((t -= 2) * t * t + 2) + b; } const sharpMatcherRegx = /#([^#]+)$/; -function scrollTo(href: string, offsetTop = 0, getContainer: () => AnchorContainer, callback = () => { }) { +function scrollTo( + href: string, + offsetTop = 0, + getContainer: () => AnchorContainer, + callback = () => {}, +) { const container = getContainer(); const scrollTop = getScroll(container, true); const sharpLinkMatch = sharpMatcherRegx.exec(href); - if (!sharpLinkMatch) { return; } + if (!sharpLinkMatch) { + return; + } const targetElement = document.getElementById(sharpLinkMatch[1]); if (!targetElement) { return; @@ -80,7 +87,7 @@ type Section = { top: number; }; -export type AnchorContainer = HTMLElement | Window; +export type AnchorContainer = HTMLElement | Window; export interface AnchorProps { prefixCls?: string; @@ -92,7 +99,10 @@ export interface AnchorProps { affix?: boolean; showInkInFixed?: boolean; getContainer?: () => AnchorContainer; - onClick?: (e: React.MouseEvent, link: { title: React.ReactNode, href: string }) => void; + onClick?: ( + e: React.MouseEvent, + link: { title: React.ReactNode; href: string }, + ) => void; } export interface AnchorState { @@ -111,7 +121,10 @@ export interface AntAnchor { unregisterLink: (link: string) => void; activeLink: string | null; scrollTo: (link: string) => void; - onClick?: (e: React.MouseEvent, link: { title: React.ReactNode, href: string }) => void; + onClick?: ( + e: React.MouseEvent, + link: { title: React.ReactNode; href: string }, + ) => void; } export default class Anchor extends React.Component { @@ -183,7 +196,7 @@ export default class Anchor extends React.Component { this.setState({ activeLink: this.getCurrentAnchor(offsetTop, bounds), }); - } + }; handleScrollTo = (link: string) => { const { offsetTop, getContainer } = this.props as AnchorDefaultProps; @@ -192,7 +205,7 @@ export default class Anchor extends React.Component { scrollTo(link, offsetTop, getContainer, () => { this.animating = false; }); - } + }; getCurrentAnchor(offsetTop = 0, bounds = 5): string { const activeLink = ''; @@ -205,7 +218,9 @@ export default class Anchor extends React.Component { const container = getContainer(); this.links.forEach(link => { const sharpLinkMatch = sharpMatcherRegx.exec(link.toString()); - if (!sharpLinkMatch) { return; } + if (!sharpLinkMatch) { + return; + } const target = document.getElementById(sharpLinkMatch[1]); if (target) { const top = getOffsetTop(target, container); @@ -219,7 +234,7 @@ export default class Anchor extends React.Component { }); if (linkSections.length) { - const maxSection = linkSections.reduce((prev, curr) => curr.top > prev.top ? curr : prev); + const maxSection = linkSections.reduce((prev, curr) => (curr.top > prev.top ? curr : prev)); return maxSection.link; } return ''; @@ -235,11 +250,11 @@ export default class Anchor extends React.Component { if (linkNode) { this.inkNode.style.top = `${(linkNode as any).offsetTop + linkNode.clientHeight / 2 - 4.5}px`; } - } + }; saveInkNode = (node: HTMLSpanElement) => { this.inkNode = node; - } + }; renderAnchor = ({ getPrefixCls }: ConfigConsumerProps) => { const { @@ -268,7 +283,7 @@ export default class Anchor extends React.Component { const wrapperClass = classNames(className, `${prefixCls}-wrapper`); const anchorClass = classNames(prefixCls, { - 'fixed': !affix && !showInkInFixed, + fixed: !affix && !showInkInFixed, }); const wrapperStyle = { @@ -277,12 +292,9 @@ export default class Anchor extends React.Component { }; const anchorContent = ( -
+
-
+
{children} @@ -290,18 +302,16 @@ export default class Anchor extends React.Component {
); - return !affix ? anchorContent : ( + return !affix ? ( + anchorContent + ) : ( {anchorContent} ); - } + }; render() { - return( - - {this.renderAnchor} - - ); + return {this.renderAnchor}; } } diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx index 0bc2ea0e67..3efe409530 100644 --- a/components/anchor/AnchorLink.tsx +++ b/components/anchor/AnchorLink.tsx @@ -47,15 +47,10 @@ export default class AnchorLink extends React.Component { onClick(e, { title, href }); } scrollTo(href); - } + }; renderAnchorLink = ({ getPrefixCls }: ConfigConsumerProps) => { - const { - prefixCls: customizePrefixCls, - href, - title, - children, - } = this.props; + const { prefixCls: customizePrefixCls, href, title, children } = this.props; const prefixCls = getPrefixCls('anchor', customizePrefixCls); const active = this.context.antAnchor.activeLink === href; const wrapperClassName = classNames(`${prefixCls}-link`, { @@ -77,13 +72,9 @@ export default class AnchorLink extends React.Component { {children}
); - } + }; render() { - return ( - - {this.renderAnchorLink} - - ); + return {this.renderAnchorLink}; } } diff --git a/components/anchor/__tests__/Anchor.test.js b/components/anchor/__tests__/Anchor.test.js index d58de778f3..911e99ca4d 100644 --- a/components/anchor/__tests__/Anchor.test.js +++ b/components/anchor/__tests__/Anchor.test.js @@ -9,7 +9,7 @@ describe('Anchor Render', () => { const wrapper = mount( - + , ); wrapper.find('a[href="#API"]').simulate('click'); @@ -22,7 +22,7 @@ describe('Anchor Render', () => { const wrapper = mount( - + , ); wrapper.find('a[href="http://www.example.com/#API"]').simulate('click'); expect(wrapper.instance().state.activeLink).toBe('http://www.example.com/#API'); @@ -39,7 +39,7 @@ describe('Anchor Render', () => { const wrapper = mount( - + , ); wrapper.instance().handleScroll(); expect(wrapper.instance().state.activeLink).toBe('http://www.example.com/#API'); @@ -57,7 +57,7 @@ describe('Anchor Render', () => { const wrapper = mount( - + , ); wrapper.instance().handleScrollTo('##API'); expect(wrapper.instance().state.activeLink).toBe('##API'); @@ -70,7 +70,7 @@ describe('Anchor Render', () => { const wrapper = mount( - + , ); const removeListenerSpy = jest.spyOn(wrapper.instance().scrollEvent, 'remove'); wrapper.unmount(); @@ -81,7 +81,7 @@ describe('Anchor Render', () => { const wrapper = mount( - + , ); expect(wrapper.instance().links).toEqual(['#API']); wrapper.setProps({ children: null }); @@ -92,7 +92,11 @@ describe('Anchor Render', () => { let anchorInstance = null; function AnchorUpdate({ href }) { return ( - { anchorInstance = c; }}> + { + anchorInstance = c; + }} + > ); @@ -107,7 +111,9 @@ describe('Anchor Render', () => { it('Anchor onClick event', () => { let event; let link; - const handleClick = (...arg) => { [event, link] = arg; }; + const handleClick = (...arg) => { + [event, link] = arg; + }; const href = '#API'; const title = 'API'; @@ -115,7 +121,7 @@ describe('Anchor Render', () => { const wrapper = mount( - + , ); wrapper.find(`a[href="${href}"]`).simulate('click'); diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less index 3a5ddec9aa..ec2386b821 100644 --- a/components/anchor/style/index.less +++ b/components/anchor/style/index.less @@ -1,5 +1,5 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; @anchor-border-width: 2px; @@ -38,7 +38,7 @@ border: 2px solid @primary-color; background-color: @component-background; left: 50%; - transition: top .3s ease-in-out; + transition: top 0.3s ease-in-out; transform: translateX(-50%); &.visible { display: inline-block; @@ -57,7 +57,7 @@ &-title { display: block; position: relative; - transition: all .3s; + transition: all 0.3s; color: @text-color; white-space: nowrap; overflow: hidden; diff --git a/components/auto-complete/InputElement.tsx b/components/auto-complete/InputElement.tsx index 0e4e290535..0e3af18bb7 100644 --- a/components/auto-complete/InputElement.tsx +++ b/components/auto-complete/InputElement.tsx @@ -9,22 +9,28 @@ export default class InputElement extends React.Component { - this.ele.focus ? this.ele.focus() : (ReactDOM.findDOMNode(this.ele) as HTMLInputElement).focus(); - } + this.ele.focus + ? this.ele.focus() + : (ReactDOM.findDOMNode(this.ele) as HTMLInputElement).focus(); + }; blur = () => { this.ele.blur ? this.ele.blur() : (ReactDOM.findDOMNode(this.ele) as HTMLInputElement).blur(); - } + }; saveRef = (ele: HTMLInputElement) => { this.ele = ele; const { ref: childRef } = this.props.children as any; if (typeof childRef === 'function') { childRef(ele); } - } + }; render() { - return React.cloneElement(this.props.children, { - ...this.props, - ref: this.saveRef, - }, null); + return React.cloneElement( + this.props.children, + { + ...this.props, + ref: this.saveRef, + }, + null, + ); } } diff --git a/components/auto-complete/__tests__/index.test.js b/components/auto-complete/__tests__/index.test.js index 0a80f8de7f..b02ea91cd3 100644 --- a/components/auto-complete/__tests__/index.test.js +++ b/components/auto-complete/__tests__/index.test.js @@ -10,12 +10,17 @@ describe('AutoComplete with Custom Input Element Render', () => { const wrapper = mount(