@blocklet/labels 2.4.36 → 2.4.37

package/dist/components/label/context.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { Label } from './types';
-import { CreateLabel, FetchLabels } from '../../types';
+import type { CreateLabel, FetchLabels } from '../../types';
 interface LabelsProviderProps {
     fetchLabels: FetchLabels;
     createLabel: CreateLabel;
@@ -16,5 +17,5 @@ interface LabelsContextValue {
 }
 export declare const useLabelsContext: () => LabelsContextValue;
 export declare const useLabelsUpdateOnDestroy: () => void;
-export declare function LabelsProvider({ fetchLabels, createLabel, children }: LabelsProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function LabelsProvider({ fetchLabels, createLabel, children }: LabelsProviderProps): import("react").JSX.Element;
 export {};

package/dist/components/label/context.mjs

@@ -0,0 +1,87 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useMemo, useCallback, createContext, useContext, useEffect } from "react";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { useRequest } from "ahooks";
+import { transformLabels, flatten } from "./utils.mjs";
+import { LabelsContainer } from "../../label2/labels-context.mjs";
+import { createCacheKey, getCache, setCache } from "../../request-cache.mjs";
+const LabelsContext = createContext({});
+export const useLabelsContext = () => useContext(LabelsContext);
+export const useLabelsUpdateOnDestroy = () => {
+  const { updateLabels } = useLabelsContext();
+  useEffect(() => {
+    return () => {
+      updateLabels();
+    };
+  }, []);
+};
+export function LabelsProvider({ fetchLabels, createLabel, children }) {
+  const { locale } = useLocaleContext();
+  const [updateCounter, setUpdateCounter] = useState(1);
+  const cacheKey = createCacheKey(["labels"]);
+  const { loading, data } = useRequest(fetchLabels, {
+    cacheKey,
+    getCache: () => getCache(cacheKey),
+    setCache: (d) => setCache(cacheKey, d),
+    refreshDeps: [updateCounter]
+  });
+  const labels = useMemo(() => transformLabels(data?.labels || []), [data]);
+  const labelsKeyById = useMemo(() => {
+    if (!labels?.length) {
+      return {};
+    }
+    const flattened = flatten(labels);
+    return flattened.reduce((acc, cur) => ({ ...acc, [cur.id]: cur }), {});
+  }, [labels]);
+  const localeTransformer = useCallback(
+    (label) => ({
+      ...label,
+      name: label.translation?.[locale] || label.name
+    }),
+    [locale]
+  );
+  const getLabelsById = useCallback(
+    (ids) => ids.filter(Boolean).map((item) => labelsKeyById[item]).map(localeTransformer),
+    [labelsKeyById, localeTransformer]
+  );
+  const getParents = useCallback((label) => {
+    let { parent } = label;
+    const parents = [];
+    while (parent) {
+      parents.unshift(parent);
+      parent = parent.parent;
+    }
+    return parents;
+  }, []);
+  const getFullLabelName = useCallback(
+    (label) => {
+      const parents = [...getParents(label), label].map(localeTransformer);
+      return parents.map((item) => item.name).join(" / ");
+    },
+    [localeTransformer, getParents]
+  );
+  const parseLabelIds = useCallback((labelIdsStr) => {
+    return labelIdsStr?.split(",").filter(Boolean) || [];
+  }, []);
+  const stringifyLabelIds = useCallback((labelIds = []) => {
+    if (!labelIds?.length) {
+      return void 0;
+    }
+    return labelIds.join(",");
+  }, []);
+  const localizedLabels = useMemo(() => labels.map(localeTransformer), [labels, localeTransformer]);
+  const value = useMemo(() => {
+    return {
+      loading,
+      labels: labels || [],
+      updateLabels: () => setUpdateCounter((prev) => prev + 1),
+      getLabelsById,
+      parseLabelIds,
+      stringifyLabelIds,
+      localizedLabels,
+      flattenedLabels: flatten(localizedLabels || []),
+      getFullLabelName
+    };
+  }, [loading, labels, getLabelsById, parseLabelIds, stringifyLabelIds, localizedLabels, getFullLabelName]);
+  return /* @__PURE__ */ jsx(LabelsContext.Provider, { value, children: /* @__PURE__ */ jsx(LabelsContainer.Provider, { initialState: { loading, data, createLabel }, children }) });
+}

package/dist/components/label/index.mjs

@@ -0,0 +1,5 @@
+export { default as LabelTree } from "./label-tree.mjs";
+export { default as LabelPicker } from "./label-picker.mjs";
+export { default as Labels } from "./labels.mjs";
+export * from "./context.mjs";
+export * from "./types.mjs";

package/dist/components/label/label-picker.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { GroupBase } from 'react-select';
 import { Label } from './types';
 interface LabelPickerProps {
@@ -15,5 +16,5 @@ declare module 'react-select/dist/declarations/src/Select' {
         data: Label[];
     }
 }
-export default function LabelPicker({ data, value, editable, addon, onChange, compact, isMulti, maxHeight, ...rest }: LabelPickerProps): import("react/jsx-runtime").JSX.Element;
+export default function LabelPicker({ data, value, editable, addon, onChange, compact, isMulti, maxHeight, ...rest }: LabelPickerProps): import("react").JSX.Element;
 export {};

package/dist/components/label/label-picker.mjs

@@ -0,0 +1,175 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef } from "react";
+import omit from "lodash/omit";
+import Box from "@mui/material/Box";
+import Select, {
+  components
+} from "react-select";
+import LabelTree from "./label-tree.mjs";
+import { flatten } from "./utils.mjs";
+const LabelMenuList = (props) => {
+  const { options, getValue, selectProps, selectOption } = props;
+  const value = getValue();
+  const handleSelect = (id) => {
+    const option = options.find((item) => item.data.id === id);
+    if (option) {
+      selectOption(option);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(components.MenuList, { ...omit(props, ["addon"]), children: /* @__PURE__ */ jsx(Box, { sx: { px: 2, py: 1 }, children: /* @__PURE__ */ jsx(
+      LabelTree,
+      {
+        data: selectProps.data,
+        selectable: true,
+        onSelect: handleSelect,
+        selected: value.map((item) => item.data.id)
+      }
+    ) }) }),
+    props.addon
+  ] });
+};
+const ValueContainer = ({ children, ...props }) => {
+  const [values, input] = children;
+  const count = Array.isArray(values) ? values.length : 0;
+  return /* @__PURE__ */ jsxs(components.ValueContainer, { ...props, children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "span",
+        sx: {
+          fontSize: 13,
+          fontWeight: "bold",
+          color: (theme) => theme.palette.mode === "dark" ? "grey.800" : "text.primary"
+        },
+        children: count ? "Labels" : "Filter by labels"
+      }
+    ),
+    !!count && /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "inline-flex",
+          justifyContent: "center",
+          alignItems: "center",
+          width: 22,
+          height: 22,
+          ml: 1,
+          borderRadius: "100%",
+          fontSize: 12,
+          color: (theme) => theme.palette.mode === "dark" ? "grey.800" : "text.primary",
+          bgcolor: "grey.200"
+        },
+        children: count
+      }
+    ),
+    input
+  ] });
+};
+const compactSelectStyles = {
+  control: (provided) => ({
+    ...provided,
+    minHeight: 31
+  }),
+  valueContainer: (provided) => ({
+    ...provided,
+    display: "flex"
+  }),
+  dropdownIndicator: (provided) => ({
+    ...provided,
+    padding: "0 4px"
+  }),
+  clearIndicator: (provided) => ({
+    ...provided,
+    padding: "4px"
+  })
+};
+export default function LabelPicker({
+  data,
+  value = [],
+  editable = false,
+  addon,
+  onChange,
+  compact,
+  isMulti = true,
+  maxHeight = 264,
+  ...rest
+}) {
+  const selectRef = useRef(null);
+  const options = useMemo(
+    () => flatten(data).map((item) => ({ data: item, label: item.name, value: item.id })),
+    [data]
+  );
+  const optionsKeyById = options.reduce(
+    (acc, cur) => ({ ...acc, [cur.data.id]: cur }),
+    {}
+  );
+  const valueArr = Array.isArray(value) ? value : [value];
+  const selectedOptions = valueArr.map((item) => optionsKeyById[item]);
+  const changes = useRef({
+    prev: valueArr.map((item) => optionsKeyById[item]?.data || "")
+  });
+  const handleChange = (v, actionMeta) => {
+    if (!isMulti || !Array.isArray(v)) {
+      onChange(v ? [v.data] : []);
+    } else {
+      changes.current.current = v.map((item) => item.data);
+    }
+    if (["clear", "remove-value"].includes(actionMeta.action) && selectRef.current) {
+      setTimeout(() => selectRef?.current?.blur(), 1);
+    }
+  };
+  const handleMenuClose = () => {
+    if (changes.current.current) {
+      const changed = JSON.stringify(changes.current.prev.map((item) => item.id)) !== JSON.stringify(changes.current.current.map((item) => item.id));
+      if (changed) {
+        onChange(changes.current.current);
+        changes.current.prev = changes.current.current;
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(Box, { ...rest, children: /* @__PURE__ */ jsx(
+    Select,
+    {
+      ref: selectRef,
+      defaultValue: selectedOptions,
+      options,
+      onChange: handleChange,
+      components: {
+        // @ts-ignore
+        MenuList: (props) => /* @__PURE__ */ jsx(LabelMenuList, { ...props, addon }),
+        // eslint-disable-line react/no-unstable-nested-components
+        ...compact && { ValueContainer }
+      },
+      placeholder: "Select labels",
+      styles: {
+        ...compact && compactSelectStyles,
+        menu: (css) => ({
+          ...css,
+          ...editable && { paddingBottom: "36px" },
+          zIndex: 99
+        }),
+        menuList: (css) => ({
+          ...css,
+          overflowY: "auto",
+          maxHeight: `${maxHeight}px`
+        })
+      },
+      theme: (_theme) => ({
+        ..._theme,
+        colors: {
+          ..._theme.colors,
+          primary25: "#ddd",
+          primary50: "#ddd",
+          primary: "#ddd"
+        }
+      }),
+      isSearchable: false,
+      isMulti,
+      closeMenuOnSelect: !isMulti,
+      onMenuClose: handleMenuClose,
+      isClearable: true,
+      data
+    }
+  ) });
+}

package/dist/components/label/label-tree.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SxProps } from '@mui/system';
 import { Label } from './types';
 interface SharedProps {
@@ -12,5 +13,5 @@ export interface LabelTreeProps extends SharedProps {
     sx?: SxProps;
     rowHeight?: number;
 }
-export default function LabelTree({ data, selectable, selected, onSelect, rowHeight, renderItem, sx, ...rest }: LabelTreeProps): import("react/jsx-runtime").JSX.Element;
+export default function LabelTree({ data, selectable, selected, onSelect, rowHeight, renderItem, sx, ...rest }: LabelTreeProps): import("react").JSX.Element;
 export {};

package/dist/components/label/label-tree.mjs

@@ -0,0 +1,124 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo, useRef, createContext, useContext, useEffect } from "react";
+import { ExpandMore as ExpandMoreIcon } from "@mui/icons-material";
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+import { Tree } from "react-arborist";
+import { Icon } from "@iconify/react";
+import LabelRounded from "virtual:icons/material-symbols/label-rounded";
+import CheckSmall from "virtual:icons/material-symbols/check-small";
+const LabelTreeContext = createContext({});
+function LabelTreeProvider({
+  selectable = false,
+  selected = [],
+  onSelect,
+  renderItem,
+  children
+}) {
+  const isSelected = (id) => selected.indexOf(id) !== -1;
+  const select = (id) => {
+    Array.from(new Set(selected).add(id));
+    onSelect?.(id);
+  };
+  const value = useMemo(
+    () => ({
+      selectable,
+      selected,
+      isSelected,
+      select,
+      renderItem
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [selected]
+  );
+  return /* @__PURE__ */ jsx(LabelTreeContext.Provider, { value, children });
+}
+const isLeaf = (node) => {
+  return node.isLeaf || !node.data.children?.length;
+};
+function FolderArrow({ node }) {
+  if (isLeaf(node)) return /* @__PURE__ */ jsx("span", {});
+  return node.isOpen ? /* @__PURE__ */ jsx(ExpandMoreIcon, { style: { fontSize: 20 } }) : /* @__PURE__ */ jsx(ExpandMoreIcon, { style: { fontSize: 20, transform: "rotate(-90deg)" } });
+}
+function Node({ node, style, dragHandle }) {
+  const { selectable, select, isSelected, renderItem } = useContext(LabelTreeContext);
+  const { data } = node;
+  const icon = data.icon ? /* @__PURE__ */ jsx(Icon, { icon: data.icon, style: { fontSize: 18 } }) : /* @__PURE__ */ jsx(LabelRounded, { style: { fontSize: 18, color: data.color || "#ddd" } });
+  const handleToggle = (e) => {
+    e.stopPropagation();
+    if (node.isInternal) {
+      node.toggle();
+    }
+  };
+  const handleClick = (e) => {
+    e.stopPropagation();
+    if (selectable) {
+      select(node.id);
+    }
+  };
+  const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", flex: 1 }, children: [
+      /* @__PURE__ */ jsx(Box, { sx: { display: "flex", cursor: "pointer" }, onClick: handleToggle, children: /* @__PURE__ */ jsx(FolderArrow, { node }) }),
+      /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", width: 22, height: 22 }, children: icon }),
+      /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: "grey.700" }, children: node.data.name })
+    ] }),
+    selectable && isSelected(node.id) && /* @__PURE__ */ jsx(CheckSmall, {})
+  ] });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: "label-tree-item",
+      style,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        color: (theme) => theme.palette.mode === "dark" ? "grey.800" : "text.primary"
+      },
+      ref: dragHandle,
+      onClick: handleClick,
+      children: [
+        !renderItem && children,
+        !!renderItem && renderItem(children, node.data)
+      ]
+    }
+  );
+}
+const Root = styled(Box)`
+  > div,
+  > div > div,
+  > div > div > div {
+    width: auto !important;
+  }
+  [role='treeitem'] {
+    display: flex;
+    align-items: stretch;
+  }
+  .label-tree-item {
+    width: 100%;
+  }
+`;
+export default function LabelTree({
+  data,
+  selectable,
+  selected = [],
+  onSelect,
+  rowHeight = 28,
+  renderItem,
+  sx,
+  ...rest
+}) {
+  const tree = useRef(void 0);
+  const mergedSx = [...Array.isArray(sx) ? sx : [sx]];
+  const [height, setHeight] = useState(0);
+  const updateHeight = useCallback(() => {
+    setHeight((tree.current?.visibleNodes?.length || 0) * rowHeight);
+  }, [rowHeight]);
+  useEffect(() => {
+    updateHeight();
+  }, [data, updateHeight]);
+  const handleToggle = () => {
+    setTimeout(updateHeight);
+  };
+  return /* @__PURE__ */ jsx(LabelTreeProvider, { selectable, selected, onSelect, renderItem, children: /* @__PURE__ */ jsx(Root, { ...rest, sx: mergedSx, children: /* @__PURE__ */ jsx(Tree, { data, rowHeight, height, indent: 32, ref: tree, onToggle: handleToggle, children: Node }) }) });
+}

