@cozeloop/components 0.0.3 → 0.0.4

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

package/src/input-slider/index.tsx

@@ -1,161 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-/* eslint-disable @typescript-eslint/no-magic-numbers */
-/* eslint-disable max-params */
-import { useRef } from 'react';
-
-import { isInteger, isUndefined } from 'lodash-es';
-import classNames from 'classnames';
-import {
-  CozInputNumber,
-  Slider,
-  type SliderProps,
-} from '@coze-arch/coze-design';
-
-import styles from './index.module.less';
-
-interface InputSliderProps {
-  value?: number;
-  onChange?: (v: number) => void;
-  max?: number;
-  min?: number;
-  step?: number;
-  disabled?: boolean;
-  decimalPlaces?: number;
-  marks?: SliderProps['marks'];
-  className?: string;
-}
-
-export const formateDecimalPlacesString = (
-  value: string | number,
-  prevValue?: number,
-  decimalPlaces?: number,
-) => {
-  if (isUndefined(decimalPlaces)) {
-    return value.toString();
-  }
-  const numberValue = Number(value);
-  const stringValue = value.toString();
-  if (Number.isNaN(numberValue)) {
-    return `${value}`;
-  }
-  if (decimalPlaces === 0 && !isInteger(Number(value)) && prevValue) {
-    return `${prevValue}`;
-  }
-  const decimalPointIndex = stringValue.indexOf('.');
-
-  if (decimalPointIndex < 0) {
-    return stringValue;
-  }
-  const formattedValue = stringValue.substring(
-    0,
-    decimalPointIndex + 1 + decimalPlaces!,
-  );
-
-  if (formattedValue.endsWith('.') && decimalPlaces === 0) {
-    return formattedValue.substring(0, formattedValue.length - 1);
-  }
-  return formattedValue;
-};
-
-function getDecimalPlaces(num) {
-  if (!num) {
-    return 0;
-  }
-  // 将数字转换为字符串
-  const numStr = num.toString();
-  // 检查是否包含小数点
-  if (numStr.includes('.')) {
-    // 使用正则表达式匹配小数点后面的数字
-    const decimalPart = numStr.split('.')[1];
-    return decimalPart.length; // 返回小数位数
-  }
-  return 0; // 如果没有小数点，返回0
-}
-
-const formateDecimalPlacesNumber = (
-  value: number,
-  prevValue?: number,
-  decimalPlaces?: number,
-  isPasted?: boolean,
-) => {
-  if (isUndefined(decimalPlaces)) {
-    if (isPasted) {
-      return value;
-    }
-    const currentDecimalPlaces = getDecimalPlaces(value);
-    const prevDecimalPlaces = getDecimalPlaces(prevValue);
-    if (
-      prevDecimalPlaces === 2 &&
-      currentDecimalPlaces > 2 &&
-      !isUndefined(prevValue) &&
-      Math.abs(prevValue! - value).toFixed(2) === '0.01'
-    ) {
-      const pow2 = Math.pow(10, 2);
-      return Math.round(value * pow2) / pow2;
-    }
-
-    return value;
-  }
-  if (decimalPlaces === 0 && !isInteger(value) && prevValue) {
-    return prevValue;
-  }
-
-  const pow = Math.pow(10, decimalPlaces!);
-  return Math.round(value * pow) / pow;
-};
-
-export const InputSlider: React.FC<InputSliderProps> = ({
-  value,
-  onChange,
-  max = 1,
-  min = 0,
-  step = 1,
-  disabled,
-  decimalPlaces,
-  marks,
-  className,
-}) => {
-  const isPasted = useRef(false);
-  const onNumberChange = (numberValue: number) => {
-    const formattedValue = formateDecimalPlacesNumber(
-      numberValue,
-      value,
-      decimalPlaces,
-      isPasted.current,
-    );
-    isPasted.current = false;
-    onChange?.(formattedValue);
-  };
-
-  return (
-    <div className={classNames(styles['input-slider'], className)}>
-      <Slider
-        key={`${min}-${max}`}
-        disabled={disabled}
-        value={value}
-        max={max}
-        min={min}
-        step={step}
-        marks={marks}
-        onChange={v => {
-          if (typeof v === 'number') {
-            onChange?.(v);
-          }
-        }}
-      />
-      <CozInputNumber
-        className={styles['input-number']}
-        value={value}
-        disabled={disabled}
-        formatter={inputValue =>
-          formateDecimalPlacesString(inputValue, value, decimalPlaces)
-        }
-        onNumberChange={onNumberChange}
-        max={max}
-        min={min}
-        step={step}
-        onPaste={() => (isPasted.current = true)}
-      />
-    </div>
-  );
-};

package/src/input-with-count/index.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-import { Input, type InputProps } from '@coze-arch/coze-design';
-
-interface LimitCountProps {
-  maxLen: number;
-  len: number;
-}
-const LimitCount = ({ maxLen, len }: LimitCountProps) => (
-  <span className="pl-2 pr-3 overflow-hidden text-xs coz-fg-secondary">
-    <span>{len}</span>
-    <span>/</span>
-    <span>{maxLen}</span>
-  </span>
-);
-
-export function InputWithCount(props: InputProps) {
-  return (
-    <Input
-      {...props}
-      suffix={
-        Boolean(props.maxLength) && (
-          <LimitCount
-            maxLen={props.maxLength ?? 0}
-            len={props.value?.toString().length ?? 0}
-          />
-        )
-      }
-    />
-  );
-}

package/src/jump-button/jump-icon-button.tsx

@@ -1,12 +0,0 @@
-import { IconCozLongArrowTopRight } from '@coze-arch/coze-design/icons';
-
-import { IconButtonContainer } from '../id-render/icon-button-container';
-
-export function JumpIconButton(
-  props: {
-    className?: string;
-    style?: React.CSSProperties;
-  } & React.DOMAttributes<HTMLDivElement>,
-) {
-  return <IconButtonContainer {...props} icon={<IconCozLongArrowTopRight />} />;
-}

package/src/large-txt-render/index.tsx

@@ -1,46 +0,0 @@
-import { useRef } from 'react';
-
-import { useInfiniteScroll } from 'ahooks';
-
-const PER_PRE_MAX_LENGTH = 25000;
-
-export interface LargeTxtRenderProps {
-  text: string;
-}
-
-export const LargeTxtRender = (props: LargeTxtRenderProps) => {
-  const { text } = props;
-
-  const ref = useRef<HTMLPreElement>(null);
-
-  const getMoreTextChunk = (startIndex: number) => {
-    const endIndex = startIndex + PER_PRE_MAX_LENGTH;
-    const chunk = text.slice(startIndex, endIndex);
-    const hasMore = endIndex < text.length;
-
-    return {
-      list: [chunk],
-      nextId: hasMore ? endIndex.toString() : undefined,
-    };
-  };
-
-  const { data } = useInfiniteScroll(
-    d => {
-      const startIndex = d ? parseInt(d.nextId) : 0;
-      return Promise.resolve(getMoreTextChunk(startIndex));
-    },
-    {
-      target: ref,
-      isNoMore: d => d?.nextId === undefined,
-    },
-  );
-
-  return (
-    <pre
-      ref={ref}
-      className="m-0 break-words whitespace-pre-wrap max-h-full overflow-y-auto text-[13px] leading-4 text-[var(--coz-fg-primary)] font-normal"
-    >
-      {data?.list.join('') || ''}
-    </pre>
-  );
-};