@cozeloop/components 0.0.1 → 0.0.3

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;
+    }
+  }
+}

package/src/logic-editor/logic-editor.tsx

@@ -0,0 +1,200 @@
+import { useEffect, useState } from 'react';
+
+import classNames from 'classnames';
+import { IconCozFilter, IconCozInfoCircle } from '@coze-arch/coze-design/icons';
+import {
+  Button,
+  Divider,
+  Popover,
+  Tooltip,
+  type PopoverProps,
+} from '@coze-arch/coze-design';
+
+import { LogicExpr } from '../logic-expr';
+import { type LogicFilter, type LogicField } from './logic-types';
+import RightRender from './logic-right-render';
+import OperatorRender from './logic-operator-render';
+import LeftRender from './logic-left-render';
+
+import styles from './logic-editor.module.less';
+
+const getValidFilterFields = (value?: LogicFilter) => {
+  if (!value?.exprs) {
+    return {
+      exprs: [],
+    };
+  }
+
+  const isEmpty = (val: string | undefined | null | string[]) =>
+    val === undefined ||
+    val === '' ||
+    val === null ||
+    (Array.isArray(val) && val.length === 0);
+
+  // 左中右 三元都存在才有效
+  const validArray = value.exprs.filter(
+    // 由于暂时不包含为空不为空的case，所以这里的判断条件要求左中右都必须存在
+    exp => !isEmpty(exp.left) && !isEmpty(exp.operator) && !isEmpty(exp.right),
+  );
+
+  return {
+    exprs: validArray,
+  };
+};
+
+/** 逻辑筛选器 */
+// eslint-disable-next-line @coze-arch/max-line-per-function, complexity
+export function LogicEditor({
+  fields = [],
+  disabled = false,
+  value,
+  popoverProps = {},
+  tooltip,
+  clearEmptyCondition = true,
+  enableCascadeMode = false,
+  onChange,
+  onConfirm,
+  onClose,
+}: {
+  fields: LogicField[];
+  disabled?: boolean;
+  value?: LogicFilter | undefined;
+  popoverProps?: PopoverProps;
+  tooltip?: React.ReactNode;
+  /** 是否过滤空条件 */
+  clearEmptyCondition?: boolean;
+  /** 字段选择开启级联模式 */
+  enableCascadeMode?: boolean;
+  onChange?: (val?: LogicFilter) => void;
+  onConfirm?: (val?: LogicFilter) => void;
+  onClose?: () => void;
+}) {
+  const [logicFilter, setLogicFilter] = useState<LogicFilter | undefined>(
+    value,
+  );
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    setLogicFilter(value);
+  }, [value]);
+
+  const logicExpr = (
+    <LogicExpr
+      defaultExpr={{
+        left: '',
+        operator: '',
+        right: '',
+      }}
+      value={logicFilter}
+      onChange={val => {
+        setLogicFilter(val);
+        onChange?.(val);
+      }}
+      leftRender={renderProps => (
+        <LeftRender
+          {...renderProps}
+          fields={fields}
+          disabled={disabled}
+          enableCascadeMode={enableCascadeMode}
+        />
+      )}
+      operatorRender={renderProps => (
+        <OperatorRender
+          {...renderProps}
+          fields={fields}
+          disabled={disabled}
+          enableCascadeMode={enableCascadeMode}
+        />
+      )}
+      rightRender={renderProps => (
+        <RightRender
+          {...renderProps}
+          fields={fields}
+          disabled={disabled}
+          enableCascadeMode={enableCascadeMode}
+        />
+      )}
+      allowLogicOperators={['and']}
+      logicToggleReadonly={true}
+      maxNestingDepth={1}
+    />
+  );
+  const hasMultiExpr =
+    Array.isArray(logicFilter?.exprs) && logicFilter.exprs.length > 1;
+  const popoverContentConatienr = (
+    <div
+      className={classNames(
+        'flex flex-col py-3 gap-3 text-[13px]',
+        enableCascadeMode ? 'w-[640px]' : 'w-[620px]',
+        styles['expr-logic-editor'],
+      )}
+    >
+      <div className="flex items-center px-4">
+        <div className="font-medium">过滤器</div>
+        {tooltip ? (
+          <Tooltip theme="dark" content={tooltip}>
+            <IconCozInfoCircle className="ml-1 text-[var(--coz-fg-secondary)] hover:text-[var(--coz-fg-primary)]" />
+          </Tooltip>
+        ) : null}
+        <div
+          className="ml-auto cursor-pointer font-medium text-[var(--coz-fg-secondary)] hover:text-[rgb(var(--coze-up-brand-9))]"
+          onClick={() => {
+            setLogicFilter(undefined);
+            onChange?.(undefined);
+          }}
+        >
+          清空筛选
+        </div>
+      </div>
+      <div className={hasMultiExpr ? '' : 'pl-3 pr-2'}>
+        <div>{logicExpr}</div>
+      </div>
+      <Divider />
+      <div className="flex justify-end px-4">
+        <Button
+          color="brand"
+          onClick={() => {
+            let logicFilterData = logicFilter;
+            if (clearEmptyCondition) {
+              logicFilterData = getValidFilterFields(logicFilter);
+              setLogicFilter(logicFilterData);
+            }
+            onConfirm?.(logicFilterData);
+            setVisible(false);
+            onClose?.();
+          }}
+        >
+          应用
+        </Button>
+      </div>
+    </div>
+  );
+  const count = value?.exprs?.length ?? 0;
+  return (
+    <Popover
+      trigger="click"
+      position="bottomLeft"
+      {...popoverProps}
+      style={{ padding: 0, ...(popoverProps.style ?? {}) }}
+      visible={visible}
+      content={popoverContentConatienr}
+      onVisibleChange={newVisible => {
+        setVisible(newVisible);
+        if (!newVisible) {
+          // 关闭时放弃本次变更，恢复为上层设置的 value
+          setLogicFilter(value);
+          onClose?.();
+        }
+      }}
+    >
+      <Button icon={<IconCozFilter />} color="primary">
+        过滤器
+        {count ? (
+          <div className="flex items-center justify-center w-5 h-5 rounded-[50%] text-brand-9 bg-brand-4 ml-1 text-[13px]">
+            {count}
+          </div>
+        ) : null}
+      </Button>
+    </Popover>
+  );
+}