@cozeloop/components 0.0.1 → 0.0.3

package/src/columns-select/index.tsx

@@ -0,0 +1,244 @@
+/* eslint-disable @coze-arch/max-line-per-function */
+/* eslint-disable @coze-arch/no-batch-import-or-export */
+import * as sort from 'react-sortable-hoc';
+import { Fragment, useEffect, useMemo, useState } from 'react';
+
+import {
+  IconCozHandle,
+  IconCozTableSetting,
+} from '@coze-arch/coze-design/icons';
+import {
+  Button,
+  Checkbox,
+  Dropdown,
+  Typography,
+  Divider,
+  Tooltip,
+  type ColumnProps,
+} from '@coze-arch/coze-design';
+// @ts-expect-error react-sortable-hoc ts type issue
+const { sortableContainer, sortableElement, sortableHandle } = sort;
+const { arrayMove } = sort;
+
+const SortableContainer = sortableContainer(
+  ({ children }: { children: React.ReactNode }) => (
+    <div className="max-w-[200px] w-fit rounded-[6px] py-2 px-1 max-h-[372px] overflow-y-auto flex gap-y-1 flex-col">
+      {children}
+    </div>
+  ),
+);
+
+const DragHandle = sortableHandle(() => (
+  <IconCozHandle className="cursor-grab" aria-label="拖动排序" role="button" />
+));
+export interface ColumnItem extends ColumnProps {
+  key: string;
+  value: string;
+  disabled?: boolean;
+  checked?: boolean;
+}
+
+export interface ColumnSelectorProps {
+  columns: ColumnItem[];
+  onChange?: (items: ColumnItem[]) => void;
+  buttonText?: string;
+  resetButtonText?: string;
+  className?: string;
+  sortable?: boolean;
+  defaultColumns?: ColumnItem[];
+  itemRender?: (item: ColumnItem) => React.ReactNode;
+  footerRender?: (item: ColumnItem[]) => React.ReactNode;
+}
+
+export const ColumnSelector = ({
+  columns,
+  defaultColumns = columns,
+  onChange,
+  buttonText,
+  resetButtonText = '重置为默认',
+  className,
+  sortable = true,
+  itemRender,
+  footerRender,
+}: ColumnSelectorProps) => {
+  const [list, setList] = useState<ColumnItem[]>(() => [...columns]);
+  const selectedKeys = useMemo(
+    () => list.filter(item => item.checked).map(item => item.key),
+    [list],
+  );
+  const disabledKeys = useMemo(
+    () => list.filter(item => item.disabled).map(item => item.key),
+    [list],
+  );
+
+  const RenderItem = (value: ColumnItem, slot?: React.ReactNode) => {
+    const render = itemRender ? itemRender(value) : null;
+    if (render) {
+      return render;
+    }
+    return (
+      <span
+        // ref={spanRef}
+        className="group flex items-center justify-between py-1 px-2 text-[var(--coz-fg-primary)] z-[99999] select-none hover:bg-[var(--coz-mg-secondary)] rounded-[6px] cursor-pointer bg-white"
+        style={{
+          zIndex: 99999,
+        }}
+      >
+        <div
+          className="flex items-center gap-x-2 max-w-full w-full"
+          onClick={() => {
+            if (disabledKeys.includes(value.key ?? '') || value.disabled) {
+              return;
+            }
+            const newKeys = selectedKeys.includes(value.key ?? '')
+              ? selectedKeys.filter(key => key !== value.key)
+              : [...selectedKeys, value.key];
+
+            const newColumns = list.map(item => {
+              if (newKeys.includes(item.key)) {
+                return {
+                  ...item,
+                  checked: true,
+                };
+              }
+
+              return {
+                ...item,
+                checked: false,
+              };
+            });
+
+            setList(newColumns);
+            onChange?.(newColumns);
+          }}
+        >
+          <Checkbox
+            disabled={disabledKeys.includes(value.key ?? '') || value.disabled}
+            checked={selectedKeys.includes(value.key ?? '')}
+            aria-label={`选择${value.value}`}
+          />
+          <Typography.Text
+            ellipsis={{
+              showTooltip: {
+                opts: {
+                  content: value.value,
+                  theme: 'dark',
+                },
+              },
+            }}
+            className="text-[13px] text-[var(--coz-fg-primary)] flex-1 overflow-hidden w-full"
+            style={{
+              color:
+                disabledKeys.includes(value.key ?? '') || value.disabled
+                  ? 'var(--coz-fg-dim)'
+                  : '',
+            }}
+          >
+            {value.value}
+          </Typography.Text>
+          <div className="opacity-0 group-hover:opacity-100 transition-opacity flex items-center coz-fg-secondary">
+            {slot}
+          </div>
+        </div>
+      </span>
+    );
+  };
+
+  const SortableItem = sortableElement(({ value }: { value: ColumnItem }) =>
+    RenderItem(value, <DragHandle />),
+  );
+
+  const handleSortEnd = ({
+    oldIndex,
+    newIndex,
+  }: {
+    oldIndex: number;
+    newIndex: number;
+  }) => {
+    const newList = arrayMove(list, oldIndex, newIndex);
+    setList(newList);
+    onChange?.(newList);
+  };
+
+  const handleReset = () => {
+    setList(defaultColumns);
+    onChange?.(defaultColumns);
+  };
+
+  useEffect(() => {
+    setList(columns);
+  }, [columns]);
+
+  return (
+    <div className={className}>
+      <Dropdown
+        position="bottomRight"
+        render={
+          <div
+            onClick={event => {
+              event.stopPropagation();
+            }}
+          >
+            <SortableContainer onSortEnd={handleSortEnd} useDragHandle>
+              <>
+                {list.map((value, index) =>
+                  value?.disabled || !sortable ? (
+                    <Fragment key={`item-${value.key}`}>
+                      {RenderItem(value)}
+                    </Fragment>
+                  ) : (
+                    <SortableItem
+                      key={`item-${value.key}`}
+                      index={index}
+                      value={value}
+                    />
+                  ),
+                )}
+              </>
+            </SortableContainer>
+            <Divider />
+            {footerRender ? (
+              <div className="flex items-center">
+                {footerRender(list)}
+                <Button
+                  color="secondary"
+                  type="secondary"
+                  className="text-center flex-1"
+                  onClick={handleReset}
+                >
+                  <span className="text-brand font-medium text-[13px]">
+                    {resetButtonText}
+                  </span>
+                </Button>
+              </div>
+            ) : (
+              <Button
+                color="secondary"
+                type="secondary"
+                className="w-full text-center"
+                onClick={handleReset}
+              >
+                <span className="text-brand font-medium text-[13px]">
+                  {resetButtonText}
+                </span>
+              </Button>
+            )}
+          </div>
+        }
+        trigger="click"
+      >
+        <div>
+          <Tooltip content="列管理" theme="dark" position="top">
+            <Button
+              icon={<IconCozTableSetting />}
+              type="primary"
+              color="primary"
+              className="flex items-center justify-center"
+              aria-label={buttonText}
+            />
+          </Tooltip>
+        </div>
+      </Dropdown>
+    </div>
+  );
+};