package/dist/components/label/labels.d.ts

@@ -1,5 +1,5 @@
-import { JSX } from 'react';
-import { SxProps } from '@mui/material';
+import { type JSX } from 'react';
+import { type SxProps } from '@mui/material';
 import { Label } from './types';
 interface LabelsProps {
     labels: string[] | undefined | null;
@@ -8,5 +8,5 @@ interface LabelsProps {
     sx?: SxProps;
     renderLabel?: (label: Label) => JSX.Element;
 }
-export default function Labels({ labels, editable, onChange, sx, renderLabel }: LabelsProps): import("react/jsx-runtime").JSX.Element | null;
+export default function Labels({ labels, editable, onChange, sx, renderLabel }: LabelsProps): JSX.Element | null;
 export {};

package/dist/components/label/labels.mjs

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Edit as EditIcon, LabelOutlined as LabelOutlinedIcon } from "@mui/icons-material";
+import {
+  Box,
+  Button,
+  IconButton,
+  ClickAwayListener,
+  Chip,
+  getContrastRatio,
+  alpha as muiAlpha
+} from "@mui/material";
+import { useLabelsContext } from "./context.mjs";
+import LabelPicker from "./label-picker.mjs";
+const getContrastTextColor = (bgcolor) => {
+  try {
+    const ratio = getContrastRatio(bgcolor, "#fff");
+    return ratio > 2.7 ? "#fff" : "#111";
+  } catch {
+    return "#111";
+  }
+};
+const getAlphaColor = (color, alpha) => {
+  try {
+    if (color) {
+      return muiAlpha(color, alpha);
+    }
+  } catch {
+    return color;
+  }
+  return color;
+};
+export default function Labels({ labels, editable, onChange, sx, renderLabel }) {
+  const isEmpty = !labels?.length;
+  const { labels: allLabels, loading, getLabelsById, getFullLabelName } = useLabelsContext();
+  const [editing, setEditing] = useState(false);
+  if (loading || !editable && isEmpty) {
+    return null;
+  }
+  const handleOnChange = (v) => {
+    onChange?.(v);
+    setTimeout(() => {
+      setEditing(false);
+    }, 300);
+  };
+  if (editing) {
+    return /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: () => editing && setEditing(false), children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(LabelPicker, { data: allLabels, value: labels || [], onChange: handleOnChange }) }) });
+  }
+  const labelObjects = getLabelsById(labels || []).filter((x) => x.type !== "system");
+  const mergedSx = [
+    { display: "flex", gap: 1, alignItems: "center", flexWrap: "wrap" },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  return /* @__PURE__ */ jsxs(Box, { sx: mergedSx, children: [
+    labelObjects.map((item) => {
+      if (!item) {
+        return null;
+      }
+      if (renderLabel) {
+        return renderLabel(item);
+      }
+      return /* @__PURE__ */ jsx(
+        Chip,
+        {
+          label: getFullLabelName(item),
+          variant: "filled",
+          size: "small",
+          sx: {
+            height: 20,
+            borderRadius: 1,
+            fontSize: 12,
+            bgcolor: getAlphaColor(item.color || "#ddd", 0.8),
+            color: getContrastTextColor(item.color || "#ddd")
+          }
+        },
+        item.id
+      );
+    }),
+    editable && !isEmpty && /* @__PURE__ */ jsx(IconButton, { color: "inherit", size: "small", onClick: () => setEditing(true), sx: { color: "grey.400" }, children: /* @__PURE__ */ jsx(EditIcon, { sx: { fontSize: 20 } }) }),
+    editable && isEmpty && /* @__PURE__ */ jsx(Button, { color: "inherit", variant: "outlined", startIcon: /* @__PURE__ */ jsx(LabelOutlinedIcon, {}), onClick: () => setEditing(true), children: "Edit labels" })
+  ] });
+}

