@cozeloop/components 0.0.3 → 0.0.4

package/src/footer-actions/index.tsx

@@ -1,33 +0,0 @@
-/* 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

@@ -1,183 +0,0 @@
-/* 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

@@ -1,50 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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>
-  );
-}

package/src/index-controller/record-navigation.tsx

@@ -1,57 +0,0 @@
-import {
-  IconCozArrowLeft,
-  IconCozArrowRight,
-} from '@coze-arch/coze-design/icons';
-import { Space, Button, Tooltip } from '@coze-arch/coze-design';
-
-import { type IndexControllerStore } from './use-item-index-controller';
-
-/** 控制上一个下一个记录的控制器组件 */
-export function IndexControllerView({
-  indexControllerStore,
-  className,
-}: {
-  indexControllerStore: IndexControllerStore;
-  className?: string;
-}) {
-  const {
-    hasPrevious,
-    hasNext,
-    currentIndex,
-    total,
-    loading,
-    goToPrevious,
-    goToNext,
-  } = indexControllerStore ?? {};
-  return (
-    <Space className={className} spacing={4}>
-      <Tooltip content="上一条" theme="dark">
-        <div className="flex items-center">
-          <Button
-            icon={<IconCozArrowLeft />}
-            size="mini"
-            color="primary"
-            style={{ height: 20 }}
-            disabled={!hasPrevious || loading}
-            onClick={goToPrevious}
-          />
-        </div>
-      </Tooltip>
-      <span className="text-sm text-gray-500 min-w-[64px] text-center">
-        {currentIndex + 1} / {total}
-      </span>
-      <Tooltip content="下一条" theme="dark">
-        <div className="flex items-center">
-          <Button
-            icon={<IconCozArrowRight />}
-            size="mini"
-            color="primary"
-            style={{ height: 20 }}
-            disabled={!hasNext || loading}
-            onClick={goToNext}
-          />
-        </div>
-      </Tooltip>
-    </Space>
-  );
-}

package/src/index-controller/use-item-index-controller.ts

