zs_library 0.1.2 → 0.2.0

package/dist/Desktop/Items/SortableItem.js

@@ -0,0 +1,73 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+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';
+import { motion } from 'framer-motion';
+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 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;
+  var _SortableUtils$getThe = SortableUtils.getTheme(theme),
+    light = _SortableUtils$getThe.light,
+    dark = _SortableUtils$getThe.dark;
+  var _data$data = data.data,
+    itemData = _data$data === void 0 ? {} : _data$data;
+  var _ref = itemData,
+    name = _ref.name;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(motion.div, {
+    className: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          width: 4rem;\n          height: 4rem;\n          background-color: ", ";\n          border-radius: 0.75rem;\n          box-shadow: 0 0 0.5rem ", ";\n          cursor: pointer;\n          position: relative;\n          overflow: hidden;\n          @media (prefers-color-scheme: dark) {\n            background-color: ", ";\n            box-shadow: 0 0 0.5rem ", ";\n          }\n        "])), light.itemIconBackgroundColor, light.itemIconShadowColor, dark.itemIconBackgroundColor, dark.itemIconShadowColor),
+    whileTap: {
+      scale: 0.9
+    }
+  }, /*#__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, {
+    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));
+};
+var SortableItem = function SortableItem(props) {
+  var data = props.data,
+    className = props.className,
+    itemIndex = props.itemIndex,
+    _onClick = props.onClick,
+    _props$disabledDrag = props.disabledDrag,
+    disabledDrag = _props$disabledDrag === void 0 ? false : _props$disabledDrag,
+    children = props.children,
+    parentIds = props.parentIds,
+    childrenLength = props.childrenLength;
+  var _useSortable2 = useSortable(),
+    contextMenu = _useSortable2.contextMenu,
+    setContextMenu = _useSortable2.setContextMenu;
+  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),
+    visible: (contextMenu === null || contextMenu === void 0 ? void 0 : contextMenu.data.id) === data.id,
+    onVisibleChange: function onVisibleChange(visible) {
+      if (!visible) {
+        setContextMenu(null);
+      }
+    },
+    destroyTooltipOnHide: true
+  }, /*#__PURE__*/React.createElement(motion.div, {
+    "data-id": data.id,
+    "data-index": itemIndex,
+    "data-parent-ids": parentIds === null || parentIds === void 0 ? void 0 : parentIds.join(','),
+    "data-children-length": childrenLength,
+    onClick: function onClick() {
+      return _onClick === null || _onClick === void 0 ? void 0 : _onClick(data);
+    },
+    className: cx(disabledDrag && 'drag-disabled', className)
+  }, children !== null && children !== void 0 ? children : /*#__PURE__*/React.createElement(SortableItemDefaultContent, props)));
+};
+export default SortableItem;

