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

Build full featured iOS & Android apps using ZMP & React

import React, { useRef, useEffect } from 'react';
import { classNames } from '../shared/utils';
import { colorClasses } from '../shared/mixins';
import Badge from './badge';

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 = useRef(null);
  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.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.createElement("i", {
      className: "icon icon-" + (radio ? 'radio' : 'checkbox')
    });
  } // Media


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

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

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


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

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

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

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

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

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

    if (badge) {
      badgeEl = /*#__PURE__*/React.createElement(Badge, {
        color: badgeColor
      }, badge);
    }

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

  if (isMediaComputed) {
    titleRowEl = /*#__PURE__*/React.createElement("div", {
      className: "item-title-row"
    }, slots['before-title'], titleEl, slots['after-title'], afterWrapEl);
    innerEl = /*#__PURE__*/React.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.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 = classNames('item-content', {
    'item-checkbox': checkbox,
    'item-radio': radio,
    'item-radio-icon-start': radio && radioIcon === 'start',
    'item-radio-icon-end': radio && radioIcon === 'end'
  }, colorClasses(props));
  return /*#__PURE__*/React.createElement(ItemContentTag, {
    className: classes,
    onClick: onClick
  }, isSortableComputed && sortable !== false && isSortableOppositeComputed && /*#__PURE__*/React.createElement("div", {
    className: "sortable-handler"
  }), slots['content-start'], inputEl, inputIconEl, mediaEl, innerEl, slots.content, slots['content-end']);
};

ListItemContent.displayName = 'zmp-list-item-content';
export default ListItemContent;