mobile-more
Version:
基于 antd-mobile v5 扩展移动端 UI 组件
80 lines • 3.78 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["title", "extra", "header", "headerStyle", "headerClassName", "headerProps", "contentStyle", "contentClassName", "closable", "maskClosable", "onMaskClick", "visible", "onVisibleChange", "children", "trigger", "className", "onClose"];
import { Popup as BasePopup } from 'antd-mobile';
import classnames from 'classnames';
import { useControllableValue } from 'rc-hooks';
import * as React from 'react';
import { prefixClass } from '../../config';
import BizHead from '../BizHead';
import "./index.css";
var prefixCls = "".concat(prefixClass, "-popup");
var BizPopup = function BizPopup(props) {
var title = props.title,
extra = props.extra,
header = props.header,
headerStyle = props.headerStyle,
headerClassName = props.headerClassName,
headerProps = props.headerProps,
contentStyle = props.contentStyle,
contentClassName = props.contentClassName,
_props$closable = props.closable,
closable = _props$closable === void 0 ? true : _props$closable,
_props$maskClosable = props.maskClosable,
maskClosable = _props$maskClosable === void 0 ? !props.showCloseButton : _props$maskClosable,
onMaskClick = props.onMaskClick,
outVisible = props.visible,
onVisibleChange = props.onVisibleChange,
children = props.children,
trigger = props.trigger,
className = props.className,
customOnClose = props.onClose,
restProps = _objectWithoutProperties(props, _excluded);
var _useControllableValue = useControllableValue(props, {
valuePropName: 'visible',
trigger: 'onVisibleChange'
}),
_useControllableValue2 = _slicedToArray(_useControllableValue, 2),
visible = _useControllableValue2[0],
changeVisible = _useControllableValue2[1];
var handleMaskClick = React.useCallback(function (e) {
if (maskClosable) {
changeVisible(false);
}
onMaskClick === null || onMaskClick === void 0 ? void 0 : onMaskClick(e);
}, [maskClosable, onMaskClick, changeVisible]);
var handleClickClose = React.useCallback(function () {
changeVisible(false);
}, [changeVisible]);
return /*#__PURE__*/React.createElement(React.Fragment, null, trigger && /*#__PURE__*/React.cloneElement(trigger, _objectSpread(_objectSpread({}, trigger.props), {}, {
onClick: function onClick(e) {
var _trigger$props, _trigger$props$onClic;
changeVisible(true);
(_trigger$props = trigger.props) === null || _trigger$props === void 0 ? void 0 : (_trigger$props$onClic = _trigger$props.onClick) === null || _trigger$props$onClic === void 0 ? void 0 : _trigger$props$onClic.call(_trigger$props, e);
}
})), /*#__PURE__*/React.createElement(BasePopup, _objectSpread({
visible: visible,
onMaskClick: handleMaskClick,
className: classnames(prefixCls, className),
onClose: function onClose() {
changeVisible(false);
customOnClose === null || customOnClose === void 0 ? void 0 : customOnClose();
},
destroyOnClose: true
}, restProps), typeof header !== 'undefined' ? header : (/*#__PURE__*/React.createElement(BizHead.CloseHead, _objectSpread({
style: headerStyle,
className: headerClassName,
title: title,
showCloseIcon: closable,
onClickCloseIcon: handleClickClose
}, headerProps))), extra, /*#__PURE__*/React.createElement("div", {
className: classnames("".concat(prefixCls, "-content"), contentClassName),
style: contentStyle
}, children)));
};
/**
* @deprecated 即将废弃，请使用 `BizPopup` 替代。
*/
export var Popup = BizPopup;
export default BizPopup;