refactor(plugin-workflow): adjust full-width to auto-width (#2351)
This commit is contained in:
		
							parent
							
								
									1509893ebc
								
							
						
					
					
						commit
						baca86e46e
					
				@ -28,11 +28,17 @@ export default function ({ value = 60000, onChange }) {
 | 
				
			|||||||
        gap: 0.5em;
 | 
					        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
 | 
					      <Select
 | 
				
			||||||
        popupMatchSelectWidth={false}
 | 
					        popupMatchSelectWidth={false}
 | 
				
			||||||
        value={option.value}
 | 
					        value={option.value}
 | 
				
			||||||
        onChange={(unit) => onChange(Math.round(quantity * unit))}
 | 
					        onChange={(unit) => onChange(Math.round(quantity * unit))}
 | 
				
			||||||
 | 
					        className="auto-width"
 | 
				
			||||||
      >
 | 
					      >
 | 
				
			||||||
        {UnitOptions.map((item) => (
 | 
					        {UnitOptions.map((item) => (
 | 
				
			||||||
          <Select.Option key={item.value} value={item.value}>
 | 
					          <Select.Option key={item.value} value={item.value}>
 | 
				
			||||||
 | 
				
			|||||||
@ -18,7 +18,6 @@ export const FieldsSelect = observer(
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
    return (
 | 
					    return (
 | 
				
			||||||
      <Select
 | 
					      <Select
 | 
				
			||||||
        className="full-width"
 | 
					 | 
				
			||||||
        popupMatchSelectWidth={false}
 | 
					        popupMatchSelectWidth={false}
 | 
				
			||||||
        {...others}
 | 
					        {...others}
 | 
				
			||||||
        options={fields.filter(filter).map((field) => ({
 | 
					        options={fields.filter(filter).map((field) => ({
 | 
				
			||||||
 | 
				
			|||||||
@ -1,22 +1,21 @@
 | 
				
			|||||||
import React, { useCallback } from 'react';
 | 
					 | 
				
			||||||
import { Cascader } from 'antd';
 | 
					 | 
				
			||||||
import { useForm } from '@formily/react';
 | 
					import { useForm } from '@formily/react';
 | 
				
			||||||
 | 
					import { Cascader } from 'antd';
 | 
				
			||||||
 | 
					import React, { useCallback } from 'react';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
import {
 | 
					import {
 | 
				
			||||||
 | 
					  SchemaComponentContext,
 | 
				
			||||||
  SchemaInitializerItemOptions,
 | 
					  SchemaInitializerItemOptions,
 | 
				
			||||||
  useCollectionDataSource,
 | 
					  useCollectionDataSource,
 | 
				
			||||||
  useCompile,
 | 
					 | 
				
			||||||
  SchemaComponentContext,
 | 
					 | 
				
			||||||
  useCollectionManager,
 | 
					  useCollectionManager,
 | 
				
			||||||
 | 
					  useCompile,
 | 
				
			||||||
} from '@nocobase/client';
 | 
					} 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 { FieldsSelect } from '../components/FieldsSelect';
 | 
				
			||||||
 | 
					import { FilterDynamicComponent } from '../components/FilterDynamicComponent';
 | 
				
			||||||
import { ValueBlock } from '../components/ValueBlock';
 | 
					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 {
 | 
					function matchToManyField(field, appends): boolean {
 | 
				
			||||||
  const fieldPrefix = `${field.name}.`;
 | 
					  const fieldPrefix = `${field.name}.`;
 | 
				
			||||||
@ -163,7 +162,7 @@ export default {
 | 
				
			|||||||
                  title: `{{t("Data of collection", { ns: "${NAMESPACE}" })}}`,
 | 
					                  title: `{{t("Data of collection", { ns: "${NAMESPACE}" })}}`,
 | 
				
			||||||
                  'x-component-props': {
 | 
					                  'x-component-props': {
 | 
				
			||||||
                    ...collection['x-component-props'],
 | 
					                    ...collection['x-component-props'],
 | 
				
			||||||
                    className: 'full-width',
 | 
					                    className: null,
 | 
				
			||||||
                  },
 | 
					                  },
 | 
				
			||||||
                  'x-reactions': [
 | 
					                  'x-reactions': [
 | 
				
			||||||
                    ...collection['x-reactions'],
 | 
					                    ...collection['x-reactions'],
 | 
				
			||||||
@ -200,9 +199,6 @@ export default {
 | 
				
			|||||||
                  title: `{{t("Data of associated collection", { ns: "${NAMESPACE}" })}}`,
 | 
					                  title: `{{t("Data of associated collection", { ns: "${NAMESPACE}" })}}`,
 | 
				
			||||||
                  'x-decorator': 'FormItem',
 | 
					                  'x-decorator': 'FormItem',
 | 
				
			||||||
                  'x-component': 'AssociatedConfig',
 | 
					                  'x-component': 'AssociatedConfig',
 | 
				
			||||||
                  'x-component-props': {
 | 
					 | 
				
			||||||
                    className: 'full-width',
 | 
					 | 
				
			||||||
                  },
 | 
					 | 
				
			||||||
                  'x-reactions': [
 | 
					                  'x-reactions': [
 | 
				
			||||||
                    {
 | 
					                    {
 | 
				
			||||||
                      dependencies: ['associated'],
 | 
					                      dependencies: ['associated'],
 | 
				
			||||||
 | 
				
			|||||||
@ -161,6 +161,7 @@ function Calculation({ calculator, operands = [], onChange }) {
 | 
				
			|||||||
        onChange={(v) => onChange({ operands, calculator: v })}
 | 
					        onChange={(v) => onChange({ operands, calculator: v })}
 | 
				
			||||||
        placeholder={lang('Calculator')}
 | 
					        placeholder={lang('Calculator')}
 | 
				
			||||||
        popupMatchSelectWidth={false}
 | 
					        popupMatchSelectWidth={false}
 | 
				
			||||||
 | 
					        className="auto-width"
 | 
				
			||||||
      >
 | 
					      >
 | 
				
			||||||
        {calculatorGroups
 | 
					        {calculatorGroups
 | 
				
			||||||
          .filter((group) => Boolean(getGroupCalculators(group.value).length))
 | 
					          .filter((group) => Boolean(getGroupCalculators(group.value).length))
 | 
				
			||||||
 | 
				
			|||||||
@ -34,8 +34,8 @@ import manual from './manual';
 | 
				
			|||||||
import parallel from './parallel';
 | 
					import parallel from './parallel';
 | 
				
			||||||
import query from './query';
 | 
					import query from './query';
 | 
				
			||||||
import request from './request';
 | 
					import request from './request';
 | 
				
			||||||
import update from './update';
 | 
					 | 
				
			||||||
import sql from './sql';
 | 
					import sql from './sql';
 | 
				
			||||||
 | 
					import update from './update';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export interface Instruction {
 | 
					export interface Instruction {
 | 
				
			||||||
  title: string;
 | 
					  title: string;
 | 
				
			||||||
@ -447,19 +447,11 @@ export function NodeDefaultView(props) {
 | 
				
			|||||||
                          .ant-picker,
 | 
					                          .ant-picker,
 | 
				
			||||||
                          .ant-input-number,
 | 
					                          .ant-input-number,
 | 
				
			||||||
                          .ant-input-affix-wrapper {
 | 
					                          .ant-input-affix-wrapper {
 | 
				
			||||||
                            &:not(.full-width) {
 | 
					                            &.auto-width {
 | 
				
			||||||
                              width: auto;
 | 
					                              width: auto;
 | 
				
			||||||
                              min-width: 6em;
 | 
					                              min-width: 6em;
 | 
				
			||||||
                            }
 | 
					                            }
 | 
				
			||||||
                          }
 | 
					                          }
 | 
				
			||||||
                          .ant-input-affix-wrapper {
 | 
					 | 
				
			||||||
                            &:not(.full-width) {
 | 
					 | 
				
			||||||
                              .ant-input {
 | 
					 | 
				
			||||||
                                width: auto;
 | 
					 | 
				
			||||||
                                min-width: 6em;
 | 
					 | 
				
			||||||
                              }
 | 
					 | 
				
			||||||
                            }
 | 
					 | 
				
			||||||
                          }
 | 
					 | 
				
			||||||
                        `,
 | 
					                        `,
 | 
				
			||||||
                      },
 | 
					                      },
 | 
				
			||||||
                      properties: instruction.fieldset,
 | 
					                      properties: instruction.fieldset,
 | 
				
			||||||
 | 
				
			|||||||
@ -1,6 +1,5 @@
 | 
				
			|||||||
import { RemoteSelect } from '@nocobase/client';
 | 
					import { RemoteSelect, Variable } from '@nocobase/client';
 | 
				
			||||||
import React from 'react';
 | 
					import React from 'react';
 | 
				
			||||||
import { Variable } from '@nocobase/client';
 | 
					 | 
				
			||||||
import { useWorkflowVariableOptions } from '../../variable';
 | 
					import { useWorkflowVariableOptions } from '../../variable';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export function AssigneesSelect({ multiple = false, value = [], onChange }) {
 | 
					export function AssigneesSelect({ multiple = false, value = [], onChange }) {
 | 
				
			||||||
@ -27,6 +26,7 @@ export function AssigneesSelect({ multiple = false, value = [], onChange }) {
 | 
				
			|||||||
        onChange={(v) => {
 | 
					        onChange={(v) => {
 | 
				
			||||||
          onChange(v != null ? [v] : []);
 | 
					          onChange(v != null ? [v] : []);
 | 
				
			||||||
        }}
 | 
					        }}
 | 
				
			||||||
 | 
					        className="auto-width"
 | 
				
			||||||
      />
 | 
					      />
 | 
				
			||||||
    </Variable.Input>
 | 
					    </Variable.Input>
 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
 | 
				
			|||||||
@ -20,6 +20,7 @@ export default {
 | 
				
			|||||||
      'x-component-props': {
 | 
					      'x-component-props': {
 | 
				
			||||||
        showSearch: false,
 | 
					        showSearch: false,
 | 
				
			||||||
        allowClear: false,
 | 
					        allowClear: false,
 | 
				
			||||||
 | 
					        className: 'auto-width',
 | 
				
			||||||
      },
 | 
					      },
 | 
				
			||||||
      enum: [
 | 
					      enum: [
 | 
				
			||||||
        { label: 'GET', value: 'GET' },
 | 
					        { label: 'GET', value: 'GET' },
 | 
				
			||||||
@ -39,7 +40,6 @@ export default {
 | 
				
			|||||||
      'x-component': 'Input',
 | 
					      'x-component': 'Input',
 | 
				
			||||||
      'x-component-props': {
 | 
					      'x-component-props': {
 | 
				
			||||||
        placeholder: 'https://www.nocobase.com',
 | 
					        placeholder: 'https://www.nocobase.com',
 | 
				
			||||||
        className: 'full-width',
 | 
					 | 
				
			||||||
      },
 | 
					      },
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    headers: {
 | 
					    headers: {
 | 
				
			||||||
@ -147,7 +147,6 @@ export default {
 | 
				
			|||||||
          minRows: 10,
 | 
					          minRows: 10,
 | 
				
			||||||
        },
 | 
					        },
 | 
				
			||||||
        placeholder: `{{t("Input request data", { ns: "${NAMESPACE}" })}}`,
 | 
					        placeholder: `{{t("Input request data", { ns: "${NAMESPACE}" })}}`,
 | 
				
			||||||
        className: 'full-width',
 | 
					 | 
				
			||||||
      },
 | 
					      },
 | 
				
			||||||
      description: `{{t("Only support standard JSON data", { ns: "${NAMESPACE}" })}}`,
 | 
					      description: `{{t("Only support standard JSON data", { ns: "${NAMESPACE}" })}}`,
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
 | 
				
			|||||||
@ -10,7 +10,7 @@ export const collection = {
 | 
				
			|||||||
  'x-decorator': 'FormItem',
 | 
					  'x-decorator': 'FormItem',
 | 
				
			||||||
  'x-component': 'CollectionSelect',
 | 
					  'x-component': 'CollectionSelect',
 | 
				
			||||||
  'x-component-props': {
 | 
					  'x-component-props': {
 | 
				
			||||||
    popupMatchSelectWidth: false,
 | 
					    className: 'auto-width',
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -60,7 +60,6 @@ export const appends = {
 | 
				
			|||||||
      const { values } = useForm();
 | 
					      const { values } = useForm();
 | 
				
			||||||
      return values?.collection;
 | 
					      return values?.collection;
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    className: 'full-width',
 | 
					 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  'x-reactions': [
 | 
					  'x-reactions': [
 | 
				
			||||||
    {
 | 
					    {
 | 
				
			||||||
 | 
				
			|||||||
@ -220,9 +220,7 @@ const useStyles = createStyles(({ css, token }) => {
 | 
				
			|||||||
        font-weight: bold;
 | 
					        font-weight: bold;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        &:not(:focus) {
 | 
					        &: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};
 | 
					          border-color: ${token.colorBorderBg};
 | 
				
			||||||
          background-color: ${token.colorBgContainerDisabled};
 | 
					          background-color: ${token.colorBgContainerDisabled};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
@ -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 { CollectionBlockInitializer } from '../components/CollectionBlockInitializer';
 | 
				
			||||||
import { FieldsSelect } from '../components/FieldsSelect';
 | 
					import { FieldsSelect } from '../components/FieldsSelect';
 | 
				
			||||||
import { NAMESPACE, lang } from '../locale';
 | 
					import { NAMESPACE, lang } from '../locale';
 | 
				
			||||||
@ -63,9 +68,10 @@ export default {
 | 
				
			|||||||
      'x-component': 'Select',
 | 
					      'x-component': 'Select',
 | 
				
			||||||
      'x-component-props': {
 | 
					      'x-component-props': {
 | 
				
			||||||
        popupMatchSelectWidth: false,
 | 
					        popupMatchSelectWidth: false,
 | 
				
			||||||
        options: collectionModeOptions,
 | 
					 | 
				
			||||||
        placeholder: `{{t("Trigger on", { ns: "${NAMESPACE}" })}}`,
 | 
					        placeholder: `{{t("Trigger on", { ns: "${NAMESPACE}" })}}`,
 | 
				
			||||||
 | 
					        className: 'auto-width',
 | 
				
			||||||
      },
 | 
					      },
 | 
				
			||||||
 | 
					      enum: collectionModeOptions,
 | 
				
			||||||
      required: true,
 | 
					      required: true,
 | 
				
			||||||
      'x-reactions': [
 | 
					      'x-reactions': [
 | 
				
			||||||
        {
 | 
					        {
 | 
				
			||||||
@ -85,7 +91,6 @@ export default {
 | 
				
			|||||||
      'x-decorator': 'FormItem',
 | 
					      'x-decorator': 'FormItem',
 | 
				
			||||||
      'x-component': 'FieldsSelect',
 | 
					      'x-component': 'FieldsSelect',
 | 
				
			||||||
      'x-component-props': {
 | 
					      'x-component-props': {
 | 
				
			||||||
        className: 'full-width',
 | 
					 | 
				
			||||||
        mode: 'multiple',
 | 
					        mode: 'multiple',
 | 
				
			||||||
        placeholder: '{{t("Select field")}}',
 | 
					        placeholder: '{{t("Select field")}}',
 | 
				
			||||||
        filter(field) {
 | 
					        filter(field) {
 | 
				
			||||||
 | 
				
			|||||||
@ -260,7 +260,7 @@ export const TriggerConfig = () => {
 | 
				
			|||||||
                    'x-component': 'fieldset',
 | 
					                    'x-component': 'fieldset',
 | 
				
			||||||
                    'x-component-props': {
 | 
					                    'x-component-props': {
 | 
				
			||||||
                      className: css`
 | 
					                      className: css`
 | 
				
			||||||
                        .ant-select:not(.full-width) {
 | 
					                        .ant-select.auto-width {
 | 
				
			||||||
                          width: auto;
 | 
					                          width: auto;
 | 
				
			||||||
                          min-width: 6em;
 | 
					                          min-width: 6em;
 | 
				
			||||||
                        }
 | 
					                        }
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user