@meta-1/design 0.0.159

package/src/components/uix/tree-select/index.tsx

@@ -0,0 +1,137 @@
+import { type FC, type ReactNode, useEffect, useMemo, useRef, useState } from "react";
+import { CaretSortIcon, Cross2Icon } from "@radix-ui/react-icons";
+import classNames from "classnames";
+
+import {
+  cn,
+  Empty,
+  type EmptyProps,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  ScrollArea,
+  Spin,
+  Tree,
+  type TreeData,
+  useSize,
+} from "@meta-1/design";
+import { Button } from "@meta-1/design/components/ui/button";
+
+export type TreeSelectProps = {
+  className?: string;
+  treeData: TreeData[];
+  clearable?: boolean;
+  value?: string;
+  onChange?: (value?: string) => void;
+  loading?: boolean;
+  placeholder?: string;
+  contentClassName?: string;
+  emptyProps?: EmptyProps;
+};
+
+const getTitleFromTreeData = (treeData: TreeData[], key: string): ReactNode => {
+  // 迭代所有 children
+  for (const item of treeData) {
+    if (item.key === key) {
+      return item.title;
+    }
+    if (item.children) {
+      const title = getTitleFromTreeData(item.children, key);
+      if (title) {
+        return title;
+      }
+    }
+  }
+};
+
+export const TreeSelect: FC<TreeSelectProps> = (props) => {
+  const {
+    value,
+    onChange,
+    className,
+    treeData,
+    clearable = false,
+    loading = false,
+    placeholder,
+    contentClassName,
+    emptyProps,
+  } = props;
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef(null);
+  const size = useSize(containerRef);
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+  const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
+
+  const showClear = useMemo(() => clearable && selectedKeys.length, [clearable, selectedKeys]);
+  const showValue = useMemo(() => {
+    if (selectedKeys.length > 0) {
+      return getTitleFromTreeData(treeData, selectedKeys[0]);
+    }
+    return <span className="text-secondary-foreground/50">{placeholder}</span>;
+  }, [treeData, selectedKeys, placeholder]);
+
+  useEffect(() => {
+    if (value) {
+      setSelectedKeys([value]);
+    } else {
+      setSelectedKeys([]);
+    }
+  }, [value]);
+
+  return (
+    <Popover onOpenChange={setOpen} open={open}>
+      <PopoverTrigger asChild disabled={loading}>
+        <Button
+          aria-expanded={open}
+          className={cn(
+            "group h-9 min-w-[150px] items-center justify-between px-2 py-1 align-middle hover:bg-secondary/40",
+            className,
+          )}
+          disabled={loading}
+          ref={containerRef}
+          variant="outline"
+        >
+          <div className="flex flex-1 items-center justify-center">
+            <div className="flex flex-1">{showValue}</div>
+            {loading ? (
+              <Spin />
+            ) : (
+              <div className="flex items-center">
+                <CaretSortIcon className={cn("block h-4 w-4", showClear ? "group-hover:hidden" : "")} />
+                <Cross2Icon
+                  className={cn("hidden h-4 w-4", showClear ? "group-hover:block" : "")}
+                  onClick={(e) => {
+                    setSelectedKeys([]);
+                    onChange?.(undefined);
+                    e.stopPropagation();
+                  }}
+                />
+              </div>
+            )}
+          </div>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" style={{ width: size.width }}>
+        <ScrollArea className={classNames("flex max-h-[30vh] flex-col", contentClassName)}>
+          {treeData?.length ? (
+            <Tree
+              expandedKeys={expandedKeys}
+              onExpand={(expandedKeys) => setExpandedKeys(expandedKeys as string[])}
+              onSelect={(selectedKeys, { selected }) => {
+                if (selected) {
+                  onChange?.(selectedKeys[0] as string);
+                  setSelectedKeys(selectedKeys as string[]);
+                }
+                setOpen(false);
+              }}
+              selectedKeys={selectedKeys}
+              treeData={treeData}
+            />
+          ) : (
+            <Empty {...(emptyProps ?? {})} />
+          )}
+        </ScrollArea>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/components/uix/tree-table/action.tsx

@@ -0,0 +1,24 @@
+import type { FC } from "react";
+import { ChevronDownIcon, ChevronRightIcon } from "@radix-ui/react-icons";
+import classNames from "classnames";
+
+export type ExpandActionProps = {
+  enable: boolean;
+  expanded: boolean;
+  onClick?: () => void;
+};
+
+export const ExpandAction: FC<ExpandActionProps> = (props) => {
+  const { enable, expanded, onClick } = props;
+  return (
+    <div
+      className={classNames(
+        "flex h-6 w-6 items-center justify-center rounded-sm",
+        enable ? "cursor-pointer bg-[rgba(0,0,0,0.05)] hover:bg-[rgba(0,0,0,0.1)]" : "",
+      )}
+      onClick={onClick}
+    >
+      {enable ? expanded ? <ChevronDownIcon /> : <ChevronRightIcon /> : null}
+    </div>
+  );
+};

package/src/components/uix/tree-table/config.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_INDENT_WIDTH = 24;
+export const DEFAULT_CHILDREN_PROPERTY = "children";

package/src/components/uix/tree-table/index.tsx

@@ -0,0 +1,86 @@
+import { type ReactNode, useCallback, useEffect, useState } from "react";
+import cloneDeep from "lodash/cloneDeep";
+import remove from "lodash/remove";
+import uniq from "lodash/uniq";
+
+import { Empty, type EmptyProps, Spin, Table, TableBody, TableHead, TableHeader, TableRow } from "@meta-1/design";
+import { renderRow } from "./utils";
+
+export type TreeTableColumn<TData> = {
+  className?: string;
+  headerClassName?: string;
+  formatters?: string[];
+  title: ReactNode;
+  dataKey: keyof TData;
+  // biome-ignore lint/suspicious/noExplicitAny: <value>
+  render?: (value: any, data: TData) => ReactNode;
+};
+
+export type TreeTableProps<TData> = {
+  data: TData[];
+  columns: TreeTableColumn<TData>[];
+  rowKey?: keyof TData;
+  childrenProperty?: string;
+  showHeader?: boolean;
+  indentWidth?: number;
+  expandedKeys?: string[];
+  defaultExpandedKeys?: string[];
+  onExpand?: (expandedKeys: string[]) => void;
+  loading?: boolean;
+  emptyProps?: EmptyProps;
+};
+
+export function TreeTable<TData>(props: TreeTableProps<TData>) {
+  const { columns, data, showHeader = true, defaultExpandedKeys = [], loading = false, emptyProps } = props;
+  const [expandedKeys, setExpandedKeys] = useState<string[]>(defaultExpandedKeys);
+
+  useEffect(() => {
+    setExpandedKeys(props.expandedKeys ?? []);
+  }, [props.expandedKeys]);
+
+  const onExpand = useCallback(
+    (key: string, expanded: boolean) => {
+      const keys = cloneDeep(expandedKeys);
+      if (expanded) {
+        setExpandedKeys(uniq([...keys, key]));
+      } else {
+        setExpandedKeys(remove(keys, (item) => item !== key));
+      }
+    },
+    [expandedKeys],
+  );
+
+  return (
+    <div className="relative">
+      <Table>
+        {showHeader && (
+          <TableHeader>
+            <TableRow>
+              {columns.map((col) => (
+                <TableHead className={col.headerClassName} key={col.dataKey as string}>
+                  {col.title}
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+        )}
+        <TableBody>
+          {renderRow<TData>({
+            data,
+            tableProps: props,
+            deep: 0,
+            expandedKeys,
+            onExpand,
+          })}
+        </TableBody>
+      </Table>
+      {loading ? (
+        <div className="absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center bg-white/50">
+          <Spin />
+        </div>
+      ) : data && data.length > 0 ? null : (
+        <Empty {...(emptyProps ?? {})} />
+      )}
+    </div>
+  );
+}

package/src/components/uix/tree-table/utils.tsx

@@ -0,0 +1,63 @@
+import type { ReactNode } from "react";
+
+import { TableCell, TableRow, type TreeTableProps } from "@meta-1/design";
+import { ExpandAction } from "./action";
+import { DEFAULT_CHILDREN_PROPERTY, DEFAULT_INDENT_WIDTH } from "./config";
+
+export type RenderRowProps<TData> = {
+  data: TData[];
+  tableProps: TreeTableProps<TData>;
+  deep: number;
+  expandedKeys: string[];
+  onExpand?: (key: string, expanded: boolean) => void;
+};
+
+export function renderRow<TData>(props: RenderRowProps<TData>): ReactNode {
+  const {
+    childrenProperty = DEFAULT_CHILDREN_PROPERTY,
+    rowKey,
+    columns,
+    indentWidth = DEFAULT_INDENT_WIDTH,
+  } = props.tableProps;
+  const { data, deep, expandedKeys, onExpand } = props;
+
+  return data?.map((item) => {
+    const children = item[childrenProperty as keyof TData] as TData[];
+    const hasChildren = children && children.length > 0;
+    const key = item[rowKey as keyof TData] as string;
+    const expanded = expandedKeys.includes(key);
+    return [
+      <TableRow key={key}>
+        {columns.map((col, index) => {
+          const content = col.render ? col.render(item[col.dataKey], item) : String(item[col.dataKey]);
+          return (
+            <TableCell className={col.className} key={col.dataKey as string}>
+              {index === 0 ? (
+                <div className="flex items-center justify-start">
+                  <div
+                    className="mr-2"
+                    style={{
+                      paddingLeft: (indentWidth + 8) * deep,
+                    }}
+                  >
+                    <ExpandAction enable={hasChildren} expanded={expanded} onClick={() => onExpand?.(key, !expanded)} />
+                  </div>
+                  {content}
+                </div>
+              ) : (
+                content
+              )}
+            </TableCell>
+          );
+        })}
+      </TableRow>,
+      expanded
+        ? renderRow({
+            ...props,
+            data: children,
+            deep: deep + 1,
+          })
+        : null,
+    ];
+  });
+}

package/src/components/uix/uploader/index.tsx

@@ -0,0 +1,237 @@
+import { forwardRef, type PropsWithChildren, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { CheckCircledIcon, Cross2Icon, CrossCircledIcon, FileIcon } from "@radix-ui/react-icons";
+import classNames from "classnames";
+import get from "lodash/get";
+import remove from "lodash/remove";
+import { type DropzoneOptions, useDropzone } from "react-dropzone";
+import { v4 as uuidv4 } from "uuid";
+
+import { Button, Progress, useMessage } from "@meta-1/design";
+import { UIXContext } from "@meta-1/design/components/uix/config-provider";
+import { cn } from "@meta-1/design/lib";
+import type { HandleProps, UploadFile } from "./type";
+import { defaultUploadHandle } from "./utils";
+
+export type UploaderProps = PropsWithChildren<{
+  showFileList?: boolean;
+  className?: string;
+  placeholder?: string;
+  action?: string;
+  uploadText?: string;
+  value?: UploadFile[];
+  onChange?: (value: UploadFile[]) => void;
+  headers?: Record<string, string>;
+  data?: unknown;
+  showButton?: boolean;
+  uploadHandle?: (props: HandleProps) => void;
+}> &
+  DropzoneOptions;
+
+const initFile = (file: UploadFile) => {
+  file.uid ??= uuidv4();
+  file.status ??= "done";
+  return file;
+};
+
+export const Uploader = forwardRef<HTMLDivElement, UploaderProps>((props, forwardedRef) => {
+  const {
+    className,
+    onDropAccepted,
+    action,
+    onChange,
+    value,
+    headers,
+    data,
+    showButton = true,
+    showFileList = true,
+    children,
+    uploadHandle = defaultUploadHandle,
+    maxFiles,
+    ...rest
+  } = props;
+  const elementRef = forwardedRef;
+
+  const [files, setFiles] = useState<UploadFile[]>((value || []).map(initFile));
+  const filesRef = useRef<UploadFile[]>(files);
+  const config = useContext(UIXContext);
+  const message = useMessage();
+  const placeholder = props.placeholder || get(config.locale, "Uploader.placeholder");
+  const uploadText = props.uploadText || get(config.locale, "Uploader.uploadText");
+  const maxFilesExceededText = get(config.locale, "Uploader.maxFilesExceeded");
+  const partialFilesAddedText =
+    get(config.locale, "Uploader.partialFilesAdded") || ", only %count more files can be added";
+
+  // 检查是否达到文件上限
+  const isMaxFilesReached = maxFiles !== undefined && files.length >= maxFiles;
+
+  useEffect(() => {
+    if (value) {
+      setFiles(value.map(initFile));
+      filesRef.current = value.map(initFile);
+    }
+  }, [value]);
+
+  useEffect(() => {
+    filesRef.current = files;
+  }, [files]);
+
+  const { getRootProps, getInputProps } = useDropzone({
+    ...rest,
+    maxFiles,
+    disabled: isMaxFilesReached,
+    onDropAccepted: (list: File[], event) => {
+      onDropAccepted?.(list, event);
+
+      // 检查 maxFiles 限制
+      let filesToAdd = list;
+      if (maxFiles !== undefined) {
+        const currentFileCount = filesRef.current.length;
+        const availableSlots = maxFiles - currentFileCount;
+
+        if (availableSlots <= 0) {
+          // 已达到最大文件数，不添加任何文件
+          message.warning(maxFilesExceededText);
+          return;
+        }
+
+        // 只添加可用槽位数量的文件
+        if (list.length > availableSlots) {
+          filesToAdd = list.slice(0, availableSlots);
+          message.warning(
+            `${maxFilesExceededText}${partialFilesAddedText.replace("%count", availableSlots.toString())}`,
+          );
+        }
+      }
+
+      const newFiles = [
+        ...filesRef.current,
+        ...filesToAdd.map((file) => {
+          const uploadFile = file as UploadFile;
+          uploadFile.uid = uuidv4();
+          uploadFile.status = "init";
+          return uploadFile;
+        }),
+      ];
+      setFiles(newFiles);
+      onChange?.(newFiles as UploadFile[]);
+    },
+    onDropRejected(fileRejections) {
+      // 收集所有文件名和错误信息
+      const errorMessages = fileRejections.map((rejection) => {
+        return `${rejection.file.name}: ${rejection.errors[0].message}`;
+      });
+      message.warning(errorMessages.map((item) => <div key={item}>{item}</div>));
+    },
+  });
+
+  const onUpload = useCallback(() => {
+    const updateFile = (file: UploadFile, status: "uploading" | "done" | "error") => {
+      const idx = filesRef.current.findIndex((f) => (f as UploadFile).uid === file.uid);
+      if (idx !== -1) {
+        file.status = status;
+        filesRef.current[idx] = {
+          ...filesRef.current[idx],
+          ...file,
+          name: filesRef.current[idx].name,
+          size: filesRef.current[idx].size,
+          type: filesRef.current[idx].type,
+        };
+        setFiles([...filesRef.current]);
+        onChange?.([...filesRef.current] as UploadFile[]);
+      }
+    };
+    for (const f of filesRef.current) {
+      const file = f as UploadFile;
+      if (file.status === "init") {
+        file.status = "uploading";
+        file.progress = 0;
+        uploadHandle({
+          file,
+          action,
+          headers,
+          data,
+          onProgress: (file) => updateFile(file, "uploading"),
+          onSuccess: (file) => updateFile(file, "done"),
+          onError: (file) => updateFile(file, "error"),
+        });
+      }
+    }
+    setFiles([...filesRef.current]);
+    onChange?.([...filesRef.current] as UploadFile[]);
+  }, [action, headers, data, uploadHandle, onChange]);
+
+  const renderFile = (file: UploadFile) => {
+    return (
+      <div className={cn("flex items-center justify-center border-b", "last:border-none")} key={file.uid}>
+        <div className="flex h-8 w-8 items-center justify-center">
+          <FileIcon />
+        </div>
+        <div className="w-[50%] overflow-hidden overflow-ellipsis whitespace-nowrap text-sm">{file.name}</div>
+        <div className="mx-1 flex-1">
+          {file.status === "uploading" && <Progress className="w-full" value={file.progress} />}
+          {file.status === "error" && (
+            <div className="flex items-center justify-end text-red-500">
+              <CrossCircledIcon className="mr-1" />
+              <span className="text-sm"> {file.error?.message}</span>
+            </div>
+          )}
+          {file.status === "done" && (
+            <div className="flex items-center justify-end text-green-500">
+              <CheckCircledIcon />
+            </div>
+          )}
+        </div>
+        <div
+          className={cn("flex h-8 w-8 items-center justify-center", "cursor-pointer hover:bg-[var(--action-hover)]")}
+          onClick={() => {
+            remove(filesRef.current, (item: UploadFile) => item.uid === file.uid);
+            file.controller?.abort();
+            setFiles([...filesRef.current]);
+            onChange?.([...filesRef.current]);
+          }}
+        >
+          <Cross2Icon />
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="flex flex-col space-y-2" ref={elementRef}>
+      <div {...getRootProps()} className={classNames(children ? "inline-block w-auto" : "", "outline-none")}>
+        <input {...getInputProps()} />
+        {children ? (
+          children
+        ) : (
+          <div
+            className={cn(
+              "flex items-center justify-center p-6 text-card-foreground/50",
+              "rounded-md border-2 border-border border-dashed bg-card",
+              "cursor-default",
+              "focus:border-primary",
+              isMaxFilesReached && "cursor-not-allowed opacity-50",
+              className,
+            )}
+            // biome-ignore lint/a11y/noNoninteractiveTabindex: <tabIndex>
+            tabIndex={0}
+          >
+            <p>{isMaxFilesReached ? maxFilesExceededText : placeholder}</p>
+          </div>
+        )}
+      </div>
+      {showFileList && files.length ? <div className="rounded-sm border">{files.map(renderFile)}</div> : null}
+      {!!files.filter(({ status }) => status === "init").length && showButton ? (
+        <div>
+          <Button
+            loading={!!files.filter(({ status }) => status === "uploading").length}
+            onClick={onUpload}
+            type="button"
+            variant="outline"
+          >
+            {uploadText}
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  );
+});

package/src/components/uix/uploader/type.ts

@@ -0,0 +1,20 @@
+export type UploadFile = File & {
+  uid: string;
+  status: "init" | "uploading" | "done" | "error";
+  progress: number;
+  // biome-ignore lint/suspicious/noExplicitAny: <response>
+  response?: any;
+  // biome-ignore lint/suspicious/noExplicitAny: <error>
+  error?: any;
+  controller?: AbortController;
+};
+
+export type HandleProps = {
+  file: UploadFile;
+  action?: string;
+  headers?: Record<string, string>;
+  data?: unknown;
+  onProgress: (file: UploadFile) => void;
+  onSuccess: (file: UploadFile) => void;
+  onError: (file: UploadFile) => void;
+};

package/src/components/uix/uploader/utils.ts

@@ -0,0 +1,41 @@
+import axios from "axios";
+
+import type { HandleProps } from "./type";
+
+export const defaultUploadHandle = (props: HandleProps) => {
+  const { file, action, headers, data, onProgress, onSuccess, onError } = props;
+  if (!action) {
+    file.status = "error";
+    file.error = new Error("action is required");
+    onError(file);
+    return;
+  }
+  const controller = new AbortController();
+  file.controller = controller;
+  const formData = new FormData();
+  formData.append("file", file);
+  // biome-ignore lint/suspicious/noExplicitAny: <appendData>
+  const appendData = (data || {}) as unknown as any;
+  for (const key of Object.keys(appendData)) {
+    formData.append(key, appendData[key]);
+  }
+  axios
+    .post(action, formData, {
+      headers,
+      onUploadProgress: (progressEvent) => {
+        file.progress = Math.ceil(progressEvent.progress! * 100);
+        onProgress(file);
+      },
+      signal: controller.signal,
+    })
+    .then((response) => {
+      file.status = "done";
+      file.response = response;
+      onSuccess(file);
+    })
+    .catch((error) => {
+      file.status = "error";
+      file.error = error;
+      onError(file);
+    });
+};

package/src/components/uix/value-formatter/index.tsx

@@ -0,0 +1,59 @@
+import { type FC, forwardRef, type PropsWithChildren } from "react";
+
+import * as BUILT_IN from "@meta-1/design/lib/formatters";
+
+// biome-ignore lint/suspicious/noExplicitAny: <formatters>
+export type Formatters = ([string, any[]] | string)[];
+// biome-ignore lint/suspicious/noExplicitAny: <functionMap>
+export type FunctionMap = Record<string, (value: any, ...args: any[]) => any>;
+
+const _handles: FunctionMap = {};
+
+export const register = (handles: FunctionMap) => {
+  Object.assign(_handles, handles);
+};
+
+// biome-ignore lint/suspicious/noExplicitAny: <v>
+export const formatValue = (v: any, formatters: Formatters, all?: FunctionMap) => {
+  // biome-ignore lint/suspicious/noExplicitAny: <merged>
+  const merged: any = { ...BUILT_IN, ..._handles, ...(all ?? {}) };
+  // biome-ignore lint/suspicious/noExplicitAny: <fallback>
+  const fallback = (v: any, ..._p: any[]) => v;
+  // biome-ignore lint/suspicious/noExplicitAny: <params>
+  let params: any[] = [];
+  let result = v;
+
+  for (const filter of formatters) {
+    let call = fallback;
+    if (typeof filter === "string") {
+      call = merged[filter] || fallback;
+    } else if (typeof filter === "function") {
+      call = filter;
+    } else if (typeof filter === "object" && filter.length) {
+      call = merged[filter[0]] || fallback;
+      params = filter[1];
+    }
+    try {
+      result = call(result, ...params);
+    } catch {
+      console.log("formatter error", filter);
+    }
+  }
+  return result;
+};
+
+export interface ValueFormatterProps extends PropsWithChildren {
+  // biome-ignore lint/suspicious/noExplicitAny: <value>
+  value?: any;
+  // biome-ignore lint/suspicious/noExplicitAny: <formatters>
+  formatters?: any[];
+  handles?: FunctionMap;
+}
+
+export const ValueFormatter: FC<ValueFormatterProps> = forwardRef((props, _ref) => {
+  const { handles, formatters = [], value, children } = props;
+  let v = value === 0 ? value : value || children;
+  if (!formatters.includes("defaultValue")) formatters.push("defaultValue");
+  v = formatValue(v, formatters, handles);
+  return <>{v}</>;
+});

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from "./resize";
+export * from "./use.outside";