zs_library 0.2.0 → 0.2.2

package/dist/Desktop/ContextMenu/index.d.ts

@@ -1,3 +1,13 @@
-import { FC } from 'react';
-declare const ContextMenu: FC;
+import React from 'react';
+import { SortItem } from '../types';
+export interface ContextMenuProps<D, C> {
+    showShareButton?: boolean;
+    showInfoButton?: boolean;
+    showRemoveButton?: boolean;
+    showSizeButton?: boolean;
+    onShareClick?: (item: SortItem<D, C>) => void;
+    onInfoClick?: (item: SortItem<D, C>) => void;
+    onRemoveClick?: (item: SortItem<D, C>, remove: (id: string) => void) => void;
+}
+declare const ContextMenu: <D, C>(props: ContextMenuProps<D, C>) => React.JSX.Element;
 export default ContextMenu;

package/dist/Desktop/ContextMenu/index.js

@@ -19,7 +19,8 @@ import { RiCloseCircleLine, RiInformationLine, RiPencilRuler2Line, RiShareLine }
 import { AnimatePresence, motion } from 'framer-motion';
 import React from 'react';
 import { configMap } from "../config";
-import { useSortable } from "../hook";
+import { useSortableConfig } from "../context/config/hooks";
+import { useSortableState } from "../context/state/hooks";
 import SortableUtils from "../utils";
 var itemVariants = {
   menuShow: {
@@ -43,8 +44,8 @@ var ContextButton = function ContextButton(props) {
   var icon = props.icon,
     title = props.title,
     _onClick = props.onClick;
-  var _useSortable = useSortable(),
-    theme = _useSortable.theme;
+  var _useSortableConfig = useSortableConfig(),
+    theme = _useSortableConfig.theme;
   var _SortableUtils$getThe = SortableUtils.getTheme(theme),
     light = _SortableUtils$getThe.light,
     dark = _SortableUtils$getThe.dark;
@@ -64,15 +65,27 @@ var ContextButton = function ContextButton(props) {
     className: cx(css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              margin-bottom: 0.375rem;\n              display: flex;\n              justify-content: center;\n            "]))))
   }, icon), /*#__PURE__*/React.createElement(motion.div, null, title)));
 };
