react-native-ios-utilities/lib/commonjs/example_components/ObjectPropertyDisplay.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.ObjectPropertyDisplay = ObjectPropertyDisplay;
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); }
/**
 * ```
 * ┌─────────────────────────────┐
 * │ Property            'Value' │
 * │ Object                      │
 * │  Property           'Value' │
 * │  Property           'Value' │
 * └─────────────────────────────┘
 * ```
 */
function ObjectPropertyDisplay(props) {
  const hasObject = props.object != null;
  const objectKeys = hasObject ? Object.keys(props.object) : [];
  return hasObject ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
          style: [styles.propertyLabelText, styles.propertyLabelObjectText, props.propertyLabelTextStyle],
          children: `${objKey}: `
        }, `label-${objKey}-${index}`), /*#__PURE__*/(0, _jsxRuntime.jsx)(ObjectPropertyDisplay, {
          object: value,
          recursiveStyle: [styles.objectPropertyDisplay, props.recursiveStyle],
          propertyLabelTextStyle: props.propertyLabelTextStyle,
          propertyValueTextStyle: props.propertyValueTextStyle
        }, `value-ObjectPropertyDisplay-${objKey}-${index}`)]
      }, `container-${objKey}-${index}`) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: styles.rowContainer,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
          style: [styles.propertyLabelText, props.propertyLabelTextStyle],
          children: `${objKey}: `
        }, `label-${objKey}-${index}`), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
          style: [styles.propertyValueText, props.propertyValueTextStyle],
          children: isValueObj ? `...` : `'${props.object[objKeyRaw]}'`
        }, `value-${objKey}-${index}`)]
      }, `container-${objKey}-${index}`);
    })
  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: [styles.rootContainerBase, styles.rootContainerWhenEmptyObject, props.recursiveStyle],
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
      style: [styles.emptyObjectText, props.emptyObjectText],
      children: 'Nothing to show'
    })
  });
}
;
const styles = _reactNative.StyleSheet.create({
  rootContainerBase: {
    marginTop: 12,
    paddingHorizontal: 12,
    paddingVertical: 12,
    backgroundColor: _Colors.Colors.INDIGO[100],
    borderRadius: 10
  },
  rootContainerWhenEmptyObject: {
    alignItems: 'center',
    justifyContent: 'center'
  },
  rootContainerWhenHasObject: {
    flexDirection: 'column',
    paddingVertical: 5
  },
  propertyLabelText: {
    flex: 1,
    fontSize: 12,
    fontWeight: '400',
    color: _Colors.Colors.PURPLE[1100],
    opacity: 0.8
  },
  propertyLabelObjectText: {
    flex: 0
  },
  propertyValueText: {
    fontSize: 12,
    fontWeight: '300',
    color: _Colors.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