@cozeloop/components 0.0.2 → 0.0.3

package/src/infinite-scroll-table/index.tsx

@@ -0,0 +1,99 @@
+import {
+  type ForwardedRef,
+  forwardRef,
+  useRef,
+  useImperativeHandle,
+} from 'react';
+
+import classNames from 'classnames';
+import {
+  type Data,
+  type InfiniteScrollOptions,
+  type Service,
+} from 'ahooks/lib/useInfiniteScroll/types';
+import { useSize, useInfiniteScroll } from 'ahooks';
+import { IconCozIllusEmpty } from '@coze-arch/coze-design/illustrations';
+import { EmptyState, type TableProps } from '@coze-arch/coze-design';
+
+import { LoopTable } from '../table';
+
+interface ExpandData extends Data {
+  hasMore?: boolean;
+}
+interface InfiniteScrollTableProps<TData extends ExpandData> {
+  service: Service<TData>;
+  options?: InfiniteScrollOptions<TData>;
+}
+
+export interface InfiniteScrollTableRef {
+  hookRes: ReturnType<typeof useInfiniteScroll>;
+}
+
+// 定义组件的 Props 类型
+type Props<TData extends ExpandData> = TableProps &
+  InfiniteScrollTableProps<TData>;
+
+// 显式指定 forwardRef 的类型
+export const InfiniteScrollTable: <TData extends ExpandData>(
+  props: Props<TData> & { ref?: ForwardedRef<InfiniteScrollTableRef> },
+) => React.ReactElement | null = forwardRef(
+  <TData extends ExpandData>(
+    { service, options, className, ...restTableProps }: Props<TData>,
+    ref: ForwardedRef<InfiniteScrollTableRef>,
+  ): JSX.Element => {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const hookRes = useInfiniteScroll(d => service?.(d), {
+      isNoMore: d => !d?.hasMore,
+      ...options,
+      reloadDeps: [...(options?.reloadDeps || [])],
+    });
+
+    const { data, loading, loadingMore, noMore, loadMore } = hookRes;
+
+    const scrollSize = useSize(containerRef);
+    const height = scrollSize?.height || 0;
+
+    useImperativeHandle(ref, () => ({
+      // @ts-expect-error type
+      hookRes,
+    }));
+
+    return (
+      <div
+        className={classNames('w-full h-full overflow-hidden', className)}
+        ref={containerRef}
+      >
+        <LoopTable
+          tableProps={{
+            ...restTableProps.tableProps,
+            loading: loading || loadingMore,
+            pagination: false,
+            dataSource: data?.list || [],
+            scroll: {
+              y: height - 48,
+              ...restTableProps.tableProps?.scroll,
+            },
+          }}
+          empty={
+            restTableProps.empty ?? (
+              <EmptyState
+                size="full_screen"
+                icon={<IconCozIllusEmpty />}
+                title="暂无数据"
+              />
+            )
+          }
+          enableLoad={true}
+          loadMode="cursor"
+          hasMore={!noMore}
+          onLoad={loadMore}
+          offsetY={0}
+          strictDataSourceProp
+        />
+      </div>
+    );
+  },
+) as <TData extends ExpandData>(
+  props: Props<TData> & { ref?: ForwardedRef<InfiniteScrollTableRef> },
+) => React.ReactElement | null;

package/src/info-tooltip/index.tsx

@@ -0,0 +1,41 @@
+import classNames from 'classnames';
+import {
+  IconCozInfoCircle,
+  IconCozQuestionMarkCircle,
+} from '@coze-arch/coze-design/icons';
+import { Tooltip } from '@coze-arch/coze-design';
+
+interface Props {
+  content: string | React.ReactNode;
+  className?: string;
+  tooltipClassName?: string;
+  icon?: React.ReactNode;
+  useQuestion?: boolean;
+}
+
+export const InfoTooltip = ({
+  content,
+  className,
+  tooltipClassName,
+  icon,
+  useQuestion = false,
+}: Props) => {
+  const defaultIcon = useQuestion ? (
+    <IconCozQuestionMarkCircle className="coz-fg-secondary cursor-pointer hover:coz-fg-primary" />
+  ) : (
+    <IconCozInfoCircle className="coz-fg-secondary cursor-pointer hover:coz-fg-primary" />
+  );
+  return (
+    <Tooltip
+      content={
+        <div style={{ maxHeight: 300, overflowY: 'auto' }}>{content}</div>
+      }
+      theme="dark"
+      className={tooltipClassName}
+    >
+      <div className={classNames('h-[17px]', className)}>
+        {icon ?? defaultIcon}
+      </div>
+    </Tooltip>
+  );
+};

package/src/input-components/radio-button.tsx

