@rc-component/drawer 1.2.0 → 1.3.0

package/README.md

@@ -1,15 +1,13 @@
-# rc-drawer
+# @rc-component/drawer
 
-[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![codecov](https://codecov.io/gh/react-component/drawer/branch/master/graph/badge.svg)](https://codecov.io/gh/react-component/drawer) [![node version][node-image]][node-url] [![npm download][download-image]][download-url]
+[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![codecov](https://codecov.io/gh/react-component/drawer/branch/master/graph/badge.svg)](https://codecov.io/gh/react-component/drawer) [![npm download][download-image]][download-url]
 
-[npm-image]: http://img.shields.io/npm/v/rc-drawer.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/rc-drawer
-[github-actions-image]: https://github.com/react-component/drawer/workflows/CI/badge.svg
-[github-actions-url]: https://github.com/react-component/drawer/actions
-[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
-[node-url]: http://nodejs.org/download/
-[download-image]: https://img.shields.io/npm/dm/rc-drawer.svg?style=flat-square
-[download-url]: https://npmjs.org/package/rc-drawer
+[npm-image]: http://img.shields.io/npm/v/@rc-component/drawer.svg?style=flat-square
+[npm-url]: http://npmjs.org/package/@rc-component/drawer
+[github-actions-image]: https://github.com/react-component/drawer/actions/workflows/react-component-ci.yml/badge.svg
+[github-actions-url]: https://github.com/react-component/drawer/actions/workflows/react-component-ci.yml
+[download-image]: https://img.shields.io/npm/dm/@rc-component/drawer.svg?style=flat-square
+[download-url]: https://npmjs.org/package/@rc-component/drawer
 
 ## Example
 
@@ -18,7 +16,7 @@ https://drawer-react-component.vercel.app/
 ## Usage
 
 ```js
-import Drawer from 'rc-drawer';
+import Drawer from '@rc-component/drawer';
 import React from 'react';
 import ReactDom from 'react-dom';
 
@@ -31,7 +29,7 @@ ReactDom.render(
 
 ## Install
 
-[![rc-drawer](https://nodei.co/npm/rc-drawer.png)](https://npmjs.org/package/rc-drawer)
+[![@rc-component/drawer](https://nodei.co/npm/@rc-component/drawer.png)](https://npmjs.org/package/@rc-component/drawer)
 
 ## Browser Support
 
@@ -45,7 +43,7 @@ ReactDom.render(
 | ------------------ | --------------------------------------------------------------------------- | -------------------------------------- | ----------------------------------------------------------------------------- |
 | className          | string                                                                      | null                                   | -                                                                             |
 | classNames         | { mask?: string; content?: string; wrapper?: string; }                      | -                                      | pass className to target area                                                 |
-| styles             | { mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; } | -                                      | pass style to target area                                                     |
+| styles             | { mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; } | `rc-drawer`                            | pass style to target area                                                     |
 | prefixCls          | string                                                                      | 'drawer'                               | prefix class                                                                  |
 | width              | string \| number                                                            | null                                   | drawer content wrapper width, drawer level transition width                   |
 | height             | string \| number                                                            | null                                   | drawer content wrapper height, drawer level transition height                 |

package/es/Drawer.d.ts

@@ -27,8 +27,8 @@ export interface DrawerProps extends Omit<DrawerPopupProps, 'prefixCls' | 'inlin
     maxSize?: number;
     /** Default size for uncontrolled resizable drawer */
     defaultSize?: number | string;
-    /** Resizable configuration - object with optional callbacks */
-    resizable?: {
+    /** Resizable configuration - boolean to enable/disable or object with optional callbacks */
+    resizable?: boolean | {
         onResize?: (size: number) => void;
         onResizeStart?: () => void;
         onResizeEnd?: () => void;

package/es/DrawerPanel.js

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import { RefContext } from "./context";
 import pickAttrs from "@rc-component/util/es/pickAttrs";
@@ -19,7 +19,7 @@ const DrawerPanel = props => {
   // =============================== Render ===============================
 
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames(`${prefixCls}-section`, className),
+    className: clsx(`${prefixCls}-section`, className),
     role: "dialog",
     ref: mergedRef
   }, pickAttrs(props, {

package/es/DrawerPopup.d.ts

@@ -41,7 +41,7 @@ export interface DrawerPopupProps extends DrawerPanelEvents, DrawerPanelAccessib
     drawerRender?: (node: React.ReactNode) => React.ReactNode;
     /** Default size for uncontrolled resizable drawer */
     defaultSize?: number | string;
-    resizable?: {
+    resizable?: boolean | {
         onResize?: (size: number) => void;
         onResizeStart?: () => void;
         onResizeEnd?: () => void;

package/es/DrawerPopup.js

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import CSSMotion from '@rc-component/motion';
 import KeyCode from "@rc-component/util/es/KeyCode";
 import pickAttrs from "@rc-component/util/es/pickAttrs";
@@ -161,7 +161,7 @@ const DrawerPopup = (props, ref) => {
     className: motionMaskClassName,
     style: motionMaskStyle
   }, maskRef) => /*#__PURE__*/React.createElement("div", {
-    className: classNames(`${prefixCls}-mask`, motionMaskClassName, drawerClassNames?.mask, maskClassName),
+    className: clsx(`${prefixCls}-mask`, motionMaskClassName, drawerClassNames?.mask, maskClassName),
     style: {
       ...motionMaskStyle,
       ...maskStyle,
@@ -214,9 +214,11 @@ const DrawerPopup = (props, ref) => {
 
   // =========================== Resize ===========================
   const wrapperRef = React.useRef(null);
+  const isResizable = !!resizable;
+  const resizeConfig = typeof resizable === 'object' && resizable || {};
   const onInternalResize = useEvent(size => {
     setCurrentSize(size);
-    resizable?.onResize?.(size);
+    resizeConfig.onResize?.(size);
   });
   const {
     dragElementProps,
@@ -230,8 +232,8 @@ const DrawerPopup = (props, ref) => {
     containerRef: wrapperRef,
     currentSize: mergedSize,
     onResize: onInternalResize,
-    onResizeStart: resizable?.onResizeStart,
-    onResizeEnd: resizable?.onResizeEnd
+    onResizeStart: resizeConfig.onResizeStart,
+    onResizeEnd: resizeConfig.onResizeEnd
   });
 
   // =========================== Events ===========================
@@ -264,7 +266,7 @@ const DrawerPopup = (props, ref) => {
       id: id,
       containerRef: motionRef,
       prefixCls: prefixCls,
-      className: classNames(className, drawerClassNames?.section),
+      className: clsx(className, drawerClassNames?.section),
       style: {
         ...style,
         ...styles?.section
@@ -274,7 +276,7 @@ const DrawerPopup = (props, ref) => {
     }), eventHandlers), children);
     return /*#__PURE__*/React.createElement("div", _extends({
       ref: wrapperRef,
-      className: classNames(`${prefixCls}-content-wrapper`, isDragging && `${prefixCls}-content-wrapper-dragging`, drawerClassNames?.wrapper, !isDragging && motionClassName),
+      className: clsx(`${prefixCls}-content-wrapper`, isDragging && `${prefixCls}-content-wrapper-dragging`, drawerClassNames?.wrapper, !isDragging && motionClassName),
       style: {
         ...motionStyle,
         ...wrapperStyle,
@@ -282,7 +284,7 @@ const DrawerPopup = (props, ref) => {
       }
     }, pickAttrs(props, {
       data: true
-    })), resizable && /*#__PURE__*/React.createElement("div", dragElementProps), drawerRender ? drawerRender(content) : content);
+    })), isResizable && /*#__PURE__*/React.createElement("div", dragElementProps), drawerRender ? drawerRender(content) : content);
   });
 
   // >>>>> Container
@@ -295,7 +297,7 @@ const DrawerPopup = (props, ref) => {
   return /*#__PURE__*/React.createElement(DrawerContext.Provider, {
     value: mergedContext
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(prefixCls, `${prefixCls}-${placement}`, rootClassName, {
+    className: clsx(prefixCls, `${prefixCls}-${placement}`, rootClassName, {
       [`${prefixCls}-open`]: open,
       [`${prefixCls}-inline`]: inline
     }),

package/es/hooks/useDrag.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useEvent } from '@rc-component/util';
 export default function useDrag(options) {
   const {
@@ -82,7 +82,7 @@ export default function useDrag(options) {
       };
     }
   }, [isDragging, handleMouseMove, handleMouseUp]);
-  const dragElementClassName = classNames(`${prefixCls}-dragger`, `${prefixCls}-dragger-${direction}`, {
+  const dragElementClassName = clsx(`${prefixCls}-dragger`, `${prefixCls}-dragger-${direction}`, {
     [`${prefixCls}-dragger-dragging`]: isDragging,
     [`${prefixCls}-dragger-horizontal`]: isHorizontal,
     [`${prefixCls}-dragger-vertical`]: !isHorizontal

package/lib/Drawer.d.ts

@@ -27,8 +27,8 @@ export interface DrawerProps extends Omit<DrawerPopupProps, 'prefixCls' | 'inlin
     maxSize?: number;
     /** Default size for uncontrolled resizable drawer */
     defaultSize?: number | string;
-    /** Resizable configuration - object with optional callbacks */
-    resizable?: {
+    /** Resizable configuration - boolean to enable/disable or object with optional callbacks */
+    resizable?: boolean | {
         onResize?: (size: number) => void;
         onResizeStart?: () => void;
         onResizeEnd?: () => void;

package/lib/DrawerPanel.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var React = _interopRequireWildcard(require("react"));
 var _context = require("./context");
 var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
 var _ref = require("@rc-component/util/lib/ref");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const DrawerPanel = props => {
   const {
@@ -28,7 +28,7 @@ const DrawerPanel = props => {
   // =============================== Render ===============================
 
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: (0, _classnames.default)(`${prefixCls}-section`, className),
+    className: (0, _clsx.clsx)(`${prefixCls}-section`, className),
     role: "dialog",
     ref: mergedRef
   }, (0, _pickAttrs.default)(props, {

package/lib/DrawerPopup.d.ts

@@ -41,7 +41,7 @@ export interface DrawerPopupProps extends DrawerPanelEvents, DrawerPanelAccessib
     drawerRender?: (node: React.ReactNode) => React.ReactNode;
     /** Default size for uncontrolled resizable drawer */
     defaultSize?: number | string;
-    resizable?: {
+    resizable?: boolean | {
         onResize?: (size: number) => void;
         onResizeStart?: () => void;
         onResizeEnd?: () => void;

package/lib/DrawerPopup.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _motion = _interopRequireDefault(require("@rc-component/motion"));
 var _KeyCode = _interopRequireDefault(require("@rc-component/util/lib/KeyCode"));
 var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
@@ -170,7 +170,7 @@ const DrawerPopup = (props, ref) => {
     className: motionMaskClassName,
     style: motionMaskStyle
   }, maskRef) => /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames.default)(`${prefixCls}-mask`, motionMaskClassName, drawerClassNames?.mask, maskClassName),
+    className: (0, _clsx.clsx)(`${prefixCls}-mask`, motionMaskClassName, drawerClassNames?.mask, maskClassName),
     style: {
       ...motionMaskStyle,
       ...maskStyle,
@@ -223,9 +223,11 @@ const DrawerPopup = (props, ref) => {
 
   // =========================== Resize ===========================
   const wrapperRef = React.useRef(null);
+  const isResizable = !!resizable;
+  const resizeConfig = typeof resizable === 'object' && resizable || {};
   const onInternalResize = (0, _util2.useEvent)(size => {
     setCurrentSize(size);
-    resizable?.onResize?.(size);
+    resizeConfig.onResize?.(size);
   });
   const {
     dragElementProps,
@@ -239,8 +241,8 @@ const DrawerPopup = (props, ref) => {
     containerRef: wrapperRef,
     currentSize: mergedSize,
     onResize: onInternalResize,
-    onResizeStart: resizable?.onResizeStart,
-    onResizeEnd: resizable?.onResizeEnd
+    onResizeStart: resizeConfig.onResizeStart,
+    onResizeEnd: resizeConfig.onResizeEnd
   });
 
   // =========================== Events ===========================
@@ -273,7 +275,7 @@ const DrawerPopup = (props, ref) => {
       id: id,
       containerRef: motionRef,
       prefixCls: prefixCls,
-      className: (0, _classnames.default)(className, drawerClassNames?.section),
+      className: (0, _clsx.clsx)(className, drawerClassNames?.section),
       style: {
         ...style,
         ...styles?.section
@@ -283,7 +285,7 @@ const DrawerPopup = (props, ref) => {
     }), eventHandlers), children);
     return /*#__PURE__*/React.createElement("div", _extends({
       ref: wrapperRef,
-      className: (0, _classnames.default)(`${prefixCls}-content-wrapper`, isDragging && `${prefixCls}-content-wrapper-dragging`, drawerClassNames?.wrapper, !isDragging && motionClassName),
+      className: (0, _clsx.clsx)(`${prefixCls}-content-wrapper`, isDragging && `${prefixCls}-content-wrapper-dragging`, drawerClassNames?.wrapper, !isDragging && motionClassName),
       style: {
         ...motionStyle,
         ...wrapperStyle,
@@ -291,7 +293,7 @@ const DrawerPopup = (props, ref) => {
       }
     }, (0, _pickAttrs.default)(props, {
       data: true
-    })), resizable && /*#__PURE__*/React.createElement("div", dragElementProps), drawerRender ? drawerRender(content) : content);
+    })), isResizable && /*#__PURE__*/React.createElement("div", dragElementProps), drawerRender ? drawerRender(content) : content);
   });
 
   // >>>>> Container
@@ -304,7 +306,7 @@ const DrawerPopup = (props, ref) => {
   return /*#__PURE__*/React.createElement(_context.default.Provider, {
     value: mergedContext
   }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames.default)(prefixCls, `${prefixCls}-${placement}`, rootClassName, {
+    className: (0, _clsx.clsx)(prefixCls, `${prefixCls}-${placement}`, rootClassName, {
       [`${prefixCls}-open`]: open,
       [`${prefixCls}-inline`]: inline
     }),

package/lib/hooks/useDrag.js

@@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useDrag;
 var React = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _util = require("@rc-component/util");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function useDrag(options) {
@@ -91,7 +90,7 @@ function useDrag(options) {
       };
     }
   }, [isDragging, handleMouseMove, handleMouseUp]);
-  const dragElementClassName = (0, _classnames.default)(`${prefixCls}-dragger`, `${prefixCls}-dragger-${direction}`, {
+  const dragElementClassName = (0, _clsx.clsx)(`${prefixCls}-dragger`, `${prefixCls}-dragger-${direction}`, {
     [`${prefixCls}-dragger-dragging`]: isDragging,
     [`${prefixCls}-dragger-horizontal`]: isHorizontal,
     [`${prefixCls}-dragger-vertical`]: !isHorizontal

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/drawer",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "drawer component for react",
   "keywords": [
     "react",
@@ -46,7 +46,7 @@
     "@rc-component/motion": "^1.1.4",
     "@rc-component/portal": "^2.0.0",
     "@rc-component/util": "^1.2.1",
-    "classnames": "^2.2.6"
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@ant-design/icons": "^5.3.0",
@@ -54,7 +54,6 @@
     "@rc-component/np": "^1.0.0",
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^16.3.0",
-    "@types/classnames": "^2.2.9",
     "@types/jest": "^29.5.11",
     "@types/node": "^24.3.0",
     "@types/raf": "^3.4.0",
@@ -64,7 +63,7 @@
     "antd": "^5.12.7",
     "dumi": "^2.2.0",
     "eslint": "^8.56.0",
-    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-jest": "^29.0.1",
     "eslint-plugin-unicorn": "^51.0.1",
     "father": "^4.0.0",
     "glob": "^10.3.10",