@luscii-healthtech/web-ui 25.0.0 → 25.1.0

package/dist/components/FileUpload/FileUpload.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+export type FileUploadProps = {
+    /**
+     * The file types that the input should accept.
+     */
+    accept?: string;
+    /**
+     * The maximum size of the file in MBs.
+     */
+    maxFileSize?: number;
+    /**
+     * The name of the field input.
+     */
+    name?: string;
+    /**
+     * The id of the field input.
+     * To be used with a `<label htmlFor={id}>`.
+     */
+    id?: string;
+    onChange?: (file: File) => void;
+    /**
+     * Disallow the user to change the file input value.
+     */
+    isDisabled?: boolean;
+    /**
+     * The text to be displayed on the button controlling the file input.
+     *
+     * @default "Upload a file"
+     */
+    buttonText: string;
+};
+export declare const FileUpload: React.FC<FileUploadProps>;

package/dist/index.d.ts

@@ -92,4 +92,5 @@ export { Dropzone, type DropzoneProps } from "./components/Dropzone";
 export { FilterBar, FilterBarUtils } from "./components/FilterBar";
 export { type Weekday, WeekdaysPicker, } from "./components/WeekdaysPicker/WeekdaysPicker";
 export { default as DragHandle, type DragHandleProps, } from "./components/DragHandle";
+export { FileUpload as File, type FileUploadProps as FileProps, } from "./components/FileUpload/FileUpload";
 export { StatusIndicator } from "./components/StatusIndicator/StatusIndicator";

package/dist/index.development.js

@@ -6016,6 +6016,60 @@ const WeekdaysPicker = (props) => {
 WeekdaysPicker.weekdayNameToIndex = weekdayNameToIndex;
 WeekdaysPicker.indexToWeekdayName = indexToWeekdayName;
 
+const FileUpload = React.forwardRef((props, ref) => {
+  const { accept, maxFileSize, name, id, onChange, isDisabled = false, buttonText = "Upload a file" } = props, otherProps = __rest(props, ["accept", "maxFileSize", "name", "id", "onChange", "isDisabled", "buttonText"]);
+  const [selectedFile, setSelectedFile] = React.useState(null);
+  const fileUploadRef = React.useRef(null);
+  const handleOnUploadClick = () => {
+    var _a;
+    (_a = fileUploadRef.current) === null || _a === void 0 ? void 0 : _a.click();
+  };
+  const handleChangeEvent = (event) => {
+    var _a;
+    const uploadedFile = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+    if (uploadedFile) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(uploadedFile);
+      setSelectedFile(uploadedFile);
+    }
+  };
+  const handleOnUnselectFile = () => {
+    setSelectedFile(null);
+    if (fileUploadRef.current) {
+      fileUploadRef.current.value = "";
+    }
+  };
+  if (selectedFile) {
+    return React__namespace.default.createElement(UploadedFileSection, { file: selectedFile, onRemove: handleOnUnselectFile });
+  }
+  return React__namespace.default.createElement(
+    FlexRow,
+    null,
+    React__namespace.default.createElement(SecondaryButton, { onClick: handleOnUploadClick }, buttonText),
+    React__namespace.default.createElement("input", Object.assign({ type: "file", className: "ui-hidden", accept, size: maxFileSize ? maxFileSize * 1024 * 1024 : void 0, name, id, ref: (element) => {
+      fileUploadRef.current = element;
+      if (ref) {
+        if (typeof ref === "function") {
+          ref(element);
+        } else {
+          ref.current = element;
+        }
+      }
+    }, onChange: handleChangeEvent, disabled: isDisabled }, otherProps))
+  );
+});
+const UploadedFileSection = ({ file, onRemove }) => {
+  return React__namespace.default.createElement(
+    "div",
+    { className: "ui-inline-block ui-flex-row ui-rounded-lg ui-bg-blue-100" },
+    React__namespace.default.createElement(
+      Stack,
+      { axis: "x", justify: "center", align: "center", gap: "xxxs", py: "xxs", px: "m", title: file.name },
+      React__namespace.default.createElement(Text, { truncate: true, className: "ui-max-w-55" }, file.name),
+      React__namespace.default.createElement(TertiaryButton, { icon: "TrashBinIcon", onClick: onRemove })
+    )
+  );
+};
+
 const StatusIndicator = (props) => {
   const { status, children } = props;
   return React__namespace.default.createElement(
@@ -6100,6 +6154,7 @@ exports.EyeClosedIcon = EyeClosedIcon;
 exports.EyeIcon = EyeOpenIcon;
 exports.EyeIconSlashed = EyeClosedIcon;
 exports.EyeOpenIcon = EyeOpenIcon;
+exports.File = FileUpload;
 exports.FilterBar = FilterBar;
 exports.FilterBarUtils = FilterBar_utils;
 exports.FilterIcon = FilterIcon;