From 80f65eb9033b76e1d7c9cc1a373310535f216940 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Wed, 9 Nov 2022 02:23:49 +0000
Subject: [PATCH] feat: support for keyboard and button file
---
examples/web/react/components/button/button.css | 2 ++
examples/web/react/components/button/button.tsx | 11 +++++++++--
2 files changed, 11 insertions(+), 2 deletions(-)
diff --git a/examples/web/react/components/button/button.css b/examples/web/react/components/button/button.css
index b83e604f..d80a27d2 100644
--- a/examples/web/react/components/button/button.css
+++ b/examples/web/react/components/button/button.css
@@ -49,10 +49,12 @@
position: relative;
}
+.button.simple:focus,
.button.simple:hover {
background-color: #50cb93;
}
+.button.simple.red:focus,
.button.simple.red:hover {
background-color: #e63946;
}
diff --git a/examples/web/react/components/button/button.tsx b/examples/web/react/components/button/button.tsx
index f57f5530..5c5a734b 100644
--- a/examples/web/react/components/button/button.tsx
+++ b/examples/web/react/components/button/button.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, FC } from "react";
+import React, { ChangeEvent, FC, useRef } from "react";
import "./button.css";
@@ -37,6 +37,7 @@ export const Button: FC<ButtonProps> = ({
file ? "file" : "",
...style
].join(" ");
+ const fileRef = useRef<HTMLInputElement>(null);
const onFileChange = (event: ChangeEvent<HTMLInputElement>) => {
if (!event.target.files) return;
if (event.target.files.length === 0) return;
@@ -54,6 +55,7 @@ export const Button: FC<ButtonProps> = ({
};
const onKeyPress = (event: React.KeyboardEvent) => {
if (event.key !== "Enter") return;
+ if (file) fileRef.current?.click();
onClick && onClick();
};
const renderSimple = () => (
@@ -77,7 +79,12 @@ export const Button: FC<ButtonProps> = ({
>
{image && <img src={image} alt={imageAlt ?? text ?? "button"} />}
{file && (
- <input type="file" accept={accept} onChange={onFileChange} />
+ <input
+ ref={fileRef}
+ type="file"
+ accept={accept}
+ onChange={onFileChange}
+ />
)}
<span>{text}</span>
</span>
--
GitLab