@pisell/materials 2.2.47 → 2.2.49

package/es/components/pisellNavigationMenu/PisellNavigationMenu.js

@@ -0,0 +1,218 @@
+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); }
+import React, { useCallback, useMemo } from 'react';
+import PisellDropSort from "../pisellDropSort";
+import PisellTags from "../pisellTags";
+import Icon from "../icon";
+import Button from "../button";
+import { getText } from "../../locales";
+import { Dropdown } from 'antd';
+import PisellEmpty from "../pisellEmpty";
+import { formatTree } from "./utils";
+import "./PisellNavigationMenu.less";
+var PisellNavigationMenu = function PisellNavigationMenu(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? [] : _ref$value,
+    _ref$allowDrag = _ref.allowDrag,
+    allowDrag = _ref$allowDrag === void 0 ? true : _ref$allowDrag,
+    _ref$allowDelete = _ref.allowDelete,
+    allowDelete = _ref$allowDelete === void 0 ? true : _ref$allowDelete,
+    _ref$allowAddChild = _ref.allowAddChild,
+    allowAddChild = _ref$allowAddChild === void 0 ? true : _ref$allowAddChild,
+    _ref$allowAddRoot = _ref.allowAddRoot,
+    allowAddRoot = _ref$allowAddRoot === void 0 ? true : _ref$allowAddRoot,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? 8 : _ref$spacing,
+    _ref$maxLevel = _ref.maxLevel,
+    maxLevel = _ref$maxLevel === void 0 ? 3 : _ref$maxLevel,
+    style = _ref.style,
+    className = _ref.className,
+    onChange = _ref.onChange,
+    onAddSubMenu = _ref.onAddSubMenu,
+    onAddPage = _ref.onAddPage,
+    onEdit = _ref.onEdit,
+    onDelete = _ref.onDelete,
+    __designMode = _ref.__designMode,
+    title = _ref.title;
+  // 将DropSortItem转换回NavigationMenuItem
+  var convertToNavigationItems = function convertToNavigationItems(items) {
+    return items.map(function (item) {
+      return {
+        id: String(item.id),
+        title: String(item.title || ''),
+        path: String(item.path || '/'),
+        children: item.children ? convertToNavigationItems(item.children) : []
+      };
+    });
+  };
+  var items = useMemo(function () {
+    return [{
+      label: getText('pisell-lowcode-navigation-menu-add-sub-menu'),
+      key: 'add-child'
+    }, {
+      label: getText('pisell-lowcode-navigation-menu-add-page'),
+      key: 'add-page'
+    }];
+  }, []);
+  var handleClick = useCallback(function (key, item) {
+    if (key === 'add-child') {
+      onAddSubMenu === null || onAddSubMenu === void 0 || onAddSubMenu(item);
+    } else if (key === 'add-page') {
+      onAddPage === null || onAddPage === void 0 || onAddPage(item);
+    }
+  }, []);
+
+  // 自定义渲染菜单项
+  var renderMenuItem = useCallback(function (itemProps) {
+    var item = itemProps.item;
+    var _item$allowEdit = item.allowEdit,
+      allowEdit = _item$allowEdit === void 0 ? true : _item$allowEdit,
+      _item$allowDelete = item.allowDelete,
+      allowDelete = _item$allowDelete === void 0 ? true : _item$allowDelete,
+      _item$allowAddChild = item.allowAddChild,
+      allowAddChild = _item$allowAddChild === void 0 ? true : _item$allowAddChild,
+      _item$allowAddSubmenu = item.allowAddSubmenu,
+      allowAddSubmenu = _item$allowAddSubmenu === void 0 ? true : _item$allowAddSubmenu,
+      _item$allowAddPage = item.allowAddPage,
+      allowAddPage = _item$allowAddPage === void 0 ? true : _item$allowAddPage;
+    var isShowAddButton = item.isGroup && allowAddChild && (allowAddSubmenu || allowAddPage);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pisell-lowcode-navigation-menu-item"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "pisell-lowcode-navigation-menu-item-content"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "pisell-lowcode-navigation-menu-item-content-icon"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: item.icon
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "pisell-lowcode-navigation-menu-item-content-text"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "pisell-lowcode-navigation-menu-item-title"
+    }, item.title), /*#__PURE__*/React.createElement("div", {
+      className: "pisell-lowcode-navigation-menu-item-description"
+    }, item.description, !item.isGroup && item.version && /*#__PURE__*/React.createElement(PisellTags, {
+      type: "pill_color",
+      color: "success"
+    }, item.version)))), /*#__PURE__*/React.createElement("div", {
+      className: "pisell-lowcode-navigation-menu-item-action-wrap"
+    }, allowEdit && /*#__PURE__*/React.createElement(Button, {
+      type: "text",
+      onClick: function onClick() {
+        return onEdit === null || onEdit === void 0 ? void 0 : onEdit(item);
+      },
+      className: "pisell-lowcode-navigation-menu-item-action-button",
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        type: "pisell2-edit-05",
+        className: "pisell-lowcode-navigation-menu-item-action-button-icon"
+      })
+    }), isShowAddButton && /*#__PURE__*/React.createElement(Dropdown, {
+      menu: {
+        items: [allowAddSubmenu && {
+          key: 'add-child',
+          label: getText('pisell-lowcode-navigation-menu-add-sub-menu'),
+          onClick: function onClick() {
+            return handleClick('add-child', item);
+          }
+        }, allowAddPage && {
+          key: 'add-page',
+          label: getText('pisell-lowcode-navigation-menu-add-page'),
+          onClick: function onClick() {
+            return handleClick('add-page', item);
+          }
+        }].filter(Boolean)
+      }
+    }, /*#__PURE__*/React.createElement(Button, {
+      type: "text",
+      className: "pisell-lowcode-navigation-menu-item-action-button",
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        type: "pisell2-plus",
+        className: "pisell-lowcode-navigation-menu-item-action-button-icon"
+      })
+    })), allowDelete && /*#__PURE__*/React.createElement(Button, {
+      type: "text",
+      onClick: function onClick() {
+        return onDelete === null || onDelete === void 0 ? void 0 : onDelete(item);
+      },
+      className: "pisell-lowcode-navigation-menu-item-action-button",
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        type: "pisell2-trash-01",
+        className: "pisell-lowcode-navigation-menu-item-action-button-icon"
+      })
+    })));
+  }, [value, onChange]);
+
+  // 处理数据变化
+  var handleChange = useCallback(function (items) {
+    onChange === null || onChange === void 0 || onChange(convertToNavigationItems(items));
+  }, [onChange]);
+  var leftContent = useMemo(function () {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pisell-lowcode-navigation-menu-left-content"
+    }, title);
+  }, [title]);
+  var rightContent = useMemo(function () {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pisell-lowcode-navigation-menu-right-content"
+    }, /*#__PURE__*/React.createElement(Button, {
+      size: "large",
+      type: "primary",
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        type: "pisell2-plus"
+      }),
+      onClick: function onClick() {
+        return onAddSubMenu === null || onAddSubMenu === void 0 ? void 0 : onAddSubMenu();
+      }
+    }, getText('pisell-lowcode-navigation-menu-add-sub-menu')), /*#__PURE__*/React.createElement(Button, {
+      size: "large",
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        type: "pisell2-plus"
+      }),
+      onClick: function onClick() {
+        return onAddPage === null || onAddPage === void 0 ? void 0 : onAddPage();
+      }
+    }, getText('pisell-lowcode-navigation-menu-add-page')));
+  }, [title]);
+  var formatValue = useMemo(function () {
+    return formatTree(value, function (item) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        disabledDrop: !item.isGroup
+      });
+    });
+  }, [value]);
+  var getItemStyle = useCallback(function (itemProps) {
+    var item = itemProps.item;
+    return {
+      backgroundColor: item.isGroup ? '#fff' : 'var(--Gray-50, #F9FAFB)'
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(PisellDropSort, {
+    value: formatValue,
+    allowDrag: allowDrag,
+    allowDelete: allowDelete,
+    allowAddChild: allowAddChild,
+    allowAddRoot: allowAddRoot,
+    disabled: disabled,
+    spacing: spacing,
+    maxLevel: maxLevel,
+    style: style,
+    className: className,
+    onChange: handleChange,
+    renderItem: renderMenuItem,
+    isCustomAction: true,
+    __designMode: __designMode,
+    leftContent: leftContent,
+    rightContent: rightContent,
+    getItemStyle: getItemStyle,
+    emptyContent: /*#__PURE__*/React.createElement(PisellEmpty, {
+      maxWidth: 400,
+      description: getText('pisell-lowcode-navigation-menu-add-page-tip')
+    })
+  });
+};
+export default PisellNavigationMenu;

package/es/components/pisellNavigationMenu/PisellNavigationMenu.less

@@ -0,0 +1,65 @@
+.pisell-lowcode-navigation-menu-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .pisell-lowcode-navigation-menu-item-content {
+    flex: 1;
+    display: flex;
+    gap: 10px;
+    height: 100%;
+    align-items: center;
+    .pisell-lowcode-navigation-menu-item-content-icon {
+      height: 36px;
+      width: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+    }
+    .pisell-lowcode-navigation-menu-item-content-text {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .pisell-lowcode-navigation-menu-item-title {
+      color: var(--Gray-900, #101828);
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 20px; /* 142.857% */
+    }
+    .pisell-lowcode-navigation-menu-item-description {
+      color: var(--Gray-500, #667085);
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px; /* 142.857% */
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+  }
+  .pisell-lowcode-navigation-menu-item-action-wrap {
+    display: flex;
+    gap: 8px;
+    .pisell-lowcode-navigation-menu-item-action-button {
+      &:hover {
+        background: var(--Gray-300, #D0D5DD);
+      }
+    }
+    .pisell-lowcode-navigation-menu-item-action-button-icon {
+      font-size: 20px;
+      color: #101828;
+    }
+  }
+}
+
+.pisell-lowcode-navigation-menu-left-content {
+  color: var(--Gray-900, #101828);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px; /* 150% */
+}
+
+.pisell-lowcode-navigation-menu-right-content {
+  display: flex;
+  gap: 8px;
+}

package/es/components/pisellNavigationMenu/index.d.ts

@@ -0,0 +1,3 @@
+import PisellNavigationMenu from './PisellNavigationMenu';
+export default PisellNavigationMenu;
+export type { PisellNavigationMenuProps, NavigationMenuItem } from './types';

package/es/components/pisellNavigationMenu/index.js

@@ -0,0 +1,2 @@
+import PisellNavigationMenu from "./PisellNavigationMenu";
+export default PisellNavigationMenu;

package/es/components/pisellNavigationMenu/types.d.ts

@@ -0,0 +1,64 @@
+import { CSSProperties } from 'react';
+export interface NavigationMenuItem {
+    id: string;
+    /** 标题 */
+    title: string;
+    /** 图标 */
+    icon?: string;
+    /** 描述 */
+    description?: string;
+    /** 子菜单 */
+    children?: NavigationMenuItem[];
+    /** 版本 */
+    version?: string;
+    /** 是否是分组 */
+    isGroup?: boolean;
+    /** 是否允许添加子菜单 */
+    allowAddChild?: boolean;
+    /** 是否允许删除 */
+    allowDelete?: boolean;
+    /** 是否允许编辑 */
+    allowEdit?: boolean;
+    /** 是否允许添加子菜单 */
+    allowAddSubmenu?: boolean;
+    /** 是否允许添加页面 */
+    allowAddPage?: boolean;
+    /** 其他属性 */
+    [key: string]: any;
+}
+export interface PisellNavigationMenuProps {
+    /** 导航菜单数据 */
+    value: NavigationMenuItem[];
+    /** 是否允许拖拽排序 */
+    allowDrag?: boolean;
+    /** 是否允许删除菜单项 */
+    allowDelete?: boolean;
+    /** 是否允许添加子菜单 */
+    allowAddChild?: boolean;
+    /** 是否允许添加根菜单 */
+    allowAddRoot?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 菜单项间距 */
+    spacing?: number;
+    /** 最大层级数 */
+    maxLevel?: number;
+    /** 样式 */
+    style?: CSSProperties;
+    /** 类名 */
+    className?: string;
+    /** 数据变化回调 */
+    onChange?: (items: NavigationMenuItem[]) => void;
+    /** 设计模式 */
+    __designMode?: string;
+    /** 标题 */
+    title?: string;
+    /** 添加子菜单回调 */
+    onAddSubMenu?: (item?: NavigationMenuItem) => void;
+    /** 添加页面回调 */
+    onAddPage?: (item?: NavigationMenuItem) => void;
+    /** 编辑回调 */
+    onEdit?: (item: NavigationMenuItem) => void;
+    /** 删除回调 */
+    onDelete?: (item: NavigationMenuItem) => void;
+}

package/es/components/pisellNavigationMenu/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/pisellNavigationMenu/utils.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 树节点的基本接口
+ */
+export interface TreeNode {
+    [key: string]: any;
+    children?: TreeNode[];
+}
+/**
+ * 格式化树结构数据
+ * @param tree 要格式化的树结构数据
+ * @param formatter 格式化函数，用于处理每个节点
+ * @param childrenField 子节点字段名，默认为 'children'
+ * @returns 格式化后的树结构
+ */
+export declare function formatTree<T extends TreeNode, R = T>(tree: T[], formatter: (node: T, level: number, parent: T | null) => R, childrenField?: string): R[];

package/es/components/pisellNavigationMenu/utils.js

@@ -0,0 +1,29 @@
+/**
+ * 树节点的基本接口
+ */
+
+/**
+ * 格式化树结构数据
+ * @param tree 要格式化的树结构数据
+ * @param formatter 格式化函数，用于处理每个节点
+ * @param childrenField 子节点字段名，默认为 'children'
+ * @returns 格式化后的树结构
+ */
+export function formatTree(tree, formatter) {
+  var childrenField = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'children';
+  var format = function format(nodes) {
+    var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    return nodes.map(function (node) {
+      // 格式化当前节点
+      var formattedNode = formatter(node, level, parent);
+
+      // 如果有子节点，递归处理
+      if (node[childrenField] && Array.isArray(node[childrenField])) {
+        formattedNode[childrenField] = format(node[childrenField], level + 1, node);
+      }
+      return formattedNode;
+    });
+  };
+  return format(tree);
+}

package/es/components/pisellQRScanner/index.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import './index.less';
+import type { DetailedHTMLProps, HTMLAttributes, VideoHTMLAttributes, InputHTMLAttributes } from 'react';
+declare type ExtendedDetailedHTMLProps<T extends HTMLAttributes<E>, E extends HTMLElement> = DetailedHTMLProps<T, E> & {
+    children?: React.ReactNode;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            div: ExtendedDetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+            video: DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
+            input: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+        }
+    }
+}
+export interface PisellQRScannerProps {
+    /** 是否可见 */
+    visible: boolean;
+    /** 是否显示上传图片按钮 */
+    showUpload?: boolean;
+    /** 关闭回调 */
+    onClose: () => void;
+    /** 扫码成功回调 */
+    onScan: (value: string) => void;
+    /**
+     * 样式属性，可选
+     * 注意: 不应传入renderMode等不必要属性
+     */
+    style?: React.CSSProperties;
+    /** 类名，可选 */
+    className?: string;
+}
+/**
+ * 二维码扫描组件
+ */
+declare const PisellQRScanner: React.FC<PisellQRScannerProps>;
+export default PisellQRScanner;