@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
183 lines (182 loc) • 9.21 kB
JavaScript
;
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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _components = require("@tarojs/components");
var _react = require("react");
var _utils = require("../common/utils");
var utils = _interopRequireWildcard(require("../wxs/utils"));
var _defaultProps = require("../default-props");
var computed = _interopRequireWildcard(require("./wxs"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["activeColor", "overlay", "zIndex", "duration", "direction", "closeOnClickOverlay", "closeOnClickOutside", "className", "style", "rectWrapper"];
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 ARRAY = [];
function DropdownMenu(props) {
var _useState = (0, _react.useState)((0, _defaultProps.get)().DropdownMenu),
_useState2 = (0, _slicedToArray2.default)(_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 = (0, _objectWithoutProperties2.default)(_d$props, _excluded);
var _useState3 = (0, _react.useState)([]),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
itemListData = _useState4[0],
setItemListData = _useState4[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();
return function () {
childrenInstance.current = [];
};
}, [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), rectWrapper).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) {
if ( /*#__PURE__*/(0, _react.isValidElement)(children)) {
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;