@cozeloop/components 0.0.3 → 0.0.4-beta-1770694681364

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,
-  };
-}

package/src/index.ts

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

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

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

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

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