package/dist/Desktop/Sortable.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+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 SortableProps<D, C> {
+    /**
+     * className
+     */
+    className?: string;
+    /**
+     * 分页位置
+     */
+    pagingLocation?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * slider ref
+     */
+    sliderRef?: React.RefObject<Slider>;
+    /**
+     * 自定义 slider 配置
+     * @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

@@ -0,0 +1,164 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+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';
+import React, { useMemo, useRef } from 'react';
+import Slider from 'react-slick';
+import { ReactSortable } from 'react-sortablejs';
+import 'slick-carousel/slick/slick-theme.css';
+import 'slick-carousel/slick/slick.css';
+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 { ghostClass } from "./style";
+var Sortable = function Sortable(props) {
+  var _props$pagingLocation = props.pagingLocation,
+    pagingLocation = _props$pagingLocation === void 0 ? 'bottom' : _props$pagingLocation,
+    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;
+  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 paginingLocationCss = useMemo(function () {
+    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({
+    arrows: false,
+    ref: _sliderRef !== null && _sliderRef !== void 0 ? _sliderRef : sliderRef,
+    infinite: false,
+    dots: true,
+    touchMove: false,
+    lazyLoad: "anticipated",
+    className: cx(paginingLocationCss, className),
+    customPaging: function customPaging(i) {
+      var _list$i;
+      if (pagingDotBuilder) {
+        return pagingDotBuilder(list[i], i);
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        onDragEnter: function onDragEnter() {
+          var _current;
+          (_current = (_sliderRef !== null && _sliderRef !== void 0 ? _sliderRef : sliderRef).current) === null || _current === void 0 || _current.slickGoTo(i);
+        }
+      }, (_list$i = list[i]) === null || _list$i === void 0 || (_list$i = _list$i.data) === null || _list$i === void 0 ? void 0 : _list$i.name);
+    },
+    appendDots: function appendDots(dots) {
+      if (pagingDotsBuilder) {
+        return pagingDotsBuilder(dots);
+      }
+      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                  "]))))
+      }, dots));
+    }
+  }, sliderProps), list.map(function (l) {
+    var _l$children, _l$children2;
+    return /*#__PURE__*/React.createElement("div", {
+      key: l.id
+    }, /*#__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                  "])))),
+      animation: 150,
+      fallbackOnBody: true,
+      swapThreshold: 0.65,
+      group: "nested",
+      list: (_l$children = l.children) !== null && _l$children !== void 0 ? _l$children : [],
+      setList: function setList(e) {
+        return _setList(e, [l.id]);
+      },
+      filter: ".drag-disabled",
+      onMove: function onMove(e) {
+        setListStatus('onMove');
+        var dragged = e.dragged,
+          related = e.related;
+        var draggedData = dragged.dataset;
+        var relatedData = related.dataset;
+        setMoveTargetId(null);
+        // 限制只有一层
+        // sortable-group-item 标记为文件夹
+        if ((Object.keys(relatedData).length === 0 || relatedData.parentIds) && Number(draggedData.childrenLength) > 0 && related.classList.contains('sortable-group-item')) {
+          return false;
+        }
+        return true;
+      },
+      onStart: function onStart(e) {
+        var dataset = e.item.dataset;
+        if (dataset !== null && dataset !== void 0 && dataset.id) {
+          setMoveItemId(dataset.id);
+        }
+        setListStatus('onMove');
+      },
+      onEnd: function onEnd() {
+        setMoveItemId(null);
+        setMoveTargetId(null);
+        setListStatus(null);
+      },
+      ghostClass: ghostClass
+    }, ((_l$children2 = l.children) !== null && _l$children2 !== void 0 ? _l$children2 : []).map(function (item, index) {
+      var el;
+      if (itemBuilder) {
+        return itemBuilder(item);
+      }
+      switch (item.type) {
+        case 'group':
+        case 'app':
+          el = /*#__PURE__*/React.createElement(SortableGroupItem, {
+            key: item.id,
+            data: item,
+            itemIndex: index,
+            parentIds: [l.id, item.id],
+            onClick: onItemClick,
+            noLetters: noLetters,
+            itemIconBuilder: itemIconBuilder
+          });
+          break;
+        default:
+          el = /*#__PURE__*/React.createElement(SortableItem, {
+            key: item.id,
+            data: item,
+            itemIndex: index,
+            onClick: onItemClick,
+            noLetters: noLetters,
+            itemIconBuilder: itemIconBuilder
+          });
+          break;
+      }
+      return el;
+    })));
+  })), /*#__PURE__*/React.createElement(ItemInfoModal, {
+    data: showInfoItemData,
+    onClose: function onClose() {
+      setShowInfoItemData(null);
+    }
+  }), /*#__PURE__*/React.createElement(GroupItemModal, {
+    data: openGroupItemData,
+    onClose: function onClose() {
+      setOpenGroupItemData(null);
+    },
+    onItemClick: onItemClick,
+    itemIconBuilder: itemIconBuilder
+  }));
+};
+export default Sortable;

package/dist/Desktop/config.d.ts

@@ -0,0 +1,6 @@
+import { SortItemBaseConfig } from './types';
+export declare const appConfig: SortItemBaseConfig;
+export declare const groupConfig: SortItemBaseConfig;
+export declare const configMap: {
+    [key: string]: SortItemBaseConfig;
+};

package/dist/Desktop/config.js

@@ -0,0 +1,16 @@
+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); }
+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); }
+// app 类型 config
+export var appConfig = {
+  maxRow: 2,
+  maxCol: 2
+};
+export var groupConfig = _objectSpread({}, appConfig);
+export var configMap = {
+  app: appConfig,
+  group: groupConfig
+};

package/dist/Desktop/context.d.ts

@@ -0,0 +1,49 @@
+import React, { ReactNode } from 'react';
+import { Theme } from './theme';
+import { SortItem } from './types';
+interface ContextMenu {
+    rect: DOMRect;
+    data: any;
+    pageX?: number;
+    pageY?: number;
+}
+type ListStatus = 'onMove';
+export interface SortableContextProps {
+    list: SortItem[];
+    setList: any;
+    contextMenu: ContextMenu | null;
+    setContextMenu: (e: ContextMenu | null) => void;
+    listStatus: ListStatus | null;
+    setListStatus: (e: ListStatus | null) => void;
+    contextMenuFuns: (data: any) => any;
+    hideContextMenu: () => void;
+    /** 点击右键菜单信息数据 */
+    showInfoItemData: SortItem | null;
+    setShowInfoItemData: (e: SortItem | null) => void;
+    /** group item 点击打开弹窗数据 */
+    openGroupItemData: SortItem | null;
+    setOpenGroupItemData: (e: SortItem | null) => void;
+    /** 长按事件状态 */
+    longPressTriggered: boolean;
+    updateItem: (id: string | number, data: any) => void;
+    updateItemConfig: (id: string | number, config: any) => void;
+    removeItem: (id: string) => 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;
+    list?: SortItem<D, C>[];
+    onChange?: (list: SortItem<D, C>[]) => void;
+    readonly storageKey?: string;
+    readonly theme?: 'light' | 'dark' | Theme;
+    enableCaching: boolean;
+}
+export declare const SortableProvider: <D, C>({ children, list: propList, onChange: propOnChange, storageKey, theme: propTheme, enableCaching, }: SortableProviderProps<D, C>) => React.JSX.Element;
+export {};