@pisell/materials 1.0.351 → 1.0.352

package/es/components/drag-sort-tree/TreeItem/index.js

@@ -4,18 +4,18 @@ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableTo
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { DndContext } from '@dnd-kit/core';
 import { Tooltip } from 'antd';
@@ -46,6 +46,10 @@ var TreeItem = function TreeItem(props) {
     transform = _useSortable.transform,
     transition = _useSortable.transition,
     isDragging = _useSortable.isDragging;
+  var _useState = useState(window.innerWidth < 600),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMobile = _useState2[0],
+    setIsMobile = _useState2[1];
   var style = {
     transform: CSS.Transform.toString(transform && _objectSpread(_objectSpread({}, transform), {}, {
       scaleY: 1
@@ -167,6 +171,17 @@ var TreeItem = function TreeItem(props) {
       }
     }))) : null;
   }, [childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.hiddenWarningIcon, item === null || item === void 0 ? void 0 : item.is_available]);
+  var handleWindowResize = function handleWindowResize() {
+    // 获取当前窗口的宽度
+    var windowWidth = window.innerWidth;
+    setIsMobile(windowWidth < 600);
+  };
+  useEffect(function () {
+    window.addEventListener('resize', handleWindowResize);
+    return function () {
+      window.removeEventListener('resize', handleWindowResize);
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(DndContext, {
     sensors: sensors,
     modifiers: [restrictToVerticalAxis, restrictToParentElement],
@@ -174,8 +189,8 @@ var TreeItem = function TreeItem(props) {
   }, /*#__PURE__*/React.createElement("div", _extends({
     ref: setNodeRef,
     style: style
-  }, attributes, listeners), /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefix, "-drag-sort-tree"), childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.className),
+  }, attributes, !isMobile ? listeners : {}), /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefix, "-drag-sort-tree"), childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.className, isMobile ? "".concat(prefix, "-drag-sort-phone-tree") : ''),
     style: {
       paddingLeft: !depth ? '10px' : "".concat(depth * 40, "px"),
       cursor: isDragging ? 'grabbing' : 'grab'
@@ -183,9 +198,12 @@ var TreeItem = function TreeItem(props) {
     onClick: onSelect
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames("".concat(prefix, "-drag-sort-tree-item"))
-  }, !(childrenProps !== null && childrenProps !== void 0 && childrenProps.hiddenDraggableIcon) ? /*#__PURE__*/React.createElement(DotsSix, {
-    className: classNames("".concat(prefix, "-drag-sort-tree-item-dot-icon"))
-  }) : null, /*#__PURE__*/React.createElement("div", {
+  }, !(childrenProps !== null && childrenProps !== void 0 && childrenProps.hiddenDraggableIcon) ? /*#__PURE__*/React.createElement(DotsSix, _extends({}, isMobile ? listeners : {}, {
+    className: classNames("".concat(prefix, "-drag-sort-tree-item-dot-icon")),
+    style: {
+      left: isMobile ? !depth ? '-14px' : '12px' : 0
+    }
+  })) : null, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefix, "-drag-sort-tree-title")
   }, (childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.titleRender) || (item === null || item === void 0 ? void 0 : item.title))), !depth ? rightIcon : warningIcon), renderChildren));
 };

package/es/components/drag-sort-tree/TreeItem/index.less

@@ -61,6 +61,13 @@
     width: 20px;
     color: #344054;
   }
-}
 
-  
+  // 移动端
+  &-drag-sort-phone-tree &-drag-sort-tree-item-dot-icon {
+    position: absolute;
+    color: #344054;
+    top: 0;
+    width: 40px;
+    height: 40px;
+  }
+}

package/lib/components/drag-sort-tree/TreeItem/index.js

@@ -64,6 +64,7 @@ var TreeItem = (props) => {
     transition,
     isDragging
   } = (0, import_sortable.useSortable)({ id });
+  const [isMobile, setIsMobile] = (0, import_react.useState)(window.innerWidth < 600);
   const style = {
     transform: import_utilities.CSS.Transform.toString(transform && { ...transform, scaleY: 1 }),
     transition
@@ -181,6 +182,16 @@ var TreeItem = (props) => {
       /* @__PURE__ */ import_react.default.createElement(import_icons.WarningOutlined, { style: { color: "#FF2020" } })
     )) : null;
   }, [childrenProps == null ? void 0 : childrenProps.hiddenWarningIcon, item == null ? void 0 : item.is_available]);
