@cozeloop/components 0.0.2 → 0.0.3

package/src/table/sort-icon.tsx

@@ -0,0 +1,73 @@
+import { type SVGAttributes } from 'react';
+
+import { Tooltip } from '@coze-arch/coze-design';
+
+import { IconButtonContainer } from '../id-render/icon-button-container';
+
+const activeColor = 'rgb(var(--coze-up-brand-9))';
+const unActiveColor = 'var(--coz-fg-dim)';
+
+export const IconSortArrow = ({
+  sortOrder,
+  ...rest
+}: {
+  sortOrder?: 'ascend' | 'descend' | boolean;
+} & SVGAttributes<HTMLOrSVGElement>) => {
+  let descendColor = 'currentColor';
+  let ascendColor = 'currentColor';
+  if (sortOrder === 'descend') {
+    descendColor = activeColor;
+    ascendColor = unActiveColor;
+  } else if (sortOrder === 'ascend') {
+    descendColor = unActiveColor;
+    ascendColor = activeColor;
+  }
+
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M7.00012 1.99976C7.55241 1.99976 8.00012 2.44747 8.00012 2.99976V17.2677L9.6341 14.4376C9.91024 13.9593 10.5218 13.7954 11.0001 14.0715C11.4784 14.3477 11.6423 14.9593 11.3661 15.4376L7.8758 21.483C7.85628 21.5183 7.83468 21.5523 7.81118 21.5849C7.72727 21.7015 7.62174 21.7953 7.50337 21.8641C7.38229 21.9347 7.24502 21.9807 7.09848 21.995C7.06439 21.9984 7.03007 22 6.99566 21.9999C6.64882 22.0011 6.31102 21.8217 6.12517 21.4998L2.62517 15.4376C2.34903 14.9593 2.5129 14.3477 2.99119 14.0715C3.46949 13.7954 4.08108 13.9593 4.35722 14.4376L6.00012 17.2832V2.99976C6.00012 2.44747 6.44784 1.99976 7.00012 1.99976Z"
+        fill={descendColor}
+      />
+      <path
+        d="M17.001 21.9999C16.4487 21.9999 16.001 21.5522 16.001 20.9999L16.001 6.73198L14.367 9.5621C14.0909 10.0404 13.4793 10.2043 13.001 9.92813C12.5227 9.65199 12.3589 9.04039 12.635 8.5621L16.1253 2.51665C16.1449 2.48135 16.1665 2.44735 16.19 2.41482C16.2739 2.29823 16.3794 2.20436 16.4978 2.13559C16.6189 2.06494 16.7561 2.019 16.9027 2.0047C16.9368 2.0013 16.9711 1.99964 17.0055 1.99977C17.3523 1.99854 17.6901 2.17802 17.876 2.49993L21.376 8.5621C21.6521 9.0404 21.4882 9.65199 21.0099 9.92813C20.5317 10.2043 19.9201 10.0404 19.6439 9.5621L18.001 6.71652L18.001 20.9999C18.001 21.5522 17.5533 21.9999 17.001 21.9999Z"
+        fill={ascendColor}
+      />
+    </svg>
+  );
+};
+
+/** 表格排序专用图标 */
+export default function LoopTableSortIcon({
+  sortOrder,
+}: {
+  sortOrder?: 'ascend' | 'descend' | boolean;
+}) {
+  let tooltip = '点击升序';
+  if (sortOrder === 'ascend') {
+    tooltip = '点击降序';
+  } else if (sortOrder === 'descend') {
+    tooltip = '点击恢复默认排序';
+  }
+  return (
+    <Tooltip theme="dark" content={tooltip}>
+      <div className="flex items-center">
+        <IconButtonContainer
+          icon={
+            <IconSortArrow
+              sortOrder={sortOrder}
+              className="text-[var(--coz-fg-secondary)]"
+            />
+          }
+        />
+      </div>
+    </Tooltip>
+  );
+}

package/src/table/table-with-pagination.tsx

