Props deprecations - CardImage, CardSection, StateScreen (#1023)

* Props deprecations - CardImage, CardSection, StateScreen

* Editing TODO comments; replacing console with LogService; removing deprecated props from demo screens; adding 'source' to StateScreen typings

* console to LogService

* npm run build:dev

Author: Inbal-Tish

demo/src/screens/componentScreens/CardsScreen.tsx

@@ -47,7 +47,7 @@ export default class CardsScreen extends Component<
           activeOpacity={1}
           marginR-20
         >
-          <Card.Section imageSource={cardImage} imageStyle={{height: '100%'}} />
+          <Card.Section source={cardImage} imageStyle={{height: '100%'}} />
         </Card>
         <Card
           height={120}
@@ -61,7 +61,7 @@ export default class CardsScreen extends Component<
             borderWidth: 3
           }}
         >
-          <Card.Section imageSource={cardImage} imageStyle={{height: '100%'}} />
+          <Card.Section source={cardImage} imageStyle={{height: '100%'}} />
         </Card>
       </View>
     );
@@ -122,14 +122,14 @@ export default class CardsScreen extends Component<
       >
         {isImageOnLeft && (
           <Card.Section
-            imageSource={cardImage}
+            source={cardImage}
             imageStyle={{width: 115, height: '100%'}}
           />
         )}
         {useSection ? this.renderTextSection() : this.renderText()}
         {!isImageOnLeft && (
           <Card.Section
-            imageSource={cardImage}
+            source={cardImage}
             imageStyle={{width: 115, height: '100%'}}
           />
         )}
@@ -147,7 +147,7 @@ export default class CardsScreen extends Component<
           ]}
           style={{padding: 20}}
         />
-        <Card.Section imageSource={cardImage2} imageStyle={{height: 120}} />
+        <Card.Section source={cardImage2} imageStyle={{height: 120}} />
       </Card>
     );
   };
@@ -223,7 +223,7 @@ export default class CardsScreen extends Component<
             <Card.Section
               flex
               backgroundColor={Colors.blue20}
