Remove some Skeleton props (#2482)

Author: M-i-k-e-l

src/components/skeletonView/index.tsx

@@ -67,12 +67,6 @@ export interface SkeletonViewProps extends AccessibilityProps, AlignmentModifier
    * Custom value of any type to pass on to SkeletonView and receive back in the renderContent callback.
    */
   customValue?: any;
-  /**
-   * @deprecated
-   * - Please use customValue instead.
-   * - Custom value of any type to pass on to SkeletonView and receive back in the renderContent callback.
-   */
-  contentData?: any;
   /**
    * The type of the skeleton view.
    * Types: LIST_ITEM and TEXT_CONTENT (using SkeletonView.templates.###)
@@ -94,32 +88,6 @@ export interface SkeletonViewProps extends AccessibilityProps, AlignmentModifier
    * This is needed because the `key` prop is not accessible.
    */
   timesKey?: string;
-  /**
-   * @deprecated
-   * - Pass via listProps instead.
-   * - The size of the skeleton view.
-   * - Types: SMALL and LARGE (using SkeletonView.sizes.###)
-   */
-  size?: Size;
-  /**
-   * @deprecated
-   * - Pass via listProps instead.
-   * - Add content to the skeleton.
-   * - Types: AVATAR and THUMBNAIL (using SkeletonView.contentTypes.###)
-   */
-  contentType?: ContentType;
-  /**
-   * @deprecated
-   * - Pass via listProps instead.
-   * - Whether to hide the list item template separator
-   */
-  hideSeparator?: boolean;
-  /**
-   * @deprecated
-   * - Pass via listProps instead.
-   * - Whether to show the last list item template separator
-   */
-  showLastSeparator?: boolean;
   /**
    * The height of the skeleton view
    */
@@ -266,41 +234,22 @@ class SkeletonView extends Component<SkeletonViewProps, SkeletonState> {
     };
   };
 
-  get size() {
-    const {listProps, size} = this.props;
-    return listProps?.size || size;
-  }
-
   get contentSize() {
-    return this.size === Size.LARGE ? 48 : 40;
-  }
-
-  get contentType() {
-    const {listProps, contentType} = this.props;
-    return listProps?.contentType || contentType;
-  }
-
-  get hideSeparator() {
-    const {listProps, hideSeparator} = this.props;
-    return listProps?.hideSeparator || hideSeparator;
-  }
-
-  get showLastSeparator() {
-    const {listProps, showLastSeparator} = this.props;
-    return listProps?.showLastSeparator || showLastSeparator;
+    const {listProps} = this.props;
+    return listProps?.size === Size.LARGE ? 48 : 40;
   }
 
   renderListItemLeftContent = () => {
-    const contentType = this.contentType;
+    const {listProps} = this.props;
+    const contentType = listProps?.contentType;
     if (contentType) {
-      const contentSize = this.contentSize;
       const circleOverride = contentType === ContentType.AVATAR;
-      const style = {marginRight: this.size === Size.LARGE ? 16 : 14};
+      const style = {marginRight: listProps?.size === Size.LARGE ? 16 : 14};
       return (
         <ShimmerPlaceholder
           {...this.getDefaultSkeletonProps({circleOverride, style})}
-          width={contentSize}
-          height={contentSize}
+          width={this.contentSize}
+          height={this.contentSize}
         />
       );
     }
@@ -319,15 +268,13 @@ class SkeletonView extends Component<SkeletonViewProps, SkeletonState> {
 
   renderListItemContentStrips = () => {
     const {listProps} = this.props;
-    const contentType = this.contentType;
-    const size = this.size;
-    const hideSeparator = this.hideSeparator;
-    const customLengths = contentType === ContentType.AVATAR ? [undefined, 50] : undefined;
+    const size = listProps?.size;
+    const customLengths = listProps?.contentType === ContentType.AVATAR ? [undefined, 50] : undefined;
     const height = size === Size.LARGE ? 95 : 75;
     const lengths = _.merge([90, 180, 160], customLengths);
     const topMargins = [0, size === Size.LARGE ? 16 : 8, 8];
     return (
-      <View flex height={height} centerV style={!hideSeparator && Dividers.d10} row>
+      <View flex height={height} centerV style={!listProps?.hideSeparator && Dividers.d10} row>
         <View>
           {this.renderStrip(true, lengths[0], topMargins[0])}
           {this.renderStrip(false, lengths[1], topMargins[1])}
@@ -391,7 +338,7 @@ class SkeletonView extends Component<SkeletonViewProps, SkeletonState> {
 
   renderWithFading = (skeleton: any) => {
     const {isAnimating} = this.state;
-    const {children, renderContent, customValue, contentData} = this.props;
+    const {children, renderContent, customValue} = this.props;
 
     if (isAnimating) {
       return (
@@ -405,8 +352,7 @@ class SkeletonView extends Component<SkeletonViewProps, SkeletonState> {
         </Animated.View>
       );
     } else if (_.isFunction(renderContent)) {
-      const _customValue = customValue || contentData;
-      return renderContent(_customValue);
+      return renderContent(customValue);
     } else {
       return children;
     }
@@ -441,13 +387,8 @@ class SkeletonView extends Component<SkeletonViewProps, SkeletonState> {
       renderContent,
       showContent,
       customValue,
-      contentData,
       template,
       listProps,
-      size,
-      contentType,
-      hideSeparator,
-      showLastSeparator,
       height,
       width,
       colors,
@@ -462,13 +403,8 @@ class SkeletonView extends Component<SkeletonViewProps, SkeletonState> {
       showContent,
       renderContent,
       customValue,
-      contentData,
       template,
       listProps,
-      size,
-      contentType,
-      hideSeparator,
-      showLastSeparator,
       height,
       width,
       colors,
@@ -483,13 +419,17 @@ class SkeletonView extends Component<SkeletonViewProps, SkeletonState> {
         <View {...others}>
           {_.times(times, index => {
             const key = timesKey ? `${timesKey}-${index}` : `${index}`;
+            const _listProps = {
+              ...listProps,
+              hideSeparator: listProps?.hideSeparator || (!listProps?.showLastSeparator && index === times - 1)
+            };
             return (
               <SkeletonView
                 {...passedProps}
+                listProps={_listProps}
                 key={key}
                 testID={`${testID}-${index}`}
                 renderContent={index === 0 ? renderContent : this.renderNothing}
-                hideSeparator={this.hideSeparator || (!this.showLastSeparator && index === times - 1)}
                 times={undefined}
               />
             );