package/dist/components/label/utils.mjs

@@ -0,0 +1,52 @@
+export const flatten = (data) => {
+  return data.reduce((acc, cur) => {
+    acc.push(cur);
+    if (cur.children?.length) {
+      acc.push(...flatten(cur.children));
+    }
+    return acc;
+  }, []);
+};
+export const copyTree = (data) => {
+  return data.map((item) => {
+    if (item.children?.length) {
+      item.children = copyTree(item.children);
+    }
+    return item;
+  });
+};
+export const safeParseJSON = (json, defaultValue = null) => {
+  try {
+    return JSON.parse(json);
+  } catch {
+    return defaultValue;
+  }
+};
+export const transformLabels = (labelDtos) => {
+  const relations = labelDtos.reduce((acc, cur) => {
+    acc[cur.id] = acc[cur.id] || {};
+    if (cur.parentId) {
+      acc[cur.id].parent = cur.parentId;
+      acc[cur.parentId] = acc[cur.parentId] || {};
+      acc[cur.parentId].children = acc[cur.parentId].children || [];
+      acc[cur.parentId].children.push(cur.id);
+    }
+    return acc;
+  }, {});
+  const labels = labelDtos.map(({ parentId, translation, ...rest }) => ({
+    ...rest,
+    translation: safeParseJSON(translation),
+    children: []
+  }));
+  const labelsKeyById = labels.reduce((acc, cur) => ({ ...acc, [cur.id]: cur }), {});
+  labels.forEach((item) => {
+    const relation = relations[item.id];
+    if (relation.parent && labelsKeyById[relation.parent]) {
+      item.parent = labelsKeyById[relation.parent];
+    }
+    if (relation.children) {
+      item.children = relation.children.map((childId) => labelsKeyById[childId]);
+    }
+  });
+  return labels.filter((item) => !item.parent);
+};

