@dxc-technology/halstack-react 0.0.0-0085b72

package/dist/upload/Upload.js

@@ -0,0 +1,205 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _DragAndDropArea = _interopRequireDefault(require("./dragAndDropArea/DragAndDropArea"));
+
+var _FilesToUpload = _interopRequireDefault(require("./files-upload/FilesToUpload"));
+
+var _Transactions = _interopRequireDefault(require("./transactions/Transactions"));
+
+var _variables = require("../common/variables.js");
+
+function _templateObject() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-width: 100%;\n  height: 400px;\n  box-shadow: 0px 3px 6px #00000029;\n  border-radius: 4px;\n  display: flex;\n  flex-direction: row;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+var DxcUpload = function DxcUpload(_ref) {
+  var callbackUpload = _ref.callbackUpload,
+      margin = _ref.margin,
+      _ref$tabIndex = _ref.tabIndex,
+      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      files = _useState2[0],
+      setFiles = _useState2[1];
+
+  var getFilesToUpload = function getFilesToUpload() {
+    return files.filter(function (file) {
+      return file.status === "pending";
+    }).map(function (file) {
+      var fileInfo = {
+        name: file.name,
+        type: file.type,
+        image: file.image,
+        status: file.status
+      };
+
+      fileInfo.deleteFile = function () {
+        var uploadFiles = [];
+        files.forEach(function (item) {
+          return uploadFiles.push(item);
+        });
+        var fileIndex = uploadFiles.indexOf(file, 0);
+
+        if (fileIndex > -1) {
+          uploadFiles.splice(fileIndex, 1);
+          setFiles(uploadFiles);
+        }
+      };
+
+      return fileInfo;
+    });
+  };
+
+  var getTransactionsFiles = function getTransactionsFiles() {
+    return files.filter(function (file) {
+      return file.status === "success" || file.status === "error" || file.status === "processing";
+    }).map(function (file) {
+      return {
+        name: file.name,
+        type: file.type,
+        image: file.image,
+        status: file.status
+      };
+    });
+  };
+
+  var getFilePreview = function getFilePreview(file) {
+    return new Promise(function (resolve) {
+      var reader = new FileReader();
+      reader.readAsDataURL(file);
+
+      reader.onload = function (e) {
+        resolve(e.target.result);
+      };
+    });
+  };
+
+  var onDragHandler = function onDragHandler(filesToAdd) {
+    setFiles([].concat((0, _toConsumableArray2["default"])(files), (0, _toConsumableArray2["default"])(filesToAdd.map(function (file) {
+      var fileToAdd = {
+        status: "pending",
+        name: file.name,
+        type: file.type
+      };
+      return fileToAdd;
+    }))));
+    Promise.all(filesToAdd.map(function (fileToAdd) {
+      return getFilePreview(fileToAdd);
+    })).then(function (previews) {
+      setFiles([].concat((0, _toConsumableArray2["default"])(files), (0, _toConsumableArray2["default"])(filesToAdd.map(function (file, index) {
+        var fileToAdd = {
+          status: "pending",
+          name: file.name,
+          type: file.type,
+          image: previews[index]
+        };
+        return fileToAdd;
+      }))));
+    });
+  };
+
+  var onUploadHandler = function onUploadHandler() {
+    var uploadedFiles = [];
+    files.forEach(function (file) {
+      uploadedFiles = [].concat((0, _toConsumableArray2["default"])(uploadedFiles), [file]);
+    });
+    uploadedFiles.forEach(function (file) {
+      if (file.status === "pending") {
+        file.status = "processing";
+
+        if (typeof callbackUpload === "function") {
+          callbackUpload(file).then(function () {
+            file.status = "success";
+            uploadedFiles = getTransactionsFiles();
+            setFiles(uploadedFiles);
+          })["catch"](function (err) {
+            file.status = "error";
+            file.message = err;
+            uploadedFiles = getTransactionsFiles();
+            setFiles(uploadedFiles);
+          })["finally"]();
+        }
+      }
+
+      setFiles(uploadedFiles);
+    });
+  };
+
+  var filesToUpload = getFilesToUpload();
+  var transactionFiles = getTransactionsFiles();
+  return _react["default"].createElement(DXCUpload, {
+    margin: margin
+  }, transactionFiles && transactionFiles.length !== 0 && _react["default"].createElement(_Transactions["default"], {
+    tabIndexValue: tabIndex,
+    transactions: transactionFiles
+  }), filesToUpload && filesToUpload.length === 0 && transactionFiles && transactionFiles.length === 0 && _react["default"].createElement(_DragAndDropArea["default"], {
+    dashed: false,
+    addFile: onDragHandler,
+    tabIndexValue: tabIndex
+  }) || filesToUpload && filesToUpload.length === 0 && transactionFiles && transactionFiles.length !== 0 && _react["default"].createElement(_DragAndDropArea["default"], {
+    dashed: true,
+    addFile: onDragHandler,
+    tabIndexValue: tabIndex
+  }), filesToUpload && filesToUpload.length !== 0 && _react["default"].createElement(_FilesToUpload["default"], {
+    filesToUpload: filesToUpload,
+    addFile: onDragHandler,
+    onUpload: onUploadHandler,
+    tabIndexValue: tabIndex
+  }));
+};
+
+DxcUpload.propTypes = {
+  callbackUpload: _propTypes["default"].func,
+  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)))]),
+  tabIndex: _propTypes["default"].number
+};
+
+var DXCUpload = _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 _default = DxcUpload;
+exports["default"] = _default;

