@cozeloop/components 0.0.3 → 0.0.4-beta-1770694681364

package/src/input-slider/index.tsx

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

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

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

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

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

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

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

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

package/src/layout/tabs.tsx

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

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

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

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

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