@cozeloop/components 0.0.2 → 0.0.3

package/src/table-cols-config/index.tsx

@@ -0,0 +1,171 @@
+import { type ReactNode, useEffect, useState, useMemo } from 'react';
+import React from 'react';
+
+import classNames from 'classnames';
+import { sleep } from '@cozeloop/toolkit';
+import { Button, SideSheet, Switch, Typography } from '@coze-arch/coze-design';
+import { IconCozSetting, IconCozEye } from '@coze-arch/coze-design/icons';
+
+import { generateColumnsWithKey, generateConfigColumns } from './util';
+import { useHiddenColKeys } from './use-hidden-col-keys';
+import { type ColumnPropsPro, type ColKey } from './type';
+
+export { type ColumnPropsPro, type ColKey };
+
+import styles from './index.module.less';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface TableColsConfigProps<T extends Record<string, any> = any> {
+  className?: string;
+  defaultHiddenColKeys?: ColKey[];
+  localStorageKey?: string;
+
+  columns?: ColumnPropsPro<T>[];
+  onChangeConfig?: (newColumns: ColumnPropsPro<T>[]) => void;
+  onClose?: () => void;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function TableColsConfig<T extends Record<string, any> = any>({
+  className,
+  localStorageKey,
+  defaultHiddenColKeys,
+  columns,
+  onChangeConfig,
+  onClose,
+}: TableColsConfigProps<T>) {
+  const [hiddenColKeys, setHiddenColKeys] = useHiddenColKeys({
+    localStorageKey,
+    defaultHiddenColKeys,
+  });
+  const [visible, setVisible] = useState(false);
+  const handledColumns = useMemo(
+    () => generateColumnsWithKey(columns),
+    [columns],
+  );
+
+  useEffect(() => {
+    if (!visible) {
+      const configColumns = generateConfigColumns(
+        handledColumns,
+        hiddenColKeys,
+      );
+      if (configColumns) {
+        // sleep 100ms，防止页面卡顿
+        sleep(100).then(() => {
+          onChangeConfig?.(configColumns);
+        });
+      }
+    }
+  }, [handledColumns, visible]);
+
+  const renderItem = ({
+    record,
+    index,
+    disable,
+    parent,
+  }: {
+    record: ColumnPropsPro<T>;
+    index: number;
+    disable?: boolean;
+    parent?: ColumnPropsPro<T>;
+  }) => {
+    const { title, children, configurable = true, colKey } = record;
+
+    const hidden = Boolean(colKey && hiddenColKeys.includes(colKey));
+
+    return (
+      <React.Fragment key={index}>
+        <div
+          className={classNames(styles.row, {
+            [styles['row-border']]: parent || index !== 0,
+          })}
+        >
+          <div className={classNames(styles.cell, styles['cell-left'])}>
+            <Typography.Text ellipsis={{ rows: 1, showTooltip: true }}>
+              {title as ReactNode}
+            </Typography.Text>
+          </div>
+          <div className={classNames(styles.cell, styles['cell-right'])}>
+            {!configurable || !colKey ? null : (
+              <Switch
+                size="small"
+                disabled={disable}
+                checked={!hidden}
+                onChange={v => {
+                  const colsSet = new Set(hiddenColKeys);
+                  if (v) {
+                    colsSet.delete(colKey);
+                  } else {
+                    colsSet.add(colKey);
+                  }
+                  const newList = [...colsSet];
+                  setHiddenColKeys(newList);
+                }}
+              />
+            )}
+          </div>
+        </div>
+        {children?.length ? (
+          <div className="ml-4">
+            {children.map((item, idx) =>
+              renderItem({
+                record: item,
+                index: idx,
+                disable: hidden,
+                parent: record,
+              }),
+            )}
+          </div>
+        ) : null}
+      </React.Fragment>
+    );
+  };
+
+  return (
+    <>
+      <Button
+        className={className}
+        icon={<IconCozSetting />}
+        color="primary"
+        onClick={() => setVisible(true)}
+      >
+        列配置
+      </Button>
+      <SideSheet
+        placement="right"
+        size="small"
+        visible={visible}
+        onCancel={() => {
+          setVisible(false);
+          onClose?.();
+        }}
+      >
+        <div className={styles.row}>
+          <div
+            className={classNames(
+              styles.cell,
+              styles['cell-left'],
+              styles['cell-thead'],
+            )}
+          >
+            列名
+          </div>
+          <div
+            className={classNames(
+              styles.cell,
+              styles['cell-right'],
+              styles['cell-thead'],
+            )}
+          >
+            {<IconCozEye style={{ lineHeight: '22px' }} />}
+          </div>
+        </div>
+        {handledColumns?.map((item, index) =>
+          renderItem({ record: item, index }),
+        )}
+        <div className="h-5" />
+      </SideSheet>
+    </>
+  );
+}

package/src/table-cols-config/type.ts

@@ -0,0 +1,12 @@
+import { type ColumnProps } from '@coze-arch/coze-design';
+
+export type ColKey = string | number;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface ColumnPropsPro<T extends Record<string, any> = any>
+  extends ColumnProps<T> {
+  /* 是否可配置,默认为true */
+  configurable?: boolean;
+  /* 内部使用可忽略 */
+  colConfigKey?: ColKey;
+}

package/src/table-cols-config/use-hidden-col-keys.ts

@@ -0,0 +1,53 @@
+import { useState, useEffect } from 'react';
+
+import { safeJsonParse } from '@cozeloop/toolkit';
+import { type ColKey } from './type';
+
+const ITEM_KEY = 'FORNAX_TABLE_HIDDEN_COLS';
+
+export function useHiddenColKeys({
+  localStorageKey,
+  defaultHiddenColKeys,
+}: {
+  localStorageKey?: string;
+  defaultHiddenColKeys?: ColKey[];
+}) {
+  const handleSetHiddenColKeys = () => {
+    if (localStorageKey) {
+      const res = safeJsonParse<Record<string, ColKey[] | undefined>>(
+        localStorage.getItem(ITEM_KEY),
+      );
+      if (res) {
+        const list = res[`${localStorageKey}`];
+        if (list) {
+          return list;
+        }
+      }
+    }
+
+    return defaultHiddenColKeys || [];
+  };
+
+  const [hiddenColKeys, setHiddenColKeys] = useState<ColKey[]>(
+    handleSetHiddenColKeys,
+  );
+
+  useEffect(() => {
+    setHiddenColKeys(handleSetHiddenColKeys());
+  }, [defaultHiddenColKeys]);
+
+  useEffect(() => {
+    if (localStorageKey) {
+      const res =
+        safeJsonParse<Record<string, ColKey[] | undefined>>(
+          localStorage.getItem(ITEM_KEY),
+        ) || {};
+      res[`${localStorageKey}`] = hiddenColKeys.length
+        ? hiddenColKeys
+        : undefined;
+      localStorage.setItem(ITEM_KEY, JSON.stringify(res));
+    }
+  }, [hiddenColKeys]);
+
+  return [hiddenColKeys, setHiddenColKeys] as const;
+}

package/src/table-cols-config/util.ts

@@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { type ColumnPropsPro, type ColKey } from './type';
+
+export function generateColumnsWithKey<T extends Record<string, any> = any>(
+  cols?: ColumnPropsPro<T>[],
+  hiddenColKeys?: ColKey[],
+) {
+  function mapCol(
+    col: ColumnPropsPro<T>,
+    index: number,
+    parentKey?: ColKey,
+  ): ColumnPropsPro<T> {
+    const { key, children } = col;
+    let colKey: ColKey;
+    if (key) {
+      colKey = key;
+    } else {
+      const indexKey = `index${index}`;
+      colKey = parentKey ? `${parentKey}-${indexKey}` : indexKey;
+    }
+
+    return {
+      ...col,
+      colKey,
+      children: children?.map((child, idx) => mapCol(child, idx, colKey)),
+    };
+  }
+
+  return cols?.map((col, index) => mapCol(col, index));
+}
+
+export function generateConfigColumns<T extends Record<string, any> = any>(
+  cols?: ColumnPropsPro<T>[],
+  hiddenColKeys?: ColKey[],
+) {
+  if (!hiddenColKeys?.length) {
+    return cols;
+  }
+
+  function mapCols(list?: ColumnPropsPro<T>[]) {
+    const res: ColumnPropsPro<T>[] = [];
+    list?.forEach(col => {
+      if (hiddenColKeys?.includes(col.colKey as ColKey)) {
+        return;
+      }
+      res.push({
+        ...col,
+        children: col.children && mapCols(col.children as ColumnPropsPro[]),
+      });
+    });
+
+    return res;
+  }
+
+  return mapCols(cols);
+}

package/src/table-empty/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import classNames from 'classnames';
+import {
+  IconCozIllusNone,
+  IconCozIllusNoneDark,
+} from '@coze-arch/coze-design/illustrations';
+import { EmptyState, type EmptyStateProps } from '@coze-arch/coze-design';
+
+import { useI18n } from '../provider';
+
+export function TableEmpty({ className, ...props }: EmptyStateProps) {
+  const I18n = useI18n();
+  return (
+    <EmptyState
+      className={classNames('my-10', className)}
+      icon={<IconCozIllusNone />}
+      darkModeIcon={<IconCozIllusNoneDark />}
+      description={I18n.t('evaluate_dataset_no_data_yet')}
+      {...props}
+    />
+  );
+}

package/src/table-header/index.module.less

@@ -0,0 +1,7 @@
+.table-header-form{
+  :global {
+    .semi-form-horizontal .semi-form-field{
+      padding-right: 8px;
+    }
+  }
+}

package/src/table-header/index.tsx

@@ -0,0 +1,70 @@
+import classNames from 'classnames';
+import { IconCozRefresh } from '@coze-arch/coze-design/icons';
+import {
+  Button,
+  Space,
+  Tooltip,
+  type ButtonProps,
+} from '@coze-arch/coze-design';
+
+import { ColumnSelector, type ColumnSelectorProps } from '../columns-select';
+import { TableColsConfig, type TableColsConfigProps } from '../table-cols-config';
+
+import styles from './index.module.less';
+
+export interface TableHeaderProps {
+  columnSelectorConfigProps?: ColumnSelectorProps;
+  tableColsConfigProps?: TableColsConfigProps;
+  filterForm?: React.ReactNode;
+  actions?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  spaceProps?: Record<string, unknown>;
+  refreshButtonPros?: ButtonProps;
+}
+
+export function TableHeader({
+  columnSelectorConfigProps,
+  tableColsConfigProps,
+  filterForm,
+  actions,
+  className,
+  style,
+  spaceProps,
+  refreshButtonPros,
+}: TableHeaderProps) {
+  return (
+    <div
+      className={classNames('flex flex-row justify-between w-full ', className)}
+      style={style}
+    >
+      <div className={classNames('flex flex-row', styles['table-header-form'])}>
+        {tableColsConfigProps ? (
+          <TableColsConfig
+            className={classNames('mr-2', tableColsConfigProps.className)}
+            {...tableColsConfigProps}
+          />
+        ) : null}
+        {filterForm}
+      </div>
+      <Space {...(spaceProps || {})}>
+        {refreshButtonPros ? (
+          <Tooltip content="刷新" theme="dark">
+            <Button
+              color="primary"
+              icon={<IconCozRefresh />}
+              {...refreshButtonPros}
+            ></Button>
+          </Tooltip>
+        ) : null}
+        {columnSelectorConfigProps ? (
+          <ColumnSelector
+            className={classNames(columnSelectorConfigProps.className)}
+            {...columnSelectorConfigProps}
+          />
+        ) : null}
+        {actions}
+      </Space>
+    </div>
+  );
+}

package/src/tabs/index.module.less

@@ -0,0 +1,48 @@
+.tabs{
+  display: flex;
+  flex-direction: column;
+
+  :global{
+    .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:first-of-type{
+      margin-left: 24px;
+    }
+
+    .semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab{
+      height: 36px;
+      padding-top: 6px;
+      padding-bottom: 6px;
+
+      color: var(--semi-color-text-0);
+
+      background-color: #F6F8FA;
+      border: 1px solid var(--semi-color-border);
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+    }
+
+    .semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab-active{
+      color: rgb(var(--coze-up-brand-9));
+      background: linear-gradient(to bottom, rgb(var(--coze-up-brand-9)) 2px, transparent 2px);
+      border-top: 1px solid rgb(var(--coze-up-brand-9));
+      border-bottom: 1px solid var(--semi-color-bg-2);
+    }
+
+    .semi-tabs-content{
+      overflow: hidden;
+      flex: 1;
+      padding: 0;
+    }
+
+    .semi-tabs-pane{
+      height: 100%;
+    }
+
+    .semi-tabs-pane-motion-overlay{
+      height: 100%;
+    }
+
+    .semi-tag-large{
+      height: 20px;
+    }
+  }
+}

package/src/tabs/index.tsx

@@ -0,0 +1,9 @@
+import cs from 'classnames';
+import { Tabs, type TabsProps } from '@coze-arch/coze-design';
+
+import styles from './index.module.less';
+
+export const LoopTabs = (props: TabsProps) => {
+  const { className, ...rest } = props;
+  return <Tabs {...rest} className={cs(styles.tabs, className)} />;
+};

package/src/text-area-pro/index.module.less

@@ -0,0 +1,5 @@
+.full {
+  textarea {
+    height: calc(100vh - 126px);
+  }
+}

package/src/text-area-pro/index.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+
+import {
+  Button,
+  Modal,
+  TextArea,
+  type TextAreaProps,
+} from '@coze-arch/coze-design';
+import { IconCozContent } from '@coze-arch/coze-design/icons';
+
+import s from './index.module.less';
+
+export interface Props extends TextAreaProps {
+  bottomExtra?: React.ReactNode;
+}
+
+export function TextAreaPro({ bottomExtra, ...props }: Props) {
+  const [full, setFull] = useState(false);
+
+  return (
+    <div className="relative">
+      {full ? (
+        <Modal
+          motion={false}
+          title=" "
+          fullScreen
+          visible={true}
+          onCancel={() => setFull(false)}
+          footer={null}
+        >
+          <TextArea {...props} rows={undefined} className={s.full} />
+        </Modal>
+      ) : null}
+
+      <TextArea {...props} />
+      <div className="absolute bottom-1 left-1 z-10 h-8 flex flex-row items-center">
+        <Button
+          className="z-10 h-8 w-8"
+          icon={<IconCozContent />}
+          size="small"
+          color="secondary"
+          type="tertiary"
+          onClick={() => setFull(true)}
+        ></Button>
+        {bottomExtra}
+      </div>
+    </div>
+  );
+}

package/src/text-with-copy/index.tsx

@@ -0,0 +1,95 @@
+import { type CSSProperties } from 'react';
+
+import classNames from 'classnames';
+import { IconCozCopy } from '@coze-arch/coze-design/icons';
+import { IconButton, Tooltip, Typography } from '@coze-arch/coze-design';
+
+import { handleCopy } from '../utils/basic';
+
+interface TextWithCopyProps {
+  content?: string;
+  displayText?: string;
+  copyTooltipText?: string;
+  maxWidth?: number | string;
+  className?: string;
+  style?: CSSProperties;
+  textClassName?: string;
+  textType?:
+    | 'success'
+    | 'secondary'
+    | 'primary'
+    | 'danger'
+    | 'warning'
+    | 'tertiary'
+    | 'quaternary';
+  onlyIconCopy?: boolean;
+}
+
+export function TextWithCopy({
+  displayText,
+  copyTooltipText,
+  content,
+  className,
+  maxWidth,
+  style,
+  textClassName,
+  textType = 'secondary',
+  onlyIconCopy,
+}: TextWithCopyProps) {
+  return (
+    <div
+      className={classNames(
+        'flex items-baseline justify-start gap-1',
+        className,
+      )}
+      style={style}
+    >
+      <Typography.Text
+        className={classNames(
+          'max-w-full',
+          {
+            'cursor-pointer': !onlyIconCopy,
+          },
+          textClassName,
+        )}
+        type={textType}
+        style={{ maxWidth }}
+        ellipsis={{
+          showTooltip: { opts: { theme: 'dark', content } },
+        }}
+        onClick={
+          onlyIconCopy
+            ? undefined
+            : e => {
+                content && handleCopy(content);
+                e?.stopPropagation();
+              }
+        }
+      >
+        {displayText || content || ''}
+      </Typography.Text>
+      {content ? (
+        <Tooltip content={copyTooltipText || '复制内容'} theme="dark">
+          <IconButton
+            size="mini"
+            color="secondary"
+            className="flex-shrink-0"
+            style={{
+              width: 21,
+              height: 21,
+            }}
+            icon={
+              <IconCozCopy
+                onClick={e => {
+                  content && handleCopy(content);
+                  e?.stopPropagation();
+                }}
+                fill="var(--semi-color-text-2)"
+              />
+            }
+          />
+        </Tooltip>
+      ) : null}
+    </div>
+  );
+}

package/src/title-with-sub/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Space, Typography } from '@coze-arch/coze-design';
+
+interface TitleWithSubProps {
+  title: string;
+  subTitle?: string;
+  className?: string;
+}
+
+export function TitleWithSub({
+  title,
+  subTitle,
+  className,
+}: TitleWithSubProps) {
+  return (
+    <Space align="center" spacing="tight" className={className}>
+      <Typography.Title className="!text-sm" heading={6}>
+        {title}
+      </Typography.Title>
+      {subTitle ? (
+        <Typography.Text size="small" type="tertiary">
+          {subTitle}
+        </Typography.Text>
+      ) : null}
+    </Space>
+  );
+}

