@cozeloop/components 0.0.3 → 0.0.5

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';