@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
172 lines • 7.38 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _excluded = ["activeColor", "overlay", "zIndex", "duration", "direction", "closeOnClickOverlay", "closeOnClickOutside", "className", "style", "rectWrapper"];
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 { View } from '@tarojs/components';
import { cloneElement, useCallback, useMemo, useRef, useEffect, useState, useLayoutEffect, Children, isValidElement } from 'react';
import { getRect } from '../common/utils';
import * as utils from '../wxs/utils';
import { get } from '../default-props';
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 _useState = useState(get().DropdownMenu),
_useState2 = _slicedToArray(_useState, 1),
d = _useState2[0];
var _d$props = _objectSpread(_objectSpread({}, d), props),
activeColor = _d$props.activeColor,
_d$props$overlay = _d$props.overlay,
overlay = _d$props$overlay === void 0 ? true : _d$props$overlay,
zIndex = _d$props.zIndex,
_d$props$duration = _d$props.duration,
duration = _d$props$duration === void 0 ? 200 : _d$props$duration,
_d$props$direction = _d$props.direction,
direction = _d$props$direction === void 0 ? 'down' : _d$props$direction,
_d$props$closeOnClick = _d$props.closeOnClickOverlay,
closeOnClickOverlay = _d$props$closeOnClick === void 0 ? true : _d$props$closeOnClick,
_d$props$closeOnClick2 = _d$props.closeOnClickOutside,
closeOnClickOutside = _d$props$closeOnClick2 === void 0 ? true : _d$props$closeOnClick2,
className = _d$props.className,
style = _d$props.style,
_d$props$rectWrapper = _d$props.rectWrapper,
rectWrapper = _d$props$rectWrapper === void 0 ? '' : _d$props$rectWrapper,
others = _objectWithoutProperties(_d$props, _excluded);
var _useState3 = useState([]),
_useState4 = _slicedToArray(_useState3, 2),
itemListData = _useState4[0],
setItemListData = _useState4[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();
return function () {
childrenInstance.current = [];
};
}, [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), rectWrapper).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) {
if ( /*#__PURE__*/isValidElement(children)) {
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;