react-native-ios-utilities/lib/module/example_components/ObjectPropertyDisplay.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";

/**
 * ```
 * ┌─────────────────────────────┐
 * │ Property            'Value' │
 * │ Object                      │
 * │  Property           'Value' │
 * │  Property           'Value' │
 * └─────────────────────────────┘
 * ```
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function ObjectPropertyDisplay(props) {
  const hasObject = props.object != null;
  const objectKeys = hasObject ? Object.keys(props.object) : [];
  return hasObject ? /*#__PURE__*/_jsx(View, {
    style: [styles.rootContainerBase, styles.rootContainerWhenHasObject, props.recursiveStyle, props.style],
    children: objectKeys.map((objKeyRaw, index) => {
      const objKey = String(objKeyRaw);
      const value = props.object[objKeyRaw];
      const isValueObj = typeof value === 'object' && value !== null;
      return isValueObj ? /*#__PURE__*/_jsxs(View, {
        children: [/*#__PURE__*/_jsx(Text, {
          style: [styles.propertyLabelText, styles.propertyLabelObjectText, props.propertyLabelTextStyle],
          children: `${objKey}: `
        }, `label-${objKey}-${index}`), /*#__PURE__*/_jsx(ObjectPropertyDisplay, {
          object: value,
          recursiveStyle: [styles.objectPropertyDisplay, props.recursiveStyle],
          propertyLabelTextStyle: props.propertyLabelTextStyle,
          propertyValueTextStyle: props.propertyValueTextStyle
        }, `value-ObjectPropertyDisplay-${objKey}-${index}`)]
      }, `container-${objKey}-${index}`) : /*#__PURE__*/_jsxs(View, {
        style: styles.rowContainer,
        children: [/*#__PURE__*/_jsx(Text, {
          style: [styles.propertyLabelText, props.propertyLabelTextStyle],
          children: `${objKey}: `
        }, `label-${objKey}-${index}`), /*#__PURE__*/_jsx(Text, {
          style: [styles.propertyValueText, props.propertyValueTextStyle],
          children: isValueObj ? `...` : `'${props.object[objKeyRaw]}'`
        }, `value-${objKey}-${index}`)]
      }, `container-${objKey}-${index}`);
    })
  }) : /*#__PURE__*/_jsx(View, {
    style: [styles.rootContainerBase, styles.rootContainerWhenEmptyObject, props.recursiveStyle],
    children: /*#__PURE__*/_jsx(Text, {
      style: [styles.emptyObjectText, props.emptyObjectText],
      children: 'Nothing to show'
    })
  });
}
;
const styles = StyleSheet.create({
  rootContainerBase: {
    marginTop: 12,
    paddingHorizontal: 12,
    paddingVertical: 12,
    backgroundColor: Colors.INDIGO[100],
    borderRadius: 10
  },
  rootContainerWhenEmptyObject: {
    alignItems: 'center',
    justifyContent: 'center'
  },
  rootContainerWhenHasObject: {
    flexDirection: 'column',
    paddingVertical: 5
  },
  propertyLabelText: {
    flex: 1,
    fontSize: 12,
    fontWeight: '400',
    color: Colors.PURPLE[1100],
    opacity: 0.8
  },
  propertyLabelObjectText: {
    flex: 0
  },
  propertyValueText: {
    fontSize: 12,
    fontWeight: '300',
    color: Colors.PURPLE[1100],
    opacity: 0.6
  },
  objectPropertyDisplay: {
    marginTop: 6,
    marginBottom: 6,
    paddingHorizontal: 7,
    paddingVertical: 5
  },
  rowContainer: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  emptyObjectText: {
    opacity: 0.75
  }
});
//# sourceMappingURL=ObjectPropertyDisplay.js.map