Skeleton - add new features (align to private) (#1622)

* Allow customValue and deprecate contentData

* Move list related props to listProps

* Move list related props to listProps (.d)

* Add renderEndContent + some fixes

* Fix some missed customValue

Author: M-i-k-e-l

demo/src/screens/componentScreens/SkeletonViewScreen.tsx

@@ -14,6 +14,7 @@ import {
   View,
   Colors
 } from 'react-native-ui-lib';
+// @ts-expect-error
 import * as ExampleScreenPresenter from '../ExampleScreenPresenter';
 
 const AVATAR_SIZE = 48;
@@ -45,6 +46,7 @@ export default class SkeletonViewScreen extends Component {
     dataType: DATA_TYPE.List,
     listType: LIST_TYPE.Regular,
     isLarge: false,
+    showEndContent: true,
     key: 1
   };
 
@@ -67,8 +69,24 @@ export default class SkeletonViewScreen extends Component {
     this.setState({isLarge: !isLarge, key: key + 1, isDataAvailable: false});
   };
 
+  setEndContent = () => {
+    const {showEndContent, key} = this.state;
+    this.setState({showEndContent: !showEndContent, key: key + 1, isDataAvailable: false});
+  };
+
+  renderEndContent = () => {
+    const {showEndContent} = this.state;
+    if (showEndContent) {
+      return (
+        <View flex right paddingR-20>
+          <SkeletonView width={45} height={18} borderRadius={BorderRadiuses.br10}/>
+        </View>
+      );
+    }
+  };
+
   renderTopSection = () => {
-    const {isDataAvailable, isLarge, dataType} = this.state;
+    const {isDataAvailable, isLarge, showEndContent, dataType} = this.state;
     return (
       <View marginH-page marginV-s1>
         {ExampleScreenPresenter.renderHeader.call(this, 'Skeleton')}
@@ -83,21 +101,30 @@ export default class SkeletonViewScreen extends Component {
           })}
         <View row centerV spread>
           <Button
-            label={isDataAvailable ? 'Hide data' : 'Show data'}
+            label={'Show data'}
             style={[styles.toggleButton]}
-            size={Button.sizes.small}
+            size={Button.sizes.xSmall}
             outline={!isDataAvailable}
             onPress={this.toggleVisibility}
           />
           {dataType === DATA_TYPE.List && (
             <Button
-              label={isLarge ? 'Set items to small' : 'Set items to large'}
+              label={'Large items'}
               style={[styles.toggleButton]}
-              size={Button.sizes.small}
+              size={Button.sizes.xSmall}
               outline={!isLarge}
               onPress={this.setSize}
             />
           )}
+          {dataType === DATA_TYPE.List && (
+            <Button
+              label={'End content'}
+              style={[styles.toggleButton]}
+              size={Button.sizes.xSmall}
+              outline={!showEndContent}
+              onPress={this.setEndContent}
+            />
+          )}
         </View>
       </View>
     );
@@ -119,9 +146,17 @@ export default class SkeletonViewScreen extends Component {
     );
   };
 
-  renderListItemsData = (contentData?: any) => {
-    const {isLarge} = this.state;
-    const {hasAvatar, hasThumbnail} = contentData || {};
+  renderEndLabel = () => {
+    return (
+      <View centerV paddingR-20>
+        <Text>Verified</Text>
+      </View>
+    );
+  }
+
+  renderListItemsData = (customValue?: any) => {
+    const {isLarge, showEndContent} = this.state;
+    const {hasAvatar, hasThumbnail} = customValue || {};
 
     return (
       <React.Fragment>
@@ -153,6 +188,7 @@ export default class SkeletonViewScreen extends Component {
                   </ListItem.Part>
                 )}
               </ListItem.Part>
+              {showEndContent && this.renderEndLabel()}
             </ListItem>
           );
         })}
