fix: select item can not be selected in connecting data blocks (#2993)
This commit is contained in:
		
							parent
							
								
									76940c5454
								
							
						
					
					
						commit
						5b9695e720
					
				@ -725,7 +725,6 @@ SchemaSettings.ConnectDataBlocks = function ConnectDataBlocks(props: {
 | 
				
			|||||||
          });
 | 
					          });
 | 
				
			||||||
          dn.refresh();
 | 
					          dn.refresh();
 | 
				
			||||||
        }}
 | 
					        }}
 | 
				
			||||||
        onClick={(e) => e.stopPropagation()}
 | 
					 | 
				
			||||||
        onMouseEnter={onHover}
 | 
					        onMouseEnter={onHover}
 | 
				
			||||||
        onMouseLeave={onLeave}
 | 
					        onMouseLeave={onLeave}
 | 
				
			||||||
      />
 | 
					      />
 | 
				
			||||||
@ -750,11 +749,11 @@ SchemaSettings.ConnectDataBlocks = function ConnectDataBlocks(props: {
 | 
				
			|||||||
};
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
SchemaSettings.SelectItem = function SelectItem(props) {
 | 
					SchemaSettings.SelectItem = function SelectItem(props) {
 | 
				
			||||||
  const { title, name, options, value, onChange, onClick, ...others } = props;
 | 
					  const { title, name, options, value, onChange, ...others } = props;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  return (
 | 
					  return (
 | 
				
			||||||
    <SchemaSettings.Item name={name} title={title} role="none" aria-label="" {...others}>
 | 
					    <SchemaSettings.Item name={name} title={title} role="none" aria-label="" {...others}>
 | 
				
			||||||
      <SelectWithTitle {...{ name, title, defaultValue: value, onChange, options, onClick }} />
 | 
					      <SelectWithTitle {...{ name, title, defaultValue: value, onChange, options }} />
 | 
				
			||||||
    </SchemaSettings.Item>
 | 
					    </SchemaSettings.Item>
 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
@ -1963,20 +1962,18 @@ export const isPatternDisabled = (fieldSchema: Schema) => {
 | 
				
			|||||||
  return fieldSchema?.['x-component-props']?.['pattern-disable'] == true;
 | 
					  return fieldSchema?.['x-component-props']?.['pattern-disable'] == true;
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
function SelectWithTitle({
 | 
					export function SelectWithTitle({
 | 
				
			||||||
  name,
 | 
					  name,
 | 
				
			||||||
  title,
 | 
					  title,
 | 
				
			||||||
  defaultValue,
 | 
					  defaultValue,
 | 
				
			||||||
  onChange,
 | 
					  onChange,
 | 
				
			||||||
  options,
 | 
					  options,
 | 
				
			||||||
  onClick,
 | 
					 | 
				
			||||||
}: {
 | 
					}: {
 | 
				
			||||||
  name?: string;
 | 
					  name?: string;
 | 
				
			||||||
  title?: any;
 | 
					  title?: any;
 | 
				
			||||||
  defaultValue?: any;
 | 
					  defaultValue?: any;
 | 
				
			||||||
  options?: any;
 | 
					  options?: any;
 | 
				
			||||||
  onChange?: (...args: any[]) => void;
 | 
					  onChange?: (...args: any[]) => void;
 | 
				
			||||||
  onClick?: (...args: any[]) => void;
 | 
					 | 
				
			||||||
}) {
 | 
					}) {
 | 
				
			||||||
  const [open, setOpen] = useState(false);
 | 
					  const [open, setOpen] = useState(false);
 | 
				
			||||||
  const timerRef = useRef<any>(null);
 | 
					  const timerRef = useRef<any>(null);
 | 
				
			||||||
@ -1986,7 +1983,10 @@ function SelectWithTitle({
 | 
				
			|||||||
      role="button"
 | 
					      role="button"
 | 
				
			||||||
      aria-label={name || title}
 | 
					      aria-label={name || title}
 | 
				
			||||||
      style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}
 | 
					      style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}
 | 
				
			||||||
      onClick={() => setOpen((v) => !v)}
 | 
					      onClick={(e) => {
 | 
				
			||||||
 | 
					        e.stopPropagation();
 | 
				
			||||||
 | 
					        setOpen((v) => !v);
 | 
				
			||||||
 | 
					      }}
 | 
				
			||||||
      onMouseLeave={() => {
 | 
					      onMouseLeave={() => {
 | 
				
			||||||
        timerRef.current = setTimeout(() => {
 | 
					        timerRef.current = setTimeout(() => {
 | 
				
			||||||
          setOpen(false);
 | 
					          setOpen(false);
 | 
				
			||||||
@ -2002,7 +2002,6 @@ function SelectWithTitle({
 | 
				
			|||||||
        onChange={onChange}
 | 
					        onChange={onChange}
 | 
				
			||||||
        options={options}
 | 
					        options={options}
 | 
				
			||||||
        style={{ textAlign: 'right', minWidth: 100 }}
 | 
					        style={{ textAlign: 'right', minWidth: 100 }}
 | 
				
			||||||
        onClick={onClick}
 | 
					 | 
				
			||||||
        onMouseEnter={() => {
 | 
					        onMouseEnter={() => {
 | 
				
			||||||
          clearTimeout(timerRef.current);
 | 
					          clearTimeout(timerRef.current);
 | 
				
			||||||
        }}
 | 
					        }}
 | 
				
			||||||
 | 
				
			|||||||
@ -1,42 +1,22 @@
 | 
				
			|||||||
import { MenuProps, Select } from 'antd';
 | 
					import { MenuProps } from 'antd';
 | 
				
			||||||
import React, { useMemo, useState } from 'react';
 | 
					import React, { useMemo } from 'react';
 | 
				
			||||||
import { useTranslation } from 'react-i18next';
 | 
					import { useTranslation } from 'react-i18next';
 | 
				
			||||||
import { useAPIClient, useSystemSettings } from '..';
 | 
					import { SelectWithTitle, useAPIClient, useSystemSettings } from '..';
 | 
				
			||||||
import locale from '../locale';
 | 
					import locale from '../locale';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export const useLanguageSettings = () => {
 | 
					export const useLanguageSettings = () => {
 | 
				
			||||||
  const { t, i18n } = useTranslation();
 | 
					  const { t, i18n } = useTranslation();
 | 
				
			||||||
  const [open, setOpen] = useState(false);
 | 
					 | 
				
			||||||
  const api = useAPIClient();
 | 
					  const api = useAPIClient();
 | 
				
			||||||
  const { data } = useSystemSettings();
 | 
					  const { data } = useSystemSettings();
 | 
				
			||||||
  const enabledLanguages: string[] = data?.data?.enabledLanguages || [];
 | 
					  const enabledLanguages: string[] = useMemo(() => data?.data?.enabledLanguages || [], [data?.data?.enabledLanguages]);
 | 
				
			||||||
  const result = useMemo<MenuProps['items'][0]>(() => {
 | 
					  const result = useMemo<MenuProps['items'][0]>(() => {
 | 
				
			||||||
    return {
 | 
					    return {
 | 
				
			||||||
      role: 'button',
 | 
					      role: 'button',
 | 
				
			||||||
      key: 'language',
 | 
					      key: 'language',
 | 
				
			||||||
      eventKey: 'LanguageSettings',
 | 
					      eventKey: 'LanguageSettings',
 | 
				
			||||||
      onClick: () => {
 | 
					 | 
				
			||||||
        setOpen(true);
 | 
					 | 
				
			||||||
      },
 | 
					 | 
				
			||||||
      label: (
 | 
					      label: (
 | 
				
			||||||
        <div
 | 
					        <SelectWithTitle
 | 
				
			||||||
          aria-label="language-settings"
 | 
					          title={t('Language')}
 | 
				
			||||||
          style={{
 | 
					 | 
				
			||||||
            display: 'flex',
 | 
					 | 
				
			||||||
            alignItems: 'center',
 | 
					 | 
				
			||||||
            justifyContent: 'space-between',
 | 
					 | 
				
			||||||
          }}
 | 
					 | 
				
			||||||
        >
 | 
					 | 
				
			||||||
          {t('Language')}{' '}
 | 
					 | 
				
			||||||
          <Select
 | 
					 | 
				
			||||||
            data-testid="select-language"
 | 
					 | 
				
			||||||
            popupMatchSelectWidth={false}
 | 
					 | 
				
			||||||
            style={{ minWidth: 100 }}
 | 
					 | 
				
			||||||
            bordered={false}
 | 
					 | 
				
			||||||
            open={open}
 | 
					 | 
				
			||||||
            onDropdownVisibleChange={(open) => {
 | 
					 | 
				
			||||||
              setOpen(open);
 | 
					 | 
				
			||||||
            }}
 | 
					 | 
				
			||||||
          options={Object.keys(locale)
 | 
					          options={Object.keys(locale)
 | 
				
			||||||
            .filter((lang) => enabledLanguages.includes(lang))
 | 
					            .filter((lang) => enabledLanguages.includes(lang))
 | 
				
			||||||
            .map((lang) => {
 | 
					            .map((lang) => {
 | 
				
			||||||
@ -45,7 +25,7 @@ export const useLanguageSettings = () => {
 | 
				
			|||||||
                value: lang,
 | 
					                value: lang,
 | 
				
			||||||
              };
 | 
					              };
 | 
				
			||||||
            })}
 | 
					            })}
 | 
				
			||||||
            value={i18n.language}
 | 
					          defaultValue={i18n.language}
 | 
				
			||||||
          onChange={async (lang) => {
 | 
					          onChange={async (lang) => {
 | 
				
			||||||
            await api.resource('users').updateProfile({
 | 
					            await api.resource('users').updateProfile({
 | 
				
			||||||
              values: {
 | 
					              values: {
 | 
				
			||||||
@ -57,10 +37,9 @@ export const useLanguageSettings = () => {
 | 
				
			|||||||
            window.location.reload();
 | 
					            window.location.reload();
 | 
				
			||||||
          }}
 | 
					          }}
 | 
				
			||||||
        />
 | 
					        />
 | 
				
			||||||
        </div>
 | 
					 | 
				
			||||||
      ),
 | 
					      ),
 | 
				
			||||||
    };
 | 
					    };
 | 
				
			||||||
  }, [enabledLanguages, i18n, open]);
 | 
					  }, [api, enabledLanguages, i18n, t]);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  if (enabledLanguages.length < 2) {
 | 
					  if (enabledLanguages.length < 2) {
 | 
				
			||||||
    return null;
 | 
					    return null;
 | 
				
			||||||
 | 
				
			|||||||
@ -1,6 +1,6 @@
 | 
				
			|||||||
import { useAPIClient, useCurrentUserContext, useSystemSettings } from '@nocobase/client';
 | 
					import { SelectWithTitle, useAPIClient, useCurrentUserContext, useSystemSettings } from '@nocobase/client';
 | 
				
			||||||
import { error } from '@nocobase/utils/client';
 | 
					import { error } from '@nocobase/utils/client';
 | 
				
			||||||
import { MenuProps, Select } from 'antd';
 | 
					import { MenuProps } from 'antd';
 | 
				
			||||||
import React, { useEffect, useMemo } from 'react';
 | 
					import React, { useEffect, useMemo } from 'react';
 | 
				
			||||||
import { useCurrentThemeId } from '../components/InitializeTheme';
 | 
					import { useCurrentThemeId } from '../components/InitializeTheme';
 | 
				
			||||||
import { useThemeListContext } from '../components/ThemeListProvider';
 | 
					import { useThemeListContext } from '../components/ThemeListProvider';
 | 
				
			||||||
@ -77,24 +77,13 @@ function Label() {
 | 
				
			|||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  return (
 | 
					  return (
 | 
				
			||||||
    <div
 | 
					    <SelectWithTitle
 | 
				
			||||||
      style={{
 | 
					      title={t('Theme')}
 | 
				
			||||||
        display: 'flex',
 | 
					 | 
				
			||||||
        alignItems: 'center',
 | 
					 | 
				
			||||||
        justifyContent: 'space-between',
 | 
					 | 
				
			||||||
      }}
 | 
					 | 
				
			||||||
    >
 | 
					 | 
				
			||||||
      {t('Theme')}
 | 
					 | 
				
			||||||
      <Select
 | 
					 | 
				
			||||||
        style={{ minWidth: 100 }}
 | 
					 | 
				
			||||||
        bordered={false}
 | 
					 | 
				
			||||||
        popupMatchSelectWidth={false}
 | 
					 | 
				
			||||||
        value={currentThemeId}
 | 
					 | 
				
			||||||
      options={options}
 | 
					      options={options}
 | 
				
			||||||
 | 
					      defaultValue={currentThemeId}
 | 
				
			||||||
      onChange={(value) => {
 | 
					      onChange={(value) => {
 | 
				
			||||||
        updateUserThemeSettings(value);
 | 
					        updateUserThemeSettings(value);
 | 
				
			||||||
      }}
 | 
					      }}
 | 
				
			||||||
    />
 | 
					    />
 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user