@erxes/ui 0.0.0-stage → 3.2.19-2

package/src/modules/hotkey/hooks/useSequenceHotkeys.tsx

@@ -0,0 +1,79 @@
+import { Keys, Options } from 'react-hotkeys-hook/dist/types';
+import { usePreviousHotkeyScope } from './usePreviousHotkeyScope';
+import { useAtom } from 'jotai';
+import { pendingHotkeyState } from '../states/internal/pendingHotkeyState';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { useScopedHotKeysCallback } from './useScopedHotKeysCallback';
+import { isDefined } from 'erxes-ui/utils/isDefined';
+
+export const useSequenceHotkeys = (
+  firstKey: Keys,
+  secondKey: Keys,
+  sequenceCallback: () => void,
+  scope: string,
+  options: Options = {
+    enableOnContentEditable: true,
+    enableOnFormTags: true,
+    preventDefault: true,
+  },
+  deps: any[] = [],
+) => {
+  const { goBackToPreviousHotkeyScope } = usePreviousHotkeyScope();
+  const callScopedHotkeyCallback = useScopedHotKeysCallback();
+  const [pendingHotkey, setPendingHotkey] = useAtom(pendingHotkeyState);
+
+  useHotkeys(
+    firstKey,
+    (keyboardEvent, hotkeysEvent) => {
+      callScopedHotkeyCallback({
+        keyboardEvent,
+        hotkeysEvent,
+        callback: () => {
+          setPendingHotkey(firstKey);
+        },
+        scope,
+        preventDefault: !!options.preventDefault,
+      });
+    },
+    {
+      enableOnContentEditable: options.enableOnContentEditable,
+      enableOnFormTags: options.enableOnFormTags,
+    },
+    [setPendingHotkey, scope],
+  );
+
+  useHotkeys(
+    secondKey,
+    (keyboardEvent, hotkeysEvent) => {
+      callScopedHotkeyCallback({
+        keyboardEvent,
+        hotkeysEvent,
+        callback: () => {
+          if (pendingHotkey !== firstKey) {
+            return;
+          }
+
+          setPendingHotkey(null);
+
+          if (isDefined(options.preventDefault)) {
+            keyboardEvent.stopImmediatePropagation();
+            keyboardEvent.stopPropagation();
+            keyboardEvent.preventDefault();
+          }
+
+          sequenceCallback();
+        },
+        scope,
+        preventDefault: !!options.preventDefault,
+      });
+    },
+    {
+      enableOnContentEditable: options.enableOnContentEditable,
+      enableOnFormTags: options.enableOnFormTags,
+    },
+    [pendingHotkey, setPendingHotkey, scope, ...deps],
+  );
+  return {
+    goBackToPreviousHotkeyScope,
+  };
+};

package/src/modules/hotkey/hooks/useSetHotkeyScope.tsx

@@ -0,0 +1,27 @@
+import { useCallback } from 'react';
+import { useSetAtom } from 'jotai';
+import { setHotkeyScopeState } from '../states/setHotkeyScopeState';
+import { CustomHotkeyScopes } from '../types/CustomHotkeyScope';
+import { DEBUG_HOTKEY_SCOPE } from './useScopedHotKeysCallback';
+import { logDebug } from 'erxes-ui/utils/logDebug';
+
+export const useSetHotkeyScope = () => {
+  const setHotkeyScope = useSetAtom(setHotkeyScopeState);
+
+  return useCallback(
+    (hotkeyScopeToSet: string, customScopes: CustomHotkeyScopes = {}) => {
+      if (DEBUG_HOTKEY_SCOPE) {
+        logDebug('DEBUG: set new hotkey scope', {
+          hotkeyScopeToSet,
+          customScopes,
+        });
+      }
+
+      setHotkeyScope({
+        scope: hotkeyScopeToSet,
+        customScopes,
+      });
+    },
+    [setHotkeyScope],
+  );
+};

package/src/modules/hotkey/index.ts

@@ -0,0 +1,18 @@
+export * from './constants/defaultHotkeysScopeCustomScopes';
+export * from './constants/initialHotkeysScope';
+
+export * from './components/PopoverScoped';
+
+export * from './hooks/usePreviousHotkeyScope';
+export * from './hooks/useScopedHotKeysCallback';
+export * from './hooks/useScopedHotkeys';
+export * from './hooks/useSequenceHotkeys';
+export * from './hooks/useSetHotkeyScope';
+
+export * from './states/setHotkeyScopeState';
+
+export * from './types/AppHotkeyScope';
+export * from './types/CustomHotkeyScope';
+export * from './types/HotkeyScope';
+
+export * from './utils/isNonTextWritingKey';

