@cozeloop/components 0.0.3 → 0.0.4

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

package/src/logic-expr/expr-group-render.tsx

@@ -1,238 +0,0 @@
-/* eslint-disable @coze-arch/max-line-per-function */
-/* eslint-disable complexity */
-
-import { isNumber } from 'lodash-es';
-import classNames from 'classnames';
-import { IconCozPlus, IconCozPlusCircle } from '@coze-arch/coze-design/icons';
-import { Button, Divider, type ButtonProps } from '@coze-arch/coze-design';
-
-import { useI18n } from '../provider';
-import type { ExprGroup, ExprGroupRenderProps } from './types';
-import { LogicToggle } from './logic-toggle';
-import { ExprRender } from './expr-render';
-
-import styles from './index.module.less';
-
-const ToolButton = (props: ButtonProps) => (
-  <Button
-    className={styles['expr-render-tool-btn']}
-    theme="borderless"
-    type="primary"
-    size="small"
-    {...props}
-  >
-    {props.children}
-  </Button>
-);
-
-function genPath(path: string, index: number) {
-  return path ? `${path}-${index}` : `${index}`;
-}
-
-export function ExprGroupRender<L, O, R>({
-  value,
-  readonly,
-  singleTag,
-  enableNot,
-  className,
-  exprGroupRenderContentItemsClassName,
-  style,
-  path,
-  leftRender,
-  operatorRender,
-  rightRender,
-  allowLogicOperators,
-  maxNestingDepth,
-  elementSize = 'default',
-  logicToggleReadonly,
-  onExprChange,
-  onExprGroupChange,
-  onAddItem,
-  onAddGroup,
-  onDeleteExpr,
-  onDeleteExprGroup,
-  errorMsgRender,
-}: ExprGroupRenderProps<L, O, R>) {
-  const I18n = useI18n();
-  const isEdit = !readonly;
-
-  const patchExpr = (expr: Partial<ExprGroup<L, O, R>>) => {
-    if (!value) {
-      return;
-    }
-
-    const newExpr = { ...value, ...expr };
-
-    onExprGroupChange?.(newExpr, path);
-  };
-
-  const renderTool = () => {
-    if (!isEdit) {
-      return null;
-    }
-
-    const currentNestingDepth = path ? path.split('-').length + 1 : 1;
-
-    const showAddGroupButton = isNumber(maxNestingDepth)
-      ? currentNestingDepth < (maxNestingDepth as number)
-      : true;
-
-    return (
-      <div
-        className={styles['expr-render-tool']}
-        style={value ? undefined : { marginTop: 0 }}
-      >
-        <ToolButton
-          className="add-filter-btn"
-          icon={
-            <span className="text-brand-9 flex items-center justify-center text-[14px]">
-              <IconCozPlus className="w-[14px] h-[14px]" />
-            </span>
-          }
-          onClick={() => onAddItem?.(path)}
-          color="secondary"
-          type="primary"
-        >
-          <span className="text-brand-9 text-[14px] leading-[20px]">
-            {I18n.t('fornax_components_logic_expr_add_filter')}
-          </span>
-        </ToolButton>
-        {showAddGroupButton ? (
-          <>
-            <Divider layout="vertical" />
-            <ToolButton
-              icon={<IconCozPlusCircle />}
-              onClick={() => onAddGroup?.(path)}
-            >
-              {I18n.t('fornax_components_logic_expr_add_filter_group')}
-            </ToolButton>
-          </>
-        ) : null}
-      </div>
-    );
-  };
-
-  if (!value) {
-    return isEdit ? (
-      renderTool()
-    ) : (
-      <div className={styles['expr-render-text']}>-</div>
-    );
-  }
-
-  const exprItemsNumber =
-    (value.exprs?.length || 0) + (value.childExprGroups?.length || 0);
-
-  if (
-    !path &&
-    value.exprs &&
-    value.exprs.length === 1 &&
-    singleTag &&
-    (!value.childExprGroups || value.childExprGroups.length === 0)
-  ) {
-    return (
-      <>
-        <ExprRender
-          path={path}
-          value={value.exprs[0]}
-          readonly={readonly}
-          enableNot={enableNot}
-          leftRender={leftRender}
-          rightRender={rightRender}
-          errorMsgRender={errorMsgRender}
-          operatorRender={operatorRender}
-          elementSize={elementSize}
-          onChange={(itemExpr, itemPath) => {
-            onExprChange?.(itemExpr, itemPath, 0);
-          }}
-          onDelete={itemPath => {
-            onDeleteExpr?.(itemPath, 0);
-          }}
-        />
-        {renderTool()}
-      </>
-    );
-  }
-
-  return (
-    <div
-      className={classNames(
-        styles['expr-render-group'],
-        // {
-        //   [styles['expr-render-group_delete']]: deleteButtonHover,
-        // },
-        className,
-      )}
-      style={style}
-    >
-      <div className={styles['expr-render-group-content']}>
-        {exprItemsNumber >= 1 ? (
-          <LogicToggle
-            operator={value.logicOperator}
-            enableNot={enableNot}
-            not={value.not}
-            readonly={readonly || logicToggleReadonly}
-            hideLine={exprItemsNumber === 1}
-            allowLogicOperators={allowLogicOperators}
-            onChange={(v1, v2) => patchExpr({ logicOperator: v1, not: v2 })}
-          />
-        ) : null}
-        <div
-          className={classNames(
-            styles['expr-render-expr-items'],
-            exprGroupRenderContentItemsClassName,
-          )}
-        >
-          {value?.exprs?.map((expr, index) => (
-            <ExprRender
-              path={path}
-              key={index}
-              value={expr}
-              readonly={readonly}
-              enableNot={enableNot}
-              leftRender={leftRender}
-              rightRender={rightRender}
-              errorMsgRender={errorMsgRender}
-              operatorRender={operatorRender}
-              elementSize={elementSize}
-              onChange={(itemExpr, itemPath) => {
-                onExprChange?.(itemExpr, itemPath, index);
-              }}
-              onDelete={itemPath => {
-                onDeleteExpr?.(itemPath, index);
-              }}
-            />
-          ))}
-          {value?.childExprGroups?.map((subExprGroup, index) => (
-            <ExprGroupRender
-              path={genPath(path, index)}
-              key={index}
-              value={subExprGroup}
-              readonly={readonly}
-              enableNot={enableNot}
-              leftRender={leftRender}
-              rightRender={rightRender}
-              errorMsgRender={errorMsgRender}
-              operatorRender={operatorRender}
-              allowLogicOperators={allowLogicOperators}
-              maxNestingDepth={maxNestingDepth}
-              elementSize={elementSize}
-              onExprChange={onExprChange}
-              onExprGroupChange={onExprGroupChange}
-              onAddItem={onAddItem}
-              onAddGroup={onAddGroup}
-              onDeleteExpr={onDeleteExpr}
-              onDeleteExprGroup={onDeleteExprGroup}
-              className={className}
-              style={style}
-              exprGroupRenderContentItemsClassName={
-                exprGroupRenderContentItemsClassName
-              }
-            />
-          ))}
-        </div>
-      </div>
-      {renderTool()}
-    </div>
-  );
-}