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();
 | 
			
		||||
        }}
 | 
			
		||||
        onClick={(e) => e.stopPropagation()}
 | 
			
		||||
        onMouseEnter={onHover}
 | 
			
		||||
        onMouseLeave={onLeave}
 | 
			
		||||
      />
 | 
			
		||||
@ -750,11 +749,11 @@ SchemaSettings.ConnectDataBlocks = function ConnectDataBlocks(props: {
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
SchemaSettings.SelectItem = function SelectItem(props) {
 | 
			
		||||
  const { title, name, options, value, onChange, onClick, ...others } = props;
 | 
			
		||||
  const { title, name, options, value, onChange, ...others } = props;
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <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>
 | 
			
		||||
  );
 | 
			
		||||
};
 | 
			
		||||
@ -1963,20 +1962,18 @@ export const isPatternDisabled = (fieldSchema: Schema) => {
 | 
			
		||||
  return fieldSchema?.['x-component-props']?.['pattern-disable'] == true;
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
function SelectWithTitle({
 | 
			
		||||
export function SelectWithTitle({
 | 
			
		||||
  name,
 | 
			
		||||
  title,
 | 
			
		||||
  defaultValue,
 | 
			
		||||
  onChange,
 | 
			
		||||
  options,
 | 
			
		||||
  onClick,
 | 
			
		||||
}: {
 | 
			
		||||
  name?: string;
 | 
			
		||||
  title?: any;
 | 
			
		||||
  defaultValue?: any;
 | 
			
		||||
  options?: any;
 | 
			
		||||
  onChange?: (...args: any[]) => void;
 | 
			
		||||
  onClick?: (...args: any[]) => void;
 | 
			
		||||
}) {
 | 
			
		||||
  const [open, setOpen] = useState(false);
 | 
			
		||||
  const timerRef = useRef<any>(null);
 | 
			
		||||
@ -1986,7 +1983,10 @@ function SelectWithTitle({
 | 
			
		||||
      role="button"
 | 
			
		||||
      aria-label={name || title}
 | 
			
		||||
      style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}
 | 
			
		||||
      onClick={() => setOpen((v) => !v)}
 | 
			
		||||
      onClick={(e) => {
 | 
			
		||||
        e.stopPropagation();
 | 
			
		||||
        setOpen((v) => !v);
 | 
			
		||||
      }}
 | 
			
		||||
      onMouseLeave={() => {
 | 
			
		||||
        timerRef.current = setTimeout(() => {
 | 
			
		||||
          setOpen(false);
 | 
			
		||||
@ -2002,7 +2002,6 @@ function SelectWithTitle({
 | 
			
		||||
        onChange={onChange}
 | 
			
		||||
        options={options}
 | 
			
		||||
        style={{ textAlign: 'right', minWidth: 100 }}
 | 
			
		||||
        onClick={onClick}
 | 
			
		||||
        onMouseEnter={() => {
 | 
			
		||||
          clearTimeout(timerRef.current);
 | 
			
		||||
        }}
 | 
			
		||||
 | 
			
		||||
@ -1,66 +1,45 @@
 | 
			
		||||
import { MenuProps, Select } from 'antd';
 | 
			
		||||
import React, { useMemo, useState } from 'react';
 | 
			
		||||
import { MenuProps } from 'antd';
 | 
			
		||||
import React, { useMemo } from 'react';
 | 
			
		||||
import { useTranslation } from 'react-i18next';
 | 
			
		||||
import { useAPIClient, useSystemSettings } from '..';
 | 
			
		||||
import { SelectWithTitle, useAPIClient, useSystemSettings } from '..';
 | 
			
		||||
import locale from '../locale';
 | 
			
		||||
 | 
			
		||||
export const useLanguageSettings = () => {
 | 
			
		||||
  const { t, i18n } = useTranslation();
 | 
			
		||||
  const [open, setOpen] = useState(false);
 | 
			
		||||
  const api = useAPIClient();
 | 
			
		||||
  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]>(() => {
 | 
			
		||||
    return {
 | 
			
		||||
      role: 'button',
 | 
			
		||||
      key: 'language',
 | 
			
		||||
      eventKey: 'LanguageSettings',
 | 
			
		||||
      onClick: () => {
 | 
			
		||||
        setOpen(true);
 | 
			
		||||
      },
 | 
			
		||||
      label: (
 | 
			
		||||
        <div
 | 
			
		||||
          aria-label="language-settings"
 | 
			
		||||
          style={{
 | 
			
		||||
            display: 'flex',
 | 
			
		||||
            alignItems: 'center',
 | 
			
		||||
            justifyContent: 'space-between',
 | 
			
		||||
        <SelectWithTitle
 | 
			
		||||
          title={t('Language')}
 | 
			
		||||
          options={Object.keys(locale)
 | 
			
		||||
            .filter((lang) => enabledLanguages.includes(lang))
 | 
			
		||||
            .map((lang) => {
 | 
			
		||||
              return {
 | 
			
		||||
                label: locale[lang].label,
 | 
			
		||||
                value: lang,
 | 
			
		||||
              };
 | 
			
		||||
            })}
 | 
			
		||||
          defaultValue={i18n.language}
 | 
			
		||||
          onChange={async (lang) => {
 | 
			
		||||
            await api.resource('users').updateProfile({
 | 
			
		||||
              values: {
 | 
			
		||||
                appLang: lang,
 | 
			
		||||
              },
 | 
			
		||||
            });
 | 
			
		||||
            api.auth.setLocale(lang);
 | 
			
		||||
            await i18n.changeLanguage(lang);
 | 
			
		||||
            window.location.reload();
 | 
			
		||||
          }}
 | 
			
		||||
        >
 | 
			
		||||
          {t('Language')}{' '}
 | 
			
		||||
          <Select
 | 
			
		||||
            data-testid="select-language"
 | 
			
		||||
            popupMatchSelectWidth={false}
 | 
			
		||||
            style={{ minWidth: 100 }}
 | 
			
		||||
            bordered={false}
 | 
			
		||||
            open={open}
 | 
			
		||||
            onDropdownVisibleChange={(open) => {
 | 
			
		||||
              setOpen(open);
 | 
			
		||||
            }}
 | 
			
		||||
            options={Object.keys(locale)
 | 
			
		||||
              .filter((lang) => enabledLanguages.includes(lang))
 | 
			
		||||
              .map((lang) => {
 | 
			
		||||
                return {
 | 
			
		||||
                  label: locale[lang].label,
 | 
			
		||||
                  value: lang,
 | 
			
		||||
                };
 | 
			
		||||
              })}
 | 
			
		||||
            value={i18n.language}
 | 
			
		||||
            onChange={async (lang) => {
 | 
			
		||||
              await api.resource('users').updateProfile({
 | 
			
		||||
                values: {
 | 
			
		||||
                  appLang: lang,
 | 
			
		||||
                },
 | 
			
		||||
              });
 | 
			
		||||
              api.auth.setLocale(lang);
 | 
			
		||||
              await i18n.changeLanguage(lang);
 | 
			
		||||
              window.location.reload();
 | 
			
		||||
            }}
 | 
			
		||||
          />
 | 
			
		||||
        </div>
 | 
			
		||||
        />
 | 
			
		||||
      ),
 | 
			
		||||
    };
 | 
			
		||||
  }, [enabledLanguages, i18n, open]);
 | 
			
		||||
  }, [api, enabledLanguages, i18n, t]);
 | 
			
		||||
 | 
			
		||||
  if (enabledLanguages.length < 2) {
 | 
			
		||||
    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 { MenuProps, Select } from 'antd';
 | 
			
		||||
import { MenuProps } from 'antd';
 | 
			
		||||
import React, { useEffect, useMemo } from 'react';
 | 
			
		||||
import { useCurrentThemeId } from '../components/InitializeTheme';
 | 
			
		||||
import { useThemeListContext } from '../components/ThemeListProvider';
 | 
			
		||||
@ -77,24 +77,13 @@ function Label() {
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <div
 | 
			
		||||
      style={{
 | 
			
		||||
        display: 'flex',
 | 
			
		||||
        alignItems: 'center',
 | 
			
		||||
        justifyContent: 'space-between',
 | 
			
		||||
    <SelectWithTitle
 | 
			
		||||
      title={t('Theme')}
 | 
			
		||||
      options={options}
 | 
			
		||||
      defaultValue={currentThemeId}
 | 
			
		||||
      onChange={(value) => {
 | 
			
		||||
        updateUserThemeSettings(value);
 | 
			
		||||
      }}
 | 
			
		||||
    >
 | 
			
		||||
      {t('Theme')}
 | 
			
		||||
      <Select
 | 
			
		||||
        style={{ minWidth: 100 }}
 | 
			
		||||
        bordered={false}
 | 
			
		||||
        popupMatchSelectWidth={false}
 | 
			
		||||
        value={currentThemeId}
 | 
			
		||||
        options={options}
 | 
			
		||||
        onChange={(value) => {
 | 
			
		||||
          updateUserThemeSettings(value);
 | 
			
		||||
        }}
 | 
			
		||||
      />
 | 
			
		||||
    </div>
 | 
			
		||||
    />
 | 
			
		||||
  );
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user