package/src/modules/hotkey/states/internal/currentHotkeyScopeState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'jotai';
+
+import { HotkeyScope } from '../../types/HotkeyScope';
+import { INITIAL_HOTKEYS_SCOPE } from '../../constants/initialHotkeysScope';
+
+export const currentHotkeyScopeState = atom<HotkeyScope>(INITIAL_HOTKEYS_SCOPE);

package/src/modules/hotkey/states/internal/internalHotkeysEnabledScopeState.ts

@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const internalHotkeysEnabledScopesState = atom<string[]>([]);

package/src/modules/hotkey/states/internal/pendingHotkeyState.ts

@@ -0,0 +1,4 @@
+import { atom } from 'jotai';
+import { Keys } from 'react-hotkeys-hook/dist/types';
+
+export const pendingHotkeyState = atom<Keys | null>(null);

package/src/modules/hotkey/states/internal/previousHotkeyScopeState.ts

@@ -0,0 +1,4 @@
+import { atom } from 'jotai';
+import { HotkeyScope } from '../../types/HotkeyScope';
+
+export const previousHotkeyScopeState = atom<HotkeyScope | null>(null);

package/src/modules/hotkey/states/setHotkeyScopeState.ts

@@ -0,0 +1,92 @@
+import { atom } from 'jotai';
+import { currentHotkeyScopeState } from './internal/currentHotkeyScopeState';
+import { HotkeyScope } from '../types/HotkeyScope';
+import { isDefined } from 'erxes-ui/utils/isDefined';
+import { CustomHotkeyScopes } from '../types/CustomHotkeyScope';
+import { DEFAULT_HOTKEYS_SCOPE_CUSTOM_SCOPES } from '../constants/defaultHotkeysScopeCustomScopes';
+import { AppHotkeyScope } from '../types/AppHotkeyScope';
+import { internalHotkeysEnabledScopesState } from './internal/internalHotkeysEnabledScopeState';
+
+const isCustomScopesEqual = (
+  customScopesA: CustomHotkeyScopes | undefined,
+  customScopesB: CustomHotkeyScopes | undefined,
+) => {
+  return (
+    customScopesA?.commandMenu === customScopesB?.commandMenu &&
+    customScopesA?.commandMenuOpen === customScopesB?.commandMenuOpen &&
+    customScopesA?.sidebar === customScopesB?.sidebar &&
+    customScopesA?.keyboardShortcuts === customScopesB?.keyboardShortcuts
+  );
+};
+
+export const setHotkeyScopeState = atom(
+  null,
+  (
+    get,
+    set,
+    newScope: {
+      scope: string;
+      customScopes?: CustomHotkeyScopes;
+    },
+  ) => {
+    const currentHotkeyScope = get(currentHotkeyScopeState);
+
+    if (currentHotkeyScope.scope === newScope.scope) {
+      if (!isDefined(newScope.customScopes)) {
+        if (
+          isCustomScopesEqual(
+            currentHotkeyScope.customScopes,
+            DEFAULT_HOTKEYS_SCOPE_CUSTOM_SCOPES,
+          )
+        ) {
+          return;
+        }
+      } else {
+        if (
+          isCustomScopesEqual(
+            currentHotkeyScope.customScopes,
+            newScope.customScopes,
+          )
+        ) {
+          return;
+        }
+      }
+    }
+
+    const { commandMenu, commandMenuOpen, sidebar, keyboardShortcuts } =
+      newScope.customScopes ?? {};
+
+    const newHotkeyScope: HotkeyScope = {
+      scope: newScope.scope,
+      customScopes: {
+        commandMenu: commandMenu ?? true,
+        commandMenuOpen: commandMenuOpen ?? true,
+        sidebar: sidebar ?? true,
+        keyboardShortcuts: keyboardShortcuts ?? false,
+      },
+    };
+
+    const scopesToSet: string[] = [];
+
+    if (newHotkeyScope.customScopes?.commandMenu === true) {
+      scopesToSet.push(AppHotkeyScope.CommandMenu);
+    }
+
+    if (newHotkeyScope.customScopes?.commandMenuOpen === true) {
+      scopesToSet.push(AppHotkeyScope.CommandMenuOpen);
+    }
+
+    if (newHotkeyScope.customScopes?.sidebar === true) {
+      scopesToSet.push(AppHotkeyScope.Sidebar);
+    }
+
+    if (newHotkeyScope.customScopes?.keyboardShortcuts === true) {
+      scopesToSet.push(AppHotkeyScope.KeyboardShortcuts);
+    }
+
+    scopesToSet.push(newHotkeyScope.scope);
+
+    set(internalHotkeysEnabledScopesState, scopesToSet);
+    set(currentHotkeyScopeState, newHotkeyScope);
+  },
+);

package/src/modules/hotkey/types/AppHotkeyScope.ts

