@cozeloop/components 0.0.1 → 0.0.3

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' },
+];