vantui-edit/es/collapse-item/index.js

一套适用于Taro3及React的vantui组件库

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["size", "name", "title", "value", "icon", "label", "disabled", "clickable", "border", "isLink", "renderTitle", "renderIcon", "renderRightIcon", "renderValue", "style", "className", "children", "index", "isOpen", "handleToggle"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import { useState, useEffect, useRef, useCallback } from 'react';
import { View } from '@tarojs/components';
import { nextTick } from '@tarojs/taro';
import * as utils from '../wxs/utils';
import { getRect } from '../common/utils';
import VanCell from '../cell/index';
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var compIndex = 0;
export function CollapseItem(props) {
  var size = props.size,
      _props$name = props.name,
      name = _props$name === void 0 ? null : _props$name,
      _props$title = props.title,
      title = _props$title === void 0 ? '' : _props$title,
      _props$value = props.value,
      value = _props$value === void 0 ? '' : _props$value,
      icon = props.icon,
      label = props.label,
      _props$disabled = props.disabled,
      disabled = _props$disabled === void 0 ? false : _props$disabled,
      _props$clickable = props.clickable,
      clickable = _props$clickable === void 0 ? false : _props$clickable,
      _props$border = props.border,
      border = _props$border === void 0 ? true : _props$border,
      _props$isLink = props.isLink,
      isLink = _props$isLink === void 0 ? true : _props$isLink,
      renderTitle = props.renderTitle,
      renderIcon = props.renderIcon,
      renderRightIcon = props.renderRightIcon,
      renderValue = props.renderValue,
      style = props.style,
      className = props.className,
      children = props.children,
      index = props.index,
      isOpen = props.isOpen,
      handleToggle = props.handleToggle,
      others = _objectWithoutProperties(props, _excluded);

  var _useState = useState('auto'),
      _useState2 = _slicedToArray(_useState, 2),
      currHeight = _useState2[0],
      setCurrHeight = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      init = _useState4[0],
      setInit = _useState4[1];

  var _useState5 = useState(compIndex++),
      _useState6 = _slicedToArray(_useState5, 1),
      curCompIndex = _useState6[0];

  var nextActionTimeout = useRef(null);

  var _useState7 = useState(-1),
      _useState8 = _slicedToArray(_useState7, 2),
      domHeight = _useState8[0],
      setDomHeight = _useState8[1];

  var isFirstRender = useRef(true);
  useEffect(function () {
    setTimeout(function () {
      getRect(null, "#content-class".concat(curCompIndex)).then(function (res) {
        if (res) {
          setDomHeight(res.height);
          nextTick(function () {
            setInit(true);
          });
        }
      });
    }, 33.33);
  }, [children]);
  useEffect(function () {
    if (domHeight !== -1) {
      if (nextActionTimeout.current) clearTimeout(nextActionTimeout.current);

      if (isOpen) {
        setCurrHeight("".concat(domHeight, "px"));
        nextActionTimeout.current = setTimeout(function () {
          setCurrHeight('auto');
        }, 300);
      } else {
        if (!isFirstRender.current) {
          setCurrHeight("".concat(domHeight, "px"));
          nextActionTimeout.current = setTimeout(function () {
            setCurrHeight('0px');
          });
        }
      }
    } else {
      setCurrHeight('0px');
    } // eslint-disable-next-line react-hooks/exhaustive-deps

  }, [isOpen, domHeight, init]);
  var handleToggle_ = useCallback( // @ts-ignore
  throttle(function () {
    if (disabled) return;
    isFirstRender.current = false;
    handleToggle && handleToggle(isOpen, name);
  }, 299), [handleToggle, disabled, isOpen, name]);
  return /*#__PURE__*/_jsxs(View, _objectSpread(_objectSpread({
    className: 'van-collapse-item  ' + (index !== 0 ? 'van-hairline--top' : '') + " ".concat(className || ''),
    style: style
  }, others), {}, {
    children: [/*#__PURE__*/_jsx(VanCell, {
      title: title,
      icon: icon,
      value: value,
      label: label,
      isLink: isLink,
      clickable: clickable,
      size: size,
      border: border && isOpen,
      className: utils.bem('collapse-item__title', {
        disabled: disabled,
        expanded: isOpen
      }) + ' van-cell',
      onClick: handleToggle_,
      renderTitle: /*#__PURE__*/_jsx(_Fragment, {
        children: renderTitle
      }),
      renderIcon: /*#__PURE__*/_jsx(_Fragment, {
        children: renderIcon
      }),
      renderRightIcon: /*#__PURE__*/_jsx(_Fragment, {
        children: renderRightIcon
      }),
      children: renderValue
    }), /*#__PURE__*/_jsx(View, {
      style: {
        height: init ? 'auto' : 0,
        overflow: 'hidden'
      },
      children: /*#__PURE__*/_jsx(View, {
        className: "van-collapse-item__content content-class",
        style: {
          height: currHeight
        },
        children: /*#__PURE__*/_jsx(View, {
          id: "content-class".concat(curCompIndex),
          className: "van-collapse-item__content_wrapper",
          children: children
        })
      })
    })]
  }));
}

var throttle = function throttle(fn, interval) {
  var timer;
  var startTime = new Date();
  return function () {
    var _this = this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    if (timer) {
      clearTimeout(timer);
    }

    args.forEach(function (item) {
      if (item.__proto__.constructor.name === 'SyntheticEvent') {
        item.persist();
      }
    });
    var endTime = new Date();
    var diffTime = endTime - startTime;
    var nextTime = interval - (endTime - startTime);

    if (diffTime >= interval) {
      // @ts-ignore
      fn.apply(this, args);
      startTime = new Date();
    } else {
      timer = setTimeout(function () {
        // @ts-ignore
        fn.apply(_this, args);
        startTime = new Date();
        timer = null;
        clearTimeout(timer);
      }, nextTime);
    }
  };
};

export default CollapseItem;