Signal/Desktop
1
0
Fork 0
mirror of https://github.com/signalapp/Signal-Desktop.git synced 2025-12-24 20:26:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Modernize DeliveryIssueDialog, fix outline clipping in Modal

Browse Source
This commit is contained in:
Scott Nonnenberg
2021-08-02 14:19:18 -07:00
committed by GitHub
parent 21ffb7c054
commit bcb9d2d2f3
16 changed files with 154 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
ts/util/hooks.ts → ts/util/hooks/index.ts
View File

@@ -13,49 +13,6 @@ export function usePrevious<T>(initialValue: T, currentValue: T): T {
return result;
}
type CallbackType = (toFocus: HTMLElement | null | undefined) => void;
// Restore focus on teardown
export const useRestoreFocus = (): Array<CallbackType> => {
const toFocusRef = React.useRef<HTMLElement | null>(null);
const lastFocusedRef = React.useRef<HTMLElement | null>(null);
// We need to use a callback here because refs aren't necessarily populated on first
// render. For example, ModalHost makes a top-level parent div first, and then renders
// into it. And the children you pass it don't have access to that root div.
const setFocusRef = React.useCallback(
(toFocus: HTMLElement | null | undefined) => {
if (!toFocus) {
return;
}
// We only want to do this once.
if (toFocusRef.current) {
return;
}
toFocusRef.current = toFocus;
// Remember last-focused element, focus this new target element.
lastFocusedRef.current = document.activeElement as HTMLElement;
toFocus.focus();
},
[]
);
React.useEffect(() => {
return () => {
// On unmount, returned focus to element focused before we set the focus
setTimeout(() => {
if (lastFocusedRef.current && lastFocusedRef.current.focus) {
lastFocusedRef.current.focus();
}
});
};
}, []);
return [setFocusRef];
};
export const useBoundActions = <T extends ActionCreatorsMapObject>(
actions: T
): T => {

47
ts/util/hooks/useRestoreFocus.ts Normal file
View File

@@ -0,0 +1,47 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
type CallbackType = (toFocus: HTMLElement | null | undefined) => void;
// Restore focus on teardown
export const useRestoreFocus = (): Array<CallbackType> => {
const toFocusRef = React.useRef<HTMLElement | null>(null);
const lastFocusedRef = React.useRef<HTMLElement | null>(null);
// We need to use a callback here because refs aren't necessarily populated on first
// render. For example, ModalHost makes a top-level parent div first, and then renders
// into it. And the children you pass it don't have access to that root div.
const setFocusRef = React.useCallback(
(toFocus: HTMLElement | null | undefined) => {
if (!toFocus) {
return;
}
// We only want to do this once.
if (toFocusRef.current) {
return;
}
toFocusRef.current = toFocus;
// Remember last-focused element, focus this new target element.
lastFocusedRef.current = document.activeElement as HTMLElement;
toFocus.focus();
},
[]
);
React.useEffect(() => {
return () => {
// On unmount, returned focus to element focused before we set the focus
setTimeout(() => {
if (lastFocusedRef.current && lastFocusedRef.current.focus) {
lastFocusedRef.current.focus();
}
});
};
}, []);
return [setFocusRef];
};

40
ts/util/lint/exceptions.json
View File

@@ -14398,7 +14398,7 @@
},
{
"rule": "React-useRef",
"path": "ts/util/hooks.js",
"path": "ts/util/hooks/index.js",
"line": " const unobserveRef = React.useRef(null);",
"reasonCategory": "usageTrusted",
"updated": "2021-01-08T15:46:32.143Z",
@@ -14406,7 +14406,7 @@
},
{
"rule": "React-useRef",
"path": "ts/util/hooks.js",
"path": "ts/util/hooks/index.js",
"line": " const previousValueRef = React.useRef(initialValue);",
"reasonCategory": "usageTrusted",
"updated": "2021-03-18T21:41:28.361Z",
@@ -14414,7 +14414,21 @@
},
{
"rule": "React-useRef",
"path": "ts/util/hooks.js",
"path": "ts/util/hooks/index.ts",
"line": " const previousValueRef = React.useRef<T>(initialValue);",
"reasonCategory": "usageTrusted",
"updated": "2021-07-30T16:57:33.618Z"
},
{
"rule": "React-useRef",
"path": "ts/util/hooks/index.ts",
"line": " const unobserveRef = React.useRef<(() => unknown) | null>(null);",
"reasonCategory": "usageTrusted",
"updated": "2021-07-30T16:57:33.618Z"
},
{
"rule": "React-useRef",
"path": "ts/util/hooks/useRestoreFocus.js",
"line": " const toFocusRef = React.useRef(null);",
"reasonCategory": "usageTrusted",
"updated": "2021-07-30T01:08:01.309Z",
@@ -14422,7 +14436,7 @@
},
{
"rule": "React-useRef",
"path": "ts/util/hooks.js",
"path": "ts/util/hooks/useRestoreFocus.js",
"line": " const lastFocusedRef = React.useRef(null);",
"reasonCategory": "usageTrusted",
"updated": "2021-07-30T01:08:01.309Z",
@@ -14430,30 +14444,16 @@
},
{
"rule": "React-useRef",
"path": "ts/util/hooks.ts",
"line": " const previousValueRef = React.useRef<T>(initialValue);",
"reasonCategory": "usageTrusted",
"updated": "2021-07-30T16:57:33.618Z"
},
{
"rule": "React-useRef",
"path": "ts/util/hooks.ts",
"path": "ts/util/hooks/useRestoreFocus.ts",
"line": " const toFocusRef = React.useRef<HTMLElement | null>(null);",
"reasonCategory": "usageTrusted",
"updated": "2021-07-30T16:57:33.618Z"
},
{
"rule": "React-useRef",
"path": "ts/util/hooks.ts",
"path": "ts/util/hooks/useRestoreFocus.ts",
"line": " const lastFocusedRef = React.useRef<HTMLElement | null>(null);",
"reasonCategory": "usageTrusted",
"updated": "2021-07-30T16:57:33.618Z"
},
{
"rule": "React-useRef",
"path": "ts/util/hooks.ts",
"line": " const unobserveRef = React.useRef<(() => unknown) | null>(null);",
"reasonCategory": "usageTrusted",
"updated": "2021-07-30T16:57:33.618Z"
}
]