@cozeloop/components 0.0.3 → 0.0.4

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

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

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

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

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

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

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

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