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

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

"use strict";

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

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CollapseItem = CollapseItem;
exports.default = void 0;

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

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

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

var _react = require("react");

var _components = require("@tarojs/components");

var _taro = require("@tarojs/taro");

var utils = _interopRequireWildcard(require("../wxs/utils"));

var _utils2 = require("../common/utils");

var _index = _interopRequireDefault(require("../cell/index"));

var _jsxRuntime = require("react/jsx-runtime");

var _excluded = ["size", "name", "title", "value", "icon", "label", "disabled", "clickable", "border", "isLink", "renderTitle", "renderIcon", "renderRightIcon", "renderValue", "style", "className", "children", "index", "isOpen", "handleToggle"];

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; }

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) { (0, _defineProperty2.default)(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; }

var compIndex = 0;

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 = (0, _objectWithoutProperties2.default)(props, _excluded);

  var _useState = (0, _react.useState)('auto'),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      currHeight = _useState2[0],
      setCurrHeight = _useState2[1];

  var _useState3 = (0, _react.useState)(false),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      init = _useState4[0],
      setInit = _useState4[1];

  var _useState5 = (0, _react.useState)(compIndex++),
      _useState6 = (0, _slicedToArray2.default)(_useState5, 1),
      curCompIndex = _useState6[0];

  var nextActionTimeout = (0, _react.useRef)(null);

  var _useState7 = (0, _react.useState)(-1),
      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
      domHeight = _useState8[0],
      setDomHeight = _useState8[1];

  var isFirstRender = (0, _react.useRef)(true);
  (0, _react.useEffect)(function () {
    setTimeout(function () {
      (0, _utils2.getRect)(null, "#content-class".concat(curCompIndex)).then(function (res) {
        if (res) {
          setDomHeight(res.height);
          (0, _taro.nextTick)(function () {
            setInit(true);
          });
        }
      });
    }, 33.33);
  }, [children]);
  (0, _react.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_ = (0, _react.useCallback)( // @ts-ignore
  throttle(function () {
    if (disabled) return;
    isFirstRender.current = false;
    handleToggle && handleToggle(isOpen, name);
  }, 299), [handleToggle, disabled, isOpen, name]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, _objectSpread(_objectSpread({
    className: 'van-collapse-item  ' + (index !== 0 ? 'van-hairline--top' : '') + " ".concat(className || ''),
    style: style
  }, others), {}, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
      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__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
        children: renderTitle
      }),
      renderIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
        children: renderIcon
      }),
      renderRightIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
        children: renderRightIcon
      }),
      children: renderValue
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
      style: {
        height: init ? 'auto' : 0,
        overflow: 'hidden'
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
        className: "van-collapse-item__content content-class",
        style: {
          height: currHeight
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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);
    }
  };
};

var _default = CollapseItem;
exports.default = _default;