@dxc-technology/halstack-react 3.2.0 → 4.0.0

package/file-input/FileInput.js

@@ -0,0 +1,644 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _uuid = require("uuid");
+
+var _variables = require("../common/variables.js");
+
+var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+
+var _Button = _interopRequireDefault(require("../button/Button"));
+
+var _FileItem = _interopRequireDefault(require("./FileItem"));
+
+function _templateObject11() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"]);
+
+  _templateObject11 = function _templateObject11() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject10() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin-top: ", ";\n  margin-left: ", ";\n"]);
+
+  _templateObject10 = function _templateObject10() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject9() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  margin-top: 0.25rem;\n"]);
+
+  _templateObject9 = function _templateObject9() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject8() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n"]);
+
+  _templateObject8 = function _templateObject8() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject7() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  padding: ", ";\n  input[type=\"file\"] {\n    visibility: hidden;\n    position: absolute;\n    width: 0px;\n    height: 0px;\n  }\n"]);
+
+  _templateObject7 = function _templateObject7() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject6() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  margin-top: 0.25rem;\n\n  input[type=\"file\"] {\n    visibility: hidden;\n    position: absolute;\n    width: 0px;\n    height: 0px;\n  }\n"]);
+
+  _templateObject6 = function _templateObject6() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject5() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: ", ";\n"]);
+
+  _templateObject5 = function _templateObject5() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject4() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: calc(320px - 2px);\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  background-color: ", ";\n  border-color: ", ";\n  cursor: ", ";\n"]);
+
+  _templateObject4 = function _templateObject4() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject3() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"]);
+
+  _templateObject3 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject2() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  width: fit-content;\n"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+var audioIcon = _react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "currentColor"
+}, _react["default"].createElement("path", {
+  fill: "none",
+  d: "M0 0h24v24H0V0z"
+}), _react["default"].createElement("path", {
+  d: "M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z"
+}));
+
+var videoIcon = _react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "currentColor"
+}, _react["default"].createElement("path", {
+  d: "M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"
+}), _react["default"].createElement("path", {
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}));
+
+var fileIcon = _react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "currentColor"
+}, _react["default"].createElement("path", {
+  fill: "none",
+  d: "M0 0h24v24H0V0z"
+}), _react["default"].createElement("path", {
+  d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"
+}));
+
+var DxcFileInput = function DxcFileInput(_ref) {
+  var _ref$name = _ref.name,
+      name = _ref$name === void 0 ? "" : _ref$name,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? "file" : _ref$mode,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? "" : _ref$label,
+      _ref$helperText = _ref.helperText,
+      helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+      accept = _ref.accept,
+      minSize = _ref.minSize,
+      maxSize = _ref.maxSize,
+      _ref$showPreview = _ref.showPreview,
+      showPreview = _ref$showPreview === void 0 ? false : _ref$showPreview,
+      _ref$multiple = _ref.multiple,
+      multiple = _ref$multiple === void 0 ? true : _ref$multiple,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      callbackFile = _ref.callbackFile,
+      value = _ref.value,
+      margin = _ref.margin,
+      tabIndex = _ref.tabIndex;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isDragging = _useState2[0],
+      setIsDragging = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      files = _useState4[0],
+      setFiles = _useState4[1];
+
+  var _useState5 = (0, _react.useState)("file-input-".concat((0, _uuid.v4)())),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 1),
+      fileInputId = _useState6[0];
+
+  var colorsTheme = (0, _useTheme["default"])();
+  (0, _react.useEffect)(function () {
+    if (value) {
+      setFiles(value);
+    } else {
+      setFiles([]);
+    }
+  }, [value]);
+
+  var handleClick = function handleClick() {
+    document.getElementById(fileInputId).click();
+  };
+
+  var checkFileSize = function checkFileSize(file) {
+    if (file.size < minSize) {
+      return "File size must be greater than min size.";
+    }
+
+    if (file.size > maxSize) {
+      return "File size must be less than max size.";
+    }
+  };
+
+  var getFilePreview = function getFilePreview(file) {
+    if (file.type.includes("video")) {
+      return videoIcon;
+    }
+
+    if (file.type.includes("audio")) {
+      return audioIcon;
+    }
+
+    if (file.type.includes("image")) {
+      return new Promise(function (resolve) {
+        var reader = new FileReader();
+        reader.readAsDataURL(file);
+
+        reader.onload = function (e) {
+          resolve(e.target.result);
+        };
+      });
+    }
+
+    return fileIcon;
+  };
+
+  var getFilesToAdd =
+  /*#__PURE__*/
+  function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(
+    /*#__PURE__*/
+    _regenerator["default"].mark(function _callee(selectedFiles) {
+      var filesToAdd;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return Promise.all(selectedFiles.map(function (selectedFile) {
+                return getFilePreview(selectedFile);
+              })).then(function (previews) {
+                return selectedFiles.map(function (selectedFile, index) {
+                  var fileInfo = {
+                    file: selectedFile,
+                    error: checkFileSize(selectedFile),
+                    preview: previews[index]
+                  };
+                  return fileInfo;
+                });
+              });
+
+            case 2:
+              filesToAdd = _context.sent;
+              return _context.abrupt("return", filesToAdd);
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function getFilesToAdd(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var addFile =
+  /*#__PURE__*/
+  function () {
+    var _ref3 = (0, _asyncToGenerator2["default"])(
+    /*#__PURE__*/
+    _regenerator["default"].mark(function _callee2(selectedFiles) {
+      var filesToAdd, finalFiles, fileToAdd;
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!multiple) {
+                _context2.next = 8;
+                break;
+              }
+
+              _context2.next = 3;
+              return getFilesToAdd(selectedFiles);
+
+            case 3:
+              filesToAdd = _context2.sent;
+              finalFiles = [].concat((0, _toConsumableArray2["default"])(files), (0, _toConsumableArray2["default"])(filesToAdd));
+
+              if (typeof callbackFile === "function") {
+                callbackFile(finalFiles);
+              }
+
+              _context2.next = 19;
+              break;
+
+            case 8:
+              if (!(selectedFiles.length === 1)) {
+                _context2.next = 14;
+                break;
+              }
+
+              _context2.next = 11;
+              return getFilesToAdd(selectedFiles);
+
+            case 11:
+              _context2.t0 = _context2.sent;
+              _context2.next = 17;
+              break;
+
+            case 14:
+              _context2.next = 16;
+              return getFilesToAdd([selectedFiles[0]]);
+
+            case 16:
+              _context2.t0 = _context2.sent;
+
+            case 17:
+              fileToAdd = _context2.t0;
+
+              if (typeof callbackFile === "function") {
+                callbackFile(fileToAdd);
+              }
+
+            case 19:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function addFile(_x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var selectFiles = function selectFiles(e) {
+    var selectedFiles = e.target.files;
+    var filesArray = Object.keys(selectedFiles).map(function (key) {
+      return selectedFiles[key];
+    });
+    addFile(filesArray);
+  };
+
+  var onDelete = function onDelete(fileName) {
+    var filesCopy = (0, _toConsumableArray2["default"])(files);
+    var fileToRemove = filesCopy.find(function (file) {
+      return file.file.name === fileName;
+    });
+    var fileIndex = filesCopy.indexOf(fileToRemove);
+    filesCopy.splice(fileIndex, 1);
+
+    if (typeof callbackFile === "function") {
+      callbackFile(filesCopy);
+    }
+  };
+
+  var handleDrag = function handleDrag(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  var handleDragIn = function handleDragIn(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
+      setIsDragging(true);
+    }
+  };
+
+  var handleDragOut = function handleDragOut(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  var handleDrop = function handleDrop(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    var filesObject = e.dataTransfer.files;
+
+    if (filesObject && filesObject.length > 0) {
+      var filesArray = Object.keys(filesObject).map(function (key) {
+        return filesObject[key];
+      });
+      addFile(filesArray);
+    }
+  };
+
+  return _react["default"].createElement(_styledComponents.ThemeProvider, {
+    theme: colorsTheme.fileInput
+  }, _react["default"].createElement(FileInputContainer, {
+    margin: margin,
+    name: name,
+    tabIndex: tabIndex
+  }, _react["default"].createElement(Label, {
+    htmlFor: fileInputId,
+    disabled: disabled
+  }, label), _react["default"].createElement(HelperText, {
+    disabled: disabled
+  }, helperText), mode === "file" ? _react["default"].createElement(FileContainer, {
+    multiple: multiple,
+    files: files
+  }, _react["default"].createElement(ButtonErrorContainer, null, _react["default"].createElement(_Button["default"], {
+    mode: "secondary",
+    label: "Select files",
+    onClick: handleClick,
+    disabled: disabled,
+    size: "medium",
+    tabIndex: tabIndex
+  }), _react["default"].createElement("input", {
+    id: fileInputId,
+    type: "file",
+    accept: accept,
+    multiple: multiple,
+    onChange: selectFiles
+  }), files.length === 1 && files.map(function (file) {
+    return file.error && mode === "file" && !multiple && _react["default"].createElement(ErrorMessage, null, file.error);
+  })), files.map(function (file) {
+    return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(FileItemContainer, {
+      mode: mode,
+      multiple: multiple,
+      files: files
+    }, _react["default"].createElement(_FileItem["default"], {
+      mode: mode,
+      multiple: multiple,
+      name: file.file.name,
+      error: file.error,
+      showPreview: mode === "file" && !multiple ? false : showPreview,
+      numFiles: files.length,
+      preview: file.preview,
+      type: file.file.type,
+      onDelete: onDelete
+    })));
+  })) : _react["default"].createElement(Container, null, _react["default"].createElement(DragDropArea, {
+    isDragging: isDragging,
+    disabled: disabled,
+    mode: mode,
+    onDrop: handleDrop,
+    onDragEnter: handleDragIn,
+    onDragOver: handleDrag,
+    onDragLeave: handleDragOut
+  }, _react["default"].createElement(ButtonContainer, {
+    mode: mode
+  }, _react["default"].createElement(_Button["default"], {
+    mode: "secondary",
+    label: "Select",
+    onClick: handleClick,
+    disabled: disabled,
+    size: "fitContent"
+  }), _react["default"].createElement("input", {
+    id: fileInputId,
+    type: "file",
+    accept: accept,
+    multiple: multiple,
+    onChange: selectFiles
+  })), _react["default"].createElement(DropLabel, {
+    disabled: disabled
+  }, "or drop files")), files.map(function (file) {
+    return _react["default"].createElement(FileItemContainer, {
+      mode: mode,
+      multiple: multiple,
+      files: files
+    }, _react["default"].createElement(_FileItem["default"], {
+      mode: mode,
+      multiple: multiple,
+      name: file.file.name,
+      error: file.error,
+      showPreview: showPreview,
+      numFiles: files.length,
+      preview: file.preview,
+      type: file.file.type,
+      onDelete: onDelete
+    }));
+  }))));
+};
+
+var FileInputContainer = _styledComponents["default"].div(_templateObject(), function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
+}, function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
+}, function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
+}, function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
+}, function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
+});
+
+var Label = _styledComponents["default"].label(_templateObject2(), function (props) {
+  return props.disabled ? props.theme.disabledLabelFontColor : props.theme.labelFontColor;
+}, function (props) {
+  return props.theme.labelFontFamily;
+}, function (props) {
+  return props.theme.labelFontSize;
+}, function (props) {
+  return props.theme.labelFontWeight;
+}, function (props) {
+  return props.theme.labelLineHeight;
+});
+
+var HelperText = _styledComponents["default"].span(_templateObject3(), function (props) {
+  return props.disabled ? props.theme.disabledHelperTextFontcolor : props.theme.helperTextFontColor;
+}, function (props) {
+  return props.theme.helperTextFontFamily;
+}, function (props) {
+  return props.theme.helperTextFontSize;
+}, function (props) {
+  return props.theme.helperTextFontWeight;
+}, function (props) {
+  return props.theme.helperTextLineHeight;
+});
+
+var DragDropArea = _styledComponents["default"].div(_templateObject4(), function (props) {
+  return props.mode === "filedrop" ? "calc(48px - 2px)" : "calc(160px - 2px)";
+}, function (props) {
+  return props.mode === "filedrop" ? "row" : "column";
+}, function (props) {
+  return props.theme.dropBorderRadius;
+}, function (props) {
+  return !props.isDragging ? props.theme.dropBorderThickness : "2px";
+}, function (props) {
+  return !props.isDragging ? props.theme.dropBorderStyle : "solid";
+}, function (props) {
+  return props.isDragging && props.theme.dragoverDropBackgroundColor;
+}, function (props) {
+  return props.disabled ? props.theme.disabledDropBorderColor : props.isDragging ? props.theme.focusDropBorderColor : props.theme.dropBorderColor;
+}, function (props) {
+  return props.disabled && "not-allowed";
+});
+
+var FileContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
+  return props.multiple || props.files.length > 1 ? "column" : "row";
+});
+
+var ButtonErrorContainer = _styledComponents["default"].div(_templateObject6());
+
+var ButtonContainer = _styledComponents["default"].div(_templateObject7(), function (props) {
+  return props.mode === "filedrop" ? "2px 12px 2px 2px" : "47px 122px 8px 122px";
+});
+
+var DropLabel = _styledComponents["default"].span(_templateObject8(), function (props) {
+  return props.disabled ? props.theme.disabledDropLabelFontColor : props.theme.dropLabelFontColor;
+}, function (props) {
+  return props.theme.dropLabelFontFamily;
+}, function (props) {
+  return props.theme.dropLabelFontSize;
+}, function (props) {
+  return props.theme.dropLabelFontWeight;
+});
+
+var Container = _styledComponents["default"].div(_templateObject9());
+
+var FileItemContainer = _styledComponents["default"].div(_templateObject10(), function (props) {
+  return (props.multiple || props.files.length > 1 || props.mode !== "file") && "4px";
+}, function (props) {
+  return props.mode === "file" && props.files.length === 1 && !props.multiple && "4px";
+});
+
+var ErrorMessage = _styledComponents["default"].div(_templateObject11(), function (props) {
+  return props.theme.errorMessageFontColor;
+}, function (props) {
+  return props.theme.errorMessageFontFamily;
+}, function (props) {
+  return props.theme.errorMessageFontSize;
+}, function (props) {
+  return props.theme.errorMessageFontWeight;
+}, function (props) {
+  return props.theme.errorMessageLineHeight;
+});
+
+DxcFileInput.propTypes = {
+  name: _propTypes["default"].string,
+  mode: _propTypes["default"].oneOf(["file", "filedrop", "dropzone"]),
+  label: _propTypes["default"].string,
+  helperText: _propTypes["default"].string,
+  accept: _propTypes["default"].array,
+  maxSize: _propTypes["default"].number,
+  minSize: _propTypes["default"].number,
+  multiple: _propTypes["default"].bool,
+  showPreview: _propTypes["default"].bool,
+  disabled: _propTypes["default"].bool,
+  callbackFile: _propTypes["default"].func,
+  value: _propTypes["default"].array,
+  tabIndex: _propTypes["default"].number,
+  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
+    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
+    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
+    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
+  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
+};
+var _default = DxcFileInput;
+exports["default"] = _default;