ui(components): New Dialog and Modal components for ui-next (#4772)

Co-authored-by: sedghi <ar.sedghi@gmail.com>
2025-02-28 15:17:55 -05:00
1 parent 62b4fa3e89
commit a3b51aa8db
@@ -0,0 +1,140 @@
+import React, { useState } from 'react';
+import { useSystem, hotkeys as hotkeysModule } from '@ohif/core';
+import { UserPreferencesModal, FooterAction } from '@ohif/ui-next';
+import { useTranslation } from 'react-i18next';
+import i18n from '@ohif/i18n';
+
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@ohif/ui-next';
+
+const { availableLanguages, defaultLanguage, currentLanguage: currentLanguageFn } = i18n;
+
+interface HotkeyDefinition {
+  keys: string;
+  label: string;
+}
+
+interface HotkeyDefinitions {
+  [key: string]: HotkeyDefinition;
+}
+
+function UserPreferencesModalDefault({ hide }: { hide: () => void }) {
+  const { hotkeysManager } = useSystem();
+  const { t } = useTranslation('UserPreferencesModal');
+
+  const { hotkeyDefinitions = {}, hotkeyDefaults = {} } = hotkeysManager;
+
+  const currentLanguage = currentLanguageFn();
+
+  const [state, setState] = useState({
+    hotkeyDefinitions: hotkeyDefinitions as HotkeyDefinitions,
+    languageValue: currentLanguage.value,
+  });
+
+  const onLanguageChangeHandler = (value: string) => {
+    setState(state => ({ ...state, languageValue: value }));
+  };
+
+  const onHotkeyChangeHandler = (id: string, newKeys: string) => {
+    setState(state => ({
+      ...state,
+      hotkeyDefinitions: {
+        ...state.hotkeyDefinitions,
+        [id]: {
+          ...state.hotkeyDefinitions[id],
+          keys: newKeys,
+        },
+      },
+    }));
+  };
+
+  const onResetHandler = () => {
+    setState(state => ({
+      ...state,
+      languageValue: defaultLanguage.value,
+      hotkeyDefinitions: hotkeyDefaults as HotkeyDefinitions,
+    }));
+
+    hotkeysManager.restoreDefaultBindings();
+  };
+
+  return (
+    <UserPreferencesModal>
+      <UserPreferencesModal.Body>
+        {/* Language Section */}
+        <div className="mb-3 flex items-center space-x-14">
+          <UserPreferencesModal.SubHeading>{t('Language')}</UserPreferencesModal.SubHeading>
+          <Select
+            defaultValue={state.languageValue}
+            onValueChange={onLanguageChangeHandler}
+          >
+            <SelectTrigger
+              className="w-60"
+              aria-label="Language"
+            >
+              <SelectValue placeholder={t('Select language')} />
+            </SelectTrigger>
+            <SelectContent>
+              {availableLanguages.map(lang => (
+                <SelectItem
+                  key={lang.value}
+                  value={lang.value}
+                >
+                  {lang.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <UserPreferencesModal.SubHeading>{t('Hotkeys')}</UserPreferencesModal.SubHeading>
+        <UserPreferencesModal.HotkeysGrid>
+          {Object.entries(state.hotkeyDefinitions).map(([id, definition]) => (
+            <UserPreferencesModal.Hotkey
+              key={id}
+              label={t(definition.label)}
+              value={definition.keys}
+              onChange={newKeys => onHotkeyChangeHandler(id, newKeys)}
+              placeholder={definition.keys}
+              hotkeys={hotkeysModule}
+            />
+          ))}
+        </UserPreferencesModal.HotkeysGrid>
+      </UserPreferencesModal.Body>
+      <FooterAction>
+        <FooterAction.Left>
+          <FooterAction.Auxiliary onClick={onResetHandler}>
+            {t('Reset to defaults')}
+          </FooterAction.Auxiliary>
+        </FooterAction.Left>
+        <FooterAction.Right>
+          <FooterAction.Secondary
+            onClick={() => {
+              hotkeysModule.stopRecord();
+              hotkeysModule.unpause();
+              hide();
+            }}
+          >
+            {t('Cancel')}
+          </FooterAction.Secondary>
+          <FooterAction.Primary
+            onClick={() => {
+              if (state.languageValue !== currentLanguage.value) {
+                i18n.changeLanguage(state.languageValue);
+              }
+              hotkeysManager.setHotkeys(state.hotkeyDefinitions);
+              hotkeysModule.stopRecord();
+              hotkeysModule.unpause();
+              hide();
+            }}
+          >
+            {t('Save')}
+          </FooterAction.Primary>
+        </FooterAction.Right>
+      </FooterAction>
+    </UserPreferencesModal>
+  );
+}
+
+export default {
+  'ohif.userPreferencesModal': UserPreferencesModalDefault,
+};