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

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

import _extends from "@babel/runtime/helpers/esm/extends";
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", "triggerRootProps", "className", "onClose"];
import React from 'react';
import { Popup as BasePopup } from 'antd-mobile';
import { isUndefined } from 'ut2';
import classnames from 'classnames';
import { useControllableValue } from 'rc-hooks';
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,
    triggerRootProps = props.triggerRootProps,
    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 || onMaskClick(e);
  }, [maskClosable, onMaskClick, changeVisible]);
  var handleClickClose = React.useCallback(function () {
    changeVisible(false);
  }, [changeVisible]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, trigger && /*#__PURE__*/React.createElement("span", _extends({}, triggerRootProps, {
    className: classnames("".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.createElement(BasePopup, _extends({
    visible: visible,
    onMaskClick: handleMaskClick,
    className: classnames(prefixCls, className),
    onClose: function onClose() {
      changeVisible(false);
      customOnClose === null || customOnClose === void 0 || customOnClose();
    },
    destroyOnClose: true
  }, restProps), !isUndefined(header) ? header : /*#__PURE__*/React.createElement(BizHead.CloseHead, _extends({
    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;

/**
 * @deprecated 即将废弃，请使用 `BizPopupProps` 替代。
 */

export default BizPopup;