@dxc-technology/halstack-react 4.0.1 → 5.0.0

package/upload/Upload.js

@@ -1,205 +0,0 @@
-"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/upload/buttons-upload/ButtonsUpload.js

@@ -1,135 +0,0 @@
-"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/upload/buttons-upload/Icons.js

@@ -1,40 +0,0 @@
-"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;