8db549f6f6
* feat: hide note contents if the protection expires when the protected note is open and wasn't edited for a while * feat: handle session expiration for opened protected note for both plain advanced editors * fix: if after canceling session expiry modal only one unprotected note stays selected, show its contents in the editor * refactor: handle session expiration for opened protected note (move the logic to web client) * feat: handle the case of selecting "Don't remember" option in session expiry dialog * test (WIP): add unit tests for protecting opened note after the session has expired * test: add remaining unit tests * refactor: move the opened note protection logic to "editor_view" * refactor: reviewer comments - don't rely on user signed-in/out status to require authentication for protected note - remove unnecessary async/awaits - better wording on ui * refactor: reviewer's comments: - use snjs method to check if "Don't remember" option is selected in authentication modal - move the constant to snjs - fix eslint error * refactor: avoid `any` type for `appEvent` payload * test: add unit tests * chore: update function name * refactor: use simpler protection session event types * refactor: protected access terminology * refactor: start counting idle timer after every edit (instead of counting by interval in spite of edits) * test: unit tests * style: don't give extra brightness to the "View Note"/"Authenticate" button on hover/focus * chore: bump snjs version Co-authored-by: Mo Bitar <me@bitar.io>
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 },
|
|
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 },
|
|
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,
|
|
},
|
|
};
|
|
};
|
|
}
|