@cozeloop/components 0.0.2 → 0.0.3

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

@@ -0,0 +1,261 @@
+/* eslint-disable complexity */
+import { useState } from 'react';
+
+import { cloneDeep, get, isNumber, set } from 'lodash-es';
+
+import type { Expr, ExprGroup, LogicExprProps } from './types';
+import { ExprGroupRender } from './expr-group-render';
+
+function getObjectPath(path?: string, index?: number) {
+  let groupPath = path
+    ? path
+        .split('-')
+        .map(p => `childExprGroups[${p}]`)
+        .join('.')
+    : '';
+  if (isNumber(index)) {
+    groupPath = `${groupPath}${groupPath ? '.' : ''}exprs[${index}]`;
+  }
+  return groupPath;
+}
+
+function splitPath(path: string): [string, string] {
+  const last = path.lastIndexOf('-');
+  if (last === -1) {
+    return ['', path];
+  }
+  return [path.substring(0, last), path.substring(last + 1)];
+}
+
+// eslint-disable-next-line @coze-arch/max-line-per-function
+export function LogicExpr<L = string, O = string, R = string>({
+  defaultExpr,
+  value,
+  onChange: _onChange,
+  ...restProps
+}: LogicExprProps<L, O, R>) {
+  const [singleTag, setSingleTag] = useState(value?.exprs?.length === 1);
+
+  // 通用特化逻辑处理
+  const onChange = (exprGroup?: ExprGroup<L, O, R>) => {
+    let processedExprGroup = exprGroup;
+    if (
+      (!exprGroup?.childExprGroups || exprGroup.childExprGroups.length === 0) &&
+      exprGroup?.exprs?.length === 1
+    ) {
+      processedExprGroup = {
+        exprs: exprGroup.exprs,
+      };
+    }
+    _onChange?.(processedExprGroup);
+  };
+
+  const onExprGroupChange = (exprGroup: ExprGroup<L, O, R>, path: string) => {
+    const objectPath = getObjectPath(path);
+    if (!value || !objectPath) {
+      onChange(exprGroup);
+      return;
+    }
+    const newValue = set(cloneDeep(value), objectPath, exprGroup);
+
+    onChange(newValue);
+  };
+
+  const onExprChange = (expr: Expr<L, O, R>, path: string, index: number) => {
+    if (!value) {
+      setSingleTag(true);
+      onChange({
+        exprs: [expr],
+      });
+      return;
+    }
+    const objectPath = getObjectPath(path, index);
+    const newValue = set(cloneDeep(value), objectPath, expr);
+
+    onChange(newValue);
+  };
+
+  const onAddExprItem = (path: string) => {
+    const clonedDefaultExpr = cloneDeep(defaultExpr);
+    if (!value) {
+      onExprChange(clonedDefaultExpr, path, 0);
+      return;
+    }
+
+    const clonedGroupValue = cloneDeep(value);
+    const targetGroupValue: ExprGroup<L, O, R> = path
+      ? get(clonedGroupValue, getObjectPath(path))
+      : clonedGroupValue;
+
+    if (targetGroupValue.exprs?.length) {
+      targetGroupValue.exprs.push(clonedDefaultExpr);
+    } else {
+      targetGroupValue.exprs = [clonedDefaultExpr];
+    }
+
+    onExprGroupChange(targetGroupValue, path);
+  };
+
+  const onAddExprGroup = (path: string) => {
+    const clonedDefaultExpr = cloneDeep(defaultExpr);
+    const emptyGroup: ExprGroup<L, O, R> = {
+      exprs: [clonedDefaultExpr],
+    };
+    if (!value) {
+      setSingleTag(false);
+      onExprGroupChange(emptyGroup, path);
+      return;
+    }
+
+    const clonedGroupValue = cloneDeep(value);
+    const targetGroupValue: ExprGroup<L, O, R> = path
+      ? get(clonedGroupValue, getObjectPath(path))
+      : clonedGroupValue;
+
+    if (targetGroupValue.childExprGroups?.length) {
+      targetGroupValue.childExprGroups.push(emptyGroup);
+    } else {
+      targetGroupValue.childExprGroups = [emptyGroup];
+    }
+
+    onExprGroupChange(targetGroupValue, path);
+  };
+
+  const findDelPath = (path: string): string => {
+    const [parentPath] = splitPath(path);
+
+    if (!parentPath) {
+      return path;
+    }
+
+    const parentGroup: ExprGroup<L, O, R> = get(
+      value,
+      getObjectPath(parentPath),
+    );
+
+    const needDeleteParent =
+      (parentGroup.childExprGroups?.length || 0) +
+        (parentGroup.exprs?.length || 0) <=
+      1;
+
+    if (needDeleteParent) {
+      return findDelPath(parentPath);
+    }
+
+    return path;
+  };
+
+  const onDeleteExprGroup = (path: string) => {
+    if (!value) {
+      return;
+    }
+
+    const clonedValue = cloneDeep(value);
+
+    const baseDelPath = findDelPath(path);
+
+    const [parentPath, selfPath] = splitPath(baseDelPath);
+
+    if (!baseDelPath) {
+      onChange(undefined);
+      return;
+    }
+
+    if (!parentPath) {
+      const needDeleteRoot =
+        (clonedValue.childExprGroups?.length || 0) +
+          (clonedValue.exprs?.length || 0) <=
+        1;
+
+      if (needDeleteRoot) {
+        onChange(undefined);
+        return;
+      }
+    }
+
+    const parentGroup: ExprGroup<L, O, R> = parentPath
+      ? get(clonedValue, getObjectPath(parentPath))
+      : clonedValue;
+
+    const selfPathIndex = parseInt(selfPath, 10);
+
+    parentGroup.childExprGroups?.splice(selfPathIndex, 1);
+
+    if (
+      parentGroup.childExprGroups?.length &&
+      parentGroup.childExprGroups.length === 1 &&
+      (!parentGroup.exprs || parentGroup.exprs.length === 0)
+    ) {
+      if (parentPath) {
+        const newValue = set(
+          clonedValue,
+          getObjectPath(parentPath),
+          parentGroup.childExprGroups[0],
+        );
+        onChange(newValue);
+      } else {
+        onChange(parentGroup.childExprGroups[0]);
+      }
+      return;
+    }
+
+    onChange(clonedValue);
+  };
+
+  const onDeleteExpr = (path: string, index: number) => {
+    if (!value) {
+      return;
+    }
+
+    const clonedValue = cloneDeep(value);
+
+    const parentGroup: ExprGroup<L, O, R> = path
+      ? get(clonedValue, getObjectPath(path))
+      : clonedValue;
+
+    const needDeleteParent =
+      (parentGroup.childExprGroups?.length || 0) +
+        (parentGroup.exprs?.length || 0) <=
+      1;
+
+    if (needDeleteParent) {
+      onDeleteExprGroup(path);
+      restProps.onDeleteExpr?.(parentGroup?.exprs?.[index]?.left as L);
+    } else {
+      parentGroup?.exprs?.splice(index, 1);
+      if (
+        parentGroup.childExprGroups?.length &&
+        parentGroup.childExprGroups.length === 1 &&
+        (!parentGroup.exprs || parentGroup.exprs.length === 0)
+      ) {
+        if (path) {
+          const newValue = set(
+            clonedValue,
+            getObjectPath(path),
+            parentGroup.childExprGroups[0],
+          );
+          onChange(newValue);
+        } else {
+          onChange(parentGroup.childExprGroups[0]);
+        }
+        return;
+      }
+      onChange(clonedValue);
+    }
+  };
+
+  return (
+    <ExprGroupRender<L, O, R>
+      path=""
+      singleTag={singleTag}
+      value={value}
+      {...restProps}
+      onExprChange={onExprChange}
+      onExprGroupChange={onExprGroupChange}
+      onAddItem={onAddExprItem}
+      onAddGroup={onAddExprGroup}
+      onDeleteExprGroup={onDeleteExprGroup}
+      onDeleteExpr={onDeleteExpr}
+    />
+  );
+}

