opensource/cloudbeaver
3
0
Fork 0
mirror of https://github.com/dbeaver/cloudbeaver.git synced 2026-09-24 16:04:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(core-blocks): use generic for useFocus hook

Browse Source
This commit is contained in:
Wroud
2020-09-01 23:27:21 +03:00
parent 7e733bb44b
commit d1eb72d489
10 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/ServerConfiguration/ServerConfigurationForm.tsx
+2 -2
View File
@@ -52,10 +52,10 @@ export const ServerConfigurationForm = observer(function ServerConfigurationForm
onSave,
}: Props) {
const translate = useTranslate();
const [focusedRef] = useFocus({ focusFirstChild: true });
const [focusedRef] = useFocus<HTMLFormElement>({ focusFirstChild: true });
return styled(useStyles(formStyles, boxStyles))(
<SubmittingForm onSubmit={onSave} name='server_config' ref={focusedRef as React.RefObject<HTMLFormElement>}>
<SubmittingForm onSubmit={onSave} name='server_config' ref={focusedRef}>
<box as="div">
<box-element as='div'>
<group as="div">
webapp/packages/core-app/src/NavigationTree/NavigationTree.tsx
+2 -2
View File
@@ -47,7 +47,7 @@ const navigationTreeStyles = css`
export const NavigationTree = observer(function NavigationTree() {
const navTreeService = useService(NavigationTreeService);
const [onFocus, onBlur] = useActiveView(navTreeService.getView);
const [ref] = useFocus({ onFocus, onBlur });
const [ref] = useFocus<HTMLDivElement>({ onFocus, onBlur });
const nodeChildren = useChildren();
const isEnabled = usePermission(EPermission.public);
@@ -69,7 +69,7 @@ export const NavigationTree = observer(function NavigationTree() {
}
return styled(navigationTreeStyles)(
<tree as="div" tabIndex={0} ref={ref as React.RefObject<HTMLDivElement>}>
<tree as="div" tabIndex={0} ref={ref}>
{nodeChildren.children.map(id => (
<NavigationTreeNode key={id} id={id} parentId={ROOT_NODE_PATH}/>
))}
webapp/packages/core-app/src/shared/NavigationTabs/NavigationTabsBar/NavigationTabsBar.tsx
+2 -2
View File
@@ -41,7 +41,7 @@ const stylesArray = [styles];
export const NavigationTabsBar = observer(function NavigationTabsBar() {
const navigation = useService(NavigationTabsService);
const [onFocus, onBlur] = useActiveView(navigation.getView);
const [ref] = useFocus({ onFocus, onBlur });
const [ref] = useFocus<HTMLDivElement>({ onFocus, onBlur });
const handleSelect = useCallback((tabId: string) => navigation.selectTab(tabId), [navigation]);
const handleClose = useCallback((tabId: string) => navigation.closeTab(tabId), [navigation]);
@@ -62,7 +62,7 @@ export const NavigationTabsBar = observer(function NavigationTabsBar() {
))}
style={stylesArray}
tabIndex={0}
ref={ref as React.RefObject<HTMLDivElement>}
ref={ref}
>
{navigation.tabIdList.map(tabId => (
<TabPanel key={tabId} tabId={tabId}>
webapp/packages/core-blocks/src/useFocus.ts
+4 -4
View File
@@ -16,18 +16,18 @@ type FocusOptions = {
onBlur?: () => void;
}
export function useFocus({
export function useFocus<T extends HTMLElement>({
focusFirstChild,
onFocus,
onBlur,
}: FocusOptions): [React.RefObject<HTMLElement>, boolean] {
}: FocusOptions): [React.RefObject<T>, boolean] {
const [focus, setFocus] = useState(false);
const reference = useRef<HTMLElement>(null);
const reference = useRef<T>(null);
useLayoutEffect(() => {
if (reference.current !== null && focusFirstChild) {
const firstFocusable = reference.current
.querySelector<HTMLElement>('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
.querySelector<T>('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
if (firstFocusable) {
firstFocusable.focus();
webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionForm/ConnectionForm.tsx
+2 -2
View File
@@ -39,10 +39,10 @@ export const ConnectionForm = observer(function ConnectionForm({
controller,
}: ConnectionFormProps) {
const translate = useTranslate();
const [focusedRef] = useFocus({ focusFirstChild: true });
const [focusedRef] = useFocus<HTMLDivElement>({ focusFirstChild: true });
return styled(useStyles(styles, formStyles))(
<connection-form as='div' ref={focusedRef as React.RefObject<HTMLDivElement>}>
<connection-form as='div' ref={focusedRef}>
<box as="div">
<box-element as='div'>
<group as="div">
webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx
+2 -2
View File
@@ -61,7 +61,7 @@ export const DatabaseAuthDialog = observer(function DatabaseAuthDialog({
rejectDialog,
}: DialogComponentProps<string, null>) {
const connection = useConnectionInfo(payload);
const [focusedRef] = useFocus({ focusFirstChild: true });
const [focusedRef] = useFocus<HTMLFormElement>({ focusFirstChild: true });
const { driver } = useDBDriver(connection.connectionInfo?.driverId || '');
const controller = useController(DBAuthDialogController, payload, rejectDialog);
@@ -81,7 +81,7 @@ export const DatabaseAuthDialog = observer(function DatabaseAuthDialog({
{(!connection.isLoaded() || connection.isLoading())
? <Loader />
: (
<SubmittingForm onSubmit={controller.login} ref={focusedRef as React.RefObject<HTMLFormElement>}>
<SubmittingForm onSubmit={controller.login} ref={focusedRef}>
<ObjectPropertyInfoForm
prefix={`auth_${connection.connectionInfo?.id || ''} `}
autofillToken={`section-${connection.connectionInfo?.id || ''} section-auth`}
webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserForm.tsx
+2 -2
View File
@@ -138,7 +138,7 @@ export const UserForm = observer(function UserForm({
}: Props) {
const translate = useTranslate();
const controller = useController(UserFormController, userId, onCancel);
const [focusedRef] = useFocus({ focusFirstChild: true });
const [focusedRef] = useFocus<HTMLFormElement>({ focusFirstChild: true });
const handleLoginChange = useCallback(
(value: string) => controller.credentials.login = value,
@@ -186,7 +186,7 @@ export const UserForm = observer(function UserForm({
</Button>
</TabList>
<content-box as='div'>
<SubmittingForm onSubmit={controller.save} ref={focusedRef as React.RefObject<HTMLFormElement>}>
<SubmittingForm onSubmit={controller.save} ref={focusedRef}>
<TabPanel tabId='info'>
<flex-box as="div">
<flex-box-element as='div'>
webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/AuthProviderForm.tsx
+2 -2
View File
@@ -27,13 +27,13 @@ export const AuthProviderForm = observer(function AuthProviderForm({
credentials,
authenticate,
}: Props) {
const [elementRef] = useFocus({ focusFirstChild: true });
const [elementRef] = useFocus<HTMLDivElement>({ focusFirstChild: true });
const handleChange = useCallback((key: string, value: string) => {
credentials[key] = value;
}, [credentials]);
return styled(useStyles(formStyles))(
<login-form as='div' ref={elementRef as React.RefObject<HTMLDivElement>}>
<login-form as='div' ref={elementRef}>
{provider.credentialParameters.map(parameter => parameter.user && (
<group as="div" key={parameter.id}>
<InputField
webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ConnectionForm.tsx
+2 -2
View File
@@ -31,11 +31,11 @@ export const ConnectionForm = observer(function ConnectionForm({
controller,
}: ConnectionFormProps) {
const translate = useTranslate();
const [focusedRef] = useFocus({ focusFirstChild: true });
const [focusedRef] = useFocus<HTMLDivElement>({ focusFirstChild: true });
return styled(useStyles(formStyles))(
<connection-form as='div'>
<connection-type as="div" ref={focusedRef as React.RefObject<HTMLDivElement>}>
<connection-type as="div" ref={focusedRef}>
<Radio
name="type"
id="custom"
webapp/packages/plugin-connection-template/src/ConnectionDialog/ConnectionDialog.tsx
+2 -2
View File
@@ -45,7 +45,7 @@ const styles = css`
export const ConnectionDialog = observer(function ConnectionDialog({
rejectDialog,
}: DialogComponentProps<null, null>) {
const [focusedRef] = useFocus({ focusFirstChild: true });
const [focusedRef] = useFocus<HTMLFormElement>({ focusFirstChild: true });
const controller = useController(ConnectionController, rejectDialog);
const translate = useTranslate();
let title = translate('basicConnection_connectionDialog_newConnection');
@@ -81,7 +81,7 @@ export const ConnectionDialog = observer(function ConnectionDialog({
{controller.isConnecting && translate('basicConnection_connectionDialog_connecting_message')}
</center>
) : (
<SubmittingForm onSubmit={controller.onConnect} ref={focusedRef as React.RefObject<HTMLFormElement>}>
<SubmittingForm onSubmit={controller.onConnect} ref={focusedRef}>
<ObjectPropertyInfoForm
prefix={`auth_${controller.template?.id || ''}`}
autofillToken={`section-${controller.template?.id || ''} section-auth`}