rsuite 5.24.0 → 5.25.0

package/cjs/Ripple/Ripple.js

@@ -39,6 +39,9 @@ var getPosition = function getPosition(target, event) {
 };
 
 var Ripple = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _useCustom = (0, _utils.useCustom)(),
+      disableRipple = _useCustom.disableRipple;
+
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'span' : _props$as,
       className = props.className,
@@ -88,6 +91,11 @@ var Ripple = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       };
     }
   }, [handleMouseDown]);
+
+  if (disableRipple) {
+    return null;
+  }
+
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     className: classes,
     ref: (0, _utils.mergeRefs)(triggerRef, ref)

package/cjs/TreePicker/TreeNode.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import { WithAsProps, RsRefForwardingComponent, ItemDataType } from '../@types/common';
 export interface TreeNodeProps extends WithAsProps {
     rtl?: boolean;
     layer: number;
-    value?: any;
-    label?: any;
+    value?: ItemDataType['value'];
+    label?: ItemDataType['label'];
     focus?: boolean;
     loading?: boolean;
     expand?: boolean;

package/cjs/TreePicker/TreeNode.js

@@ -21,8 +21,6 @@ var _ArrowDown = _interopRequireDefault(require("@rsuite/icons/legacy/ArrowDown"
 
 var _Spinner = _interopRequireDefault(require("@rsuite/icons/legacy/Spinner"));
 
-var _reactToString = _interopRequireDefault(require("../utils/reactToString"));
-
 var _utils = require("../utils");
 
 var _treeUtils = require("../utils/treeUtils");
@@ -68,14 +66,6 @@ var TreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       merge = _useClassNames.merge,
       withClassPrefix = _useClassNames.withClassPrefix;
 
-  var getTitle = (0, _react.useCallback)(function () {
-    if (typeof label === 'string') {
-      return label;
-    } else if ( /*#__PURE__*/_react.default.isValidElement(label)) {
-      var nodes = (0, _reactToString.default)(label);
-      return nodes.join('');
-    }
-  }, [label]);
   var handleExpand = (0, _react.useCallback)(function (event) {
     var _event$nativeEvent, _event$nativeEvent$st;
 
@@ -165,7 +155,7 @@ var TreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     });
     return /*#__PURE__*/_react.default.createElement("span", {
       className: prefix('label'),
-      title: getTitle(),
+      title: (0, _treeUtils.stringifyTreeNodeLabel)(label),
       "data-layer": layer,
       "data-key": (nodeData === null || nodeData === void 0 ? void 0 : nodeData.refKey) || '',
       role: "button",

package/cjs/TreePicker/TreePicker.js

@@ -353,11 +353,15 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, [valueKey, childrenKey, expandItemValues, getChildren, onExpand, setExpandItemValues, loadChildren]);
   var handleDragStart = (0, _react.useCallback)(function (nodeData, event) {
     if (draggable) {
+      var _event$dataTransfer;
+
+      var dragMoverNode = (0, _treeUtils.createDragPreview)((0, _treeUtils.stringifyTreeNodeLabel)(nodeData[labelKey]), treePrefix('drag-preview'));
+      (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.setDragImage(dragMoverNode, 0, 0);
       setDragNodeKeys((0, _treeUtils.getDragNodeKeys)(nodeData, childrenKey, valueKey));
       setDragNode(flattenNodes[nodeData.refKey]);
       onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(nodeData, event);
     }
-  }, [draggable, childrenKey, flattenNodes, onDragStart, setDragNodeKeys, setDragNode, valueKey]);
+  }, [draggable, labelKey, treePrefix, setDragNodeKeys, childrenKey, valueKey, setDragNode, flattenNodes, onDragStart]);
   var handleDragEnter = (0, _react.useCallback)(function (nodeData, event) {
     if (dragNodeKeys.some(function (d) {
       return (0, _utils.shallowEqual)(d, nodeData[valueKey]);
@@ -376,6 +380,7 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     if (dragNodeKeys.some(function (d) {
       return (0, _utils.shallowEqual)(d, nodeData[valueKey]);
     })) {
+      event.dataTransfer.dropEffect = 'none';
       return;
     }
 
@@ -391,6 +396,7 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);
   }, [onDragLeave]);
   var handleDragEnd = (0, _react.useCallback)(function (nodeData, event) {
+    (0, _treeUtils.removeDragPreview)();
     setDragNode(null);
     setDragNodeKeys([]);
     setDragOverNodeKey(null);
@@ -406,6 +412,7 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onDrop === null || onDrop === void 0 ? void 0 : onDrop(dropData, event);
     }
 
+    (0, _treeUtils.removeDragPreview)();
     setDragNode(null);
     setDragNodeKeys([]);
     setDragOverNodeKey(null);

package/cjs/utils/createComponent.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export declare type ComponentProps = WithAsProps & React.HTMLAttributes<HTMLDivElement>;
-interface Props extends React.HTMLAttributes<HTMLDivElement> {
+interface Props<TElement extends React.ElementType> extends React.HTMLAttributes<HTMLDivElement> {
     name: string;
-    componentAs?: React.ElementType;
+    componentAs?: TElement;
     componentClassPrefix?: string;
 }
 /**
  * Create a component with `classPrefix` and `as` attributes.
  */
-declare function createComponent({ name, componentAs, componentClassPrefix, ...defaultProps }: Props): RsRefForwardingComponent<"div", ComponentProps>;
+declare function createComponent<TElement extends React.ElementType = 'div'>({ name, componentAs, componentClassPrefix, ...defaultProps }: Props<TElement>): RsRefForwardingComponent<TElement, ComponentProps>;
 export default createComponent;

package/cjs/utils/treeUtils.d.ts

@@ -262,3 +262,15 @@ export declare function getTreeNodeIndent(rtl: any, layer: any, absolute?: boole
  * @returns
  */
 export declare function getNodeFormattedRefKey(value: string | number): string;
+/**
+ * create drag preview when tree node start drag
+ * @param name
+ * @param className
+ * @returns
+ */
+export declare function createDragPreview(name: string, className: string): HTMLDivElement;
+/**
+ * remove drag preview when tree node drop
+ */
+export declare function removeDragPreview(): void;
+export declare function stringifyTreeNodeLabel(label: string | React.ReactNode): string;

package/cjs/utils/treeUtils.js

@@ -35,6 +35,9 @@ exports.focusToActiveTreeNode = focusToActiveTreeNode;
 exports.isSearching = isSearching;
 exports.getTreeNodeIndent = getTreeNodeIndent;
 exports.getNodeFormattedRefKey = getNodeFormattedRefKey;
+exports.createDragPreview = createDragPreview;
+exports.removeDragPreview = removeDragPreview;
+exports.stringifyTreeNodeLabel = stringifyTreeNodeLabel;
 exports.getScrollToIndex = exports.focusPreviousItem = exports.focusNextItem = exports.focusTreeNode = exports.getElementByDataKey = exports.getActiveItem = exports.getActiveIndex = exports.getFocusableItems = void 0;
 
 var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -1128,4 +1131,43 @@ function getTreeNodeIndent(rtl, layer, absolute) {
 
 function getNodeFormattedRefKey(value) {
   return "" + (typeof value === 'number' ? 'Number_' : 'String_') + value;
+}
+/**
+ * create drag preview when tree node start drag
+ * @param name
+ * @param className
+ * @returns
+ */
+
+
+function createDragPreview(name, className) {
+  var dragPreview = document.createElement('div');
+  dragPreview.id = 'rs-tree-drag-preview';
+  dragPreview.innerHTML = name;
+  dragPreview.classList.add(className);
+  document.body.appendChild(dragPreview);
+  return dragPreview;
+}
+/**
+ * remove drag preview when tree node drop
+ */
+
+
+function removeDragPreview() {
+  var _dragPreview$parentNo, _dragPreview$parentNo2;
+
+  var dragPreview = document.getElementById('rs-tree-drag-preview');
+  dragPreview === null || dragPreview === void 0 ? void 0 : (_dragPreview$parentNo = dragPreview.parentNode) === null || _dragPreview$parentNo === void 0 ? void 0 : (_dragPreview$parentNo2 = _dragPreview$parentNo.removeChild) === null || _dragPreview$parentNo2 === void 0 ? void 0 : _dragPreview$parentNo2.call(_dragPreview$parentNo, dragPreview);
+}
+
+function stringifyTreeNodeLabel(label) {
+  if (typeof label === 'string') {
+    return label;
+  } else if ( /*#__PURE__*/_react.default.isValidElement(label)) {
+    var _nodes2 = (0, _reactToString.default)(label);
+
+    return _nodes2.join('');
+  }
+
+  return '';
 }

package/cjs/utils/useCustom.js

@@ -41,7 +41,8 @@ function useCustom(keys, overrideLocale) {
       rtl = _useContext$rtl === void 0 ? getDefaultRTL() : _useContext$rtl,
       formatDate = _useContext.formatDate,
       parseDate = _useContext.parseDate,
-      toasters = _useContext.toasters;
+      toasters = _useContext.toasters,
+      disableRipple = _useContext.disableRipple;
 
   var componentLocale = (0, _extends2.default)({}, locale === null || locale === void 0 ? void 0 : locale.common, typeof keys === 'string' ? locale === null || locale === void 0 ? void 0 : locale[keys] : typeof keys === 'object' ? mergeObject(keys.map(function (key) {
     return locale === null || locale === void 0 ? void 0 : locale[key];
@@ -69,6 +70,7 @@ function useCustom(keys, overrideLocale) {
     locale: componentLocale,
     rtl: rtl,
     toasters: toasters,
+    disableRipple: disableRipple,
     formatDate: formatDate || defaultFormatDate,
     parseDate: parseDate || defaultParseDate
   };