style: run lint-fix (#17172)

components/_util/__tests__/util.test.js

@@ -169,7 +169,11 @@ describe('Test utils function', () => {
 
     it('should not throw when click it', () => {
       expect(() => {
-        const wrapper = mount(<Wave><div /></Wave>);
+        const wrapper = mount(
+          <Wave>
+            <div />
+          </Wave>,
+        );
         wrapper.simulate('click');
       }).not.toThrow();
     });
@@ -184,9 +188,7 @@ describe('Test utils function', () => {
 
   describe('TransButton', () => {
     it('can be focus/blur', () => {
-      const wrapper = mount(
-        <TransButton>TransButton</TransButton>,
-      );
+      const wrapper = mount(<TransButton>TransButton</TransButton>);
       expect(typeof wrapper.instance().focus).toBe('function');
       expect(typeof wrapper.instance().blur).toBe('function');
     });
@@ -194,9 +196,7 @@ describe('Test utils function', () => {
     it('should trigger onClick when press enter', () => {
       const onClick = jest.fn();
       const preventDefault = jest.fn();
-      const wrapper = mount(
-        <TransButton onClick={onClick}>TransButton</TransButton>,
-      );
+      const wrapper = mount(<TransButton onClick={onClick}>TransButton</TransButton>);
       wrapper.simulate('keyUp', { keyCode: KeyCode.ENTER });
       expect(onClick).toHaveBeenCalled();
       wrapper.simulate('keyDown', { keyCode: KeyCode.ENTER, preventDefault });

components/badge/ScrollNumber.tsx

@@ -105,7 +105,7 @@ class ScrollNumber extends Component<ScrollNumberProps, ScrollNumberState> {
     if (onAnimated) {
       onAnimated();
     }
-  }
+  };
 
   renderNumberList(position: number) {
     const childrenToReturn: React.ReactElement<any>[] = [];

components/breadcrumb/Breadcrumb.tsx

@@ -72,21 +72,21 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
   }
 
   getPath = (path: string, params: any) => {
-     path = (path || '').replace(/^\//, '');
-     Object.keys(params).forEach(key => {
-         path = path.replace(`:${key}`, params[key]);
-     });
-     return path;
-  }
+    path = (path || '').replace(/^\//, '');
+    Object.keys(params).forEach(key => {
+      path = path.replace(`:${key}`, params[key]);
+    });
+    return path;
+  };
 
   addChildPath = (paths: string[], childPath: string = '', params: any) => {
     const originalPaths = [...paths];
     const path = this.getPath(childPath, params);
     if (path) {
-       originalPaths.push(path);
+      originalPaths.push(path);
     }
     return originalPaths;
- }
+  };
 
   genForRoutes = ({
     routes = [],
@@ -107,12 +107,10 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
         overlay = (
           <Menu>
             {route.children.map(child => (
-                <Menu.Item key={child.breadcrumbName || child.path}>
-                  {
-                    itemRender(child, params, routes, this.addChildPath(paths, child.path, params))
-                  }
-                </Menu.Item>
-             ))}
+              <Menu.Item key={child.breadcrumbName || child.path}>
+                {itemRender(child, params, routes, this.addChildPath(paths, child.path, params))}
+              </Menu.Item>
+            ))}
           </Menu>
         );
       }

components/button/button.tsx

@@ -289,7 +289,7 @@ class Button extends React.Component<ButtonProps, ButtonState> {
 
     const buttonNode = (
       <button
-        {...otherProps as NativeButtonProps}
+        {...(otherProps as NativeButtonProps)}
         type={htmlType}
         className={classes}
         onClick={this.handleClick}

components/button/demo/size.md

@@ -30,7 +30,7 @@ class ButtonSize extends React.Component {
   };
 
   render() {
-    const size = this.state.size;
+    const { size } = this.state;
     return (
       <div>
         <Radio.Group value={size} onChange={this.handleSizeChange}>

components/collapse/demo/accordion.md

@@ -16,7 +16,7 @@ In accordion mode, only one panel can be expanded at a time.
 ```jsx
 import { Collapse } from 'antd';
 
-const Panel = Collapse.Panel;
+const { Panel } = Collapse;
 
 const text = `
   A dog is a type of domesticated animal.

components/collapse/demo/basic.md

@@ -16,7 +16,7 @@ By default, any number of panels can be expanded at a time. The first panel is e
 ```jsx
 import { Collapse } from 'antd';
 
-const Panel = Collapse.Panel;
+const { Panel } = Collapse;
 
 function callback(key) {
   console.log(key);

components/collapse/demo/borderless.md

@@ -16,7 +16,7 @@ A borderless style of Collapse.
 ```jsx
 import { Collapse } from 'antd';
 
-const Panel = Collapse.Panel;
+const { Panel } = Collapse;
 
 const text = (
   <p style={{ paddingLeft: 24 }}>

components/collapse/demo/custom.md

@@ -16,7 +16,7 @@ Customize the background, border, margin styles and icon for each panel.
 ```jsx
 import { Collapse, Icon } from 'antd';
 
-const Panel = Collapse.Panel;
+const { Panel } = Collapse;
 
 const text = `
   A dog is a type of domesticated animal.

components/collapse/demo/mix.md

@@ -16,7 +16,7 @@ title:
 ```jsx
 import { Collapse } from 'antd';
 
-const Panel = Collapse.Panel;
+const { Panel } = Collapse;
 
 function callback(key) {
   console.log(key);

components/collapse/demo/noarrow.md

@@ -16,7 +16,7 @@ You can hide the arrow icon by passing `showArrow={false}` to `CollapsePanel` co
 ```jsx
 import { Collapse } from 'antd';
 
-const Panel = Collapse.Panel;
+const { Panel } = Collapse;
 
 function callback(key) {
   console.log(key);

components/date-picker/demo/start-end.md

@@ -30,7 +30,7 @@ class DateRange extends React.Component {
   };
 
   disabledStartDate = startValue => {
-    const endValue = this.state.endValue;
+    const { endValue } = this.state;
     if (!startValue || !endValue) {
       return false;
     }
@@ -38,7 +38,7 @@ class DateRange extends React.Component {
   };
 
   disabledEndDate = endValue => {
-    const startValue = this.state.startValue;
+    const { startValue } = this.state;
     if (!endValue || !startValue) {
       return false;
     }

components/form/demo/customized-form-controls.md

@@ -71,7 +71,7 @@ class PriceInput extends React.Component {
 
   triggerChange = changedValue => {
     // Should provide an event to pass value to Form.
-    const onChange = this.props.onChange;
+    const { onChange } = this.props;
     if (onChange) {
       onChange(Object.assign({}, this.state, changedValue));
     }
@@ -79,7 +79,7 @@ class PriceInput extends React.Component {
 
   render() {
     const { size } = this.props;
-    const state = this.state;
+    const { state } = this;
     return (
       <span>
         <Input

components/form/demo/form-in-modal.md

@@ -70,7 +70,7 @@ class CollectionsPage extends React.Component {
   };
 
   handleCreate = () => {
-    const form = this.formRef.props.form;
+    const { form } = this.formRef.props;
     form.validateFields((err, values) => {
       if (err) {
         return;

components/form/demo/global-state.md

@@ -67,7 +67,7 @@ class Demo extends React.Component {
   };
 
   render() {
-    const fields = this.state.fields;
+    const { fields } = this.state;
     return (
       <div>
         <CustomizedForm {...fields} onChange={this.handleFormChange} />

components/form/demo/register.md

@@ -82,12 +82,12 @@ class RegistrationForm extends React.Component {
   };
 
   handleConfirmBlur = e => {
-    const value = e.target.value;
+    const { value } = e.target;
     this.setState({ confirmDirty: this.state.confirmDirty || !!value });
   };
 
   compareToFirstPassword = (rule, value, callback) => {
-    const form = this.props.form;
+    const { form } = this.props;
     if (value && value !== form.getFieldValue('password')) {
       callback('Two passwords that you enter is inconsistent!');
     } else {
@@ -96,7 +96,7 @@ class RegistrationForm extends React.Component {
   };
 
   validateToNextPassword = (rule, value, callback) => {
-    const form = this.props.form;
+    const { form } = this.props;
     if (value && this.state.confirmDirty) {
       form.validateFields(['confirm'], { force: true });
     }

components/form/demo/without-form-create.md

@@ -50,7 +50,7 @@ class RawForm extends React.Component {
       labelCol: { span: 7 },
       wrapperCol: { span: 12 },
     };
-    const number = this.state.number;
+    const { number } = this.state;
     const tips =
       'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.';
     return (

components/form/interface.ts

@@ -61,7 +61,7 @@ type NonReactStatics<
       : S extends React.ForwardRefExoticComponent<any>
       ? keyof FORWARD_REF_STATICS | keyof C
       : keyof REACT_STATICS | keyof KNOWN_STATICS | keyof C
-  >]: S[key]
+  >]: S[key];
 };
 
 // Copy from @types/react-redux https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-redux/index.d.ts
@@ -70,7 +70,7 @@ export type Matching<InjectedProps, DecorationTargetProps> = {
     ? InjectedProps[P] extends DecorationTargetProps[P]
       ? DecorationTargetProps[P]
       : InjectedProps[P]
-    : DecorationTargetProps[P]
+    : DecorationTargetProps[P];
 };
 
 export type GetProps<C> = C extends React.ComponentType<infer P> ? P : never;

components/input/demo/search-input.md

@@ -16,7 +16,7 @@ Example of creating a search box by grouping a standard input with a search butt
 ```jsx
 import { Input } from 'antd';
 
-const Search = Input.Search;
+const { Search } = Input;
 
 ReactDOM.render(
   <div>

components/input/style/mixin.less

@@ -80,9 +80,9 @@
     max-width: 100%; // prevent textearea resize from coming out of its container
     height: auto;
     min-height: @input-height-base;
+    line-height: @line-height-base;
     vertical-align: bottom;
     transition: all 0.3s, height 0s;
-    line-height: @line-height-base;
   }
 
   // Size

components/list/Item.tsx

@@ -116,7 +116,7 @@ export default class Item extends React.Component<ListItemProps, any> {
     const Tag = grid ? 'div' : 'li';
     const itemChildren = (
       <Tag
-        {...others as any} // `li` element `onCopy` prop args is not same as `div`
+        {...(others as any)} // `li` element `onCopy` prop args is not same as `div`
         className={classNames(`${prefixCls}-item`, className, {
           [`${prefixCls}-item-no-flex`]: !this.isFlexMode(),
         })}

components/list/demo/infinite-load.md

@@ -49,7 +49,7 @@ class InfiniteListExample extends React.Component {
   };
 
   handleInfiniteOnLoad = () => {
-    let data = this.state.data;
+    let { data } = this.state;
     this.setState({
       loading: true,
     });

components/list/demo/infinite-virtualized-load.md

@@ -58,7 +58,7 @@ class VirtualizedExample extends React.Component {
   };
 
   handleInfiniteOnLoad = ({ startIndex, stopIndex }) => {
-    let data = this.state.data;
+    let { data } = this.state;
     this.setState({
       loading: true,
     });

components/mention/demo/avatar.md

@@ -18,7 +18,7 @@ Customize suggestions.
 ```jsx
 import { Mention, Avatar } from 'antd';
 
-const Nav = Mention.Nav;
+const { Nav } = Mention;
 
 const webFrameworks = [
   {

components/mention/demo/custom-tag.md

@@ -18,7 +18,7 @@ Customize suggestions.
 ```jsx
 import { Mention } from 'antd';
 
-const Nav = Mention.Nav;
+const { Nav } = Mention;
 
 const webFrameworks = [
   { name: 'React', type: 'JavaScript' },

components/mentions/index.tsx

@@ -49,28 +49,26 @@ class Mentions extends React.Component<MentionProps, MentionState> {
 
     return value
       .split(split)
-      .map(
-        (str = ''): MentionsEntity | null => {
-          let hitPrefix: string | null = null;
-
-          prefixList.some(prefixStr => {
-            const startStr = str.slice(0, prefixStr.length);
-            if (startStr === prefixStr) {
-              hitPrefix = prefixStr;
-              return true;
-            }
-            return false;
-          });
-
-          if (hitPrefix !== null) {
-            return {
-              prefix: hitPrefix,
-              value: str.slice(hitPrefix!.length),
-            };
+      .map((str = ''): MentionsEntity | null => {
+        let hitPrefix: string | null = null;
+
+        prefixList.some(prefixStr => {
+          const startStr = str.slice(0, prefixStr.length);
+          if (startStr === prefixStr) {
+            hitPrefix = prefixStr;
+            return true;
           }
-          return null;
-        },
-      )
+          return false;
+        });
+
+        if (hitPrefix !== null) {
+          return {
+            prefix: hitPrefix,
+            value: str.slice(hitPrefix!.length),
+          };
+        }
+        return null;
+      })
       .filter((entity): entity is MentionsEntity => !!entity && !!entity.value);
   };
 

components/menu/demo/horizontal.md

@@ -16,7 +16,7 @@ Horizontal top navigation menu.
 ```jsx
 import { Menu, Icon } from 'antd';
 
-const { SubMenu }  = Menu;
+const { SubMenu } = Menu;
 
 class App extends React.Component {
   state = {

components/menu/demo/inline-collapsed.md

@@ -20,7 +20,7 @@ Here is [a complete demo](/components/layout/#components-layout-demo-side) with
 ```jsx
 import { Menu, Icon, Button } from 'antd';
 
-const { SubMenu }  = Menu;
+const { SubMenu } = Menu;
 
 class App extends React.Component {
   state = {

components/menu/demo/inline.md

@@ -16,7 +16,7 @@ Vertical menu with inline submenus.
 ```jsx
 import { Menu, Icon } from 'antd';
 
-const { SubMenu }  = Menu;
+const { SubMenu } = Menu;
 
 class Sider extends React.Component {
   handleClick = e => {

components/menu/demo/sider-current.md

@@ -16,7 +16,7 @@ Click the menu and you will see that all the other menus gets collapsed to keep
 ```jsx
 import { Menu, Icon } from 'antd';
 
-const { SubMenu }  = Menu;
+const { SubMenu } = Menu;
 
 class Sider extends React.Component {
   // submenu keys of first level

components/menu/demo/theme.md

@@ -16,7 +16,7 @@ There are two built-in themes: 'light' and 'dark'. The default value is 'light'.
 ```jsx
 import { Menu, Icon, Switch } from 'antd';
 
-const { SubMenu }  = Menu;
+const { SubMenu } = Menu;
 
 class Sider extends React.Component {
   state = {

components/menu/demo/vertical.md

@@ -16,7 +16,7 @@ Submenus open as pop-ups.
 ```jsx
 import { Menu, Icon } from 'antd';
 
-const { SubMenu }  = Menu;
+const { SubMenu } = Menu;
 
 function handleClick(e) {
   console.log('click', e);

components/modal/demo/confirm-promise.md

@@ -16,7 +16,7 @@ Use `confirm()` to show a confirmation modal dialog. Let onCancel/onOk function
 ```jsx
 import { Modal, Button } from 'antd';
 
-const confirm = Modal.confirm;
+const { confirm } = Modal;
 
 function showConfirm() {
   confirm({

components/modal/demo/confirm-router.md

@@ -20,7 +20,7 @@ function destroyAll() {
   Modal.destroyAll();
 }
 
-const confirm = Modal.confirm;
+const { confirm } = Modal;
 
 function showConfirm() {
   for (let i = 0; i < 3; i += 1) {

components/modal/demo/confirm.md

@@ -16,7 +16,7 @@ Use `confirm()` to show a confirmation modal dialog.
 ```jsx
 import { Modal, Button } from 'antd';
 
-const confirm = Modal.confirm;
+const { confirm } = Modal;
 
 function showConfirm() {
   confirm({

components/select/demo/search-box.md

@@ -39,7 +39,7 @@ function fetch(value, callback) {
       .then(response => response.json())
       .then(d => {
         if (currentValue === value) {
-          const result = d.result;
+          const { result } = d;
           const data = [];
           result.forEach(r => {
             data.push({

components/select/index.en-US.md

@@ -14,9 +14,9 @@ Select component to select value from options.
 ## API
 
 ```html
-<Select>
-  <Option value="lucy">lucy</Option>
-</Select>
+<select>
+  <option value="lucy">lucy</option>
+</select>
 ```
 
 ### Select props

components/select/index.zh-CN.md

@@ -14,9 +14,9 @@ title: Select
 
 ## API
 
-```html
+```jsx
 <Select>
-  <Option value="lucy">lucy</Option>
+  <Select.Option value="lucy">lucy</Select.Option>
 </Select>
 ```
 

components/statistic/demo/countdown.md

@@ -16,7 +16,7 @@ Countdown component.
 ```jsx
 import { Statistic, Row, Col } from 'antd';
 
-const Countdown = Statistic.Countdown;
+const { Countdown } = Statistic;
 const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; // Moment is also OK
 
 function onFinish() {

components/table/demo/drag-sorting.md

@@ -26,7 +26,7 @@ class BodyRow extends React.Component {
     const { isOver, connectDragSource, connectDropTarget, moveRow, ...restProps } = this.props;
     const style = { ...restProps.style, cursor: 'move' };
 
-    let className = restProps.className;
+    let { className } = restProps;
     if (isOver) {
       if (restProps.index > dragingIndex) {
         className += ' drop-over-downward';

components/table/demo/dynamic-settings.md

@@ -132,7 +132,7 @@ class Demo extends React.Component {
   };
 
   render() {
-    const state = this.state;
+    const { state } = this;
     return (
       <div>
         <div className="components-table-demo-control-bar">

components/table/interface.tsx

@@ -267,5 +267,5 @@ export type PrepareParamsArgumentsReturn<T> = [
   Object,
   {
     currentDataSource: T[];
-  }
+  },
 ];

components/tabs/demo/custom-add-trigger.md

@@ -41,14 +41,14 @@ class Demo extends React.Component {
   };
 
   add = () => {
-    const panes = this.state.panes;
+    const { panes } = this.state;
     const activeKey = `newTab${this.newTabIndex++}`;
     panes.push({ title: 'New Tab', content: 'New Tab Pane', key: activeKey });
     this.setState({ panes, activeKey });
   };
 
   remove = targetKey => {
-    let activeKey = this.state.activeKey;
+    let { activeKey } = this.state;
     let lastIndex;
     this.state.panes.forEach((pane, i) => {
       if (pane.key === targetKey) {

components/tabs/demo/editable-card.md

@@ -47,14 +47,14 @@ class Demo extends React.Component {
   };
 
   add = () => {
-    const panes = this.state.panes;
+    const { panes } = this.state;
     const activeKey = `newTab${this.newTabIndex++}`;
     panes.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey });
     this.setState({ panes, activeKey });
   };
 
   remove = targetKey => {
-    let activeKey = this.state.activeKey;
+    let { activeKey } = this.state;
     let lastIndex;
     this.state.panes.forEach((pane, i) => {
       if (pane.key === targetKey) {

components/tabs/demo/slide.md

@@ -40,7 +40,7 @@ class SlidingTabsDemo extends React.Component {
           <Radio.Button value="left">Vertical</Radio.Button>
         </Radio.Group>
         <Tabs defaultActiveKey="1" tabPosition={mode} style={{ height: 220 }}>
-          {[...Array(30).keys()].map((i) => (
+          {[...Array(30).keys()].map(i => (
             <TabPane tab={`Tab-${i}`} key={i}>
               Content of tab {i}
             </TabPane>

components/tag/CheckableTag.tsx

@@ -29,7 +29,7 @@ export default class CheckableTag extends React.Component<CheckableTagProps> {
     );
 
     delete (restProps as any).onChange; // TypeScript cannot check delete now.
-    return <div {...restProps as any} className={cls} onClick={this.handleClick} />;
+    return <div {...(restProps as any)} className={cls} onClick={this.handleClick} />;
   };
 
   render() {

components/tag/demo/hot-tags.md

@@ -16,7 +16,7 @@ Select your favourite topics.
 ```jsx
 import { Tag } from 'antd';
 
-const CheckableTag = Tag.CheckableTag;
+const { CheckableTag } = Tag;
 
 const tagsFromServer = ['Movies', 'Books', 'Music', 'Sports'];
 

components/time-picker/__tests__/index.test.js

@@ -73,7 +73,9 @@ describe('TimePicker', () => {
     const locale = {
       placeholder: 'Избери дата',
     };
-    const wrapper = mount(<TimePicker defaultValue={moment('2000-01-01 00:00:00')} open locale={locale} />);
+    const wrapper = mount(
+      <TimePicker defaultValue={moment('2000-01-01 00:00:00')} open locale={locale} />,
+    );
     expect(wrapper.render()).toMatchSnapshot();
   });
 });

components/tree-select/demo/basic.md

@@ -16,7 +16,7 @@ The most basic usage.
 ```jsx
 import { TreeSelect } from 'antd';
 
-const TreeNode = TreeSelect.TreeNode;
+const { TreeNode } = TreeSelect;
 
 class Demo extends React.Component {
   state = {

components/tree-select/demo/checkable.md

@@ -16,7 +16,7 @@ Multiple and checkable.
 ```jsx
 import { TreeSelect } from 'antd';
 
-const SHOW_PARENT = TreeSelect.SHOW_PARENT;
+const { SHOW_PARENT } = TreeSelect;
 
 const treeData = [
   {

components/tree-select/demo/multiple.md

@@ -16,7 +16,7 @@ Multiple selection usage.
 ```jsx
 import { TreeSelect } from 'antd';
 
-const TreeNode = TreeSelect.TreeNode;
+const { TreeNode } = TreeSelect;
 
 class Demo extends React.Component {
   state = {

components/tree-select/demo/suffix.md

@@ -17,7 +17,7 @@ The most basic usage.
 ```jsx
 import { TreeSelect, Icon } from 'antd';
 
-const TreeNode = TreeSelect.TreeNode;
+const { TreeNode } = TreeSelect;
 const icon = <Icon type="smile" />;
 
 class Demo extends React.Component {

components/tree/demo/search.md

@@ -17,7 +17,7 @@ Searchable Tree.
 import { Tree, Input } from 'antd';
 
 const { TreeNode } = Tree;
-const Search = Input.Search;
+const { Search } = Input;
 
 const x = 3;
 const y = 2;
@@ -51,7 +51,7 @@ const dataList = [];
 const generateList = data => {
   for (let i = 0; i < data.length; i++) {
     const node = data[i];
-    const key = node.key;
+    const { key } = node;
     dataList.push({ key, title: key });
     if (node.children) {
       generateList(node.children);
@@ -90,7 +90,7 @@ class SearchTree extends React.Component {
   };
 
   onChange = e => {
-    const value = e.target.value;
+    const { value } = e.target;
     const expandedKeys = dataList
       .map(item => {
         if (item.title.indexOf(value) > -1) {

components/upload/demo/avatar.md

@@ -66,7 +66,7 @@ class Avatar extends React.Component {
         <div className="ant-upload-text">Upload</div>
       </div>
     );
-    const imageUrl = this.state.imageUrl;
+    const { imageUrl } = this.state;
     return (
       <Upload
         name="avatar"

components/upload/demo/drag.md

@@ -20,14 +20,14 @@ We can upload serveral files at once in modern browsers by giving the input the
 ```jsx
 import { Upload, Icon, message } from 'antd';
 
-const Dragger = Upload.Dragger;
+const { Dragger } = Upload;
 
 const props = {
   name: 'file',
   multiple: true,
   action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
   onChange(info) {
-    const status = info.file.status;
+    const { status } = info.file;
     if (status !== 'uploading') {
       console.log(info.file, info.fileList);
     }

docs/react/faq.en-US.md

@@ -117,7 +117,7 @@ Like [the explaination](https://github.com/ant-design/ant-design/issues/11586#is
 
 ##### Workaround
 
-You can refer to [this article](https://juejin.im/post/5cf65c366fb9a07eca6968f9) or [this article](https://www.cnblogs.com/zyl-Tara/p/10197177.html), using  `mode` and `onPanelChange` to encapsulate a `YearPicker` or `MonthRangePicker` for your needs. Or you can wait for our [antd@4.0](https://github.com/ant-design/ant-design/issues/16911), in which we are planing to [add more XxxPickers](https://github.com/ant-design/ant-design/issues/4524#issuecomment-480576884) for those requirments.
+You can refer to [this article](https://juejin.im/post/5cf65c366fb9a07eca6968f9) or [this article](https://www.cnblogs.com/zyl-Tara/p/10197177.html), using `mode` and `onPanelChange` to encapsulate a `YearPicker` or `MonthRangePicker` for your needs. Or you can wait for our [antd@4.0](https://github.com/ant-design/ant-design/issues/16911), in which we are planing to [add more XxxPickers](https://github.com/ant-design/ant-design/issues/4524#issuecomment-480576884) for those requirments.
 
 ### How to spell Ant Design correctly?
 

renovate.json

@@ -1,6 +1,3 @@
 {
-  "extends": [
-    "config:base",
-    ":preserveSemverRanges"
-  ]
+  "extends": ["config:base", ":preserveSemverRanges"]
 }

scripts/check-commit.js

@@ -43,7 +43,9 @@ async function checkCommit({ files }) {
 async function checkRemote() {
   const { remote } = await git.fetch('origin', 'master');
   if (remote.indexOf('ant-design/ant-design') === -1) {
-    console.log(chalk.yellow('😓 Your remote origin is not ant-design/ant-design, did you fork it?'));
+    console.log(
+      chalk.yellow('😓 Your remote origin is not ant-design/ant-design, did you fork it?'),
+    );
     exitProcess();
   }
 }

site/theme/template/IconDisplay/index.tsx

@@ -99,7 +99,12 @@ class IconDisplay extends React.Component<IconDisplayProps, IconDisplayState> {
     return (
       <>
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-          <Radio.Group value={this.state.theme} onChange={this.handleChangeTheme} size="large" buttonStyle="solid">
+          <Radio.Group
+            value={this.state.theme}
+            onChange={this.handleChangeTheme}
+            size="large"
+            buttonStyle="solid"
+          >
             <Radio.Button value="outlined">
               <Icon component={OutlinedIcon} /> {messages['app.docs.components.icon.outlined']}
             </Radio.Button>

site/theme/template/IconDisplay/themeIcons.tsx

@@ -7,7 +7,7 @@ export const FilledIcon: React.SFC<CustomIconComponentProps> = props => {
     '704c0 53 43 96 96 96h704c53 0 96-43 96-96V16' +
     '0c0-53-43-96-96-96z';
   return (
-    <svg {...props as any} viewBox="0 0 1024 1024">
+    <svg {...(props as any)} viewBox="0 0 1024 1024">
       <path d={path} />
     </svg>
   );
@@ -21,7 +21,7 @@ export const OutlinedIcon: React.SFC<CustomIconComponentProps> = props => {
     '12-12V172c0-6.6 5.4-12 12-12h680c6.6 0 12 5.4' +
     ' 12 12v680c0 6.6-5.4 12-12 12z';
   return (
-    <svg {...props as any} viewBox="0 0 1024 1024">
+    <svg {...(props as any)} viewBox="0 0 1024 1024">
       <path d={path} />
     </svg>
   );
@@ -34,7 +34,7 @@ export const TwoToneIcon: React.SFC<CustomIconComponentProps> = props => {
     '066 16 512z m496 368V144c203.41 0 368 164.622 3' +
     '68 368 0 203.41-164.622 368-368 368z';
   return (
-    <svg {...props as any} viewBox="0 0 1024 1024">
+    <svg {...(props as any)} viewBox="0 0 1024 1024">
       <path d={path} />
     </svg>
   );