diff --git a/.eslintrc.yml b/.eslintrc.yml index 0428d894..1deacabc 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -11,6 +11,10 @@ env: browser: true plugins: - jsx-a11y +rules: + "@typescript-eslint/no-unused-vars": + - error + - ignoreRestSiblings: true overrides: - files: www/**/* diff --git a/src/ReplaceTransition.tsx b/src/ReplaceTransition.tsx index 5e7144bb..29859780 100644 --- a/src/ReplaceTransition.tsx +++ b/src/ReplaceTransition.tsx @@ -9,6 +9,18 @@ type Props = Omit & { children: [ReactElement, ReactElement]; }; +type LifecycleMethodNames = + | 'onEnter' + | 'onEntering' + | 'onEntered' + | 'onExit' + | 'onExiting' + | 'onExited'; + +type HandlerArgs = [HTMLElement | boolean, boolean | undefined]; +type ChildElement = ReactElement; +type ReplaceElements = [ChildElement, ChildElement]; + /** * The `` component is a specialized `Transition` component * that animates between two children. @@ -21,22 +33,31 @@ type Props = Omit & { * ``` */ class ReplaceTransition extends React.Component { - handleEnter = (...args: any) => this.handleLifecycle('onEnter', 0, args); - handleEntering = (...args: any) => + handleEnter = (...args: HandlerArgs) => + this.handleLifecycle('onEnter', 0, args); + handleEntering = (...args: HandlerArgs) => this.handleLifecycle('onEntering', 0, args); - handleEntered = (...args: any) => this.handleLifecycle('onEntered', 0, args); + handleEntered = (...args: HandlerArgs) => + this.handleLifecycle('onEntered', 0, args); - handleExit = (...args: any) => this.handleLifecycle('onExit', 1, args); - handleExiting = (...args: any) => this.handleLifecycle('onExiting', 1, args); - handleExited = (...args: any) => this.handleLifecycle('onExited', 1, args); + handleExit = (...args: HandlerArgs) => + this.handleLifecycle('onExit', 1, args); + handleExiting = (...args: HandlerArgs) => + this.handleLifecycle('onExiting', 1, args); + handleExited = (...args: HandlerArgs) => + this.handleLifecycle('onExited', 1, args); - handleLifecycle(handler: any, idx: number, originalArgs: any) { + handleLifecycle( + handler: LifecycleMethodNames, + idx: number, + originalArgs: HandlerArgs + ) { const { children } = this.props; // @ts-expect-error FIXME: Type 'string' is not assignable to type 'ReactElement>'.ts(2322) const child: ChildElement = React.Children.toArray(children)[idx]; + // @ts-expect-error FIXME: Type 'false' is not assignable to type '(((boolean | HTMLElement) & (HTMLElement | undefined)) & (HTMLElement | undefined)) & (HTMLElement | undefined)'.ts(2345) if (child.props[handler]) child.props[handler](...originalArgs); - // @ts-expect-error Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'Readonly & Readonly<{ children?: ReactNode; }>'.ts(7053) if (this.props[handler]) { const maybeNode = child.props.nodeRef ? undefined @@ -47,15 +68,19 @@ class ReplaceTransition extends React.Component { } render() { - const { children, in: inProp, ...props }: any = this.props; - const [first, second]: any = React.Children.toArray(children); - - delete props.onEnter; - delete props.onEntering; - delete props.onEntered; - delete props.onExit; - delete props.onExiting; - delete props.onExited; + const { + children, + in: inProp, + onEnter, + onEntering, + onEntered, + onExit, + onExiting, + onExited, + ...props + } = this.props; + // @ts-expect-error FIXME: Target requires 2 element(s) but source may have fewer.ts(2322) + const [first, second]: ReplaceElements = React.Children.toArray(children); return ( @@ -80,7 +105,7 @@ class ReplaceTransition extends React.Component { // @ts-expect-error To make TS migration diffs minimum, I've left propTypes here instead of defining a static property ReplaceTransition.propTypes = { in: PropTypes.bool.isRequired, - children(props: any, propName: any) { + children(props: any, propName: LifecycleMethodNames) { if (React.Children.count(props[propName]) !== 2) return new Error( `"${propName}" must be exactly two transition components.`