fix(client): fix variable component read pretty mode (#1673)

packages/core/client/src/schema-component/antd/collection-select/CollectionSelect.tsx

@@ -13,7 +13,7 @@ function useOptions({ filter }: CollectionSelectProps) {
   const compile = useCompile();
   const { collections = [] } = useCollectionManager();
   const filtered = typeof filter === 'function' ? collections.filter(filter) : collections;
-  return filtered.map(item => ({
+  return filtered.filter(item => !item.hidden).map(item => ({
     label: compile(item.title),
     value: item.name,
     color: item.category?.color,

packages/core/client/src/schema-component/antd/variable/TextArea.tsx

@@ -1,11 +1,12 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react';
-import { Input, Cascader, Button } from 'antd';
+import { Input, Cascader, Button, Tag } from 'antd';
 import { useForm } from '@formily/react';
 import { cx, css } from '@emotion/css';
 import { useTranslation } from 'react-i18next';
 import * as sanitizeHTML from 'sanitize-html';
 
-import { useCompile } from '../..';
+import { EllipsisWithTooltip, useCompile } from '../..';
+import { useRecord } from '../../../record-provider';
 
 type RangeIndexes = [number, number, number, number];
 
@@ -380,6 +381,8 @@ export function TextArea(props) {
         contentEditable={!disabled}
         dangerouslySetInnerHTML={{ __html: html }}
       />
+      {!disabled
+        ? (
           <Button className={cx('x-button', css`
             position: relative;
           `)}>
@@ -435,6 +438,40 @@ export function TextArea(props) {
               )}
             />
           </Button>
+        )
+        : null
+      }
     </Input.Group>
   );
 }
+
+TextArea.ReadPretty = (props) => {
+  const { value, multiline = true, scope } = props;
+  const compile = useCompile();
+  const options = compile((typeof scope === 'function' ? scope() : scope) ?? []);
+  const keyLabelMap = useMemo(() => createOptionsValueLabelMap(options), [scope]);
+  const html = renderHTML(value ?? '', keyLabelMap);
+
+  const content = (
+    <span
+      dangerouslySetInnerHTML={{ __html: html }}
+      className={css`
+        overflow: auto;
+
+        .ant-tag {
+          display: inline;
+          line-height: 19px;
+          margin: 0 .25em;
+          padding: 2px 7px;
+          border-radius: 10px;
+        }
+      `}
+    />
+  );
+
+  return (
+    <EllipsisWithTooltip ellipsis popoverContent={content}>
+      {content}
+    </EllipsisWithTooltip>
+  );
+}

packages/core/client/src/schema-component/antd/variable/Variable.tsx

@@ -1,4 +1,4 @@
-import { connect } from '@formily/react';
+import { connect, mapReadPretty } from '@formily/react';
 
 import { Input } from "./Input";
 import { TextArea } from "./TextArea";
@@ -12,7 +12,7 @@ export function Variable() {
 
 Variable.Input = connect(Input);
 
-Variable.TextArea = connect(TextArea);
+Variable.TextArea = connect(TextArea, mapReadPretty(TextArea.ReadPretty));
 
 Variable.JSON = connect(JSONInput);
 

packages/plugins/workflow/src/client/components/DynamicExpression.tsx

@@ -1,10 +1,10 @@
-import React, { useState } from "react";
-import { onFieldInputValueChange } from '@formily/core';
-import { observer, connect, mapReadPretty, useFormEffects } from '@formily/react';
+import React, { useState, useMemo } from "react";
+import { onFieldInputValueChange, onFormInitialValuesChange } from '@formily/core';
+import { useForm, observer, connect, mapReadPretty, useFormEffects } from '@formily/react';
 import { Tag } from 'antd';
 import { useTranslation } from 'react-i18next';
 
-import { Variable } from "@nocobase/client";
+import { useRecord, Variable } from "@nocobase/client";
 
 import { NAMESPACE } from "../locale";
 import { useCollectionFieldOptions } from "../variable";
@@ -12,10 +12,14 @@ import { useCollectionFieldOptions } from "../variable";
 
 
 const InternalExpression = observer((props: any) => {
-  const { value, onChange } = props;
-  const [collection, setCollection] = useState(null);
+  const { onChange } = props;
+  const { values } = useForm();
+  const [collection, setCollection] = useState(values?.sourceCollection);
 
   useFormEffects(() => {
+    onFormInitialValuesChange(form => {
+      setCollection(form.values.sourceCollection);
+    });
     onFieldInputValueChange('sourceCollection', (f) => {
       setCollection(f.value);
       onChange(null);
@@ -26,17 +30,18 @@ const InternalExpression = observer((props: any) => {
 
   return (
     <Variable.TextArea
-      value={value}
-      onChange={onChange}
+      {...props}
       scope={options}
     />
   );
 });
 
-function Result({ value }) {
+function Result(props) {
   const { t } = useTranslation();
-  return value
-    ? <Tag color="purple">{t('Expression')}</Tag>
+  const values = useRecord();
+  const options = useMemo(() => useCollectionFieldOptions({ collection: values.sourceCollection }), [values.sourceCollection, values.sourceCollection]);
+  return props.value
+    ? <Variable.TextArea {...props} scope={options} />
     : <Tag>{t('Unconfigured', { ns: NAMESPACE })}</Tag>;
 }