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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ExampleItemCard = ExampleItemCard;
var React = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _Colors = require("../misc/Colors.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
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.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__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
      style: [styles.headerTitleText, headerTitleTextStyle],
      children: props.title ?? 'N/A'
    }), props.subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
      style: styles.headerSubtitleText,
      children: props.subtitle
    })]
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: [styles.rootContainer, props.style],
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [styles.headerContainer, headerContainerStyle],
      children: shouldShowHeaderTitleIndex ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
          style: styles.headerTitleIndexText,
          children: `${props.index}. `
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
          style: styles.headerTitleContainer,
          children: titleAndSubtitleElement
        })]
      }) : titleAndSubtitleElement
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: [styles.bodyContainer, bodyContainerStyle],
      children: [descriptionMain && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
        style: styles.bodyDescriptionText,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
          style: [styles.bodyDescriptionLabelText, bodyDescriptionLabelTextStyle],
          children: 'Description: '
        }), descriptionMain]
      }), descriptionSub?.map((description, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: [styles.bodyDescriptionText, styles.bodyDescriptionSubText],
        children: description
      }, `desc-${index}`)), React.Children.count(props.children) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: props.extraContentContainerStyle,
        children: props.children
      })]
    })]
  });
}
;
const styles = _reactNative.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