refactor(plugin-workflow): adjust full-width to auto-width (#2351)

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

@@ -28,11 +28,17 @@ export default function ({ value = 60000, onChange }) {
         gap: 0.5em;
       `}
     >
-      <InputNumber min={1} value={quantity} onChange={(v) => onChange(Math.round(v * option.value))} />
+      <InputNumber
+        min={1}
+        value={quantity}
+        onChange={(v) => onChange(Math.round(v * option.value))}
+        className="auto-width"
+      />
       <Select
         popupMatchSelectWidth={false}
         value={option.value}
         onChange={(unit) => onChange(Math.round(quantity * unit))}
+        className="auto-width"
       >
         {UnitOptions.map((item) => (
           <Select.Option key={item.value} value={item.value}>

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

@@ -18,7 +18,6 @@ export const FieldsSelect = observer(
 
     return (
       <Select
-        className="full-width"
         popupMatchSelectWidth={false}
         {...others}
         options={fields.filter(filter).map((field) => ({

packages/plugins/workflow/src/client/nodes/aggregate.tsx

@@ -1,22 +1,21 @@
-import React, { useCallback } from 'react';
-import { Cascader } from 'antd';
 import { useForm } from '@formily/react';
+import { Cascader } from 'antd';
+import React, { useCallback } from 'react';
 
 import {
+  SchemaComponentContext,
   SchemaInitializerItemOptions,
   useCollectionDataSource,
-  useCompile,
-  SchemaComponentContext,
   useCollectionManager,
+  useCompile,
 } from '@nocobase/client';
 
-import { collection, filter } from '../schemas/collection';
-import { NAMESPACE, lang } from '../locale';
-import { FilterDynamicComponent } from '../components/FilterDynamicComponent';
-import { BaseTypeSets, defaultFieldNames, nodesOptions, triggerOptions, useWorkflowVariableOptions } from '../variable';
 import { FieldsSelect } from '../components/FieldsSelect';
+import { FilterDynamicComponent } from '../components/FilterDynamicComponent';
 import { ValueBlock } from '../components/ValueBlock';
-import { useNodeContext } from '.';
+import { NAMESPACE, lang } from '../locale';
+import { collection, filter } from '../schemas/collection';
+import { BaseTypeSets, defaultFieldNames, nodesOptions, triggerOptions } from '../variable';
 
 function matchToManyField(field, appends): boolean {
   const fieldPrefix = `${field.name}.`;
@@ -163,7 +162,7 @@ export default {
                   title: `{{t("Data of collection", { ns: "${NAMESPACE}" })}}`,
                   'x-component-props': {
                     ...collection['x-component-props'],
-                    className: 'full-width',
+                    className: null,
                   },
                   'x-reactions': [
                     ...collection['x-reactions'],
@@ -200,9 +199,6 @@ export default {
                   title: `{{t("Data of associated collection", { ns: "${NAMESPACE}" })}}`,
                   'x-decorator': 'FormItem',
                   'x-component': 'AssociatedConfig',
-                  'x-component-props': {
-                    className: 'full-width',
-                  },
                   'x-reactions': [
                     {
                       dependencies: ['associated'],

packages/plugins/workflow/src/client/nodes/condition.tsx

@@ -161,6 +161,7 @@ function Calculation({ calculator, operands = [], onChange }) {
         onChange={(v) => onChange({ operands, calculator: v })}
         placeholder={lang('Calculator')}
         popupMatchSelectWidth={false}
+        className="auto-width"
       >
         {calculatorGroups
           .filter((group) => Boolean(getGroupCalculators(group.value).length))

packages/plugins/workflow/src/client/nodes/index.tsx

@@ -34,8 +34,8 @@ import manual from './manual';
 import parallel from './parallel';
 import query from './query';
 import request from './request';
-import update from './update';
 import sql from './sql';
+import update from './update';
 
 export interface Instruction {
   title: string;
@@ -447,19 +447,11 @@ export function NodeDefaultView(props) {
                           .ant-picker,
                           .ant-input-number,
                           .ant-input-affix-wrapper {
-                            &:not(.full-width) {
+                            &.auto-width {
                               width: auto;
                               min-width: 6em;
                             }
                           }
-                          .ant-input-affix-wrapper {
-                            &:not(.full-width) {
-                              .ant-input {
-                                width: auto;
-                                min-width: 6em;
-                              }
-                            }
-                          }
                         `,
                       },
                       properties: instruction.fieldset,

packages/plugins/workflow/src/client/nodes/manual/AssigneesSelect.tsx

@@ -1,6 +1,5 @@
-import { RemoteSelect } from '@nocobase/client';
+import { RemoteSelect, Variable } from '@nocobase/client';
 import React from 'react';
-import { Variable } from '@nocobase/client';
 import { useWorkflowVariableOptions } from '../../variable';
 
 export function AssigneesSelect({ multiple = false, value = [], onChange }) {
@@ -27,6 +26,7 @@ export function AssigneesSelect({ multiple = false, value = [], onChange }) {
         onChange={(v) => {
           onChange(v != null ? [v] : []);
         }}
+        className="auto-width"
       />
     </Variable.Input>
   );

packages/plugins/workflow/src/client/nodes/request.tsx

@@ -20,6 +20,7 @@ export default {
       'x-component-props': {
         showSearch: false,
         allowClear: false,
+        className: 'auto-width',
       },
       enum: [
         { label: 'GET', value: 'GET' },
@@ -39,7 +40,6 @@ export default {
       'x-component': 'Input',
       'x-component-props': {
         placeholder: 'https://www.nocobase.com',
-        className: 'full-width',
       },
     },
     headers: {
@@ -147,7 +147,6 @@ export default {
           minRows: 10,
         },
         placeholder: `{{t("Input request data", { ns: "${NAMESPACE}" })}}`,
-        className: 'full-width',
       },
       description: `{{t("Only support standard JSON data", { ns: "${NAMESPACE}" })}}`,
     },

packages/plugins/workflow/src/client/schemas/collection.ts

@@ -10,7 +10,7 @@ export const collection = {
   'x-decorator': 'FormItem',
   'x-component': 'CollectionSelect',
   'x-component-props': {
-    popupMatchSelectWidth: false,
+    className: 'auto-width',
   },
 };
 
@@ -60,7 +60,6 @@ export const appends = {
       const { values } = useForm();
       return values?.collection;
     },
-    className: 'full-width',
   },
   'x-reactions': [
     {

packages/plugins/workflow/src/client/style.tsx

@@ -220,9 +220,7 @@ const useStyles = createStyles(({ css, token }) => {
         font-weight: bold;
 
         &:not(:focus) {
-          transition:
+          transition: background-color 0.3s ease, border-color 0.3s ease;
-            background-color 0.3s ease,
-            border-color 0.3s ease;
           border-color: ${token.colorBorderBg};
           background-color: ${token.colorBgContainerDisabled};
 

packages/plugins/workflow/src/client/triggers/collection.tsx

@@ -1,4 +1,9 @@
-import { SchemaInitializerItemOptions, useCollectionDataSource, useCollectionManager, useCompile } from '@nocobase/client';
+import {
+  SchemaInitializerItemOptions,
+  useCollectionDataSource,
+  useCollectionManager,
+  useCompile,
+} from '@nocobase/client';
 import { CollectionBlockInitializer } from '../components/CollectionBlockInitializer';
 import { FieldsSelect } from '../components/FieldsSelect';
 import { NAMESPACE, lang } from '../locale';
@@ -63,9 +68,10 @@ export default {
       'x-component': 'Select',
       'x-component-props': {
         popupMatchSelectWidth: false,
-        options: collectionModeOptions,
         placeholder: `{{t("Trigger on", { ns: "${NAMESPACE}" })}}`,
+        className: 'auto-width',
       },
+      enum: collectionModeOptions,
       required: true,
       'x-reactions': [
         {
@@ -85,7 +91,6 @@ export default {
       'x-decorator': 'FormItem',
       'x-component': 'FieldsSelect',
       'x-component-props': {
-        className: 'full-width',
         mode: 'multiple',
         placeholder: '{{t("Select field")}}',
         filter(field) {

packages/plugins/workflow/src/client/triggers/index.tsx

@@ -260,7 +260,7 @@ export const TriggerConfig = () => {
                     'x-component': 'fieldset',
                     'x-component-props': {
                       className: css`
-                        .ant-select:not(.full-width) {
+                        .ant-select.auto-width {
                           width: auto;
                           min-width: 6em;
                         }