feat: up to ts 2.4, fix compile error, refactor rn styles interface (a…

…nt-design#1573) * feat: up to ts 2.4, fix compile error * fix: badge native ts * fix: ts compile * feat: revert rn version * test: update snapshot * fix: picker rn style * fix: rn styles is optional
koubei-fe · Jul 24, 2017 · 814a0d5 · 814a0d5
1 parent 1ae69a5
commit 814a0d5
Show file tree

Hide file tree

Showing 52 changed files with 464 additions and 144 deletions.
diff --git a/ant-design-analysis b/ant-design-analysis
diff --git a/components/accordion/index.tsx b/components/accordion/index.tsx
@@ -3,29 +3,33 @@ import React from 'react';
 import { View, Text } from 'react-native';
 import RNAccordion from 'react-native-collapsible/Accordion';
 import AccordionProps from './PropsType';
-import AccordionStyle from './style/index';
+import AccordionStyle, { TAccordionStyle } from './style/index';
 import Icon from '../icon';
 
 export interface AccordionPanelProps {
   key?: string;
   header: any;
 }
 
+export interface AccordionNativeProps extends AccordionProps {
+  styles?: TAccordionStyle;
+}
+
 class AccordionPanel extends React.Component<AccordionPanelProps, any> {
   render() {
     return null;
   }
 }
 
-class Accordion extends React.Component<AccordionProps, any> {
+class Accordion extends React.Component<AccordionNativeProps, any> {
   static defaultProps = {
     styles: AccordionStyle,
   };
 
   static Panel: any;
 
   _renderHeader = (section, _, isActive) => {
-    const styles = this.props.styles;
+    const styles = this.props.styles!;
     return (
       <View style={[styles.header, section.style]}>
         {
@@ -43,7 +47,7 @@ class Accordion extends React.Component<AccordionProps, any> {
   }
 
   _renderContent = (section) => {
-    const styles = this.props.styles;
+    const styles = this.props.styles!;
     return React.isValidElement(section.content) ? section.content : (
       <View style={styles.content}>
         <Text style={styles.contentText}>{section.content}</Text>
@@ -65,7 +69,9 @@ class Accordion extends React.Component<AccordionProps, any> {
   }
 
   render() {
-    const { children, style, styles, defaultActiveKey, activeKey } = this.props;
+    const { children, style, defaultActiveKey, activeKey } = this.props;
+    const styles = this.props.styles!;
+
     let defaultActiveSection;
     let activeSection;
     const headers = React.Children.map(children, (child: any, index) => {

diff --git a/components/accordion/style/index.tsx b/components/accordion/style/index.tsx
@@ -1,7 +1,17 @@
 import variables from '../../style/themes/default';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
 
-export default StyleSheet.create({
+export interface TAccordionStyle {
+  container: ViewStyle;
+  header: ViewStyle;
+  arrow: ViewStyle;
+  headerWrap: ViewStyle;
+  headerText: TextStyle;
+  content: ViewStyle;
+  contentText: TextStyle;
+}
+
+export default StyleSheet.create<TAccordionStyle>({
   container: {
     borderTopWidth: StyleSheet.hairlineWidth,
     borderTopColor: variables.border_color_base,

diff --git a/components/action-sheet/AndroidContainer.tsx b/components/action-sheet/AndroidContainer.tsx
@@ -46,13 +46,13 @@ class ActionSheetAndroid extends React.Component<Props, any> {
       excludedActivityTypes.map((item, index) => <View key={index}>{item}</View>)
     ) : (
       options as Array<string>).map((item, index) => (
-        <View key={index} style={[cancelButtonIndex === index ? styles.cancelBtn : null]}>
+        <View key={index} style={[cancelButtonIndex === index ? styles.cancelBtn : undefined]}>
           <TouchableHighlight
             style={[ styles.btn ]}
             underlayColor={variables.fill_tap}
             onPress={() => this.confirm(index)}
           >
-            <Text style={[ destructiveButtonIndex === index ? styles.destructiveBtn : null ]}>
+            <Text style={[ destructiveButtonIndex === index ? styles.destructiveBtn : undefined ]}>
               {item}
             </Text>
           </TouchableHighlight>

diff --git a/components/activity-indicator/index.tsx b/components/activity-indicator/index.tsx
@@ -4,10 +4,14 @@ import {
   Text,
   ActivityIndicator,
 } from 'react-native';
-import style from './style';
+import style, { TActivityIndicatorStyle } from './style';
 import PropTypes from './PropsType';
 
-export default class RNActivityIndicator extends React.Component<PropTypes, any> {
+export interface ActivityIndicatorNativeProps extends PropTypes {
+  styles?: TActivityIndicatorStyle;
+}
+
+export default class RNActivityIndicator extends React.Component<ActivityIndicatorNativeProps, any> {
   static defaultProps = {
     animating: true,
     color: 'gray',
@@ -17,7 +21,7 @@ export default class RNActivityIndicator extends React.Component<PropTypes, any>
   };
 
   _renderToast() {
-    const styles = this.props.styles;
+    const styles = this.props.styles!;
     return (
       <View style={[styles.container]}>
         <View style={[styles.innerContainer, { height: 89 }]}>
@@ -34,13 +38,15 @@ export default class RNActivityIndicator extends React.Component<PropTypes, any>
   }
 
   _renderSpinner() {
+    const { styles, color, size, text } = this.props;
+    const { spinner, tip } = styles!;
     return (
-      <View style={this.props.styles.spinner} >
+      <View style={spinner} >
         <ActivityIndicator
-          color={this.props.color}
-          size={this.props.size}
+          color={color}
+          size={size}
         />
-        {this.props.text && (<Text style={[this.props.styles.tip]}>{this.props.text}</Text>)}
+        {text && (<Text style={[tip]}>{text}</Text>)}
       </View>
     );
   }

diff --git a/components/activity-indicator/style/index.tsx b/components/activity-indicator/style/index.tsx
@@ -1,7 +1,15 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
 import variables from '../../style/themes/default';
 
-export default StyleSheet.create({
+export interface TActivityIndicatorStyle {
+  container: ViewStyle;
+  innerContainer: ViewStyle;
+  wrapper: ViewStyle;
+  tip: TextStyle;
+  toast: TextStyle;
+  spinner: ViewStyle;
+}
+export default StyleSheet.create<TActivityIndicatorStyle>({
   container: {
     position: 'absolute',
     top: 0,

diff --git a/components/badge/index.tsx b/components/badge/index.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import { View, Text } from 'react-native';
-import BadgeStyle from './style/index';
+import BadgeStyle, { TBadgeStyle } from './style/index';
 import BadgeProps from './PropsType';
 
-export default class Badge extends React.Component<BadgeProps, any> {
+export interface BadgeNativeProps extends BadgeProps {
+  styles?: TBadgeStyle;
+}
+export default class Badge extends React.Component<BadgeNativeProps, any> {
   static defaultProps = {
     size: 'small',
     overflowCount: 99,
@@ -17,7 +20,7 @@ export default class Badge extends React.Component<BadgeProps, any> {
       styles, style,
       children, text, size, overflowCount, dot, corner, ...restProps, // todo: hot
     } = this.props;
-
+    styles = styles!;
     text = typeof text === 'number' && text > (overflowCount as number) ? `${overflowCount}+` : text;
 
     // dot mode don't need text

diff --git a/components/badge/style/index.tsx b/components/badge/style/index.tsx
@@ -1,8 +1,18 @@
-import { StyleSheet, Platform } from 'react-native';
+import { StyleSheet, Platform, ViewStyle, TextStyle } from 'react-native';
 import variables from '../../style/themes/default';
 
 const grid = 4;
-export default StyleSheet.create({
+export interface TBadgeStyle {
+  wrap: ViewStyle;
+  textCornerWrap: ViewStyle;
+  dot: ViewStyle;
+  dotSizelarge: ViewStyle;
+  textDom: ViewStyle;
+  textCorner: ViewStyle;
+  textCornerlarge: ViewStyle;
+  text: TextStyle;
+}
+export default StyleSheet.create<TBadgeStyle>({
   wrap: {
     flexDirection: 'row',
   },

diff --git a/components/card/index.tsx b/components/card/index.tsx
@@ -3,10 +3,13 @@ import { View } from 'react-native';
 import CardBody from './CardBody';
 import CardHeader from './CardHeader';
 import CardFooter from './CardFooter';
-import CardStyle from './style/index';
+import CardStyle, { ICardStyle } from './style/index';
 import { CardProps } from './PropsType';
 
-export default class Card extends React.Component<CardProps, any> {
+export interface ICardNativeProps extends CardProps {
+  styles?: ICardStyle;
+}
+export default class Card extends React.Component<ICardNativeProps, any> {
   static defaultProps = {
     style: {},
     full: false,
@@ -19,13 +22,13 @@ export default class Card extends React.Component<CardProps, any> {
 
   render() {
     const { style , styles, full, children, ...restProps } = this.props;
-    const cardStyle = full ? styles.full : {};
+    const cardStyle = full ? styles!.full : {};
     const childDom = React.Children.map(children, (child) => React.cloneElement(
         child as React.ReactElement<any>, { styles },
       ),
     );
     return (
-      <View style={[styles.card, cardStyle, style]} {...restProps}>
+      <View style={[styles!.card, cardStyle, style]} {...restProps}>
         {childDom}
       </View>
     );

diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx
@@ -1,7 +1,20 @@
 import variables from '../../style/themes/default';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle, ImageStyle, TextStyle } from 'react-native';
 
-export default StyleSheet.create({
+export interface ICardStyle {
+  card: ViewStyle;
+  full: ViewStyle;
+  headerWrap: ViewStyle;
+  headerTitle: ViewStyle;
+  headerImage: ImageStyle;
+  headerContent: TextStyle;
+  headerExtra: TextStyle;
+  body: ViewStyle;
+  footerWrap: ViewStyle;
+  footerContent: TextStyle;
+  footerExtra: TextStyle;
+}
+export default StyleSheet.create<ICardStyle>({
   card: {
     borderWidth: variables.border_width_md,
     borderColor: variables.border_color_base,

diff --git a/components/checkbox/AgreeItem.tsx b/components/checkbox/AgreeItem.tsx
@@ -2,10 +2,14 @@ import React from 'react';
 import { View, TouchableWithoutFeedback, Text } from 'react-native';
 import Checkbox from './Checkbox';
 import { AgreeItemPropsType } from './PropsType';
-import AgreeItemstyle from './style/index';
+import AgreeItemstyle, { ICheckboxStyle } from './style/index';
 
 const refCheckbox = 'checkbox';
-export default class AgreeItem extends React.Component<AgreeItemPropsType, any> {
+
+export interface IAgreeItemNativeProps extends AgreeItemPropsType {
+  styles?: ICheckboxStyle;
+}
+export default class AgreeItem extends React.Component<IAgreeItemNativeProps, any> {
   static defaultProps = {
     styles: AgreeItemstyle,
   };
@@ -17,6 +21,7 @@ export default class AgreeItem extends React.Component<AgreeItemPropsType, any>
 
   render(): JSX.Element {
     let { style, checkboxStyle, children, disabled, checked, defaultChecked, onChange, styles } = this.props;
+    styles = styles!;
 
     let contentDom;
     if (React.isValidElement(children)) {

diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import { TouchableWithoutFeedback, Image, View, Text } from 'react-native';
 import { CheckboxProps } from './PropsType';
-import CheckboxStyle from './style/index';
+import CheckboxStyle, { ICheckboxStyle } from './style/index';
 
-export default class Checkbox extends React.Component<CheckboxProps, any> {
+export interface ICheckboxNativeProps extends CheckboxProps {
+  styles?: ICheckboxStyle;
+}
+export default class Checkbox extends React.Component<ICheckboxNativeProps, any> {
   static CheckboxItem: any;
   static AgreeItem: any;
 
@@ -62,9 +65,9 @@ export default class Checkbox extends React.Component<CheckboxProps, any> {
 
     return (
       <TouchableWithoutFeedback onPress={this.handleClick}>
-        <View style={[styles.wrapper]}>
-          <Image source={imgSrc} style={[styles.icon, style]} />
-          {typeof children === 'string' ? ( <Text style={styles.iconRight}>{this.props.children}</Text>) : children}
+        <View style={[styles!.wrapper]}>
+          <Image source={imgSrc} style={[styles!.icon, style]} />
+          {typeof children === 'string' ? ( <Text style={styles!.iconRight}>{this.props.children}</Text>) : children}
         </View>
       </TouchableWithoutFeedback>
     );

diff --git a/components/checkbox/CheckboxItem.tsx b/components/checkbox/CheckboxItem.tsx
@@ -2,12 +2,15 @@ import React from 'react';
 import Checkbox from './Checkbox';
 import List from '../list/index';
 import { CheckboxItemProps } from './PropsType';
-import CheckboxItemStyle from './style/index';
+import CheckboxItemStyle, { ICheckboxStyle } from './style/index';
 
 const ListItem = List.Item;
 const refCheckbox = 'checkbox';
 
-export default class CheckboxItem extends React.Component<CheckboxItemProps, any> {
+export interface ICheckboxItemNativeProps extends CheckboxItemProps {
+  styles?: ICheckboxStyle;
+}
+export default class CheckboxItem extends React.Component<ICheckboxItemNativeProps, any> {
   static defaultProps = {
     styles: CheckboxItemStyle,
   };
@@ -23,6 +26,8 @@ export default class CheckboxItem extends React.Component<CheckboxItemProps, any
     let {
       style, checkboxStyle, defaultChecked, checked, disabled, children, extra, onChange, styles,
     } = this.props;
+    styles = styles!;
+
     const thumbEl = (
       <Checkbox
         ref={refCheckbox}

diff --git a/components/checkbox/style/index.tsx b/components/checkbox/style/index.tsx
@@ -1,7 +1,15 @@
 import variables from '../../style/themes/default';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle } from 'react-native';
 
-export default StyleSheet.create({
+export interface ICheckboxStyle {
+  wrapper: ViewStyle;
+  icon: ViewStyle;
+  iconRight: ViewStyle;
+  agreeItem: ViewStyle;
+  agreeItemCheckbox: ViewStyle;
+  checkboxItemCheckbox: ViewStyle;
+}
+export default StyleSheet.create<ICheckboxStyle>({
   wrapper: {
     flexDirection: 'row',
     alignItems: 'center',

diff --git a/components/date-picker/index.tsx b/components/date-picker/index.tsx
@@ -1,17 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import PopupDatePicker from 'rmc-date-picker/lib/Popup';
-import PopupStyles from '../picker/styles';
+import PickerStyles, { IPickerStyle } from '../picker/style';
 import { formatFn, getProps as getDefaultProps, getDefaultDate } from './utils';
 import tsPropsType from './PropsType';
 import RCDatePicker from 'rmc-date-picker/lib/DatePicker';
 import { getComponentLocale, getLocaleCode } from '../_util/getLocale';
 import zh_CN from './locale/zh_CN';
 
-export default class DatePicker extends React.Component<tsPropsType, any> {
+export interface IDatePickerNativeProps extends tsPropsType {
+  styles?: IPickerStyle;
+}
+export default class DatePicker extends React.Component<IDatePickerNativeProps, any> {
   static defaultProps = {
     triggerType: 'onClick',
-    styles: PopupStyles,
+    styles: PickerStyles,
     minuteStep: 1,
     ...getDefaultProps(),
   };

diff --git a/components/image-picker/__tests__/__snapshots__/demo.test.js.snap b/components/image-picker/__tests__/__snapshots__/demo.test.js.snap
@@ -553,7 +553,6 @@ exports[`renders ./components/image-picker/demo/basic.tsx correctly 1`] = `
         ellipsizeMode="tail"
         style={
           Array [
-            undefined,
             Object {
               "backgroundColor": "transparent",
               "color": "#888",
@@ -629,7 +628,6 @@ exports[`renders ./components/image-picker/demo/basic.tsx correctly 1`] = `
         ellipsizeMode="tail"
         style={
           Array [
-            undefined,
             Object {
               "backgroundColor": "transparent",
               "color": "#888",