@cozeloop/components 0.0.2 → 0.0.3

package/src/collapsible-card/index.module.less

@@ -0,0 +1,63 @@
+/* stylelint-disable declaration-no-important */
+.card {
+  background: transparent !important;
+  border-radius: 0 !important;
+
+  // flex flex-col px-4 pt-2 pb-4 bg-semi-bg-0 gap-3 rounded-md
+  :global {
+    .semi-card-body {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+
+      box-sizing: border-box;
+      height: 100%;
+      padding: 0;
+    }
+  }
+
+  .card-header{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    height: 24px;
+    min-height: 24px;
+    padding: 10px 20px 0;
+  }
+
+  .card-title {
+    position: relative;
+
+    display: flex;
+    gap: 4px;
+    align-items: center;
+
+    font-weight: 600;
+
+    .chevron-icon {
+      cursor: pointer;
+      transition: transform 0.3s;
+
+      &.chevron-icon-close {
+        transform: rotate(180deg);
+      }
+
+      &:hover {
+        color: var(--semi-color-primary);
+      }
+    }
+  }
+
+  .card-content {
+    height: 0;
+    opacity: 0;
+    transition: height 0.2s, opacity 0.2s;
+
+    &.active {
+      overflow: hidden;
+      height: 100%;
+      opacity: 1;
+    }
+  }
+}

package/src/collapsible-card/index.tsx

@@ -0,0 +1,57 @@
+import { type CSSProperties, type ReactNode } from 'react';
+
+import cn from 'classnames';
+import { IconCozArrowUpFill } from '@coze-arch/coze-design/icons';
+import { Card, Typography } from '@coze-arch/coze-design';
+
+import styles from './index.module.less';
+
+interface Props {
+  title?: ReactNode;
+  children?: ReactNode;
+  actionBtns?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  hideExpand?: boolean;
+  isExpand?: boolean;
+  setIsExpand?: (isExpand: boolean) => void;
+}
+
+export function CollapsibleCard({
+  title,
+  children,
+  actionBtns,
+  className,
+  style,
+  isExpand,
+  setIsExpand,
+  hideExpand,
+}: Props) {
+  return (
+    <Card className={cn(styles.card, className)} style={style} bordered={false}>
+      {title || actionBtns ? (
+        <div className={styles['card-header']}>
+          <Typography.Text className={styles['card-title']}>
+            {title}
+            {children && !hideExpand ? (
+              <IconCozArrowUpFill
+                className={cn(styles['chevron-icon'], {
+                  [styles['chevron-icon-close']]: !isExpand,
+                })}
+                onClick={() => setIsExpand?.(!isExpand)}
+              />
+            ) : null}
+          </Typography.Text>
+          <div>{actionBtns}</div>
+        </div>
+      ) : null}
+      <div
+        className={cn(styles['card-content'], {
+          [styles.active]: isExpand,
+        })}
+      >
+        {children}
+      </div>
+    </Card>
+  );
+}

package/src/column-manage-storage/index.tsx

@@ -0,0 +1,64 @@
+import { isEmpty } from 'lodash-es';
+import { safeJsonParse } from '@cozeloop/toolkit';
+
+import { type ColumnItem } from '../columns-select';
+
+export const DATASET_COLUMN_STORAGE_KEY = 'dataset-column';
+
+export const getColumnManageStorage = (storageKey: string) => {
+  const storage = localStorage.getItem(storageKey);
+  return safeJsonParse(storage || '{}') || {};
+};
+export interface ColumnSort {
+  [key: string]: {
+    index: number;
+    checked: boolean;
+  };
+}
+export const setColumnsManageStorage = (
+  storageKey: string,
+  columns: ColumnItem[],
+) => {
+  if (!storageKey) {
+    return;
+  }
+  const data: ColumnSort = {};
+  columns.forEach((column, index) => {
+    data[column.key] = {
+      index,
+      checked: column.checked ?? true,
+    };
+  });
+  localStorage.setItem(storageKey, JSON.stringify(data));
+};
+
+export const dealColumnsWithStorage = (
+  storageKey: string,
+  columns: ColumnItem[],
+): ColumnItem[] => {
+  const sort = getColumnManageStorage(storageKey);
+  if (!sort || isEmpty(sort)) {
+    return columns;
+  }
+  const newColumns = [...(columns || [])].sort((a, b) => {
+    const indexA = sort[a.key]?.index ?? Infinity;
+    const indexB = sort[b.key]?.index ?? Infinity;
+    // 如果两个元素都在 arrayB 中，按照 arrayB 的顺序排序
+    if (indexA !== Infinity && indexB !== Infinity) {
+      return indexA - indexB;
+    }
+    // 如果只有一个元素在 arrayB 中，将其排在前面
+    if (indexA !== Infinity) {
+      return -1;
+    }
+    if (indexB !== Infinity) {
+      return 1;
+    }
+    // 如果两个元素都不在 arrayB 中，保持原有顺序
+    return 0;
+  });
+  return newColumns.map(column => ({
+    ...column,
+    checked: sort[column.key]?.checked ?? true,
+  }));
+};

package/src/columns-select/index.tsx

@@ -0,0 +1,244 @@
+/* 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

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

@@ -0,0 +1,33 @@
+/* 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

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