fix(default-value): fix tag in RemoteSelect (#2306)
This commit is contained in:
		
							parent
							
								
									7ed4ae5018
								
							
						
					
					
						commit
						68976e0ebe
					
				@ -353,34 +353,7 @@ FormItem.Designer = function Designer() {
 | 
			
		||||
                type: 'object',
 | 
			
		||||
                title: t('Set default value'),
 | 
			
		||||
                properties: {
 | 
			
		||||
                  default:
 | 
			
		||||
                    //  isInvariable(interfaceConfig)
 | 
			
		||||
                    // ? {
 | 
			
		||||
                    //     ...(fieldSchemaWithoutRequired || {}),
 | 
			
		||||
                    //     'x-decorator': 'FormItem',
 | 
			
		||||
                    //     'x-component-props': {
 | 
			
		||||
                    //       ...fieldSchema['x-component-props'],
 | 
			
		||||
                    //       targetField,
 | 
			
		||||
                    //       component:
 | 
			
		||||
                    //         collectionField?.target && collectionField?.interface !== 'chinaRegion'
 | 
			
		||||
                    //           ? 'AssociationSelect'
 | 
			
		||||
                    //           : undefined,
 | 
			
		||||
                    //       service: {
 | 
			
		||||
                    //         resource: collectionField?.target,
 | 
			
		||||
                    //       },
 | 
			
		||||
                    //       style: {
 | 
			
		||||
                    //         width: '100%',
 | 
			
		||||
                    //         verticalAlign: 'top',
 | 
			
		||||
                    //       },
 | 
			
		||||
                    //     },
 | 
			
		||||
                    //     name: 'default',
 | 
			
		||||
                    //     title: t('Default value'),
 | 
			
		||||
                    //     default: getFieldDefaultValue(fieldSchema, collectionField),
 | 
			
		||||
                    //     'x-read-pretty': false,
 | 
			
		||||
                    //     'x-disabled': false,
 | 
			
		||||
                    //   }
 | 
			
		||||
                    // :
 | 
			
		||||
                    {
 | 
			
		||||
                  default: {
 | 
			
		||||
                    ...(fieldSchemaWithoutRequired || {}),
 | 
			
		||||
                    'x-decorator': 'FormItem',
 | 
			
		||||
                    'x-component': 'VariableInput',
 | 
			
		||||
@ -393,6 +366,7 @@ FormItem.Designer = function Designer() {
 | 
			
		||||
                      className: defaultInputStyle,
 | 
			
		||||
                      renderSchemaComponent: function Com(props) {
 | 
			
		||||
                        const s = _.cloneDeep(fieldSchemaWithoutRequired) || ({} as Schema);
 | 
			
		||||
 | 
			
		||||
                        s.title = '';
 | 
			
		||||
                        s['x-read-pretty'] = false;
 | 
			
		||||
                        s['x-disabled'] = false;
 | 
			
		||||
 | 
			
		||||
@ -35,6 +35,7 @@ const InternalRemoteSelect = connect(
 | 
			
		||||
      service = {},
 | 
			
		||||
      wait = 300,
 | 
			
		||||
      value,
 | 
			
		||||
      defaultValue,
 | 
			
		||||
      objectValue,
 | 
			
		||||
      manual = true,
 | 
			
		||||
      mapOptions,
 | 
			
		||||
@ -249,12 +250,13 @@ const InternalRemoteSelect = connect(
 | 
			
		||||
    };
 | 
			
		||||
 | 
			
		||||
    const options = useMemo(() => {
 | 
			
		||||
      const v = value || defaultValue;
 | 
			
		||||
      if (!data?.data?.length) {
 | 
			
		||||
        return value != null ? (Array.isArray(value) ? value : [value]) : [];
 | 
			
		||||
        return v != null ? (Array.isArray(v) ? v : [v]) : [];
 | 
			
		||||
      }
 | 
			
		||||
      const valueOptions = (value != null && (Array.isArray(value) ? value : [value])) || [];
 | 
			
		||||
      const valueOptions = (v != null && (Array.isArray(v) ? v : [v])) || [];
 | 
			
		||||
      return uniqBy(data?.data?.concat(valueOptions) || [], fieldNames.value);
 | 
			
		||||
    }, [data?.data, value]);
 | 
			
		||||
    }, [value, defaultValue, data?.data, fieldNames.value]);
 | 
			
		||||
 | 
			
		||||
    const onDropdownVisibleChange = (visible) => {
 | 
			
		||||
      setOpen(visible);
 | 
			
		||||
@ -264,6 +266,7 @@ const InternalRemoteSelect = connect(
 | 
			
		||||
      }
 | 
			
		||||
      firstRun.current = true;
 | 
			
		||||
    };
 | 
			
		||||
 | 
			
		||||
    return (
 | 
			
		||||
      <Select
 | 
			
		||||
        open={open}
 | 
			
		||||
@ -276,6 +279,7 @@ const InternalRemoteSelect = connect(
 | 
			
		||||
        onDropdownVisibleChange={onDropdownVisibleChange}
 | 
			
		||||
        objectValue={objectValue}
 | 
			
		||||
        value={value}
 | 
			
		||||
        defaultValue={defaultValue}
 | 
			
		||||
        {...others}
 | 
			
		||||
        loading={data! ? loading : true}
 | 
			
		||||
        options={mapOptionsToTags(options)}
 | 
			
		||||
 | 
			
		||||
@ -3,10 +3,10 @@ import { connect, mapProps, mapReadPretty } from '@formily/react';
 | 
			
		||||
import { isValid, toArr } from '@formily/shared';
 | 
			
		||||
import { isPlainObject } from '@nocobase/utils/client';
 | 
			
		||||
import type { SelectProps } from 'antd';
 | 
			
		||||
import { Empty, Select as AntdSelect, Spin } from 'antd';
 | 
			
		||||
import { Select as AntdSelect, Empty, Spin } from 'antd';
 | 
			
		||||
import React from 'react';
 | 
			
		||||
import { ReadPretty } from './ReadPretty';
 | 
			
		||||
import { defaultFieldNames, FieldNames, getCurrentOptions } from './utils';
 | 
			
		||||
import { FieldNames, defaultFieldNames, getCurrentOptions } from './utils';
 | 
			
		||||
 | 
			
		||||
type Props = SelectProps<any, any> & {
 | 
			
		||||
  objectValue?: boolean;
 | 
			
		||||
@ -19,7 +19,7 @@ type Props = SelectProps<any, any> & {
 | 
			
		||||
const isEmptyObject = (val: any) => !isValid(val) || (typeof val === 'object' && Object.keys(val).length === 0);
 | 
			
		||||
 | 
			
		||||
const ObjectSelect = (props: Props) => {
 | 
			
		||||
  const { value, options, onChange, fieldNames, mode, loading, rawOptions, ...others } = props;
 | 
			
		||||
  const { value, options, onChange, fieldNames, mode, loading, rawOptions, defaultValue, ...others } = props;
 | 
			
		||||
  const toValue = (v: any) => {
 | 
			
		||||
    if (isEmptyObject(v)) {
 | 
			
		||||
      return;
 | 
			
		||||
@ -40,9 +40,11 @@ const ObjectSelect = (props: Props) => {
 | 
			
		||||
    }
 | 
			
		||||
    return currentOptions.shift();
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <AntdSelect
 | 
			
		||||
      value={toValue(value)}
 | 
			
		||||
      defaultValue={toValue(defaultValue)}
 | 
			
		||||
      allowClear
 | 
			
		||||
      labelInValue
 | 
			
		||||
      notFoundContent={loading ? <Spin /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
 | 
			
		||||
@ -78,13 +80,22 @@ const filterOption = (input, option) => (option?.label ?? '').toLowerCase().incl
 | 
			
		||||
 | 
			
		||||
const InternalSelect = connect(
 | 
			
		||||
  (props: Props) => {
 | 
			
		||||
    const { objectValue, loading, value, rawOptions, ...others } = props;
 | 
			
		||||
    const { objectValue, loading, value, rawOptions, defaultValue, ...others } = props;
 | 
			
		||||
    let mode: any = props.multiple ? 'multiple' : props.mode;
 | 
			
		||||
    if (mode && !['multiple', 'tags'].includes(mode)) {
 | 
			
		||||
      mode = undefined;
 | 
			
		||||
    }
 | 
			
		||||
    if (objectValue) {
 | 
			
		||||
      return <ObjectSelect rawOptions={rawOptions} {...others} value={value} mode={mode} loading={loading} />;
 | 
			
		||||
      return (
 | 
			
		||||
        <ObjectSelect
 | 
			
		||||
          rawOptions={rawOptions}
 | 
			
		||||
          {...others}
 | 
			
		||||
          defaultValue={defaultValue}
 | 
			
		||||
          value={value}
 | 
			
		||||
          mode={mode}
 | 
			
		||||
          loading={loading}
 | 
			
		||||
        />
 | 
			
		||||
      );
 | 
			
		||||
    }
 | 
			
		||||
    const toValue = (v) => {
 | 
			
		||||
      if (['tags', 'multiple'].includes(props.mode) || props.multiple) {
 | 
			
		||||
@ -103,6 +114,7 @@ const InternalSelect = connect(
 | 
			
		||||
        popupMatchSelectWidth={false}
 | 
			
		||||
        notFoundContent={loading ? <Spin /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
 | 
			
		||||
        value={toValue(value)}
 | 
			
		||||
        defaultValue={toValue(defaultValue)}
 | 
			
		||||
        {...others}
 | 
			
		||||
        onChange={(changed) => {
 | 
			
		||||
          props.onChange?.(changed === undefined ? null : changed);
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user