@cozeloop/components 0.0.3 → 0.0.4-beta-1770694681364

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

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

@@ -1,226 +0,0 @@
-import { useState } from 'react';
-
-import classNames from 'classnames';
-import { IconCozCross } from '@coze-arch/coze-design/icons';
-import { IconButton, Input, Select, Tooltip } from '@coze-arch/coze-design';
-
-import { useI18n } from '../provider';
-import type {
-  Expr,
-  ExprRenderProps,
-  LeftRenderProps,
-  OperatorRenderProps,
-  RightRenderProps,
-} from './types';
-import { LogicNot } from './logic-not';
-
-import styles from './index.module.less';
-
-function defaultLeftRender<L, O, R>({
-  expr,
-  readonly,
-  size,
-  onChange,
-  onExprChange,
-}: LeftRenderProps<L, O, R>) {
-  const onInputChange = (val: L) => {
-    onExprChange ? onExprChange({ ...expr, left: val }) : onChange?.(val);
-  };
-
-  return !readonly ? (
-    <Input
-      size={size}
-      value={`${expr.left}`}
-      onChange={value => {
-        onInputChange(value as L);
-      }}
-    />
-  ) : (
-    <div className={styles['expr-render-text']}>{expr.left as string}</div>
-  );
-}
-
-function defaultOperatorRender<L, O, R>({
-  expr,
-  readonly,
-  size,
-  onChange,
-  onExprChange,
-}: OperatorRenderProps<L, O, R>) {
-  const onInputChange = (val: O) => {
-    onExprChange ? onExprChange({ ...expr, operator: val }) : onChange?.(val);
-  };
-
-  return !readonly ? (
-    <Input
-      size={size}
-      value={`${expr.operator}`}
-      onChange={value => {
-        onInputChange(value as O);
-      }}
-    />
-  ) : (
-    <div className={styles['expr-render-text']} style={{ margin: '0 8px' }}>
-      {expr.operator as string}
-    </div>
-  );
-}
-
-function defaultRightRender<L, O, R>({
-  expr,
-  readonly,
-  size,
-  onChange,
-  onExprChange,
-}: RightRenderProps<L, O, R>) {
-  const onInputChange = (val: R) => {
-    onExprChange ? onExprChange({ ...expr, right: val }) : onChange?.(val);
-  };
-
-  return !readonly ? (
-    <Input
-      size={size}
-      value={`${expr.right}`}
-      onChange={value => {
-        onInputChange(value as R);
-      }}
-    />
-  ) : (
-    <div className={styles['expr-render-text']}>{expr.right as string}</div>
-  );
-}
-
-export const ExprRender = <L, O, R>({
-  value,
-  readonly,
-  enableNot,
-  className,
-  style,
-  path,
-  leftRender,
-  operatorRender,
-  rightRender,
-  elementSize = 'default',
-  onChange,
-  onDelete,
-  renderTool,
-  errorMsgRender,
-}: ExprRenderProps<L, O, R>) => {
-  const isEdit = !readonly;
-  const I18n = useI18n();
-
-  const [deleteButtonHover, setDeleteButtonHover] = useState(false);
-
-  const patchExpr = (expr: Partial<Expr<L, O, R>>) => {
-    const newExpr = { ...value, ...expr };
-
-    onChange?.(newExpr, path);
-  };
-
-  const renderLeft = () =>
-    (leftRender || defaultLeftRender)({
-      expr: value,
-      readonly,
-      size: elementSize,
-      onChange: left => patchExpr({ left }),
-      onExprChange: patchExpr,
-    });
-
-  const renderRight = () =>
-    (rightRender || defaultRightRender)({
-      expr: value,
-      readonly,
-      size: elementSize,
-      onChange: right => patchExpr({ right }),
-      onExprChange: patchExpr,
-    });
-
-  const renderOperator = () => {
-    if (Array.isArray(operatorRender)) {
-      return (
-        <Select
-          style={{ width: '100%', minWidth: 50 }}
-          size={elementSize}
-          value={`${value.operator}`}
-          disabled={readonly}
-          onChange={v => patchExpr({ operator: v as O })}
-          optionList={operatorRender}
-        />
-      );
-    }
-
-    return (operatorRender || defaultOperatorRender)({
-      expr: value,
-      readonly,
-      size: elementSize,
-      onChange: operator => patchExpr({ operator }),
-      onExprChange: patchExpr,
-    });
-  };
-
-  const renderErrorMsg = () => {
-    if (errorMsgRender) {
-      return errorMsgRender({
-        expr: value,
-      });
-    }
-  };
-  return (
-    <>
-      <div
-        className={classNames(
-          styles['expr-render-expr-item'],
-          {
-            [styles['expr-render-expr-item_delete']]: deleteButtonHover,
-          },
-          className,
-        )}
-        style={style}
-      >
-        {enableNot ? (
-          <LogicNot
-            not={value.not}
-            readonly={readonly}
-            onChange={not => patchExpr({ not })}
-          />
-        ) : null}
-        <div className="flex gap-x-2 w-full flex-col">
-          <div className="flex gap-x-2 w-full items-center">
-            {renderLeft()}
-            {renderOperator()}
-            {renderRight()}
-            {isEdit ? (
-              <Tooltip
-                theme="dark"
-                content={I18n.t('fornax_components_logic_expr_delete_filter')}
-              >
-                <IconButton
-                  className={classNames(
-                    'expr-render-del-btn',
-                    styles['expr-render-del-btn'],
-                  )}
-                  size="small"
-                  color="secondary"
-                  disabled={value.disableDeletion}
-                  icon={<IconCozCross />}
-                  onClick={() => {
-                    setDeleteButtonHover(false);
-                    onDelete?.(path);
-                  }}
-                  onMouseEnter={() => {
-                    setDeleteButtonHover(true);
-                  }}
-                  onMouseLeave={() => {
-                    setDeleteButtonHover(false);
-                  }}
-                />
-              </Tooltip>
-            ) : null}
-          </div>
-          {renderErrorMsg()}
-        </div>
-      </div>
-      {path ? null : renderTool?.()}
-    </>
-  );
-};

