zs_library 0.2.1 → 0.2.2

package/dist/Desktop/Sortable.js

@@ -1,4 +1,4 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 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); }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { css, cx } from '@emotion/css';
@@ -34,7 +34,8 @@ var Sortable = function Sortable(props) {
     openGroupItemData = _useSortableState.openGroupItemData,
     setOpenGroupItemData = _useSortableState.setOpenGroupItemData,
     setMoveItemId = _useSortableState.setMoveItemId,
-    setMoveTargetId = _useSortableState.setMoveTargetId;
+    setMoveTargetId = _useSortableState.setMoveTargetId,
+    addItem = _useSortableState.addItem;
   var _useSortableConfig = useSortableConfig(),
     pagingDotBuilder = _useSortableConfig.pagingDotBuilder,
     pagingDotsBuilder = _useSortableConfig.pagingDotsBuilder,
@@ -51,14 +52,16 @@ var Sortable = function Sortable(props) {
       right: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        .slick-dots {\n          position: absolute;\n          width: auto;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          transform: translateX(100%);\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          .slick-dots-default {\n            flex-direction: column;\n          }\n        }\n      "])))
     }[(_pagination$position = pagination.position) !== null && _pagination$position !== void 0 ? _pagination$position : 'bottom'];
   }, [pagination]);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Slider, _extends({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Slider, _extends({
+    useCSS: true,
+    useTransform: true,
     arrows: false,
     ref: _sliderRef !== null && _sliderRef !== void 0 ? _sliderRef : sliderRef,
     infinite: false,
     dots: true,
     touchMove: false,
     lazyLoad: "anticipated",
-    className: cx(paginingLocationCss, className),
+    className: cx(paginingLocationCss, css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            .slick-track {\n              display: flex;\n              align-items: stretch;\n            }\n            .slick-slide {\n              display: flex;\n              align-self: stretch;\n              height: unset;\n              > div {\n                display: flex;\n                align-self: stretch;\n                width: 100%;\n              }\n            }\n          "]))), className),
     customPaging: function customPaging(i) {
       var _list$i;
       if (pagingDotBuilder) {
@@ -80,15 +83,29 @@ var Sortable = function Sortable(props) {
       }
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("ul", {
         ref: sliderDotsRef,
-        className: cx('slick-dots-default', css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                    padding: 0.5rem;\n                    display: inline-flex;\n                    justify-content: center;\n                    align-items: center;\n                    gap: 0.5rem;\n                    background-color: rgba(0, 0, 0, 0.1);\n                    border-radius: 0.5rem;\n                    .slick-active {\n                      background-color: rgba(0, 0, 0, 0.3);\n                      color: white;\n                      padding: 0.25rem;\n                      border-radius: 0.25rem;\n                    }\n                    li {\n                      margin: 0;\n                      width: auto;\n                      height: auto;\n                    }\n                  "]))))
+        className: cx('slick-dots-default', css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n                    padding: 0.5rem;\n                    display: inline-flex;\n                    justify-content: center;\n                    align-items: center;\n                    gap: 0.5rem;\n                    background-color: rgba(0, 0, 0, 0.1);\n                    border-radius: 0.5rem;\n                    .slick-active {\n                      background-color: rgba(0, 0, 0, 0.3);\n                      color: white;\n                      padding: 0.25rem;\n                      border-radius: 0.25rem;\n                    }\n                    li {\n                      margin: 0;\n                      width: auto;\n                      height: auto;\n                    }\n                  "]))))
       }, dots));
     }
   }, sliderProps), list.map(function (l) {
     var _l$children, _l$children2;
     return /*#__PURE__*/React.createElement("div", {
-      key: l.id
+      key: l.id,
+      onDrop: function onDrop(e) {
+        e.preventDefault();
+        var data = e.dataTransfer.getData('text/plain');
+        if (data !== '') {
+          try {
+            addItem(JSON.parse(data), [l.id]);
+          } catch (e) {
+            console.log('drag error', e);
+          }
+        }
+      },
+      onDragOver: function onDragOver(e) {
+        e.preventDefault();
+      }
     }, /*#__PURE__*/React.createElement(ReactSortable, {
-      className: cx(css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n                    display: grid;\n                    transition: all 0.3s;\n                    grid-template-columns: repeat(auto-fill, 96px);\n                    grid-auto-flow: dense;\n                    grid-auto-rows: 96px;\n                    place-items: center;\n                    justify-content: center;\n                    align-items: center;\n                  "])))),
+      className: cx(css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n                    display: grid;\n                    transition: all 0.3s;\n                    grid-template-columns: repeat(auto-fill, 96px);\n                    grid-auto-flow: dense;\n                    grid-auto-rows: 96px;\n                    place-items: center;\n                    justify-content: center;\n                    align-items: center;\n                  "])))),
       animation: 150,
       fallbackOnBody: true,
       swapThreshold: 0.65,

package/dist/Desktop/context/state/context.d.ts

@@ -27,6 +27,7 @@ export interface SortableState {
     updateItem: (id: string | number, data: any) => void;
     updateItemConfig: (id: string | number, config: any) => void;
     removeItem: (id: string) => void;
+    addItem: (data: SortItem, parentIds: (string | number)[]) => void;
     /** 当前移动的元素id */
     moveItemId: string | null;
     setMoveItemId: (e: string | null) => void;

package/dist/Desktop/context/state/context.js

@@ -17,6 +17,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useDebounceEffect, useLocalStorageState } from 'ahooks';
 import React, { createContext, useEffect, useRef, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
+import { configMap } from "../../config";
 import SortableUtils from "../../utils";
 export var SortableStateContext = /*#__PURE__*/createContext({
   list: [],
@@ -35,6 +36,7 @@ export var SortableStateContext = /*#__PURE__*/createContext({
   updateItem: function updateItem() {},
   updateItemConfig: function updateItemConfig() {},
   removeItem: function removeItem() {},
+  addItem: function addItem() {},
   moveItemId: null,
   setMoveItemId: function setMoveItemId() {},
   moveTargetId: null,
@@ -275,6 +277,37 @@ export var SortableStateProvider = function SortableStateProvider(props) {
       return _list;
     });
   };
+  var addItem = function addItem(data, parentIds) {
+    var _list = _toConsumableArray(list);
+
+    // 根据 parentIds 递归查找，放置到对应的父级下
+    var addToChild = function addToChild(list, parentIds) {
+      var parentId = parentIds.shift();
+      var parent = list.find(function (item) {
+        return item.id === parentId;
+      });
+      var parentIndex = list.findIndex(function (item) {
+        return item.id === parentId;
+      });
+      if (!parent) {
+        return list;
+      } else {
+        if (parentIds.length) {
+          parent.children = addToChild(parent.children || [], parentIds);
+        } else {
+          var _data$type, _parent$children3, _data$config2;
+          var type = (_data$type = data === null || data === void 0 ? void 0 : data.type) !== null && _data$type !== void 0 ? _data$type : 'app';
+          parent.children = [].concat(_toConsumableArray((_parent$children3 = parent.children) !== null && _parent$children3 !== void 0 ? _parent$children3 : []), [_objectSpread(_objectSpread({}, data), {}, {
+            id: uuidv4(),
+            config: (_data$config2 = data === null || data === void 0 ? void 0 : data.config) !== null && _data$config2 !== void 0 ? _data$config2 : configMap[type]
+          })]);
+        }
+        list.splice(parentIndex, 1, parent);
+        return list;
+      }
+    };
+    setList(addToChild(_list, parentIds));
+  };
   useEffect(function () {
     if ((propList === null || propList === void 0 ? void 0 : propList.length) > 0 && list.length === 0) {
       _setList(propList);
@@ -319,6 +352,7 @@ export var SortableStateProvider = function SortableStateProvider(props) {
       updateItemConfig: updateItemConfig,
       updateItem: updateItem,
       removeItem: removeItem,
+      addItem: addItem,
       moveItemId: moveItemId,
       setMoveItemId: setMoveItemId,
       moveTargetId: moveTargetId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zs_library",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "A react library developed with dumi",
   "homepage": "https://zs-library.vercel.app",
   "bugs": {