vantui-edit/lib/dropdown-menu/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.DropdownMenu = DropdownMenu;
exports.default = void 0;

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

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

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

var _react = require("react");

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

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

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

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

var _excluded = ["activeColor", "overlay", "zIndex", "duration", "direction", "closeOnClickOverlay", "closeOnClickOutside", "className", "style"];

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

var ARRAY = [];

function DropdownMenu(props) {
  var activeColor = props.activeColor,
      _props$overlay = props.overlay,
      overlay = _props$overlay === void 0 ? true : _props$overlay,
      zIndex = props.zIndex,
      _props$duration = props.duration,
      duration = _props$duration === void 0 ? 200 : _props$duration,
      _props$direction = props.direction,
      direction = _props$direction === void 0 ? 'down' : _props$direction,
      _props$closeOnClickOv = props.closeOnClickOverlay,
      closeOnClickOverlay = _props$closeOnClickOv === void 0 ? true : _props$closeOnClickOv,
      _props$closeOnClickOu = props.closeOnClickOutside,
      closeOnClickOutside = _props$closeOnClickOu === void 0 ? true : _props$closeOnClickOu,
      className = props.className,
      style = props.style,
      others = (0, _objectWithoutProperties2.default)(props, _excluded);

  var _useState = (0, _react.useState)([]),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      itemListData = _useState2[0],
      setItemListData = _useState2[1];

  var childrenInstance = (0, _react.useRef)([]);
  var TimerKey = (0, _react.useRef)();
  var indexRef = (0, _react.useRef)("".concat(+new Date()).concat(Math.ceil(Math.random() * 10000)));
  var close = (0, _react.useCallback)(function () {
    childrenInstance.current.forEach(function (child) {
      child.toggle(false, {
        immediate: true
      });
    });
  }, []);
  (0, _react.useLayoutEffect)(function () {
    TimerKey.current = new Date();
    ARRAY.push({
      closeOnClickOutside: closeOnClickOutside,
      TimerKey: TimerKey,
      close: close
    });
  }, [closeOnClickOutside, close]);
  (0, _react.useLayoutEffect)(function () {
    updateItemListData();
  }, [others.children]);
  (0, _react.useEffect)(function () {
    return function () {
      ARRAY = (ARRAY || []).filter(function (item) {
        return item && item.TimerKey !== TimerKey;
      });
    };
  }, []);

  var updateItemListData = function updateItemListData() {
    setTimeout(function () {
      if (childrenInstance.current) {
        setItemListData(childrenInstance.current.map(function (child) {
          return child;
        }));
      }
    }, 333);
  };

  var toggleItem = (0, _react.useCallback)(function (active) {
    childrenInstance.current.forEach(function (item, index) {
      var showPopup = item.showPopup;

      if (index === Number(active)) {
        item.toggle();
      } else if (showPopup) {
        item.toggle(false, {
          immediate: true
        });
      }
    });
  }, []);
  var onTitleTap = (0, _react.useCallback)(function (event) {
    var index = event.currentTarget.dataset.index;
    var child = childrenInstance.current[index];

    if (!child.disabled) {
      ARRAY.forEach(function (menuItem) {
        if (menuItem && menuItem.closeOnClickOutside && menuItem.TimerKey !== TimerKey) {
          menuItem.close();
        }
      });
      setTimeout(function () {
        toggleItem(index);
      });
    }
  }, [toggleItem]);
  var setChildrenInstance = (0, _react.useCallback)(function (index, instance) {
    childrenInstance.current[index] = instance;
  }, []);
  var getChildWrapperStyle = (0, _react.useCallback)(function () {
    return (0, _utils.getRect)(null, ".van-dropdown-menu".concat(indexRef.current)).then(function (rect) {
      var wrapperStyle = {
        rect: rect
      };

      if (typeof zIndex === 'number') {
        wrapperStyle.zIndex = zIndex;
      }

      return wrapperStyle;
    });
  }, [zIndex]);
  var ResetChildren = (0, _react.useMemo)(function () {
    var res = [];

    _react.Children.map(others.children, function (children, index) {
      res.push( /*#__PURE__*/(0, _react.cloneElement)(children, {
        direction: direction,
        key: index,
        setChildrenInstance: setChildrenInstance,
        index: index,
        parentInstance: {
          overlay: overlay,
          duration: duration,
          activeColor: activeColor,
          closeOnClickOverlay: closeOnClickOverlay,
          direction: direction,
          getChildWrapperStyle: getChildWrapperStyle,
          updateItemListData: updateItemListData
        }
      }));
    });

    return res;
  }, [activeColor, closeOnClickOverlay, direction, duration, getChildWrapperStyle, others.children, overlay, setChildrenInstance]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
    className: "van-dropdown-menu van-dropdown-menu".concat(indexRef.current, " van-dropdown-menu--top-bottom  ").concat(className),
    style: utils.style([style, {
      position: 'relative'
    }]),
    children: [(itemListData || []).map(function (item, index) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
        "data-index": index,
        className: utils.bem('dropdown-menu__item', {
          disabled: item.disabled
        }),
        onClick: onTitleTap,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
          className: item.titleClass + ' ' + utils.bem('dropdown-menu__title', {
            active: item.showPopup,
            down: item.showPopup === (direction === 'down')
          }),
          style: item.showPopup ? 'color:' + activeColor : '',
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
            className: "van-ellipsis ".concat(item.titleClass || ''),
            children: computed.displayTitle(item)
          })
        })
      }, item.index);
    }), ResetChildren]
  });
}

var _default = DropdownMenu;
exports.default = _default;