fix: dropdownMatchSelectWidth=false (#2143)

2023-06-28 10:13:35 +08:00 · 2023-06-28 10:13:35 +08:00 · c229d837a3
commit c229d837a3
parent 884b265420
27 changed files with 105 additions and 61 deletions
--- a/packages/core/client/src/acl/Configuration/StrategyActions.tsx
+++ b/packages/core/client/src/acl/Configuration/StrategyActions.tsx
@ -84,6 +84,7 @@ export const StrategyActions = connect((props) => {
            render: (scope, action) =>
              !action.onNewRecord && (
                <Select
+                  dropdownMatchSelectWidth={false}
                  size={'small'}
                  value={scope}
                  options={[
--- a/packages/core/client/src/collection-manager/Configuration/components/index.tsx
+++ b/packages/core/client/src/collection-manager/Configuration/components/index.tsx
@ -45,6 +45,7 @@ export const ThroughForeignKey = observer(
      <div>
        <Select
          allowClear
+          dropdownMatchSelectWidth={false}
          placeholder={'留空时，自动生成 FK 字段'}
          disabled={field.disabled}
          value={field.value}
@ -72,6 +73,7 @@ export const TargetForeignKey = observer(
      <div>
        <Select
          allowClear
+          dropdownMatchSelectWidth={false}
          placeholder={'留空时，自动生成 FK 字段'}
          disabled={field.disabled}
          value={field.value}
@ -100,6 +102,7 @@ export const SourceCollection = observer(
      <div>
        <Select
          disabled
+          dropdownMatchSelectWidth={false}
          value={collection.name}
          options={[{ value: collection.name, label: compile(collection.title) }]}
        />
--- a/packages/core/client/src/collection-manager/templates/components/PreviewFields.tsx
+++ b/packages/core/client/src/collection-manager/templates/components/PreviewFields.tsx
@ -123,6 +123,7 @@ const PreviewCom = (props) => {
        ) : (
          <Select
            defaultValue={text}
+            dropdownMatchSelectWidth={false}
            style={{ width: '100%' }}
            options={
              item?.possibleTypes.map((v) => {
@ -148,6 +149,7 @@ const PreviewCom = (props) => {
          <Select
            defaultValue={text}
            style={{ width: '100%' }}
+            dropdownMatchSelectWidth={false}
            onChange={(value) => {
              const interfaceConfig = getInterface(value);
              handleFieldChange({ ...item, interface: value, uiSchema: interfaceConfig?.default?.uiSchema }, index);
--- a/packages/core/client/src/schema-component/antd/association-field/InternalPicker.tsx
+++ b/packages/core/client/src/schema-component/antd/association-field/InternalPicker.tsx
@ -1,4 +1,4 @@
-import { RecursionField, observer, useField, useFieldSchema } from '@formily/react';
+import { observer, RecursionField, useField, useFieldSchema } from '@formily/react';
 import { Input, Select } from 'antd';
 import { differenceBy, unionBy } from 'lodash';
 import React, { useContext, useMemo, useState } from 'react';
@ -133,6 +133,7 @@ export const InternalPicker = observer(
          <div style={{ width: '100%' }}>
            <Select
              style={{ width: '100%' }}
+              dropdownMatchSelectWidth={false}
              {...others}
              mode={multiple ? 'multiple' : props.mode}
              fieldNames={fieldNames}
--- a/packages/core/client/src/schema-component/antd/calendar/ViewSelect.tsx
+++ b/packages/core/client/src/schema-component/antd/calendar/ViewSelect.tsx
@ -15,7 +15,7 @@ export const ViewSelect = observer(
    } = useContext(CalendarToolbarContext);
    return (
      <div className="ant-btn-group">
-        <Select value={view} onChange={onView}>
+        <Select dropdownMatchSelectWidth={false} value={view} onChange={onView}>
          {views.map((name) => (
            <Select.Option key={name} value={name}>
              {messages[name]}
--- a/packages/core/client/src/schema-component/antd/collection-select/CollectionSelect.tsx
+++ b/packages/core/client/src/schema-component/antd/collection-select/CollectionSelect.tsx
@ -31,6 +31,7 @@ export const CollectionSelect = connect(
    return (
      <Select
        placeholder={t('Select collection')}
+        dropdownMatchSelectWidth={false}
        {...others}
        showSearch
        filterOption={(input, option) => (option?.label ?? '').includes(input)}
@ -39,25 +40,28 @@ export const CollectionSelect = connect(
    );
  },
  mapReadPretty(
-    observer((props: CollectionSelectProps) => {
-      const { mode } = props;
-      const compile = useCompile();
-      const options = useOptions(props).filter((option) => {
-        if (mode === 'multiple') {
-          return (props.value ?? []).includes(option.value);
-        }
-        return props.value === option.value;
-      });
+    observer(
+      (props: CollectionSelectProps) => {
+        const { mode } = props;
+        const compile = useCompile();
+        const options = useOptions(props).filter((option) => {
+          if (mode === 'multiple') {
+            return (props.value ?? []).includes(option.value);
+          }
+          return props.value === option.value;
+        });

-      return (
-        <div>
-          {options.map((option) => (
-            <Tag key={option.value} color={option.color}>
-              {compile(option.label)}
-            </Tag>
-          ))}
-        </div>
-      );
-    }, { displayName: 'CollectionSelectObserver' }),
+        return (
+          <div>
+            {options.map((option) => (
+              <Tag key={option.value} color={option.color}>
+                {compile(option.label)}
+              </Tag>
+            ))}
+          </div>
+        );
+      },
+      { displayName: 'CollectionSelectObserver' },
+    ),
  ),
 );
--- a/packages/core/client/src/schema-component/antd/cron/CronSet.tsx
+++ b/packages/core/client/src/schema-component/antd/cron/CronSet.tsx
@ -1,10 +1,10 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { Select, SelectProps } from 'antd';
-import Cron from './Cron';
 import { connect, mapReadPretty, useFieldSchema } from '@formily/react';
+import { Select, SelectProps } from 'antd';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useCollection } from '../../../collection-manager';
 import { useCompile } from '../../hooks';
 import { EllipsisWithTooltip } from '../input';
+import Cron from './Cron';

 interface CronSetProps extends SelectProps {
  onChange: (v: string) => void;
@ -63,7 +63,14 @@ const CronSetInternal = (props: CronSetProps) => {

  return (
    <fieldset>
-      <Select allowClear {...props} value={value} options={options} onChange={(value) => onCronChange(value)}></Select>
+      <Select
+        dropdownMatchSelectWidth={false}
+        allowClear
+        {...props}
+        value={value}
+        options={options}
+        onChange={(value) => onCronChange(value)}
+      ></Select>
      {isCustomize ? (
        <Cron
          value={value}
--- a/packages/core/client/src/schema-component/antd/filter/FilterGroup.tsx
+++ b/packages/core/client/src/schema-component/antd/filter/FilterGroup.tsx
@ -4,8 +4,8 @@ import { ArrayField, connect, useField } from '@formily/react';
 import { Select, Space } from 'antd';
 import React, { useContext } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { FilterLogicContext, RemoveConditionContext } from './context';
 import { FilterItems } from './FilterItems';
+import { FilterLogicContext, RemoveConditionContext } from './context';

 export const FilterGroup = connect((props) => {
  const { bordered = true, disabled } = props;
--- a/packages/core/client/src/schema-component/antd/filter/FilterItem.tsx
+++ b/packages/core/client/src/schema-component/antd/filter/FilterItem.tsx
@ -40,6 +40,7 @@ export const FilterItem = observer(
            className={css`
              min-width: 110px;
            `}
+            dropdownMatchSelectWidth={false}
            value={operator?.value}
            options={compile(operators)}
            onChange={(value) => {
--- a/packages/core/client/src/schema-component/antd/form-v2/Templates.tsx
+++ b/packages/core/client/src/schema-component/antd/form-v2/Templates.tsx
@ -143,6 +143,7 @@ export const Templates = ({ style = {}, form }) => {
        {t('Data template')}:{' '}
      </label>
      <Select
+        dropdownMatchSelectWidth={false}
        // style={{ width: '8em' }}
        options={templates}
        fieldNames={{ label: 'title', value: 'key' }}
--- a/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx
+++ b/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx
@ -178,6 +178,7 @@ export const InputRecordPicker: React.FC<any> = (props: IRecordPickerProps) => {
          {...others}
          mode={multiple ? 'multiple' : props.mode}
          fieldNames={fieldNames}
+          dropdownMatchSelectWidth={false}
          onDropdownVisibleChange={(open) => {
            setVisible(true);
          }}
--- a/packages/core/client/src/schema-component/antd/variable/Input.tsx
+++ b/packages/core/client/src/schema-component/antd/variable/Input.tsx
@ -1,14 +1,12 @@
 import { CloseCircleFilled } from '@ant-design/icons';
 import { css, cx } from '@emotion/css';
 import { useForm } from '@formily/react';
-import { Input as AntInput, Cascader, DatePicker, InputNumber, Select, Tag } from 'antd';
-import moment from 'moment';
-import React, { useCallback, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-
 import { error } from '@nocobase/utils/client';
+import { Input as AntInput, Cascader, DatePicker, InputNumber, Select, Tag } from 'antd';
 import classNames from 'classnames';
-import { useMemo } from 'react';
+import moment from 'moment';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useCompile } from '../..';
 import { Option } from '../../../schema-settings/VariableInput/type';
 import { XButton } from './XButton';
--- a/packages/core/client/src/schema-initializer/components/assigned-field/AssignedField.tsx
+++ b/packages/core/client/src/schema-initializer/components/assigned-field/AssignedField.tsx
@ -181,7 +181,13 @@ export const AssignedField = (props: any) => {
      return <CollectionField {...props} value={value} onChange={valueChangeHandler} style={{ minWidth: 150 }} />;
    } else {
      return (
-        <Select defaultValue={fieldType} value={fieldType} style={{ minWidth: 150 }} onChange={fieldTypeChangeHandler}>
+        <Select
+          dropdownMatchSelectWidth={false}
+          defaultValue={fieldType}
+          value={fieldType}
+          style={{ minWidth: 150 }}
+          onChange={fieldTypeChangeHandler}
+        >
          {options?.map((opt) => {
            return (
              <Select.Option key={opt.name} value={opt.name}>
--- a/packages/core/client/src/schema-settings/DataTemplates/components/Designer.tsx
+++ b/packages/core/client/src/schema-settings/DataTemplates/components/Designer.tsx
@ -172,6 +172,7 @@ function SelectItem(props) {
      <div style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
        {title}
        <Select
+          dropdownMatchSelectWidth={false}
          bordered={false}
          value={value}
          onChange={onChange}
--- a/packages/core/client/src/schema-settings/LinkageRules/LinkageRuleAction.tsx
+++ b/packages/core/client/src/schema-settings/LinkageRules/LinkageRuleAction.tsx
@ -72,6 +72,7 @@ export const FormFieldLinkageRuleAction = observer(
              placeholder={t('Select field')}
            />
            <Select
+              dropdownMatchSelectWidth={false}
              value={operator}
              className={css`
                min-width: 120px;
@ -121,6 +122,7 @@ export const FormButtonLinkageRuleAction = observer(
      <div style={{ marginBottom: 8 }}>
        <Space>
          <Select
+            dropdownMatchSelectWidth={false}
            value={operator}
            options={compile(operators)}
            onChange={(value) => {
--- a/packages/core/client/src/user/LanguageSettings.tsx
+++ b/packages/core/client/src/user/LanguageSettings.tsx
@ -27,6 +27,7 @@ export const useLanguageSettings = () => {
        >
          {t('Language')}{' '}
          <Select
+            dropdownMatchSelectWidth={false}
            style={{ minWidth: 100 }}
            bordered={false}
            open={open}
--- a/packages/core/client/src/user/SwitchRole.tsx
+++ b/packages/core/client/src/user/SwitchRole.tsx
@ -45,6 +45,7 @@ export const useSwitchRole = () => {
          <Select
            style={{ minWidth: 100 }}
            bordered={false}
+            dropdownMatchSelectWidth={false}
            fieldNames={{
              label: 'title',
              value: 'name',
--- a/packages/core/client/src/user/ThemeSettings.tsx
+++ b/packages/core/client/src/user/ThemeSettings.tsx
@ -25,6 +25,7 @@ export const useThemeSettings = () => {
          <Select
            style={{ minWidth: 100 }}
            bordered={false}
+            dropdownMatchSelectWidth={false}
            defaultValue={localStorage.getItem('NOCOBASE_THEME')}
            options={[
              { label: t('Default theme'), value: 'default' },
--- a/packages/plugins/graph-collection-manager/src/client/GraphDrawPage.tsx
+++ b/packages/plugins/graph-collection-manager/src/client/GraphDrawPage.tsx
@ -1018,7 +1018,9 @@ export const GraphDrawPage = React.memo(() => {
            <div className={cx(collectionListClass)}>
              <SchemaComponent
                components={{
-                  Select: (props) => <Select {...props} getPopupContainer={getPopupContainer} />,
+                  Select: (props) => (
+                    <Select dropdownMatchSelectWidth={false} {...props} getPopupContainer={getPopupContainer} />
+                  ),
                  AddCollectionAction,
                }}
                schema={{
--- a/packages/plugins/graph-collection-manager/src/client/action-hooks.tsx
+++ b/packages/plugins/graph-collection-manager/src/client/action-hooks.tsx
@ -1,14 +1,14 @@
 import { observer, useForm } from '@formily/react';
 import { action } from '@formily/reactive';
 import {
-  useActionContext,
  useAPIClient,
+  useActionContext,
  useCollectionFieldFormValues,
  useCollectionManager,
  useCompile,
  useRequest,
 } from '@nocobase/client';
-import { message, Select } from 'antd';
+import { Select, message } from 'antd';
 import omit from 'lodash/omit';
 import React, { useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
@ -34,7 +34,12 @@ export const SourceCollection = observer(
    const compile = useCompile();
    return (
      <div>
-        <Select disabled value={record.name} options={[{ value: record.name, label: compile(record.title) }]} />
+        <Select
+          dropdownMatchSelectWidth={false}
+          disabled
+          value={record.name}
+          options={[{ value: record.name, label: compile(record.title) }]}
+        />
      </div>
    );
  },
--- a/packages/plugins/graph-collection-manager/src/client/components/Entity.tsx
+++ b/packages/plugins/graph-collection-manager/src/client/components/Entity.tsx
@ -243,7 +243,9 @@ const PortsCom = React.memo<any>(({ targetGraph, collectionData, setTargetNode,
            Input,
            Form,
            ResourceActionProvider,
-            Select: (props) => <Select {...props} getPopupContainer={getPopupContainer} />,
+            Select: (props) => (
+              <Select dropdownMatchSelectWidth={false} {...props} getPopupContainer={getPopupContainer} />
+            ),
            Checkbox,
            Radio,
            InputNumber,
--- a/packages/plugins/map/src/client/components/Search.tsx
+++ b/packages/plugins/map/src/client/components/Search.tsx
@ -85,6 +85,7 @@ const Search = (props: SearchProps) => {
        onSearch={onSearch}
        onSelect={onSelect}
        options={options}
+        dropdownMatchSelectWidth={false}
      ></Select>
    </div>
  );
--- a/packages/plugins/multi-app-share-collection/src/client/TableTransfer.tsx
+++ b/packages/plugins/multi-app-share-collection/src/client/TableTransfer.tsx
@ -225,6 +225,7 @@ export const TableTransfer = connect((props) => {
            <strong style={{ fontSize: 16 }}>{t('Unshared collections')}</strong>
            <Input.Group compact style={{ width: 360 }}>
              <Select
+                dropdownMatchSelectWidth={false}
                onChange={(value) => {
                  removedDataSource.setCategoryFilter(value);
                }}
@ -309,6 +310,7 @@ export const TableTransfer = connect((props) => {
            <strong style={{ fontSize: 16 }}>{t('Shared collections')}</strong>
            <Input.Group compact style={{ width: 360 }}>
              <Select
+                dropdownMatchSelectWidth={false}
                onChange={(value) => {
                  addedDataSource.setCategoryFilter(value);
                }}
--- a/packages/plugins/sequence-field/src/client/sequence.tsx
+++ b/packages/plugins/sequence-field/src/client/sequence.tsx
@ -1,21 +1,19 @@
 import { css } from '@emotion/css';
 import { ArrayTable, FormButtonGroup, FormDrawer, FormLayout, Submit } from '@formily/antd';
 import { onFieldValueChange } from '@formily/core';
-import { SchemaOptionsContext, useForm, useFormEffects, ISchema } from '@formily/react';
+import { ISchema, SchemaOptionsContext, useForm, useFormEffects } from '@formily/react';
+import {
+  Cron,
+  IField,
+  SchemaComponent,
+  SchemaComponentOptions,
+  interfacesProperties,
+  useCompile,
+} from '@nocobase/client';
 import { Button, Select } from 'antd';
 import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-
-import {
-  Cron,
-  SchemaComponent,
-  SchemaComponentOptions,
-  useCompile,
-  interfacesProperties,
-  IField,
-  useCollectionField,
-} from '@nocobase/client';
-import { lang, NAMESPACE } from './locale';
+import { NAMESPACE, lang } from './locale';

 function RuleTypeSelect(props) {
  const compile = useCompile();
@ -30,7 +28,7 @@ function RuleTypeSelect(props) {
  });

  return (
-    <Select {...props}>
+    <Select dropdownMatchSelectWidth={false} {...props}>
      {Object.keys(RuleTypes).map((key) => (
        <Select.Option key={key} value={key}>
          {compile(RuleTypes[key].title)}
--- a/packages/plugins/snapshot-field/src/client/components/SnapshotOwnerCollectionFieldsSelect.tsx
+++ b/packages/plugins/snapshot-field/src/client/components/SnapshotOwnerCollectionFieldsSelect.tsx
@ -1,7 +1,7 @@
-import React from 'react';
-import { Select, SelectProps } from 'antd';
-import { useTopRecord } from '../interface';
 import { useCollectionManager, useCompile } from '@nocobase/client';
+import { Select, SelectProps } from 'antd';
+import React from 'react';
+import { useTopRecord } from '../interface';

 export type SnapshotOwnerCollectionFieldsSelectProps = Omit<SelectProps, 'options'>;

@ -18,5 +18,5 @@ export const useSnapshotOwnerCollectionFields = () => {

 export const SnapshotOwnerCollectionFieldsSelect: React.FC<SnapshotOwnerCollectionFieldsSelectProps> = (props) => {
  const options = useSnapshotOwnerCollectionFields();
-  return <Select options={options} {...props} />;
+  return <Select dropdownMatchSelectWidth={false} options={options} {...props} />;
 };
--- a/packages/plugins/workflow/src/client/components/Duration.tsx
+++ b/packages/plugins/workflow/src/client/components/Duration.tsx
@ -1,6 +1,6 @@
-import React from 'react';
-import { InputNumber, Select } from 'antd';
 import { css } from '@emotion/css';
+import { InputNumber, Select } from 'antd';
+import React from 'react';
 import { lang } from '../locale';

 const UnitOptions = [
@ -29,7 +29,11 @@ export default function ({ value = 60000, onChange }) {
      `}
    >
      <InputNumber min={1} value={quantity} onChange={(v) => onChange(Math.round(v * option.value))} />
-      <Select value={option.value} onChange={(unit) => onChange(Math.round(quantity * unit))}>
+      <Select
+        dropdownMatchSelectWidth={false}
+        value={option.value}
+        onChange={(unit) => onChange(Math.round(quantity * unit))}
+      >
        {UnitOptions.map((item) => (
          <Select.Option key={item.value} value={item.value}>
            {lang(item.label)}
--- a/packages/plugins/workflow/src/client/triggers/schedule/DateFieldsSelect.tsx
+++ b/packages/plugins/workflow/src/client/triggers/schedule/DateFieldsSelect.tsx
@ -1,10 +1,9 @@
 import { observer, useForm } from '@formily/react';
+import { useCollectionManager, useCompile } from '@nocobase/client';
 import { Select } from 'antd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';

-import { useCollectionManager, useCompile } from '@nocobase/client';
-
 export const DateFieldsSelect: React.FC<any> = observer(
  (props) => {
    const { t } = useTranslation();
@ -14,7 +13,7 @@ export const DateFieldsSelect: React.FC<any> = observer(
    const fields = getCollectionFields(values?.collection);

    return (
-      <Select placeholder={t('Select field')} {...props}>
+      <Select dropdownMatchSelectWidth={false} placeholder={t('Select field')} {...props}>
        {fields
          .filter((field) => !field.hidden && (field.uiSchema ? field.type === 'date' : false))
          .map((field) => (