-              imageSource={featureIcon}
+              source={featureIcon}
               imageStyle={{
                 width: 25,
                 height: 25,
@@ -242,7 +242,7 @@ export default class CardsScreen extends Component<
             {'marginL-5': true},
             <Card.Section
               flex
-              imageSource={cardImage2}
+              source={cardImage2}
               imageStyle={{height: '100%'}}
               content={[
                 {text: 'Special sale!', text70: true, blue10: true},
@@ -336,7 +336,7 @@ export default class CardsScreen extends Component<
           onPress={() => console.log('press on a card')}
         >
           <Card.Section
-            imageSource={post.coverImage}
+            source={post.coverImage}
             imageStyle={{height: 160}}
           />
 

demo/src/screens/componentScreens/EmptyStateScreen.js

@@ -36,15 +36,15 @@ export default class EmptyStateScreen extends Component {
               title='Oppsie (with local image)'
               subtitle='Nothing to see here..'
               ctaLabel='OK'
-              imageSource={localImageSource}
+              source={localImageSource}
             />
           </View>
           <View style={styles.pageView}>
             <StateScreen
               title='Oppsie (with remote image)'
               subtitle='Nothing to see here..'
               ctaLabel='OK'
-              imageSource={remoteImageSource}
+              source={remoteImageSource}
             />
           </View>
         </ScrollView>

demo/src/screens/componentScreens/ExpandableSectionScreen.tsx

@@ -17,7 +17,7 @@ const elements = [
       ]}
       style={{padding: 20}}
     />
-    <Card.Section imageSource={cardImage2} imageStyle={{height: 120}} />
+    <Card.Section source={cardImage2} imageStyle={{height: 120}} />
   </Card>,
   <Card style={{marginBottom: 10}} onPress={() => {}}>
     <Card.Section
@@ -27,7 +27,7 @@ const elements = [
       ]}
       style={{padding: 20}}
     />
-    <Card.Section imageSource={cardImage} imageStyle={{height: 120}} />
+    <Card.Section source={cardImage} imageStyle={{height: 120}} />
   </Card>,
   <Card style={{marginBottom: 10}} onPress={() => {}}>
     <Card.Section
@@ -37,7 +37,7 @@ const elements = [
       ]}
       style={{padding: 20}}
     />
-    <Card.Section imageSource={cardImage2} imageStyle={{height: 120}} />
+    <Card.Section source={cardImage2} imageStyle={{height: 120}} />
   </Card>
 ];
 

demo/src/screens/componentScreens/OverlaysScreen.tsx

@@ -78,7 +78,7 @@ export default class OverlaysScreen extends Component {
             Card.Image Overlay
           </Text>
           <Card marginB-s4 padding-s2 borderRadius={4} row height={106}>
-            <Card.Image style={styles.cardImage} imageSource={image} overlayType={Image.overlayTypes.VERTICAL}/>
+            <Card.Image style={styles.cardImage} source={image} overlayType={Image.overlayTypes.VERTICAL}/>
             <View flex marginL-s2 centerV>
               <Text text50>{Image.overlayTypes.VERTICAL}</Text>
               <Text text70>Ipsum nostrud officia deserunt irure eu.</Text>

generatedTypes/commons/new.d.ts

@@ -3,5 +3,4 @@ export { default as asBaseComponent, BaseComponentInjectedProps } from './asBase
 export { default as forwardRef, ForwardRefInjectedProps } from './forwardRef';
 export { default as withScrollEnabler, WithScrollEnablerProps } from './withScrollEnabler';
 export { default as withScrollReached, WithScrollReachedProps } from './withScrollReached';
-export { default as useToggleValue } from './useToggleValue';
 export { ContainerModifiers, MarginModifiers, PaddingModifiers, TypographyModifiers, ColorsModifiers, BackgroundColorModifier } from './modifiers';

generatedTypes/components/card/CardImage.d.ts

@@ -6,6 +6,7 @@ export declare 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;
     /**
      * Image width
      */
@@ -24,11 +25,6 @@ export declare 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;
 };
 declare const _default: React.ComponentType<CardImageProps>;
 export default _default;

generatedTypes/components/card/CardSection.d.ts

@@ -32,6 +32,7 @@ export declare type CardSectionProps = ViewPropTypes & {
      * Will be used for the background when provided
      */
     imageSource?: ImageSourcePropType;
+    source?: ImageSourcePropType;
     /**
      * The style for the background image
      */
@@ -67,6 +68,7 @@ declare const _default: React.ComponentClass<ViewPropTypes & {
      * Will be used for the background when provided
      */
     imageSource?: number | import("react-native").ImageURISource | import("react-native").ImageURISource[] | undefined;
+    source?: number | import("react-native").ImageURISource | import("react-native").ImageURISource[] | undefined;
     /**
      * The style for the background image
      */

generatedTypes/components/floatingButton/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { ButtonPropTypes } from '../button';
 export interface FloatingButtonProps {
     /**
@@ -8,11 +8,11 @@ export interface FloatingButtonProps {
     /**
      * Button element (all Button's component's props)
      */
-    button?: ButtonPropTypes;
+    button?: PropsWithChildren<ButtonPropTypes>;
     /**
      * Secondary button element (all Button's component's props)
      */
-    secondaryButton?: ButtonPropTypes;
+    secondaryButton?: PropsWithChildren<ButtonPropTypes>;
     /**
      * The bottom margin of the button, or secondary button if passed
      */

generatedTypes/hooks/index.d.ts

@@ -0,0 +1 @@
+export { default as useToggleValue } from './useToggleValue';

generatedTypes/hooks/useToggleValue/index.d.ts

@@ -0,0 +1,2 @@
+declare const useToggleValue: (initial: any, second?: any) => any[];
+export default useToggleValue;

src/components/card/CardImage.tsx

@@ -1,18 +1,19 @@
 import React, {PureComponent} from 'react';
 import {View, StyleSheet, ImageSourcePropType} from 'react-native';
+import {LogService} from '../../services';
 // 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';
 
-// 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 ImageProps
   /**
    * Image width
    */
@@ -31,11 +32,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 +48,14 @@ class CardImage extends PureComponent<Props> {
   constructor(props: Props) {
     super(props);
 
+    this.styles = createStyles(props);
+
+    if (props.imageSource) {
+      LogService.deprecationWarn({component: 'CardImage', oldProp: 'imageSource', newProp: 'source'});
+    }
     if (props.borderRadius) {
-      LogService.warn(
-        'uilib: Please stop passing borderRadius to Card.Image, it will get the borderRadius from the Card'
-      );
+      LogService.deprecationWarn({component: 'CardImage', oldProp: 'borderRadius'});
     }
-    this.styles = createStyles(props);
   }
 
   render() {

src/components/card/CardSection.tsx

@@ -1,12 +1,14 @@
 import _ from 'lodash';
 import React, {PureComponent} from 'react';
 import {StyleSheet, ViewStyle, ImageStyle, ImageSourcePropType, StyleProp} from 'react-native';
+import {LogService} from '../../services';
 import {asBaseComponent} from '../../commons/new';
 import View, {ViewPropTypes} from '../view';
 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 +37,7 @@ export type CardSectionProps = ViewPropTypes & {
    * Will be used for the background when provided
    */
   imageSource?: ImageSourcePropType;
+  source?: ImageSourcePropType;
   /**
    * The style for the background image
    */
@@ -54,6 +57,14 @@ type Props = CardSectionProps & asCardChildProps;
 class CardSection extends PureComponent<Props> {
   static displayName = 'Card.Section';
 
+  constructor(props: Props) {
+    super(props);
+
+    if (props.imageSource) {
+      LogService.deprecationWarn({component: 'CardSection', oldProp: 'imageSource', newProp: 'source'});
+    }
+  }
+
   renderContent = () => {
     const {
       content,
@@ -94,13 +105,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 +124,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

@@ -2,6 +2,7 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {StyleSheet} from 'react-native';
+import {LogService} from '../../services';
 import {Constants} from '../../helpers';
 import {Typography, Colors} from '../../style';
 import {BaseComponent} from '../../commons';
@@ -22,6 +23,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]),
     /**
      * To to show as the title
      */
@@ -48,23 +50,30 @@ export default class StateScreen extends BaseComponent {
     super(props);
 
     if (props.testId) {
-      console.warn('StateScreen prop \'testId\' is deprecated. Please use RN \'testID\' prop instead.');
+      LogService.deprecationWarn({component: 'StateScreen', oldProp: 'testId', newProp: 'testID'});
+
+    }
+    if (props.imageSource) {
+      LogService.deprecationWarn({component: 'StateScreen', oldProp: 'imageSource', newProp: 'source'});
     }
   }
 
   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

typings/components/StateScreen.d.ts

@@ -4,6 +4,7 @@ import {BaseComponent} from '../commons';
 
 export interface StateScreenProps {
   imageSource?: ImageSourcePropType;
+  source?: ImageSourcePropType;
   title: string;
   subtitle?: ReactNode[];
   ctaLabel?: string;