From c229d837a3fcbee967de5767f686f1dd83d46e5c Mon Sep 17 00:00:00 2001 From: chenos Date: Wed, 28 Jun 2023 10:13:35 +0800 Subject: [PATCH] fix: dropdownMatchSelectWidth=false (#2143) --- .../src/acl/Configuration/StrategyActions.tsx | 1 + .../Configuration/components/index.tsx | 3 ++ .../templates/components/PreviewFields.tsx | 2 + .../antd/association-field/InternalPicker.tsx | 3 +- .../antd/calendar/ViewSelect.tsx | 2 +- .../collection-select/CollectionSelect.tsx | 42 ++++++++++--------- .../schema-component/antd/cron/CronSet.tsx | 15 +++++-- .../antd/filter/FilterGroup.tsx | 2 +- .../antd/filter/FilterItem.tsx | 1 + .../antd/form-v2/Templates.tsx | 1 + .../antd/record-picker/InputRecordPicker.tsx | 1 + .../schema-component/antd/variable/Input.tsx | 10 ++--- .../assigned-field/AssignedField.tsx | 8 +++- .../DataTemplates/components/Designer.tsx | 1 + .../LinkageRules/LinkageRuleAction.tsx | 2 + .../core/client/src/user/LanguageSettings.tsx | 1 + packages/core/client/src/user/SwitchRole.tsx | 1 + .../core/client/src/user/ThemeSettings.tsx | 1 + .../src/client/GraphDrawPage.tsx | 4 +- .../src/client/action-hooks.tsx | 11 +++-- .../src/client/components/Entity.tsx | 4 +- .../map/src/client/components/Search.tsx | 1 + .../src/client/TableTransfer.tsx | 2 + .../sequence-field/src/client/sequence.tsx | 24 +++++------ .../SnapshotOwnerCollectionFieldsSelect.tsx | 8 ++-- .../src/client/components/Duration.tsx | 10 +++-- .../triggers/schedule/DateFieldsSelect.tsx | 5 +-- 27 files changed, 105 insertions(+), 61 deletions(-) diff --git a/packages/core/client/src/acl/Configuration/StrategyActions.tsx b/packages/core/client/src/acl/Configuration/StrategyActions.tsx index 0cdf60975..c3bc32df1 100644 --- 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 && ( diff --git a/packages/core/client/src/collection-manager/templates/components/PreviewFields.tsx b/packages/core/client/src/collection-manager/templates/components/PreviewFields.tsx index 1dd317068..30219cb69 100644 --- 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) => { ) : ( { const interfaceConfig = getInterface(value); handleFieldChange({ ...item, interface: value, uiSchema: interfaceConfig?.default?.uiSchema }, index); diff --git a/packages/core/client/src/schema-component/antd/association-field/InternalPicker.tsx b/packages/core/client/src/schema-component/antd/association-field/InternalPicker.tsx index f03e7cc75..90bb7faae 100644 --- 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(
+ (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 ( -
- {options.map((option) => ( - - {compile(option.label)} - - ))} -
- ); - }, { displayName: 'CollectionSelectObserver' }), + return ( +
+ {options.map((option) => ( + + {compile(option.label)} + + ))} +
+ ); + }, + { displayName: 'CollectionSelectObserver' }, + ), ), ); diff --git a/packages/core/client/src/schema-component/antd/cron/CronSet.tsx b/packages/core/client/src/schema-component/antd/cron/CronSet.tsx index 73075c6de..93ab6b401 100644 --- 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 (
- + {isCustomize ? ( { const { bordered = true, disabled } = props; diff --git a/packages/core/client/src/schema-component/antd/filter/FilterItem.tsx b/packages/core/client/src/schema-component/antd/filter/FilterItem.tsx index d745e04b8..bd02698d0 100644 --- 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) => { diff --git a/packages/core/client/src/schema-component/antd/form-v2/Templates.tsx b/packages/core/client/src/schema-component/antd/form-v2/Templates.tsx index 2563155d3..5aa57d83c 100644 --- 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')}:{' '} + { diff --git a/packages/core/client/src/user/LanguageSettings.tsx b/packages/core/client/src/user/LanguageSettings.tsx index d7bb1abe6..f4ed8e2e2 100644 --- 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: (props) => ( + + , + Select: (props) => ( +
); diff --git a/packages/plugins/multi-app-share-collection/src/client/TableTransfer.tsx b/packages/plugins/multi-app-share-collection/src/client/TableTransfer.tsx index 323e3860d..712fb2156 100644 --- 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) => { {t('Unshared collections')} { addedDataSource.setCategoryFilter(value); }} diff --git a/packages/plugins/sequence-field/src/client/sequence.tsx b/packages/plugins/sequence-field/src/client/sequence.tsx index 373e4b4ec..2993defa2 100644 --- 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 ( - {Object.keys(RuleTypes).map((key) => ( {compile(RuleTypes[key].title)} diff --git a/packages/plugins/snapshot-field/src/client/components/SnapshotOwnerCollectionFieldsSelect.tsx b/packages/plugins/snapshot-field/src/client/components/SnapshotOwnerCollectionFieldsSelect.tsx index f77cbe0a7..2aa01c575 100644 --- 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; @@ -18,5 +18,5 @@ export const useSnapshotOwnerCollectionFields = () => { export const SnapshotOwnerCollectionFieldsSelect: React.FC = (props) => { const options = useSnapshotOwnerCollectionFields(); - return ; }; diff --git a/packages/plugins/workflow/src/client/components/Duration.tsx b/packages/plugins/workflow/src/client/components/Duration.tsx index 31cd7a455..4afd455e9 100644 --- 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 }) { `} > onChange(Math.round(v * option.value))} /> - onChange(Math.round(quantity * unit))} + > {UnitOptions.map((item) => ( {lang(item.label)} diff --git a/packages/plugins/workflow/src/client/triggers/schedule/DateFieldsSelect.tsx b/packages/plugins/workflow/src/client/triggers/schedule/DateFieldsSelect.tsx index e08c8632e..f28937264 100644 --- 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 = observer( (props) => { const { t } = useTranslation(); @@ -14,7 +13,7 @@ export const DateFieldsSelect: React.FC = observer( const fields = getCollectionFields(values?.collection); return ( - {fields .filter((field) => !field.hidden && (field.uiSchema ? field.type === 'date' : false)) .map((field) => (