@cozeloop/components 0.0.2 → 0.0.3

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

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

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

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

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

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

@@ -0,0 +1,238 @@
+import {
+  CozInputNumber,
+  DatePicker,
+  Input,
+  Select,
+  TextArea,
+} from '@coze-arch/coze-design';
+
+import { type Expr, type ExprGroup } from '../logic-expr';
+
+export interface LogicOperation {
+  label: string;
+  value: string;
+}
+
+export type LogicFilterLeft = string | string[];
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type LogicFilter = ExprGroup<LogicFilterLeft, string, any>;
+
+export interface RenderProps {
+  disabled?: boolean;
+  fields: LogicField[];
+  /** 开启级联模式，佐治会变成数组 */
+  enableCascadeMode?: boolean;
+}
+
+/** 逻辑编辑器的字段 */
+export interface LogicField {
+  /** 字段标题 */
+  title: React.ReactNode;
+  /** 字段名称 */
+  name: string;
+  /** 字段类型 */
+  type: 'string' | 'number' | 'options' | 'custom';
+  /* 自定义操作符右边的输入编辑器的属性，例如给下拉框传递optionList */
+  setterProps?: Record<string, unknown>;
+  /** 自定义操作符右边的输入编辑器 */
+  setter?: LogicSetter;
+  /** 禁用操作符列表 */
+  disabledOperations?: string[];
+  /** operator 自定义属性 */
+  operatorProps?: Record<string, unknown>;
+  /** 自定义操作符列表，会覆盖原有列表 */
+  customOperations?: LogicOperation[];
+  /** 子字段 */
+  children?: LogicField[];
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface DataTypeSetterProps<T = any> {
+  [key: string]: unknown;
+  value: T;
+  expr: Expr | undefined;
+  field: LogicField;
+  disabled: boolean;
+  onChange: (val: T) => void;
+}
+
+export type LogicSetter = (props: DataTypeSetterProps) => JSX.Element | null;
+
+export interface LogicDataType {
+  type: 'string' | 'number' | 'date' | 'options';
+  operations: LogicOperation[];
+  setter: LogicSetter;
+}
+
+export const baseOperations: LogicOperation[] = [
+  {
+    label: '包含',
+    value: 'contains',
+  },
+  {
+    label: '不包含',
+    value: 'not-contains',
+  },
+  {
+    label: '等于',
+    value: 'equals',
+  },
+  {
+    label: '不等于',
+    value: 'not-equals',
+  },
+];
+
+const stringOperations: LogicOperation[] = [
+  // 注意：字符串类型的包含不包含和选项类的包含不包含枚举值不同，需要like模式
+  {
+    label: '包含',
+    value: 'like',
+  },
+  {
+    label: '不包含',
+    value: 'not-like',
+  },
+  {
+    label: '等于',
+    value: 'equals',
+  },
+  {
+    label: '不等于',
+    value: 'not-equals',
+  },
+];
+
+const numberOperations: LogicOperation[] = [
+  {
+    label: '等于',
+    value: 'equals',
+  },
+  {
+    label: '不等于',
+    value: 'not-equals',
+  },
+  {
+    label: '大于',
+    value: 'greater-than',
+  },
+  {
+    label: '大于等于',
+    value: 'greater-than-equals',
+  },
+  {
+    label: '小于',
+    value: 'less-than',
+  },
+  {
+    label: '小于等于',
+    value: 'less-than-equals',
+  },
+];
+
+const dateOperations: LogicOperation[] = [
+  {
+    label: '等于',
+    value: 'equals',
+  },
+  {
+    label: '不等于',
+    value: 'not-equals',
+  },
+  {
+    label: '晚于',
+    value: 'greater-than',
+  },
+  {
+    label: '早于',
+    value: 'less-than',
+  },
+];
+
+const selectOperations: LogicOperation[] = [
+  {
+    label: '包含',
+    value: 'contains',
+  },
+  {
+    label: '不包含',
+    value: 'not-contains',
+  },
+];
+
+function StringSetter({
+  /** 默认为多行文本模式 */
+  textAreaMode = true,
+  ...props
+}: DataTypeSetterProps<string> & { textAreaMode?: boolean }) {
+  if (textAreaMode === false) {
+    return <Input placeholder="请输入" {...props} />;
+  }
+  return <TextArea placeholder="请输入" rows={1} {...props} />;
+}
+
+function NumberSetter(props: DataTypeSetterProps<number>) {
+  const { value, onChange, ...rest } = props;
+  return (
+    <CozInputNumber
+      placeholder="请输入"
+      {...rest}
+      className={`w-full ${(props as { className?: string }).className ?? ''}`}
+      value={value ?? ''}
+      onChange={onChange as (val: number | string) => void}
+    />
+  );
+}
+function DateSetter(props: DataTypeSetterProps<string>) {
+  const { value, onChange, ...rest } = props;
+  return (
+    <DatePicker
+      {...rest}
+      value={value}
+      onChange={val => onChange(val as string)}
+    />
+  );
+}
+
+function SelectSetter(
+  props: DataTypeSetterProps<string> & {
+    className?: string;
+    optionList?: { label: string; value: string }[];
+  },
+) {
+  const { value, onChange, optionList = [], className = '', ...rest } = props;
+  return (
+    <Select
+      placeholder="请选择"
+      {...rest}
+      className={`w-full ${className}`}
+      optionList={optionList}
+      value={value}
+      onChange={val => onChange(val as string)}
+    />
+  );
+}
+
+export const dataTypeList: LogicDataType[] = [
+  {
+    type: 'string',
+    operations: stringOperations,
+    setter: StringSetter,
+  },
+  {
+    type: 'number',
+    operations: numberOperations,
+    setter: NumberSetter as unknown as LogicSetter,
+  },
+  {
+    type: 'date',
+    operations: dateOperations,
+    setter: DateSetter,
+  },
+  {
+    type: 'options',
+    operations: selectOperations,
+    setter: SelectSetter,
+  },
+];

package/src/logic-editor/utils.ts

@@ -0,0 +1,22 @@
+import { type LogicField } from './logic-types';
+
+export function findFieldByPath(
+  fields: LogicField[],
+  fieldPaths: string | string[],
+): LogicField | undefined {
+  if (!fieldPaths) {
+    return undefined;
+  }
+  const fieldPath = Array.isArray(fieldPaths)
+    ? fieldPaths
+    : fieldPaths
+      ? [fieldPaths]
+      : [];
+  let field: LogicField | undefined;
+  let targetFields: LogicField[] = fields;
+  fieldPath?.forEach(fieldName => {
+    field = targetFields.find(item => item.name === fieldName);
+    targetFields = field?.children ?? [];
+  });
+  return field;
+}

package/src/logic-expr/assets/select.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" focusable="false" aria-hidden="true"><path d="M6.45127 8.34152L11.2475 1.86011C11.6459 1.40478 12.3542 1.40478 12.7527 1.86011L17.5489 8.34152C18.1147 8.9881 17.6555 10 16.7963 10H7.20385C6.34469 10 5.88551 8.9881 6.45127 8.34152Z" fill="currentColor"></path><path d="M17.5489 15.6585L12.7527 22.1399C12.3542 22.5952 11.6459 22.5952 11.2475 22.1399L6.45127 15.6585C5.88551 15.0119 6.34469 14 7.20385 14H16.7963C17.6555 14 18.1147 15.0119 17.5489 15.6585Z" fill="currentColor"></path></svg>

package/src/logic-expr/consts.ts

@@ -0,0 +1,6 @@
+import { type OptionProps } from '@coze-arch/coze-design';
+
+export const LOGIC_OPTIONS: OptionProps[] = [
+  { label: 'fornax_components_logic_expr_and', value: 'and' },
+  { label: 'fornax_components_logic_expr_or', value: 'or' },
+];