@cozeloop/components 0.0.1 → 0.0.3

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';

package/src/infinite-scroll-table/index.tsx

@@ -0,0 +1,99 @@
+import {
+  type ForwardedRef,
+  forwardRef,
+  useRef,
+  useImperativeHandle,
+} from 'react';
+
+import classNames from 'classnames';
+import {
+  type Data,
+  type InfiniteScrollOptions,
+  type Service,
+} from 'ahooks/lib/useInfiniteScroll/types';
+import { useSize, useInfiniteScroll } from 'ahooks';
+import { IconCozIllusEmpty } from '@coze-arch/coze-design/illustrations';
+import { EmptyState, type TableProps } from '@coze-arch/coze-design';
+
+import { LoopTable } from '../table';
+
+interface ExpandData extends Data {
+  hasMore?: boolean;
+}
+interface InfiniteScrollTableProps<TData extends ExpandData> {
+  service: Service<TData>;
+  options?: InfiniteScrollOptions<TData>;
+}
+
+export interface InfiniteScrollTableRef {
+  hookRes: ReturnType<typeof useInfiniteScroll>;
+}
+
+// 定义组件的 Props 类型
+type Props<TData extends ExpandData> = TableProps &
+  InfiniteScrollTableProps<TData>;
+
+// 显式指定 forwardRef 的类型
+export const InfiniteScrollTable: <TData extends ExpandData>(
+  props: Props<TData> & { ref?: ForwardedRef<InfiniteScrollTableRef> },
+) => React.ReactElement | null = forwardRef(
+  <TData extends ExpandData>(
+    { service, options, className, ...restTableProps }: Props<TData>,
+    ref: ForwardedRef<InfiniteScrollTableRef>,
+  ): JSX.Element => {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const hookRes = useInfiniteScroll(d => service?.(d), {
+      isNoMore: d => !d?.hasMore,
+      ...options,
+      reloadDeps: [...(options?.reloadDeps || [])],
+    });
+
+    const { data, loading, loadingMore, noMore, loadMore } = hookRes;
+
+    const scrollSize = useSize(containerRef);
+    const height = scrollSize?.height || 0;
+
+    useImperativeHandle(ref, () => ({
+      // @ts-expect-error type
+      hookRes,
+    }));
+
+    return (
+      <div
+        className={classNames('w-full h-full overflow-hidden', className)}
+        ref={containerRef}
+      >
+        <LoopTable
+          tableProps={{
+            ...restTableProps.tableProps,
+            loading: loading || loadingMore,
+            pagination: false,
+            dataSource: data?.list || [],
+            scroll: {
+              y: height - 48,
+              ...restTableProps.tableProps?.scroll,
+            },
+          }}
+          empty={
+            restTableProps.empty ?? (
+              <EmptyState
+                size="full_screen"
+                icon={<IconCozIllusEmpty />}
+                title="暂无数据"
+              />
+            )
+          }
+          enableLoad={true}
+          loadMode="cursor"
+          hasMore={!noMore}
+          onLoad={loadMore}
+          offsetY={0}
+          strictDataSourceProp
+        />
+      </div>
+    );
+  },
+) as <TData extends ExpandData>(
+  props: Props<TData> & { ref?: ForwardedRef<InfiniteScrollTableRef> },
+) => React.ReactElement | null;

package/src/info-tooltip/index.tsx

@@ -0,0 +1,41 @@
+import classNames from 'classnames';
+import {
+  IconCozInfoCircle,
+  IconCozQuestionMarkCircle,
+} from '@coze-arch/coze-design/icons';
+import { Tooltip } from '@coze-arch/coze-design';
+
+interface Props {
+  content: string | React.ReactNode;
+  className?: string;
+  tooltipClassName?: string;
+  icon?: React.ReactNode;
+  useQuestion?: boolean;
+}
+
+export const InfoTooltip = ({
+  content,
+  className,
+  tooltipClassName,
+  icon,
+  useQuestion = false,
+}: Props) => {
+  const defaultIcon = useQuestion ? (
+    <IconCozQuestionMarkCircle className="coz-fg-secondary cursor-pointer hover:coz-fg-primary" />
+  ) : (
+    <IconCozInfoCircle className="coz-fg-secondary cursor-pointer hover:coz-fg-primary" />
+  );
+  return (
+    <Tooltip
+      content={
+        <div style={{ maxHeight: 300, overflowY: 'auto' }}>{content}</div>
+      }
+      theme="dark"
+      className={tooltipClassName}
+    >
+      <div className={classNames('h-[17px]', className)}>
+        {icon ?? defaultIcon}
+      </div>
+    </Tooltip>
+  );
+};

package/src/input-components/radio-button.tsx

@@ -0,0 +1,63 @@
+import cls from 'classnames';
+import { Tooltip } from '@coze-arch/coze-design';
+
+export interface RadioButtonProps<T extends string | number> {
+  value?: T;
+  onChange?: (value: T) => void;
+  disabled?: boolean;
+  options: Array<{
+    value: T;
+    label: React.ReactNode;
+    disabled?: boolean;
+    tooltip?: string;
+  }>;
+  className?: string;
+}
+
+/** coze design 的 SegmentTab 和 Radio 的 advanced + pureCard 模式均有样式问题，不得不自行造轮子 */
+export function RadioButton<T extends string | number>({
+  value,
+  onChange,
+  options,
+  disabled,
+  className,
+}: RadioButtonProps<T>) {
+  return (
+    <div className={cls('w-full flex items-center gap-[8px]', className)}>
+      {options.map(option => {
+        const selected = value === option.value;
+        const optionDisabled = option.disabled || disabled;
+        return (
+          <Tooltip
+            key={option.value}
+            trigger={option.tooltip ? 'hover' : 'custom'}
+            content={option.tooltip}
+          >
+            <div
+              className={cls(
+                'flex-1 px-[20px] py-[4px] rounded-[6px]',
+                'flex items-center justify-center',
+                'border border-solid',
+                'text-[14px] leading-[20px]',
+                selected
+                  ? 'coz-fg-hglt coz-stroke-hglt coz-mg-hglt hover:coz-mg-hglt-hovered active:coz-mg-hglt-pressed'
+                  : 'coz-stroke-primary coz-bg-max hover:coz-mg-primary-hovered active:coz-mg-primary-pressed',
+                optionDisabled
+                  ? 'cursor-not-allowed opacity-60'
+                  : 'cursor-pointer',
+              )}
+              onClick={() => {
+                if (optionDisabled) {
+                  return;
+                }
+                onChange?.(option.value);
+              }}
+            >
+              {option.label}
+            </div>
+          </Tooltip>
+        );
+      })}
+    </div>
+  );
+}

package/src/input-slider/index.module.less

@@ -0,0 +1,30 @@
+/* stylelint-disable declaration-no-important */
+.input-slider {
+  display: flex;
+  column-gap: 8px;
+  align-items: center;
+
+  :global {
+    .semi-slider {
+      flex: 1;
+      padding-left: 14px;
+    }
+
+    .semi-slider-handle{
+      width: 12px !important;
+      height: 12px !important;
+      margin-top: 10px !important;
+    }
+  }
+
+  .input-number {
+    width: 90px;
+
+    :global{
+      .semi-input-number-suffix-btns{
+        height: auto !important;
+      }
+    }
+  }
+
+}