@blocklet/labels 2.4.36 → 2.4.38

package/dist/label2/labels2.mjs

@@ -0,0 +1,222 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Chip, useTheme } from "@mui/material";
+import chroma from "chroma-js";
+import CloseOutlineIcon from "@mui/icons-material/Close";
+import { useSize, useDeepCompareLayoutEffect } from "ahooks";
+import { useRef, useState } from "react";
+import { LabelsContainer } from "./labels-context.mjs";
+const getTextColor = (color, mode) => {
+  const baseColor = chroma(color);
+  if (mode === "dark") {
+    return baseColor.brighten(4).hex();
+  }
+  return baseColor.hex();
+};
+const getBorderColor = (color, mode) => {
+  const baseColor = chroma(color);
+  if (mode === "dark") {
+    return baseColor.brighten(2).alpha(0.4).hex();
+  }
+  if (baseColor.luminance() > 0.5) {
+    return baseColor.darken(3).hex();
+  }
+  return baseColor.brighten(0.5).alpha(0.25).hex();
+};
+const getBackgroundColor = (color, mode) => {
+  const baseColor = chroma(color);
+  if (mode === "dark") {
+    if (baseColor.luminance() > 0.5) {
+      return baseColor.darken(2).alpha(0.5).hex();
+    }
+    return baseColor.brighten(1.5).alpha(0.35).hex();
+  }
+  if (baseColor.luminance() > 0.5) {
+    return baseColor.darken(2.5).hex();
+  }
+  return baseColor.brighten(2.5).alpha(0.25).hex();
+};
+const getFilterStyle = (color, mode) => {
+  const baseColor = chroma(color);
+  if (mode === "dark") {
+    return "brightness(1.3) contrast(1.2)";
+  }
+  if (baseColor.luminance() > 0.5) {
+    return "brightness(0.85) contrast(1.2)";
+  }
+  return "brightness(0.85) contrast(1.2)";
+};
+export function LabelChip({
+  label,
+  onDelete,
+  sx,
+  fullName = true,
+  onClick,
+  disabled = false,
+  renderName = (name) => name
+}) {
+  const { getFullLabelName, getLabelName } = LabelsContainer.useContainer();
+  const theme = useTheme();
+  const { mode } = theme.palette;
+  const color = getTextColor(label.data.color, mode);
+  const mergedSx = [
+    {
+      height: 20,
+      borderRadius: 0.5,
+      fontSize: 12,
+      fontWeight: 500,
+      color: `${color} !important`,
+      bgcolor: `${getBackgroundColor(label.data.color, mode)} !important`,
+      transition: "filter 0.2s",
+      borderColor: `${getBorderColor(label.data.color, mode)} !important`,
+      WebkitTextFillColor: `${color} !important`,
+      ".MuiChip-deleteIcon": {
+        color: `${color} !important`,
+        cursor: "pointer",
+        transition: "transform 0.3s",
+        "&:hover": {
+          transform: "rotate(90deg)"
+        }
+      },
+      ".MuiChip-label": {
+        px: 0.5,
+        maxHeight: 20
+      },
+      ...onClick && {
+        cursor: "pointer",
+        "&:hover": {
+          filter: getFilterStyle(label.data.color, mode)
+        }
+      }
+    },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  const hasDelete = !disabled && !!onDelete;
+  const hasOnClick = !disabled && !!onClick;
+  return (
+    // @ts-ignore
+    /* @__PURE__ */ jsx(
+      Chip,
+      {
+        label: renderName(fullName ? getFullLabelName(label.data.id) : getLabelName(label.data.id)),
+        variant: "outlined",
+        size: "small",
+        ...hasDelete && {
+          onDelete: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            onDelete(label);
+          },
+          deleteIcon: /* @__PURE__ */ jsx(CloseOutlineIcon, {})
+        },
+        ...hasOnClick && {
+          onClick: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            onClick(label);
+          }
+        },
+        sx: mergedSx
+      },
+      label.data.id
+    )
+  );
+}
+export function Labels2({
+  compact = true,
+  labels,
+  sx,
+  renderLabel,
+  renderWhenEmpty,
+  prepend,
+  displaySystemLabels = true,
+  onItemClick
+}) {
+  const { getLabelsByIds, loading } = LabelsContainer.useContainer();
+  const labelsWrapperRef = useRef(null);
+  const [overflowIndex, setOverflowIndex] = useState(99999);
+  let labelNodes = getLabelsByIds(labels || []);
+  const size = useSize(labelsWrapperRef);
+  useDeepCompareLayoutEffect(() => {
+    if (compact) {
+      if (labelsWrapperRef.current) {
+        const { right } = labelsWrapperRef.current.getBoundingClientRect();
+        const labelElements = labelsWrapperRef.current.querySelectorAll(".MuiChip-root");
+        if (labelElements?.length > 0) {
+          Array.from(labelElements).some((x, i) => {
+            const rect = x.getBoundingClientRect();
+            if (rect.right > right - 36) {
+              setOverflowIndex(i);
+              return true;
+            }
+            return false;
+          });
+        }
+      }
+    } else {
+      setOverflowIndex(99999);
+    }
+  }, [size, compact]);
+  if (loading) {
+    return null;
+  }
+  if (!displaySystemLabels) {
+    labelNodes = labelNodes.filter((x) => x.data.type !== "system");
+  }
+  const mergedSx = [
+    {
+      display: "flex",
+      gap: 1,
+      width: "100%",
+      alignItems: "center",
+      overflow: "hidden",
+      flexWrap: compact ? "no-wrap" : "wrap"
+    },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  return /* @__PURE__ */ jsxs(Box, { sx: mergedSx, ref: labelsWrapperRef, children: [
+    prepend,
+    labelNodes.map((item, index) => {
+      if (!item) {
+        return null;
+      }
+      const visible = index < overflowIndex;
+      let extra = null;
+      if (index === overflowIndex) {
+        extra = /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              display: "inline-flex",
+              ...compact && { height: 20, lineHeight: "20px" },
+              color: "text.secondary",
+              fontWeight: "bold",
+              fontSize: 14
+            },
+            children: `+${labelNodes.length - overflowIndex}`
+          },
+          "overflow-label"
+        );
+      }
+      let labelChip = /* @__PURE__ */ jsx(
+        LabelChip,
+        {
+          label: item,
+          onClick: onItemClick,
+          sx: {
+            visibility: visible ? "visible" : "hidden",
+            pointerEvents: visible ? "auto" : "none"
+          }
+        },
+        item.data.id
+      );
+      if (renderLabel) {
+        labelChip = renderLabel(item, labelChip);
+      }
+      if (extra) {
+        return [extra, labelChip];
+      }
+      return labelChip;
+    }),
+    labelNodes.length === 0 && renderWhenEmpty
+  ] });
+}

