Merge pull request #9838 from 2betop/style-condition-builder

style: 调整公式部分样式
2024-12-02 20:09:08 +08:00 · 2024-03-22 13:53:41 +08:00 · 2024-03-22 13:53:41 +08:00 · cea01379df
commit cea01379df
parent e3ed32262a fa7e285dac
8 changed files with 52 additions and 29 deletions
--- a/packages/amis-formula/src/parser.ts
+++ b/packages/amis-formula/src/parser.ts
@ -62,7 +62,7 @@ export function parse(input: string, options?: ParserOptions): ASTNode {

  function fatal() {
    throw TypeError(
-      `Unexpected token ${token!.value} in ${token!.start.line}:${
+      `Unexpected token ${token!.value || token.type} in ${token!.start.line}:${
        token!.start.column
      }`
    );
--- a/packages/amis-ui/scss/components/_condition-builder.scss
+++ b/packages/amis-ui/scss/components/_condition-builder.scss
@ -439,6 +439,7 @@
  display: flex;
  flex: 1;
  min-width: 0;
+  flex-wrap: wrap;

  > * {
    flex-shrink: 0;
@ -451,7 +452,7 @@
  vertical-align: middle;
  margin: px2rem(3px);
  flex: 1;
-  min-width: 0;
+  min-width: px2rem(100px);
 }

 .#{$ns}CBFormula {
--- a/packages/amis-ui/src/components/CodeMirror.tsx
+++ b/packages/amis-ui/src/components/CodeMirror.tsx
@ -4,6 +4,7 @@ import type CodeMirror from 'codemirror';
 import {autobind, changedEffect} from 'amis-core';
 import {resizeSensor} from 'amis-core';

+import 'codemirror/theme/idea.css';
 import 'codemirror/theme/base16-dark.css';
 // import 'codemirror/theme/base16-light.css';

--- a/packages/amis-ui/src/components/formula/CodeEditor.tsx
+++ b/packages/amis-ui/src/components/formula/CodeEditor.tsx
@ -97,7 +97,7 @@ function CodeEditor(props: CodeEditorProps, ref: any) {
      (editorTheme ??
        ((defaultTheme || '').includes('dark') ? 'dark' : 'light')) === 'dark'
        ? 'base16-dark'
-        : 'default';
+        : 'idea';
    let options: any = {
      autoFocus,
      indentUnit: 2,
--- a/packages/amis-ui/src/components/formula/Input.tsx
+++ b/packages/amis-ui/src/components/formula/Input.tsx
@ -15,7 +15,7 @@ import {

 import {FormulaEditor} from './Editor';
 import ResultBox from '../ResultBox';
-import Select from '../Select';
+import {SelectWithRemoteOptions as Select} from '../Select';
 import NumberInput from '../NumberInput';
 import DatePicker from '../DatePicker';
 import Tag from '../Tag';
@ -91,7 +91,7 @@ const FormulaInput = (props: FormulaInputProps, ref: any) => {
  } = props;
  const schemaType = inputSettings.type;
  /** 自上层共享的属性 */
-  const sharedProps = pick(props, ['disabled', 'clearable']);
+  const sharedProps = pick(props, ['disabled', 'clearable', 'data']);
  const pipInValue = useCallback(
    (value?: any) => {
      /** 数据来源可能是从 query中下发的（CRUD查询表头），导致数字或者布尔值被转为 string 格式，这里预处理一下 */
@ -118,7 +118,7 @@ const FormulaInput = (props: FormulaInputProps, ref: any) => {
        result = origin.value;
      } else if (schemaType === 'select') {
        const {
-          joinValues,
+          joinValues = true,
          extractValue,
          delimiter,
          multiple,
@ -223,7 +223,7 @@ const FormulaInput = (props: FormulaInputProps, ref: any) => {
  } else if (!isExpr && (schemaType === 'select' || schemaType === 'boolean')) {
    return (
      <Select
-        {...sharedProps}
+        {...(sharedProps as any)}
        className={cx(className, `FormulaPicker-input-${schemaType}`)}
        borderMode="none"
        multiple={schemaType === 'boolean' ? false : inputSettings.multiple}
@ -241,6 +241,7 @@ const FormulaInput = (props: FormulaInputProps, ref: any) => {
              ]
            : inputSettings.options ?? []
        }
+        source={inputSettings.source}
        value={pipInValue(value)}
        renderValueLabel={option => {
          const label = option.label?.toString() ?? '';
--- a/packages/amis-ui/src/components/formula/Picker.tsx
+++ b/packages/amis-ui/src/components/formula/Picker.tsx
@ -281,7 +281,13 @@ export class FormulaPicker extends React.Component<

      return editorValue;
    } else {
-      return value ? (mixedMode ? `\`${value}\`` : value) : '';
+      return value
+        ? mixedMode
+          ? isExpression(value)
+            ? `\`${value.replace(/`/g, '\\`')}\``
+            : JSON.stringify(value)
+          : value
+        : '';
    }
  }

