@flatbiz/antd/dist/drawer-1AS_mYsB.js

/*! @flatjs/forge MIT @flatbiz/antd */

import _CloseOutlined from '@ant-design/icons/es/icons/CloseOutlined.js';
import { b as _objectSpread2, a as _slicedToArray } from './_rollupPluginBabelHelpers-BspM60Sw.js';
import { isPromise } from '@dimjs/lang/is-promise';
import { forwardRef, useState, useMemo } from 'react';
import { createPortal } from 'react-dom';
import { Resizable } from 'react-resizable';
import { useMemoizedFn } from 'ahooks';
import { Button, Space } from 'antd';
import { c as classNames } from './index-C6y8q2MK.js';
import { B as ButtonWrapper } from './button-wrapper-BGjkUPpk.js';
import { jsx, jsxs } from 'react/jsx-runtime';

var ResizeHandle = /*#__PURE__*/forwardRef(function (props, ref) {
  return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
    ref: ref
  }, props), {}, {
    className: "resize-border"
  }));
});

var zIndex = 10;
var getZindex = function getZindex() {
  zIndex++;
  return zIndex;
};

var ResizableDrawer = function ResizableDrawer(_ref) {
  var open = _ref.open,
    onClose = _ref.onClose,
    _ref$title = _ref.title,
    title = _ref$title === void 0 ? '抽屉标题' : _ref$title,
    _ref$width = _ref.width,
    initialWidth = _ref$width === void 0 ? 600 : _ref$width,
    children = _ref.children,
    footer = _ref.footer,
    _ref$maskClosable = _ref.maskClosable,
    maskClosable = _ref$maskClosable === void 0 ? true : _ref$maskClosable,
    className = _ref.className,
    style = _ref.style,
    _ref$mask = _ref.mask,
    mask = _ref$mask === void 0 ? true : _ref$mask,
    styles = _ref.styles,
    headerExtraRender = _ref.headerExtraRender,
    zIndex = _ref.zIndex,
    onOk = _ref.onOk,
    okText = _ref.okText,
    cancelText = _ref.cancelText,
    hidenFooter = _ref.hidenFooter,
    _ref$minConstraints = _ref.minConstraints,
    minConstraints = _ref$minConstraints === void 0 ? [400, 0] : _ref$minConstraints,
    _ref$maxConstraints = _ref.maxConstraints,
    maxConstraints = _ref$maxConstraints === void 0 ? [1200, 0] : _ref$maxConstraints;
  var _useState = useState(initialWidth),
    _useState2 = _slicedToArray(_useState, 2),
    width = _useState2[0],
    setWidth = _useState2[1];
  var onResize = function onResize(_, data) {
    var size = data.size;
    setWidth(size.width);
  };
  // 遮罩层点击
  var handleMaskClick = function handleMaskClick(e) {
    e.stopPropagation();
    if (maskClosable) {
      onClose === null || onClose === void 0 || onClose();
    }
  };

  // 计算宽度样式
  var widthStyle = typeof width === 'number' ? "".concat(width, "px") : width;
  var drawerStyle = open ? {
    transform: 'translateX(0)',
    opacity: 1
  } : {
    transform: 'translateX(100%)',
    opacity: 0
  };
  var maskOpacity = open ? 1 : 0;
  var zIndexInner = useMemo(function () {
    return zIndex ? zIndex : 10 + getZindex();
  }, [zIndex]);
  var onOkHandle = useMemoizedFn(function (e) {
    if (onOk) {
      var response = onOk(e);
      if (response && isPromise(response)) {
        return response.then(onClose);
      }
    }
    return onClose === null || onClose === void 0 ? void 0 : onClose();
  });
  return /*#__PURE__*/createPortal(/*#__PURE__*/jsxs("div", {
    className: classNames('drawer-resizable', {
      'drawer-resizable-visible': open
    }, className),
    style: !mask ? {
      width: widthStyle,
      zIndex: zIndexInner
    } : {
      left: 0,
      zIndex: zIndexInner
    },
    children: [mask ? /*#__PURE__*/jsx("div", {
      className: "drawer-resizable-mask",
      style: {
        opacity: maskOpacity
      },
      onClick: handleMaskClick
    }) : null, /*#__PURE__*/jsxs("div", {
      className: "drawer-resizable-content",
      style: _objectSpread2(_objectSpread2({
        width: widthStyle
      }, drawerStyle), style),
      children: [/*#__PURE__*/jsxs("div", {
        className: "drawer-resizable-header",
        style: styles === null || styles === void 0 ? void 0 : styles.header,
        children: [/*#__PURE__*/jsxs("div", {
          className: "drawer-resizable-title",
          children: [/*#__PURE__*/jsx(Button, {
            type: "text",
            className: "drawer-resizable-title-close",
            icon: /*#__PURE__*/jsx(_CloseOutlined, {}),
            onClick: function onClick(event) {
              event.stopPropagation();
              onClose === null || onClose === void 0 || onClose();
            }
          }), /*#__PURE__*/jsx("div", {
            className: "",
            children: title
          })]
        }), headerExtraRender ? /*#__PURE__*/jsx("div", {
          className: "drawer-resizable-title-extra",
          children: headerExtraRender
        }) : null]
      }), /*#__PURE__*/jsx("div", {
        className: "drawer-resizable-body",
        style: styles === null || styles === void 0 ? void 0 : styles.body,
        children: /*#__PURE__*/jsx(Resizable, {
          onResize: onResize,
          width: width,
          handle: /*#__PURE__*/jsx(ResizeHandle, {}),
          axis: "x",
          resizeHandles: ['w'],
          minConstraints: minConstraints,
          maxConstraints: maxConstraints,
          style: {
            height: '100%'
          },
          onResizeStop: function onResizeStop(e) {
            e.stopPropagation();
            var iframeList = document.querySelectorAll('iframe');
            iframeList.forEach(function (item) {
              item.style.pointerEvents = '';
            });
          },
          onResizeStart: function onResizeStart(e) {
            e.stopPropagation();
            var iframeList = document.querySelectorAll('iframe');
            iframeList.forEach(function (item) {
              item.style.pointerEvents = 'none';
            });
          },
          children: children
        })
      }), hidenFooter ? null : footer ? /*#__PURE__*/jsx("div", {
        className: "drawer-footer",
        style: styles === null || styles === void 0 ? void 0 : styles.footer,
        children: footer
      }) : /*#__PURE__*/jsx("div", {
        className: "drawer-footer",
        style: styles === null || styles === void 0 ? void 0 : styles.footer,
        children: /*#__PURE__*/jsxs(Space, {
          children: [/*#__PURE__*/jsx(ButtonWrapper, {
            onClick: onClose,
            children: cancelText || '取消'
          }), /*#__PURE__*/jsx(ButtonWrapper, {
            onClick: onOkHandle,
            type: "primary",
            loadingPosition: "center",
            children: okText || '确定'
          })]
        })
      })]
    })]
  }), document.body);
};

export { ResizableDrawer as R };
//# sourceMappingURL=drawer-1AS_mYsB.js.map