From d275231848a1b3ae92a5bcb163d870b673e10f9a Mon Sep 17 00:00:00 2001 From: manjiz <25199230@qq.com> Date: Fri, 1 Jun 2018 15:24:48 +0800 Subject: [PATCH] style(tcr): flow error --- packages/taro-components-rn/README.md | 4 ++ .../src/components/Button/index.js | 8 +-- .../src/components/Checkbox/checkbox-group.js | 9 ++-- .../src/components/Checkbox/index.js | 11 ++-- .../src/components/Icon/index.js | 8 +-- .../src/components/Image/index.js | 7 +-- .../Progress/ProgressBar.android.js | 49 ------------------ .../components/Progress/ProgressBar.ios.js | 50 ------------------- .../src/components/Progress/index.js | 17 ++++--- .../src/components/Swiper/DataSource.js | 11 ---- .../src/components/Swiper/index.js | 22 ++++---- .../src/components/Switch/index.js | 12 ++--- .../src/components/Text/index.js | 4 +- .../src/components/View/index.js | 4 +- .../src/components/_Clickable/index.js | 6 +-- 15 files changed, 59 insertions(+), 163 deletions(-) delete mode 100644 packages/taro-components-rn/src/components/Progress/ProgressBar.android.js delete mode 100644 packages/taro-components-rn/src/components/Progress/ProgressBar.ios.js delete mode 100644 packages/taro-components-rn/src/components/Swiper/DataSource.js diff --git a/packages/taro-components-rn/README.md b/packages/taro-components-rn/README.md index ea4f6cf8aa9a..f6b1de4f5225 100644 --- a/packages/taro-components-rn/README.md +++ b/packages/taro-components-rn/README.md @@ -61,3 +61,7 @@ cp -rf src AwesomeProjectDir/src/tcr - [ ] camera - 其他 - [ ] tabbar + +## D~ + +[flow type annotation for children react elements](https://stackoverflow.com/a/42887802) diff --git a/packages/taro-components-rn/src/components/Button/index.js b/packages/taro-components-rn/src/components/Button/index.js index f6f151b68477..a38c8d408ac3 100644 --- a/packages/taro-components-rn/src/components/Button/index.js +++ b/packages/taro-components-rn/src/components/Button/index.js @@ -31,7 +31,7 @@ * @flow */ -import React, { Component } from 'react' +import * as React from 'react' import { TouchableOpacity, Text, @@ -46,8 +46,8 @@ import styles from './styles' type Props = { style?: StyleSheet.Styles, children?: React.Node, - size?: 'default' | 'mini', - type?: 'primary' | 'default' | 'warn', + size: 'default' | 'mini', + type: 'primary' | 'default' | 'warn', plain?: boolean, disabled?: boolean, loading?: boolean, @@ -57,7 +57,7 @@ type State = { valve: Animated.Value } -class _Button extends Component { +class _Button extends React.Component { props: Props static defaultProps = { diff --git a/packages/taro-components-rn/src/components/Checkbox/checkbox-group.js b/packages/taro-components-rn/src/components/Checkbox/checkbox-group.js index f4f4167da57f..7162a0f21c81 100644 --- a/packages/taro-components-rn/src/components/Checkbox/checkbox-group.js +++ b/packages/taro-components-rn/src/components/Checkbox/checkbox-group.js @@ -6,7 +6,7 @@ * @flow */ -import React, { Component } from 'react' +import * as React from 'react' import { View, StyleSheet @@ -18,18 +18,19 @@ type Props = { onChange?: Function } -class _CheckboxGroup extends Component { +class _CheckboxGroup extends React.Component { props: Props values: Array<{ value: any, checked: boolean }> = [] // checkboxs: React.Node = [] - toggleChange = (e, index) => { + toggleChange = (e: { value: string, checked: boolean }, index: number) => { + const { onChange } = this.props this.values[index] = { value: e.value, checked: e.checked } - this.props.onChange({ + onChange && onChange({ detail: { value: this.values.filter((item) => item && item.checked).map((item) => item.value) } diff --git a/packages/taro-components-rn/src/components/Checkbox/index.js b/packages/taro-components-rn/src/components/Checkbox/index.js index 3fbe55aaaf54..4ed800a0cd0c 100644 --- a/packages/taro-components-rn/src/components/Checkbox/index.js +++ b/packages/taro-components-rn/src/components/Checkbox/index.js @@ -9,7 +9,7 @@ * @flow */ -import React, { Component } from 'react' +import * as React from 'react' import { View, TouchableWithoutFeedback, @@ -21,22 +21,21 @@ import styles from './styles' type Props = { style?: StyleSheet.Styles, onChange?: Function, - value?: string, + value: string, disabled?: boolean, checked?: boolean, - color?: string + // @todo + color?: string | number } type State = { checked: boolean } -class _Checkbox extends Component { +class _Checkbox extends React.Component { props: Props static defaultProps = { value: '', - disabled: false, - checked: false } state: State = { diff --git a/packages/taro-components-rn/src/components/Icon/index.js b/packages/taro-components-rn/src/components/Icon/index.js index 9906895cf61e..27fc3a64c1e6 100644 --- a/packages/taro-components-rn/src/components/Icon/index.js +++ b/packages/taro-components-rn/src/components/Icon/index.js @@ -13,7 +13,7 @@ * @flow */ -import React, { Component } from 'react' +import * as React from 'react' import { View, ART, @@ -37,11 +37,11 @@ const iconTypeMap: Object = { type Props = { style?: StyleSheet.Styles, type: 'success' | 'success_no_circle' | 'info' | 'warn' | 'waiting' | 'cancel' | 'download' | 'search' | 'clear', - size?: number, - color?: string | number, + size: number, + color: string | number, } -class _Icon extends Component { +class _Icon extends React.Component { props: Props static defaultProps = { diff --git a/packages/taro-components-rn/src/components/Image/index.js b/packages/taro-components-rn/src/components/Image/index.js index b4a49c81df70..4a058addad4b 100644 --- a/packages/taro-components-rn/src/components/Image/index.js +++ b/packages/taro-components-rn/src/components/Image/index.js @@ -14,9 +14,10 @@ * @flow */ -import React, { Component } from 'react' +import * as React from 'react' import { Image, + StyleSheet, } from 'react-native' import Clickable from '../_Clickable' @@ -30,12 +31,12 @@ const resizeModeMap: Object = { type Props = { style?: StyleSheet.Styles, src?: string, - mode?: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right', + mode: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right', binderror?: Function, bindload?: Function, } -class _Image extends Component { +class _Image extends React.Component { props: Props static defaultProps = { diff --git a/packages/taro-components-rn/src/components/Progress/ProgressBar.android.js b/packages/taro-components-rn/src/components/Progress/ProgressBar.android.js deleted file mode 100644 index 80df348bfbeb..000000000000 --- a/packages/taro-components-rn/src/components/Progress/ProgressBar.android.js +++ /dev/null @@ -1,49 +0,0 @@ -/** - * @flow - */ - -import React, { Component } from 'react' -import { - ProgressBarAndroid, -} from 'react-native' - -type Props = { - percent?: number, - strokeWidth?: number, - activeColor?: string, - backgroundColor?: string, - active?: boolean, - activeMode?: 'backwards' | 'forwards', -} - -class _ProgressBar extends Component { - props: Props - - static defaultProps = { - percent: 0, - strokeWidth: 6, - activeColor: '#09BB07', - backgroundColor: '#EBEBEB', - activeMode: 'backwards', - } - - render () { - const { - // percent, - // strokeWidth, - activeColor, - // backgroundColor, - // active, - // activeMode, - } = this.props - - return ( - - ) - } -} - -export default _ProgressBar diff --git a/packages/taro-components-rn/src/components/Progress/ProgressBar.ios.js b/packages/taro-components-rn/src/components/Progress/ProgressBar.ios.js deleted file mode 100644 index 60445c894e70..000000000000 --- a/packages/taro-components-rn/src/components/Progress/ProgressBar.ios.js +++ /dev/null @@ -1,50 +0,0 @@ -/** - * @flow - */ - -import React, { Component } from 'react' -import { - ProgressViewIOS, -} from 'react-native' - -type Props = { - percent?: number, - strokeWidth?: number, - activeColor?: string, - backgroundColor?: string, - active?: boolean, - activeMode?: 'backwards' | 'forwards', -} - -class _ProgressBar extends Component { - props: Props - - static defaultProps = { - percent: 0, - strokeWidth: 6, - activeColor: '#09BB07', - backgroundColor: '#EBEBEB', - activeMode: 'backwards', - } - - render () { - const { - percent, - // strokeWidth, - activeColor, - backgroundColor, - // active, - // activeMode, - } = this.props - - return ( - - ) - } -} - -export default _ProgressBar diff --git a/packages/taro-components-rn/src/components/Progress/index.js b/packages/taro-components-rn/src/components/Progress/index.js index 5f69cd2b5104..0ba0b6650755 100644 --- a/packages/taro-components-rn/src/components/Progress/index.js +++ b/packages/taro-components-rn/src/components/Progress/index.js @@ -24,30 +24,31 @@ * @flow */ -import React, { Component } from 'react' +import * as React from 'react' import { View, Text, Animated, Easing, + StyleSheet, } from 'react-native' import styles from './styles' type Props = { style?: StyleSheet.Styles, - percent?: number, + percent: number, showInfo?: boolean, - strokeWidth?: number, - activeColor?: string, - backgroundColor?: string, + strokeWidth: number, + activeColor: string, + backgroundColor: string, active?: boolean, - activeMode?: 'backwards' | 'forwards', + activeMode: 'backwards' | 'forwards', } type State = { valve: Animated.Value } -class _Progress extends Component { +class _Progress extends React.Component { props: Props state: State = { valve: new Animated.Value(0) @@ -61,7 +62,7 @@ class _Progress extends Component { activeMode: 'backwards', } - animate = (nextPercent = 0, nowPercent = 0) => { + animate = (nextPercent: number = 0, nowPercent: number = 0) => { const { active, activeMode } = this.props const toValve = nextPercent / 100 diff --git a/packages/taro-components-rn/src/components/Swiper/DataSource.js b/packages/taro-components-rn/src/components/Swiper/DataSource.js deleted file mode 100644 index 100bc06d68ec..000000000000 --- a/packages/taro-components-rn/src/components/Swiper/DataSource.js +++ /dev/null @@ -1,11 +0,0 @@ -type Params = { - -} - -class SwiperDataSource { - constructor (params: Params) { - - } -} - -export default SwiperDataSource diff --git a/packages/taro-components-rn/src/components/Swiper/index.js b/packages/taro-components-rn/src/components/Swiper/index.js index 22e3b7788a91..6cb4b46022ca 100644 --- a/packages/taro-components-rn/src/components/Swiper/index.js +++ b/packages/taro-components-rn/src/components/Swiper/index.js @@ -19,31 +19,31 @@ * @flow */ -import React, { Component } from 'react' +import * as React from 'react' import { - Text, - View, + // Text, + // View, StyleSheet, } from 'react-native' import Swiper from 'react-native-swiper' -import styles from './styles' +// import styles from './styles' type Props = { children?: React.Node, style?: StyleSheet.Styles, indicatorDots?: boolean, - indicatorColor?: string, - indicatorActiveColor?: string, + indicatorColor: string | number, + indicatorActiveColor: string | number, autoplay?: boolean, - current?: number, - interval?: number, + current: number, + interval: number, circular?: boolean, vertical?: boolean, onChange?: Function, onAnimationFinish?: Function, } -class _Swiper extends Component { +class _Swiper extends React.Component { props: Props static defaultProps = { @@ -53,7 +53,7 @@ class _Swiper extends Component { interval: 5000, } - onIndexChanged = (index) => { + onIndexChanged = (index: number) => { const { onChange } = this.props onChange && onChange({ detail: { current: index } }) } @@ -61,7 +61,7 @@ class _Swiper extends Component { /** * e, state, context(ref to swiper's this) */ - onMomentumScrollEnd = (e, state) => { + onMomentumScrollEnd = (e: any, state: { index: number }) => { const { onAnimationFinish } = this.props onAnimationFinish && onAnimationFinish({ detail: { current: state.index } }) } diff --git a/packages/taro-components-rn/src/components/Switch/index.js b/packages/taro-components-rn/src/components/Switch/index.js index d045ba986be8..cec8b1b4c87a 100644 --- a/packages/taro-components-rn/src/components/Switch/index.js +++ b/packages/taro-components-rn/src/components/Switch/index.js @@ -16,7 +16,7 @@ * @flow */ -import React, { Component } from 'react' +import * as React from 'react' import { Switch, StyleSheet, @@ -26,15 +26,15 @@ import Checkbox from '../Checkbox' type Props = { style?: StyleSheet.Styles, checked?: boolean, - type?: 'switch' | 'checkbox', + type: 'switch' | 'checkbox', onChange?: Function, - color?: string + color: string | number } type State = { checked: boolean } -class _Switch extends Component { +class _Switch extends React.Component { props: Props static defaultProps = { @@ -46,13 +46,13 @@ class _Switch extends Component { checked: !!this.props.checked } - onCheckedChange = (isChecked) => { + onCheckedChange = (isChecked: boolean) => { const { onChange } = this.props onChange && onChange(isChecked) this.setState({ checked: isChecked }) } - onCheckboxToggle = (item) => { + onCheckboxToggle = (item: { checked: boolean }) => { this.onCheckedChange(item.checked) } diff --git a/packages/taro-components-rn/src/components/Text/index.js b/packages/taro-components-rn/src/components/Text/index.js index 14b896d51b00..52ff3c99f43c 100644 --- a/packages/taro-components-rn/src/components/Text/index.js +++ b/packages/taro-components-rn/src/components/Text/index.js @@ -6,7 +6,7 @@ * @flow */ -import React, { Component } from 'react' +import * as React from 'react' import { Text, StyleSheet, @@ -18,7 +18,7 @@ type Props = { selectable?: boolean, } -class _Text extends Component { +class _Text extends React.Component { props: Props render () { diff --git a/packages/taro-components-rn/src/components/View/index.js b/packages/taro-components-rn/src/components/View/index.js index 20bb1385bf58..cf61c08371fb 100644 --- a/packages/taro-components-rn/src/components/View/index.js +++ b/packages/taro-components-rn/src/components/View/index.js @@ -24,7 +24,7 @@ * @flow */ -import React, { Component } from 'react' +import * as React from 'react' import { View, StyleSheet, @@ -56,7 +56,7 @@ type State = { hover: boolean, } -class _View extends Component { +class _View extends React.Component { props: Props timer: TimeoutID state = { diff --git a/packages/taro-components-rn/src/components/_Clickable/index.js b/packages/taro-components-rn/src/components/_Clickable/index.js index a5d3f37c0f4d..4834ec0406f5 100644 --- a/packages/taro-components-rn/src/components/_Clickable/index.js +++ b/packages/taro-components-rn/src/components/_Clickable/index.js @@ -2,7 +2,7 @@ * @flow */ -import React, { Component } from 'react' +import * as React from 'react' import { View, TouchableWithoutFeedback, @@ -15,8 +15,8 @@ type Props = { onClick?: Function } -export default function (WrappedComponent) { - return class _Clickable extends Component { +export default function (WrappedComponent: React.ComponentType<*>) { + return class _Clickable extends React.Component { props: Props render () {