@cozeloop/components 0.0.3 → 0.0.4-beta-1770694681364

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

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

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

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

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

@@ -1,6 +0,0 @@
-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' },
-];