@wavelengthusaf/components 2.4.0 → 2.5.0

package/README.md

@@ -14,6 +14,12 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 2.5.0
+
+- 03/06/2025
+- Added a new component, WavelengthDragAndDrop
+- Updated WavelengthTextField component to take in a prop called type
+
 ### 2.4.0
 
 - 03/03/2025

package/dist/cjs/index.cjs

@@ -4613,6 +4613,70 @@ function WavelengthSpinningLogo({ svg = /* @__PURE__ */ _jsxruntime.jsx.call(voi
   return loadingSymbol;
 }
 
+// src/components/PageComponents/WavelengthDragAndDrop.tsx
+
+function WavelengthDragAndDrop({
+  width: width2 = "550px",
+  height: height2 = "230px",
+  onFilesSelected,
+  border: border2,
+  textColor,
+  fontSize = "12px",
+  allowedFileMIME,
+  allowedFileExtensions,
+  backgroundColor: backgroundColor2 = "transparent"
+}) {
+  const handleFileChange = (event) => {
+    const selectedFiles = event.target.files;
+    if (selectedFiles && selectedFiles.length > 0) {
+      const newFiles = Array.from(selectedFiles);
+      onFilesSelected(newFiles);
+    }
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    const droppedFiles = event.dataTransfer.files;
+    if (droppedFiles.length > 0) {
+      const newFiles = Array.from(droppedFiles);
+      const allowedTypes = allowedFileMIME ? allowedFileMIME : "*/*";
+      const validFiles = newFiles.filter((file) => allowedTypes === "*/*" || allowedTypes.includes(file.type));
+      if (validFiles.length > 0) {
+        onFilesSelected(validFiles);
+      } else {
+        alert(`Invalid file type`);
+      }
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      style: {
+        backgroundColor: backgroundColor2,
+        border: border2 ? border2 : "1px dashed rgba(14, 178, 178, 1)",
+        borderRadius: "8px",
+        paddingTop: "10px",
+        boxSizing: "border-box",
+        width: width2,
+        height: height2,
+        cursor: "pointer",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "scroll"
+      },
+      onDrop: handleDrop,
+      onDragOver: (event) => event.preventDefault(),
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { fontSize, color: textColor }, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { type: "file", hidden: true, multiple: true, id: "browse", onChange: handleFileChange, accept: allowedFileExtensions }),
+        "Drag File here or",
+        " ",
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: "browse", style: { textDecoration: "underline", cursor: "pointer" }, children: "select from files" })
+      ] })
+    }
+  );
+}
+
 // src/components/footers/WavelengthFooter/WavelengthFooter.tsx
 
 var _Box = require('@mui/material/Box'); var _Box2 = _interopRequireDefault(_Box);
@@ -5817,6 +5881,7 @@ function WavelengthTextField(props) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _TextField2.default,
     {
+      type: props.type,
       required: props.required,
       label: props.label,
       onChange: (e) => {
@@ -5898,7 +5963,8 @@ function WavelengthTextField(props) {
 
 
 
-exports.AppLogo = AppLogo; exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.DefaultCarousel = DefaultCarousel; exports.DefaultIcon = DefaultIcon; exports.DefaultPagination = DefaultPagination; exports.ManyPlanesComponent = ManyPlanesComponent; exports.NotAvailablePage = NotAvailablePage; exports.SearchTextField = SearchTextField; exports.SliderCardCarousel = SliderCardCarousel; exports.TestSnackbar = TestSnackbar; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTextField = WavelengthTextField; exports.WavelengthTitleBar = WavelengthTitleBar; exports.add = add; exports.ascendingRange = ascendingRange; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.range = range; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
+
+exports.AppLogo = AppLogo; exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.DefaultCarousel = DefaultCarousel; exports.DefaultIcon = DefaultIcon; exports.DefaultPagination = DefaultPagination; exports.ManyPlanesComponent = ManyPlanesComponent; exports.NotAvailablePage = NotAvailablePage; exports.SearchTextField = SearchTextField; exports.SliderCardCarousel = SliderCardCarousel; exports.TestSnackbar = TestSnackbar; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTextField = WavelengthTextField; exports.WavelengthTitleBar = WavelengthTitleBar; exports.add = add; exports.ascendingRange = ascendingRange; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.range = range; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
 /*! Bundled license information:
 
 react-is/cjs/react-is.production.min.js: