@gizwits/vantui/es/dropdown-menu/index.js

机智云组件库

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["activeColor", "overlay", "zIndex", "duration", "direction", "closeOnClickOverlay", "closeOnClickOutside", "className", "style"];
import { View } from '@tarojs/components';
import { cloneElement, useCallback, useMemo, useRef, useEffect, useState, useLayoutEffect, Children } from 'react';
import { getRect } from '../common/utils';
import * as utils from '../wxs/utils';
import * as computed from './wxs';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var ARRAY = [];
export 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 = _objectWithoutProperties(props, _excluded);
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    itemListData = _useState2[0],
    setItemListData = _useState2[1];
  var childrenInstance = useRef([]);
  var TimerKey = useRef();
  var indexRef = useRef("".concat(+new Date()).concat(Math.ceil(Math.random() * 10000)));
  var close = useCallback(function () {
    childrenInstance.current.forEach(function (child) {
      child.toggle(false, {
        immediate: true
      });
    });
  }, []);
  useLayoutEffect(function () {
    TimerKey.current = new Date();
    ARRAY.push({
      closeOnClickOutside: closeOnClickOutside,
      TimerKey: TimerKey,
      close: close
    });
  }, [closeOnClickOutside, close]);
  useLayoutEffect(function () {
    updateItemListData();
  }, [others.children]);
  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 = 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 = 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 = useCallback(function (index, instance) {
    childrenInstance.current[index] = instance;
  }, []);
  var getChildWrapperStyle = useCallback(function () {
    return 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 = useMemo(function () {
    var res = [];
    Children.map(others.children, function (children, index) {
      res.push( /*#__PURE__*/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__*/_jsxs(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__*/_jsx(View, {
        "data-index": index,
        className: utils.bem('dropdown-menu__item', {
          disabled: item.disabled
        }),
        onClick: onTitleTap,
        children: /*#__PURE__*/_jsx(View, {
          className: item.titleClass + ' ' + utils.bem('dropdown-menu__title', {
            active: item.showPopup,
            down: item.showPopup === (direction === 'down')
          }),
          style: item.showPopup ? 'color:' + activeColor : '',
          children: /*#__PURE__*/_jsx(View, {
            className: "van-ellipsis ".concat(item.titleClass || ''),
            children: computed.displayTitle(item)
          })
        })
      }, item.index);
    }), ResetChildren]
  });
}
export default DropdownMenu;