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

import { onFieldInputValueChange, onFormInitialValuesChange } from '@formily/core';
import { connect, mapReadPretty, observer, useForm, useFormEffects } from '@formily/react';
import { Tag } from 'antd';
import React, { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';

import { useCollectionManager, useCompile, useRecord, Variable } from '@nocobase/client';

import { NAMESPACE } from '../locale';
import { getCollectionFieldOptions } from '../variable';

const InternalExpression = observer(
  (props: any) => {
    const { onChange } = props;
    const { values } = useForm();
    const [collection, setCollection] = useState(values?.sourceCollection);
    const compile = useCompile();
    const { getCollectionFields } = useCollectionManager();

    useFormEffects(() => {
      onFormInitialValuesChange((form) => {
        setCollection(form.values.sourceCollection);
      });
      onFieldInputValueChange('sourceCollection', (f) => {
        setCollection(f.value);
        onChange(null);
      });
    });

    const options = getCollectionFieldOptions({ collection, compile, getCollectionFields });

    return <Variable.TextArea {...props} scope={options} />;
  },
  { displayName: 'InternalExpression' },
);

function Result(props) {
  const { t } = useTranslation();
  const values = useRecord();
  const compile = useCompile();
  const { getCollectionFields } = useCollectionManager();
  const options = useMemo(
    () => getCollectionFieldOptions({ collection: values.sourceCollection, compile, getCollectionFields }),
    [values.sourceCollection, values.sourceCollection],
  );
  return props.value ? (
    <Variable.TextArea {...props} scope={options} />
  ) : (
    <Tag>{t('Unconfigured', { ns: NAMESPACE })}</Tag>
  );
}

export const DynamicExpression = connect(InternalExpression, mapReadPretty(Result));