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
ant-design · May 11, 2018 · 5a2d0d5 · 5a2d0d5
1 parent cc35ff5
commit 5a2d0d5
Show file tree

Hide file tree

Showing 16 changed files with 70 additions and 95 deletions.
diff --git a/components/button/index.native.tsx b/components/button/index.native.tsx
@@ -84,25 +84,9 @@ export default class Button extends React.Component<ButtonProps, any> {
       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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<any>;
-  style?: StyleProp<TextStyle>;
-}
+import { Action } from './PropsType';
 
 export interface AlertContainerProps {
-  title: JSX.Element;
-  content: JSX.Element;
-  actions: AlertButtonType[];
+  title: React.ReactNode;
+  content: React.ReactNode;
+  actions: Action<TextStyle>[];
   onAnimationEnd?: (visible: boolean) => void;
 }
 

diff --git 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<TextStyle> {
   styles?: IModalStyle;
   style?: StyleProp<ViewStyle>;
   bodyStyle?: StyleProp<ViewStyle>;

diff --git 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<P, S> extends React.Component<P, S> {
+  static alert: (
+    title: React.ReactNode,
+    message: React.ReactNode,
+    actions?: Action<React.CSSProperties>[],
+    platform?: string,
+  ) => { close: () => void };
 
-export interface ModalProps extends ModalPropsType {
+  static prompt: (
+    title: React.ReactNode,
+    message: React.ReactNode,
+    callbackOrActions: CallbackOrActions<React.CSSProperties>,
+    type?: 'default' | 'secure-text' | 'login-password',
+    defaultValue?: string,
+    placeholders?: string[],
+    platform?: string,
+  ) => { close: () => void };
+
+  static operation: (
+    actions?: Action<React.CSSProperties>[],
+    platform?: string,
+  ) => { close: () => void };
+}
+
+export interface ModalProps extends ModalPropsType<React.CSSProperties> {
   prefixCls?: string;
   transitionName?: string;
   maskTransitionName?: string;
@@ -31,7 +54,7 @@ export default class Modal extends ModalComponent<ModalProps, any> {
     platform: 'ios',
   };
 
-  renderFooterButton(button: Action, prefixCls: string | undefined, i: number) {
+  renderFooterButton(button: Action<React.CSSProperties>, 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
@@ -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<TextStyle>;
-}
+import { Action } from './PropsType';
 
 export interface OperationContainerProps {
-  actions: OperationButtonType[];
+  actions: Action<TextStyle>[];
   onAnimationEnd?: (visible: boolean) => void;
 }
 

diff --git 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<TextStyle>;
   onAnimationEnd?: (visible: boolean) => void;
   styles?: IPromptStyle;
   placeholders?: string[];

diff --git 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<T> {
+  title?: React.ReactNode;
   visible: boolean;
   maskClosable?: boolean;
   closable?: boolean;
-  footer?: Action[];
+  footer?: Action<T>[];
   onClose?: () => void;
   transparent?: boolean;
   popup?: boolean;
@@ -17,34 +15,11 @@ export interface ModalPropsType {
   operation?: boolean;
 }
 
-export interface Action {
+export interface Action<T> {
   text: string;
   onPress?: () => void | Promise<any>;
-  style?: React.CSSProperties | StyleProp<TextStyle> | string;
+  style?: T | string;
 }
 
 export type Callback = (valueOrLogin: string, password?: string) => void;
-export type CallbackOrActions = Callback | Action[];
-export abstract class ModalComponent<P, S> extends React.Component<P, S> {
-  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<T> = Callback | Action<T>[];
diff --git 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
@@ -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<React.CSSProperties>) => {
     // 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
@@ -21,7 +21,7 @@ export default function operation(
     }
   }
 
-  const footer = actions.map((button: Action) => {
+  const footer = actions.map((button: Action<React.CSSProperties>) => {
     // 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
@@ -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<TextStyle>,
   type = 'default',
   defaultValue = '',
   placeholders = ['', ''],

diff --git 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<React.CSSProperties>,
   type = 'default',
   defaultValue = '',
   placeholders = ['', ''],