DrawerPanel.js 4.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. "use strict";
  2. "use client";
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  4. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  5. Object.defineProperty(exports, "__esModule", {
  6. value: true
  7. });
  8. exports.default = void 0;
  9. var React = _interopRequireWildcard(require("react"));
  10. var _classnames = _interopRequireDefault(require("classnames"));
  11. var _useClosable = _interopRequireWildcard(require("../_util/hooks/useClosable"));
  12. var _context = require("../config-provider/context");
  13. var _skeleton = _interopRequireDefault(require("../skeleton"));
  14. const DrawerPanel = props => {
  15. var _a, _b;
  16. const {
  17. prefixCls,
  18. title,
  19. footer,
  20. extra,
  21. loading,
  22. onClose,
  23. headerStyle,
  24. bodyStyle,
  25. footerStyle,
  26. children,
  27. classNames: drawerClassNames,
  28. styles: drawerStyles
  29. } = props;
  30. const drawerContext = (0, _context.useComponentConfig)('drawer');
  31. const customCloseIconRender = React.useCallback(icon => (/*#__PURE__*/React.createElement("button", {
  32. type: "button",
  33. onClick: onClose,
  34. className: `${prefixCls}-close`
  35. }, icon)), [onClose]);
  36. const [mergedClosable, mergedCloseIcon] = (0, _useClosable.default)((0, _useClosable.pickClosable)(props), (0, _useClosable.pickClosable)(drawerContext), {
  37. closable: true,
  38. closeIconRender: customCloseIconRender
  39. });
  40. const headerNode = React.useMemo(() => {
  41. var _a, _b;
  42. if (!title && !mergedClosable) {
  43. return null;
  44. }
  45. return /*#__PURE__*/React.createElement("div", {
  46. style: Object.assign(Object.assign(Object.assign({}, (_a = drawerContext.styles) === null || _a === void 0 ? void 0 : _a.header), headerStyle), drawerStyles === null || drawerStyles === void 0 ? void 0 : drawerStyles.header),
  47. className: (0, _classnames.default)(`${prefixCls}-header`, {
  48. [`${prefixCls}-header-close-only`]: mergedClosable && !title && !extra
  49. }, (_b = drawerContext.classNames) === null || _b === void 0 ? void 0 : _b.header, drawerClassNames === null || drawerClassNames === void 0 ? void 0 : drawerClassNames.header)
  50. }, /*#__PURE__*/React.createElement("div", {
  51. className: `${prefixCls}-header-title`
  52. }, mergedCloseIcon, title && /*#__PURE__*/React.createElement("div", {
  53. className: `${prefixCls}-title`
  54. }, title)), extra && /*#__PURE__*/React.createElement("div", {
  55. className: `${prefixCls}-extra`
  56. }, extra));
  57. }, [mergedClosable, mergedCloseIcon, extra, headerStyle, prefixCls, title]);
  58. const footerNode = React.useMemo(() => {
  59. var _a, _b;
  60. if (!footer) {
  61. return null;
  62. }
  63. const footerClassName = `${prefixCls}-footer`;
  64. return /*#__PURE__*/React.createElement("div", {
  65. className: (0, _classnames.default)(footerClassName, (_a = drawerContext.classNames) === null || _a === void 0 ? void 0 : _a.footer, drawerClassNames === null || drawerClassNames === void 0 ? void 0 : drawerClassNames.footer),
  66. style: Object.assign(Object.assign(Object.assign({}, (_b = drawerContext.styles) === null || _b === void 0 ? void 0 : _b.footer), footerStyle), drawerStyles === null || drawerStyles === void 0 ? void 0 : drawerStyles.footer)
  67. }, footer);
  68. }, [footer, footerStyle, prefixCls]);
  69. return /*#__PURE__*/React.createElement(React.Fragment, null, headerNode, /*#__PURE__*/React.createElement("div", {
  70. className: (0, _classnames.default)(`${prefixCls}-body`, drawerClassNames === null || drawerClassNames === void 0 ? void 0 : drawerClassNames.body, (_a = drawerContext.classNames) === null || _a === void 0 ? void 0 : _a.body),
  71. style: Object.assign(Object.assign(Object.assign({}, (_b = drawerContext.styles) === null || _b === void 0 ? void 0 : _b.body), bodyStyle), drawerStyles === null || drawerStyles === void 0 ? void 0 : drawerStyles.body)
  72. }, loading ? (/*#__PURE__*/React.createElement(_skeleton.default, {
  73. active: true,
  74. title: false,
  75. paragraph: {
  76. rows: 5
  77. },
  78. className: `${prefixCls}-body-skeleton`
  79. })) : children), footerNode);
  80. };
  81. var _default = exports.default = DrawerPanel;