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 8f0028bddd..ce880527d3 100644 --- a/components/affix/index.tsx +++ b/components/affix/index.tsx @@ -9,9 +9,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) { @@ -26,10 +26,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, }; @@ -101,8 +99,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); } }); @@ -181,10 +178,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', @@ -198,7 +195,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); @@ -264,18 +266,24 @@ export default class Affix extends React.Component { saveFixedNode = (node: HTMLDivElement) => { this.fixedNode = node; - } + }; savePlaceholderNode = (node: HTMLDivElement) => { this.placeholderNode = node; - } + }; render() { const className = classNames({ [this.props.prefixCls || 'ant-affix']: 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 (
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 969abe3e0d..a1ac7c0742 100755 --- a/components/alert/index.tsx +++ b/components/alert/index.tsx @@ -5,7 +5,7 @@ import Icon, { ThemeType } from '../icon'; import classNames from 'classnames'; import getDataOrAriaProps from '../_util/getDataOrAriaProps'; -function noop() { } +function noop() {} export interface AlertProps { /** @@ -35,8 +35,8 @@ export interface AlertProps { } export interface AlertState { - closing: boolean, - closed: boolean + closing: boolean; + closed: boolean; } export default class Alert extends React.Component { @@ -57,7 +57,7 @@ export default class Alert extends React.Component { closing: false, }); (this.props.onClose || noop)(e); - } + }; animationEnd = () => { this.setState({ @@ -65,12 +65,18 @@ export default class Alert extends React.Component { closing: true, }); (this.props.afterClose || noop)(); - } + }; render() { const { - description, prefixCls = 'ant-alert', message, closeText, banner, - className = '', style, icon, + description, + prefixCls = 'ant-alert', + message, + closeText, + banner, + className = '', + style, + icon, } = this.props; let { closable, type, showIcon, iconType } = this.props; @@ -111,13 +117,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 ? ( @@ -127,19 +138,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 : ( 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; @@ -79,7 +86,7 @@ type Section = { top: number; }; -export type AnchorContainer = HTMLElement | Window; +export type AnchorContainer = HTMLElement | Window; export interface AnchorProps { prefixCls?: string; @@ -91,7 +98,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 { @@ -110,7 +120,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 { @@ -181,7 +194,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; @@ -190,7 +203,7 @@ export default class Anchor extends React.Component { scrollTo(link, offsetTop, getContainer, () => { this.animating = false; }); - } + }; getCurrentAnchor(offsetTop = 0, bounds = 5): string { const activeLink = ''; @@ -203,7 +216,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); @@ -217,7 +232,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 ''; @@ -233,11 +248,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; - } + }; render() { const { @@ -259,7 +274,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 = { @@ -268,12 +283,9 @@ export default class Anchor extends React.Component { }; const anchorContent = ( -
+
-
+
{children} @@ -281,7 +293,9 @@ export default class Anchor extends React.Component {
); - return !affix ? anchorContent : ( + return !affix ? ( + anchorContent + ) : ( {anchorContent} diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx index 36f179b45c..5a2571ee30 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); - } + }; render() { - const { - prefixCls, - href, - title, - children, - } = this.props; + const { prefixCls, href, title, children } = this.props; const active = this.context.antAnchor.activeLink === href; const wrapperClassName = classNames(`${prefixCls}-link`, { [`${prefixCls}-link-active`]: active, 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(