From 5a2d0d57a796ca739cb22306d48377ea5a2c27c3 Mon Sep 17 00:00:00 2001 From: Qibang Date: Fri, 11 May 2018 16:22:43 +0800 Subject: [PATCH] fix: type definitions #2398 (#2407) * revert(button): rest props (#2404) * fix: type definitions #2398 * chore: revert button * fix: type definitions * fix: miss * refactor: revert button --- components/button/index.native.tsx | 16 -------- components/card/PropsType.tsx | 8 ++-- components/date-picker/PropsType.tsx | 6 +-- components/input-item/PropsType.tsx | 2 +- components/list/PropsType.tsx | 4 +- components/modal/AlertContainer.native.tsx | 15 +++----- components/modal/Modal.native.tsx | 3 +- components/modal/Modal.tsx | 29 +++++++++++++-- .../modal/OperationContainer.native.tsx | 13 ++----- components/modal/PromptContainer.native.tsx | 7 ++-- components/modal/PropsType.tsx | 37 +++---------------- components/modal/alert.native.tsx | 4 +- components/modal/alert.tsx | 6 +-- components/modal/operation.tsx | 2 +- components/modal/prompt.native.tsx | 7 ++-- components/modal/prompt.tsx | 6 +-- 16 files changed, 70 insertions(+), 95 deletions(-) diff --git a/components/button/index.native.tsx b/components/button/index.native.tsx index f9cd833a96..a84f90d21e 100644 --- a/components/button/index.native.tsx +++ b/components/button/index.native.tsx @@ -84,25 +84,9 @@ export default class Button extends React.Component { loading, ...restProps, } = this.props; - // can not understand this line. // tslint:disable-next-line:variable-name const _styles: any = styles!; - // unnecessary see line: 134 - // [ - // 'activeOpacity', - // 'underlayColor', - // 'onPress', - // 'onPressIn', - // 'onPressOut', - // 'onShowUnderlay', - // 'onHideUnderlay', - // ].forEach(prop => { - // if (restProps.hasOwnProperty(prop)) { - // delete restProps[prop]; - // } - // }); - const textStyle = [ _styles[`${size}RawText`], _styles[`${type}RawText`], diff --git a/components/card/PropsType.tsx b/components/card/PropsType.tsx index 1e2343a415..bbf2802d76 100644 --- a/components/card/PropsType.tsx +++ b/components/card/PropsType.tsx @@ -5,13 +5,13 @@ export interface CardPropsType { } export interface CardHeaderPropsType { - title?: JSX.Element; + title?: React.ReactNode; /** need url of img, if this is string. */ thumb?: React.ReactNode; - extra?: JSX.Element; + extra?: React.ReactNode; } export interface CardFooterPropsType { - content?: JSX.Element; - extra?: JSX.Element; + content?: React.ReactNode; + extra?: React.ReactNode; } diff --git a/components/date-picker/PropsType.tsx b/components/date-picker/PropsType.tsx index 145253e6fb..6cfe0d4105 100644 --- a/components/date-picker/PropsType.tsx +++ b/components/date-picker/PropsType.tsx @@ -29,8 +29,8 @@ export interface DatePickerPropsType { extra?: string; children?: React.ReactNode; /** React.ReactElement only for web */ - dismissText?: JSX.Element; + dismissText?: React.ReactNode; /** React.ReactElement only for web */ - okText?: JSX.Element; - title?: JSX.Element; + okText?: React.ReactNode; + title?: React.ReactNode; } diff --git a/components/input-item/PropsType.tsx b/components/input-item/PropsType.tsx index eb586c58f2..32723b17a9 100644 --- a/components/input-item/PropsType.tsx +++ b/components/input-item/PropsType.tsx @@ -31,7 +31,7 @@ export interface InputItemPropsType { updatePlaceholder?: boolean; styles?: any; locale?: object; - onChange?: InputEventHandler; + onChange?: (value: string) => void; onFocus?: InputEventHandler; onBlur?: InputEventHandler; } diff --git a/components/list/PropsType.tsx b/components/list/PropsType.tsx index 52503abaa9..32c52919b2 100644 --- a/components/list/PropsType.tsx +++ b/components/list/PropsType.tsx @@ -1,8 +1,8 @@ import React, { ReactNode } from 'react'; // export type ListType = JSX.Element export interface ListPropsType { - renderHeader?: () => React.ReactType | JSX.Element; - renderFooter?: () => React.ReactType | JSX.Element; + renderHeader?: (() => React.ReactType) | string | JSX.Element; + renderFooter?: (() => React.ReactType) | string | JSX.Element; children?: false | JSX.Element | JSX.Element[]; } diff --git a/components/modal/AlertContainer.native.tsx b/components/modal/AlertContainer.native.tsx index ff98240caa..ddfac505ac 100644 --- a/components/modal/AlertContainer.native.tsx +++ b/components/modal/AlertContainer.native.tsx @@ -1,18 +1,13 @@ /* tslint:disable:jsx-no-multiline-js */ import React from 'react'; -import { ScrollView, StyleProp, Text, TextStyle } from 'react-native'; +import { ScrollView, Text, TextStyle } from 'react-native'; import Modal from './Modal.native'; - -export interface AlertButtonType { - text: string; - onPress?: () => void | Promise; - style?: StyleProp; -} +import { Action } from './PropsType'; export interface AlertContainerProps { - title: JSX.Element; - content: JSX.Element; - actions: AlertButtonType[]; + title: React.ReactNode; + content: React.ReactNode; + actions: Action[]; onAnimationEnd?: (visible: boolean) => void; } diff --git a/components/modal/Modal.native.tsx b/components/modal/Modal.native.tsx index 9e5812403f..81185a99aa 100644 --- a/components/modal/Modal.native.tsx +++ b/components/modal/Modal.native.tsx @@ -10,6 +10,7 @@ import { TouchableWithoutFeedback, View, ViewStyle, + TextStyle, } from 'react-native'; import RCModal from 'rmc-dialog/lib/Modal'; import { ModalPropsType } from './PropsType'; @@ -21,7 +22,7 @@ const maxHeight = StyleSheet.create({ }, }).maxHeight; -export interface IModalNativeProps extends ModalPropsType { +export interface IModalNativeProps extends ModalPropsType { styles?: IModalStyle; style?: StyleProp; bodyStyle?: StyleProp; diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index 7a0865a669..7e70ebd125 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -2,9 +2,32 @@ import classnames from 'classnames'; import React from 'react'; import Dialog from 'rmc-dialog'; import TouchFeedback from 'rmc-feedback'; -import { Action, ModalComponent, ModalPropsType } from './PropsType'; +import { Action, ModalPropsType, CallbackOrActions } from './PropsType'; +export abstract class ModalComponent extends React.Component { + static alert: ( + title: React.ReactNode, + message: React.ReactNode, + actions?: Action[], + platform?: string, + ) => { close: () => void }; -export interface ModalProps extends ModalPropsType { + static prompt: ( + title: React.ReactNode, + message: React.ReactNode, + callbackOrActions: CallbackOrActions, + type?: 'default' | 'secure-text' | 'login-password', + defaultValue?: string, + placeholders?: string[], + platform?: string, + ) => { close: () => void }; + + static operation: ( + actions?: Action[], + platform?: string, + ) => { close: () => void }; +} + +export interface ModalProps extends ModalPropsType { prefixCls?: string; transitionName?: string; maskTransitionName?: string; @@ -31,7 +54,7 @@ export default class Modal extends ModalComponent { platform: 'ios', }; - renderFooterButton(button: Action, prefixCls: string | undefined, i: number) { + renderFooterButton(button: Action, prefixCls: string | undefined, i: number) { let buttonStyle = {}; if (button.style) { buttonStyle = button.style; diff --git a/components/modal/OperationContainer.native.tsx b/components/modal/OperationContainer.native.tsx index bf1da6215e..6667298fb6 100644 --- a/components/modal/OperationContainer.native.tsx +++ b/components/modal/OperationContainer.native.tsx @@ -1,16 +1,11 @@ import React from 'react'; -import { StyleProp, TextStyle } from 'react-native'; -import Modal from './Modal'; +import { TextStyle } from 'react-native'; +import Modal from './Modal.native'; import modalStyle from './style/index.native'; - -export interface OperationButtonType { - text: string; - onPress?: () => void; - style?: StyleProp; -} +import { Action } from './PropsType'; export interface OperationContainerProps { - actions: OperationButtonType[]; + actions: Action[]; onAnimationEnd?: (visible: boolean) => void; } diff --git a/components/modal/PromptContainer.native.tsx b/components/modal/PromptContainer.native.tsx index 0c9e58d83e..ca2a9025ea 100644 --- a/components/modal/PromptContainer.native.tsx +++ b/components/modal/PromptContainer.native.tsx @@ -6,17 +6,18 @@ import { Text, TextInput, View, + TextStyle, } from 'react-native'; import Modal from './Modal'; import { CallbackOrActions } from './PropsType'; import promptStyle, { IPromptStyle } from './style/prompt.native'; export interface PropmptContainerProps { - title: JSX.Element; - message?: JSX.Element; + title: React.ReactNode; + message?: React.ReactNode; type?: 'default' | 'login-password' | 'secure-text'; defaultValue?: string; - actions: CallbackOrActions; + actions: CallbackOrActions; onAnimationEnd?: (visible: boolean) => void; styles?: IPromptStyle; placeholders?: string[]; diff --git a/components/modal/PropsType.tsx b/components/modal/PropsType.tsx index da8021b883..d86629a06b 100644 --- a/components/modal/PropsType.tsx +++ b/components/modal/PropsType.tsx @@ -1,12 +1,10 @@ import React from 'react'; -import { StyleProp, TextStyle } from 'react-native'; - -export interface ModalPropsType { - title?: JSX.Element; +export interface ModalPropsType { + title?: React.ReactNode; visible: boolean; maskClosable?: boolean; closable?: boolean; - footer?: Action[]; + footer?: Action[]; onClose?: () => void; transparent?: boolean; popup?: boolean; @@ -17,34 +15,11 @@ export interface ModalPropsType { operation?: boolean; } -export interface Action { +export interface Action { text: string; onPress?: () => void | Promise; - style?: React.CSSProperties | StyleProp | string; + style?: T | string; } export type Callback = (valueOrLogin: string, password?: string) => void; -export type CallbackOrActions = Callback | Action[]; -export abstract class ModalComponent extends React.Component { - static alert: ( - title: JSX.Element, - message: JSX.Element, - actions?: Action[], - platform?: string, - ) => { close: () => void }; - - static prompt: ( - title: JSX.Element, - message: JSX.Element, - callbackOrActions: CallbackOrActions, - type?: 'default' | 'secure-text' | 'login-password', - defaultValue?: string, - placeholders?: string[], - platform?: string, - ) => { close: () => void }; - - static operation: ( - actions?: Action[], - platform?: string, - ) => { close: () => void }; -} +export type CallbackOrActions = Callback | Action[]; diff --git a/components/modal/alert.native.tsx b/components/modal/alert.native.tsx index 8dbd21da9a..4d125d04a1 100644 --- a/components/modal/alert.native.tsx +++ b/components/modal/alert.native.tsx @@ -3,8 +3,8 @@ import topView from 'rn-topview'; import AlertContainer from './AlertContainer.native'; export default function a( - title: JSX.Element, - content: JSX.Element, + title: React.ReactNode, + content: React.ReactNode, actions = [{ text: '确定' }], ) { const onAnimationEnd = (visible: boolean) => { diff --git a/components/modal/alert.tsx b/components/modal/alert.tsx index 1c4508a676..5f1c3633c3 100644 --- a/components/modal/alert.tsx +++ b/components/modal/alert.tsx @@ -5,8 +5,8 @@ import Modal from './Modal'; import { Action } from './PropsType'; export default function alert( - title: JSX.Element, - message: JSX.Element, + title: React.ReactNode, + message: React.ReactNode, actions = [{ text: '确定' }], platform = 'ios', ) { @@ -29,7 +29,7 @@ export default function alert( } } - const footer = actions.map((button: Action) => { + const footer = actions.map((button: Action) => { // tslint:disable-next-line:only-arrow-functions const orginPress = button.onPress || function() {}; button.onPress = () => { diff --git a/components/modal/operation.tsx b/components/modal/operation.tsx index 443eb32f3b..56a3adae49 100644 --- a/components/modal/operation.tsx +++ b/components/modal/operation.tsx @@ -21,7 +21,7 @@ export default function operation( } } - const footer = actions.map((button: Action) => { + const footer = actions.map((button: Action) => { // tslint:disable-next-line:only-arrow-functions const orginPress = button.onPress || function() {}; button.onPress = () => { diff --git a/components/modal/prompt.native.tsx b/components/modal/prompt.native.tsx index 00519ac0af..167c094f02 100644 --- a/components/modal/prompt.native.tsx +++ b/components/modal/prompt.native.tsx @@ -2,11 +2,12 @@ import React from 'react'; import topView from 'rn-topview'; import PromptContainer from './PromptContainer.native'; import { CallbackOrActions } from './PropsType'; +import { TextStyle } from 'react-native'; export default function prompt( - title: JSX.Element, - message: JSX.Element, - callbackOrActions: CallbackOrActions, + title: React.ReactNode, + message: React.ReactNode, + callbackOrActions: CallbackOrActions, type = 'default', defaultValue = '', placeholders = ['', ''], diff --git a/components/modal/prompt.tsx b/components/modal/prompt.tsx index 421ec1a268..278f49c662 100644 --- a/components/modal/prompt.tsx +++ b/components/modal/prompt.tsx @@ -5,9 +5,9 @@ import Modal from './Modal'; import { CallbackOrActions } from './PropsType'; export default function prompt( - title: JSX.Element, - message: JSX.Element, - callbackOrActions: CallbackOrActions, + title: React.ReactNode, + message: React.ReactNode, + callbackOrActions: CallbackOrActions, type = 'default', defaultValue = '', placeholders = ['', ''],