@ -330,6 +336,14 @@ export class FormulaPicker extends React.Component<
    const {translate: __, inputSettings} = this.props;
    const {editorValue} = this.state;

+    let ast: any;
+    try {
+      ast = parse(editorValue, {evalMode: true, allowFilter: false});
+    } catch (error) {
+      this.setState({isError: error?.message ?? true});
+      return;
+    }
+
    if (
      inputSettings?.type &&
      ['boolean', 'number'].includes(inputSettings?.type)
@ -337,24 +351,17 @@ export class FormulaPicker extends React.Component<
      let result = editorValue;
      // const schemaType = inputSettings?.type;

-      try {
-        const ast = parse(editorValue, {evalMode: true, allowFilter: false});
-
-        if (ast.type === 'literal' || ast.type === 'string') {
-          result = ast.value ?? '';
-        }
-      } catch (error) {
-        this.setState({isError: error?.message ?? true});
-        return;
+      if (ast.type === 'literal' || ast.type === 'string') {
+        result = ast.value ?? '';
      }

      this.setState({isError: false});
      return this.confirm(result);
    }
-    return this.confirm(editorValue);
+    return this.confirm(editorValue, ast);
  }

-  confirm(value: any) {
+  confirm(value: any, ast?: any) {
    const {mixedMode} = this.props;
    const validate = this.validate(value);

@ -363,10 +370,12 @@ export class FormulaPicker extends React.Component<

      if (mixedMode && typeof value === 'string') {
        result =
-          !value.includes('$') &&
-          value[0] === '`' &&
-          value[value.length - 1] === '`'
-            ? value.substring(1, value.length - 1)
+          ast?.type === 'string'
+            ? ast.value
+            : ast?.type === 'template' &&
+              ast.body.length === 1 &&
+              ast.body[0].type === 'template_raw'
+            ? ast.body[0].value
            : `\${${value}}`;
      }

@ -518,6 +527,7 @@ export class FormulaPicker extends React.Component<
                className={cx('FormulaPicker-action', 'w-full')}
                level={level}
                size={btnSize}
+                active={!!value}
                onClick={this.handleClick}
              >
                {iconElement ? (
--- a/packages/amis-ui/src/components/formula/plugin.ts
+++ b/packages/amis-ui/src/components/formula/plugin.ts
@ -213,11 +213,18 @@ export class FormulaPlugin {
    from: CodeMirror.Position,
    to: CodeMirror.Position,
    label: string,
-    className = 'cm-func'
+    className = 'cm-func',
+    rawString?: string
  ) {
    const text = document.createElement('span');
    text.className = className;
    text.innerText = label;
+
+    if (rawString) {
+      text.setAttribute('data-tooltip', rawString);
+      text.setAttribute('data-position', 'bottom');
+    }
+
    return this.editor.markText(from, to, {
      atomic: true,
      replacedWith: text
@ -290,7 +297,8 @@ export class FormulaPlugin {
                  ch: host.end.column - 1
                },
                variable.label,
-                'cm-field'
+                'cm-field',
+                host.name
              );

              // 再标记子对象
@ -318,7 +326,8 @@ export class FormulaPlugin {
                        ch: item.end.column - 1
                      },
                      variable.label,
-                      'cm-field'
+                      'cm-field',
+                      item.name
                    );
                    path += item.name + '.';
                    vars = variable.children || [];
@ -344,7 +353,8 @@ export class FormulaPlugin {
                ch: ast.end.column - 1
              },
              variable.label,
-              'cm-field'
+              'cm-field',
+              ast.name
            );
          }
          return false;
--- a/packages/amis/tests/renderers/Form/snapshots/inputFormula.test.tsx.snap
+++ b/packages/amis/tests/renderers/Form/snapshots/inputFormula.test.tsx.snap
@ -197,7 +197,7 @@ exports[`Renderer:input-formula button 1`] = `
                    class="cxd-FormulaPicker cxd-FormulaPicker--text cxd-Form-control"
                  >
                    <button
-                      class="cxd-Button cxd-Button--default cxd-Button--size-default cxd-FormulaPicker-action w-full"
+                      class="cxd-Button cxd-Button--default cxd-Button--size-default is-active cxd-FormulaPicker-action w-full"
                      type="button"
                    >
                      <span
@ -438,7 +438,7 @@ exports[`Renderer:input-formula input-group 1`] = `
                        style="position: relative;"
                      >
                        <div
-                          class="CodeMirror cm-s-default"
+                          class="CodeMirror cm-s-idea"
                          translate="no"
                        >
                          <div