package/dist/label2/session.d.ts

@@ -1,7 +1,5 @@
 export declare const useSessionContext: () => {
     isAdmin: boolean;
     hasAnyPassport: (passports: string | string[]) => boolean;
-    session: {
-        user: SessionContextUser;
-    };
+    session: Session;
 };

package/dist/label2/session.mjs

@@ -0,0 +1,17 @@
+import { useContext } from "react";
+import { SessionContext } from "@arcblock/did-connect-react/lib/Session";
+export const useSessionContext = () => {
+  const ctx = useContext(SessionContext) || {};
+  const loginRole = ctx?.session?.user?.role;
+  return {
+    ...ctx,
+    isAdmin: ["admin", "owner"].includes(loginRole),
+    hasAnyPassport: (passports) => {
+      if (!passports || passports.length === 0) {
+        return true;
+      }
+      const passportsArr = Array.isArray(passports) ? passports : [passports];
+      return passportsArr.includes(loginRole);
+    }
+  };
+};

package/dist/label2/tree.d.ts

@@ -1,4 +1,4 @@
-import { BaseLabel, LabelType } from '../types';
+import type { BaseLabel, LabelType } from '../types';
 export declare class TreeNode<T> {
     data: T;
     parent?: TreeNode<T>;

package/dist/label2/tree.mjs

@@ -0,0 +1,130 @@
+import { arrayToTree } from "performant-array-to-tree";
+export class TreeNode {
+  data;
+  parent;
+  children;
+  constructor({ data, parent, children }) {
+    this.data = data;
+    this.parent = parent;
+    this.children = children || [];
+  }
+  setParent(node) {
+    this.parent = node;
+  }
+  add(...nodes) {
+    this.children.push(...nodes);
+    nodes.forEach((node) => node.setParent(this));
+  }
+  removeChild(node) {
+    this.children = this.children.filter((x) => x !== node);
+    node.setParent(void 0);
+  }
+  isLeaf(node) {
+    return !node.children?.length;
+  }
+  getAllParents(includeSelf = true) {
+    const parents = [];
+    if (includeSelf) {
+      parents.unshift(this);
+    }
+    let { parent } = this;
+    while (parent) {
+      parents.unshift(parent);
+      parent = parent.parent;
+    }
+    return parents;
+  }
+  getAllSiblings() {
+    const siblings = this.parent?.children.filter((node) => node !== this) || [];
+    return siblings;
+  }
+  flatten(includeRoot) {
+    const nodes = [];
+    const traverse = (node) => {
+      nodes.push(node);
+      node.children.forEach(traverse);
+    };
+    traverse(this);
+    if (!includeRoot) {
+      nodes.shift();
+    }
+    return nodes;
+  }
+  clone() {
+    const cloned = new TreeNode({ data: this.data });
+    cloned.add(...this.children);
+    return cloned;
+  }
+}
+class Label {
+  id;
+  name;
+  desc;
+  image;
+  icon;
+  type;
+  color;
+  passports;
+  translation;
+  constructor(data) {
+    this.id = data.id;
+    this.name = data.name;
+    this.desc = data.desc;
+    this.image = data.image;
+    this.icon = data.icon;
+    this.type = data.type;
+    this.color = data.color || "#ddd";
+    this.passports = data.passports || [];
+    this.translation = this._normalizeTranslation(data.translation);
+  }
+  _normalizeTranslation(translation) {
+    if (typeof translation === "object") {
+      return translation;
+    }
+    try {
+      return JSON.parse(translation);
+    } catch {
+      return {};
+    }
+  }
+  getName(locale) {
+    if (!locale) {
+      return this.name;
+    }
+    return this?.translation?.[locale] || this?.name;
+  }
+}
+export class LabelTreeNode extends TreeNode {
+  static Label = Label;
+  getName(locale) {
+    return this.data.getName(locale);
+  }
+  isSystemLabel() {
+    return this.data.type === "system";
+  }
+  getFullName(locale) {
+    const parents = this.getAllParents();
+    parents.shift();
+    if (locale) {
+      return parents.map((item) => item.getName(locale)).join(" / ");
+    }
+    return parents.map((item) => item.data.name).join(" / ");
+  }
+}
+const mapToTree = (items, parent) => {
+  return items.map((item) => {
+    const node = new LabelTreeNode({ data: new Label(item.data), parent });
+    const children = mapToTree(item.children || [], node);
+    node.add(...children);
+    return node;
+  });
+};
+export const initLabelTree = (data) => {
+  const treeData = arrayToTree(data);
+  const root = new LabelTreeNode({ data: {} });
+  root.add(...mapToTree(treeData));
+  return root;
+};
+export const createEmptyLabelTree = () => {
+  return new LabelTreeNode({ data: {}, children: [] });
+};

package/dist/request-cache.mjs

@@ -0,0 +1,82 @@
+export const createCacheKey = (args) => {
+  return args.map((x) => typeof x === "string" ? x : JSON.stringify(x)).join("-");
+};
+const CACHE_PREFIX = "request-cache-";
+const getStorageKey = (key) => `${CACHE_PREFIX}${key}`;
+const serialize = (data) => {
+  try {
+    return JSON.stringify(data);
+  } catch (error) {
+    console.warn("Failed to serialize cache data:", error);
+    return "";
+  }
+};
+const deserialize = (data) => {
+  try {
+    return JSON.parse(data);
+  } catch (error) {
+    console.warn("Failed to deserialize cache data:", error);
+    return null;
+  }
+};
+const setCache = (key, cachedData, options = {}) => {
+  const storageKey = getStorageKey(key);
+  const expiresAt = options.cacheTime ? Date.now() + options.cacheTime : Number.MAX_SAFE_INTEGER;
+  const recordData = {
+    ...cachedData,
+    expiresAt
+  };
+  localStorage.setItem(storageKey, serialize(recordData));
+};
+const getCache = (key) => {
+  const storageKey = getStorageKey(key);
+  const cachedData = localStorage.getItem(storageKey);
+  if (!cachedData) {
+    return null;
+  }
+  const recordData = deserialize(cachedData);
+  if (!recordData) {
+    return null;
+  }
+  if (Date.now() > recordData.expiresAt) {
+    localStorage.removeItem(storageKey);
+    return null;
+  }
+  return recordData;
+};
+const clearCache = (key) => {
+  if (key) {
+    const cacheKeys = Array.isArray(key) ? key : [key];
+    cacheKeys.forEach((cacheKey) => {
+      const storageKey = getStorageKey(cacheKey);
+      localStorage.removeItem(storageKey);
+    });
+  } else {
+    const keysToRemove = [];
+    for (let i = 0; i < localStorage.length; i++) {
+      const storageKey = localStorage.key(i);
+      if (storageKey && storageKey.startsWith(CACHE_PREFIX)) {
+        keysToRemove.push(storageKey);
+      }
+    }
+    keysToRemove.forEach((x) => localStorage.removeItem(x));
+  }
+};
+const cleanupExpiredCache = () => {
+  const keysToRemove = [];
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+    if (key && key.startsWith(CACHE_PREFIX)) {
+      const cachedData = localStorage.getItem(key);
+      if (cachedData) {
+        const recordData = deserialize(cachedData);
+        if (recordData?.expiresAt && Date.now() > recordData.expiresAt) {
+          keysToRemove.push(key);
+        }
+      }
+    }
+  }
+  keysToRemove.forEach((key) => localStorage.removeItem(key));
+};
+cleanupExpiredCache();
+export { getCache, setCache, clearCache };