@@ -1,197 +0,0 @@
-/* eslint-disable @coze-arch/no-destructuring-use-request */
-import { useState, useCallback, useEffect, useRef } from 'react';
-
-import { useLatest, useRequest } from 'ahooks';
-
-type FetchRecordItemsFn<RecordItem> = (params: {
-  pageSize: number;
-  pageIndex: number;
-}) => Promise<{ list: RecordItem[]; total: number }>;
-
-/**
- * 索引控制器参数
- */
-export interface IndexControllerOptions<RecordItem = Record<string, unknown>> {
-  /** 默认选中的记录索引 */
-  defaultIndex: number;
-  /** 刷新记录列表 */
-  fetchRecordItems: FetchRecordItemsFn<RecordItem>;
-  /** 批量获取记录数据的个数 */
-  batchSize?: number;
-  /** 获取记录详情 */
-  fetchRecordItem: (record: RecordItem) => Promise<RecordItem | undefined>;
-  /** 切换记录的回调 */
-  onRecordChange?: (record: RecordItem) => void;
-}
-
-/**
- * 索引控制器状态&API
- */
-export interface IndexControllerStore {
-  /** 是否有上一条 */
-  hasPrevious: boolean;
-  /** 是否有下一条 */
-  hasNext: boolean;
-  /** 当前记录在列表中的位置信息 */
-  currentIndex: number;
-  /** 总记录数 */
-  total: number;
-  /** 切换到上一条 */
-  goToPrevious: () => void;
-  /** 切换到下一条 */
-  goToNext: () => void;
-  /** 加载状态 */
-  loading: boolean;
-}
-
-async function batchFetchRecordItems<RecordItem>({
-  currentIndex = 0,
-  batchSize,
-  total,
-  fetchRecordItems,
-}: {
-  currentIndex: number;
-  total?: number;
-  batchSize: number;
-  fetchRecordItems: FetchRecordItemsFn<RecordItem>;
-}) {
-  const pageIndex = Math.floor(currentIndex / batchSize) + 1;
-  // index所在区间的前一个区间
-  const prevPromise =
-    pageIndex > 1
-      ? fetchRecordItems({
-          pageSize: batchSize,
-          pageIndex: pageIndex - 1,
-        })
-      : Promise.resolve({ list: [], total: 0 });
-
-  const nextPromise =
-    typeof total !== 'number' || currentIndex + batchSize < total
-      ? fetchRecordItems({
-          pageSize: batchSize,
-          pageIndex: pageIndex + 1,
-        })
-      : Promise.resolve({ list: [], total: 0 });
-  const res = await Promise.all([
-    // index所在区间的前一个区间
-    prevPromise,
-    // index所在区间
-    fetchRecordItems({
-      pageSize: batchSize,
-      pageIndex,
-    }),
-    // index所在区间的后一个区间
-    nextPromise,
-  ]);
-  const allList = res.flatMap(item => item.list || []);
-  // 计算当前index所在区间的前一个区间的起始index
-  const prevStartIndex = Math.max(
-    0,
-    currentIndex - (currentIndex % batchSize) - batchSize,
-  );
-  const allItems: (RecordItem | undefined)[] = [];
-  const list = allList || [];
-  for (let i = 0; i < list.length; i++) {
-    allItems[prevStartIndex + i] = list[i];
-  }
-  return { list: allItems, total: res?.[1]?.total || 0 };
-}
-
-/**
- * 索引控制器
- * 用于在详情抽屉中实现上一条、下一条功能
- */
-export function useItemIndexController<RecordItem = Record<string, unknown>>({
-  defaultIndex,
-  onRecordChange,
-  fetchRecordItem,
-  fetchRecordItems,
-  batchSize = 50,
-}: IndexControllerOptions<RecordItem>): IndexControllerStore {
-  const [allRecords, setAllRecords] = useState<(RecordItem | undefined)[]>([]);
-  const [currentIndex, setCurrentIndex] = useState(defaultIndex);
-  const [total, setTotalCount] = useState(0);
-  const totalRef = useLatest(total);
-  // 上一次触发请求的index
-  const lastCurrentIndexRef = useRef<number>(-1);
-
-  // 列表请求，根据 currentIndex 所在位置的前后各自获取batchSize个数量
-  const { loading: listLoading, run: updateList } = useRequest(async () => {
-    const res = await batchFetchRecordItems({
-      currentIndex,
-      total: total || undefined,
-      batchSize,
-      fetchRecordItems,
-    });
-    setTotalCount(res.total);
-    setAllRecords(res.list);
-    lastCurrentIndexRef.current = currentIndex;
-  });
-
-  // 详情请求
-  const { runAsync: fetchRecordItemAsync, loading: itemLoading } = useRequest(
-    async (record: RecordItem) => {
-      const res = await fetchRecordItem(record);
-      return res;
-    },
-    { manual: true },
-  );
-
-  // 切换到上一条记录
-  const goToPrevious = useCallback(async () => {
-    try {
-      const record = allRecords[currentIndex - 1];
-      if (currentIndex > 0 && record) {
-        const previousRecord = await fetchRecordItemAsync(record);
-        if (previousRecord) {
-          onRecordChange?.(previousRecord);
-          setCurrentIndex(currentIndex - 1);
-        }
-      }
-    } catch (e) {
-      console.warn(e);
-    }
-  }, [currentIndex, fetchRecordItemAsync, allRecords, onRecordChange]);
-
-  // 切换到下一条记录
-  const goToNext = useCallback(async () => {
-    try {
-      const record = allRecords[currentIndex + 1];
-      if (currentIndex < totalRef.current - 1 && record) {
-        const nextRecord = await fetchRecordItemAsync(record);
-        if (nextRecord) {
-          onRecordChange?.(nextRecord);
-          setCurrentIndex(currentIndex + 1);
-        }
-      }
-    } catch (e) {
-      console.warn(e);
-    }
-  }, [
-    currentIndex,
-    totalRef,
-    fetchRecordItemAsync,
-    allRecords,
-    onRecordChange,
-  ]);
-
-  useEffect(() => {
-    // fetchRecordItems 会根据 currentIndex 是否超过上次触发请求的list范围来判断是否需要触发请求
-    if (
-      lastCurrentIndexRef.current !== -1 &&
-      Math.abs(currentIndex - lastCurrentIndexRef.current) >= batchSize
-    ) {
-      updateList();
-    }
-  }, [currentIndex]);
-
-  return {
-    hasPrevious: currentIndex > 0,
-    hasNext: currentIndex < total - 1,
-    currentIndex,
-    total,
-    goToPrevious,
-    goToNext,
-    loading: listLoading || itemLoading,
-  };
-}