zmp-react/esm/components/list.js

Build full featured iOS & Android apps using ZMP & React

import _extends from "@babel/runtime/helpers/extends";
import React, { forwardRef, useRef, useImperativeHandle } from 'react';
import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
import { classNames, getExtraAttrs, getSlots, flattenArray, emit, extend } from '../shared/utils';
import { colorClasses } from '../shared/mixins';
import { zmp, zmpready } from '../shared/zmp';
import { ListContext } from '../shared/list-context';
import { useTab } from '../shared/use-tab';
/* dts-import
import { VirtualList } from 'zmp-core/types';
*/


var List = /*#__PURE__*/forwardRef(function (props, ref) {
  var _zmpVirtualList = useRef(null);

  var className = props.className,
      id = props.id,
      style = props.style,
      inset = props.inset,
      xsmallInset = props.xsmallInset,
      smallInset = props.smallInset,
      mediumInset = props.mediumInset,
      largeInset = props.largeInset,
      xlargeInset = props.xlargeInset,
      mediaList = props.mediaList,
      sortable = props.sortable,
      sortableTapHold = props.sortableTapHold,
      sortableEnabled = props.sortableEnabled,
      sortableMoveElements = props.sortableMoveElements,
      sortableOpposite = props.sortableOpposite,
      accordionList = props.accordionList,
      accordionOpposite = props.accordionOpposite,
      contactsList = props.contactsList,
      simpleList = props.simpleList,
      linksList = props.linksList,
      menuList = props.menuList,
      noHairlines = props.noHairlines,
      noHairlinesBetween = props.noHairlinesBetween,
      noHairlinesMd = props.noHairlinesMd,
      noHairlinesBetweenMd = props.noHairlinesBetweenMd,
      noHairlinesIos = props.noHairlinesIos,
      noHairlinesBetweenIos = props.noHairlinesBetweenIos,
      noHairlinesAurora = props.noHairlinesAurora,
      noHairlinesBetweenAurora = props.noHairlinesBetweenAurora,
      noChevron = props.noChevron,
      chevronCenter = props.chevronCenter,
      tab = props.tab,
      tabActive = props.tabActive,
      form = props.form,
      formStoreData = props.formStoreData,
      inlineLabels = props.inlineLabels,
      virtualList = props.virtualList,
      virtualListParams = props.virtualListParams;
  var extraAttrs = getExtraAttrs(props);
  var elRef = useRef(null);

  var onSubmit = function onSubmit(event) {
    emit(props, 'submit', event);
  };

  var onSortableEnable = function onSortableEnable(el) {
    if (elRef.current !== el) return;
    emit(props, 'sortableEnable');
  };

  var onSortableDisable = function onSortableDisable(el) {
    if (elRef.current !== el) return;
    emit(props, 'sortableDisable');
  };

  var onSortableSort = function onSortableSort(el, sortData, listEl) {
    if (elRef.current !== listEl) return;
    emit(props, 'sortableSort', sortData);
  };

  useImperativeHandle(ref, function () {
    return {
      el: elRef.current,
      zmpVirtualList: function zmpVirtualList() {
        return _zmpVirtualList.current;
      }
    };
  });
  useTab(elRef, props);

  var attachEvents = function attachEvents() {
    zmpready(function () {
      zmp.on('sortableEnable', onSortableEnable);
      zmp.on('sortableDisable', onSortableDisable);
      zmp.on('sortableSort', onSortableSort);
    });
  };

  var detachEvents = function detachEvents() {
    if (!zmp) return;
    zmp.off('sortableEnable', onSortableEnable);
    zmp.off('sortableDisable', onSortableDisable);
    zmp.off('sortableSort', onSortableSort);
  };

  var onMount = function onMount() {
    zmpready(function () {
      if (!virtualList) return;
      var vlParams = virtualListParams || {};
      if (!vlParams.renderItem && !vlParams.renderExternal) return;
      _zmpVirtualList.current = zmp.virtualList.create(extend({
        el: elRef.current,
        on: {
          itemBeforeInsert: function itemBeforeInsert(itemEl, item) {
            var vl = this;
            emit(props, 'virtualItemBeforeInsert', vl, itemEl, item);
          },
          beforeClear: function beforeClear(fragment) {
            var vl = this;
            emit(props, 'virtualBeforeClear', vl, fragment);
          },
          itemsBeforeInsert: function itemsBeforeInsert(fragment) {
            var vl = this;
            emit(props, 'virtualItemsBeforeInsert', vl, fragment);
          },
          itemsAfterInsert: function itemsAfterInsert(fragment) {
            var vl = this;
            emit(props, 'virtualItemsAfterInsert', vl, fragment);
          }
        }
      }, vlParams));
    });
  };

  var onDestroy = function onDestroy() {
    if (!zmp) return;
    if (!(virtualList && _zmpVirtualList.current)) return;
    if (_zmpVirtualList.current.destroy) _zmpVirtualList.current.destroy();
    _zmpVirtualList.current = null;
  };

  useIsomorphicLayoutEffect(function () {
    onMount();
    return onDestroy;
  }, []);
  useIsomorphicLayoutEffect(function () {
    attachEvents();
    return detachEvents;
  });
  var slots = getSlots(props);
  var slotsList = slots.list,
      slotsDefault = slots.default;
  var rootChildrenBeforeList = [];
  var rootChildrenAfterList = [];
  var ulChildren = slotsList || [];
  var flattenSlots = flattenArray(slotsDefault);
  var wasUlChild = false;
  flattenSlots.forEach(function (child) {
    if (typeof child === 'undefined') return;
    var tag = child.type && (child.type.displayName || child.type.name);

    if (!tag && typeof child.type === 'string') {
      tag = child.type;
    }

    if (!tag || tag && !(tag === 'li' || tag.indexOf('zmp-list-item') >= 0 || tag.indexOf('zmp-list-button') >= 0 || tag.indexOf('zmp-list-input') >= 0)) {
      if (wasUlChild) rootChildrenAfterList.push(child);else rootChildrenBeforeList.push(child);
    } else if (tag) {
      wasUlChild = true;
      ulChildren.push(child);
    }
  });
  var ListTag = form ? 'form' : 'div';
  var classes = classNames(className, 'list', {
    inset: inset,
    'xsmall-inset': xsmallInset,
    'small-inset': smallInset,
    'medium-inset': mediumInset,
    'large-inset': largeInset,
    'xlarge-inset': xlargeInset,
    'media-list': mediaList,
    'simple-list': simpleList,
    'links-list': linksList,
    'menu-list': menuList,
    sortable: sortable,
    'sortable-tap-hold': sortableTapHold,
    'sortable-enabled': sortableEnabled,
    'sortable-opposite': sortableOpposite,
    'accordion-list': accordionList,
    'accordion-opposite': accordionOpposite,
    'contacts-list': contactsList,
    'virtual-list': virtualList,
    tab: tab,
    'tab-active': tabActive,
    'no-hairlines': noHairlines,
    'no-hairlines-md': noHairlinesMd,
    'no-hairlines-ios': noHairlinesIos,
    'no-hairlines-aurora': noHairlinesAurora,
    'no-hairlines-between': noHairlinesBetween,
    'no-hairlines-between-md': noHairlinesBetweenMd,
    'no-hairlines-between-ios': noHairlinesBetweenIos,
    'no-hairlines-between-aurora': noHairlinesBetweenAurora,
    'form-store-data': formStoreData,
    'inline-labels': inlineLabels,
    'no-chevron': noChevron,
    'chevron-center': chevronCenter
  }, colorClasses(props));
  return /*#__PURE__*/React.createElement(ListTag, _extends({
    id: id,
    ref: elRef,
    style: style,
    className: classes
  }, extraAttrs, {
    "data-sortable-move-elements": typeof sortableMoveElements !== 'undefined' ? sortableMoveElements.toString() : undefined,
    onSubmit: onSubmit
  }), /*#__PURE__*/React.createElement(ListContext.Provider, {
    value: {
      listIsMedia: mediaList,
      listIsSimple: simpleList,
      listIsSortable: sortable,
      listIsSortableOpposite: sortableOpposite
    }
  }, slots['before-list'], rootChildrenBeforeList, ulChildren.length > 0 && /*#__PURE__*/React.createElement("ul", null, ulChildren), slots['after-list'], rootChildrenAfterList));
});
List.displayName = 'zmp-list';
export default List;