package/dist/test/fixtures/index.d.ts

@@ -1,2 +1,2 @@
-import { Label } from '../../components/label/types';
+import type { Label } from '../../components/label/types';
 export declare const labels: Label[];

package/dist/test/fixtures/index.mjs

@@ -0,0 +1,73 @@
+export const labels = [
+  {
+    id: "priority",
+    name: "Priority",
+    color: "#ddd",
+    children: [
+      {
+        id: "priority-high",
+        name: "High",
+        color: "#f44336",
+        icon: "flat-color-icons:high-priority"
+      },
+      {
+        id: "priority-medium",
+        name: "Medium",
+        color: "#ffc109",
+        icon: "flat-color-icons:medium-priority"
+      },
+      {
+        id: "priority-low",
+        name: "Low",
+        color: "#4caf50",
+        icon: "flat-color-icons:low-priority"
+      }
+    ]
+  },
+  {
+    id: "1",
+    name: "label-1",
+    color: "#ddd",
+    children: [
+      {
+        id: "1-1",
+        name: "label-1-1",
+        color: "#ddd",
+        children: [
+          {
+            id: "1-1-1",
+            name: "label-1-1-1",
+            color: "#ddd"
+          },
+          {
+            id: "1-1-2",
+            name: "label-1-1-2",
+            color: "#ddd"
+          }
+        ]
+      },
+      {
+        id: "1-2",
+        name: "label-1-2",
+        color: "#ddd"
+      }
+    ]
+  },
+  {
+    id: "2",
+    name: "label-2",
+    color: "#12ecf0"
+  },
+  {
+    id: "3",
+    name: "label-3",
+    color: "#f3aa0e",
+    children: [
+      {
+        id: "3-1",
+        name: "label-3-1",
+        color: "#ddd"
+      }
+    ]
+  }
+];

