From e0c95bfbb871d619e7479ba78cbfc41e2cbdd6ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denis=20=F0=9F=8E=83=20Khripkov?= Date: Tue, 3 Dec 2024 15:12:02 +0300 Subject: [PATCH] feat: refactor: use name imports; --- src/AutoFocusInside.js | 6 +++--- src/Combination.js | 4 ++-- src/FocusGuard.js | 6 +++--- src/FreeFocusInside.js | 6 +++--- src/Lock.js | 42 +++++++++++++++++++++-------------------- src/MoveFocusInside.js | 10 +++++----- src/Trap.js | 3 ++- src/UI.d.ts | 20 ++++++++++---------- src/clientSideEffect.js | 12 ++++++------ src/index.d.ts | 20 ++++++++++---------- src/interfaces.d.ts | 15 +++++++-------- src/nano-events.js | 2 +- src/sidecar.d.ts | 4 ++-- 13 files changed, 76 insertions(+), 74 deletions(-) diff --git a/src/AutoFocusInside.js b/src/AutoFocusInside.js index 83bc975..4238781 100644 --- a/src/AutoFocusInside.js +++ b/src/AutoFocusInside.js @@ -1,10 +1,10 @@ -import * as React from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; -import * as constants from 'focus-lock/constants'; +import { FOCUS_AUTO } from 'focus-lock/constants'; import { inlineProp } from './util'; const AutoFocusInside = ({ disabled = false, children, className = undefined }) => ( -
+
{children}
); diff --git a/src/Combination.js b/src/Combination.js index 0727f29..5c0e215 100644 --- a/src/Combination.js +++ b/src/Combination.js @@ -1,4 +1,4 @@ -import * as React from 'react'; +import React, { forwardRef } from 'react'; import FocusLockUI from './Lock'; import FocusTrap from './Trap'; @@ -11,7 +11,7 @@ const RequireSideCar = (props) => { }; */ -const FocusLockCombination = React.forwardRef(function FocusLockUICombination(props, ref) { +const FocusLockCombination = forwardRef(function FocusLockUICombination(props, ref) { return ( ( - +
{children} {children &&
} - + ); InFocusGuard.propTypes = { diff --git a/src/FreeFocusInside.js b/src/FreeFocusInside.js index a37e62f..1802fc4 100644 --- a/src/FreeFocusInside.js +++ b/src/FreeFocusInside.js @@ -1,10 +1,10 @@ -import * as React from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; -import * as constants from 'focus-lock/constants'; +import { FOCUS_ALLOW } from 'focus-lock/constants'; import { inlineProp } from './util'; const FreeFocusInside = ({ children, className }) => ( -
+
{children}
); diff --git a/src/Lock.js b/src/Lock.js index 46a7d09..f6041f2 100644 --- a/src/Lock.js +++ b/src/Lock.js @@ -1,8 +1,10 @@ -import * as React from 'react'; +import React, { + forwardRef, useRef, useState, useCallback, useEffect, useMemo, Fragment, +} from 'react'; import { node, bool, string, any, arrayOf, oneOfType, object, func, } from 'prop-types'; -import * as constants from 'focus-lock/constants'; +import { FOCUS_DISABLED, FOCUS_GROUP } from 'focus-lock/constants'; import { useMergeRefs } from 'use-callback-ref'; import { hiddenGuard } from './FocusGuard'; @@ -13,13 +15,13 @@ import { focusScope } from './scope'; const emptyArray = []; -const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) { - const [realObserved, setObserved] = React.useState(); - const observed = React.useRef(); - const isActive = React.useRef(false); - const originalFocusedElement = React.useRef(null); +const FocusLock = forwardRef(function FocusLockUI(props, parentRef) { + const [realObserved, setObserved] = useState(); + const observed = useRef(); + const isActive = useRef(false); + const originalFocusedElement = useRef(null); - const [, update] = React.useState({}); + const [, update] = useState({}); const { children, @@ -45,11 +47,11 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) { onDeactivation: onDeactivationCallback, } = props; - const [id] = React.useState({}); + const [id] = useState({}); // SIDE EFFECT CALLBACKS - const onActivation = React.useCallback(({ captureFocusRestore }) => { + const onActivation = useCallback(({ captureFocusRestore }) => { if (!originalFocusedElement.current) { const activeElement = document?.activeElement; originalFocusedElement.current = activeElement; @@ -66,7 +68,7 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) { update(); }, [onActivationCallback]); - const onDeactivation = React.useCallback(() => { + const onDeactivation = useCallback(() => { isActive.current = false; if (onDeactivationCallback) { onDeactivationCallback(observed.current); @@ -74,7 +76,7 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) { update(); }, [onDeactivationCallback]); - const returnFocus = React.useCallback((allowDefer) => { + const returnFocus = useCallback((allowDefer) => { const { current: focusRestore } = originalFocusedElement; if (focusRestore) { const returnFocusTo = (typeof focusRestore === 'function' ? focusRestore() : focusRestore) || document.body; @@ -96,7 +98,7 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) { // MEDIUM CALLBACKS - const onFocus = React.useCallback((event) => { + const onFocus = useCallback((event) => { if (isActive.current) { mediumFocus.useMedium(event); } @@ -107,7 +109,7 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) { // REF PROPAGATION // not using real refs due to race conditions - const setObserveNode = React.useCallback((newObserved) => { + const setObserveNode = useCallback((newObserved) => { if (observed.current !== newObserved) { observed.current = newObserved; setObserved(newObserved); @@ -120,7 +122,7 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) { console.warn('React-Focus-Lock: allowTextSelection is deprecated and enabled by default'); } - React.useEffect(() => { + useEffect(() => { // report incorrect integration - https://github.com/theKashey/react-focus-lock/issues/123 if (!observed.current && typeof Container !== 'string') { // eslint-disable-next-line no-console @@ -130,8 +132,8 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) { } const lockProps = { - [constants.FOCUS_DISABLED]: disabled && 'disabled', - [constants.FOCUS_GROUP]: group, + [FOCUS_DISABLED]: disabled && 'disabled', + [FOCUS_GROUP]: group, ...containerProps, }; @@ -140,7 +142,7 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) { const mergedRef = useMergeRefs([parentRef, setObserveNode]); - const focusScopeValue = React.useMemo(() => ({ + const focusScopeValue = useMemo(() => ({ observed, shards, enabled: !disabled, @@ -148,7 +150,7 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) { }), [disabled, isActive.current, shards, realObserved]); return ( - + {hasLeadingGuards && [ // nearest focus guard
, @@ -191,7 +193,7 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) { hasTailingGuards &&
} - + ); }); diff --git a/src/MoveFocusInside.js b/src/MoveFocusInside.js index 76c2d2c..07744cc 100644 --- a/src/MoveFocusInside.js +++ b/src/MoveFocusInside.js @@ -1,11 +1,11 @@ -import * as React from 'react'; +import React, { useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; -import * as constants from 'focus-lock/constants'; +import { FOCUS_AUTO } from 'focus-lock/constants'; import { inlineProp } from './util'; import { mediumEffect } from './medium'; export const useFocusInside = (observedRef) => { - React.useEffect(() => { + useEffect(() => { let enabled = true; mediumEffect.useMedium((car) => { const observed = observedRef && observedRef.current; @@ -22,12 +22,12 @@ export const useFocusInside = (observedRef) => { }; function MoveFocusInside({ disabled: isDisabled = false, className, children }) { - const ref = React.useRef(null); + const ref = useRef(null); useFocusInside(isDisabled ? undefined : ref); return (
diff --git a/src/Trap.js b/src/Trap.js index ab7ff40..ab85531 100644 --- a/src/Trap.js +++ b/src/Trap.js @@ -1,5 +1,6 @@ /* eslint-disable no-mixed-operators */ -import * as React from 'react'; + +import React from 'react'; import PropTypes from 'prop-types'; import withSideEffect from 'react-clientside-effect'; import { diff --git a/src/UI.d.ts b/src/UI.d.ts index 2ea8edc..88cf6e8 100644 --- a/src/UI.d.ts +++ b/src/UI.d.ts @@ -1,41 +1,41 @@ -import * as React from 'react'; +import { FC, Component, RefObject, FocusEventHandler } from 'react'; import {ReactFocusLockProps, AutoFocusProps, FreeFocusProps, InFocusGuardProps} from "./interfaces.js"; /** * Traps Focus inside a Lock */ -declare const ReactFocusLock: React.FC }>; +declare const ReactFocusLock: FC }>; export default ReactFocusLock; /** * Autofocus on children on Lock activation */ -export class AutoFocusInside extends React.Component { +export class AutoFocusInside extends Component { } /** * Autofocus on children */ -export class MoveFocusInside extends React.Component { +export class MoveFocusInside extends Component { } /** * Allow free focus inside on children */ -export class FreeFocusInside extends React.Component { +export class FreeFocusInside extends Component { } /** * Secures the focus around the node */ -export class InFocusGuard extends React.Component { +export class InFocusGuard extends Component { } /** * Moves focus inside a given node */ -export function useFocusInside(node: React.RefObject): void; +export function useFocusInside(node: RefObject): void; export type FocusOptions = { /** @@ -112,10 +112,10 @@ export function useFocusState(callbacks?: FocusCallbacks ):{ /** * focus handled. SHALL be passed to the node down */ - onFocus: React.FocusEventHandler; + onFocus: FocusEventHandler; /** * reference to the node * only required to capture current status of the node */ - ref: React.RefObject; -} \ No newline at end of file + ref: RefObject; +} diff --git a/src/clientSideEffect.js b/src/clientSideEffect.js index bd1d8b4..3129611 100644 --- a/src/clientSideEffect.js +++ b/src/clientSideEffect.js @@ -1,6 +1,6 @@ -/* eslint-disable */ +/* eslint-disable no-unused-vars, no-console */ -import * as React from 'react'; +import React, { useEffect, useRef } from 'react'; // NOT USED @@ -31,14 +31,14 @@ function withSideEffect(reducePropsToState, handleStateChangeOnClient) { } const SideEffect = (props) => { - const lastProps = React.useRef(props); + const lastProps = useRef(props); - React.useEffect(() => { + useEffect(() => { lastProps.current = props; }); // handle mounted instances - React.useEffect(() => { + useEffect(() => { console.log('ins added'); mountedInstances.push(lastProps); @@ -50,7 +50,7 @@ function withSideEffect(reducePropsToState, handleStateChangeOnClient) { }, []); // notify updates - // React.useEffect(emitChange, [props.disabled]); + // useEffect(emitChange, [props.disabled]); return ; }; diff --git a/src/index.d.ts b/src/index.d.ts index 59e2a5a..46f5f5d 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -1,42 +1,42 @@ -import * as React from 'react'; +import { FC, Component, RefObject, FocusEventHandler } from 'react'; import {ReactFocusLockProps, AutoFocusProps, FreeFocusProps, InFocusGuardProps} from "./interfaces.js"; export {ReactFocusLockProps}; /** * Traps Focus inside a Lock */ -declare const ReactFocusLock: React.FC; +declare const ReactFocusLock: FC; export default ReactFocusLock; /** * Autofocus on children on Lock activation */ -export class AutoFocusInside extends React.Component { +export class AutoFocusInside extends Component { } /** * Autofocus on children */ -export class MoveFocusInside extends React.Component { +export class MoveFocusInside extends Component { } /** * Allow free focus inside on children */ -export class FreeFocusInside extends React.Component { +export class FreeFocusInside extends Component { } /** * Secures the focus around the node */ -export class InFocusGuard extends React.Component { +export class InFocusGuard extends Component { } /** * Moves focus inside a given node */ -export function useFocusInside(node: React.RefObject): void; +export function useFocusInside(node: RefObject): void; export type FocusOptions = { /** @@ -113,10 +113,10 @@ export function useFocusState(callbacks?: FocusCallbacks ):{ /** * focus handled. SHALL be passed to the node down */ - onFocus: React.FocusEventHandler; + onFocus: FocusEventHandler; /** * reference to the node * only required to capture current status of the node */ - ref: React.RefObject; -} \ No newline at end of file + ref: RefObject; +} diff --git a/src/interfaces.d.ts b/src/interfaces.d.ts index 63cee04..d948d26 100644 --- a/src/interfaces.d.ts +++ b/src/interfaces.d.ts @@ -1,7 +1,6 @@ -import * as React from 'react'; -import {Ref} from "react"; +import { Ref, ReactNode, ElementType, RefObject } from "react"; -export interface ReactFocusLockProps> { +export interface ReactFocusLockProps> { disabled?: boolean; /** @@ -90,7 +89,7 @@ export interface ReactFocusLockProps, + as?: string | ElementType, lockProps?: LockProps, ref?: Ref; @@ -105,22 +104,22 @@ export interface ReactFocusLockProps | HTMLElement>; + shards?: Array | HTMLElement>; children?: ChildrenType; } export interface AutoFocusProps { - children: React.ReactNode; + children: ReactNode; disabled?: boolean; className?: string; } export interface FreeFocusProps { - children: React.ReactNode; + children: ReactNode; className?: string; } export interface InFocusGuardProps { - children?: React.ReactNode; + children?: ReactNode; } diff --git a/src/nano-events.js b/src/nano-events.js index 7a074cc..e654f94 100644 --- a/src/nano-events.js +++ b/src/nano-events.js @@ -1,6 +1,6 @@ /** * @fileoverview this is a copy of https://github.com/ai/nanoevents - * as a temp measure to avoid breaking changes in node/compilation + a temp measure to avoid breaking changes in node/compilation */ export const createNanoEvents = () => ({ diff --git a/src/sidecar.d.ts b/src/sidecar.d.ts index 12a3a0b..34a46d6 100644 --- a/src/sidecar.d.ts +++ b/src/sidecar.d.ts @@ -1,5 +1,5 @@ -import * as React from "react"; +import { FC } from 'react'; -declare var sidecar: React.FC; +declare var sidecar: FC; export default sidecar;