-var ContextMenu = function ContextMenu() {
-  var _useSortable2 = useSortable(),
-    contextMenu = _useSortable2.contextMenu,
-    setContextMenu = _useSortable2.setContextMenu,
-    hideContextMenu = _useSortable2.hideContextMenu,
-    setShowInfoItemData = _useSortable2.setShowInfoItemData,
-    removeItem = _useSortable2.removeItem,
-    updateItemConfig = _useSortable2.updateItemConfig,
-    theme = _useSortable2.theme;
+var ContextMenu = function ContextMenu(props) {
+  var _props$showInfoButton = props.showInfoButton,
+    showInfoButton = _props$showInfoButton === void 0 ? true : _props$showInfoButton,
+    _props$showRemoveButt = props.showRemoveButton,
+    showRemoveButton = _props$showRemoveButt === void 0 ? true : _props$showRemoveButt,
+    _props$showShareButto = props.showShareButton,
+    showShareButton = _props$showShareButto === void 0 ? true : _props$showShareButto,
+    _props$showSizeButton = props.showSizeButton,
+    showSizeButton = _props$showSizeButton === void 0 ? true : _props$showSizeButton,
+    onInfoClick = props.onInfoClick,
+    onShareClick = props.onShareClick,
+    onRemoveClick = props.onRemoveClick;
+  var _useSortableState = useSortableState(),
+    contextMenu = _useSortableState.contextMenu,
+    setContextMenu = _useSortableState.setContextMenu,
+    hideContextMenu = _useSortableState.hideContextMenu,
+    setShowInfoItemData = _useSortableState.setShowInfoItemData,
+    removeItem = _useSortableState.removeItem,
+    updateItemConfig = _useSortableState.updateItemConfig;
+  var _useSortableConfig2 = useSortableConfig(),
+    theme = _useSortableConfig2.theme;
   var _SortableUtils$getThe2 = SortableUtils.getTheme(theme),
     light = _SortableUtils$getThe2.light,
     dark = _SortableUtils$getThe2.dark;
@@ -110,7 +123,7 @@ var ContextMenu = function ContextMenu() {
     }
   }, /*#__PURE__*/React.createElement(motion.div, {
     className: cx(css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                border-radius: 0.5rem;\n                overflow: hidden;\n                background-color: ", ";\n                box-shadow: 0 0 0.5rem ", ";\n                @media (prefers-color-scheme: dark) {\n                  background-color: ", ";\n                  box-shadow: 0 0 0.5rem ", ";\n                }\n              "])), light.contextMenuBackgroundColor, light.contextMenuShadowColor, dark.contextMenuBackgroundColor, dark.contextMenuShadowColor))
-  }, config.allowResize !== false && /*#__PURE__*/React.createElement(motion.ul, {
+  }, showSizeButton && config.allowResize !== false && /*#__PURE__*/React.createElement(motion.ul, {
     className: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                  background-color: white;\n                  padding: 0.25rem;\n                  margin: 0;\n                "])))
   }, [{
     label: '修改大小',
@@ -150,30 +163,44 @@ var ContextMenu = function ContextMenu() {
       }, it.label);
     })));
   }))), /*#__PURE__*/React.createElement(motion.div, {
-    className: cx(css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n                background-color: ", ";\n                box-shadow: 0 0 0.5rem ", ";\n                @media (prefers-color-scheme: dark) {\n                  background-color: ", ";\n                  box-shadow: 0 0 0.5rem ", ";\n                }\n                display: flex;\n                margin-top: 0.5rem;\n                border-radius: 0.5rem;\n                overflow: hidden;\n                padding: 0.25rem;\n              "])), light.contextMenuBackgroundColor, light.contextMenuShadowColor, dark.contextMenuBackgroundColor, dark.contextMenuShadowColor))
-  }, /*#__PURE__*/React.createElement(ContextButton, {
+    className: cx(css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n                background-color: ", ";\n                box-shadow: 0 0 0.5rem ", ";\n                @media (prefers-color-scheme: dark) {\n                  background-color: ", ";\n                  box-shadow: 0 0 0.5rem ", ";\n                }\n                display: flex;\n                justify-content: space-around;\n                align-items: center;\n                margin-top: 0.5rem;\n                border-radius: 0.5rem;\n                overflow: hidden;\n                padding: 0.25rem;\n              "])), light.contextMenuBackgroundColor, light.contextMenuShadowColor, dark.contextMenuBackgroundColor, dark.contextMenuShadowColor))
+  }, showShareButton && /*#__PURE__*/React.createElement(ContextButton, {
     icon: /*#__PURE__*/React.createElement(RiShareLine, {
       size: 20
     }),
-    title: "\u5206\u4EAB"
-  }), /*#__PURE__*/React.createElement(ContextButton, {
+    title: "\u5206\u4EAB",
+    onClick: function onClick() {
+      if (onShareClick) {
+        onShareClick(contextMenu.data);
+        return;
+      }
+    }
+  }), showInfoButton && /*#__PURE__*/React.createElement(ContextButton, {
     icon: /*#__PURE__*/React.createElement(RiInformationLine, {
       size: 20
     }),
     title: "\u4FE1\u606F",
     onClick: function onClick() {
+      if (onInfoClick) {
+        onInfoClick(contextMenu.data);
+        return;
+      }
       setShowInfoItemData(_objectSpread(_objectSpread({}, contextMenu.data), {}, {
         pageX: contextMenu.pageX,
         pageY: contextMenu.pageY
       }));
       hideContextMenu();
     }
-  }), /*#__PURE__*/React.createElement(ContextButton, {
+  }), showRemoveButton && /*#__PURE__*/React.createElement(ContextButton, {
     icon: /*#__PURE__*/React.createElement(RiCloseCircleLine, {
       size: 20
     }),
     title: "\u79FB\u9664",
     onClick: function onClick() {
+      if (onRemoveClick) {
+        onRemoveClick(contextMenu.data, removeItem);
+        return;
+      }
       setContextMenu(null);
       removeItem(contextMenu.data.id);
     }

package/dist/Desktop/Items/GroupItem.js

@@ -11,7 +11,8 @@ import { css, cx } from '@emotion/css';
 import { motion } from 'framer-motion';
 import React, { useMemo } from 'react';
 import { ReactSortable } from 'react-sortablejs';
-import { useSortable } from "../hook";
+import { useSortableConfig } from "../context/config/hooks";
+import { useSortableState } from "../context/state/hooks";
 import SortableUtils from "../utils";
 import SortableItem from "./SortableItem";
 var SortableGroupItem = function SortableGroupItem(props) {
@@ -22,18 +23,20 @@ var SortableGroupItem = function SortableGroupItem(props) {
     itemIndex = props.itemIndex,
     _onClick = props.onClick,
     _props$noLetters = props.noLetters,
-    noLetters = _props$noLetters === void 0 ? false : _props$noLetters,
-    itemIconBuilder = props.itemIconBuilder;
-  var _useSortable = useSortable(),
-    contextMenuFuns = _useSortable.contextMenuFuns,
-    _setList = _useSortable.setList,
-    setOpenGroupItemData = _useSortable.setOpenGroupItemData,
-    longPressTriggered = _useSortable.longPressTriggered,
-    moveItemId = _useSortable.moveItemId,
-    moveTargetId = _useSortable.moveTargetId,
-    setMoveTargetId = _useSortable.setMoveTargetId,
-    theme = _useSortable.theme,
-    listStatus = _useSortable.listStatus;
+    noLetters = _props$noLetters === void 0 ? false : _props$noLetters;
+  var _useSortableState = useSortableState(),
+    contextMenuFuns = _useSortableState.contextMenuFuns,
+    _setList = _useSortableState.setList,
+    setOpenGroupItemData = _useSortableState.setOpenGroupItemData,
+    longPressTriggered = _useSortableState.longPressTriggered,
+    moveItemId = _useSortableState.moveItemId,
+    moveTargetId = _useSortableState.moveTargetId,
+    setMoveTargetId = _useSortableState.setMoveTargetId,
+    listStatus = _useSortableState.listStatus;
+  var _useSortableConfig = useSortableConfig(),
+    itemIconBuilder = _useSortableConfig.itemIconBuilder,
+    theme = _useSortableConfig.theme,
+    contextMenu = _useSortableConfig.contextMenu;
   var _SortableUtils$getThe = SortableUtils.getTheme(theme),
     light = _SortableUtils$getThe.light,
     dark = _SortableUtils$getThe.dark;
@@ -143,7 +146,7 @@ var SortableGroupItem = function SortableGroupItem(props) {
         setOpenGroupItemData(data);
       }
     }
-  }, contextMenuFuns(data)), /*#__PURE__*/React.createElement(motion.div, {
+  }, contextMenuFuns(data, contextMenu !== false)), /*#__PURE__*/React.createElement(motion.div, {
     className: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n            position: relative;\n            width: 100%;\n            height: 100%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            padding: 0.375rem;\n          "])))
   }, sizedContent(), /*#__PURE__*/React.createElement(ReactSortable, {
     className: cx('sortable-group-item', css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n                position: absolute;\n                cursor: pointer;\n                left: 0.375rem;\n                top: 0.375rem;\n                width: calc(100% - 0.75rem);\n                height: calc(100% - 0.75rem);\n                pointer-events: ", ";\n                > * {\n                  opacity: 0;\n                }\n              "])), listStatus === null ? 'none' : 'auto')),

package/dist/Desktop/Items/Modal/GroupItemModal.d.ts

@@ -4,7 +4,6 @@ interface GroupItemModalProps<D, C> {
     data: SortItem | null;
     onClose: () => void;
     onItemClick?: (item: SortItem<D, C>) => void;
-    itemIconBuilder?: (item: SortItem<D, C>) => React.ReactNode;
 }
 declare const GroupItemModal: <D, C>(props: GroupItemModalProps<D, C>) => React.JSX.Element;
 export default GroupItemModal;

package/dist/Desktop/Items/Modal/GroupItemModal.js

@@ -22,7 +22,8 @@ import { css, cx } from '@emotion/css';
 import Dialog from 'rc-dialog';
 import React, { useEffect, useState } from 'react';
 import { ReactSortable } from 'react-sortablejs';
-import { useSortable } from "../../hook";
+import { useSortableConfig } from "../../context/config/hooks";
+import { useSortableState } from "../../context/state/hooks";
 import { ghostClass } from "../../style";
 import SortableUtils from "../../utils";
 import SortableItem from "../SortableItem";
@@ -30,16 +31,16 @@ var GroupItemModal = function GroupItemModal(props) {
   var _data$children, _data$children2;
   var data = props.data,
     _onClose = props.onClose,
-    onItemClick = props.onItemClick,
-    itemIconBuilder = props.itemIconBuilder;
-  var _useSortable = useSortable(),
-    list = _useSortable.list,
-    _setList = _useSortable.setList,
-    setListStatus = _useSortable.setListStatus,
-    setMoveItemId = _useSortable.setMoveItemId,
-    setMoveTargetId = _useSortable.setMoveTargetId,
-    updateItem = _useSortable.updateItem,
-    theme = _useSortable.theme;
+    onItemClick = props.onItemClick;
+  var _useSortableState = useSortableState(),
+    list = _useSortableState.list,
+    _setList = _useSortableState.setList,
+    setListStatus = _useSortableState.setListStatus,
+    setMoveItemId = _useSortableState.setMoveItemId,
+    setMoveTargetId = _useSortableState.setMoveTargetId,
+    updateItem = _useSortableState.updateItem;
+  var _useSortableConfig = useSortableConfig(),
+    theme = _useSortableConfig.theme;
   var _SortableUtils$getThe = SortableUtils.getTheme(theme),
     light = _SortableUtils$getThe.light,
     dark = _SortableUtils$getThe.dark;
@@ -151,8 +152,7 @@ var GroupItemModal = function GroupItemModal(props) {
       key: item.id,
       data: item,
       itemIndex: index,
-      onClick: onItemClick,
-      itemIconBuilder: itemIconBuilder
+      onClick: onItemClick
     });
   }))));
 };

package/dist/Desktop/Items/SortableItem.d.ts

@@ -11,7 +11,6 @@ export interface SortableItemProps<D, C> {
     children?: React.ReactNode;
     parentIds?: (string | number)[];
     childrenLength?: number;
-    itemIconBuilder?: (item: SortItem<D, C>) => React.ReactNode;
 }
 export declare const SortableItemDefaultContent: <D, C>(props: SortableItemProps<D, C>) => React.JSX.Element;
 declare const SortableItem: <D, C>(props: SortableItemProps<D, C>) => React.JSX.Element;

package/dist/Desktop/Items/SortableItem.js

@@ -7,16 +7,19 @@ import RcTooltip from 'rc-tooltip';
 import 'rc-tooltip/assets/bootstrap_white.css';
 import React from 'react';
 import ContextMenu from "../ContextMenu";
-import { useSortable } from "../hook";
+import { useSortableConfig } from "../context/config/hooks";
+import { useSortableState } from "../context/state/hooks";
 import SortableUtils from "../utils";
 export var SortableItemDefaultContent = function SortableItemDefaultContent(props) {
   var data = props.data,
     _props$noLetters = props.noLetters,
-    noLetters = _props$noLetters === void 0 ? false : _props$noLetters,
-    itemIconBuilder = props.itemIconBuilder;
-  var _useSortable = useSortable(),
-    contextMenuFuns = _useSortable.contextMenuFuns,
-    theme = _useSortable.theme;
+    noLetters = _props$noLetters === void 0 ? false : _props$noLetters;
+  var _useSortableState = useSortableState(),
+    contextMenuFuns = _useSortableState.contextMenuFuns;
+  var _useSortableConfig = useSortableConfig(),
+    itemIconBuilder = _useSortableConfig.itemIconBuilder,
+    theme = _useSortableConfig.theme,
+    contextMenu = _useSortableConfig.contextMenu;
   var _SortableUtils$getThe = SortableUtils.getTheme(theme),
     light = _SortableUtils$getThe.light,
     dark = _SortableUtils$getThe.dark;
@@ -31,7 +34,7 @@ export var SortableItemDefaultContent = function SortableItemDefaultContent(prop
     }
   }, /*#__PURE__*/React.createElement("div", _extends({
     className: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            position: absolute;\n            left: 0;\n            top: 0;\n            width: 100%;\n            height: 100%;\n            color: ", ";\n            @media (prefers-color-scheme: dark) {\n              color: ", ";\n            }\n          "])), light.itemNameColor, dark.itemNameColor)
-  }, contextMenuFuns(data)), itemIconBuilder === null || itemIconBuilder === void 0 ? void 0 : itemIconBuilder(data))), /*#__PURE__*/React.createElement(motion.p, {
+  }, contextMenuFuns(data, contextMenu !== false)), itemIconBuilder === null || itemIconBuilder === void 0 ? void 0 : itemIconBuilder(data))), /*#__PURE__*/React.createElement(motion.p, {
     className: cx(css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            text-align: center;\n            margin-top: 0.25rem;\n            margin-bottom: 0;\n            color: ", ";\n            @media (prefers-color-scheme: dark) {\n              color: ", ";\n            }\n          "])), light.itemNameColor, dark.itemNameColor), noLetters && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n              color: transparent;\n            "]))))
   }, name));
 };
