@agilemotion/oui-react-js 1.2.7 → 1.2.8

package/dist/components/form/TransferList.js

@@ -0,0 +1,319 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _DataGrid = require("./../DataGrid");
+
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
+require("./TransferList.css");
+
+var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+
+var _BaseField = require("./BaseField");
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
+
+var _RestUtils = require("../../RestUtils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+const useStyles = (0, _styles.makeStyles)(theme => ({
+  root: {
+    margin: 'auto'
+  },
+  cardHeader: {
+    padding: theme.spacing(1, 2)
+  },
+  list: {
+    width: 200,
+    height: 230,
+    backgroundColor: theme.palette.background.paper,
+    overflow: 'auto'
+  },
+  button: {
+    margin: theme.spacing(0.5, 0)
+  }
+}));
+
+const TransferListComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const classes = useStyles();
+  const base = props.base;
+
+  const _React$useState = _react.default.useState([]),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        leftSelection = _React$useState2[0],
+        setLeftSelection = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState(!_Utils.default.isNull(props.config.optionsGrid.dataBinding) ? props.config.optionsGrid.dataBinding : 'options'),
+        _React$useState4 = _slicedToArray(_React$useState3, 1),
+        optionsDataBinding = _React$useState4[0];
+
+  const _React$useState5 = _react.default.useState(!_Utils.default.isNull(props.config.selectionGrid.dataBinding) ? props.config.selectionGrid.dataBinding : 'selected'),
+        _React$useState6 = _slicedToArray(_React$useState5, 1),
+        selectionDataBinding = _React$useState6[0];
+
+  const _React$useState7 = _react.default.useState(null),
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        data = _React$useState8[0],
+        setData = _React$useState8[1];
+
+  const _React$useState9 = _react.default.useState([]),
+        _React$useState10 = _slicedToArray(_React$useState9, 2),
+        rightSelection = _React$useState10[0],
+        setRightSelection = _React$useState10[1];
+
+  const _React$useState11 = _react.default.useState(_Utils.default.getComponentAttribute(props.config, 'label', null)),
+        _React$useState12 = _slicedToArray(_React$useState11, 1),
+        label = _React$useState12[0];
+
+  const _React$useState13 = _react.default.useState(true),
+        _React$useState14 = _slicedToArray(_React$useState13, 2),
+        initializing = _React$useState14[0],
+        setInitializing = _React$useState14[1];
+
+  const loadCompleteHandler = () => {
+    props.loadCompleteHandler(props.config.id);
+
+    if (!_Utils.default.isNull(data) && data[selectionDataBinding].records.length > 0) {
+      let initialValues = [];
+
+      var _iterator = _createForOfIteratorHelper(data[selectionDataBinding].records),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          const record = _step.value;
+          let row = {};
+          row.id = record.map.id;
+          initialValues.push(row);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      updateValue(initialValues);
+    }
+  };
+
+  function updateValue(rows) {
+    let objectRefs = [];
+
+    var _iterator2 = _createForOfIteratorHelper(rows),
+        _step2;
+
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        const item = _step2.value;
+        let objectRef = {};
+        objectRef.id = item.id;
+        objectRefs.push(objectRef);
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+
+    base.handleValueChange(objectRefs.length > 0 ? objectRefs : null);
+  }
+
+  _react.default.useEffect(() => {
+    if (initializing) {
+      if (!_Utils.default.isNull(props.config.dataService)) {
+        let method = props.config.dataService.type === 'remoteObjectProxy' ? _RestUtils.invokeRpc : _RestUtils.invokeRest;
+        method(props.config.dataService, props.handle, props.viewId, result => {
+          let data = props.config.dataService.type === 'remoteObjectProxy' ? result.data : result;
+          setData(data);
+        }, e => {
+          console.error(e);
+
+          _Utils.default.publishSystemErrorMessage(props.viewId);
+        });
+      }
+
+      setInitializing(false);
+    }
+  });
+
+  const handleTransferItemRight = () => {
+    props.optionsListHandle.api.deleteSelectedRows();
+    updateValue(props.selectionListHandle.api.addRows(leftSelection));
+
+    if (props.selectionListHandle.api.numberOfPages > 1) {
+      props.selectionListHandle.api.search();
+    }
+  };
+
+  const handleTransferItemLeft = () => {
+    updateValue(props.selectionListHandle.api.deleteSelectedRows());
+    props.optionsListHandle.api.addRows(rightSelection);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref
+  }, !initializing ? /*#__PURE__*/_react.default.createElement("div", null, label !== null ? /*#__PURE__*/_react.default.createElement(_InputLabel.default, {
+    required: base.required,
+    error: base.hasError
+  }, label) : null, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    container: true,
+    spacing: 2,
+    alignItems: "stretch",
+    className: classes.root,
+    style: {
+      width: '100%',
+      marginTop: '8px',
+      marginBottom: '8px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    item: true,
+    style: {
+      border: "1px solid ".concat(base.hasError ? '#f44336' : '#e1e1e1'),
+      width: '45%',
+      borderRadius: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_DataGrid.DataGrid, {
+    config: props.config.optionsGrid,
+    handle: props.optionsListHandle,
+    ref: /*#__PURE__*/_react.default.createRef(),
+    viewId: props.viewId,
+    data: !_Utils.default.isNull(data) ? data[optionsDataBinding] : null,
+    onSelectionChange: selection => setLeftSelection(selection),
+    filterWrapperClass: 'transferListFilterWraper',
+    loadCompleteHandler: loadCompleteHandler,
+    hasBorder: false
+  })), /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    item: true,
+    style: {
+      margin: 'auto'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    container: true,
+    direction: "column",
+    justify: "center",
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: "outlined",
+    size: "small",
+    className: classes.button,
+    onClick: handleTransferItemRight,
+    disabled: leftSelection.length === 0,
+    "aria-label": "move selected right"
+  }, ">"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: "outlined",
+    size: "small",
+    className: classes.button,
+    onClick: handleTransferItemLeft,
+    disabled: rightSelection.length === 0,
+    "aria-label": "move selected left"
+  }, "<"))), /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    item: true,
+    style: {
+      border: "1px solid ".concat(base.hasError ? '#f44336' : '#e1e1e1'),
+      width: '45%',
+      borderRadius: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_DataGrid.DataGrid, {
+    config: props.config.selectionGrid,
+    handle: props.selectionListHandle,
+    ref: /*#__PURE__*/_react.default.createRef(),
+    viewId: props.viewId,
+    data: !_Utils.default.isNull(data) ? data[selectionDataBinding] : null,
+    onSelectionChange: selection => setRightSelection(selection),
+    filterWrapperClass: 'transferListFilterWraper',
+    loadCompleteHandler: loadCompleteHandler,
+    hasBorder: false
+  })), /*#__PURE__*/_react.default.createElement("p", {
+    className: 'error'
+  }, base.errorMessage))) : null);
+}));
+
+const TransferList = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const _React$useState15 = _react.default.useState({}),
+        _React$useState16 = _slicedToArray(_React$useState15, 1),
+        optionsListHandle = _React$useState16[0];
+
+  const _React$useState17 = _react.default.useState({}),
+        _React$useState18 = _slicedToArray(_React$useState17, 1),
+        selectionListHandle = _React$useState18[0];
+
+  return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
+    reference: ref,
+    getChildren: () => {
+      let children = [];
+      children.push(optionsListHandle);
+      children.push(selectionListHandle);
+      return children;
+    },
+    valueParser: value => {
+      if (!_Utils.default.isNull(value)) {
+        let objectArray = value;
+        let val = [];
+
+        if (objectArray.length > 0) {
+          let type = objectArray[0].type;
+
+          var _iterator3 = _createForOfIteratorHelper(objectArray),
+              _step3;
+
+          try {
+            for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+              const objectArrayElement = _step3.value;
+
+              if (type === 'MapEntityDto') {
+                let objectReference = {};
+                objectReference.id = objectArrayElement.map.id;
+                val.push(objectReference);
+              } else {
+                val.push(objectArrayElement);
+              }
+            }
+          } catch (err) {
+            _iterator3.e(err);
+          } finally {
+            _iterator3.f();
+          }
+        }
+
+        return val;
+      }
+
+      return [];
+    }
+  }), base => /*#__PURE__*/_react.default.createElement(TransferListComponent, _extends({
+    ref: ref,
+    base: base,
+    optionsListHandle: optionsListHandle,
+    selectionListHandle: selectionListHandle
+  }, props)));
+}));
+
+var _default = TransferList;
+exports.default = _default;