+  const handleWindowResize = () => {
+    let windowWidth = window.innerWidth;
+    setIsMobile(windowWidth < 600);
+  };
+  (0, import_react.useEffect)(() => {
+    window.addEventListener("resize", handleWindowResize);
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
   return /* @__PURE__ */ import_react.default.createElement(
     import_core.DndContext,
     {
@@ -188,27 +199,42 @@ var TreeItem = (props) => {
       modifiers: [import_modifiers.restrictToVerticalAxis, import_modifiers.restrictToParentElement],
       onDragEnd: handleDragEnd
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { ref: setNodeRef, style, ...attributes, ...listeners }, /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
-        className: (0, import_classnames.default)(
-          `${prefix}-drag-sort-tree`,
-          childrenProps == null ? void 0 : childrenProps.className
-        ),
-        style: {
-          paddingLeft: !depth ? "10px" : `${depth * 40}px`,
-          cursor: isDragging ? "grabbing" : "grab"
-        },
-        onClick: onSelect
+        ref: setNodeRef,
+        style,
+        ...attributes,
+        ...!isMobile ? listeners : {}
       },
-      /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${prefix}-drag-sort-tree-item`) }, !(childrenProps == null ? void 0 : childrenProps.hiddenDraggableIcon) ? /* @__PURE__ */ import_react.default.createElement(
-        import_DotsSix.default,
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
         {
-          className: (0, import_classnames.default)(`${prefix}-drag-sort-tree-item-dot-icon`)
-        }
-      ) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-drag-sort-tree-title` }, (childrenProps == null ? void 0 : childrenProps.titleRender) || (item == null ? void 0 : item.title))),
-      !depth ? rightIcon : warningIcon
-    ), renderChildren)
+          className: (0, import_classnames.default)(
+            `${prefix}-drag-sort-tree`,
+            childrenProps == null ? void 0 : childrenProps.className,
+            isMobile ? `${prefix}-drag-sort-phone-tree` : ""
+          ),
+          style: {
+            paddingLeft: !depth ? "10px" : `${depth * 40}px`,
+            cursor: isDragging ? "grabbing" : "grab"
+          },
+          onClick: onSelect
+        },
+        /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${prefix}-drag-sort-tree-item`) }, !(childrenProps == null ? void 0 : childrenProps.hiddenDraggableIcon) ? /* @__PURE__ */ import_react.default.createElement(
+          import_DotsSix.default,
+          {
+            ...isMobile ? listeners : {},
+            className: (0, import_classnames.default)(`${prefix}-drag-sort-tree-item-dot-icon`),
+            style: {
+              left: isMobile ? !depth ? "-14px" : "12px" : 0
+            }
+          }
+        ) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-drag-sort-tree-title` }, (childrenProps == null ? void 0 : childrenProps.titleRender) || (item == null ? void 0 : item.title))),
+        !depth ? rightIcon : warningIcon
+      ),
+      renderChildren
+    )
   );
 };
 var TreeItem_default = TreeItem;

package/lib/components/drag-sort-tree/TreeItem/index.less

@@ -61,6 +61,13 @@
     width: 20px;
     color: #344054;
   }
-}
 
-  
+  // 移动端
+  &-drag-sort-phone-tree &-drag-sort-tree-item-dot-icon {
+    position: absolute;
+    color: #344054;
+    top: 0;
+    width: 40px;
+    height: 40px;
+  }
+}

package/lowcode/drag-sort-tree/meta.ts

@@ -79,7 +79,7 @@ export default {
     },
     {
       name: "hiddenDraggableIcon",
-      title: { label: "隐藏拖拽图标", tip: "是否隐藏拖拽图标" },
+      title: { label: "隐藏拖拽图标", tip: "是否隐藏拖拽图标 | 谨慎隐藏，移动端根据拖拽图标进行拖拽" },
       propType: "bool",
       defaultValue: false,
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "1.0.351",
+  "version": "1.0.352",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -64,7 +64,7 @@
     "crypto-js": "^4.2.0",
     "@pisell/utils": "1.0.27",
     "@pisell/icon": "0.0.10",
-    "@pisell/date-picker": "1.0.85"
+    "@pisell/date-picker": "1.0.86"
   },
   "peerDependencies": {
     "react": "^18.0.0",