package/dist/type-override.d.ts

@@ -0,0 +1,7 @@
+import 'unstated-next';
+
+declare module 'unstated-next' {
+  export function createContainer<Value, State = void>(
+    useHook: (initialState: State) => Value
+  ): Container<Value, State>;
+}

package/dist/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/package.json

@@ -1,19 +1,16 @@
 {
   "name": "@blocklet/labels",
-  "version": "2.4.36",
+  "version": "2.4.38",
   "files": [
     "dist"
   ],
-  "main": "./dist/index.umd.js",
-  "module": "./dist/index.es.js",
-  "types": "./dist/index.d.ts",
   "exports": {
-    ".": {
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js"
-    },
-    "./src/*": "./src/*"
+    ".": "./dist/index.mjs"
   },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
@@ -29,7 +26,7 @@
     "react-color": "^2.19.3",
     "react-select": "^5.8.1",
     "unstated-next": "^1.1.0",
-    "@blocklet/translation-input": "2.4.36"
+    "@blocklet/translation-input": "2.4.38"
   },
   "peerDependencies": {
     "@arcblock/did-connect-react": "^3.1.4",
@@ -62,18 +59,14 @@
     "react-dom": "^19.1.0",
     "rollup-plugin-node-externals": "^7.1.3",
     "typescript": "^4.9.5",
+    "unbuild": "^3.6.0",
     "unplugin-icons": "^0.14.15",
     "vite": "^7.0.0",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-libcss": "^1.1.2"
   },
   "scripts": {
-    "dev": "npm run storybook",
-    "build": "tsc && vite build",
-    "build:watch": "vite build --watch",
-    "preview": "vite preview",
-    "storybook": "start-storybook -p 6007",
-    "build-storybook": "build-storybook",
+    "build": "unbuild",
     "lint": "eslint src --ext .mjs,.js,.jsx,.ts,.tsx",
     "lint:fix": "eslint src --ext .mjs,.js,.jsx,.ts,.tsx --fix"
   }