zmp-react/esm/zalo-ui-kits/list.js

Build full featured iOS & Android apps using ZMP & React

import _extends from "@babel/runtime/helpers/extends";
import React, { useRef, forwardRef, useImperativeHandle } from 'react';
import List from '../components/list';
import { classNames } from '../shared/utils';
import { validateSkeletonEffect } from '../../common/utils';
/* dts-import
import { VirtualList } from 'zmp-core/types';
import { SkeletonEffect } from '../../common/components-enum-props'
*/

/* dts-props
  id?: string | number;
  className?: string;
  style?: React.CSSProperties;
  inset? : boolean
  xsmallInset? : boolean
  smallInset? : boolean
  mediumInset? : boolean
  largeInset? : boolean
  xlargeInset? : boolean
  mediaList? : boolean
  sortable? : boolean
  sortableTapHold? : boolean
  sortableEnabled? : boolean
  sortableMoveElements? : boolean
  sortableOpposite? : boolean
  accordionList? : boolean
  accordionOpposite? : boolean
  contactsList? : boolean
  simpleList? : boolean
  linksList? : boolean
  menuList? : boolean
  noHairlines? : boolean
  noHairlinesBetween? : boolean
  noHairlinesMd? : boolean
  noHairlinesBetweenMd? : boolean
  noHairlinesIos? : boolean
  noHairlinesBetweenIos? : boolean
  noHairlinesAurora? : boolean
  noHairlinesBetweenAurora? : boolean
  noChevron? : boolean
  chevronCenter? : boolean
  tab? : boolean
  tabActive? : boolean
  form? : boolean
  inlineLabels? : boolean
  virtualList? : boolean
  virtualListParams? : Object
  loading: boolean
  skeletonEffect: keyof typeof SkeletonEffect;
  COLOR_PROPS
  onVirtualItemBeforeInsert? : (vl?: VirtualList.VirtualList, itemEl?: HTMLElement, item?: any) => void
  onVirtualBeforeClear? : (vl?: VirtualList.VirtualList, fragment?: any) => void
  onVirtualItemsBeforeInsert? : (vl?: VirtualList.VirtualList, fragment?: any) => void
  onVirtualItemsAfterInsert? : (vl?: VirtualList.VirtualList, fragment?: any) => void
  onSubmit? : (event?: any) => void
  onSortableEnable? : (...args: any[]) => void
  onSortableDisable? : (...args: any[]) => void
  onSortableSort? : (sortData?: any) => void
  onTabShow? : (el?: HTMLElement) => void
  onTabHide? : (el?: HTMLElement) => void
  ref?: React.MutableRefObject<{el: HTMLElement | null; zmpVirtualList: () => VirtualList.VirtualList}>;
  CHILDREN_PROP
*/

var ZMPList = /*#__PURE__*/forwardRef(function (props, ref) {
  var _classNames;

  var elRef = useRef(null);
  var className = props.className,
      loading = props.loading,
      skeletonEffect = props.skeletonEffect;
  var isValidEffectName = validateSkeletonEffect(skeletonEffect);
  var classes = classNames((_classNames = {
    'skeleton-text': loading
  }, _classNames["skeleton-effect-" + skeletonEffect] = isValidEffectName && loading, _classNames), className);

  if (!isValidEffectName && loading) {
    classes = classNames('skeleton-effect-wave', classes);
  }

  useImperativeHandle(ref, function () {
    return elRef.current;
  });
  return /*#__PURE__*/React.createElement(List, _extends({
    ref: elRef
  }, props, {
    className: classes
  }));
});
ZMPList.displayName = 'zmp-list';
export default ZMPList;