package/src/edit-icon-button/index.tsx

@@ -0,0 +1,36 @@
+import { type MouseEvent } from 'react';
+
+import classNames from 'classnames';
+import { IconCozPencil } from '@coze-arch/coze-design/icons';
+
+interface Props extends React.HTMLAttributes<SVGElement> {
+  className?: string;
+  disabled?: boolean;
+  onClick?: (e: MouseEvent<SVGElement>) => void;
+}
+
+export function EditIconButton({
+  disabled,
+  className,
+  onClick,
+  ...rest
+}: Props) {
+  return (
+    <IconCozPencil
+      {...rest}
+      fontSize={14}
+      className={classNames(
+        'text-[var(--coz-fg-dim)]',
+        disabled
+          ? 'cursor-not-allowed'
+          : 'cursor-pointer hover:text-[rgba(var(--coze-up-brand-9))]',
+        className,
+      )}
+      onClick={e => {
+        if (!disabled) {
+          onClick?.(e);
+        }
+      }}
+    />
+  );
+}

package/src/footer-actions/index.tsx

@@ -0,0 +1,33 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { Button, type ButtonProps } from '@coze-arch/coze-design';
+
+import { useI18n } from '../provider';
+
+interface Props {
+  confirmBtnProps?: ButtonProps & {
+    'data-btm'?: string;
+    'data-btm-title'?: string;
+    text?: string;
+  };
+  cancelBtnProps?: ButtonProps & {
+    'data-btm'?: string;
+    'data-btm-title'?: string;
+    text?: string;
+  };
+}
+export function FooterActions({
+  confirmBtnProps: { text: confirmBtnText, ...confirmBtnProps } = {},
+  cancelBtnProps: { text: cancelBtnText, ...cancelBtnProps } = {},
+}: Props) {
+  const I18n = useI18n();
+  return (
+    <div className="flex justify-end">
+      <Button color="primary" {...cancelBtnProps}>
+        {cancelBtnText ?? I18n.t('global_btn_cancel')}
+      </Button>
+      <Button className="ml-2" {...confirmBtnProps}>
+        {confirmBtnText ?? I18n.t('global_btn_confirm')}
+      </Button>
+    </div>
+  );
+}