package/src/logic-expr/logic-not.tsx

@@ -0,0 +1,46 @@
+import { type CSSProperties } from 'react';
+
+import classNames from 'classnames';
+
+import { useI18n } from '../provider';
+
+import styles from './index.module.less';
+
+interface LogicNotProps {
+  not?: boolean;
+  readonly?: boolean;
+  onChange?: (not: boolean) => void;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export function LogicNot(props: LogicNotProps) {
+  const { not, readonly, onChange, className, style } = props;
+  const I18n = useI18n();
+  const onClick = () => {
+    if (readonly) {
+      return;
+    }
+
+    onChange?.(not ? false : true);
+  };
+
+  return (
+    <div
+      className={classNames(
+        styles['logic-not'],
+        {
+          [styles['logic-not_active']]: not,
+        },
+        className,
+      )}
+      style={style}
+      onClick={e => {
+        e.stopPropagation();
+        onClick();
+      }}
+    >
+      {I18n.t('fornax_components_logic_expr_not')}
+    </div>
+  );
+}

package/src/logic-expr/logic-toggle.tsx

@@ -0,0 +1,96 @@
+import classNames from 'classnames';
+import { Select } from '@coze-arch/coze-design';
+
+import { useI18n } from '../provider';
+import type { LogicOperator } from './types';
+import { LogicNot } from './logic-not';
+import { LOGIC_OPTIONS } from './consts';
+import { ReactComponent as SelectIcon } from './assets/select.svg';
+
+import styles from './index.module.less';
+
+interface LogicToggleProps {
+  enableNot?: boolean;
+  operator?: LogicOperator;
+  not?: boolean;
+  hideLine?: boolean;
+  readonly?: boolean;
+  allowLogicOperators?: LogicOperator[];
+  onChange: (operator: LogicOperator, not: boolean) => void;
+}
+
+export function LogicToggle(props: LogicToggleProps) {
+  const {
+    operator = 'and',
+    hideLine,
+    enableNot,
+    not = false,
+    readonly,
+    allowLogicOperators,
+    onChange,
+  } = props;
+
+  const I18n = useI18n();
+
+  const filteredLogicOptions = allowLogicOperators
+    ? LOGIC_OPTIONS.filter(op =>
+        allowLogicOperators.includes(op.value as LogicOperator),
+      )
+    : LOGIC_OPTIONS;
+
+  const label =
+    (filteredLogicOptions.find(op => op.value === operator)?.label as string) ||
+    '-';
+
+  return (
+    <div
+      className={classNames(styles['logic-toggle'], {
+        [styles['logic-toggle_and']]: operator === 'and',
+        [styles['logic-toggle_or']]: operator === 'or',
+        [styles['logic-toggle_hide-line']]: hideLine,
+      })}
+    >
+      {readonly ? (
+        <div className={styles['logic-toggle-tag']}>{I18n.t(label)}</div>
+      ) : (
+        <Select
+          size="small"
+          showClear={false}
+          dropdownClassName={styles['logic-toggle-select-dropdown']}
+          triggerRender={() => (
+            <div
+              className={classNames(
+                styles['logic-toggle-tag'],
+                styles['logic-toggle-tag_edit'],
+              )}
+            >
+              {enableNot ? (
+                <LogicNot
+                  not={not}
+                  readonly={readonly}
+                  className={styles['logic-toggle-tag-not']}
+                  onChange={val => {
+                    onChange(operator, val);
+                  }}
+                />
+              ) : null}
+              {I18n.t(label)}
+              <SelectIcon className={styles['logic-toggle-tag-icon']} />
+            </div>
+          )}
+          optionList={filteredLogicOptions.map(item => ({
+            ...item,
+            label: I18n.t((item.label ?? '') as string),
+          }))}
+          value={operator}
+          onChange={val => {
+            if (!val) {
+              return;
+            }
+            onChange(val as LogicOperator, not);
+          }}
+        />
+      )}
+    </div>
+  );
+}

package/src/logic-expr/types.ts

@@ -0,0 +1,95 @@
+import { type CSSProperties, type ReactNode } from 'react';
+
+export type LogicOperator = 'and' | 'or';
+
+export interface Expr<L = string, O = string, R = string> {
+  left: L;
+  operator: O;
+  right: R;
+  not?: boolean;
+  disableDeletion?: boolean;
+}
+
+export interface ExprGroup<L = string, O = string, R = string> {
+  logicOperator?: LogicOperator;
+  not?: boolean;
+  disableDeletion?: boolean;
+  exprs?: Expr<L, O, R>[];
+  childExprGroups?: ExprGroup<L, O, R>[];
+}
+
+export interface OperatorOption {
+  label: ReactNode | string;
+  value: string | number;
+}
+
+interface BaseRenderProps<L, O, R> {
+  expr: Expr<L, O, R>;
+  readonly?: boolean;
+  size?: 'small' | 'large' | 'default';
+  onExprChange?: (expr: Partial<Expr<L, O, R>>) => void;
+}
+
+export interface LeftRenderProps<L, O, R> extends BaseRenderProps<L, O, R> {
+  onChange?: (val: L) => void;
+}
+
+export interface RightRenderProps<L, O, R> extends BaseRenderProps<L, O, R> {
+  onChange?: (val: R) => void;
+}
+
+export interface OperatorRenderProps<L, O, R> extends BaseRenderProps<L, O, R> {
+  onChange?: (val: O) => void;
+}
+
+interface Props<L, O, R> {
+  enableNot?: boolean;
+  readonly?: boolean;
+  leftRender?: (props: LeftRenderProps<L, O, R>) => ReactNode;
+  operatorRender?:
+    | ((props: OperatorRenderProps<L, O, R>) => ReactNode)
+    | OperatorOption[];
+  rightRender?: (props: RightRenderProps<L, O, R>) => ReactNode;
+  errorMsgRender?: (props: RightRenderProps<L, O, R>) => ReactNode;
+  // maxExpressions?: number;
+  // maxExpressionGroups?: number;
+  // maxExpressionsPerGroup?: number;
+  elementSize?: 'small' | 'large' | 'default';
+  className?: string;
+  style?: CSSProperties;
+}
+
+export interface LogicExprProps<L, O, R> extends Props<L, O, R> {
+  value?: ExprGroup<L, O, R>;
+  defaultExpr: Expr<L, O, R>;
+  allowLogicOperators?: LogicOperator[];
+  maxNestingDepth?: number;
+  exprGroupRenderContentItemsClassName?: string;
+  logicToggleReadonly?: boolean;
+  onChange?: (exprGroup?: ExprGroup<L, O, R>) => void;
+  onDeleteExpr?: (key: L) => void;
+}
+
+export interface ExprGroupRenderProps<L, O, R> extends Props<L, O, R> {
+  value?: ExprGroup<L, O, R>;
+  singleTag?: boolean;
+  path: string;
+  allowLogicOperators?: LogicOperator[];
+  maxNestingDepth?: number;
+  exprGroupRenderContentItemsClassName?: string;
+  logicToggleReadonly?: boolean;
+  onExprChange?: (expr: Expr<L, O, R>, path: string, index: number) => void;
+  onExprGroupChange?: (exprGroup: ExprGroup<L, O, R>, path: string) => void;
+  onAddItem?: (path: string) => void;
+  onAddGroup?: (path: string) => void;
+  onDeleteExpr?: (path: string, index: number) => void;
+  onDeleteExprGroup?: (path: string) => void;
+}
+
+export interface ExprRenderProps<L, O, R> extends Props<L, O, R> {
+  value: Expr<L, O, R>;
+  path: string;
+  onChange?: (expr: Expr<L, O, R>, path: string) => void;
+  onDelete?: (path: string) => void;
+  renderTool?: () => React.JSX.Element;
+}

package/src/loop-radio-group/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+import {
+  type RadioGroupProps,
+  RadioGroup as SemiRadioGroup,
+} from '@coze-arch/coze-design';
+
+export function LoopRadioGroup({ className, ...props }: RadioGroupProps) {
+  return (
+    <SemiRadioGroup
+      className={classNames('!bg-semi-fill-0 !p-0', className)}
+      type="button"
+      {...props}
+    />
+  );
+}

package/src/multi-part-editor/components/image-item-renderer.tsx

@@ -0,0 +1,134 @@
+/* eslint-disable @coze-arch/use-error-in-catch */
+/* eslint-disable complexity */
+import React, { useState } from 'react';
+
+import classNames from 'classnames';
+import { StorageProvider } from '@cozeloop/api-schema/data';
+import {
+  IconCozCross,
+  IconCozEye,
+  IconCozImageBroken,
+  IconCozRefresh,
+} from '@coze-arch/coze-design/icons';
+import { Image, ImagePreview, Loading } from '@coze-arch/coze-design';
+
+import { ImageStatus, type MultipartItem } from '../type';
+
+interface ImageItemRendererProps {
+  className?: string;
+  style?: React.CSSProperties;
+  spaceID?: Int64;
+  item: MultipartItem;
+  readonly?: boolean;
+  onRemove: () => void;
+  onChange: (item: MultipartItem) => void;
+  uploadFile?: (params: unknown) => Promise<string>;
+}
+
+export const ImageItemRenderer: React.FC<ImageItemRendererProps> = ({
+  className,
+  style,
+  spaceID,
+  item,
+  onRemove,
+  onChange,
+  uploadFile,
+  readonly,
+}) => {
+  const [visible, setVisible] = useState(false);
+  const [fileLoadError, setFileLoadError] = useState(false);
+  const status = item?.sourceImage?.status;
+  const uri = item?.image?.uri;
+  const url = item?.image?.thumb_url || item?.image?.url;
+  const isError = status === ImageStatus.Error;
+  const file = item?.sourceImage?.file as File;
+  const retryUpload = async () => {
+    try {
+      onChange({
+        ...item,
+        sourceImage: {
+          ...item.sourceImage,
+          status: ImageStatus.Loading,
+        },
+      });
+      const newUri = await uploadFile?.({
+        file,
+        fileType: 'image',
+        spaceID,
+      });
+      onChange({
+        ...item,
+        sourceImage: {
+          ...item.sourceImage,
+          status: ImageStatus.Success,
+        },
+        image: {
+          ...item.image,
+          uri: newUri,
+          storage_provider: StorageProvider.ImageX,
+        },
+      });
+    } catch (error) {
+      onChange({
+        ...item,
+        sourceImage: {
+          ...item.sourceImage,
+          status: ImageStatus.Error,
+        },
+      });
+    }
+  };
+
+  return (
+    <div className="flex flex-col">
+      <div
+        className={classNames('w-[64px] h-[64px] relative group', className)}
+        style={style}
+      >
+        <ImagePreview
+          src={url}
+          visible={visible}
+          onVisibleChange={setVisible}
+        />
+        <Image
+          src={url}
+          className="w-full h-full rounded-[6px] border border-solid coz-stroke-plus"
+          imgStyle={{ objectFit: 'contain', width: '100%', height: '100%' }}
+          fallback={<IconCozImageBroken className="text-[24px]" />}
+          onError={() => setFileLoadError(true)}
+        />
+        {status !== ImageStatus.Loading && (
+          <div
+            className={`absolute inset-0 flex gap-3 items-center rounded-[6px] justify-center coz-mg-mask ${isError ? 'visible' : 'invisible'}  group-hover:visible`}
+          >
+            {isError && !readonly && file ? (
+              <IconCozRefresh
+                className="text-white w-[16px] h-[16px] cursor-pointer"
+                onClick={retryUpload}
+              />
+            ) : null}
+            {(uri || url) && !fileLoadError ? (
+              <IconCozEye
+                className="text-white w-[16px] h-[16px] cursor-pointer"
+                onClick={() => setVisible(true)}
+              />
+            ) : null}
+            {readonly ? null : (
+              <div className="p-[2px] text-white cursor-pointer absolute right-[-4px] top-[-4px] z-10 bg-[var(--coz-fg-secondary)] rounded-[16px] flex items-end justify-center">
+                <IconCozCross onClick={onRemove} className="text-[12px]" />
+              </div>
+            )}
+          </div>
+        )}
+        {status === ImageStatus.Loading && (
+          <div className="absolute inset-0 flex items-center rounded-[6px] justify-center bg-[rgba(0,0,0,0.4)] z-10">
+            <Loading loading color="blue" />
+          </div>
+        )}
+      </div>
+      {status === ImageStatus.Error && (
+        <div className="text-sm text-red-500">上传失败</div>
+      )}
+    </div>
+  );
+};

package/src/multi-part-editor/components/index.module.less

@@ -0,0 +1,21 @@
+.video-preview-modal{
+  :global{
+    .semi-modal-content{
+      padding-bottom:  0 !important;
+      padding-top: 8px !important;
+      gap:6px !important;
+    }
+    .semi-modal-body{
+      padding: 6px 0 0 0 !important;
+      margin: 0 -24px !important;
+      background:  rgba(0, 0, 0);
+    }
+
+    .semi-modal-footer{
+      display: none;
+    }
+  }
+  video{
+    object-fit: contain
+  }
+}