@@ -45,13 +48,15 @@ var SortableItem = function SortableItem(props) {
     children = props.children,
     parentIds = props.parentIds,
     childrenLength = props.childrenLength;
-  var _useSortable2 = useSortable(),
-    contextMenu = _useSortable2.contextMenu,
-    setContextMenu = _useSortable2.setContextMenu;
+  var _useSortableState2 = useSortableState(),
+    contextMenu = _useSortableState2.contextMenu,
+    setContextMenu = _useSortableState2.setContextMenu;
+  var _useSortableConfig2 = useSortableConfig(),
+    configContextMenu = _useSortableConfig2.contextMenu;
   return /*#__PURE__*/React.createElement(RcTooltip, {
     placement: "bottom",
     overlayClassName: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        background-color: transparent;\n        .rc-tooltip-inner {\n          background-color: transparent;\n          padding: 0;\n          border: none;\n        }\n      "]))),
-    overlay: /*#__PURE__*/React.createElement(ContextMenu, null),
+    overlay: /*#__PURE__*/React.createElement(ContextMenu, configContextMenu),
     visible: (contextMenu === null || contextMenu === void 0 ? void 0 : contextMenu.data.id) === data.id,
     onVisibleChange: function onVisibleChange(visible) {
       if (!visible) {

package/dist/Desktop/Sortable.d.ts

@@ -3,15 +3,18 @@ import Slider, { Settings } from 'react-slick';
 import 'slick-carousel/slick/slick-theme.css';
 import 'slick-carousel/slick/slick.css';
 import { SortItem } from './types';
+export interface Pagination {
+    position?: 'top' | 'bottom' | 'left' | 'right';
+}
 export interface SortableProps<D, C> {
     /**
      * className
      */
     className?: string;
     /**
-     * 分页位置
+     * 分页
      */
-    pagingLocation?: 'top' | 'bottom' | 'left' | 'right';
+    pagination?: Pagination | false;
     /**
      * slider ref
      */
@@ -21,30 +24,10 @@ export interface SortableProps<D, C> {
      * @see https://react-slick.neostack.com/docs/api
      */
     sliderProps?: Omit<Settings, 'appendDots' | 'customPaging'>;
-    /**
-     * 是否不显示名称
-     */
-    noLetters?: boolean;
     /**
      * 点击 item 事件
      */
     onItemClick?: (item: SortItem<D, C>) => void;
-    /**
-     * 自定义分页点容器
-     */
-    pagingDotsBuilder?: (dots: React.ReactNode) => React.JSX.Element;
-    /**
-     * 自定义分页点
-     */
-    pagingDotBuilder?: (item: SortItem<D, C>, index: number) => React.JSX.Element;
-    /**
-     * 自定义 item 渲染
-     */
-    itemBuilder?: (item: SortItem<D, C>) => React.ReactNode;
-    /**
-     * 自定义 item 图标渲染
-     */
-    itemIconBuilder?: (item: SortItem<D, C>) => React.ReactNode;
 }
 declare const Sortable: <D, C>(props: SortableProps<D, C>) => React.JSX.Element;
 export default Sortable;

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';
@@ -11,48 +11,57 @@ import SortableGroupItem from "./Items/GroupItem";
 import GroupItemModal from "./Items/Modal/GroupItemModal";
 import ItemInfoModal from "./Items/Modal/InfoModal";
 import SortableItem from "./Items/SortableItem";
-import { useSortable } from "./hook";
+import { useSortableConfig } from "./context/config/hooks";
+import { useSortableState } from "./context/state/hooks";
 import { ghostClass } from "./style";
 var Sortable = function Sortable(props) {
-  var _props$pagingLocation = props.pagingLocation,
-    pagingLocation = _props$pagingLocation === void 0 ? 'bottom' : _props$pagingLocation,
+  var _props$pagination = props.pagination,
+    pagination = _props$pagination === void 0 ? {
+      position: 'bottom'
+    } : _props$pagination,
     className = props.className,
-    pagingDotBuilder = props.pagingDotBuilder,
-    pagingDotsBuilder = props.pagingDotsBuilder,
     sliderProps = props.sliderProps,
     _sliderRef = props.sliderRef,
-    onItemClick = props.onItemClick,
-    noLetters = props.noLetters,
-    itemBuilder = props.itemBuilder,
-    itemIconBuilder = props.itemIconBuilder;
+    onItemClick = props.onItemClick;
   var sliderRef = useRef(null);
   var sliderDotsRef = useRef(null);
-  var _useSortable = useSortable(),
-    list = _useSortable.list,
-    _setList = _useSortable.setList,
-    setListStatus = _useSortable.setListStatus,
-    showInfoItemData = _useSortable.showInfoItemData,
-    setShowInfoItemData = _useSortable.setShowInfoItemData,
-    openGroupItemData = _useSortable.openGroupItemData,
-    setOpenGroupItemData = _useSortable.setOpenGroupItemData,
-    setMoveItemId = _useSortable.setMoveItemId,
-    setMoveTargetId = _useSortable.setMoveTargetId;
+  var _useSortableState = useSortableState(),
+    list = _useSortableState.list,
+    _setList = _useSortableState.setList,
+    setListStatus = _useSortableState.setListStatus,
+    showInfoItemData = _useSortableState.showInfoItemData,
+    setShowInfoItemData = _useSortableState.setShowInfoItemData,
+    openGroupItemData = _useSortableState.openGroupItemData,
+    setOpenGroupItemData = _useSortableState.setOpenGroupItemData,
+    setMoveItemId = _useSortableState.setMoveItemId,
+    setMoveTargetId = _useSortableState.setMoveTargetId,
+    addItem = _useSortableState.addItem;
+  var _useSortableConfig = useSortableConfig(),
+    pagingDotBuilder = _useSortableConfig.pagingDotBuilder,
+    pagingDotsBuilder = _useSortableConfig.pagingDotsBuilder,
+    itemBuilder = _useSortableConfig.itemBuilder;
   var paginingLocationCss = useMemo(function () {
+    var _pagination$position;
+    if (pagination === false) {
+      return {};
+    }
     return {
       top: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: flex;\n        flex-direction: column;\n        .slick-list {\n          order: 1;\n        }\n        .slick-dots {\n          position: static;\n        }\n      "]))),
       bottom: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        .slick-dots {\n          position: static;\n        }\n      "]))),
       left: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        .slick-dots {\n          position: absolute;\n          width: auto;\n          left: 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      "]))),
       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      "])))
-    }[pagingLocation];
-  }, [pagingLocation]);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Slider, _extends({
+    }[(_pagination$position = pagination.position) !== null && _pagination$position !== void 0 ? _pagination$position : 'bottom'];
+  }, [pagination]);
+  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) {
@@ -69,17 +78,34 @@ var Sortable = function Sortable(props) {
       if (pagingDotsBuilder) {
         return pagingDotsBuilder(dots);
       }
+      if (pagination === false) {
+        return /*#__PURE__*/React.createElement("div", null);
+      }
       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,
@@ -129,9 +155,7 @@ var Sortable = function Sortable(props) {
             data: item,
             itemIndex: index,
             parentIds: [l.id, item.id],
-            onClick: onItemClick,
-            noLetters: noLetters,
-            itemIconBuilder: itemIconBuilder
+            onClick: onItemClick
           });
           break;
         default:
@@ -139,9 +163,7 @@ var Sortable = function Sortable(props) {
             key: item.id,
             data: item,
             itemIndex: index,
-            onClick: onItemClick,
-            noLetters: noLetters,
-            itemIconBuilder: itemIconBuilder
+            onClick: onItemClick
           });
           break;
       }
@@ -157,8 +179,7 @@ var Sortable = function Sortable(props) {
     onClose: function onClose() {
       setOpenGroupItemData(null);
     },
-    onItemClick: onItemClick,
-    itemIconBuilder: itemIconBuilder
+    onItemClick: onItemClick
   }));
 };
 export default Sortable;

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { ContextMenuProps } from '../../ContextMenu';
+import { Theme } from '../../theme';
+import { SortItem } from '../../types';
+/**
+ * 需要跨多个组件传递的配置，使用 context 传递
+ */
+export interface SortableConfig<D, C> {
+    theme?: Theme;
+    /**
+     * 是否不显示名称
+     */
+    noLetters?: boolean;
+    /**
+     * 右键菜单设置
+     */
+    contextMenu?: ContextMenuProps<D, C> | ((data: SortItem<D, C>) => ContextMenuProps<D, C> | false) | false;
+    /**
+     * 自定义分页点容器
+     */
+    pagingDotsBuilder?: (dots: React.ReactNode) => React.JSX.Element;
+    /**
+     * 自定义分页点
+     */
+    pagingDotBuilder?: (item: SortItem<D, C>, index: number) => React.JSX.Element;
+    /**
+     * 自定义 item 渲染
+     */
+    itemBuilder?: (item: SortItem<D, C>) => React.ReactNode;
+    /**
+     * 自定义 item 图标渲染
+     */
+    itemIconBuilder?: (item: SortItem<D, C>) => React.ReactNode;
+    /**
+     * 自定义右键菜单
+     */
+    contextMenuBuilder?: (data: SortItem<D, C>) => ContextMenuProps<D, C>;
+}
+export declare const SortableConfigContext: React.Context<SortableConfig<any, any>>;
+export interface SortableConfigProviderProps<D, C> extends Omit<SortableConfig<D, C>, 'theme'> {
+    readonly theme?: 'light' | 'dark' | Theme;
+    children: React.ReactNode;
+}
+export declare const SortableConfigProvider: <D, C>(props: SortableConfigProviderProps<D, C>) => React.JSX.Element;

package/dist/Desktop/context/config/context.js

@@ -0,0 +1,36 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["children", "theme"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { createContext, useMemo } from 'react';
+import { themeDark, themeLight } from "../../theme";
+
+/**
+ * 需要跨多个组件传递的配置，使用 context 传递
+ */
+
+export var SortableConfigContext = /*#__PURE__*/createContext({});
+export var SortableConfigProvider = function SortableConfigProvider(props) {
+  var children = props.children,
+    propTheme = props.theme,
+    rest = _objectWithoutProperties(props, _excluded);
+  var theme = useMemo(function () {
+    if (propTheme === 'light') {
+      return themeLight;
+    } else if (propTheme === 'dark') {
+      return themeDark;
+    } else {
+      return propTheme;
+    }
+  }, [propTheme]);
+  return /*#__PURE__*/React.createElement(SortableConfigContext.Provider, {
+    value: _objectSpread({
+      theme: theme
+    }, rest)
+  }, children);
+};

package/dist/Desktop/context/config/hooks.d.ts

@@ -0,0 +1 @@
+export declare const useSortableConfig: () => import("./context").SortableConfig<any, any>;

package/dist/Desktop/context/config/hooks.js

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { SortableConfigContext } from "./context";
+export var useSortableConfig = function useSortableConfig() {
+  var state = useContext(SortableConfigContext);
+  return state;
+};

package/dist/Desktop/{context.d.ts → context/state/context.d.ts}

@@ -1,6 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Theme } from './theme';
-import { SortItem } from './types';
+import React from 'react';
+import { SortItem } from '../../types';
 interface ContextMenu {
     rect: DOMRect;
     data: any;
@@ -8,14 +7,14 @@ interface ContextMenu {
     pageY?: number;
 }
 type ListStatus = 'onMove';
-export interface SortableContextProps {
+export interface SortableState {
     list: SortItem[];
     setList: any;
     contextMenu: ContextMenu | null;
     setContextMenu: (e: ContextMenu | null) => void;
     listStatus: ListStatus | null;
     setListStatus: (e: ListStatus | null) => void;
-    contextMenuFuns: (data: any) => any;
+    contextMenuFuns: (data: any, enable: boolean) => any;
     hideContextMenu: () => void;
     /** 点击右键菜单信息数据 */
     showInfoItemData: SortItem | null;
@@ -28,22 +27,33 @@ export interface SortableContextProps {
     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;
     /** 当前元素将要移动到的元素id */
     moveTargetId: string | number | null;
     setMoveTargetId: (e: string | number | null) => void;
-    theme?: Theme;
 }
-export declare const SortableContext: React.Context<SortableContextProps>;
-interface SortableProviderProps<D, C> {
-    children: ReactNode;
+export declare const SortableStateContext: React.Context<SortableState>;
+export interface SortableStateProviderProps<D, C> {
+    /**
+     * 列表数据
+     */
     list?: SortItem<D, C>[];
+    /**
+     * 列表数据变更事件
+     */
     onChange?: (list: SortItem<D, C>[]) => void;
+    /**
+     * 本地存储 key
+     */
     readonly storageKey?: string;
-    readonly theme?: 'light' | 'dark' | Theme;
-    enableCaching: boolean;
+    /**
+     * 是否启用缓存
+     */
+    enableCaching?: boolean;
+    children: React.ReactNode;
 }
-export declare const SortableProvider: <D, C>({ children, list: propList, onChange: propOnChange, storageKey, theme: propTheme, enableCaching, }: SortableProviderProps<D, C>) => React.JSX.Element;
+export declare const SortableStateProvider: <D, C>(props: SortableStateProviderProps<D, C>) => React.JSX.Element;
 export {};

package/dist/Desktop/{context.js → context/state/context.js}

@@ -15,11 +15,11 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useDebounceEffect, useLocalStorageState } from 'ahooks';
-import React, { createContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { createContext, useEffect, useRef, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
-import { themeDark, themeLight } from "./theme";
-import SortableUtils from "./utils";
-export var SortableContext = /*#__PURE__*/createContext({
+import { configMap } from "../../config";
+import SortableUtils from "../../utils";
+export var SortableStateContext = /*#__PURE__*/createContext({
   list: [],
   setList: function setList() {},
   contextMenu: null,
@@ -36,22 +36,21 @@ export var SortableContext = /*#__PURE__*/createContext({
   updateItem: function updateItem() {},
   updateItemConfig: function updateItemConfig() {},
   removeItem: function removeItem() {},
+  addItem: function addItem() {},
   moveItemId: null,
   setMoveItemId: function setMoveItemId() {},
   moveTargetId: null,
-  setMoveTargetId: function setMoveTargetId() {},
-  theme: themeLight
+  setMoveTargetId: function setMoveTargetId() {}
 });
-export var SortableProvider = function SortableProvider(_ref) {
-  var children = _ref.children,
-    _ref$list = _ref.list,
-    propList = _ref$list === void 0 ? [] : _ref$list,
-    propOnChange = _ref.onChange,
-    _ref$storageKey = _ref.storageKey,
-    storageKey = _ref$storageKey === void 0 ? 'ZS_LIBRARY_DESKTOP_SORTABLE_CONFIG' : _ref$storageKey,
-    propTheme = _ref.theme,
-    _ref$enableCaching = _ref.enableCaching,
-    enableCaching = _ref$enableCaching === void 0 ? true : _ref$enableCaching;
+export var SortableStateProvider = function SortableStateProvider(props) {
+  var children = props.children,
+    _props$list = props.list,
+    propList = _props$list === void 0 ? [] : _props$list,
+    propOnChange = props.onChange,
+    _props$storageKey = props.storageKey,
+    storageKey = _props$storageKey === void 0 ? 'ZS_LIBRARY_DESKTOP_SORTABLE_CONFIG' : _props$storageKey,
+    _props$enableCaching = props.enableCaching,
+    enableCaching = _props$enableCaching === void 0 ? true : _props$enableCaching;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     contextMenuTimer = _useState2[0],
@@ -119,6 +118,7 @@ export var SortableProvider = function SortableProvider(_ref) {
     clearTimeout(contextMenuTimer);
   };
   var contextMenuFuns = function contextMenuFuns(data) {
+    var enable = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     var _data$config = data.config,
       config = _data$config === void 0 ? {} : _data$config;
     if (config.allowContextMenu === false) {
@@ -127,6 +127,7 @@ export var SortableProvider = function SortableProvider(_ref) {
     return {
       onMouseDown: function onMouseDown(e) {
         setContextMenuTimer(setTimeout(function () {
+          if (!enable) return;
           // 解决闭包导致拖拽时右键菜单不消失的问题
           if (listStatusRef.current !== null) return;
           getItemRectAndSetContextMenu(e, data);
@@ -144,6 +145,7 @@ export var SortableProvider = function SortableProvider(_ref) {
         setContextMenuTimer(undefined);
       },
       onContextMenu: function onContextMenu(e) {
+        if (!enable) return;
         e.preventDefault();
         getItemRectAndSetContextMenu(e, data);
       }
@@ -275,6 +277,37 @@ export var SortableProvider = function SortableProvider(_ref) {
       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);
@@ -301,16 +334,7 @@ export var SortableProvider = function SortableProvider(_ref) {
   }, [list, enableCaching], {
     wait: 1000
   });
-  var theme = useMemo(function () {
-    if (propTheme === 'light') {
-      return themeLight;
-    } else if (propTheme === 'dark') {
-      return themeDark;
-    } else {
-      return propTheme;
-    }
-  }, [propTheme]);
-  return /*#__PURE__*/React.createElement(SortableContext.Provider, {
+  return /*#__PURE__*/React.createElement(SortableStateContext.Provider, {
     value: {
       list: list,
       setList: _setList,
@@ -328,11 +352,11 @@ export var SortableProvider = function SortableProvider(_ref) {
       updateItemConfig: updateItemConfig,
       updateItem: updateItem,
       removeItem: removeItem,
+      addItem: addItem,
       moveItemId: moveItemId,
       setMoveItemId: setMoveItemId,
       moveTargetId: moveTargetId,
-      setMoveTargetId: setMoveTargetId,
-      theme: theme
+      setMoveTargetId: setMoveTargetId
     }
   }, children);
 };

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

@@ -0,0 +1 @@
+export declare const useSortableState: () => import("./context").SortableState;

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

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { SortableStateContext } from "./context";
+export var useSortableState = function useSortableState() {
+  var state = useContext(SortableStateContext);
+  return state;
+};

package/dist/Desktop/index.d.ts

@@ -1,29 +1,8 @@
 import React from 'react';
 import { SortableProps } from './Sortable';
-import { Theme } from './theme';
-import { SortItem } from './types';
-export interface DesktopProps<D = any, C = any> extends SortableProps<D, C> {
-    /**
-     * 数据源
-     */
-    list: SortItem<D, C>[];
-    /**
-     * onChange 事件，当排序发生变化时触发
-     */
-    onChange?: (list: SortItem<D, C>[]) => void;
-    /**
-     * 本地存储 key
-     */
-    readonly storageKey?: string;
-    /**
-     * 主题配置
-     */
-    theme?: 'light' | 'dark' | Theme;
-    /**
-     * 是否启用缓存
-     * @default true
-     */
-    enableCaching: boolean;
+import { SortableConfigProviderProps } from './context/config/context';
+import { SortableStateProviderProps } from './context/state/context';
+export interface DesktopProps<D = any, C = any> extends SortableProps<D, C>, Omit<SortableStateProviderProps<D, C>, 'children'>, Omit<SortableConfigProviderProps<D, C>, 'children'> {
 }
 declare const Desktop: <D, C>(props: DesktopProps<D, C>) => React.JSX.Element;
 export default Desktop;

package/dist/Desktop/index.js

@@ -1,22 +1,40 @@
-var _excluded = ["list", "onChange", "storageKey", "theme", "enableCaching"];
+var _excluded = ["list", "onChange", "storageKey", "enableCaching", "theme", "noLetters", "contextMenu", "contextMenuBuilder", "itemBuilder", "itemIconBuilder", "pagingDotBuilder", "pagingDotsBuilder"];
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';
 import Sortable from "./Sortable";
-import { SortableProvider } from "./context";
+import { SortableConfigProvider } from "./context/config/context";
+import { SortableStateProvider } from "./context/state/context";
 var Desktop = function Desktop(props) {
   var list = props.list,
     onChange = props.onChange,
     storageKey = props.storageKey,
-    theme = props.theme,
     enableCaching = props.enableCaching,
+    theme = props.theme,
+    noLetters = props.noLetters,
+    contextMenu = props.contextMenu,
+    contextMenuBuilder = props.contextMenuBuilder,
+    itemBuilder = props.itemBuilder,
+    itemIconBuilder = props.itemIconBuilder,
+    pagingDotBuilder = props.pagingDotBuilder,
+    pagingDotsBuilder = props.pagingDotsBuilder,
     rest = _objectWithoutProperties(props, _excluded);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SortableProvider, {
-    theme: theme,
+  var state = {
     list: list,
     onChange: onChange,
     storageKey: storageKey,
     enableCaching: enableCaching
-  }, /*#__PURE__*/React.createElement(Sortable, rest)));
+  };
+  var config = {
+    theme: theme,
+    noLetters: noLetters,
+    contextMenu: contextMenu,
+    pagingDotsBuilder: pagingDotsBuilder,
+    pagingDotBuilder: pagingDotBuilder,
+    itemBuilder: itemBuilder,
+    itemIconBuilder: itemIconBuilder,
+    contextMenuBuilder: contextMenuBuilder
+  };
+  return /*#__PURE__*/React.createElement(SortableStateProvider, state, /*#__PURE__*/React.createElement(SortableConfigProvider, config, /*#__PURE__*/React.createElement(Sortable, rest)));
 };
 export default Desktop;

package/package.json

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

package/dist/Desktop/hook.d.ts

@@ -1 +0,0 @@
-export declare const useSortable: () => import("./context").SortableContextProps;

package/dist/Desktop/hook.js

@@ -1,6 +0,0 @@
-import { useContext } from 'react';
-import { SortableContext } from "./context";
-export var useSortable = function useSortable() {
-  var state = useContext(SortableContext);
-  return state;
-};