Fix keyboard shortcut (#587)

* Fix keyboard shortcut

Co-authored-by: David Luzar <luzar.david@gmail.com>
This commit is contained in:
Bakhtiiar Muzakparov 2020-01-29 16:31:49 +00:00 committed by GitHub
parent 63c685af73
commit cc3d71f13c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,6 +1,6 @@
import "./ToolIcon.scss";
import React from "react";
import React, { useEffect } from "react";
type ToolIconSize = "s" | "m";
@ -30,10 +30,25 @@ export const ToolButton = React.forwardRef(function(
props: ToolButtonProps,
ref,
) {
const innerRef = React.useRef(null);
const innerRef = React.useRef<HTMLInputElement | HTMLButtonElement | null>(
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
@ -42,7 +57,7 @@ export const ToolButton = React.forwardRef(function(
aria-label={props["aria-label"]}
type="button"
onClick={props.onClick}
ref={innerRef}
ref={node => (innerRef.current = node)}
>
<div className="ToolIcon__icon" aria-hidden="true">
{props.icon || props.label}
@ -61,7 +76,7 @@ export const ToolButton = React.forwardRef(function(
id={props.id}
onChange={props.onChange}
checked={props.checked}
ref={innerRef}
ref={node => (innerRef.current = node)}
/>
<div className="ToolIcon__icon">{props.icon}</div>
</label>