package/src/hooks/use-infinite-scroll.ts

@@ -0,0 +1,183 @@
+/* eslint-disable @coze-arch/max-line-per-function */
+/* eslint-disable max-lines-per-function */
+import { useMemo, useState } from 'react';
+
+import { getTargetElement } from 'ahooks/lib/utils/domTarget';
+import {
+  type InfiniteScrollOptions,
+  type Data,
+  type Service,
+} from 'ahooks/lib/useInfiniteScroll/types';
+import {
+  useEventListener,
+  useMemoizedFn,
+  useRequest,
+  useUpdateEffect,
+} from 'ahooks';
+import {
+  getClientHeight,
+  getScrollHeight,
+  getScrollTop,
+} from '@cozeloop/toolkit';
+
+/**
+ * ahook的实现，在刷新列表时会出现以下两个问题
+ * 1. 发送存量数据对应的列表请求
+ * 2. 列表请求重复
+ * 因此fork ahook 实现，并将reload含义定义为刷新列表，并回到第一页
+ * @param service
+ * @param options
+ * @returns
+ */
+export const useInfiniteScroll = <TData extends Data>(
+  service: Service<TData>,
+  options: InfiniteScrollOptions<TData> = {},
+) => {
+  const {
+    target,
+    isNoMore,
+    threshold = 100,
+    reloadDeps = [],
+    manual,
+    onBefore,
+    onSuccess,
+    onError,
+    onFinally,
+  } = options;
+
+  const [finalData, setFinalData] = useState<TData>();
+  const [loadingMore, setLoadingMore] = useState(false);
+
+  const noMore = useMemo(() => {
+    if (!isNoMore) {
+      return false;
+    }
+    return isNoMore(finalData);
+  }, [finalData]);
+
+  const { loading, error, run, runAsync, cancel } = useRequest(
+    async (lastData?: TData) => {
+      const currentData = await service(lastData);
+      if (!lastData) {
+        setFinalData({
+          ...currentData,
+          list: [...(currentData.list ?? [])],
+        });
+      } else {
+        setFinalData({
+          ...currentData,
+          list: [...(lastData.list ?? []), ...currentData.list],
+        });
+      }
+      return currentData;
+    },
+    {
+      manual,
+      onFinally: (_, d, e) => {
+        setLoadingMore(false);
+        onFinally?.(d, e);
+      },
+      onBefore: () => onBefore?.(),
+      onSuccess: d => {
+        // setTimeout(() => {
+        //   scrollMethod();
+        // });
+        onSuccess?.(d);
+        setTimeout(() => {
+          checkFirstScreen();
+        });
+      },
+      onError,
+    },
+  );
+
+  const loadMore = useMemoizedFn(() => {
+    if (noMore) {
+      return;
+    }
+    setLoadingMore(true);
+    run(finalData);
+  });
+
+  const loadMoreAsync = useMemoizedFn(() => {
+    if (noMore) {
+      // eslint-disable-next-line prefer-promise-reject-errors
+      return Promise.reject();
+    }
+    setLoadingMore(true);
+    return runAsync(finalData);
+  });
+
+  const reload = () => {
+    setLoadingMore(false);
+    setFinalData(undefined);
+    return run();
+  };
+
+  const reloadAsync = () => {
+    setLoadingMore(false);
+    return runAsync();
+  };
+
+  const checkFirstScreen = () => {
+    let el = getTargetElement(target);
+    if (!el) {
+      return;
+    }
+
+    el = el === document ? document.documentElement : el;
+    const scrollHeight = getScrollHeight(el);
+    const clientHeight = getClientHeight(el);
+    if (scrollHeight <= clientHeight) {
+      // 首屏没满，自动 loadMore
+      loadMore();
+    }
+  };
+
+  const scrollMethod = () => {
+    let el = getTargetElement(target);
+    if (!el) {
+      return;
+    }
+
+    el = el === document ? document.documentElement : el;
+
+    const scrollTop = getScrollTop(el);
+    const scrollHeight = getScrollHeight(el);
+    const clientHeight = getClientHeight(el);
+
+    if (scrollHeight - scrollTop <= clientHeight + threshold) {
+      loadMore();
+    }
+  };
+
+  useEventListener(
+    'scroll',
+    () => {
+      if (loading || loadingMore) {
+        return;
+      }
+      scrollMethod();
+    },
+    { target },
+  );
+
+  useUpdateEffect(() => {
+    setFinalData(undefined);
+    run();
+  }, [...reloadDeps]);
+
+  return {
+    data: finalData,
+    loading: !loadingMore && loading,
+    error,
+    loadingMore,
+    noMore,
+    loadMore,
+    loadMoreAsync,
+    reload: useMemoizedFn(reload),
+    reloadAsync: useMemoizedFn(reloadAsync),
+    mutate: setFinalData,
+    cancel,
+  };
+};

package/src/hooks/use-mouse-down-offset.ts

@@ -0,0 +1,50 @@
+import { useState, useRef, useCallback } from 'react';
+
+import { useLatest, useMemoizedFn } from 'ahooks';
+
+interface Offset {
+  offsetX: number;
+  offsetY: number;
+}
+
+export const useMouseDownOffset = (callback: (offset: Offset) => void) => {
+  const [isActive, setIsActive] = useState(false);
+  const targetRef = useRef<HTMLElement | null>(null);
+  const [startPosition, setStartPosition] = useState<Offset | null>(null);
+  const callbackRef = useLatest(callback);
+
+  const ref = useCallback((node: HTMLElement | null) => {
+    if (targetRef.current) {
+      targetRef.current.removeEventListener('mousedown', handleMouseDown);
+    }
+    targetRef.current = node; // 更新 ref
+    if (targetRef.current) {
+      targetRef.current.addEventListener('mousedown', handleMouseDown);
+    }
+  }, []);
+
+  const handleMouseDown = useMemoizedFn((event: MouseEvent) => {
+    setIsActive(true);
+    setStartPosition({ offsetX: event.clientX, offsetY: event.clientY });
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+  });
+
+  const handleMouseMove = useMemoizedFn((event: MouseEvent) => {
+    if (startPosition) {
+      callbackRef.current({
+        offsetX: event.clientX - startPosition.offsetX,
+        offsetY: event.clientY - startPosition.offsetY,
+      });
+    }
+  });
+
+  const handleMouseUp = useMemoizedFn(() => {
+    setIsActive(false);
+    setStartPosition(null);
+    window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('mouseup', handleMouseUp);
+  });
+
+  return { isActive, ref };
+};

package/src/hooks/use-unsave-leave-warning.ts