package/src/tooltip-when-disabled/index.tsx

@@ -0,0 +1,23 @@
+import { type TooltipProps } from '@coze-arch/coze-design';
+import { Tooltip } from '@coze-arch/coze-design';
+
+export interface TooltipWhenDisabledProps extends TooltipProps {
+  disabled?: boolean;
+  needWrap?: boolean;
+}
+
+export function TooltipWhenDisabled({
+  children,
+  disabled,
+  needWrap,
+  ...rest
+}: TooltipWhenDisabledProps) {
+  if (disabled) {
+    return (
+      <Tooltip {...rest}>
+        {needWrap ? <span>{children}</span> : children}
+      </Tooltip>
+    );
+  }
+  return <>{children}</>;
+}

package/src/tooltip-with-disabled/index.tsx

@@ -0,0 +1,17 @@
+import { type TooltipProps } from '@coze-arch/coze-design';
+import { Tooltip } from '@coze-arch/coze-design';
+
+export interface TooltipWithDisabledProps extends TooltipProps {
+  disabled?: boolean;
+}
+
+export function TooltipWithDisabled({
+  children,
+  disabled,
+  ...rest
+}: TooltipWithDisabledProps) {
+  if (disabled) {
+    return <>{children}</>;
+  }
+  return <Tooltip {...rest}>{children}</Tooltip>;
+}