package/dist/components/form/UploadField.js

@@ -0,0 +1,286 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.UploadField = exports.DocumentUpload = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _BaseField = require("./BaseField");
+
+var _styles = require("@material-ui/core/styles");
+
+var _DocumentViewer = _interopRequireDefault(require("../DocumentViewer"));
+
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
+var _ApplicationContext = _interopRequireDefault(require("./../../ApplicationContext"));
+
+var _withWidth = require("material-ui/utils/withWidth");
+
+var _TextField = _interopRequireDefault(require("./TextField"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+const useStyles = (0, _styles.makeStyles)(theme => ({
+  button: {
+    margin: theme.spacing(1)
+  },
+  input: {
+    display: 'none'
+  },
+  errorMessageDisplay: {
+    color: 'red'
+  }
+}));
+const location = window.location.protocol + "//" + window.location.hostname;
+
+const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const _React$useState = _react.default.useState(!_Utils.default.isNull(props.initialFile) ? props.initialFile : null),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        viewerFile = _React$useState2[0],
+        setViewerFile = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState(_Utils.default.getComponentAttribute(props.config, 'valueMode', null)),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        valueMode = _React$useState4[0],
+        setValueMode = _React$useState4[1];
+
+  const _React$useState5 = _react.default.useState(!_Utils.default.isNull(props.initialFile) ? [props.initialFile] : null),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        files = _React$useState6[0],
+        setFiles = _React$useState6[1];
+
+  const _React$useState7 = _react.default.useState(true),
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        loading = _React$useState8[0],
+        setLoading = _React$useState8[1];
+
+  const _React$useState9 = _react.default.useState(props.multiple === true),
+        _React$useState10 = _slicedToArray(_React$useState9, 1),
+        multiple = _React$useState10[0];
+
+  const _React$useState11 = _react.default.useState(false),
+        _React$useState12 = _slicedToArray(_React$useState11, 2),
+        show = _React$useState12[0],
+        setShow = _React$useState12[1];
+
+  const classes = useStyles();
+
+  const _React$useState13 = _react.default.useState(ref ? ref : /*#__PURE__*/_react.default.createRef()),
+        _React$useState14 = _slicedToArray(_React$useState13, 2),
+        reference = _React$useState14[0],
+        setReference = _React$useState14[1];
+
+  const _React$useState15 = _react.default.useState(null),
+        _React$useState16 = _slicedToArray(_React$useState15, 2),
+        hasError = _React$useState16[0],
+        setHasError = _React$useState16[1];
+
+  const width = _Utils.default.getComponentAttribute(props.config, 'width', '200px');
+
+  const height = _Utils.default.getComponentAttribute(props.config, 'height', '200px');
+
+  const _React$useState17 = _react.default.useState(""),
+        _React$useState18 = _slicedToArray(_React$useState17, 2),
+        errorMessage = _React$useState18[0],
+        setErrorMessage = _React$useState18[1];
+
+  const base = props.base;
+
+  _react.default.useEffect(() => {
+    setViewerFile(null);
+  }, [props.clearTrigger]);
+
+  _react.default.useEffect(() => {
+    if (!_Utils.default.isNull(props.valueMode)) {
+      setValueMode(props.valueMode);
+    }
+  }, [props.valueMode]);
+
+  const handleViewerLoad = numPages => {
+    setLoading(false);
+  };
+
+  const handleChange = () => event => {
+    let files = event.target.files;
+    var allFiles = [];
+
+    for (var i = 0; i < files.length; i++) {
+      let file = files[i];
+      let reader = new FileReader();
+      reader.readAsDataURL(file);
+
+      reader.onload = () => {
+        let fileInfo = {
+          name: file.name,
+          type: file.type,
+          size: Math.round(file.size / 1000) + ' kB',
+          base64: reader.result,
+          file: file
+        };
+        allFiles.push(fileInfo);
+
+        if (allFiles.length === files.length) {
+          if (multiple === true) {
+            if (!_Utils.default.isNull(props.onUploadHandler)) {
+              props.onUploadHandler(allFiles);
+            }
+          } else {
+            if (!_Utils.default.isNull(props.onUploadHandler)) {
+              props.onUploadHandler(allFiles[0]);
+            }
+
+            setLoading(true);
+            setViewerFile(allFiles[0]);
+          }
+
+          setFiles(allFiles);
+        }
+      };
+
+      reader.onloadend = () => {
+        if (!_Utils.default.isNull(props.form)) {
+          let fileMetaData = {};
+          fileMetaData.name = allFiles[0].name;
+          fileMetaData.type = allFiles[0].type;
+          fileMetaData.size = allFiles[0].size;
+
+          if ('base64' === valueMode) {
+            fileMetaData.url = allFiles[0].base64;
+            base.handleValueChange(fileMetaData);
+          } else {
+            fileMetaData.correlationId = props.config.id;
+            fileMetaData.domain = props.viewId;
+            fileMetaData.cachedFile = true;
+            let file = {};
+            file.correlationId = fileMetaData.correlationId;
+            file.content = allFiles[0].file;
+
+            _ApplicationContext.default.addFile(props.viewId, file);
+
+            base.handleValueChange(fileMetaData);
+          }
+        }
+      };
+    }
+  };
+
+  let defaultImage = null;
+
+  if (props.style === 'IMAGE') {
+    defaultImage = props.config.attributes['defaultImage'];
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("input", {
+    accept: props.style === 'IMAGE' ? "image/jpeg,image/gif,image/png,image/x-eps" : "image/jpeg,image/gif,image/png,application/pdf,image/x-eps",
+    className: classes.input,
+    id: "contained-button-file",
+    disabled: base.disabled,
+    required: base.required,
+    multiple: multiple,
+    onChange: handleChange(),
+    type: "file"
+  }), props.style === 'IMAGE' ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "contained-button-file"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: "contained",
+    component: "span",
+    className: classes.button,
+    disabled: base.disabled,
+    style: {
+      width: width,
+      height: height,
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover',
+      backgroundColor: 'transparent',
+      backgroundImage: !_Utils.default.isNull(viewerFile) ? "url(".concat(viewerFile.base64, ")") : !_Utils.default.isNull(props.config.dataService) ? "url(".concat(location + '/agility/app/files/get/file?fileId=' + (!_Utils.default.isNull(base.value) ? base.value.id : '-1') + '&fileService=' + props.config.dataService.serviceId + (!_Utils.default.isNull(defaultImage) ? '&defaultImage=' + defaultImage : '') + '&access_token=' + sessionStorage.getItem("accessToken") + '&idToken=' + sessionStorage.getItem("idToken"), ")") : "url(".concat(require('./default-avatar.png'), ")")
+    }
+  }))) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "contained-button-file"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: "contained",
+    component: "span",
+    disabled: base.disabled,
+    className: classes.button
+  }, props.config.attributes['label'] ? props.config.attributes['label'] : "Upload File")), /*#__PURE__*/_react.default.createElement("label", null, !_Utils.default.isNull(base.value) ? _Utils.default.isNull(base.value.id) || _Utils.default.isNull(props.config.dataService) ? base.value.name : /*#__PURE__*/_react.default.createElement("a", {
+    href: location + '/agility/app/files/get/file?fileId=' + base.value.id + '&fileService=' + props.config.dataService.serviceId + '&access_token=' + sessionStorage.getItem("accessToken") + '&idToken=' + sessionStorage.getItem("idToken"),
+    target: '_blank'
+  }, base.value.name) : null))), props.showViewer && !multiple || show ? /*#__PURE__*/_react.default.createElement(_DocumentViewer.default, {
+    file: viewerFile,
+    onDocumentLoadSuccess: handleViewerLoad
+  }) : "", hasError ? /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.errorMessageDisplay
+  }, errorMessage) : "");
+}));
+
+exports.DocumentUpload = DocumentUpload;
+
+const UploadField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const _React$useState19 = _react.default.useState(null),
+        _React$useState20 = _slicedToArray(_React$useState19, 2),
+        file = _React$useState20[0],
+        setFile = _React$useState20[1];
+
+  const _React$useState21 = _react.default.useState(false),
+        _React$useState22 = _slicedToArray(_React$useState21, 2),
+        clearTrigger = _React$useState22[0],
+        setClearTrigger = _React$useState22[1];
+
+  return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
+    handle: props.handle,
+    valueParser: (value, inbound) => {
+      if (inbound) {
+        setClearTrigger(!clearTrigger);
+
+        if (!_Utils.default.isNull(value)) {
+          let objectReference = value;
+          let fileMetaData = {};
+          fileMetaData.name = objectReference.label;
+          fileMetaData.id = objectReference.id;
+
+          if (!_Utils.default.isNull(value.url)) {
+            let file = {};
+            file.base64 = value.url;
+            setFile(file);
+          }
+
+          return fileMetaData;
+        }
+      }
+
+      return value;
+    },
+    valueChangeCallback: value => {
+      if (_Utils.default.isNull(value)) {
+        setClearTrigger(!clearTrigger);
+      }
+    }
+  }), base => /*#__PURE__*/_react.default.createElement(DocumentUpload, _extends({
+    ref: ref,
+    base: base,
+    initialFile: file,
+    clearTrigger: clearTrigger
+  }, props)));
+}));
+
+exports.UploadField = UploadField;
+var _default = UploadField;
+exports.default = _default;

package/dist/components/grid/GridContainer.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = GridContainer;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+const styles = {
+  grid: {
+    margin: "0 -15px",
+    width: "calc(100% + 30px)"
+  }
+};
+const useStyles = (0, _styles.makeStyles)(styles);
+
+function GridContainer(props) {
+  const classes = useStyles();
+
+  const children = props.children,
+        className = props.className,
+        rest = _objectWithoutProperties(props, ["children", "className"]);
+
+  return /*#__PURE__*/_react.default.createElement(_Grid.default, _extends({
+    container: true
+  }, rest, {
+    className: classes.grid + " " + className
+  }), children);
+}
+
+GridContainer.propTypes = {
+  className: _propTypes.default.string,
+  children: _propTypes.default.node
+};