Migrate Card & Card.Image to typescript (#805)

* rename files to ts/x

* Migrate Card (and CardImage) to typescript

* migrate Card files to TS

* migrate Card components to Typescript

* fix Card typescript issues

* Complete Card migration, migrate CardScreen to ts

Author: ethanshar

demo/src/screens/componentScreens/CardsScreen.js renamed to demo/src/screens/componentScreens/CardsScreen.tsx

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const CardContext: React.Context<{}>;
+export default CardContext;

generatedTypes/components/card/CardContext.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ImageSourcePropType } from 'react-native';
+import { ImageProps } from '../image';
+export declare type CardImageProps = ImageProps & {
+    /**
+     * Image source, either remote source or local. Note: for remote pass object {uri: <remote_uri_string>}
+     */
+    imageSource?: ImageSourcePropType;
+    /**
+     * Image width
+     */
+    width?: number | string;
+    /**
+     * Image height
+     */
+    height?: number | string;
+    /**
+     * The Image position which determines the appropriate flex-ness of the image and border radius (for Android)
+     * this prop derived automatically from Card parent component if it rendered as a direct child of the
+     * Card component
+     */
+    position?: string[];
+    /**
+     * border radius, basically for Android since overflow doesn't work well (deprecated)
+     */
+    borderRadius?: number;
+};
+declare const _default: React.ComponentType<CardImageProps>;
+export default _default;

generatedTypes/components/card/CardImage.d.ts

@@ -0,0 +1,12 @@
+export declare function extractPositionValues(position: string[] | undefined): {
+    top: boolean;
+    left: boolean;
+    right: boolean;
+    bottom: boolean;
+};
+export declare function generateBorderRadiusStyle({ position, borderRadius }: {
+    position: string[] | undefined;
+    borderRadius: number | undefined;
+}): {
+    [key: string]: number | undefined;
+};

generatedTypes/components/card/CardPresenter.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import { ViewPropTypes } from '../view';
+import { TextPropTypes } from '../text';
+import { ImageProps } from '../image';
+declare type ContentType = TextPropTypes & {
+    text?: string;
+};
+export declare type CardSectionProps = ViewPropTypes & {
+    /**
+     * Text content for the CardSection.
+     * Example: content={[{text: 'You’re Invited!', text70: true, dark10: true}]}
+     */
+    content?: ContentType[];
+    /**
+     * Style for the content
+     */
+    contentStyle?: ViewStyle;
+    /**
+     * Image props for a leading icon to render before the text
+     */
+    leadingIcon?: ImageProps;
+    /**
+     * Image props for a trailing icon to render after the text
+     */
+    trailingIcon?: ImageProps;
+};
+declare const _default: React.ComponentType<CardSectionProps>;
+export default _default;

generatedTypes/components/card/CardSection.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare function asCardChild<T>(WrappedComponent: React.ComponentType<any>): React.ComponentType<T>;
+export default asCardChild;
+export declare type asCardChildProps = {
+    context?: any;
+};

generatedTypes/components/card/asCardChild.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import { ViewPropTypes } from '../view';
+import { TouchableOpacityProps } from '../touchableOpacity';
+export declare type CardPropTypes = ViewPropTypes & TouchableOpacityProps & {
+    /**
+     * card custom width
+     */
+    width?: number | string;
+    /**
+     * card custom height
+     */
+    height?: number | string;
+    /**
+     * should inner card flow direction be horizontal
+     */
+    row?: boolean;
+    /**
+     * card border radius (will be passed to inner Card.Image component)
+     */
+    borderRadius?: number;
+    /**
+     * action for when pressing the card
+     */
+    onPress?: () => void;
+    /**
+     * whether the card should have shadow or not
+     */
+    enableShadow?: boolean;
+    /**
+     * elevation value (Android only)
+     */
+    elevation?: number;
+    /**
+     * enable blur effect (iOS only)
+     */
+    enableBlur?: boolean;
+    /**
+     * blur option for blur effect according to @react-native-community/blur lib (make sure enableBlur is on)
+     */
+    blurOptions?: object;
+    /**
+     * Additional styles for the top container
+     */
+    containerStyle?: ViewStyle;
+    /**
+     * Adds visual indication that the card is selected
+     */
+    selected?: boolean;
+    /**
+     * Custom options for styling the selection indication
+     */
+    selectionOptions?: {
+        icon?: number;
+        iconColor?: string;
+        color?: string;
+        borderWidth?: number;
+        indicatorSize?: number;
+        hideIndicator?: boolean;
+    };
+};
+declare const _default: React.ComponentType<CardPropTypes>;
+export default _default;