package/dist/upload/buttons-upload/ButtonsUpload.js

@@ -0,0 +1,135 @@
+"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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _Button = _interopRequireDefault(require("../../button/Button"));
+
+var _Icons = require("./Icons");
+
+var _useTheme = _interopRequireDefault(require("../../useTheme.js"));
+
+var _BackgroundColorContext = require("../../BackgroundColorContext.js");
+
+function _templateObject3() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  margin-right: 5px;\n  & svg {\n    fill: ", ";\n  }\n"]);
+
+  _templateObject3 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject2() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  color: ", ";\n  margin-right: 50px;\n"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: 80px;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+var DxcButtonsUpload = function DxcButtonsUpload(_ref) {
+  var addFile = _ref.addFile,
+      onUpload = _ref.onUpload;
+  var colorsTheme = (0, _useTheme["default"])();
+
+  var selectFile = function selectFile(e) {
+    var filesObject = e.target.files;
+
+    if (filesObject && filesObject.length > 0) {
+      var filesArray = Object.keys(filesObject).map(function (key) {
+        return filesObject[key];
+      });
+      addFile(filesArray);
+    }
+  };
+
+  var handleClick = function handleClick() {
+    document.getElementById("chooseFiles").click();
+  };
+
+  return _react["default"].createElement(_styledComponents.ThemeProvider, {
+    theme: colorsTheme.upload
+  }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+    color: colorsTheme.upload.backgroundColor
+  }, _react["default"].createElement(DXCButtonsUpload, null, _react["default"].createElement(DragAndDropLabel, null, _react["default"].createElement(DragAndDropIconContainer, null, _Icons.dragAndDropIcon), "Drag and Drop area"), _react["default"].createElement(_Button["default"], {
+    margin: {
+      right: "small"
+    },
+    mode: "text",
+    label: "CHOOSE FILES",
+    onClick: handleClick
+  }), _react["default"].createElement("input", {
+    id: "chooseFiles",
+    type: "file",
+    multiple: true,
+    onChange: selectFile,
+    style: {
+      display: "none"
+    }
+  }), _react["default"].createElement(_Button["default"], {
+    label: "UPLOAD",
+    iconPosition: "after",
+    icon: _Icons.uploadIcon,
+    onClick: onUpload
+  }))));
+};
+
+DxcButtonsUpload.propTypes = {
+  addFile: _propTypes["default"].func,
+  onUpload: _propTypes["default"].func
+};
+
+var DXCButtonsUpload = _styledComponents["default"].div(_templateObject());
+
+var DragAndDropLabel = _styledComponents["default"].div(_templateObject2(), function (props) {
+  return props.theme.fontFamily;
+}, function (props) {
+  return props.theme.dragAndDropAreaTextFontSize;
+}, function (props) {
+  return props.theme.dragAndDropAreaTextFontStyle;
+}, function (props) {
+  return props.theme.dragAndDropAreaTextFontWeight;
+}, function (props) {
+  return props.theme.dragAndDropAreaTextFontTextTransform;
+}, function (props) {
+  return props.theme.dragAndDropAreaTextFontColor;
+});
+
+var DragAndDropIconContainer = _styledComponents["default"].div(_templateObject3(), function (props) {
+  return props.theme.dragAndDropAreaIconSize;
+}, function (props) {
+  return props.theme.dragAndDropAreaIconSize;
+}, function (props) {
+  return props.theme.dragAndDropAreaIconColor;
+});
+
+var _default = DxcButtonsUpload;
+exports["default"] = _default;

package/dist/upload/buttons-upload/Icons.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dragAndDropIcon = exports.uploadIcon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var uploadIcon = _react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "#FFFFFF"
+}, _react["default"].createElement("path", {
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}), _react["default"].createElement("path", {
+  d: "M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"
+}));
+
+exports.uploadIcon = uploadIcon;
+
+var dragAndDropIcon = _react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "#666666"
+}, _react["default"].createElement("path", {
+  fill: "none",
+  d: "M0 0h24v24H0V0z"
+}), _react["default"].createElement("path", {
+  d: "M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.89 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9c-1.11 0-2 .9-2 2v10c0 1.1.89 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z"
+}));
+
+exports.dragAndDropIcon = dragAndDropIcon;