@cozeloop/components 0.0.3 → 0.0.4

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

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

@@ -1,100 +0,0 @@
-import { Cascader, Select } from '@coze-arch/coze-design';
-
-import { type LeftRenderProps } from '../logic-expr';
-import { findFieldByPath } from './utils';
-import {
-  dataTypeList,
-  type LogicOperation,
-  type RenderProps,
-  type LogicField,
-  type LogicFilterLeft,
-} from './logic-types';
-
-function fieldsToOptions(fields: LogicField[]) {
-  return fields.map(field => ({
-    label: field.title,
-    value: field.name,
-    children: field.children?.length
-      ? fieldsToOptions(field.children)
-      : undefined,
-  }));
-}
-
-export default function LeftRender(
-  props: LeftRenderProps<LogicFilterLeft, string, string | number | undefined> &
-    RenderProps,
-) {
-  const { expr, onExprChange, fields, disabled, enableCascadeMode } = props;
-  if (enableCascadeMode) {
-    return (
-      <div className="w-56">
-        <Cascader
-          placeholder="请选择"
-          value={expr.left}
-          className="w-full"
-          disabled={disabled}
-          treeData={fieldsToOptions(fields)}
-          onChange={cascadeVal => {
-            if (!Array.isArray(cascadeVal)) {
-              return;
-            }
-            const fieldPaths = cascadeVal as string[];
-            const field = findFieldByPath(fields, fieldPaths);
-            const { disabledOperations = [], customOperations } = field ?? {};
-            const dataType = dataTypeList.find(
-              item => item.type === field?.type,
-            );
-            let operations = dataType?.operations ?? [];
-            if (Array.isArray(customOperations)) {
-              operations = customOperations;
-            } else if (disabledOperations.length > 0) {
-              operations = operations.filter(
-                item => !disabledOperations.includes(item.value),
-              );
-            }
-            onExprChange?.({
-              left: [...fieldPaths],
-              operator: operations?.find(e => e.value === expr.operator)
-                ? expr.operator
-                : operations?.[0]?.value,
-              right: undefined,
-            });
-          }}
-        />
-      </div>
-    );
-  }
-  return (
-    <div className="w-40">
-      <Select
-        placeholder="请选择"
-        value={expr.left}
-        className="w-full"
-        disabled={disabled}
-        filter={true}
-        optionList={fieldsToOptions(fields)}
-        onChange={val => {
-          const field = fields.find(item => item.name === val);
-          const { disabledOperations = [] } = field ?? {};
-          const dataType = dataTypeList.find(item => item.type === field?.type);
-          let operations = (field?.operatorProps?.operations ??
-            dataType?.operations ??
-            []) as LogicOperation[];
-
-          if (disabledOperations.length > 0) {
-            operations = operations.filter(
-              item => !disabledOperations.includes(item.value),
-            );
-          }
-          onExprChange?.({
-            left: val as string | undefined,
-            operator: operations?.find(e => e.value === expr.operator)
-              ? expr.operator
-              : operations?.[0]?.value,
-            right: undefined,
-          });
-        }}
-      />
-    </div>
-  );
-}

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

@@ -1,54 +0,0 @@
-import { Select } from '@coze-arch/coze-design';
-
-import { type OperatorRenderProps } from '../logic-expr';
-import { findFieldByPath } from './utils';
-import {
-  dataTypeList,
-  type LogicOperation,
-  type LogicFilterLeft,
-  type RenderProps,
-} from './logic-types';
-
-export default function OperatorRender(
-  props: OperatorRenderProps<
-    LogicFilterLeft,
-    string,
-    string | number | undefined
-  > &
-    RenderProps,
-) {
-  const { expr, onExprChange, fields, disabled = false } = props;
-  const field = findFieldByPath(fields, expr.left);
-  const dataType = dataTypeList.find(item => item.type === field?.type);
-  if (!field) {
-    return null;
-  }
-  const { disabledOperations = [], customOperations } = field;
-  let options = (field.operatorProps?.operations ??
-    dataType?.operations ??
-    []) as LogicOperation[];
-
-  if (Array.isArray(customOperations)) {
-    options = customOperations;
-  } else if (disabledOperations.length > 0) {
-    options = options.filter(item => !disabledOperations.includes(item.value));
-  }
-
-  return (
-    <div className="w-24">
-      <Select
-        placeholder="操作符"
-        value={expr.operator}
-        style={{ width: '100%' }}
-        disabled={disabled}
-        optionList={options}
-        onChange={val => {
-          onExprChange?.({
-            ...expr,
-            operator: val as string | undefined,
-          });
-        }}
-      />
-    </div>
-  );
-}

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

@@ -1,51 +0,0 @@
-import { type Expr, type RightRenderProps } from '../logic-expr';
-import { findFieldByPath } from './utils';
-import {
-  dataTypeList,
-  type LogicFilterLeft,
-  type RenderProps,
-} from './logic-types';
-
-export default function RightRender(
-  props: RightRenderProps<
-    LogicFilterLeft,
-    string,
-    string | number | undefined
-  > &
-    RenderProps,
-) {
-  const { expr, onExprChange, fields, disabled = false } = props;
-  const field = findFieldByPath(fields, expr.left);
-  if (!field) {
-    return null;
-  }
-  if (expr.operator === 'is-empty' || expr.operator === 'is-not-empty') {
-    return null;
-  }
-
-  const Setter =
-    field?.setter ||
-    dataTypeList.find(dataType => dataType.type === field.type)?.setter;
-
-  if (!Setter) {
-    return null;
-  }
-
-  return (
-    <div className="w-48 grow overflow-hidden">
-      <Setter
-        {...(field.setterProps ?? {})}
-        expr={expr as Expr<string, string, string>}
-        field={field}
-        disabled={disabled}
-        value={expr.right as string}
-        onChange={val => {
-          onExprChange?.({
-            ...expr,
-            right: val as string | undefined,
-          });
-        }}
-      />
-    </div>
-  );
-}