@@ -0,0 +1,49 @@
+import { useBlocker } from 'react-router-dom';
+import { useEffect } from 'react';
+
+import { useI18n } from '../provider';
+
+interface UnsaveLeaveWarningProps {
+  /** 是否阻塞 */
+  block: boolean;
+  /** 自定义提示消息*/
+  message?: string;
+}
+
+/**
+ * 离开页面时的警告
+ * 触发时机：关闭浏览器、关闭浏览器标签页、刷新页面、导航回退离开等
+ */
+export const useUnsaveLeaveWarning = ({
+  block,
+  message,
+}: UnsaveLeaveWarningProps) => {
+  const i18n = useI18n();
+  const warnMessage =
+    message || i18n.t('unsave_leave_confirm_warning') || 'Close confirm';
+
+  useEffect(() => {
+    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+      if (block) {
+        event.preventDefault();
+        event.returnValue = warnMessage; // 显示自定义消息（部分浏览器可能不支持）
+      }
+    };
+
+    // 监听浏览器关闭标签页或刷新事件
+    window.addEventListener('beforeunload', handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, [block, warnMessage]);
+
+  // 处理 React Router 导航离开
+  useBlocker(() => {
+    if (block) {
+      // 弹出确认框
+      return !window.confirm(warnMessage);
+    }
+    return true;
+  });
+};

package/src/id-render/icon-button-container.tsx

@@ -0,0 +1,37 @@
+import { type DOMAttributes } from 'react';
+
+import cls from 'classnames';
+
+export function IconButtonContainer({
+  icon,
+  className,
+  style,
+  onClick,
+  active,
+  disabled,
+  ...rest
+}: {
+  icon: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  disabled?: boolean;
+  active?: boolean;
+} & DOMAttributes<HTMLDivElement>) {
+  return (
+    <div
+      {...rest}
+      onClick={onClick}
+      style={style}
+      className={cls(
+        'inline-flex items-center justify-center shrink-0 w-5 h-5 rounded-[4px] text-sm text-[var(--coz-fg-secondary)] ',
+        active && !disabled ? 'bg-[var(--coz-mg-plus)]' : '',
+        disabled
+          ? 'cursor-not-allowed'
+          : 'cursor-pointer hover:text-[var(--coz-fg-primary)] hover:bg-[var(--coz-mg-plus)]',
+        className,
+      )}
+    >
+      {icon}
+    </div>
+  );
+}

package/src/id-render/index.tsx

@@ -0,0 +1,64 @@
+import classNames from 'classnames';
+import { IconCozCopy } from '@coze-arch/coze-design/icons';
+import { Toast, Tooltip } from '@coze-arch/coze-design';
+
+import { IconButtonContainer } from './icon-button-container';
+
+export function IDRender({
+  id,
+  showSuffixLength = 5,
+  enableCopy = true,
+  useTag = false,
+  defaultShowCopyBtn,
+}: {
+  id: Int64;
+  showSuffixLength?: number;
+  enableCopy?: boolean;
+  useTag?: boolean;
+  defaultShowCopyBtn?: boolean;
+}) {
+  const idString = id?.toString() ?? '';
+  const suffix = idString.slice(
+    Math.max(idString.length - showSuffixLength, 0),
+    idString.length,
+  );
+  return (
+    <div
+      className="group flex items-center gap-1"
+      onClick={e => e.stopPropagation()}
+    >
+      <Tooltip content={idString} theme="dark">
+        {useTag ? (
+          <div className="shrink-0 h-5 flex items-center px-2 rounded-[3px] border border-solid border-[var(--coz-stroke-plus)] font-medium text-[var(--coz-fg-primary)]">
+            #{suffix || '-'}
+          </div>
+        ) : (
+          <span className="shrink-0">#{suffix || '-'}</span>
+        )}
+      </Tooltip>
+      {enableCopy ? (
+        <Tooltip content="复制 ID" theme="dark">
+          <div>
+            <IconButtonContainer
+              className={classNames(
+                'id-render-copy-action-button shrink-0 text-sm',
+                defaultShowCopyBtn ? '' : ' hidden group-hover:flex',
+              )}
+              icon={<IconCozCopy />}
+              onClick={async e => {
+                e.stopPropagation();
+                try {
+                  await navigator.clipboard.writeText(idString);
+                  Toast.success('复制成功');
+                } catch (error) {
+                  console.error(error);
+                  Toast.error('复制失败');
+                }
+              }}
+            />
+          </div>
+        </Tooltip>
+      ) : null}
+    </div>
+  );
+}