@cozeloop/components 0.0.3 → 0.0.4-beta-1770694681364

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

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

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

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

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

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

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

package/src/table-header/index.tsx

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

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

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

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

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

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

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

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

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

@@ -1,17 +0,0 @@
-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>;
-}