@@ -0,0 +1,63 @@
+import cls from 'classnames';
+import { Tooltip } from '@coze-arch/coze-design';
+
+export interface RadioButtonProps<T extends string | number> {
+  value?: T;
+  onChange?: (value: T) => void;
+  disabled?: boolean;
+  options: Array<{
+    value: T;
+    label: React.ReactNode;
+    disabled?: boolean;
+    tooltip?: string;
+  }>;
+  className?: string;
+}
+
+/** coze design 的 SegmentTab 和 Radio 的 advanced + pureCard 模式均有样式问题，不得不自行造轮子 */
+export function RadioButton<T extends string | number>({
+  value,
+  onChange,
+  options,
+  disabled,
+  className,
+}: RadioButtonProps<T>) {
+  return (
+    <div className={cls('w-full flex items-center gap-[8px]', className)}>
+      {options.map(option => {
+        const selected = value === option.value;
+        const optionDisabled = option.disabled || disabled;
+        return (
+          <Tooltip
+            key={option.value}
+            trigger={option.tooltip ? 'hover' : 'custom'}
+            content={option.tooltip}
+          >
+            <div
+              className={cls(
+                'flex-1 px-[20px] py-[4px] rounded-[6px]',
+                'flex items-center justify-center',
+                'border border-solid',
+                'text-[14px] leading-[20px]',
+                selected
+                  ? 'coz-fg-hglt coz-stroke-hglt coz-mg-hglt hover:coz-mg-hglt-hovered active:coz-mg-hglt-pressed'
+                  : 'coz-stroke-primary coz-bg-max hover:coz-mg-primary-hovered active:coz-mg-primary-pressed',
+                optionDisabled
+                  ? 'cursor-not-allowed opacity-60'
+                  : 'cursor-pointer',
+              )}
+              onClick={() => {
+                if (optionDisabled) {
+                  return;
+                }
+                onChange?.(option.value);
+              }}
+            >
+              {option.label}
+            </div>
+          </Tooltip>
+        );
+      })}
+    </div>
+  );
+}

package/src/input-slider/index.module.less

@@ -0,0 +1,30 @@
+/* stylelint-disable declaration-no-important */
+.input-slider {
+  display: flex;
+  column-gap: 8px;
+  align-items: center;
+
+  :global {
+    .semi-slider {
+      flex: 1;
+      padding-left: 14px;
+    }
+
+    .semi-slider-handle{
+      width: 12px !important;
+      height: 12px !important;
+      margin-top: 10px !important;
+    }
+  }
+
+  .input-number {
+    width: 90px;
+
+    :global{
+      .semi-input-number-suffix-btns{
+        height: auto !important;
+      }
+    }
+  }
+
+}

package/src/input-slider/index.tsx