package/dist/global.d.ts

@@ -0,0 +1 @@
+/// <reference path="../../../global.d.ts" />

package/dist/index.mjs

@@ -0,0 +1,7 @@
+export * from "./components/label/index.mjs";
+export * from "./label2/labels-context.mjs";
+export * from "./label2/github-label-picker.mjs";
+export * from "./label2/labels-input.mjs";
+export * from "./label2/labels2.mjs";
+export { LabelTreeNode } from "./label2/tree.mjs";
+export * from "./types.mjs";

package/dist/label2/github-label-picker.d.ts

@@ -1,4 +1,5 @@
-import { BoxProps } from '@mui/material';
+/// <reference types="react" />
+import { type BoxProps } from '@mui/material';
 export interface GithubLabelPickerProps {
     value: string[];
     onChange: (value: string[]) => void;
@@ -14,4 +15,4 @@ export interface GithubLabelPickerProps {
     title?: string;
     disablePortal?: boolean;
 }
-export declare function GithubLabelPicker({ value, onChange, noLabelsText, buttonSx, actions, trigger, multiple, updateImmediately, excludes, disabled, enableAccessControl, disablePortal, }: GithubLabelPickerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function GithubLabelPicker({ value, onChange, noLabelsText, buttonSx, actions, trigger, multiple, updateImmediately, excludes, disabled, enableAccessControl, disablePortal, }: GithubLabelPickerProps): import("react").JSX.Element | null;