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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Popup = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _antdMobile = require("antd-mobile");
var _classnames = _interopRequireDefault(require("classnames"));
var _rcHooks = require("rc-hooks");
var React = _interopRequireWildcard(require("react"));
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", "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,
    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.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, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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(_antdMobile.Popup, (0, _objectSpread2.default)({
    visible: visible,
    onMaskClick: handleMaskClick,
    className: (0, _classnames.default)(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.default.CloseHead, (0, _objectSpread2.default)({
    style: headerStyle,
    className: headerClassName,
    title: title,
    showCloseIcon: closable,
    onClickCloseIcon: handleClickClose
  }, headerProps))), extra, /*#__PURE__*/React.createElement("div", {
    className: (0, _classnames.default)("".concat(prefixCls, "-content"), contentClassName),
    style: contentStyle
  }, children)));
};
/**
 * @deprecated 即将废弃，请使用 `BizPopup` 替代。
 */
var Popup = exports.Popup = BizPopup;
var _default = exports.default = BizPopup;