Remove allowSyntheticDefaultImports (ant-design#8218)

.jest.js

@@ -42,4 +42,9 @@ module.exports = {
   snapshotSerializers: [
     'enzyme-to-json/serializer',
   ],
+  globals: {
+    'ts-jest': {
+      tsConfigFile: './tsconfig.test.json',
+    }
+  },
 };

.jest.node.js

@@ -18,4 +18,9 @@ module.exports = {
   snapshotSerializers: [
     'enzyme-to-json/serializer'
   ],
+  globals: {
+    'ts-jest': {
+      tsConfigFile: './tsconfig.test.json',
+    }
+  },
 };

README-zh_CN.md

@@ -60,20 +60,7 @@ import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 
 ## TypeScript
 
-```js
-// tsconfig.json
-{
-  "compilerOptions": {
-    "moduleResolution": "node",
-    "jsx": "preserve",
-    "allowSyntheticDefaultImports": true
-  }
-}
-```
-
-> 注意：
-> - 设置 `allowSyntheticDefaultImports` 避免 `error TS1192: Module 'react' has no default export` 的错误。
-> - 不要使用 @types/antd, antd 已经自带了 TypeScript 定义。
+- 不要使用 @types/antd, antd 已经自带了 TypeScript 定义。
 
 ## 国际化
 

README.md

@@ -86,20 +86,7 @@ import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 
 ### TypeScript
 
-```js
-// tsconfig.json
-{
-  "compilerOptions": {
-    "moduleResolution": "node",
-    "jsx": "preserve",
-    "allowSyntheticDefaultImports": true
-  }
-}
-```
-
-> Note:
-> - set `allowSyntheticDefaultImports` to prevent `error TS1192: Module 'react' has no default export`.
-> - Don't use @types/antd, antd provide a built-in ts definition already.
+- Don't use @types/antd, antd provide a built-in ts definition already.
 
 #### Use [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) with modularized antd
 

components/_util/callMoment.tsx

@@ -0,0 +1,5 @@
+// https://github.com/moment/moment/issues/3650
+
+export default function callMoment(moment, ...args) {
+  return (moment.default || moment)(...args);
+}

components/affix/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import classNames from 'classnames';

components/alert/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import Animate from 'rc-animate';
 import Icon from '../icon';
 import classNames from 'classnames';

components/anchor/Anchor.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';

components/anchor/AnchorLink.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 

components/auto-complete/InputElement.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { findDOMNode } from 'react-dom';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 
 export interface InputElementProps {
   children: React.ReactElement<any>;
@@ -9,10 +9,10 @@ export default class InputElement extends React.Component<InputElementProps, any
   private ele: HTMLInputElement;
 
   focus = () => {
-    this.ele.focus ? this.ele.focus() : (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() : (findDOMNode(this.ele) as HTMLInputElement).blur();
+    this.ele.blur ? this.ele.blur() : (ReactDOM.findDOMNode(this.ele) as HTMLInputElement).blur();
   }
   saveRef = (ele: HTMLInputElement) => {
     this.ele = ele;

components/auto-complete/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Option, OptGroup } from 'rc-select';
 import classNames from 'classnames';
 import Select, { AbstractSelectProps, SelectValue, OptionProps, OptGroupProps } from '../select';

components/avatar/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import Icon from '../icon';
 import classNames from 'classnames';
 

components/back-top/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Animate from 'rc-animate';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import classNames from 'classnames';

components/badge/ScrollNumber.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { createElement, Component } from 'react';
 import omit from 'omit.js';
 import classNames from 'classnames';

components/badge/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import Animate from 'rc-animate';
 import ScrollNumber from './ScrollNumber';

components/breadcrumb/Breadcrumb.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { cloneElement } from 'react';
 import warning from '../_util/warning';

components/breadcrumb/BreadcrumbItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 
 export interface BreadcrumbItemProps {

components/button/button-group.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import { ButtonSize } from './button';
 

components/button/button.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import omit from 'omit.js';

components/calendar/Header.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import moment from 'moment';
+import * as React from 'react';
+import * as moment from 'moment';
 import { PREFIX_CLS } from './Constants';
 import Select from '../select';
 import { Group, Button } from '../radio';

components/calendar/index.tsx

@@ -1,10 +1,12 @@
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment';
+import * as moment from 'moment';
 import FullCalendar from 'rc-calendar/lib/FullCalendar';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import { PREFIX_CLS } from './Constants';
 import Header from './Header';
+import callMoment from '../_util/callMoment';
+
 declare const require: Function;
 
 export { HeaderProps } from './Header';
@@ -71,7 +73,7 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
   constructor(props, context) {
     super(props, context);
 
-    const value = props.value || props.defaultValue || moment();
+    const value = props.value || props.defaultValue || callMoment(moment);
     if (!moment.isMoment(value)) {
       throw new Error(
         'The value/defaultValue of Calendar must be a moment object after `[email protected]`, ' +

components/card/Grid.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 
 export interface CardGridProps {

components/card/Meta.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 
 export interface CardMetaProps {

components/card/index.tsx

@@ -1,4 +1,4 @@
-import React, { Component, Children } from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import omit from 'omit.js';
@@ -38,7 +38,7 @@ export interface CardProps {
   onTabChange?: (key: string) => void;
 }
 
-export default class Card extends Component<CardProps, {}> {
+export default class Card extends React.Component<CardProps, {}> {
   static Grid: typeof Grid = Grid;
   static Meta: typeof Meta = Meta;
   resizeEvent: any;
@@ -93,7 +93,7 @@ export default class Card extends Component<CardProps, {}> {
   }
   isContainGrid() {
     let containGrid;
-    Children.forEach(this.props.children, (element: JSX.Element) => {
+    React.Children.forEach(this.props.children, (element: JSX.Element) => {
       if (element && element.type && element.type === Grid) {
         containGrid = true;
       }

components/carousel/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import debounce from 'lodash.debounce';
 
 // matchMedia polyfill for

components/cascader/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import RcCascader from 'rc-cascader';
 import arrayTreeFilter from 'array-tree-filter';
 import classNames from 'classnames';

components/checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import RcCheckbox from 'rc-checkbox';

components/checkbox/Group.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import shallowEqual from 'shallowequal';

components/collapse/Collapse.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import RcCollapse from 'rc-collapse';
 import classNames from 'classnames';
 import animation from '../_util/openAnimation';

components/date-picker/Calendar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import CalendarLocale from 'rc-calendar/lib/locale/zh_CN';
 import RcCalendar from 'rc-calendar';
 import warning from 'warning';

components/date-picker/RangePicker.tsx

@@ -1,11 +1,12 @@
 /* tslint:disable jsx-no-multiline-js */
-import React from 'react';
-import moment from 'moment';
+import * as React from 'react';
+import * as moment from 'moment';
 import RangeCalendar from 'rc-calendar/lib/RangeCalendar';
 import RcDatePicker from 'rc-calendar/lib/Picker';
 import classNames from 'classnames';
 import Icon from '../icon';
 import warning from '../_util/warning';
+import callMoment from '../_util/callMoment';
 
 function getShowDateFromValue(value: moment.Moment[]): moment.Moment[] | undefined {
   const [start, end] = value;
@@ -60,7 +61,7 @@ export default class RangePicker extends React.Component<any, any> {
     const pickerValue = !value || isEmptyArray(value) ? props.defaultPickerValue : value;
     this.state = {
       value,
-      showDate: pickerValueAdapter(pickerValue || moment()),
+      showDate: pickerValueAdapter(pickerValue || callMoment(moment)),
       open: props.open,
       hoverValue: [],
     };

components/date-picker/WeekPicker.tsx

@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
-import moment from 'moment';
+import * as React from 'react';
+import * as moment from 'moment';
 import Calendar from 'rc-calendar';
 import RcDatePicker from 'rc-calendar/lib/Picker';
 import classNames from 'classnames';
@@ -9,7 +9,7 @@ function formatValue(value: moment.Moment | undefined, format: string): string {
   return (value && value.format(format)) || '';
 }
 
-export default class WeekPicker extends Component<any, any> {
+export default class WeekPicker extends React.Component<any, any> {
   static defaultProps = {
     format: 'YYYY-Wo',
     allowClear: true,

components/date-picker/createPicker.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
-import moment from 'moment';
+import * as React from 'react';
+import * as moment from 'moment';
 import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
 import RcDatePicker from 'rc-calendar/lib/Picker';
 import classNames from 'classnames';
 import omit from 'omit.js';
 import Icon from '../icon';
 import warning from '../_util/warning';
+import callMoment from '../_util/callMoment';
 
 export interface PickerProps {
   value?: moment.Moment;
@@ -104,7 +105,7 @@ export default function createPicker(TheCalendar): any {
           disabledTime={disabledTime}
           locale={locale.lang}
           timePicker={props.timePicker}
-          defaultValue={props.defaultPickerValue || moment()}
+          defaultValue={props.defaultPickerValue || callMoment(moment)}
           dateInputPlaceholder={placeholder}
           prefixCls={prefixCls}
           className={calendarClassName}

components/date-picker/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import moment from 'moment';
+import * as React from 'react';
+import * as moment from 'moment';
 import RcCalendar from 'rc-calendar';
 import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
 import createPicker from './createPicker';

components/date-picker/wrapPicker.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import TimePickerPanel from 'rc-time-picker/lib/Panel';
 import classNames from 'classnames';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';

components/divider/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 
 export default function Divider({

components/dropdown/dropdown-button.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Button from '../button';
 import { ButtonGroupProps } from '../button/button-group';
 import Icon from '../icon';

components/dropdown/dropdown.tsx

@@ -1,4 +1,4 @@
-import React, { cloneElement } from 'react';
+import * as React from 'react';
 import RcDropdown from 'rc-dropdown';
 import classNames from 'classnames';
 import DropdownButton from './dropdown-button';
@@ -46,15 +46,15 @@ export default class Dropdown extends React.Component<DropDownProps, any> {
 
   render() {
     const { children, prefixCls, overlay, trigger, disabled } = this.props;
-    const dropdownTrigger = cloneElement(children as any, {
+    const dropdownTrigger = React.cloneElement(children as any, {
       className: classNames((children as any).props.className, `${prefixCls}-trigger`),
       disabled,
     });
     // menu cannot be selectable in dropdown defaultly
     const overlayProps = overlay && (overlay as any).props;
     const selectable = (overlayProps && 'selectable' in overlayProps)
       ? overlayProps.selectable : false;
-    const fixedModeOverlay = cloneElement(overlay as any, {
+    const fixedModeOverlay = React.cloneElement(overlay as any, {
       mode: 'vertical',
       selectable,
     });