generatedTypes/components/card/index.d.ts

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { ImageProps as RNImageProps, ImageSourcePropType } from 'react-native';
 import { ForwardRefInjectedProps } from '../../commons/new';
 import { OverlayTypeType } from '../overlay';
-declare type ImageProps = RNImageProps & {
+export declare type ImageProps = RNImageProps & {
     /**
      * custom source transform handler for manipulating the image source (great for size control)
      */

generatedTypes/components/image/index.d.ts

@@ -4,6 +4,7 @@
  * Please use this file for declaring all the exports, so they could be picked up by typescript's complier
  */
 export * from './style';
+export {default as Card} from './components/card';
 export {default as View, ViewPropTypes} from './components/view';
 export {default as Text} from './components/text';
 export {default as TouchableOpacity, TouchableOpacityProps} from './components/touchableOpacity';
@@ -21,10 +22,10 @@ export {
   Avatar,
   Badge,
   Card,
-  CardProps,
-  CardImageProps,
-  CardSectionProps,
-  CardSectionContentProps,
+  // CardProps,
+  // CardImageProps,
+  // CardSectionProps,
+  // CardSectionContentProps,
   Carousel,
   ConnectionStatusBar,
   Dialog,

generatedTypes/index.d.ts

@@ -0,0 +1,100 @@
+import React, {PureComponent} from 'react';
+import {View, StyleSheet, ImageSourcePropType} from 'react-native';
+// import {BaseComponent} from '../../commons';
+import Image, {ImageProps} from '../image';
+import * as CardPresenter from './CardPresenter';
+import asCardChild, {asCardChildProps} from './asCardChild';
+// @ts-ignore
+import {LogService} from '../../services';
+
+export type CardImageProps = ImageProps & {
+  /**
+   * Image source, either remote source or local. Note: for remote pass object {uri: <remote_uri_string>}
+   */
+  imageSource?: ImageSourcePropType;
+  /**
+   * Image width
+   */
+  width?: number | string;
+  /**
+   * Image height
+   */
+  height?: number | string;
+  /**
+   * The Image position which determines the appropriate flex-ness of the image and border radius (for Android)
+   * this prop derived automatically from Card parent component if it rendered as a direct child of the
+   * Card component
+   */
+  position?: string[];
+  /**
+   * border radius, basically for Android since overflow doesn't work well (deprecated)
+   */
+  borderRadius?: number;
+};
+
+type Props = CardImageProps & asCardChildProps;
+
+/**
+ * @description: Card.Image, part of the Card component belongs inside a Card (better be a direct child)
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CardsScreen.js
+ */
+class CardImage extends PureComponent<Props> {
+  static displayName = 'Card.Image';
+
+  styles: any;
+
+  constructor(props: Props) {
+    super(props);
+
+    if (props.borderRadius) {
+      LogService.warn(
+        'uilib: Please stop passing borderRadius to Card.Image, it will get the borderRadius from the Card'
+      );
+    }
+    this.styles = createStyles(props);
+  }
+
+  render() {
+    const {
+      imageSource,
+      style,
+      testID,
+      overlayType,
+      context: {borderStyle}
+    } = this.props;
+    if (imageSource) {
+      return (
+        <View style={[this.styles.container, borderStyle, style]}>
+          <Image
+            testID={testID}
+            source={imageSource}
+            style={[this.styles.image]}
+            overlayType={overlayType}
+          />
+        </View>
+      );
+    }
+    return null;
+  }
+}
+
+function createStyles({width, height, context: {position}}: Props) {
+  const {top, left, right, bottom} = CardPresenter.extractPositionValues(
+    position
+  );
+  return StyleSheet.create({
+    container: {
+      height: left || right ? undefined : height,
+      width: top || bottom ? undefined : width,
+      overflow: 'hidden'
+    },
+    image: {
+      width: undefined,
+      height: undefined,
+      flex: 1,
+      resizeMode: 'cover'
+    }
+  });
+}
+
+export default asCardChild<CardImageProps>(CardImage);

src/components/card/CardContext.js renamed to src/components/card/CardContext.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 
-export function extractPositionValues(position) {
+export function extractPositionValues(position: string[] | undefined) {
   const top = _.includes(position, 'top');
   const left = _.includes(position, 'left');
   const right = _.includes(position, 'right');
@@ -9,8 +9,8 @@ export function extractPositionValues(position) {
   return {top, left, right, bottom};
 }
 
-export function generateBorderRadiusStyle({position, borderRadius}) {
-  const borderRadiusStyle = {};
+export function generateBorderRadiusStyle({position, borderRadius}: {position: string[] | undefined, borderRadius: number | undefined}) {
+  const borderRadiusStyle: {[key: string]: number | undefined} = {};
 
   const {top, left, right, bottom} = extractPositionValues(position);