@@ -0,0 +1,7 @@
+export enum AppHotkeyScope {
+  App = 'app',
+  CommandMenu = 'command-menu',
+  CommandMenuOpen = 'command-menu-open',
+  KeyboardShortcuts = 'keyboard-shortcuts',
+  Sidebar = 'sidebar',
+}

package/src/modules/hotkey/types/CustomHotkeyScope.ts

@@ -0,0 +1,6 @@
+export interface CustomHotkeyScopes {
+  commandMenu?: boolean;
+  commandMenuOpen?: boolean;
+  keyboardShortcuts?: boolean;
+  sidebar?: boolean;
+}

package/src/modules/hotkey/types/HotkeyScope.ts

@@ -0,0 +1,6 @@
+import { CustomHotkeyScopes } from './CustomHotkeyScope';
+
+export interface HotkeyScope {
+  scope: string;
+  customScopes: CustomHotkeyScopes;
+}

package/src/modules/hotkey/utils/isNonTextWritingKey.ts

@@ -0,0 +1,57 @@
+export const isNonTextWritingKey = (key: string) => {
+  const nonTextWritingKeys = [
+    'Enter',
+    'Tab',
+    'Shift',
+    'Escape',
+    'ArrowUp',
+    'ArrowDown',
+    'ArrowLeft',
+    'ArrowRight',
+    'Delete',
+    'Backspace',
+    'F1',
+    'F2',
+    'F3',
+    'F4',
+    'F5',
+    'F6',
+    'F7',
+    'F8',
+    'F9',
+    'F10',
+    'F11',
+    'F12',
+    'Meta',
+    'Alt',
+    'Control',
+    'CapsLock',
+    'NumLock',
+    'ScrollLock',
+    'Pause',
+    'Insert',
+    'Home',
+    'PageUp',
+    'Delete',
+    'End',
+    'PageDown',
+    'ActionMenuDropdown',
+    'PrintScreen',
+    'BrowserBack',
+    'BrowserForward',
+    'BrowserRefresh',
+    'BrowserStop',
+    'BrowserSearch',
+    'BrowserFavorites',
+    'BrowserHome',
+    'VolumeMute',
+    'VolumeDown',
+    'VolumeUp',
+    'MediaTrackNext',
+    'MediaTrackPrevious',
+    'MediaStop',
+    'MediaPlayPause',
+  ];
+
+  return nonTextWritingKeys.includes(key);
+};

package/src/modules/icons/components/IconComponent.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useIcons } from '../hooks/useIcons';
+import { TablerIcon } from '@tabler/icons-react';
+
+export const IconComponent = React.forwardRef<
+  TablerIcon,
+  React.ComponentPropsWithoutRef<TablerIcon> & { name?: string }
+>(({ name, ...props }, ref) => {
+  const { getIcon } = useIcons();
+  const Icon = getIcon(name);
+
+  return <Icon ref={ref} {...props} />;
+});

package/src/modules/icons/components/IconPicker.tsx

@@ -0,0 +1,55 @@
+import { Combobox, Command, Popover } from 'erxes-ui/components';
+import { cn } from 'erxes-ui/lib';
+import { useIcons } from 'erxes-ui/modules/icons/hooks/useIcons';
+import { forwardRef, useState } from 'react';
+import { IconComponent } from './IconComponent';
+
+export const IconPicker = forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Combobox.TriggerBase> & {
+    value?: string;
+    onValueChange?: (value: string | null) => void;
+  }
+>(({ value, onValueChange, ...props }, ref) => {
+  const { getIcons } = useIcons();
+  const [_value, setValue] = useState(value);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <Combobox.TriggerBase
+        variant="ghost"
+        size="icon"
+        className="px-2"
+        ref={ref}
+        {...props}
+      >
+        <IconComponent name={_value} />
+      </Combobox.TriggerBase>
+
+      <Combobox.Content className="w-60 min-w-60">
+        <Command>
+          <Command.Input placeholder="Search icon..." />
+          <Command.List className="max-h-[200px] overflow-y-auto hide-scroll [&>div]:flex [&>div]:flex-wrap [&>div]:gap-2 justify-center">
+            {Object.entries(getIcons())
+              .sort((a, b) => (a[0] === _value ? -1 : 1))
+              .map(([key, Icon]) => (
+                <Command.Item
+                  key={key}
+                  onSelect={() => {
+                    setValue(key);
+                    onValueChange?.(key);
+                    setOpen(false);
+                  }}
+                  value={key}
+                  className={cn(_value === key && 'text-primary')}
+                >
+                  <Icon />
+                </Command.Item>
+              ))}
+          </Command.List>
+        </Command>
+      </Combobox.Content>
+    </Popover>
+  );
+});