react-native-ui-lib/src/components/card/CardSection.js

<p align="center"> <img src="https://user-images.githubusercontent.com/1780255/105469025-56759000-5ca0-11eb-993d-3568c1fd54f4.png" height="250px" style="display:block"/> </p> <p align="center">UI Toolset & Components Library for React Native</p> <p a

import _pt from "prop-types";
import _ from 'lodash';
import React, { PureComponent } from 'react';
import { StyleSheet } from 'react-native';
import { asBaseComponent } from "../../commons/new";
import View from "../view";
import Text from "../text";
import Image from "../image";
import asCardChild from "./asCardChild";

/**
 * @description: Card.Section for rendering content easily inside a card
 * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CardsScreen.tsx
 */
class CardSection extends PureComponent {
  static propTypes = {
    /**
       * Text content for the CardSection.
       * Example: content={[{text: 'You’re Invited!', text70: true, grey10: true}]}
       */
    content: _pt.array,

    /**
       * Give the section a background color
       */
    backgroundColor: _pt.string
  };
  static displayName = 'Card.Section';
  renderContent = () => {
    const {
      content,
      leadingIcon,
      trailingIcon,
      contentStyle,
      testID
    } = this.props;

    if (!leadingIcon && !trailingIcon && _.isEmpty(content)) {
      return;
    }

    return <>
        {leadingIcon && <Image testID={`${testID}.leadingIcon`} {...leadingIcon} />}
        <View testID={`${testID}.contentContainer`} style={[contentStyle]}>
          {_.map(content, // @ts-ignore
        ({
          text,
          ...others
        } = {}, index) => {
          return !_.isUndefined(text) && <Text testID={`${testID}.text.${index}`} key={index} {...others}>
                    {text}
                  </Text>;
        })}
        </View>
        {trailingIcon && <Image testID={`${testID}.trailingIcon`} {...trailingIcon} />}
      </>;
  };
  renderImage = () => {
    const {
      imageSource,
      imageStyle,
      imageProps,
      testID
    } = this.props; // not actually needed, instead of adding ts-ignore

    if (imageSource) {
      return <Image testID={`${testID}.image`} source={imageSource} style={imageStyle} customOverlayContent={this.renderContent()} {...imageProps} />;
    }
  };

  render() {
    const {
      imageSource,
      context: {
        borderStyle
      },
      style,
      ...others
    } = this.props;
    return <View style={[styles.container, borderStyle, style]} {...others}>
        {imageSource && this.renderImage()}
        {!imageSource && this.renderContent()}
      </View>;
  }

}

export default asBaseComponent(asCardChild(CardSection));
const styles = StyleSheet.create({
  container: {
    overflow: 'hidden'
  }
});