@@ -0,0 +1,161 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+/* eslint-disable max-params */
+import { useRef } from 'react';
+
+import { isInteger, isUndefined } from 'lodash-es';
+import classNames from 'classnames';
+import {
+  CozInputNumber,
+  Slider,
+  type SliderProps,
+} from '@coze-arch/coze-design';
+
+import styles from './index.module.less';
+
+interface InputSliderProps {
+  value?: number;
+  onChange?: (v: number) => void;
+  max?: number;
+  min?: number;
+  step?: number;
+  disabled?: boolean;
+  decimalPlaces?: number;
+  marks?: SliderProps['marks'];
+  className?: string;
+}
+
+export const formateDecimalPlacesString = (
+  value: string | number,
+  prevValue?: number,
+  decimalPlaces?: number,
+) => {
+  if (isUndefined(decimalPlaces)) {
+    return value.toString();
+  }
+  const numberValue = Number(value);
+  const stringValue = value.toString();
+  if (Number.isNaN(numberValue)) {
+    return `${value}`;
+  }
+  if (decimalPlaces === 0 && !isInteger(Number(value)) && prevValue) {
+    return `${prevValue}`;
+  }
+  const decimalPointIndex = stringValue.indexOf('.');
+
+  if (decimalPointIndex < 0) {
+    return stringValue;
+  }
+  const formattedValue = stringValue.substring(
+    0,
+    decimalPointIndex + 1 + decimalPlaces!,
+  );
+
+  if (formattedValue.endsWith('.') && decimalPlaces === 0) {
+    return formattedValue.substring(0, formattedValue.length - 1);
+  }
+  return formattedValue;
+};
+
+function getDecimalPlaces(num) {
+  if (!num) {
+    return 0;
+  }
+  // 将数字转换为字符串
+  const numStr = num.toString();
+  // 检查是否包含小数点
+  if (numStr.includes('.')) {
+    // 使用正则表达式匹配小数点后面的数字
+    const decimalPart = numStr.split('.')[1];
+    return decimalPart.length; // 返回小数位数
+  }
+  return 0; // 如果没有小数点，返回0
+}
+
+const formateDecimalPlacesNumber = (
+  value: number,
+  prevValue?: number,
+  decimalPlaces?: number,
+  isPasted?: boolean,
+) => {
+  if (isUndefined(decimalPlaces)) {
+    if (isPasted) {
+      return value;
+    }
+    const currentDecimalPlaces = getDecimalPlaces(value);
+    const prevDecimalPlaces = getDecimalPlaces(prevValue);
+    if (
+      prevDecimalPlaces === 2 &&
+      currentDecimalPlaces > 2 &&
+      !isUndefined(prevValue) &&
+      Math.abs(prevValue! - value).toFixed(2) === '0.01'
+    ) {
+      const pow2 = Math.pow(10, 2);
+      return Math.round(value * pow2) / pow2;
+    }
+
+    return value;
+  }
+  if (decimalPlaces === 0 && !isInteger(value) && prevValue) {
+    return prevValue;
+  }
+
+  const pow = Math.pow(10, decimalPlaces!);
+  return Math.round(value * pow) / pow;
+};
+
+export const InputSlider: React.FC<InputSliderProps> = ({
+  value,
+  onChange,
+  max = 1,
+  min = 0,
+  step = 1,
+  disabled,
+  decimalPlaces,
+  marks,
+  className,
+}) => {
+  const isPasted = useRef(false);
+  const onNumberChange = (numberValue: number) => {
+    const formattedValue = formateDecimalPlacesNumber(
+      numberValue,
+      value,
+      decimalPlaces,
+      isPasted.current,
+    );
+    isPasted.current = false;
+    onChange?.(formattedValue);
+  };
+
+  return (
+    <div className={classNames(styles['input-slider'], className)}>
+      <Slider
+        key={`${min}-${max}`}
+        disabled={disabled}
+        value={value}
+        max={max}
+        min={min}
+        step={step}
+        marks={marks}
+        onChange={v => {
+          if (typeof v === 'number') {
+            onChange?.(v);
+          }
+        }}
+      />
+      <CozInputNumber
+        className={styles['input-number']}
+        value={value}
+        disabled={disabled}
+        formatter={inputValue =>
+          formateDecimalPlacesString(inputValue, value, decimalPlaces)
+        }
+        onNumberChange={onNumberChange}
+        max={max}
+        min={min}
+        step={step}
+        onPaste={() => (isPasted.current = true)}
+      />
+    </div>
+  );
+};

package/src/input-with-count/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { Input, type InputProps } from '@coze-arch/coze-design';
+
+interface LimitCountProps {
+  maxLen: number;
+  len: number;
+}
+const LimitCount = ({ maxLen, len }: LimitCountProps) => (
+  <span className="pl-2 pr-3 overflow-hidden text-xs coz-fg-secondary">
+    <span>{len}</span>
+    <span>/</span>
+    <span>{maxLen}</span>
+  </span>
+);
+
+export function InputWithCount(props: InputProps) {
+  return (
+    <Input
+      {...props}
+      suffix={
+        Boolean(props.maxLength) && (
+          <LimitCount
+            maxLen={props.maxLength ?? 0}
+            len={props.value?.toString().length ?? 0}
+          />
+        )
+      }
+    />
+  );
+}

package/src/jump-button/jump-icon-button.tsx

@@ -0,0 +1,12 @@
+import { IconCozLongArrowTopRight } from '@coze-arch/coze-design/icons';
+
+import { IconButtonContainer } from '../id-render/icon-button-container';
+
+export function JumpIconButton(
+  props: {
+    className?: string;
+    style?: React.CSSProperties;
+  } & React.DOMAttributes<HTMLDivElement>,
+) {
+  return <IconButtonContainer {...props} icon={<IconCozLongArrowTopRight />} />;
+}

package/src/large-txt-render/index.tsx

@@ -0,0 +1,46 @@
+import { useRef } from 'react';
+
+import { useInfiniteScroll } from 'ahooks';
+
+const PER_PRE_MAX_LENGTH = 25000;
+
+export interface LargeTxtRenderProps {
+  text: string;
+}
+
+export const LargeTxtRender = (props: LargeTxtRenderProps) => {
+  const { text } = props;
+
+  const ref = useRef<HTMLPreElement>(null);
+
+  const getMoreTextChunk = (startIndex: number) => {
+    const endIndex = startIndex + PER_PRE_MAX_LENGTH;
+    const chunk = text.slice(startIndex, endIndex);
+    const hasMore = endIndex < text.length;
+
+    return {
+      list: [chunk],
+      nextId: hasMore ? endIndex.toString() : undefined,
+    };
+  };
+
+  const { data } = useInfiniteScroll(
+    d => {
+      const startIndex = d ? parseInt(d.nextId) : 0;
+      return Promise.resolve(getMoreTextChunk(startIndex));
+    },
+    {
+      target: ref,
+      isNoMore: d => d?.nextId === undefined,
+    },
+  );
+
+  return (
+    <pre
+      ref={ref}
+      className="m-0 break-words whitespace-pre-wrap max-h-full overflow-y-auto text-[13px] leading-4 text-[var(--coz-fg-primary)] font-normal"
+    >
+      {data?.list.join('') || ''}
+    </pre>
+  );
+};

