diff --git a/.flowconfig b/.flowconfig index aa4827ad9..931cc5334 100644 --- a/.flowconfig +++ b/.flowconfig @@ -8,4 +8,3 @@ flow [options] esproposal.class_static_fields=enable -unsafe.enable_getters_and_setters=true diff --git a/flow/modules.js b/flow/modules.js index 73c985bb3..d09584b98 100644 --- a/flow/modules.js +++ b/flow/modules.js @@ -1,25 +1,17 @@ declare module 'classnames' { - declare var exports: { - (): any - } + declare export default function classnames(): any } declare module 'react-click-outside' { - declare var exports: { - (module: any): any - } + declare export default function enhanceWithClickOutside(module: any): any } declare module 'throttle-debounce/throttle' { - declare var exports: { - (...args: Array): any - } + declare export default function throttle(...args: Array): any } declare module 'throttle-debounce/debounce' { - declare var exports: { - (...args: Array): any - } + declare export default function debounce(...args: Array): any } declare module 'async-validator' { @@ -27,5 +19,5 @@ declare module 'async-validator' { constructor(options: Object): void; validate(...args: Array): void; } - declare var exports: typeof AsyncValidator; + declare export default typeof AsyncValidator; } diff --git a/libs/collapse/index.jsx b/libs/collapse/index.jsx index 25144ed42..0816a5588 100644 --- a/libs/collapse/index.jsx +++ b/libs/collapse/index.jsx @@ -1,17 +1,15 @@ /* @flow */ -import React, { Component } from 'react'; +import * as React from 'react'; const ANIMATION_DURATION = 300; type Props = { isShow: boolean, - children?: React.Element + children?: React.Node }; -export default class CollapseTransition extends Component { - props: Props; - +export default class CollapseTransition extends React.Component { selfRef: any; leaveTimer: any; enterTimer: any; diff --git a/package.json b/package.json index 7d876c9fc..20bdbb050 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ }, "homepage": "https://github.com/eleme/element-react", "devDependencies": { - "@types/react": "^15.6.7", + "@types/react": "^16.3.18", "babel-cli": "^6.26.0", "babel-eslint": "^7.2.3", "babel-jest": "^21.2.0", @@ -51,13 +51,13 @@ "enzyme-adapter-react-16": "^1.1.0", "eslint": "^3.19.0", "eslint-config-airbnb": "^15.0.1", - "eslint-plugin-flowtype": "^2.46.3", + "eslint-plugin-flowtype": "^2.50.0", "eslint-plugin-import": "^2.6.0", "eslint-plugin-jsx-a11y": "^5.1.0", "eslint-plugin-react": "^7.8.1", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.5", - "flow-bin": "^0.51.1", + "flow-bin": "^0.78.0", "html-webpack-plugin": "^2.30.1", "jest": "^21.2.1", "marked": "^0.3.6", @@ -87,8 +87,8 @@ "throttle-debounce": "^1.0.1" }, "peerDependencies": { - "react": "*", - "react-dom": "*" + "react": ">=16.3.0", + "react-dom": ">=16.3.0" }, "jest": { "testRegex": "(/jest/.+\\.(js|jsx)$)|_test.jsx?$", diff --git a/src/auto-complete/AutoComplete.jsx b/src/auto-complete/AutoComplete.jsx index 07bd678f7..8c8a32f97 100644 --- a/src/auto-complete/AutoComplete.jsx +++ b/src/auto-complete/AutoComplete.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import ReactDOM from 'react-dom'; import ClickOutside from 'react-click-outside'; import { Component, PropTypes } from '../../libs'; @@ -172,7 +172,7 @@ class AutoComplete extends Component { return (isValidData || this.state.loading) && this.state.isFocus; } - onKeyDown(e: SyntheticKeyboardEvent): void { + onKeyDown(e: SyntheticKeyboardEvent): void { const { highlightedIndex } = this.state; switch (e.keyCode) { diff --git a/src/auto-complete/Suggestions.jsx b/src/auto-complete/Suggestions.jsx index fe06bf4af..85c461b0a 100644 --- a/src/auto-complete/Suggestions.jsx +++ b/src/auto-complete/Suggestions.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import ReactDOM from 'react-dom'; import Popper from '../../libs/utils/popper'; import { Component, PropTypes, Transition, View } from '../../libs'; @@ -72,8 +72,7 @@ export default class Suggestions extends Component { 'is-loading': loading })} style={{ - width: dropdownWidth, - zIndex: 1 + width: dropdownWidth }} > , + children: React.Node, value: number | string, max: number, isDot: boolean, diff --git a/src/button/Button.jsx b/src/button/Button.jsx index 54e8f5d43..7cc94532f 100644 --- a/src/button/Button.jsx +++ b/src/button/Button.jsx @@ -1,10 +1,10 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; export default class Button extends Component { - onClick(e: SyntheticEvent): void { + onClick(e: SyntheticEvent): void { if (!this.props.loading) { this.props.onClick && this.props.onClick(e); } diff --git a/src/button/ButtonGroup.jsx b/src/button/ButtonGroup.jsx index 4c8039f40..de5c7a96b 100644 --- a/src/button/ButtonGroup.jsx +++ b/src/button/ButtonGroup.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component } from '../../libs'; export default class ButtonGroup extends Component { diff --git a/src/card/Card.jsx b/src/card/Card.jsx index b51acb2c7..95585fd80 100644 --- a/src/card/Card.jsx +++ b/src/card/Card.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; export default class Card extends Component { diff --git a/src/carousel/Carousel.jsx b/src/carousel/Carousel.jsx index 5428f0ce0..faae9d611 100644 --- a/src/carousel/Carousel.jsx +++ b/src/carousel/Carousel.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import throttle from 'throttle-debounce/throttle'; import { Component, PropTypes, Transition, View } from '../../libs'; import { addResizeListener, removeResizeListener } from '../../libs/utils/resize-event'; diff --git a/src/cascader/Cascader.jsx b/src/cascader/Cascader.jsx index eb24e4d8d..912684f99 100644 --- a/src/cascader/Cascader.jsx +++ b/src/cascader/Cascader.jsx @@ -243,7 +243,7 @@ class Cascader extends Component { return flatOptions; } - clearValue(e: SyntheticEvent) { + clearValue(e: SyntheticEvent) { e.stopPropagation(); this.handlePick([], true); diff --git a/src/cascader/Menu.jsx b/src/cascader/Menu.jsx index da88bfc42..45348be2e 100644 --- a/src/cascader/Menu.jsx +++ b/src/cascader/Menu.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes, Transition, View } from '../../libs'; type State = { diff --git a/src/checkbox/CheckBox.jsx b/src/checkbox/CheckBox.jsx index 2d74be922..4a3f2076c 100644 --- a/src/checkbox/CheckBox.jsx +++ b/src/checkbox/CheckBox.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react' +import * as React from 'react' import { Component, PropTypes } from '../../libs' type State = { @@ -42,7 +42,7 @@ export default class Checkbox extends Component { }); } - onChange(e: SyntheticEvent): void { + onChange(e: SyntheticEvent): void { if (e.target instanceof HTMLInputElement) { const { label } = this.state; const { trueLabel, falseLabel} = this.props; diff --git a/src/checkbox/CheckBoxButton.jsx b/src/checkbox/CheckBoxButton.jsx index e161cf60e..d701ca1d8 100644 --- a/src/checkbox/CheckBoxButton.jsx +++ b/src/checkbox/CheckBoxButton.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import CheckBox from './CheckBox'; export default class CheckboxButton extends CheckBox { diff --git a/src/checkbox/CheckBoxGroup.jsx b/src/checkbox/CheckBoxGroup.jsx index 14afe1726..5274f1762 100644 --- a/src/checkbox/CheckBoxGroup.jsx +++ b/src/checkbox/CheckBoxGroup.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs' type State = { diff --git a/src/collapse/Collapse.jsx b/src/collapse/Collapse.jsx index 53f027acd..06a70c5ee 100644 --- a/src/collapse/Collapse.jsx +++ b/src/collapse/Collapse.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; type State = { diff --git a/src/collapse/CollapseItem.jsx b/src/collapse/CollapseItem.jsx index 8fb67e64b..5ea6ec7fe 100644 --- a/src/collapse/CollapseItem.jsx +++ b/src/collapse/CollapseItem.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes, CollapseTransition } from '../../libs'; export default class CollapseItem extends Component { diff --git a/src/color-picker/ColorPicker.jsx b/src/color-picker/ColorPicker.jsx index 93f30571f..20e11d13f 100644 --- a/src/color-picker/ColorPicker.jsx +++ b/src/color-picker/ColorPicker.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import ClickOutside from 'react-click-outside'; import { Component, PropTypes } from '../../libs'; import PickerDropdown from './components/PickerDropdown'; diff --git a/src/color-picker/Types.js b/src/color-picker/Types.js index 9f9db50e4..6ed32f84b 100644 --- a/src/color-picker/Types.js +++ b/src/color-picker/Types.js @@ -40,6 +40,6 @@ export type SvPanelState = { }; export type DragOptions = { - drag: (event: SyntheticMouseEvent) => void, - end: (event: SyntheticMouseEvent) => void + drag: (event: SyntheticMouseEvent) => void, + end: (event: SyntheticMouseEvent) => void }; diff --git a/src/color-picker/components/AlphaSlider.jsx b/src/color-picker/components/AlphaSlider.jsx index a7d92fe46..1d29d4bd6 100644 --- a/src/color-picker/components/AlphaSlider.jsx +++ b/src/color-picker/components/AlphaSlider.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../../libs'; import draggable from '../draggable'; import type { AlphaSliderState, DragOptions } from '../Types'; @@ -32,7 +32,7 @@ export default class AlphaSlider extends Component { this.update(); } - handleClick(event: SyntheticMouseEvent): void { + handleClick(event: SyntheticMouseEvent): void { const thumb = this.refs.thumb; const target = event.target; if (target !== thumb) { @@ -40,7 +40,7 @@ export default class AlphaSlider extends Component { } } - handleDrag(event: SyntheticMouseEvent): void { + handleDrag(event: SyntheticMouseEvent): void { const { vertical, color } = this.props; const { onChange } = this.context; const rect = this.$el.getBoundingClientRect(); diff --git a/src/color-picker/components/HueSlider.jsx b/src/color-picker/components/HueSlider.jsx index c1df3f436..fb33c1d02 100644 --- a/src/color-picker/components/HueSlider.jsx +++ b/src/color-picker/components/HueSlider.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../../libs'; import draggable from '../draggable'; import type { HueSliderState, DragOptions } from '../Types'; @@ -31,7 +31,7 @@ export default class HueSlider extends Component { this.update(); } - handleClick(event: SyntheticMouseEvent): void { + handleClick(event: SyntheticMouseEvent): void { const thumb = this.refs.thumb; const target = event.target; if (target !== thumb) { @@ -39,7 +39,7 @@ export default class HueSlider extends Component { } } - handleDrag(event: SyntheticMouseEvent): void { + handleDrag(event: SyntheticMouseEvent): void { const rect = this.$el.getBoundingClientRect(); const { thumb } = this.refs; const { vertical, color } = this.props; diff --git a/src/color-picker/components/PickerDropdown.jsx b/src/color-picker/components/PickerDropdown.jsx index 5042e1fdf..1c25448d2 100644 --- a/src/color-picker/components/PickerDropdown.jsx +++ b/src/color-picker/components/PickerDropdown.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import SvPanel from './SvPanel'; import HueSlider from './HueSlider'; import AlphaSlider from './AlphaSlider'; diff --git a/src/color-picker/components/SvPanel.jsx b/src/color-picker/components/SvPanel.jsx index 49387cfab..685dc1741 100644 --- a/src/color-picker/components/SvPanel.jsx +++ b/src/color-picker/components/SvPanel.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../../libs'; import draggable from '../draggable'; import type { SvPanelState, DragOptions } from '../Types'; @@ -52,7 +52,7 @@ export default class SvPanel extends Component { }); } - handleDrag(event: SyntheticMouseEvent): void { + handleDrag(event: SyntheticMouseEvent): void { const { color } = this.props; const { onChange } = this.context; const el = this.$el; diff --git a/src/date-picker/BasePicker.jsx b/src/date-picker/BasePicker.jsx index eae4c8643..629efb15e 100644 --- a/src/date-picker/BasePicker.jsx +++ b/src/date-picker/BasePicker.jsx @@ -199,7 +199,7 @@ export default class BasePicker extends Component { this.props.onBlur(this); } - handleKeydown(evt: SyntheticKeyboardEvent) { + handleKeydown(evt: SyntheticKeyboardEvent) { const keyCode = evt.keyCode; // tab if (keyCode === 9 || keyCode === 27) { @@ -234,7 +234,7 @@ export default class BasePicker extends Component { return true } - handleClickOutside(evt: SyntheticEvent) { + handleClickOutside(evt: SyntheticEvent<*>) { const { value, pickerVisible } = this.state if (!this.isInputFocus && !pickerVisible) { return diff --git a/src/date-picker/Types.js b/src/date-picker/Types.js index 0fc9f5e78..70765788f 100644 --- a/src/date-picker/Types.js +++ b/src/date-picker/Types.js @@ -31,6 +31,13 @@ type Range = [T, Date] type TimeSpinnerSelectableRange = Range[] type TimeSpinnerOnSelectRangeChange = (range: Range)=>void export type TimeTypes = 'hours' | 'minutes' | 'seconds' + +export type TimeTypeProps = { + hours: ?number, + minutes: ?number, + seconds: ?number +} + export type TimeSpinnerProps = { hours: ?number, minutes: ?number, diff --git a/src/date-picker/basic/DateTable.jsx b/src/date-picker/basic/DateTable.jsx index 3ee5d3feb..3be051952 100644 --- a/src/date-picker/basic/DateTable.jsx +++ b/src/date-picker/basic/DateTable.jsx @@ -43,7 +43,7 @@ export default class DateTable extends Component { } - WEEKS() { + WEEKS(): Array { // 0-6 const week = this.getOffsetWeek(); return WEEKS.slice(week).concat(WEEKS.slice(0, week)); @@ -254,7 +254,7 @@ export default class DateTable extends Component { } - handleMouseMove(event: SyntheticMouseEvent) { + handleMouseMove(event: SyntheticMouseEvent) { const {showWeekNumber, onChangeRange, rangeState, selectionMode} = this.props const getDateOfCell = (row, column, showWeekNumber) => { @@ -274,7 +274,7 @@ export default class DateTable extends Component { onChangeRange(rangeState) } - handleClick(event: SyntheticEvent) { + handleClick(event: SyntheticEvent) { let target: any = event.target; if (target.tagName !== 'TD') return; diff --git a/src/date-picker/basic/YearTable.jsx b/src/date-picker/basic/YearTable.jsx index 4c6162e4d..4cc28ba38 100644 --- a/src/date-picker/basic/YearTable.jsx +++ b/src/date-picker/basic/YearTable.jsx @@ -23,7 +23,7 @@ export default class YearTable extends Component { return style; } - handleYearTableClick(event: SyntheticMouseEvent) { + handleYearTableClick(event: SyntheticMouseEvent) { const target: any = event.target; if (target.tagName === 'A') { if (hasClass(target.parentNode, 'disabled')) return; diff --git a/src/date-picker/panel/TimePanel.jsx b/src/date-picker/panel/TimePanel.jsx index fb2d8eb9b..e8a16fdec 100644 --- a/src/date-picker/panel/TimePanel.jsx +++ b/src/date-picker/panel/TimePanel.jsx @@ -5,7 +5,7 @@ import { PropTypes } from '../../../libs'; import { limitRange } from '../utils' import TimeSpinner from '../basic/TimeSpinner' import Locale from '../../locale' -import type {TimePanelProps} from '../Types'; +import type { TimeTypeProps, TimePanelProps } from '../Types'; import { PopperBase } from './PopperBase' const mapPropsToState = (props) => { @@ -57,7 +57,7 @@ export default class TimePanel extends PopperBase { // type: string, one of [hours, minutes, seconds] // date: {type: number} - handleChange(date: {string: number}) { + handleChange(date: TimeTypeProps) { const {currentDate} = this.state if (date.hours !== undefined) { diff --git a/src/date-picker/panel/TimeRangePanel.jsx b/src/date-picker/panel/TimeRangePanel.jsx index da67b10c1..2d54c329b 100644 --- a/src/date-picker/panel/TimeRangePanel.jsx +++ b/src/date-picker/panel/TimeRangePanel.jsx @@ -5,7 +5,7 @@ import { PropTypes } from '../../../libs'; import { limitRange, parseDate } from '../utils'; import TimeSpinner from '../basic/TimeSpinner'; import Locale from '../../locale'; -import type {TimeRangePanelProps } from '../Types'; +import type { TimeTypeProps, TimeRangePanelProps } from '../Types'; import { PopperBase } from './PopperBase' const MIN_TIME = parseDate('00:00:00', 'HH:mm:ss'); @@ -97,7 +97,7 @@ export default class TimeRangePanel extends PopperBase { // type = hours | minutes | seconds // date: {type: number} - handleChange(date: { string: ?number }, field: string) { + handleChange(date: TimeTypeProps, field: string) { const ndate = this.state[field]; if (date.hours !== undefined) { diff --git a/src/dialog/Dialog.jsx b/src/dialog/Dialog.jsx index b0f60f07b..5ce60805f 100644 --- a/src/dialog/Dialog.jsx +++ b/src/dialog/Dialog.jsx @@ -1,6 +1,7 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; +import ReactDOM from 'react-dom'; import { Component, View, Transition, PropTypes } from '../../libs'; type State = { @@ -31,24 +32,22 @@ export default class Dialog extends Component { } componentWillReceiveProps(nextProps: Object): void { - - if (this.willOpen(this.props, nextProps)){ - if (this.props.lockScroll && document.body && document.body.style) { - if (!this.state.bodyOverflow) { - this.setState({ - bodyOverflow: document.body.style.overflow - }); - } - document.body.style.overflow = 'hidden'; + if (this.willOpen(this.props, nextProps)){ + if (this.props.lockScroll && document.body && document.body.style) { + if (!this.state.bodyOverflow) { + this.setState({ + bodyOverflow: document.body.style.overflow + }); } + document.body.style.overflow = 'hidden'; } + } - if (this.willClose(this.props, nextProps) && this.props.lockScroll) { - if (this.props.modal && this.state.bodyOverflow !== 'hidden' && document.body && document.body.style) { - document.body.style.overflow = this.state.bodyOverflow; - } + if (this.willClose(this.props, nextProps) && this.props.lockScroll) { + if (this.props.modal && this.state.bodyOverflow !== 'hidden' && document.body && document.body.style) { + document.body.style.overflow = this.state.bodyOverflow; } - + } } componentDidUpdate(prevProps: Object): void { @@ -63,13 +62,13 @@ export default class Dialog extends Component { } } - onKeyDown(e: SyntheticKeyboardEvent): void { + onKeyDown(e: SyntheticKeyboardEvent): void { if (this.props.closeOnPressEscape && e.keyCode === 27) { this.close(e); } } - handleWrapperClick(e: SyntheticEvent): void { + handleWrapperClick(e: SyntheticEvent): void { if (e.target instanceof HTMLDivElement) { if (this.props.closeOnClickModal && e.target === e.currentTarget) { this.close(e); @@ -77,7 +76,7 @@ export default class Dialog extends Component { } } - close(e: SyntheticEvent | SyntheticKeyboardEvent): void { + close(e: SyntheticEvent | SyntheticKeyboardEvent): void { this.props.onCancel(e); } @@ -89,48 +88,56 @@ export default class Dialog extends Component { return (prevProps.visible && !nextProps.visible); } - render(): React.Element { + render() { const { visible, title, size, top, modal, customClass, showClose } = this.props; - return ( -
- - -
this.handleWrapperClick(e) } - onKeyDown={ e => this.onKeyDown(e) } - > + const body = document.body; + + if (!body) { + return null; + } + + return ReactDOM.createPortal( + ( + + { + modal && ( + +
+ + ) + } + +
this.handleWrapperClick(e) } + onKeyDown={ e => this.onKeyDown(e) } > -
- { title } - { - showClose && ( - - ) - } +
+
+ { title } + { + showClose && ( + + ) + } +
+ { this.props.children }
- { this.props.children }
-
- - - { - modal && ( - -
- - ) - } -
+ + + + ), + body ); } } diff --git a/src/dialog/DialogBody.jsx b/src/dialog/DialogBody.jsx index 8371ac220..d68d4677a 100644 --- a/src/dialog/DialogBody.jsx +++ b/src/dialog/DialogBody.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component } from '../../libs'; export default class DialogBody extends Component { diff --git a/src/dialog/DialogFooter.jsx b/src/dialog/DialogFooter.jsx index 91c48a145..05a384ce3 100644 --- a/src/dialog/DialogFooter.jsx +++ b/src/dialog/DialogFooter.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component } from '../../libs'; export default class DialogFooter extends Component { diff --git a/src/dropdown/Dropdown.jsx b/src/dropdown/Dropdown.jsx index 5a72077f6..dbdc3df36 100644 --- a/src/dropdown/Dropdown.jsx +++ b/src/dropdown/Dropdown.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import ReactDOM from 'react-dom'; import ClickOutside from 'react-click-outside'; import { Component, PropTypes } from '../../libs'; diff --git a/src/dropdown/DropdownItem.jsx b/src/dropdown/DropdownItem.jsx index d62ce3a68..0d9ebf3eb 100644 --- a/src/dropdown/DropdownItem.jsx +++ b/src/dropdown/DropdownItem.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; export default class DropdownItem extends Component { diff --git a/src/dropdown/DropdownMenu.jsx b/src/dropdown/DropdownMenu.jsx index efe3c8227..cbaf214cd 100644 --- a/src/dropdown/DropdownMenu.jsx +++ b/src/dropdown/DropdownMenu.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import ReactDOM from 'react-dom'; import Popper from '../../libs/utils/popper'; import { Component, PropTypes, Transition, View } from '../../libs'; diff --git a/src/form/Form.jsx b/src/form/Form.jsx index 4e1099a21..3d90d88aa 100644 --- a/src/form/Form.jsx +++ b/src/form/Form.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; type State = { diff --git a/src/form/FormItem.jsx b/src/form/FormItem.jsx index 9345d3264..803a52981 100644 --- a/src/form/FormItem.jsx +++ b/src/form/FormItem.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import AsyncValidator from 'async-validator'; import { Component, PropTypes, Transition } from '../../libs'; diff --git a/src/input-number/InputNumber.jsx b/src/input-number/InputNumber.jsx index 1fa5c5c50..74e6c7a85 100644 --- a/src/input-number/InputNumber.jsx +++ b/src/input-number/InputNumber.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; import Input from '../input'; @@ -29,7 +29,7 @@ export default class InputNumber extends Component { } } - onKeyDown(e: SyntheticKeyboardEvent): void { + onKeyDown(e: SyntheticKeyboardEvent): void { switch (e.keyCode) { case 38: // KeyUp e.preventDefault(); diff --git a/src/input/Input.jsx b/src/input/Input.jsx index 3be5a7dff..aa27ff7e0 100644 --- a/src/input/Input.jsx +++ b/src/input/Input.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; import calcTextareaHeight from './calcTextareaHeight' @@ -54,7 +54,7 @@ export default class Input extends Component { return value; } - handleChange(e: SyntheticInputEvent): void { + handleChange(e: SyntheticInputEvent): void { const { onChange } = this.props; if (onChange) { @@ -63,12 +63,12 @@ export default class Input extends Component { this.resizeTextarea(); } - handleFocus(e: SyntheticEvent): void { + handleFocus(e: SyntheticEvent): void { const { onFocus } = this.props; if (onFocus) onFocus(e) } - handleBlur(e: SyntheticEvent): void { + handleBlur(e: SyntheticEvent): void { const { onBlur } = this.props; if (onBlur) onBlur(e) } diff --git a/src/layout/Col.jsx b/src/layout/Col.jsx index 3d88a1019..de9df0847 100644 --- a/src/layout/Col.jsx +++ b/src/layout/Col.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; export default class Col extends Component { diff --git a/src/layout/Row.jsx b/src/layout/Row.jsx index 48deb4561..73ff745ad 100644 --- a/src/layout/Row.jsx +++ b/src/layout/Row.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; export default class Row extends Component { diff --git a/src/loading/Loading.jsx b/src/loading/Loading.jsx index 482df6806..195b512fb 100644 --- a/src/loading/Loading.jsx +++ b/src/loading/Loading.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; export default class Loading extends Component { @@ -13,8 +13,7 @@ export default class Loading extends Component { top?: number, right?: number, bottom?: number, - left?: number, - zIndex?: number + left?: number } { if (this.props.fullscreen) { this.disableScroll(); @@ -24,8 +23,7 @@ export default class Loading extends Component { top: 0, right: 0, bottom: 0, - left: 0, - zIndex: 99999 + left: 0 } } else { this.enableScroll(); @@ -59,12 +57,12 @@ export default class Loading extends Component { return (
+ {this.props.children} { loading && (
)} - {this.props.children}
) } diff --git a/src/menu/Menu.jsx b/src/menu/Menu.jsx index dbb2df2c5..616e1b5ab 100644 --- a/src/menu/Menu.jsx +++ b/src/menu/Menu.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; type State = { diff --git a/src/menu/MenuItem.jsx b/src/menu/MenuItem.jsx index 61b99799c..f22292527 100644 --- a/src/menu/MenuItem.jsx +++ b/src/menu/MenuItem.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { PropTypes } from '../../libs'; import MixinComponent from './MixinComponent'; diff --git a/src/menu/MenuItemGroup.jsx b/src/menu/MenuItemGroup.jsx index 51706433d..f02ab95b9 100644 --- a/src/menu/MenuItemGroup.jsx +++ b/src/menu/MenuItemGroup.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { PropTypes } from '../../libs'; import MixinComponent from './MixinComponent'; diff --git a/src/menu/SubMenu.jsx b/src/menu/SubMenu.jsx index edbbb984e..49ff64936 100644 --- a/src/menu/SubMenu.jsx +++ b/src/menu/SubMenu.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import ReactDOM from 'react-dom'; import { PropTypes, View, Transition, CollapseTransition } from '../../libs'; diff --git a/src/message-box/MessageBox.jsx b/src/message-box/MessageBox.jsx index 2a002c1db..ffe5d73b4 100644 --- a/src/message-box/MessageBox.jsx +++ b/src/message-box/MessageBox.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes, Transition, View } from '../../libs'; import Button from '../button'; import Input from '../input'; @@ -127,7 +127,12 @@ export default class MessageBox extends Component { return (
-
+ + +
+ + +
{ willUnmount && willUnmount() }} @@ -188,11 +193,6 @@ export default class MessageBox extends Component {
- - -
- -
) } diff --git a/src/notification/Notification.jsx b/src/notification/Notification.jsx index 212b99956..cf2687af0 100644 --- a/src/notification/Notification.jsx +++ b/src/notification/Notification.jsx @@ -1,6 +1,7 @@ /* @flow */ import React from 'react'; +import ReactDOM from 'react-dom'; import { Component, PropTypes, Transition, View } from '../../libs'; const typeMap = { @@ -65,7 +66,13 @@ export default class Notification extends Component { } render() { - return ( + const body = document.body; + + if (!body) { + return null; + } + + return ReactDOM.createPortal( { this.offsetHeight = this.rootDOM.offsetHeight; }} @@ -77,8 +84,7 @@ export default class Notification extends Component { ref={(ele) => { this.rootDOM = ele; }} className="el-notification" style={{ - top: this.props.top, - zIndex: 9999 + top: this.props.top }} onMouseEnter={this.stopTimer.bind(this)} onMouseLeave={this.startTimer.bind(this)} @@ -96,7 +102,8 @@ export default class Notification extends Component {
- + , + body ) } } diff --git a/src/pagination/Pager.jsx b/src/pagination/Pager.jsx index b49024d15..5fe8f9716 100644 --- a/src/pagination/Pager.jsx +++ b/src/pagination/Pager.jsx @@ -1,7 +1,6 @@ /* @flow */ -import React from 'react'; -import ReactDOM from 'react-dom'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; type State = { @@ -31,7 +30,7 @@ export default class Pager extends Component { }; } - onPagerClick(e: SyntheticEvent): void { + onPagerClick(e: SyntheticEvent): void { const target = e.target; if (target instanceof HTMLElement) { if (target.tagName === 'UL') { diff --git a/src/pagination/Pagination.jsx b/src/pagination/Pagination.jsx index 26d161786..d12653c1f 100644 --- a/src/pagination/Pagination.jsx +++ b/src/pagination/Pagination.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; import Pager from './Pager'; import Select from '../select'; diff --git a/src/popover/Popover.jsx b/src/popover/Popover.jsx index 6d4e3c136..9cd26b81e 100644 --- a/src/popover/Popover.jsx +++ b/src/popover/Popover.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import ReactDOM from 'react-dom'; import Popper from '../../libs/utils/popper'; import { Component, PropTypes, Transition, View } from '../../libs'; diff --git a/src/progress/Progress.jsx b/src/progress/Progress.jsx index 28b56daa1..2dc8d91d4 100644 --- a/src/progress/Progress.jsx +++ b/src/progress/Progress.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; type PathStyle = { diff --git a/src/radio/Radio.jsx b/src/radio/Radio.jsx index fc14fc7f3..15ef4466a 100644 --- a/src/radio/Radio.jsx +++ b/src/radio/Radio.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; type State = { @@ -29,7 +29,7 @@ export default class Radio extends Component { } } - onChange(e: SyntheticInputEvent) { + onChange(e: SyntheticInputEvent) { const checked = e.target.checked; if (checked) { diff --git a/src/radio/RadioButton.jsx b/src/radio/RadioButton.jsx index f4ce098c5..14977eb30 100644 --- a/src/radio/RadioButton.jsx +++ b/src/radio/RadioButton.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; import Radio from './Radio'; diff --git a/src/rate/Rate.jsx b/src/rate/Rate.jsx index aea5f0848..b792340ce 100644 --- a/src/rate/Rate.jsx +++ b/src/rate/Rate.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; type classMap = { diff --git a/src/select/Select.jsx b/src/select/Select.jsx index abe6a2553..77c13a41b 100644 --- a/src/select/Select.jsx +++ b/src/select/Select.jsx @@ -449,7 +449,7 @@ class Select extends Component { return criteria; } - emptyText(): mixed { + emptyText(): string | boolean | null { const { loading, filterable } = this.props; const { voidRemoteQuery, options, filteredOptionsCount } = this.state; diff --git a/src/slider/Button.jsx b/src/slider/Button.jsx index 316f5094c..68816f27a 100644 --- a/src/slider/Button.jsx +++ b/src/slider/Button.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; import Tooltip from '../tooltip'; @@ -54,7 +54,7 @@ export default class SliderButton extends Component { }); } - onButtonDown(event: SyntheticMouseEvent) { + onButtonDown(event: SyntheticMouseEvent) { if (this.disabled()) return; this.onDragStart(event); @@ -64,7 +64,7 @@ export default class SliderButton extends Component { window.addEventListener('contextmenu', this.onDragEnd.bind(this)); } - onDragStart(event: SyntheticMouseEvent) { + onDragStart(event: SyntheticMouseEvent) { this.setState({ dragging: true, startX: event.clientX, @@ -73,7 +73,7 @@ export default class SliderButton extends Component { }); } - onDragging(event: SyntheticMouseEvent) { + onDragging(event: SyntheticMouseEvent<*>) { if (this.state.dragging) { this.state.currentX = event.clientX; this.state.currentY = event.clientY; diff --git a/src/slider/Slider.jsx b/src/slider/Slider.jsx index e0b4904d2..7bb2cb25e 100644 --- a/src/slider/Slider.jsx +++ b/src/slider/Slider.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; import InputNumber from '../input-number'; @@ -166,7 +166,7 @@ export default class Slider extends Component { this.refs[button].setPosition(percent); } - onSliderClick(event: SyntheticMouseEvent): void { + onSliderClick(event: SyntheticMouseEvent): void { if (this.props.disabled || this.state.dragging) return; if (this.props.vertical) { diff --git a/src/steps/Step.jsx b/src/steps/Step.jsx index 021ad810c..cfafce86b 100644 --- a/src/steps/Step.jsx +++ b/src/steps/Step.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; export default class Step extends Component { diff --git a/src/steps/Steps.jsx b/src/steps/Steps.jsx index 1eedfddb2..cc79ee0e9 100644 --- a/src/steps/Steps.jsx +++ b/src/steps/Steps.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; type StatusType = 'wait' | 'process' | 'finish' | 'error' | 'success'; diff --git a/src/table/FilterPannel.jsx b/src/table/FilterPannel.jsx index 6d56e0367..22fd8064d 100644 --- a/src/table/FilterPannel.jsx +++ b/src/table/FilterPannel.jsx @@ -10,7 +10,6 @@ import local from '../locale'; function getPopupContainer() { const container = document.createElement('div'); container.className = 'el-table-poper'; - container.style.zIndex = 999; document.body.appendChild(container); return container; } diff --git a/src/table/Table.jsx b/src/table/Table.jsx index baad8a9bb..fe71bc190 100644 --- a/src/table/Table.jsx +++ b/src/table/Table.jsx @@ -1,5 +1,5 @@ // @flow -import * as React from 'react'; +import React from 'react'; import { Component, PropTypes } from '../../libs'; import TableHeader from './TableHeader'; import TableBody from './TableBody'; @@ -101,7 +101,7 @@ export default class Table extends Component { } bindRef(key: string) { - return (node: Object) => { this[key] = node; } + return (node: HTMLDivElement | null) => { if (node) this[key] = node; } } render() { diff --git a/src/table/TableBody.jsx b/src/table/TableBody.jsx index d29b1c6ef..9951db049 100644 --- a/src/table/TableBody.jsx +++ b/src/table/TableBody.jsx @@ -1,11 +1,9 @@ // @flow import * as React from 'react'; import { Component, PropTypes } from '../../libs'; -import { getRowIdentity, getValueByPath } from "./utils"; -// import {toDate} from "../date-picker/utils/index"; +import { getRowIdentity } from "./utils"; import Checkbox from '../checkbox'; -import Tag from '../tag'; import type {_Column, TableBodyProps} from "./Types"; @@ -30,25 +28,25 @@ export default class TableBody extends Component { this.context.store.setHoverRow(null); } - handleCellMouseEnter(row: Object, column: _Column, event: SyntheticEvent) { + handleCellMouseEnter(row: Object, column: _Column, event: SyntheticEvent) { this.dispatchEvent('onCellMouseEnter', row, column, event.currentTarget, event) } - handleCellMouseLeave(row: Object, column: _Column, event: SyntheticEvent) { + handleCellMouseLeave(row: Object, column: _Column, event: SyntheticEvent) { this.dispatchEvent('onCellMouseLeave', row, column, event.currentTarget, event) } - handleCellClick(row: Object, column: _Column, event: SyntheticEvent) { + handleCellClick(row: Object, column: _Column, event: SyntheticEvent) { this.dispatchEvent('onCellClick', row, column, event.currentTarget, event) this.dispatchEvent('onRowClick', row, event, column); } - handleCellDbClick(row: Object, column: _Column, event: SyntheticEvent) { + handleCellDbClick(row: Object, column: _Column, event: SyntheticEvent) { this.dispatchEvent('onCellDbClick', row, column, event.currentTarget, event) this.dispatchEvent('onRowDbClick', row, column) } - handleRowContextMenu(row: Object, event: SyntheticEvent) { + handleRowContextMenu(row: Object, event: SyntheticEvent) { this.dispatchEvent('onRowContextMenu', row, event) } diff --git a/src/table/TableHeader.jsx b/src/table/TableHeader.jsx index d929a9333..112b39bf5 100644 --- a/src/table/TableHeader.jsx +++ b/src/table/TableHeader.jsx @@ -39,7 +39,7 @@ export default class TableHeader extends Component { return this.props.store.rightFixedColumns.length; } - handleMouseMove(column: _Column, event: SyntheticMouseEvent) { + handleMouseMove(column: _Column, event: SyntheticMouseEvent) { if (!column.resizable) return; if (column.subColumns && column.subColumns.length) return; @@ -61,7 +61,7 @@ export default class TableHeader extends Component { } } - handleMouseDown(column: _Column, event: SyntheticMouseEvent) { + handleMouseDown(column: _Column, event: SyntheticMouseEvent) { if (this.draggingColumn) { this.dragging = true; @@ -87,14 +87,14 @@ export default class TableHeader extends Component { _document.onselectstart = () => false; _document.ondragstart = () => false; - const handleMouseMove = (event: MouseEvent) => { + const handleMouseMove = (event: SyntheticMouseEvent<*>) => { const deltaLeft = event.clientX - startMouseLeft; const proxyLeft = startLeft + deltaLeft; resizeProxy.style.left = Math.max(minLeft, proxyLeft) + 'px'; }; - const handleMouseUp = (event: MouseEvent) => { + const handleMouseUp = (event: SyntheticMouseEvent<*>) => { if (this.dragging) { const finalLeft = parseInt(resizeProxy.style.left, 10); const columnWidth = finalLeft - startColumnLeft; @@ -128,7 +128,7 @@ export default class TableHeader extends Component { _document.body.style.cursor = ""; } - handleHeaderClick(column: _Column, event: SyntheticEvent) { + handleHeaderClick(column: _Column, event: SyntheticEvent) { if (column.sortable && !column.filters) { this.handleSortClick(column, null, event); } else if (column.filters && !column.sortable) { @@ -138,7 +138,7 @@ export default class TableHeader extends Component { } } - handleSortClick(column: _Column, givenOrder: ?string, event: SyntheticEvent) { + handleSortClick(column: _Column, givenOrder: ?string, event: SyntheticEvent) { event.stopPropagation(); event.nativeEvent.stopImmediatePropagation(); @@ -168,7 +168,7 @@ export default class TableHeader extends Component { this.dispatchEvent('onHeaderClick', column, event) } - handleFilterClick(column: _Column, event: SyntheticEvent) { + handleFilterClick(column: _Column, event: SyntheticEvent) { if (event) { event.stopPropagation(); event.nativeEvent.stopImmediatePropagation(); diff --git a/src/table/Types.js b/src/table/Types.js index af191f380..1fcb45aa1 100644 --- a/src/table/Types.js +++ b/src/table/Types.js @@ -12,18 +12,18 @@ export type Column = { fixed?: true | 'left' | 'right', render?: (row: Object, column: _Column, index: number) => Object, renderHeader?: () => void, - sortable: boolean | 'custom', + sortable?: boolean | 'custom', sortMethod?: (a: Object, b: Object) => boolean, - resizable: boolean, - align: 'left' | 'center' | 'right', - headerAlign: 'left' | 'center' | 'right', + resizable?: boolean, + align?: 'left' | 'center' | 'right', + headerAlign?: 'left' | 'center' | 'right', className?: string, labelClassName?: string, selectable?: (row: Object, index: number) => boolean, - reserveSelection: boolean, + reserveSelection?: boolean, filters?: Array<{ text: any, value: any }>, filterPlacement?: string, - filterMultiple: boolean, + filterMultiple?: boolean, filterMethod?: (value: any, row: Object) => boolean, filteredValue?: Array | strOrNum, subColumns?: Array @@ -39,19 +39,19 @@ export type _Column = { width?: number, minWidth?: number, fixed?: true | 'left' | 'right', - sortable: boolean | 'custom', + sortable?: boolean | 'custom', sortMethod?: (a: Object, b: Object) => boolean, - resizable: boolean, + resizable?: boolean, showOverflowTooltip: boolean, - align: 'left' | 'center' | 'right', - headerAlign: 'left' | 'center' | 'right', + align?: 'left' | 'center' | 'right', + headerAlign?: 'left' | 'center' | 'right', className?: string, labelClassName?: string, selectable?: (row: Object, index: number) => boolean, - reserveSelection: boolean, + reserveSelection?: boolean, filters?: Array<{ text: any, value: any }>, filterPlacement?: string, - filterMultiple: boolean, + filterMultiple?: boolean, filterMethod?: (value: any, row: Object) => boolean, filteredValue?: Array | strOrNum, subColumns?: Array, diff --git a/src/tabs/TabPane.jsx b/src/tabs/TabPane.jsx index 1baf4966d..7ef3a704a 100644 --- a/src/tabs/TabPane.jsx +++ b/src/tabs/TabPane.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; type Props = { diff --git a/src/tabs/Tabs.jsx b/src/tabs/Tabs.jsx index c06fcbd9f..b7c86ac51 100644 --- a/src/tabs/Tabs.jsx +++ b/src/tabs/Tabs.jsx @@ -1,10 +1,11 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes, View } from '../../libs'; +import typeof TabPane from './TabPane'; type Props = { - children: React.Element, + children: TabPane, type: 'card' | 'border-card', activeName: string, value: string, @@ -89,7 +90,7 @@ export default class Tabs extends Component { onTabAdd && onTabAdd(); } - handleTabRemove(tab: React.Element, index: number, e: SyntheticEvent): void { + handleTabRemove(tab: TabPane, index: number, e: SyntheticEvent): void { const { children, currentName } = this.state; const { onTabRemove, onTabEdit } = this.props; @@ -114,7 +115,7 @@ export default class Tabs extends Component { }); } - handleTabClick(tab: React.Element, e: SyntheticEvent): void | boolean { + handleTabClick(tab: TabPane, e: SyntheticEvent): void | boolean { if (tab.props.disabled) { return false; } @@ -273,13 +274,13 @@ export default class Tabs extends Component { const scrollBtn = scrollable ? [ ( this.scrollPrev()} > ), ( this.scrollNext()} > diff --git a/src/tooltip/Tooltip.jsx b/src/tooltip/Tooltip.jsx index 86f757c81..5a7bab481 100644 --- a/src/tooltip/Tooltip.jsx +++ b/src/tooltip/Tooltip.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import Popper from '../../libs/utils/popper'; import { Component, PropTypes, Transition, View } from '../../libs'; diff --git a/src/transfer/Transfer.jsx b/src/transfer/Transfer.jsx index cbf1f2729..8f12b67e9 100644 --- a/src/transfer/Transfer.jsx +++ b/src/transfer/Transfer.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; import Button from '../button'; import TransferPanel from './TransferPanel'; @@ -25,8 +25,8 @@ type Props = { disabled: string }, onChange: Function, - leftFooter?: React.Element, - rightFooter?: React.Element + leftFooter?: React.Node, + rightFooter?: React.Node }; type State = { diff --git a/src/transfer/TransferPanel.jsx b/src/transfer/TransferPanel.jsx index a80053360..59cfe3b40 100644 --- a/src/transfer/TransferPanel.jsx +++ b/src/transfer/TransferPanel.jsx @@ -1,5 +1,5 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes, View } from '../../libs'; import Input from '../input'; import Checkbox from '../checkbox'; @@ -18,7 +18,7 @@ type Props = { checked: Array, hasChecked?: boolean, noChecked?: boolean, - children: React.Element + children: React.Node }; type defaultProps = { diff --git a/src/tree/Node.jsx b/src/tree/Node.jsx index c07758f3d..129bd4cd5 100644 --- a/src/tree/Node.jsx +++ b/src/tree/Node.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import debounce from 'throttle-debounce/debounce'; import { PropTypes, Component, CollapseTransition } from '../../libs'; @@ -128,7 +128,7 @@ export default class Node extends Component { } - handleClick(evt: ?SyntheticEvent): void { + handleClick(evt: ?SyntheticEvent): void { if (evt) evt.stopPropagation(); const { nodeModel, treeNode } = this.props; @@ -138,7 +138,7 @@ export default class Node extends Component { } } - handleExpandIconClick(evt: ?SyntheticEvent): void { + handleExpandIconClick(evt: ?SyntheticEvent): void { if (evt) evt.stopPropagation(); const { nodeModel, parent } = this.props; diff --git a/src/tree/Tree.jsx b/src/tree/Tree.jsx index 90849239f..af5eea3d5 100644 --- a/src/tree/Tree.jsx +++ b/src/tree/Tree.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { PropTypes, Component } from '../../libs'; import { require_condition } from '../../libs/utils'; import Node from './Node'; diff --git a/src/upload/AjaxUpload.jsx b/src/upload/AjaxUpload.jsx index badb1b6e9..fc4730bcd 100644 --- a/src/upload/AjaxUpload.jsx +++ b/src/upload/AjaxUpload.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; import ajax from './ajax'; import Cover from './Cover'; @@ -19,7 +19,7 @@ export default class AjaxUpload extends Component { return str.indexOf('image') !== -1; } - handleChange(e: SyntheticEvent): void { + handleChange(e: SyntheticEvent): void { if (e.target instanceof HTMLInputElement) { const files = e.target.files; if (!files) { @@ -111,11 +111,12 @@ export default class AjaxUpload extends Component { })} onClick={() => this.handleClick()} > - {drag - ? this.uploadFiles(file)}> - {this.props.children} - - : this.props.children} + {drag ? + this.uploadFiles(file)}> + {this.props.children} + : + this.props.children + } ): void { e.preventDefault(); this.setState({ dragOver: true }); } - handleDragleave(e: SyntheticDragEvent): void { + handleDragleave(e: SyntheticDragEvent): void { e.preventDefault(); this.setState({ dragOver: false }); } - onDrop(e: SyntheticDragEvent): void { + onDrop(e: SyntheticDragEvent): void { e.preventDefault(); this.setState({ dragOver: false }); this.props.onFile(e.dataTransfer.files); diff --git a/src/upload/Upload.jsx b/src/upload/Upload.jsx index 34170902a..dc6987d62 100644 --- a/src/upload/Upload.jsx +++ b/src/upload/Upload.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; import UploadList from './UploadList'; import iFrameUpload from './iFrameUpload'; diff --git a/src/upload/UploadList.jsx b/src/upload/UploadList.jsx index 262f644f6..8e3bb50e2 100644 --- a/src/upload/UploadList.jsx +++ b/src/upload/UploadList.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes, Transition, View } from '../../libs'; import { Progress } from '../../src'; diff --git a/src/upload/iFrameUpload.jsx b/src/upload/iFrameUpload.jsx index dd89270b9..cbe5791c4 100644 --- a/src/upload/iFrameUpload.jsx +++ b/src/upload/iFrameUpload.jsx @@ -1,6 +1,6 @@ /* @flow */ -import React from 'react'; +import * as React from 'react'; import { Component, PropTypes } from '../../libs'; import Cover from './Cover'; import type { IframeUploadState } from './Types'; @@ -45,13 +45,13 @@ export default class IframeUpload extends Component { this.setState({ disabled: false }); } - onDrop(e: SyntheticDragEvent): void { + onDrop(e: SyntheticDragEvent): void { e.preventDefault(); this.setState({ dragOver: false }); this.uploadFiles(e.dataTransfer.files); // TODO } - handleChange(e: SyntheticInputEvent): void { + handleChange(e: SyntheticInputEvent): void { if (e.target instanceof HTMLInputElement) { const file: File = e.target.files[0]; if (file) { @@ -85,12 +85,12 @@ export default class IframeUpload extends Component { } } - handleDragover(e: SyntheticDragEvent): void { + handleDragover(e: SyntheticDragEvent): void { e.preventDefault(); this.setState({ onDrop: true }); } - handleDragleave(e: SyntheticDragEvent): void { + handleDragleave(e: SyntheticDragEvent): void { e.preventDefault(); this.setState({ onDrop: false }); } diff --git a/typings/typing-tests/tsconfig.json b/typings/typing-tests/tsconfig.json index 0598d3e07..180301180 100644 --- a/typings/typing-tests/tsconfig.json +++ b/typings/typing-tests/tsconfig.json @@ -2,6 +2,7 @@ "compileOnSave": false, "compilerOptions": { "module": "es2015", + "moduleResolution": "node", "noEmit": true, "jsx": "react" },