b932e2a45e
* feat: add editor icon * refactor: remove 'any' type and format * refactor: move NotesOptions and add ChangeEditorOption * refactor: fix type for using regular RefObject<T> * feat: add hide-if-last-child util class * feat: add Change Editor option * feat: make radio btn gray if not checked * fix: accordion menu header and item sizing/spacing * feat: add Escape key to KeyboardKey enum * refactor: Remove Editor Menu * feat: add editor select functionality * refactor: move plain editor name to constant * feat: add premium editors with modal if no subscription refactor: simplify menu group creation * feat: show alert when switching to non-interchangeable editor * fix: change editor menu going out of bounds * feat: increase group header & editor item size * fix: change editor menu close on blur * refactor: Use KeyboardKey enum & remove else statement * feat: add keyboard navigation to change editor menu * fix: editor menu separators * feat: improve change editor menu sizing & spacing * feat: show alert only if editor is not interchangeable * feat: don't show alert when switching to/from plain editor * chore: bump snjs version * feat: temporarily remove change editor alert * feat: dynamically get footer height * refactor: move magic number to const * refactor: move constants to constants file * feat: use const instead of magic number
88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
import { FunctionComponent, h, render } from 'preact';
|
|
import { unmountComponentAtNode } from 'preact/compat';
|
|
import { StateUpdater, useCallback, useState, useEffect } from 'preact/hooks';
|
|
|
|
/**
|
|
* @returns a callback that will close a dropdown if none of its children has
|
|
* focus. Use the returned function as the onBlur callback of children that need to be
|
|
* monitored.
|
|
*/
|
|
export function useCloseOnBlur(
|
|
container: { current?: HTMLDivElement | null },
|
|
setOpen: (open: boolean) => void
|
|
): [
|
|
(event: { relatedTarget: EventTarget | null }) => void,
|
|
StateUpdater<boolean>
|
|
] {
|
|
const [locked, setLocked] = useState(false);
|
|
return [
|
|
useCallback(
|
|
function onBlur(event: { relatedTarget: EventTarget | null }) {
|
|
if (
|
|
!locked &&
|
|
!container.current?.contains(event.relatedTarget as Node)
|
|
) {
|
|
setOpen(false);
|
|
}
|
|
},
|
|
[container, setOpen, locked]
|
|
),
|
|
setLocked,
|
|
];
|
|
}
|
|
|
|
export function useCloseOnClickOutside(
|
|
container: { current: HTMLDivElement | null },
|
|
setOpen: (open: boolean) => void
|
|
): void {
|
|
const closeOnClickOutside = useCallback(
|
|
(event: { target: EventTarget | null }) => {
|
|
if (!container.current?.contains(event.target as Node)) {
|
|
setOpen(false);
|
|
}
|
|
},
|
|
[container, setOpen]
|
|
);
|
|
|
|
useEffect(() => {
|
|
document.addEventListener('click', closeOnClickOutside);
|
|
return () => {
|
|
document.removeEventListener('click', closeOnClickOutside);
|
|
};
|
|
}, [closeOnClickOutside]);
|
|
}
|
|
|
|
export function toDirective<Props>(
|
|
component: FunctionComponent<Props>,
|
|
scope: Record<string, '=' | '&' | '@'> = {}
|
|
) {
|
|
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
|
return function () {
|
|
return {
|
|
controller: [
|
|
'$element',
|
|
'$scope',
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
($element: JQLite, $scope: any) => {
|
|
if ($scope.class) {
|
|
$element.addClass($scope.class);
|
|
}
|
|
return {
|
|
$onChanges() {
|
|
render(h(component, $scope), $element[0]);
|
|
},
|
|
$onDestroy() {
|
|
unmountComponentAtNode($element[0]);
|
|
},
|
|
};
|
|
},
|
|
],
|
|
scope: {
|
|
application: '=',
|
|
appState: '=',
|
|
...scope,
|
|
},
|
|
};
|
|
};
|
|
}
|