@antmjs/vantui/lib/waterfall-flow/WaterfallFlowItem/index.js

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

"use strict";

var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.WaterfallFlowItem = WaterfallFlowItem;
var _react = _interopRequireWildcard(require("react"));
var _components = require("@tarojs/components");
var _hooks = require("../hooks");
var _useForceResize = require("./useForceResize");
var _jsxRuntime = require("react/jsx-runtime");
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 WaterfallFlowItem(_ref) {
  var renderItem = _ref.renderItem,
    item = _ref.item,
    attributes = _ref.attributes,
    onResize = _ref.onResize,
    onRemove = _ref.onRemove,
    width = _ref.width,
    _ref$calculationDelay = _ref.calculationDelay,
    calculationDelay = _ref$calculationDelay === void 0 ? 0 : _ref$calculationDelay;
  var forceUpdate = (0, _hooks.useForceUpdate)();
  var id = "waterfall-flow-item-".concat(item === null || item === void 0 ? void 0 : item.key);
  var compareId = "waterfall-flow-item-compare-".concat(item === null || item === void 0 ? void 0 : item.key);
  var contentId = "waterfall-flow-item-content-".concat(item === null || item === void 0 ? void 0 : item.key);
  var style = (0, _react.useMemo)(function () {
    if (!(attributes !== null && attributes !== void 0 && attributes.width)) {
      return {
        width: width,
        height: '1px'
      };
    }
    return {
      width: width,
      height: "".concat(attributes === null || attributes === void 0 ? void 0 : attributes.height, "px"),
      left: "".concat(attributes === null || attributes === void 0 ? void 0 : attributes.left, "px"),
      top: "".concat(attributes === null || attributes === void 0 ? void 0 : attributes.top, "px")
    };
  }, [attributes, width]);
  var contentStyle = (0, _react.useMemo)(function () {
    return {
      top: attributes !== null && attributes !== void 0 && attributes.height ? "-".concat((attributes === null || attributes === void 0 ? void 0 : attributes.height) - 1, "px") : '0'
    };
  }, [attributes]);
  var onItemResize = (0, _hooks.usePersistFn)(function (size) {
    if (typeof onResize !== 'function') {
      return;
    }
    onResize(item, size);
  });
  (0, _hooks.useSubscribeElementSize)("#".concat(contentId), "#".concat(compareId), "#".concat(id), onItemResize, calculationDelay, [item]);
  var onItemRemove = (0, _hooks.usePersistFn)(function () {
    if (typeof onRemove !== 'function') {
      return;
    }
    onRemove(item);
  });
  var forceResize = (0, _useForceResize.useForceResize)("#".concat(contentId), onItemResize);
  var child = (0, _react.useMemo)(function () {
    if (typeof renderItem !== 'function') {
      return null;
    }
    return renderItem(item, forceResize);
  }, [renderItem, item, forceResize]);
  (0, _react.useEffect)(function () {
    return function () {
      onItemRemove();
    };
  }, [onItemRemove]);
  (0, _react.useEffect)(function () {
    // 当元素发生变化时，主动刷新视图，保证内容更新以后的高度能够被正确计算
    forceUpdate();
  }, [item, forceUpdate]);
  (0, _react.useEffect)(function () {
    // 当元素宽度发生变化时，主动刷新视图，保证内容更新以后的高度能够被正确计算
    forceUpdate();
  }, [width, forceUpdate]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
    className: "van-waterfall-flow-item",
    style: style,
    id: id,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
      className: "van-compare-area",
      id: compareId,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
        className: "van-waterfall-flow-item-content",
        id: contentId,
        style: contentStyle,
        children: child
      })
    })
  });
}