Props deprecations - CardImage, CardSection, StateScreen

src/components/card/CardImage.tsx

@@ -4,15 +4,15 @@ import {View, StyleSheet, ImageSourcePropType} from 'react-native';
 import Image, {ImageProps} from '../image';
 import * as CardPresenter from './CardPresenter';
 import asCardChild, {asCardChildProps} from './asCardChild';
-// @ts-ignore
-import {LogService} from '../../services';
 
-// TODO: Remove omitting source after imageSource deprecation
+
+// TODO: Remove omitting source after imageSource deprecation (since it's required for Image)
 export type CardImageProps = Omit<ImageProps, 'source'> & {
   /**
    * Image source, either remote source or local. Note: for remote pass object {uri: <remote_uri_string>}
    */
   imageSource?: ImageSourcePropType;
+  source?: ImageSourcePropType; //TODO: Remove after imageSource deprecation - should take it from Image props
   /**
    * Image width
    */
@@ -31,11 +31,6 @@ export type CardImageProps = Omit<ImageProps, 'source'> & {
    * border radius, basically for Android since overflow doesn't work well (deprecated)
    */
   borderRadius?: number;
-  /**
-   * Image source, either remote source or local. Note: for remote pass object {uri: <remote_uri_string>}
-   * TODO: Remove after imageSource deprecation - should take it from Image props
-   */
-  source?: ImageSourcePropType;
 };
 
 type Props = CardImageProps & asCardChildProps;
@@ -52,12 +47,16 @@ class CardImage extends PureComponent<Props> {
   constructor(props: Props) {
     super(props);
 
+    this.styles = createStyles(props);
+
+    if (props.imageSource) {
+      console.warn(`CardImage's 'imageSource' property is deprecated, please use 'source' instead`);
+    }
     if (props.borderRadius) {
-      LogService.warn(
+      console.warn(
         'uilib: Please stop passing borderRadius to Card.Image, it will get the borderRadius from the Card'
       );
     }
-    this.styles = createStyles(props);
   }
 
   render() {

src/components/card/CardSection.tsx

@@ -7,6 +7,7 @@ import Text, {TextPropTypes} from '../text';
 import Image, {ImageProps} from '../image';
 import asCardChild, {asCardChildProps} from './asCardChild';
 
+
 type ContentType = TextPropTypes & {text?: string};
 
 export type CardSectionProps = ViewPropTypes & {
@@ -35,6 +36,7 @@ export type CardSectionProps = ViewPropTypes & {
    * Will be used for the background when provided
    */
   imageSource?: ImageSourcePropType;
+  source?: ImageSourcePropType; //TODO: Remove after imageSource deprecation - should take it from Image props
   /**
    * The style for the background image
    */
@@ -54,6 +56,14 @@ type Props = CardSectionProps & asCardChildProps;
 class CardSection extends PureComponent<Props> {
   static displayName = 'Card.Section';
 
+  constructor(props: Props) {
+    super(props);
+
+    if (props.imageSource) {
+      console.warn(`CardSection's 'imageSource' property is deprecated, please use 'source' instead`);
+    }
+  }
+
   renderContent = () => {
     const {
       content,
@@ -94,13 +104,15 @@ class CardSection extends PureComponent<Props> {
   };
 
   renderImage = () => {
-    const {imageSource, imageStyle, imageProps, testID} = this.props;
+    const {source, imageSource, imageStyle, imageProps, testID} = this.props;
+    const finalSource = source || imageSource;
+
     // not actually needed, instead of adding ts-ignore
-    if (imageSource) {
+    if (finalSource) {
       return (
         <Image
           testID={`${testID}.image`}
-          source={imageSource}
+          source={finalSource}
           style={imageStyle}
           customOverlayContent={this.renderContent()}
           {...imageProps}
@@ -111,15 +123,18 @@ class CardSection extends PureComponent<Props> {
 
   render() {
     const {
+      source,
       imageSource,
       context: {borderStyle},
       style,
       ...others
     } = this.props;
+    const finalSource = source || imageSource;
+
     return (
       <View style={[styles.container, borderStyle, style]} {...others}>
-        {imageSource && this.renderImage()}
-        {!imageSource && this.renderContent()}
+        {finalSource && this.renderImage()}
+        {!finalSource && this.renderContent()}
       </View>
     );
   }

src/components/stateScreen/index.js

@@ -22,6 +22,7 @@ export default class StateScreen extends BaseComponent {
      * The image source that's showing at the top. use an image that was required locally
      */
     imageSource: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
+    source: PropTypes.oneOfType([PropTypes.object, PropTypes.number]), //TODO: Remove after imageSource deprecation
     /**
      * To to show as the title
      */
@@ -48,23 +49,29 @@ export default class StateScreen extends BaseComponent {
     super(props);
 
     if (props.testId) {
-      console.warn('StateScreen prop \'testId\' is deprecated. Please use RN \'testID\' prop instead.');
+      console.warn(`StateScreen's 'testId' property is deprecated. Please use RN 'testID' prop instead.`);
+    }
+    if (props.imageSource) {
+      console.warn(`StateScreen's 'imageSource' property is deprecated, please use 'source' instead`);
     }
   }
 
   generateStyles() {
-    const {imageSource} = this.props;
-    const isRemoteImage = _.isObject(imageSource) && Boolean(imageSource.uri);
+    const {source, imageSource} = this.props;
+    const finalSource = source || imageSource;
+
+    const isRemoteImage = _.isObject(finalSource) && Boolean(finalSource.uri);
     this.styles = createStyles(isRemoteImage);
   }
 
   render() {
-    // TODO: remove testId after deprecation
-    const {title, subtitle, imageSource, ctaLabel, onCtaPress, testId, testID} = this.props;
+    // TODO: remove testId and imageSource after deprecation
+    const {title, subtitle, source, imageSource, ctaLabel, onCtaPress, testId, testID} = this.props;
+    const finalSource = source || imageSource;
 
     return (
       <View style={this.styles.container} testID={testID || testId}>
-        <Image style={this.styles.image} resizeMode={'contain'} source={imageSource}/>
+        <Image style={this.styles.image} resizeMode={'contain'} source={finalSource}/>
         <Text style={[this.styles.title]}>{title}</Text>
         <Text style={[this.styles.subtitle]}>{subtitle}</Text>
         <Button