|
@@ -1,6 +1,6 @@
|
|
|
import "./ToolIcon.scss";
|
|
|
|
|
|
-import React, { useEffect } from "react";
|
|
|
+import React from "react";
|
|
|
|
|
|
type ToolIconSize = "s" | "m";
|
|
|
|
|
@@ -30,25 +30,10 @@ export const ToolButton = React.forwardRef(function(
|
|
|
props: ToolButtonProps,
|
|
|
ref,
|
|
|
) {
|
|
|
- const innerRef = React.useRef<HTMLInputElement | HTMLButtonElement | null>(
|
|
|
- null,
|
|
|
- );
|
|
|
+ const innerRef = React.useRef(null);
|
|
|
React.useImperativeHandle(ref, () => innerRef.current);
|
|
|
const sizeCn = `ToolIcon_size_${props.size || DEFAULT_SIZE}`;
|
|
|
|
|
|
- const prevChecked = React.useRef<boolean>(
|
|
|
- "checked" in props && props.checked,
|
|
|
- );
|
|
|
-
|
|
|
- useEffect(() => {
|
|
|
- if (props.type !== "button") {
|
|
|
- if (props.checked && !prevChecked.current && innerRef.current) {
|
|
|
- innerRef.current.focus();
|
|
|
- }
|
|
|
- prevChecked.current = props.checked;
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
if (props.type === "button")
|
|
|
return (
|
|
|
<button
|
|
@@ -57,7 +42,7 @@ export const ToolButton = React.forwardRef(function(
|
|
|
aria-label={props["aria-label"]}
|
|
|
type="button"
|
|
|
onClick={props.onClick}
|
|
|
- ref={node => (innerRef.current = node)}
|
|
|
+ ref={innerRef}
|
|
|
>
|
|
|
<div className="ToolIcon__icon" aria-hidden="true">
|
|
|
{props.icon || props.label}
|
|
@@ -76,7 +61,7 @@ export const ToolButton = React.forwardRef(function(
|
|
|
id={props.id}
|
|
|
onChange={props.onChange}
|
|
|
checked={props.checked}
|
|
|
- ref={node => (innerRef.current = node)}
|
|
|
+ ref={innerRef}
|
|
|
/>
|
|
|
<div className="ToolIcon__icon">{props.icon}</div>
|
|
|
</label>
|