From cf6cfe87b46a2a3eb2913209092ab4c5639e75c3 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 11 Jun 2020 17:27:15 +0800
Subject: feat(front): Service worker is coming!

---
 Timeline/ClientApp/src/app/common/FileInput.tsx | 41 +++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 Timeline/ClientApp/src/app/common/FileInput.tsx

(limited to 'Timeline/ClientApp/src/app/common/FileInput.tsx')

diff --git a/Timeline/ClientApp/src/app/common/FileInput.tsx b/Timeline/ClientApp/src/app/common/FileInput.tsx
new file mode 100644
index 00000000..20da7b71
--- /dev/null
+++ b/Timeline/ClientApp/src/app/common/FileInput.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import clsx from 'clsx';
+
+import { ExcludeKey } from '../type-utilities';
+
+export interface FileInputProps
+  extends ExcludeKey<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'type' | 'id'
+  > {
+  inputId?: string;
+  labelText: string;
+  color?: string;
+  className?: string;
+}
+
+const FileInput: React.FC<FileInputProps> = props => {
+  const { inputId, labelText, color, className, ...otherProps } = props;
+
+  const realInputId = React.useMemo<string>(() => {
+    if (inputId != null) return inputId;
+    return (
+      'file-input-' +
+      (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
+    );
+  }, [inputId]);
+
+  return (
+    <>
+      <input className="d-none" type="file" id={realInputId} {...otherProps} />
+      <label
+        htmlFor={realInputId}
+        className={clsx('btn', 'btn-' + (color ?? 'primary'), className)}
+      >
+        {labelText}
+      </label>
+    </>
+  );
+};
+
+export default FileInput;
-- 
cgit v1.2.3