zmp-react/cjs/components/list-item-content.js

Build full featured iOS & Android apps using ZMP & React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _utils = require("../shared/utils");

var _mixins = require("../shared/mixins");

var _badge = _interopRequireDefault(require("./badge"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var ListItemContent = function ListItemContent(props) {
  var indeterminate = props.indeterminate,
      radio = props.radio,
      checkbox = props.checkbox,
      value = props.value,
      name = props.name,
      readonly = props.readonly,
      disabled = props.disabled,
      checked = props.checked,
      defaultChecked = props.defaultChecked,
      required = props.required,
      media = props.media,
      header = props.header,
      footer = props.footer,
      title = props.title,
      subtitle = props.subtitle,
      text = props.text,
      after = props.after,
      badge = props.badge,
      badgeColor = props.badgeColor,
      radioIcon = props.radioIcon,
      swipeout = props.swipeout,
      sortable = props.sortable,
      accordionItem = props.accordionItem,
      onChange = props.onChange,
      onClick = props.onClick,
      isMediaComputed = props.isMediaComputed,
      isSortableComputed = props.isSortableComputed,
      isSortableOppositeComputed = props.isSortableOppositeComputed,
      slots = props.slots;
  var inputElRef = (0, _react.useRef)(null);
  (0, _react.useEffect)(function () {
    if (inputElRef.current) {
      inputElRef.current.indeterminate = !!indeterminate;
    }
  }, [indeterminate]);
  var titleEl;
  var afterWrapEl;
  var afterEl;
  var badgeEl;
  var innerEl;
  var titleRowEl;
  var subtitleEl;
  var textEl;
  var mediaEl;
  var inputEl;
  var inputIconEl;
  var headerEl;
  var footerEl; // Input

  if (radio || checkbox) {
    inputEl = /*#__PURE__*/_react.default.createElement("input", {
      ref: inputElRef,
      value: value,
      name: name,
      checked: checked,
      defaultChecked: defaultChecked,
      readOnly: readonly,
      disabled: disabled,
      required: required,
      type: radio ? 'radio' : 'checkbox',
      onChange: onChange
    });
    inputIconEl = /*#__PURE__*/_react.default.createElement("i", {
      className: "icon icon-" + (radio ? 'radio' : 'checkbox')
    });
  } // Media


  if (media || slots.media) {
    var mediaImgEl;

    if (media) {
      mediaImgEl = /*#__PURE__*/_react.default.createElement("img", {
        src: media
      });
    }

    mediaEl = /*#__PURE__*/_react.default.createElement("div", {
      className: "item-media"
    }, mediaImgEl, slots.media);
  } // Inner Elements


  if (header || slots.header) {
    headerEl = /*#__PURE__*/_react.default.createElement("div", {
      className: "item-header"
    }, header, slots.header);
  }

  if (footer || slots.footer) {
    footerEl = /*#__PURE__*/_react.default.createElement("div", {
      className: "item-footer"
    }, footer, slots.footer);
  }

  if (title || slots.title || !isMediaComputed && headerEl || !isMediaComputed && footerEl) {
    titleEl = /*#__PURE__*/_react.default.createElement("div", {
      className: "item-title"
    }, !isMediaComputed && headerEl, title, slots.title, !isMediaComputed && footerEl);
  }

  if (subtitle || slots.subtitle) {
    subtitleEl = /*#__PURE__*/_react.default.createElement("div", {
      className: "item-subtitle"
    }, subtitle, slots.subtitle);
  }

  if (text || slots.text) {
    textEl = /*#__PURE__*/_react.default.createElement("div", {
      className: "item-text"
    }, text, slots.text);
  }

  if (after || badge || slots.after) {
    if (after) {
      afterEl = /*#__PURE__*/_react.default.createElement("span", null, after);
    }

    if (badge) {
      badgeEl = /*#__PURE__*/_react.default.createElement(_badge.default, {
        color: badgeColor
      }, badge);
    }

    afterWrapEl = /*#__PURE__*/_react.default.createElement("div", {
      className: "item-after"
    }, slots['after-start'], afterEl, badgeEl, slots.after, slots['after-end']);
  }

  if (isMediaComputed) {
    titleRowEl = /*#__PURE__*/_react.default.createElement("div", {
      className: "item-title-row"
    }, slots['before-title'], titleEl, slots['after-title'], afterWrapEl);
    innerEl = /*#__PURE__*/_react.default.createElement("div", {
      className: "item-inner"
    }, slots['inner-start'], headerEl, titleRowEl, subtitleEl, textEl, swipeout || accordionItem ? null : slots.default, slots.inner, footerEl, slots['inner-end']);
  } else {
    innerEl = /*#__PURE__*/_react.default.createElement("div", {
      className: "item-inner"
    }, slots['inner-start'], slots['before-title'], titleEl, slots['after-title'], afterWrapEl, swipeout || accordionItem ? null : slots.default, slots.inner, slots['inner-end']);
  }

  var ItemContentTag = checkbox || radio ? 'label' : 'div';
  var classes = (0, _utils.classNames)('item-content', {
    'item-checkbox': checkbox,
    'item-radio': radio,
    'item-radio-icon-start': radio && radioIcon === 'start',
    'item-radio-icon-end': radio && radioIcon === 'end'
  }, (0, _mixins.colorClasses)(props));
  return /*#__PURE__*/_react.default.createElement(ItemContentTag, {
    className: classes,
    onClick: onClick
  }, isSortableComputed && sortable !== false && isSortableOppositeComputed && /*#__PURE__*/_react.default.createElement("div", {
    className: "sortable-handler"
  }), slots['content-start'], inputEl, inputIconEl, mediaEl, innerEl, slots.content, slots['content-end']);
};

ListItemContent.displayName = 'zmp-list-item-content';
var _default = ListItemContent;
exports.default = _default;