easy-antd-modal/lib/drawer/index.js

二次开发, 简化 Ant Design Modal 的使用方式

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _useModalEnhanced = require("@wuxh/use-modal-enhanced");
var _antd = require("antd");
var _hooks = require("../hooks");
var _useMergeOpen = require("../hooks/useMergeOpen");
var _jsxRuntime = require("react/jsx-runtime");
/** @internal */

/**
 * @description 方便用户自定义 `Modal` 的 `props`
 * @see [easy-antd-modal/typescript](https://wxh16144.github.io/easy-antd-modal/typescript)
 * @example
 * ```tsx
 * // 这段可以直接添加到你的任何 `.ts` 文件中，例如 `antd-modal.ts`
 * // 也可以添加到一个 `.d.ts` 文件中。确保这个文件包含在项目的 `tsconfig.json` 中的 "file" 字段内。
 * import 'easy-antd-modal'
 *
 * declare module 'easy-antd-modal' {
 *  interface DrawerProps {
 *    // `antd` 的 `Modal` 组件的 `visible` 属性
 *    visible?: boolean
 *  }
 * }
 *
 * // 为了确保这个文件被当作一个模块，添加至少一个 `export` 声明
 * export {}
 * ```
 */

/**
 * @description 方便用户自定义 `Modal` 的 `props`
 * @since 1.6.0
 */

/** @see [easy-antd-modal#Drawer](https://github.com/Wxh16144/easy-antd-modal/blob/master/src/drawer/index.tsx) */
const Drawer = props => {
  const prefixCls = (0, _hooks.usePrefixCls)('drawer', props.prefixCls);
  const [visible, {
    close
  }, {
    trigger,
    content
  }, restProps] = (0, _useModalEnhanced.useModalEnhanced)(props);
  const handleModalCancel = event => {
    close('onClose', event);
  };
  const openProp = (0, _hooks.useMergeOpen)({
    [_useMergeOpen.INNER_STATE]: visible,
    ...props
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [trigger, /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Drawer, {
      ...restProps,
      ...openProp,
      onClose: handleModalCancel,
      prefixCls: prefixCls,
      children: content
    })]
  });
};
var _default = exports.default = Drawer;