Timeline/ClientApp/src/app/common/FileInput.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

import React from "react";
import clsx from "clsx";

import { ExcludeKey } from "../utilities/type";

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;