mobile-more/lib/components/BizPopup/Popup.js

基于 antd-mobile v5 扩展移动端 UI 组件

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Popup = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _antdMobile = require("antd-mobile");
var _ut = require("ut2");
var _classnames = _interopRequireDefault(require("classnames"));
var _rcHooks = require("rc-hooks");
var _config = require("../../config");
var _BizHead = _interopRequireDefault(require("../BizHead"));
require("./index.css");
var _excluded = ["title", "extra", "header", "headerStyle", "headerClassName", "headerProps", "contentStyle", "contentClassName", "closable", "maskClosable", "onMaskClick", "visible", "onVisibleChange", "children", "trigger", "triggerRootProps", "className", "onClose"];
var prefixCls = "".concat(_config.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,
    triggerRootProps = props.triggerRootProps,
    className = props.className,
    customOnClose = props.onClose,
    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
  var _useControllableValue = (0, _rcHooks.useControllableValue)(props, {
      valuePropName: 'visible',
      trigger: 'onVisibleChange'
    }),
    _useControllableValue2 = (0, _slicedToArray2.default)(_useControllableValue, 2),
    visible = _useControllableValue2[0],
    changeVisible = _useControllableValue2[1];
  var handleMaskClick = _react.default.useCallback(function (e) {
    if (maskClosable) {
      changeVisible(false);
    }
    onMaskClick === null || onMaskClick === void 0 || onMaskClick(e);
  }, [maskClosable, onMaskClick, changeVisible]);
  var handleClickClose = _react.default.useCallback(function () {
    changeVisible(false);
  }, [changeVisible]);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, trigger && /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, triggerRootProps, {
    className: (0, _classnames.default)("".concat(prefixCls, "-trigger"), triggerRootProps === null || triggerRootProps === void 0 ? void 0 : triggerRootProps.className),
    onClick: function onClick(e) {
      var _triggerRootProps$onC;
      changeVisible(true);
      triggerRootProps === null || triggerRootProps === void 0 || (_triggerRootProps$onC = triggerRootProps.onClick) === null || _triggerRootProps$onC === void 0 || _triggerRootProps$onC.call(triggerRootProps, e);
    }
  }), trigger), /*#__PURE__*/_react.default.createElement(_antdMobile.Popup, (0, _extends2.default)({
    visible: visible,
    onMaskClick: handleMaskClick,
    className: (0, _classnames.default)(prefixCls, className),
    onClose: function onClose() {
      changeVisible(false);
      customOnClose === null || customOnClose === void 0 || customOnClose();
    },
    destroyOnClose: true
  }, restProps), !(0, _ut.isUndefined)(header) ? header : /*#__PURE__*/_react.default.createElement(_BizHead.default.CloseHead, (0, _extends2.default)({
    style: headerStyle,
    className: headerClassName,
    title: title,
    showCloseIcon: closable,
    onClickCloseIcon: handleClickClose
  }, headerProps)), extra, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)("".concat(prefixCls, "-content"), contentClassName),
    style: contentStyle
  }, children)));
};

/**
 * @deprecated 即将废弃，请使用 `BizPopup` 替代。
 */
var Popup = exports.Popup = BizPopup;

/**
 * @deprecated 即将废弃，请使用 `BizPopupProps` 替代。
 */
var _default = exports.default = BizPopup;