react-native-ios-utilities/lib/module/example_components/ExampleItemCard.js

Utilities for react-native + iOS and wrappers for using swift together with fabric/paper + JSI

"use strict";

import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { Colors } from "../misc/Colors.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function ExampleItemCard(props) {
  const descriptionFiltered = props.description?.filter(item => item != null);
  const descriptionMain = descriptionFiltered?.[0];
  const descriptionSub = descriptionFiltered?.slice(1);
  const colors = props.colorPalette ?? Colors.BLUE;
  const bodyContainerStyle = {
    backgroundColor: colors[100]
  };
  const bodyDescriptionLabelTextStyle = {
    color: colors[1100]
  };
  const headerContainerStyle = {
    backgroundColor: colors.A700
  };
  const shouldShowHeaderTitleIndex = props.index != null;
  const isTitleOnly = props.subtitle == null;
  const headerTitleTextStyle = {
    ...(isTitleOnly && {
      fontSize: 16
    })
  };
  const titleAndSubtitleElement = /*#__PURE__*/_jsxs(React.Fragment, {
    children: [/*#__PURE__*/_jsx(Text, {
      style: [styles.headerTitleText, headerTitleTextStyle],
      children: props.title ?? 'N/A'
    }), props.subtitle && /*#__PURE__*/_jsx(Text, {
      style: styles.headerSubtitleText,
      children: props.subtitle
    })]
  });
  return /*#__PURE__*/_jsxs(View, {
    style: [styles.rootContainer, props.style],
    children: [/*#__PURE__*/_jsx(View, {
      style: [styles.headerContainer, headerContainerStyle],
      children: shouldShowHeaderTitleIndex ? /*#__PURE__*/_jsxs(React.Fragment, {
        children: [/*#__PURE__*/_jsx(Text, {
          style: styles.headerTitleIndexText,
          children: `${props.index}. `
        }), /*#__PURE__*/_jsx(View, {
          style: styles.headerTitleContainer,
          children: titleAndSubtitleElement
        })]
      }) : titleAndSubtitleElement
    }), /*#__PURE__*/_jsxs(View, {
      style: [styles.bodyContainer, bodyContainerStyle],
      children: [descriptionMain && /*#__PURE__*/_jsxs(Text, {
        style: styles.bodyDescriptionText,
        children: [/*#__PURE__*/_jsx(Text, {
          style: [styles.bodyDescriptionLabelText, bodyDescriptionLabelTextStyle],
          children: 'Description: '
        }), descriptionMain]
      }), descriptionSub?.map((description, index) => /*#__PURE__*/_jsx(Text, {
        style: [styles.bodyDescriptionText, styles.bodyDescriptionSubText],
        children: description
      }, `desc-${index}`)), React.Children.count(props.children) > 0 && /*#__PURE__*/_jsx(View, {
        style: props.extraContentContainerStyle,
        children: props.children
      })]
    })]
  });
}
;
const styles = StyleSheet.create({
  rootContainer: {
    borderRadius: 10,
    overflow: 'hidden'
  },
  headerContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 15,
    paddingVertical: 8
  },
  headerTitleContainer: {
    marginLeft: 5
  },
  headerTitleText: {
    flex: 1,
    fontSize: 14,
    fontWeight: '600',
    color: 'rgba(255,255,255,0.9)'
  },
  headerTitleIndexText: {
    fontSize: 16,
    fontWeight: '800',
    color: 'rgba(255,255,255,0.6)'
  },
  headerSubtitleText: {
    fontSize: 12,
    color: 'rgba(255,255,255,0.8)',
    fontWeight: '400'
  },
  bodyContainer: {
    paddingHorizontal: 12,
    paddingTop: 7,
    paddingBottom: 10
  },
  bodyDescriptionText: {
    fontWeight: '300',
    color: 'rgba(0,0,0,0.75)'
  },
  bodyDescriptionLabelText: {
    fontWeight: 'bold'
  },
  bodyDescriptionSubText: {
    marginTop: 10
  }
});
//# sourceMappingURL=ExampleItemCard.js.map