@@ -171,11 +207,10 @@ export default class SkeletonViewScreen extends Component {
     return (
       <SkeletonView
         template={SkeletonView.templates.LIST_ITEM}
-        contentType={contentType}
-        size={size}
+        listProps={{size, contentType, renderEndContent: this.renderEndContent}}
         showContent={isDataAvailable}
         renderContent={this.renderListItemsData}
-        contentData={{hasAvatar, hasThumbnail}}
+        customValue={{hasAvatar, hasThumbnail}}
         times={NUMBER_OF_ITEMS_TO_SHOW}
       />
     );

generatedTypes/src/components/skeletonView/index.d.ts

@@ -12,25 +12,59 @@ declare enum ContentType {
     AVATAR = "avatar",
     THUMBNAIL = "thumbnail"
 }
+export interface SkeletonListProps {
+    /**
+     * The size of the skeleton view.
+     * Types: SMALL and LARGE (using SkeletonView.sizes.###)
+     */
+    size?: Size;
+    /**
+     * Add content to the skeleton.
+     * Types: AVATAR and THUMBNAIL (using SkeletonView.contentTypes.###)
+     */
+    contentType?: ContentType;
+    /**
+     * Whether to hide the list item template separator
+     */
+    hideSeparator?: boolean;
+    /**
+     * Whether to show the last list item template separator
+     */
+    showLastSeparator?: boolean;
+    /**
+     * Extra content to be rendered on the end of the list item
+     */
+    renderEndContent?: () => React.ReactElement | undefined;
+}
 export interface SkeletonViewProps extends AccessibilityProps {
     /**
      * The content has been loaded, start fading out the skeleton and fading in the content
      */
     showContent?: boolean;
     /**
-     * Custom value of any type to pass on to SkeletonView and receive back in the renderContent callback
+     * A function that will render the content once the content is ready (i.e. showContent is true).
+     * The method will be called with the Skeleton's customValue (i.e. renderContent(props?.customValue))
      */
-    contentData?: any;
+    renderContent?: (customValue?: any) => React.ReactNode;
     /**
-     * A function that will render the content once the content is ready (i.e. showContent is true).
-     * The method will be called with the Skeleton's contentData (i.e. renderContent(props?.contentData))
+     * 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.
      */
-    renderContent?: (contentData?: any) => React.ReactNode;
+    contentData?: any;
     /**
      * The type of the skeleton view.
      * Types: LIST_ITEM and TEXT_CONTENT (using SkeletonView.templates.###)
      */
     template?: Template;
+    /**
+     * Props that are available when using template={SkeletonView.templates.LIST_ITEM}
+     */
+    listProps?: SkeletonListProps;
     /**
      * An object that holds the number of times the skeleton will appear, and (optionally) the key.
      * The key will actually be `${key}-${index}` if a key is given or `${index}` if no key is given.
@@ -44,21 +78,29 @@ export interface SkeletonViewProps extends AccessibilityProps {
      */
     timesKey?: string;
     /**
-     * The size of the skeleton view.
-     * Types: SMALL and LARGE (using SkeletonView.sizes.###)
+     * @deprecated
+     * - Pass via listProps instead.
+     * - The size of the skeleton view.
+     * - Types: SMALL and LARGE (using SkeletonView.sizes.###)
      */
     size?: Size;
     /**
-     * Add content to the skeleton.
-     * Types: AVATAR and THUMBNAIL (using SkeletonView.contentTypes.###)
+     * @deprecated
+     * - Pass via listProps instead.
+     * - Add content to the skeleton.
+     * - Types: AVATAR and THUMBNAIL (using SkeletonView.contentTypes.###)
      */
     contentType?: ContentType;
     /**
-     * Whether to hide the list item template separator
+     * @deprecated
+     * - Pass via listProps instead.
+     * - Whether to hide the list item template separator
      */
     hideSeparator?: boolean;
     /**
-     * Whether to show the last list item template separator
+     * @deprecated
+     * - Pass via listProps instead.
+     * - Whether to show the last list item template separator
      */
     showLastSeparator?: boolean;
     /**
@@ -124,7 +166,11 @@ declare class SkeletonView extends Component<SkeletonViewProps, SkeletonState> {
         width: number;
         height: number;
     };
-    getContentSize: () => 48 | 40;
+    get size(): Size | undefined;
+    get contentSize(): 48 | 40;
+    get contentType(): ContentType | undefined;
+    get hideSeparator(): boolean | undefined;
+    get showLastSeparator(): boolean | undefined;
     renderListItemLeftContent: () => JSX.Element | undefined;
     renderStrip: (isMain: boolean, length: number, marginTop: number) => JSX.Element;
     renderListItemContentStrips: () => JSX.Element;