@cozeloop/components 0.0.2 → 0.0.3

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>
+  );
+}

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

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

@@ -0,0 +1,197 @@
+/* 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,
+  };
+}

package/src/index.ts

@@ -0,0 +1,208 @@
+export { ColumnSelector, type ColumnItem } from './columns-select';
+export {
+  TooltipWhenDisabled,
+  type TooltipWhenDisabledProps,
+} from './tooltip-when-disabled';
+export { TooltipWithDisabled } from './tooltip-with-disabled';
+
+export { LoopTable } from './table';
+export {
+  TableWithPagination,
+  DEFAULT_PAGE_SIZE,
+  PAGE_SIZE_OPTIONS,
+  getStoragePageSize,
+  type TableWithPaginationProps,
+} from './table/table-with-pagination';
+export {
+  PageError,
+  PageLoading,
+  PageNoAuth,
+  PageNoContent,
+  PageNotFound,
+  FullPage,
+} from './page-content';
+
+export { TableColActions, type TableColAction } from './table-col-actions';
+export { LoopTabs } from './tabs';
+
+export { LargeTxtRender } from './large-txt-render';
+
+export { InputSlider, formateDecimalPlacesString } from './input-slider';
+
+export { handleCopy, sleep } from './utils/basic';
+export { uploadFile } from './upload';
+export { default as VersionList } from './version-list/version-list';
+export { default as VersionItem } from './version-list/version-item';
+export { type Version } from './version-list/version-descriptions';
+export { default as VersionSwitchPanel } from './version-list/version-switch-panel';
+export { TextWithCopy } from './text-with-copy';
+export { InfoTooltip } from './info-tooltip';
+export { IDRender } from './id-render';
+export { IconButtonContainer } from './id-render/icon-button-container';
+export { JumpIconButton } from './jump-button/jump-icon-button';
+export { UserProfile } from './user-profile';
+export {
+  getColumnManageStorage,
+  setColumnsManageStorage,
+  dealColumnsWithStorage,
+} from './column-manage-storage';
+
+export { PrimaryPage } from './primary-page';
+export { PrimaryTitle } from './primary-title';
+
+export { ResizeSidesheet } from './resize-sidesheet';
+
+export { useUnsaveLeaveWarning } from './hooks/use-unsave-leave-warning';
+
+export {
+  InfiniteScrollTable,
+  type InfiniteScrollTableRef,
+} from './infinite-scroll-table';
+
+export { TableHeader, type TableHeaderProps } from './table-header';
+export {
+  TableColsConfig,
+  type TableColsConfigProps,
+  type ColumnPropsPro,
+  type ColKey,
+} from './table-cols-config';
+// import  { TableHeaderProps } from './table-header';
+// export const a = {} as unknown as TableHeaderProps;
+
+export { TableWithoutPagination } from './table/table-without-pagniation';
+
+export { TableBatchOperate } from './table-batch-operate/table-batch-operation';
+export {
+  useBatchOperate,
+  type BatchOperateStore,
+} from './table-batch-operate/use-batch-operate';
+
+export { useItemIndexController } from './index-controller/use-item-index-controller';
+export { IndexControllerView } from './index-controller/record-navigation';
+
+export {
+  BaseSearchSelect,
+  BaseSearchFormSelect,
+  type BaseSelectProps,
+  type LoadOptionByIds,
+} from './base-search-select';
+
+export { OpenDetailButton } from './open-detail-button';
+
+export { EditIconButton } from './edit-icon-button';
+
+export { CollapseCard } from './collapse-card';
+
+export {
+  type Expr,
+  type ExprGroup,
+  type LogicOperator,
+  type LogicExprProps,
+  type ExprRenderProps,
+  type ExprGroupRenderProps,
+  type LeftRenderProps,
+  type OperatorRenderProps,
+  type RightRenderProps,
+  type OperatorOption,
+  LogicExpr,
+} from './logic-expr';
+
+// #region 输入控件
+export {
+  RadioButton,
+  type RadioButtonProps,
+} from './input-components/radio-button';
+
+export {
+  LogicEditor,
+  type LogicDataType,
+  type LogicField,
+  type LogicFilter,
+  type LogicSetter,
+} from './logic-editor';
+
+export {
+  CodeEditor,
+  DiffEditor,
+  type Monaco,
+  type MonacoDiffEditor,
+  type editor,
+} from './code-editor';
+// #endregion 输入控件
+
+export { BasicCard } from './basic-card';
+export { MultipartEditor } from './multi-part-editor';
+
+export { ChipSelect } from './chip-select';
+export { ImageItemRenderer } from './multi-part-editor/components/image-item-renderer';
+export { VideoItemRenderer } from './multi-part-editor/components/video-item-renderer';
+export {
+  ImageStatus as MultipartRenderStatus,
+  type FileItemStatus,
+  type ContentPartLoop,
+} from './multi-part-editor/type';
+export {
+  DEFAULT_FILE_SIZE,
+  DEFAULT_FILE_COUNT,
+  DEFAULT_PART_COUNT,
+  DEFAULT_SUPPORTED_FORMATS,
+  DEFAULT_VIDEO_SUPPORTED_FORMATS,
+} from './multi-part-editor/utils';
+
+export {
+  UploadButton,
+  type UploadButtonRef,
+} from './multi-part-editor/upload-button';
+export { MultiPartRender } from './multi-part-editor/multi-part-render';
+export { StepNav } from './step-nav';
+
+export { LazyLoadComponent } from './lazy-load-component';
+export { TextAreaPro, type Props as TextAreaProProps } from './text-area-pro';
+export { InputWithCount } from './input-with-count';
+export { LoopRadioGroup } from './loop-radio-group';
+
+// Migrated components from fornax
+export { UsageItem, SupportedLang } from './code-usage';
+export { Layout } from './layout';
+export {
+  SearchForm,
+  type SearchFormRef,
+  type SearchFormFilterRecord,
+} from './search-form';
+export { TitleWithSub } from './title-with-sub';
+
+// Provider
+export {
+  CozeLoopProvider,
+  useI18n,
+  useCozeLoopContext,
+  useReportEvent,
+  type I18nFunction,
+} from './provider';
+
+export { FooterActions } from './footer-actions';
+export { TableEmpty } from './table-empty';
+export { CardPane } from './card-pane';
+
+export {
+  SemiSchemaForm,
+  type SemiSchemaFormInstance,
+  schemaValidators,
+} from './semi-schema-form';
+
+export { ResizableSideSheet } from './resizable-side-sheet';
+
+export {
+  SentinelForm,
+  type SentinelFormRef,
+  type SentinelFormApi,
+} from './sentinel-form';
+
+export {
+  CodeMirrorCodeEditor,
+  CodeMirrorTextEditor,
+  CodeMirrorJsonEditor,
+  CodeMirrorRawTextEditor,
+} from './codemirror-editor';
+
+export { SchemaEditor } from './schema-editor';