@cozeloop/components 0.0.2 → 0.0.3

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

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

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

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

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