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;
 | 
			
		||||
      `}
 | 
			
		||||
    >
 | 
			
		||||
      <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}>
 | 
			
		||||
 | 
			
		||||
@ -18,7 +18,6 @@ export const FieldsSelect = observer(
 | 
			
		||||
 | 
			
		||||
    return (
 | 
			
		||||
      <Select
 | 
			
		||||
        className="full-width"
 | 
			
		||||
        popupMatchSelectWidth={false}
 | 
			
		||||
        {...others}
 | 
			
		||||
        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 { 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'],
 | 
			
		||||
 | 
			
		||||
@ -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))
 | 
			
		||||
 | 
			
		||||
@ -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,
 | 
			
		||||
 | 
			
		||||
@ -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>
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
@ -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}" })}}`,
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
@ -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': [
 | 
			
		||||
    {
 | 
			
		||||
 | 
			
		||||
@ -220,9 +220,7 @@ const useStyles = createStyles(({ css, token }) => {
 | 
			
		||||
        font-weight: bold;
 | 
			
		||||
 | 
			
		||||
        &:not(:focus) {
 | 
			
		||||
          transition:
 | 
			
		||||
            background-color 0.3s ease,
 | 
			
		||||
            border-color 0.3s ease;
 | 
			
		||||
          transition: background-color 0.3s ease, border-color 0.3s ease;
 | 
			
		||||
          border-color: ${token.colorBorderBg};
 | 
			
		||||
          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 { 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) {
 | 
			
		||||
 | 
			
		||||
@ -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;
 | 
			
		||||
                        }
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user