package/src/layout/content.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef, type CSSProperties, type ReactNode } from 'react';
+
+import classNames from 'classnames';
+
+export const Content = forwardRef<
+  HTMLDivElement,
+  {
+    children?: ReactNode;
+    style?: CSSProperties;
+    className?: string;
+    top?: ReactNode;
+  }
+>(({ children, style, className, top }, ref) => (
+  <div className="w-full h-full flex flex-col">
+    {top}
+    <div
+      ref={ref}
+      className={classNames(
+        'bg-white m-4 mb-0 p-4 rounded-md flex-1 flex flex-col overflow-y-auto',
+        className,
+      )}
+      style={style}
+    >
+      {children}
+    </div>
+    {/* <div className="h-4 shrink-0" /> */}
+  </div>
+));

package/src/layout/header.tsx

@@ -0,0 +1,15 @@
+import React, { type ReactNode } from 'react';
+
+import classNames from 'classnames';
+
+interface Props {
+  children?: ReactNode;
+  className?: string;
+}
+export function Header({ children, className }: Props) {
+  return (
+    <div className={classNames('flex items-center pb-4', className)}>
+      {children}
+    </div>
+  );
+}

package/src/layout/index.module.less

@@ -0,0 +1,28 @@
+.tabs {
+  position: relative;
+  top: -14px;
+
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  :global {
+    .semi-tabs-bar{
+      flex-shrink: 0;
+    }
+    .semi-tabs-content {
+      flex-grow: 1;
+      flex-shrink: 1;
+      min-height: 0;
+      padding: 16px 0 0 0;
+    }
+
+    .semi-tabs-pane {
+      height: 100%;
+    }
+
+    .semi-tabs-pane-motion-overlay {
+      height: 100%;
+    }
+  }
+}

package/src/layout/index.tsx

@@ -0,0 +1,9 @@
+import { Tabs } from './tabs';
+import { Header } from './header';
+import { Content } from './content';
+
+export const Layout = {
+  Header,
+  Content,
+  Tabs,
+};

package/src/layout/tabs.tsx

@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import { type TabsProps, Tabs as SemiTabs } from '@coze-arch/coze-design';
+
+import styles from './index.module.less';
+
+export function Tabs({ className, ...props }: TabsProps) {
+  return <SemiTabs className={classNames(styles.tabs, className)} {...props} />;
+}
+
+Tabs.TabPane = SemiTabs.TabPane;
+Tabs.TabItem = SemiTabs.TabItem;

package/src/lazy-load-component/index.tsx

@@ -0,0 +1,55 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+import { Skeleton } from '@coze-arch/coze-design';
+
+export const LazyLoadComponent = ({
+  children,
+  placeholder,
+}: {
+  children: React.ReactNode;
+  placeholder?: React.ReactNode;
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const domRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if ('IntersectionObserver' in window) {
+      if (!domRef.current) {
+        return;
+      }
+      // 使用 Intersection Observer
+      const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            setIsVisible(true);
+            observer.unobserve(domRef.current as Element);
+          }
+        });
+      });
+
+      observer.observe(domRef.current);
+      return () => observer.disconnect();
+    } else {
+      // 回退到 scroll 事件监听
+      const handleScroll = () => {
+        if (domRef.current) {
+          const rect = domRef.current.getBoundingClientRect();
+          if (rect.top <= window.innerHeight && rect.bottom >= 0) {
+            setIsVisible(true);
+            window.removeEventListener('scroll', handleScroll);
+          }
+        }
+      };
+
+      handleScroll(); // 初始化检查
+      document.addEventListener('scroll', handleScroll);
+      return () => document.removeEventListener('scroll', handleScroll);
+    }
+  }, []);
+
+  return (
+    <div ref={domRef}>
+      {isVisible ? children : <Skeleton placeholder={placeholder} />}
+    </div>
+  );
+};

package/src/logic-editor/index.ts

@@ -0,0 +1,3 @@
+export { LogicEditor } from './logic-editor';
+export type { LogicDataType, LogicField, LogicFilter } from './logic-types';
+export { baseOperations, type LogicSetter } from './logic-types';

package/src/logic-editor/logic-editor.module.less

@@ -0,0 +1,13 @@
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable declaration-no-important */
+.expr-logic-editor {
+  :global {
+    .expr-render-del-btn {
+      background-color: #0000 !important;
+    }
+
+    .expr-render-del-btn:hover {
+      background-color: rgba(var(--coze-bg-5), var(--coze-bg-5-alpha)) !important;
+    }
+  }
+}