@@ -0,0 +1,150 @@
+import { useEffect, useMemo, useRef } from 'react';
+
+import cls from 'classnames';
+import {
+  type Params,
+  type PaginationResult,
+} from 'ahooks/lib/usePagination/types';
+import { useSize } from 'ahooks';
+import { CozPagination, type TableProps } from '@coze-arch/coze-design';
+
+import LoopTableSortIcon from './sort-icon';
+import { LoopTable } from './index';
+
+/** 获取本地存储的表格分页数量 */
+export function getStoragePageSize(pageSizeStorageKey: string | undefined) {
+  if (!pageSizeStorageKey) {
+    return undefined;
+  }
+  const pageSize = localStorage.getItem(pageSizeStorageKey);
+  if (pageSize && !isNaN(Number(pageSize))) {
+    return Number(pageSize);
+  }
+  return undefined;
+}
+
+export const PAGE_SIZE_OPTIONS = [10, 20, 50];
+export const DEFAULT_PAGE_SIZE = 20;
+
+export type TableWithPaginationProps<RecordItem> = TableProps & {
+  heightFull?: boolean;
+  service: Pick<
+    PaginationResult<{ total: number; list: RecordItem[] }, Params>,
+    'data' | 'pagination' | 'loading'
+  >;
+  pageSizeOpts?: number[];
+  header?: React.ReactNode;
+  /** 该参数将插入到分页器左侧，共同作为 footer 的一部分 */
+  footerWithPagination?: React.ReactNode;
+  pageSizeStorageKey?: string;
+  showSizeChanger?: boolean;
+  footerClassName?: string;
+};
+// eslint-disable-next-line complexity
+export function TableWithPagination<RecordItem>(
+  props: TableWithPaginationProps<RecordItem>,
+) {
+  const {
+    pageSizeOpts,
+    service,
+    header,
+    heightFull = false,
+    footerWithPagination,
+    pageSizeStorageKey,
+    showSizeChanger = true,
+    footerClassName,
+    className,
+  } = props;
+  const { columns } = props.tableProps ?? {};
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const size = useSize(tableContainerRef.current);
+  const tableHeaderSize = useSize(
+    tableContainerRef.current?.querySelector('.semi-table-header'),
+  );
+
+  const tablePagination = useMemo(
+    () => ({
+      currentPage: service.pagination.current,
+      pageSize:
+        getStoragePageSize(pageSizeStorageKey) || service.pagination.pageSize,
+      total: Number(service.pagination.total),
+      onChange: (page: number, pageSize: number) => {
+        service.pagination.onChange(page, pageSize);
+      },
+      onPageSizeChange(newPageSize: number) {
+        if (pageSizeStorageKey) {
+          localStorage.setItem(pageSizeStorageKey, String(newPageSize));
+        }
+      },
+      showSizeChanger,
+      pageSizeOpts: pageSizeOpts ?? PAGE_SIZE_OPTIONS,
+    }),
+    [service.pagination, pageSizeOpts, pageSizeStorageKey, showSizeChanger],
+  );
+
+  useEffect(() => {
+    if (service.pagination.current > 1 && service?.data?.list?.length === 0) {
+      service.pagination.changeCurrent(1);
+    }
+  }, [service.pagination.current, service?.data?.list]);
+
+  const tableHeaderHeight = tableHeaderSize?.height ?? 56;
+
+  return (
+    <div
+      className={cls('flex flex-col gap-3 w-full', className, {
+        'h-full flex overflow-hidden': heightFull,
+      })}
+    >
+      {header ? header : null}
+      <div
+        ref={tableContainerRef}
+        className={heightFull ? 'flex-1 overflow-hidden' : ''}
+      >
+        <LoopTable
+          {...props}
+          tableProps={{
+            empty: <></>,
+            ...(props.tableProps ?? {}),
+            scroll: {
+              // 表格容器的高度减去表格头的高度
+              y:
+                size?.height === undefined || !heightFull
+                  ? undefined
+                  : size.height - tableHeaderHeight - 2,
+              ...(props.tableProps?.scroll ?? {}),
+            },
+            loading: service?.loading || props?.tableProps?.loading,
+            columns: columns
+              ?.filter(
+                column => column.hidden !== true && column.checked !== false,
+              )
+              ?.map(column => ({
+                ...column,
+                ...(column.sorter && !column.sortIcon
+                  ? { sortIcon: LoopTableSortIcon }
+                  : {}),
+              })),
+            dataSource: service?.data?.list ?? [],
+          }}
+        />
+      </div>
+      {service.pagination.current > 1 ||
+      (service?.data?.list?.length && service?.data?.list?.length > 0) ? (
+        <div
+          className={cls(
+            'shrink-0 flex flex-row-reverse justify-between items-center',
+            footerClassName,
+          )}
+        >
+          <CozPagination
+            {...tablePagination}
+            showTotal
+            showSizeChanger={true}
+          ></CozPagination>
+          {footerWithPagination}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/table/table-without-pagniation.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable complexity */
+import { useRef } from 'react';
+
+import cls from 'classnames';
+import { useSize } from 'ahooks';
+import { type TableProps } from '@coze-arch/coze-design';
+
+import LoopTableSortIcon from './sort-icon';
+import { LoopTable } from './index';
+
+export type TableWithoutPaginationProps = TableProps & {
+  heightFull?: boolean;
+  header?: React.ReactNode;
+};
+
+export function TableWithoutPagination(props: TableWithoutPaginationProps) {
+  const { header, heightFull = false, className } = props;
+  const { columns } = props.tableProps ?? {};
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const size = useSize(tableContainerRef.current);
+  const tableHeaderSize = useSize(
+    tableContainerRef.current?.querySelector('.semi-table-header'),
+  );
+
+  const tableHeaderHeight = tableHeaderSize?.height ?? 56;
+
+  return (
+    <div
+      className={cls('flex flex-col gap-3 w-full', className, {
+        'h-full flex overflow-hidden': heightFull,
+      })}
+    >
+      {header ? header : null}
+      <div
+        ref={tableContainerRef}
+        className={heightFull ? 'flex-1 overflow-hidden' : ''}
+      >
+        <LoopTable
+          {...props}
+          tableProps={{
+            empty: <></>,
+            ...(props.tableProps ?? {}),
+            scroll: {
+              // 表格容器的高度减去表格头的高度
+              y:
+                size?.height === undefined || !heightFull
+                  ? undefined
+                  : size.height - tableHeaderHeight - 2,
+              ...(props.tableProps?.scroll ?? {}),
+            },
+            columns: columns
+              ?.filter(
+                column => column.hidden !== true && column.checked !== false,
+              )
+              ?.map(column => ({
+                ...column,
+                ...(column.sorter && !column.sortIcon
+                  ? { sortIcon: LoopTableSortIcon }
+                  : {}),
+              })),
+          }}
+        />
+      </div>
+    </div>
+  );
+}

package/src/table-batch-operate/table-batch-operation.tsx

@@ -0,0 +1,47 @@
+import { Button } from '@coze-arch/coze-design';
+
+import { type BatchOperateStore } from './use-batch-operate';
+
+export interface BatchOperateProps<RecordItem> {
+  /** 批量操作接口 */
+  batchOperateStore: BatchOperateStore<RecordItem>;
+  /** 自定义批量操作按钮 */
+  actions?: React.ReactNode;
+}
+
+/** 表格批量操作 */
+export function TableBatchOperate<RecordItem>({
+  actions,
+  batchOperateStore,
+}: BatchOperateProps<RecordItem>) {
+  const {
+    selectedItems,
+    setSelectedItems,
+    enableBatchOperate,
+    setEnableBatchOperate,
+  } = batchOperateStore;
+  if (!enableBatchOperate) {
+    return (
+      <Button color="primary" onClick={() => setEnableBatchOperate?.(true)}>
+        批量选择
+      </Button>
+    );
+  }
+  return (
+    <div className="flex items-center gap-2">
+      <div className="text-xs">
+        已选 {selectedItems.length} 条数据
+        <span
+          className="ml-1 text-[rgb(var(--coze-up-brand-9))] cursor-pointer"
+          onClick={() => {
+            setSelectedItems([]);
+            setEnableBatchOperate?.(false);
+          }}
+        >
+          取消选择
+        </span>
+      </div>
+      {actions}
+    </div>
+  );
+}

package/src/table-batch-operate/use-batch-operate.ts

@@ -0,0 +1,111 @@
+/* eslint-disable security/detect-object-injection */
+import { useMemo, useState } from 'react';
+
+import { type RowSelection } from '@coze-arch/coze-design';
+
+/** 计算数组元素的映射表 */
+function arrayToMap<T>(array: T[], key: keyof T): Record<string, T> {
+  const map: Record<string, T> = {};
+  array.forEach(item => {
+    const mapKey = item[key as keyof T] as string;
+    if (mapKey !== undefined) {
+      const val = item;
+      map[mapKey] = val;
+    }
+  });
+  return map;
+}
+
+/** 批量操作接口 */
+export interface BatchOperateStore<RecordItem> {
+  /** 表格行选择器 */
+  rowSelection: RowSelection<RecordItem>;
+  /** 已选择的表格行记录数据 */
+  selectedItems: RecordItem[];
+  /** 设置已选择的表格行记录数据 */
+  setSelectedItems: (items: RecordItem[]) => void;
+  /** 批量操作状态 */
+  enableBatchOperate: boolean;
+  /** 设置批量操作状态 */
+  setEnableBatchOperate: (enable: boolean) => void;
+  /** 取消批量操作 */
+  onCancelBatchOperate: () => void;
+}
+
+/** 批量操作配置 */
+export interface BatchOperateOptions<RecordItem> {
+  /** 表格行记录数据的唯一ID字段，默认 `id` */
+  recordKey?: keyof RecordItem;
+  /** 最大可选数量，默认不限制 */
+  maxSelectionCount?: number;
+}
+
+/**
+ * 表格批量操作状态管理。
+ * 支持跨分页选择数据。
+ * @param recordKey 表格行记录数据的唯一ID字段，默认 `id`
+ * @returns 批量操作接口
+ */
+export function useBatchOperate<RecordItem>({
+  recordKey = 'id' as keyof RecordItem,
+  maxSelectionCount,
+}: BatchOperateOptions<RecordItem> = {}): BatchOperateStore<RecordItem> {
+  const [enableBatchOperate, setEnableBatchOperate] = useState(false);
+  const [selectedItems, setSelectedItems] = useState<RecordItem[]>([]);
+
+  const rowSelection = useMemo(() => {
+    // 是否开启最大可选数量限制
+    const hasMaxLimit =
+      typeof maxSelectionCount === 'number' && !Number.isNaN(maxSelectionCount);
+    // 选择数量是否达到最大数量
+    const isSelectionMaximum =
+      hasMaxLimit && selectedItems.length >= maxSelectionCount;
+    // 表格行选择器配置
+    const newRowSelection: RowSelection<RecordItem> = {
+      // 禁用表格列标题处的checkbox
+      disabled: hasMaxLimit && selectedItems.length >= maxSelectionCount,
+      // 隐藏表格行选择器
+      hidden: !enableBatchOperate,
+      // 已选择的表格行记录数据的唯一ID字段值数组
+      selectedRowKeys: selectedItems?.map(item => item[recordKey] as string),
+      // 表格行选择器变化事件
+      onChange(newKeys = [], rows = []) {
+        const map = arrayToMap<RecordItem>(
+          [...rows, ...selectedItems],
+          recordKey,
+        );
+        const newSelectKeys = hasMaxLimit
+          ? newKeys.slice(0, maxSelectionCount)
+          : newKeys;
+        const newSelectedItems = newSelectKeys
+          .map(key => map[key])
+          .filter(Boolean);
+        setSelectedItems(newSelectedItems as RecordItem[]);
+      },
+    };
+    // 表格行选择器获取checkbox属性事件, 超出最大选中数量时禁用所有未选项
+    if (hasMaxLimit) {
+      const selectedKeyMap = new Map(
+        selectedItems.map(item => [item[recordKey], item]),
+      );
+      newRowSelection.getCheckboxProps = (record: RecordItem) => ({
+        disabled: isSelectionMaximum && !selectedKeyMap.has(record[recordKey]),
+      });
+    }
+    return newRowSelection;
+  }, [enableBatchOperate, selectedItems, maxSelectionCount, recordKey]);
+
+  const onCancelBatchOperate = () => {
+    setEnableBatchOperate(false);
+    setSelectedItems([]);
+  };
+
+  return {
+    enableBatchOperate,
+    selectedItems,
+    setEnableBatchOperate,
+    onCancelBatchOperate,
+    setSelectedItems,
+    rowSelection,
+  };
+}

package/src/table-col-actions/index.module.less

@@ -0,0 +1,8 @@
+.table-col-actions-dropdown {
+  :global(.coz-item-text) {
+    align-content: center;
+    width: 100% !important;
+    height: 32px;
+    margin-right: 0 !important;
+  }
+}

package/src/table-col-actions/index.tsx

@@ -0,0 +1,149 @@
+import { useState, type ReactNode } from 'react';
+
+import classNames from 'classnames';
+import { IconCozMore } from '@coze-arch/coze-design/icons';
+import {
+  Space,
+  type SpaceProps,
+  type TypographyProps,
+  Typography,
+  Menu,
+} from '@coze-arch/coze-design';
+
+import { TooltipWhenDisabled } from '../tooltip-when-disabled';
+
+import styles from './index.module.less';
+
+export interface TableColAction {
+  label: ReactNode;
+  icon?: ReactNode;
+  disabled?: boolean;
+  hide?: boolean;
+  type?: TypographyProps['type'];
+  disabledTooltip?: string;
+  onClick?: () => void;
+  tooltip?: string;
+}
+
+interface Props {
+  actions: TableColAction[];
+  maxCount?: number;
+  disabled?: boolean;
+  spaceProps?: SpaceProps;
+  wrapperClassName?: string;
+  textClassName?: string;
+}
+
+export function TableColActions({
+  actions,
+  maxCount = 2,
+  disabled,
+  spaceProps = {},
+  wrapperClassName = '',
+  textClassName = '',
+}: Props) {
+  const [visible, setVisible] = useState(false);
+  const filteredActions = actions.filter(action => !action.hide);
+  const firstActions = filteredActions.slice(0, maxCount);
+  const moreActions = filteredActions.slice(maxCount);
+
+  return (
+    <div
+      className={wrapperClassName}
+      onClick={e => {
+        e.stopPropagation();
+      }}
+    >
+      <Space spacing={12} {...spaceProps}>
+        {firstActions.map((action, index) => (
+          <TooltipWhenDisabled
+            key={index}
+            content={action.disabledTooltip || action.label}
+            disabled={Boolean(action.disabled)}
+            needWrap={false}
+          >
+            <Typography.Text
+              size="small"
+              className={classNames(`!text-[13px] ${textClassName}`, {
+                'opacity-45': action.disabled ?? disabled,
+              })}
+              type={action.type}
+              disabled={action.disabled ?? disabled}
+              onClick={() => {
+                if (!(action.disabled ?? disabled)) {
+                  action.onClick?.();
+                }
+              }}
+              link={!action.type}
+            >
+              {action.icon ? null : action.label}
+            </Typography.Text>
+          </TooltipWhenDisabled>
+        ))}
+        {moreActions.length > 0 && (
+          <Menu
+            position="bottomLeft"
+            visible={visible}
+            trigger="custom"
+            className={styles.tableColActionsDropdown}
+            onClickOutSide={() => setVisible(false)}
+            render={
+              <Menu.SubMenu mode="menu">
+                {moreActions.map((action, index) => {
+                  const isDisabled = action.disabled ?? disabled;
+                  const disabledTooltipContent = action.disabledTooltip;
+
+                  const dropdownItem = (
+                    <Menu.Item
+                      disabled={isDisabled}
+                      onClick={() => {
+                        if (!isDisabled) {
+                          setVisible(false);
+                          action.onClick?.();
+                        }
+                      }}
+                      className={classNames('min-w-[90px] !p-0 !pl-2', {
+                        'opacity-50': isDisabled,
+                      })}
+                      icon={action.icon}
+                      style={{ minWidth: '90px' }}
+                    >
+                      <Typography.Text
+                        type={action.type}
+                        size="small"
+                        className="!text-[13px] min-w-[80px]"
+                        link={!action.type}
+                      >
+                        {action.label}
+                      </Typography.Text>
+                    </Menu.Item>
+                  );
+
+                  return (
+                    <div key={index}>
+                      <TooltipWhenDisabled
+                        content={disabledTooltipContent}
+                        disabled={Boolean(isDisabled && disabledTooltipContent)}
+                        theme="dark"
+                        needWrap={false}
+                      >
+                        {dropdownItem}
+                      </TooltipWhenDisabled>
+                    </div>
+                  );
+                })}
+              </Menu.SubMenu>
+            }
+          >
+            <div
+              className="flex items-center justify-center"
+              onClick={() => setVisible(true)}
+            >
+              <IconCozMore className="text-[#5A4DED]" />
+            </div>
+          </Menu>
+        )}
+      </Space>
+    </div>
+  );
+}

package/src/table-cols-config/index.module.less

@@ -0,0 +1,34 @@
+.row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.row-border {
+  border-top: 1px solid var(--semi-color-border);
+}
+
+.cell-thead {
+  color: var(--semi-color-text-2);
+  background-color: var(--fornax-table-header-color);
+  border: 1px solid white;
+}
+
+.cell {
+  padding: 8px 12px;
+}
+
+.cell-left {
+  width: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.cell-right {
+  width: 70px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}