package/src/logic-expr/index.module.less

@@ -1,252 +0,0 @@
-/* stylelint-disable no-descending-specificity */
-/* stylelint-disable selector-class-pattern */
-.logic-not {
-  cursor: pointer;
-  user-select: none;
-
-  padding: 1px 2px;
-
-  font-size: 12px;
-  line-height: 14px;
-  color: var(--semi-color-white);
-
-  opacity: 0.35;
-  background-color: rgba(var(--semi-grey-2), 1);
-  border-radius: 2px;
-}
-
-.logic-not_active {
-  opacity: 1;
-  background-color: rgba(var(--semi-red-4), 1);
-}
-
-.logic-toggle {
-  position: relative;
-
-  display: flex;
-  align-items: center;
-  align-self: stretch;
-
-  margin-right: 8px;
-
-  &::before {
-    content: '';
-
-    position: absolute;
-    top: 12px;
-    left: 50%;
-
-    width: 50%;
-    height: calc(50% - 23px);
-
-    border-color: #D0D4E0;
-    border-style: solid;
-    border-width: 1px 0 0 1px;
-    border-radius: 4px 0 0;
-
-    transition: border-color 0.5s ease 0s;
-  }
-
-  &::after {
-    content: '';
-
-    position: absolute;
-    bottom: 12px;
-    left: 50%;
-
-    width: 50%;
-    height: calc(50% - 23px);
-
-    border-color: #D0D4E0;
-    border-style: solid;
-    border-width: 0 0 1px 1px;
-    border-radius: 0 0 0 4px;
-
-    transition: border-color 0.5s ease 0s;
-  }
-
-  .logic-toggle-tag {
-    z-index: 2;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    width: 32px;
-    height: 24px;
-    padding: 4px;
-
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 20px;
-    color: var(--coz-fg-secondary,#3D79F2);
-    text-align: center;
-
-    background-color: var(--coze-up-brand-10, #99BBFF4D);
-    border-radius: 12px;
-
-    transition: background-color 0.5s ease 0s;
-
-    .logic-toggle-tag-not {
-      margin-right: 4px;
-    }
-
-    .logic-toggle-tag-icon {
-      margin-left: 4px;
-      font-size: 10px;
-    }
-  }
-
-  .logic-toggle-tag_edit {
-    cursor: pointer;
-    user-select: none;
-
-    box-sizing: border-box;
-    width: auto;
-    width: 32px;
-    height: 24px;
-    padding: 4px;
-
-    white-space: nowrap;
-
-    background-color: #99BBFF4D;
-    border-radius: 6px;
-  }
-}
-
-.logic-toggle_and {
-  --border-color: rgba(var(--semi-blue-3), 1);
-  --tag-bg-color: rgba(var(--semi-blue-0), 1);
-  --tag-hover-bg-color: rgba(var(--semi-blue-1), 1);
-}
-
-.logic-toggle_or {
-  --border-color: rgba(var(--semi-orange-3), 1);
-  --tag-bg-color: rgba(var(--semi-orange-0), 1);
-  --tag-hover-bg-color: rgba(var(--semi-orange-1), 1);
-}
-
-.logic-toggle_hide-line {
-  &::before,
-  &::after {
-    display: none;
-  }
-}
-
-.logic-toggle-select-dropdown {
-  :global {
-    .semi-select-option {
-      padding: 4px 6px;
-      font-size: 12px;
-
-      .semi-select-option-icon {
-        margin-right: 4px;
-
-        .semi-icon-default {
-          font-size: 12px;
-        }
-      }
-
-    }
-  }
-}
-
-
-.expr-render-text {
-  display: inline-block;
-
-  max-width: 100%;
-
-  font-size: 12px;
-  line-height: 24px;
-  word-break: break-all;
-}
-
-.expr-render-group {
-  width: 100%;
-
-  .del-expr-group-btn {
-    margin-left: 16px;
-  }
-
-  .expr-render-group-title {
-    display: flex;
-    align-items: center;
-
-    padding: 4px 6px;
-
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 16px;
-  }
-
-  .expr-render-group-content {
-    display: flex;
-    align-items: center;
-    padding: 4px 8px;
-  }
-
-  .expr-render-expr-items {
-    flex: 1;
-
-    >div:not(:first-of-type) {
-      margin-top: 8px;
-    }
-  }
-}
-
-.expr-render-group_delete {
-  background-color: rgba(var(--semi-red-0), 1);
-}
-
-.expr-render-expr-item {
-  display: flex;
-  flex-wrap: nowrap;
-  gap: 8px;
-  align-items: center;
-
-  box-sizing: border-box;
-  padding: 0 4px;
-
-  border-radius: 4px;
-}
-
-// .expr-render-expr-item_delete {
-//   background-color: rgba(var(--semi-red-0), 1);
-// }
-
-.expr-render-del-btn {
-  height: 20px;
-
-  :global {
-    .semi-icon-default {
-      font-size: 12px;
-      color: rgba(var(--semi-grey-5), 1);
-    }
-  }
-}
-
-
-.expr-render-tool {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-
-  margin-top: 6px;
-  padding: 0 4px 4px;
-
-  .expr-render-tool-btn {
-    height: 20px;
-    padding-right: 6px;
-    padding-left: 6px;
-
-    font-size: 12px;
-    font-weight: 400;
-
-    :global {
-      .semi-icon-default {
-        font-size: 12px;
-      }
-    }
-  }
-}

package/src/logic-expr/index.ts

@@ -1,13 +0,0 @@
-export { LogicExpr } from './logic-expr';
-export type {
-  Expr,
-  ExprGroup,
-  LogicOperator,
-  LogicExprProps,
-  ExprRenderProps,
-  ExprGroupRenderProps,
-  LeftRenderProps,
-  OperatorRenderProps,
-  RightRenderProps,
-  OperatorOption,
-} from './types';