@cozeloop/components 0.0.3 → 0.0.4-beta-1770694681364

package/src/columns-select/index.tsx

@@ -1,244 +0,0 @@
-/* eslint-disable @coze-arch/max-line-per-function */
-/* eslint-disable @coze-arch/no-batch-import-or-export */
-import * as sort from 'react-sortable-hoc';
-import { Fragment, useEffect, useMemo, useState } from 'react';
-
-import {
-  IconCozHandle,
-  IconCozTableSetting,
-} from '@coze-arch/coze-design/icons';
-import {
-  Button,
-  Checkbox,
-  Dropdown,
-  Typography,
-  Divider,
-  Tooltip,
-  type ColumnProps,
-} from '@coze-arch/coze-design';
-// @ts-expect-error react-sortable-hoc ts type issue
-const { sortableContainer, sortableElement, sortableHandle } = sort;
-const { arrayMove } = sort;
-
-const SortableContainer = sortableContainer(
-  ({ children }: { children: React.ReactNode }) => (
-    <div className="max-w-[200px] w-fit rounded-[6px] py-2 px-1 max-h-[372px] overflow-y-auto flex gap-y-1 flex-col">
-      {children}
-    </div>
-  ),
-);
-
-const DragHandle = sortableHandle(() => (
-  <IconCozHandle className="cursor-grab" aria-label="拖动排序" role="button" />
-));
-export interface ColumnItem extends ColumnProps {
-  key: string;
-  value: string;
-  disabled?: boolean;
-  checked?: boolean;
-}
-
-export interface ColumnSelectorProps {
-  columns: ColumnItem[];
-  onChange?: (items: ColumnItem[]) => void;
-  buttonText?: string;
-  resetButtonText?: string;
-  className?: string;
-  sortable?: boolean;
-  defaultColumns?: ColumnItem[];
-  itemRender?: (item: ColumnItem) => React.ReactNode;
-  footerRender?: (item: ColumnItem[]) => React.ReactNode;
-}
-
-export const ColumnSelector = ({
-  columns,
-  defaultColumns = columns,
-  onChange,
-  buttonText,
-  resetButtonText = '重置为默认',
-  className,
-  sortable = true,
-  itemRender,
-  footerRender,
-}: ColumnSelectorProps) => {
-  const [list, setList] = useState<ColumnItem[]>(() => [...columns]);
-  const selectedKeys = useMemo(
-    () => list.filter(item => item.checked).map(item => item.key),
-    [list],
-  );
-  const disabledKeys = useMemo(
-    () => list.filter(item => item.disabled).map(item => item.key),
-    [list],
-  );
-
-  const RenderItem = (value: ColumnItem, slot?: React.ReactNode) => {
-    const render = itemRender ? itemRender(value) : null;
-    if (render) {
-      return render;
-    }
-    return (
-      <span
-        // ref={spanRef}
-        className="group flex items-center justify-between py-1 px-2 text-[var(--coz-fg-primary)] z-[99999] select-none hover:bg-[var(--coz-mg-secondary)] rounded-[6px] cursor-pointer bg-white"
-        style={{
-          zIndex: 99999,
-        }}
-      >
-        <div
-          className="flex items-center gap-x-2 max-w-full w-full"
-          onClick={() => {
-            if (disabledKeys.includes(value.key ?? '') || value.disabled) {
-              return;
-            }
-            const newKeys = selectedKeys.includes(value.key ?? '')
-              ? selectedKeys.filter(key => key !== value.key)
-              : [...selectedKeys, value.key];
-
-            const newColumns = list.map(item => {
-              if (newKeys.includes(item.key)) {
-                return {
-                  ...item,
-                  checked: true,
-                };
-              }
-
-              return {
-                ...item,
-                checked: false,
-              };
-            });
-
-            setList(newColumns);
-            onChange?.(newColumns);
-          }}
-        >
-          <Checkbox
-            disabled={disabledKeys.includes(value.key ?? '') || value.disabled}
-            checked={selectedKeys.includes(value.key ?? '')}
-            aria-label={`选择${value.value}`}
-          />
-          <Typography.Text
-            ellipsis={{
-              showTooltip: {
-                opts: {
-                  content: value.value,
-                  theme: 'dark',
-                },
-              },
-            }}
-            className="text-[13px] text-[var(--coz-fg-primary)] flex-1 overflow-hidden w-full"
-            style={{
-              color:
-                disabledKeys.includes(value.key ?? '') || value.disabled
-                  ? 'var(--coz-fg-dim)'
-                  : '',
-            }}
-          >
-            {value.value}
-          </Typography.Text>
-          <div className="opacity-0 group-hover:opacity-100 transition-opacity flex items-center coz-fg-secondary">
-            {slot}
-          </div>
-        </div>
-      </span>
-    );
-  };
-
-  const SortableItem = sortableElement(({ value }: { value: ColumnItem }) =>
-    RenderItem(value, <DragHandle />),
-  );
-
-  const handleSortEnd = ({
-    oldIndex,
-    newIndex,
-  }: {
-    oldIndex: number;
-    newIndex: number;
-  }) => {
-    const newList = arrayMove(list, oldIndex, newIndex);
-    setList(newList);
-    onChange?.(newList);
-  };
-
-  const handleReset = () => {
-    setList(defaultColumns);
-    onChange?.(defaultColumns);
-  };
-
-  useEffect(() => {
-    setList(columns);
-  }, [columns]);
-
-  return (
-    <div className={className}>
-      <Dropdown
-        position="bottomRight"
-        render={
-          <div
-            onClick={event => {
-              event.stopPropagation();
-            }}
-          >
-            <SortableContainer onSortEnd={handleSortEnd} useDragHandle>
-              <>
-                {list.map((value, index) =>
-                  value?.disabled || !sortable ? (
-                    <Fragment key={`item-${value.key}`}>
-                      {RenderItem(value)}
-                    </Fragment>
-                  ) : (
-                    <SortableItem
-                      key={`item-${value.key}`}
-                      index={index}
-                      value={value}
-                    />
-                  ),
-                )}
-              </>
-            </SortableContainer>
-            <Divider />
-            {footerRender ? (
-              <div className="flex items-center">
-                {footerRender(list)}
-                <Button
-                  color="secondary"
-                  type="secondary"
-                  className="text-center flex-1"
-                  onClick={handleReset}
-                >
-                  <span className="text-brand font-medium text-[13px]">
-                    {resetButtonText}
-                  </span>
-                </Button>
-              </div>
-            ) : (
-              <Button
-                color="secondary"
-                type="secondary"
-                className="w-full text-center"
-                onClick={handleReset}
-              >
-                <span className="text-brand font-medium text-[13px]">
-                  {resetButtonText}
-                </span>
-              </Button>
-            )}
-          </div>
-        }
-        trigger="click"
-      >
-        <div>
-          <Tooltip content="列管理" theme="dark" position="top">
-            <Button
-              icon={<IconCozTableSetting />}
-              type="primary"
-              color="primary"
-              className="flex items-center justify-center"
-              aria-label={buttonText}
-            />
-          </Tooltip>
-        </div>
-      </Dropdown>
-    </div>
-  );
-};

package/src/edit-icon-button/index.tsx

@@ -1,36 +0,0 @@
-import { type MouseEvent } from 'react';
-
-import classNames from 'classnames';
-import { IconCozPencil } from '@coze-arch/coze-design/icons';
-
-interface Props extends React.HTMLAttributes<SVGElement> {
-  className?: string;
-  disabled?: boolean;
-  onClick?: (e: MouseEvent<SVGElement>) => void;
-}
-
-export function EditIconButton({
-  disabled,
-  className,
-  onClick,
-  ...rest
-}: Props) {
-  return (
-    <IconCozPencil
-      {...rest}
-      fontSize={14}
-      className={classNames(
-        'text-[var(--coz-fg-dim)]',
-        disabled
-          ? 'cursor-not-allowed'
-          : 'cursor-pointer hover:text-[rgba(var(--coze-up-brand-9))]',
-        className,
-      )}
-      onClick={e => {
-        if (!disabled) {
-          onClick?.(e);
-        }
-      }}
-    />
-  );
-}

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