@corva/ui 3.1.0-rc.4 → 3.1.0-rc.5

package/components/Formula/SuggestionsMenu.js

@@ -1 +1,126 @@
-import e from"@babel/runtime/helpers/defineProperty";import{useRef as r,useMemo as t,useEffect as n}from"react";import{uniq as a}from"lodash";import{makeStyles as o,MenuItem as i}from"@material-ui/core";import{jsx as p,jsxs as c}from"react/jsx-runtime";function u(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function l(r){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?u(Object(n),!0).forEach((function(t){e(r,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(n)):u(Object(n)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(n,e))}))}return r}var b=o((function(e){return{content:{width:"342px",maxHeight:"166px",borderRadius:"4px",marginLeft:"50px",marginTop:"-16px",overflowY:"auto",background:e.palette.background.b9,boxShadow:"0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%)","&::-webkit-scrollbar":{height:"6px"},"&::-webkit-scrollbar-corner":{background:"rgba(0, 0, 0, 0)"},"&::-webkit-scrollbar-thumb":{backgroundColor:"rgba(164, 164, 167, 0.7)",borderRadius:"10px",border:"5px solid rgba(0, 0, 0, 0.01)",backgroundClip:"padding-box"},zIndex:999},label:{background:e.palette.background.b9},labelWrapper:{height:"24px",padding:"0 4px",background:e.palette.background.b9},itemWrapper:{display:"flex",alignItems:"center"},unit:{color:e.palette.primary.text7,marginLeft:"4px"}}}));function d(e){var o=e.suggestions,u=e.keyStr,d=e.onAddSuggestion,s=e.onChangeHeight,g=b(),f=r(),m=t((function(){var e=o.filter((function(e){return e.label.toUpperCase().includes(u.toUpperCase())})),r=a(e.map((function(e){return e.type}))).reduce((function(r,t){var n=e.filter((function(e){return e.type===t}));return r.concat([{value:t,label:t,isSubHeader:!0}]).concat(n.map((function(e){return l(l({},e),{},{value:e.key})})))}),[]);return r.length?r:[{value:"noOptions",label:"No Options",isSubHeader:!0}]}),[o,u]);n((function(){f.current&&s(f.current.clientHeight)}),[o,u,f.current]);var x=function(e){var r=e.label,t=e.isSubHeader,n=e.unit;return t?p("div",{className:g.labelWrapper,children:p("span",{children:r})}):c("div",{className:g.itemWrapper,children:[p("span",{children:r}),!!n&&p("span",{className:g.unit,children:n})]})};return p("div",{className:g.content,ref:f,children:m.map((function(e){return p(i,{selected:!1,disabled:e.isSubHeader,onClick:function(){return d(e.value)},children:x(e)},e.value)}))})}export{d as default};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { useRef, useMemo, useEffect } from 'react';
+import { uniq } from 'lodash';
+import { makeStyles, MenuItem } from '@material-ui/core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var useStyles = makeStyles(function (theme) {
+  return {
+    content: {
+      width: '342px',
+      maxHeight: '166px',
+      borderRadius: '4px',
+      marginLeft: '50px',
+      marginTop: '-16px',
+      overflowY: 'auto',
+      background: theme.palette.background.b9,
+      boxShadow: '0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%)',
+      '&::-webkit-scrollbar': {
+        height: '6px'
+      },
+      '&::-webkit-scrollbar-corner': {
+        background: 'rgba(0, 0, 0, 0)'
+      },
+      '&::-webkit-scrollbar-thumb': {
+        backgroundColor: 'rgba(164, 164, 167, 0.7)',
+        borderRadius: '10px',
+        border: '5px solid rgba(0, 0, 0, 0.01)',
+        backgroundClip: 'padding-box'
+      },
+      zIndex: 999
+    },
+    label: {
+      background: theme.palette.background.b9
+    },
+    labelWrapper: {
+      height: '24px',
+      padding: '0 4px',
+      background: theme.palette.background.b9
+    },
+    itemWrapper: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    unit: {
+      color: theme.palette.primary.text7,
+      marginLeft: '4px'
+    }
+  };
+});
+function SuggestionsMenu(_ref) {
+  var suggestions = _ref.suggestions,
+    keyStr = _ref.keyStr,
+    onAddSuggestion = _ref.onAddSuggestion,
+    onChangeHeight = _ref.onChangeHeight;
+  var classes = useStyles();
+  var menusRef = useRef();
+  var optionsData = useMemo(function () {
+    var filteredSuggestions = suggestions.filter(function (item) {
+      return item.label.toUpperCase().includes(keyStr.toUpperCase());
+    });
+    var filteredTypes = uniq(filteredSuggestions.map(function (item) {
+      return item.type;
+    }));
+    var data = filteredTypes.reduce(function (result, type) {
+      var subSuggestions = filteredSuggestions.filter(function (item) {
+        return item.type === type;
+      });
+      return result.concat([{
+        value: type,
+        label: type,
+        isSubHeader: true
+      }]).concat(subSuggestions.map(function (suggestion) {
+        return _objectSpread(_objectSpread({}, suggestion), {}, {
+          value: suggestion.key
+        });
+      }));
+    }, []);
+    return data.length ? data : [{
+      value: 'noOptions',
+      label: 'No Options',
+      isSubHeader: true
+    }];
+  }, [suggestions, keyStr]);
+  useEffect(function () {
+    if (menusRef.current) onChangeHeight(menusRef.current.clientHeight);
+  }, [suggestions, keyStr, menusRef.current]);
+  var renderOptionLabel = function renderOptionLabel(option) {
+    var label = option.label,
+      isSubHeader = option.isSubHeader,
+      unit = option.unit;
+    if (isSubHeader) return /*#__PURE__*/jsx("div", {
+      className: classes.labelWrapper,
+      children: /*#__PURE__*/jsx("span", {
+        children: label
+      })
+    });
+    return /*#__PURE__*/jsxs("div", {
+      className: classes.itemWrapper,
+      children: [/*#__PURE__*/jsx("span", {
+        children: label
+      }), !!unit && /*#__PURE__*/jsx("span", {
+        className: classes.unit,
+        children: unit
+      })]
+    });
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: classes.content,
+    ref: menusRef,
+    children: optionsData.map(function (option) {
+      return /*#__PURE__*/jsx(MenuItem, {
+        selected: false,
+        disabled: option.isSubHeader,
+        onClick: function onClick() {
+          return onAddSuggestion(option.value);
+        },
+        children: renderOptionLabel(option)
+      }, option.value);
+    })
+  });
+}
+
+export { SuggestionsMenu as default };
+//# sourceMappingURL=SuggestionsMenu.js.map

package/components/Formula/useFormulaFunction.js

@@ -1 +1,42 @@
-import r from"@babel/runtime/helpers/slicedToArray";import{useState as e,useEffect as o}from"react";import{fromPairs as t}from"lodash";import n from"fparser";var a=function(a,l){var m=e(null),u=r(m,2),i=u[0],f=u[1],p=e(""),c=r(p,2),s=c[0],h=c[1];return o((function(){if(a&&l&&l.length)try{var r=new n(a),e=[];e.push(t(l.map((function(r){return[r,Math.random()]})))),r.evaluate(e),f(r),h("")}catch(r){f(null),h(r.message)}else f(null),h("")}),[a,l]),{formulaFunction:i,error:s}};export{a as useFormulaFunction};
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useEffect } from 'react';
+import { fromPairs } from 'lodash';
+import Formula from 'fparser';
+
+var useFormulaFunction = function useFormulaFunction(formulaStr, suggestions) {
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    formulaFunction = _useState2[0],
+    setFormulaFunction = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    error = _useState4[0],
+    setError = _useState4[1];
+  useEffect(function () {
+    if (formulaStr && suggestions && suggestions.length) {
+      try {
+        var fObj = new Formula(formulaStr);
+        var testData = [];
+        testData.push(fromPairs(suggestions.map(function (item) {
+          return [item, Math.random()];
+        })));
+        fObj.evaluate(testData);
+        setFormulaFunction(fObj);
+        setError('');
+      } catch (e) {
+        setFormulaFunction(null);
+        setError(e.message);
+      }
+    } else {
+      setFormulaFunction(null);
+      setError('');
+    }
+  }, [formulaStr, suggestions]);
+  return {
+    formulaFunction: formulaFunction,
+    error: error
+  };
+};
+
+export { useFormulaFunction };
+//# sourceMappingURL=useFormulaFunction.js.map

package/components/Formula/useFormulaStyles.js

@@ -1 +1,119 @@
-import{makeStyles as e}from"@material-ui/core";var t=e((function(e){return{formulaContainer:{width:"474px",display:"flex",flexDirection:"column",flexWrap:"wrap",padding:"16px",gap:"16px",background:e.palette.background.b8},formulaHeaderWrapper:{width:"100%",height:"14px",display:"flex",justifyContent:"space-between"},formulaHeaderTextWrapper:{display:"flex",alignItems:"center"},formulaHeaderText:{fontSize:"10px",lineHeight:"16px",marginLeft:"4px"},formulaHeaderButtonWrapper:{display:"flex",alignItems:"center",color:e.palette.primary.text7,"&:hover":{color:function(t){return t.isValue?e.palette.primary.text1:e.palette.primary.text7},cursor:function(e){return e.isValue?"pointer":"default"}}},formulaEditorWrapper:{width:"100%",display:"flex",alignItems:"center"},formulaFooterWrapper:{width:"100%",display:"flex",alignItems:"center"},formulaFooterIcon:{marginRight:"6px",color:"#BDBDBD"},formulaFooterTextWrapper:{},formulaFooterText:{fontSize:"10px",lineHeight:"14px",letterSpacing:"0.4px",color:e.palette.primary.text7},funcText:{padding:"0px 5px",color:e.palette.primary.text1,backgroundColor:e.palette.background.b10,fontWeight:700,borderRadius:"4px"},verifyButton:{width:"64px",height:"30px"},resultText:{marginTop:"-12px",fontSize:"12px",lineHeight:"17px",letterSpacing:"0.4px"},errorColor:{color:e.palette.error.main},successColor:{color:e.palette.primary.main},resultSuccessColor:{color:e.palette.success.bright},tooltipWrapper:{display:"flex",flexDirection:"column",width:"124px",padding:"8px"},tooltipLine:{padding:"8px 0",display:"flex",justifyContent:"space-between",alignItems:"center"},tooltipValue:{color:e.palette.primary.text1},tooltipLabelContainer:{color:e.palette.primary.text7,display:"flex",alignItems:"center"},tooltipSymbol:{marginRight:"2px",marginBottom:"2px"}}}));export{t as useFormulaStyles};
+import { makeStyles } from '@material-ui/core';
+
+var useFormulaStyles = makeStyles(function (theme) {
+  return {
+    formulaContainer: {
+      width: '474px',
+      display: 'flex',
+      flexDirection: 'column',
+      flexWrap: 'wrap',
+      padding: '16px',
+      gap: '16px',
+      background: theme.palette.background.b8
+    },
+    formulaHeaderWrapper: {
+      width: '100%',
+      height: '14px',
+      display: 'flex',
+      justifyContent: 'space-between'
+    },
+    formulaHeaderTextWrapper: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    formulaHeaderText: {
+      fontSize: '10px',
+      lineHeight: '16px',
+      marginLeft: '4px'
+    },
+    formulaHeaderButtonWrapper: {
+      display: 'flex',
+      alignItems: 'center',
+      color: theme.palette.primary.text7,
+      '&:hover': {
+        color: function color(_ref) {
+          var isValue = _ref.isValue;
+          return isValue ? theme.palette.primary.text1 : theme.palette.primary.text7;
+        },
+        cursor: function cursor(_ref2) {
+          var isValue = _ref2.isValue;
+          return isValue ? 'pointer' : 'default';
+        }
+      }
+    },
+    formulaEditorWrapper: {
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center'
+    },
+    formulaFooterWrapper: {
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center'
+    },
+    formulaFooterIcon: {
+      marginRight: '6px',
+      color: '#BDBDBD'
+    },
+    formulaFooterTextWrapper: {},
+    formulaFooterText: {
+      fontSize: '10px',
+      lineHeight: '14px',
+      letterSpacing: '0.4px',
+      color: theme.palette.primary.text7
+    },
+    funcText: {
+      padding: '0px 5px',
+      color: theme.palette.primary.text1,
+      backgroundColor: theme.palette.background.b10,
+      fontWeight: 700,
+      borderRadius: '4px'
+    },
+    verifyButton: {
+      width: '64px',
+      height: '30px'
+    },
+    resultText: {
+      marginTop: '-12px',
+      fontSize: '12px',
+      lineHeight: '17px',
+      letterSpacing: '0.4px'
+    },
+    errorColor: {
+      color: theme.palette.error.main
+    },
+    successColor: {
+      color: theme.palette.primary.main
+    },
+    resultSuccessColor: {
+      color: theme.palette.success.bright
+    },
+    tooltipWrapper: {
+      display: 'flex',
+      flexDirection: 'column',
+      width: '124px',
+      padding: '8px'
+    },
+    tooltipLine: {
+      padding: '8px 0',
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    },
+    tooltipValue: {
+      color: theme.palette.primary.text1
+    },
+    tooltipLabelContainer: {
+      color: theme.palette.primary.text7,
+      display: 'flex',
+      alignItems: 'center'
+    },
+    tooltipSymbol: {
+      marginRight: '2px',
+      marginBottom: '2px'
+    }
+  };
+});
+
+export { useFormulaStyles };
+//# sourceMappingURL=useFormulaStyles.js.map

package/components/Formula/utils.js

@@ -1 +1,63 @@
-import e from"@babel/runtime/helpers/taggedTemplateLiteral";var n,t=String.raw,r=function(r){return t(n||(n=e(["<p>","</p>"])),r)},o=function(e,n){return n.reduce((function(e,n){return e.replaceAll("[".concat(n.key,"]"),"".concat(n.label))}),e)},c=function(e){return e.replace(/<[^>]+>/g,"")},a=function(e,n){return n.reduce((function(e,n){return e.replaceAll(n.label,"[".concat(n.key,"]"))}),e)},l=function(e,n){var t=o(e,n);return r(t)},i=function(e,n){var t=c(e);return a(t,n)},u=function(e){var n=c(e);return[r(n||""),!n]};function d(e){var n=0,t=window.getSelection();if(0===t.rangeCount)return n;var r=t.getRangeAt(0),o=r.cloneRange();return o.selectNodeContents(e),o.setEnd(r.endContainer,r.endOffset),n=o.toString().length}function f(e,n){if(e.childNodes[0]){var t=window.getSelection(),r=document.createRange(),o=e.childNodes[0].childNodes[0]||e.childNodes[0];r.setStart(o,n),r.collapse(!0),t.removeAllRanges(),t.addRange(r)}}export{i as convertEditorValueToString,c as convertHtmlToString,l as convertStringToEditorValue,r as convertStringToHtml,d as getCaret,u as getUpdatedHtmlValue,o as replaceStringToLabel,a as replaceStringToValue,f as setCaret};
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+
+var _templateObject;
+var html = String.raw;
+
+// note: will update for highlight style - multi child
+var convertStringToHtml = function convertStringToHtml(inputStr) {
+  return html(_templateObject || (_templateObject = _taggedTemplateLiteral(["<p>", "</p>"])), inputStr);
+};
+var replaceStringToLabel = function replaceStringToLabel(inputStr, suggestions) {
+  return suggestions.reduce(function (result, suggestion) {
+    return result.replaceAll("[".concat(suggestion.key, "]"), "".concat(suggestion.label));
+  }, inputStr);
+};
+var convertHtmlToString = function convertHtmlToString(html) {
+  var convertedString = html.replace(/<[^>]+>/g, '');
+  return convertedString;
+};
+var replaceStringToValue = function replaceStringToValue(inputStr, suggestions) {
+  return suggestions.reduce(function (result, suggestion) {
+    return result.replaceAll(suggestion.label, "[".concat(suggestion.key, "]"));
+  }, inputStr);
+};
+var convertStringToEditorValue = function convertStringToEditorValue(inputStr, suggestions) {
+  var convertedStr = replaceStringToLabel(inputStr, suggestions);
+  return convertStringToHtml(convertedStr);
+};
+var convertEditorValueToString = function convertEditorValueToString(editorValue, suggestions) {
+  var valueStr = convertHtmlToString(editorValue);
+  return replaceStringToValue(valueStr, suggestions);
+};
+var getUpdatedHtmlValue = function getUpdatedHtmlValue(htmlValue) {
+  var stringValue = convertHtmlToString(htmlValue);
+  return [convertStringToHtml(stringValue || ''), !stringValue];
+};
+function getCaret(el) {
+  var caretAt = 0;
+  var sel = window.getSelection();
+  if (sel.rangeCount === 0) {
+    return caretAt;
+  }
+  var range = sel.getRangeAt(0);
+  var preRange = range.cloneRange();
+  preRange.selectNodeContents(el);
+  preRange.setEnd(range.endContainer, range.endOffset);
+  caretAt = preRange.toString().length;
+  return caretAt;
+}
+
+// note: will update for highlight style - multi child
+function setCaret(el, offset) {
+  if (!el.childNodes[0]) return;
+  var sel = window.getSelection();
+  var range = document.createRange();
+  var childNode = el.childNodes[0].childNodes[0] || el.childNodes[0];
+  range.setStart(childNode, offset);
+  range.collapse(true);
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+
+export { convertEditorValueToString, convertHtmlToString, convertStringToEditorValue, convertStringToHtml, getCaret, getUpdatedHtmlValue, replaceStringToLabel, replaceStringToValue, setCaret };
+//# sourceMappingURL=utils.js.map

package/components/GoogleDocsViewer/index.js

@@ -1 +1,133 @@
-import e from"@babel/runtime/helpers/defineProperty";import r from"@babel/runtime/helpers/slicedToArray";import{useState as i,createRef as o,useCallback as t,useEffect as n}from"react";import a from"prop-types";import l from"classnames";import{Typography as c,IconButton as s}from"@material-ui/core";import m from"@material-ui/icons/Close";import d from"@material-ui/icons/GetApp";import{useStyles as f}from"./styles.js";import u from"../LoadingIndicator/LoadingIndicator.js";import{jsxs as p,jsx as v}from"react/jsx-runtime";var h=function(a){var h=a.fileUrl,w=a.fileSize,b=a.fileName,g=a.webviewType,N=a.onClose,y=a["data-testid"],I=i(!0),z=r(I,2),C=z[0],S=z[1],T=i(!1),_=r(T,2),L=_[0],R=_[1],U=o(null),j=o(null),x=f(),k=t((function(){return"office"===g?"https://view.officeapps.live.com/op/embed.aspx?src=".concat(window.encodeURIComponent(h)):"https://docs.google.com/viewer?url=".concat(encodeURIComponent(h),"&embedded=true")}),[h]),q=function(){j.current&&(j.current.src=k(),j.current.contentWindow.location.reload())},A=function(){U.current&&clearInterval(U.current),S(!1)};return n((function(){S(!0),R(!1);var e=w&&w>=1048576?w/1048576*1e4:1e4;return U&&(clearInterval(U.current),U.current=setInterval(q,e)),function(){clearInterval(U.current)}}),[h]),p("div",{"data-testid":"".concat(y,"_file_").concat(b),className:x.viewer,children:[p("div",{className:x.toolbar,children:[v(c,{"data-testid":"".concat(y,"_fileName"),children:b}),p("div",{children:[v(s,{size:"small",className:x.iconButton,children:v("a",{download:!0,href:h,target:"_blank",rel:"noopener noreferrer",children:v(d,{fontSize:"small"})})}),v(s,{size:"small",onClick:N,className:x.iconButton,children:v(m,{fontSize:"small"})})]})]}),C&&v("div",{className:x.frame,children:v(u,{white:!1})}),L?v("div",{className:x.frame,children:v(c,{variant:"body2",className:x.failed,children:"Loading failed"})}):v("iframe",{"data-testid":"".concat(y,"_frame"),className:l(x.frame,e({},x.hiddenFrame,C)),title:h,src:k(),onLoad:A,onError:function(){A(),R(!0)},ref:j})]})};h.propTypes={fileUrl:a.string.isRequired,webviewType:a.oneOf(["google","office"]),fileName:a.string,fileSize:a.number,onClose:a.func.isRequired,"data-testid":a.string},h.defaultProps={fileName:void 0,fileSize:void 0,webviewType:"google","data-testid":"DocumentViewer"};export{h as default};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, createRef, useCallback, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Typography, IconButton } from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+import GetAppIcon from '@material-ui/icons/GetApp';
+import { useStyles } from './styles.js';
+import LoadingIndicator from '../LoadingIndicator/LoadingIndicator.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var REQUEST_TIMEOUT = 10000;
+var BYTES_IN_MEGABYTE = 1048576;
+var GoogleDocsViewer = function GoogleDocsViewer(_ref) {
+  var fileUrl = _ref.fileUrl,
+    fileSize = _ref.fileSize,
+    fileName = _ref.fileName,
+    webviewType = _ref.webviewType,
+    onClose = _ref.onClose,
+    dataTestId = _ref['data-testid'];
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isLoadingFailed = _useState4[0],
+    setIsLoadingFailed = _useState4[1];
+  var timeoutRef = createRef(null);
+  var iframeRef = createRef(null);
+  var styles = useStyles();
+  var getIframeLink = useCallback(function () {
+    return webviewType === 'office' ? "https://view.officeapps.live.com/op/embed.aspx?src=".concat(window.encodeURIComponent(fileUrl)) : "https://docs.google.com/viewer?url=".concat(encodeURIComponent(fileUrl), "&embedded=true");
+  }, [fileUrl]);
+  var reloadFrame = function reloadFrame() {
+    if (iframeRef.current) {
+      iframeRef.current.src = getIframeLink();
+      iframeRef.current.contentWindow.location.reload();
+    }
+  };
+  var handleFrameLoad = function handleFrameLoad() {
+    if (timeoutRef.current) {
+      clearInterval(timeoutRef.current);
+    }
+    setIsLoading(false);
+  };
+  var handleFrameError = function handleFrameError() {
+    handleFrameLoad();
+    setIsLoadingFailed(true);
+  };
+  useEffect(function () {
+    setIsLoading(true);
+    setIsLoadingFailed(false);
+    var timeOut = fileSize && fileSize >= BYTES_IN_MEGABYTE ? fileSize / BYTES_IN_MEGABYTE * REQUEST_TIMEOUT : REQUEST_TIMEOUT;
+    if (timeoutRef) {
+      clearInterval(timeoutRef.current);
+      timeoutRef.current = setInterval(reloadFrame, timeOut);
+    }
+    return function () {
+      clearInterval(timeoutRef.current);
+    };
+  }, [fileUrl]);
+  return /*#__PURE__*/jsxs("div", {
+    "data-testid": "".concat(dataTestId, "_file_").concat(fileName),
+    className: styles.viewer,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: styles.toolbar,
+      children: [/*#__PURE__*/jsx(Typography, {
+        "data-testid": "".concat(dataTestId, "_fileName"),
+        children: fileName
+      }), /*#__PURE__*/jsxs("div", {
+        children: [/*#__PURE__*/jsx(IconButton, {
+          size: "small",
+          className: styles.iconButton,
+          children: /*#__PURE__*/jsx("a", {
+            download: true,
+            href: fileUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: /*#__PURE__*/jsx(GetAppIcon, {
+              fontSize: "small"
+            })
+          })
+        }), /*#__PURE__*/jsx(IconButton, {
+          size: "small",
+          onClick: onClose,
+          className: styles.iconButton,
+          children: /*#__PURE__*/jsx(CloseIcon, {
+            fontSize: "small"
+          })
+        })]
+      })]
+    }), isLoading && /*#__PURE__*/jsx("div", {
+      className: styles.frame,
+      children: /*#__PURE__*/jsx(LoadingIndicator, {
+        white: false
+      })
+    }), isLoadingFailed ? /*#__PURE__*/jsx("div", {
+      className: styles.frame,
+      children: /*#__PURE__*/jsx(Typography, {
+        variant: "body2",
+        className: styles.failed,
+        children: "Loading failed"
+      })
+    }) : /*#__PURE__*/jsx("iframe", {
+      "data-testid": "".concat(dataTestId, "_frame"),
+      className: classNames(styles.frame, _defineProperty({}, styles.hiddenFrame, isLoading)),
+      title: fileUrl,
+      src: getIframeLink(),
+      onLoad: handleFrameLoad,
+      onError: handleFrameError,
+      ref: iframeRef
+    })]
+  });
+};
+GoogleDocsViewer.propTypes = {
+  fileUrl: PropTypes.string.isRequired,
+  webviewType: PropTypes.oneOf(['google', 'office']),
+  fileName: PropTypes.string,
+  fileSize: PropTypes.number,
+  onClose: PropTypes.func.isRequired,
+  'data-testid': PropTypes.string
+};
+GoogleDocsViewer.defaultProps = {
+  fileName: undefined,
+  fileSize: undefined,
+  webviewType: 'google',
+  'data-testid': 'DocumentViewer'
+};
+
+export { GoogleDocsViewer as default };
+//# sourceMappingURL=index.js.map

package/components/GoogleDocsViewer/styles.js

@@ -1 +1,77 @@
-import{makeStyles as e}from"@material-ui/core";var t=e({viewer:{display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"column",width:"100%",height:"100%",position:"relative"},toolbar:{position:"absolute",top:0,height:48,width:"100%",background:"#212121",zIndex:1001,padding:"0 16px",display:"flex",alignItems:"center",justifyContent:"space-between"},frame:{position:"absolute",top:48,width:"calc(100% - 64px)",height:"calc(100% - 64px)",left:32,border:"none",borderRadius:4,background:"#eee"},hiddenFrame:{visibility:0,height:0},toolbarButton:{verticalAlign:"middle",padding:0,backgroundColor:"transparent",border:"none",cursor:"pointer","&:focus":{outline:"none"}},toolbarIcon:{width:"42px !important",height:"34px !important",padding:"4px 6px","&:hover":{color:"#fff"}},backButton:{display:"flex",alignItems:"center"},iconButton:{marginLeft:12,color:"#BDBDBD","& a":{color:"#BDBDBD",width:20,height:20}},failed:{color:"#000",fontWeight:"bold"}});export{t as useStyles};
+import { makeStyles } from '@material-ui/core';
+
+var useStyles = makeStyles({
+  viewer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    width: '100%',
+    height: '100%',
+    position: 'relative'
+  },
+  toolbar: {
+    position: 'absolute',
+    top: 0,
+    height: 48,
+    width: '100%',
+    background: '#212121',
+    zIndex: 1001,
+    padding: '0 16px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  frame: {
+    position: 'absolute',
+    top: 48,
+    width: 'calc(100% - 64px)',
+    height: 'calc(100% - 64px)',
+    left: 32,
+    border: 'none',
+    borderRadius: 4,
+    background: '#eee'
+  },
+  hiddenFrame: {
+    visibility: 0,
+    height: 0
+  },
+  toolbarButton: {
+    verticalAlign: 'middle',
+    padding: 0,
+    backgroundColor: 'transparent',
+    border: 'none',
+    cursor: 'pointer',
+    '&:focus': {
+      outline: 'none'
+    }
+  },
+  toolbarIcon: {
+    width: '42px !important',
+    height: '34px !important',
+    padding: '4px 6px',
+    '&:hover': {
+      color: '#fff'
+    }
+  },
+  backButton: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  iconButton: {
+    marginLeft: 12,
+    color: '#BDBDBD',
+    '& a': {
+      color: '#BDBDBD',
+      width: 20,
+      height: 20
+    }
+  },
+  failed: {
+    color: '#000',
+    fontWeight: 'bold'
+  }
+});
+
+export { useStyles };
+//# sourceMappingURL=styles.js.map

package/components/GoogleDocsViewer/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/GoogleDocsViewer/styles.js"],"sourcesContent":["import { makeStyles } from '@material-ui/core';\n\nexport const useStyles = makeStyles({\n  viewer: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexDirection: 'column',\n    width: '100%',\n    height: '100%',\n    position: 'relative',\n  },\n  toolbar: {\n    position: 'absolute',\n    top: 0,\n    height: 48,\n    width: '100%',\n    background: '#212121',\n    zIndex: 1001,\n    padding: '0 16px',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  },\n\n  frame: {\n    position: 'absolute',\n    top: 48,\n    width: 'calc(100% - 64px)',\n    height: 'calc(100% - 64px)',\n    left: 32,\n    border: 'none',\n    borderRadius: 4,\n    background: '#eee',\n  },\n\n  hiddenFrame: {\n    visibility: 0,\n    height: 0,\n  },\n  toolbarButton: {\n    verticalAlign: 'middle',\n    padding: 0,\n    backgroundColor: 'transparent',\n    border: 'none',\n    cursor: 'pointer',\n\n    '&:focus': {\n      outline: 'none',\n    },\n  },\n\n  toolbarIcon: {\n    width: '42px !important',\n    height: '34px !important',\n    padding: '4px 6px',\n    '&:hover': {\n      color: '#fff',\n    },\n  },\n\n  backButton: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n  iconButton: {\n    marginLeft: 12,\n    color: '#BDBDBD',\n    '& a': { color: '#BDBDBD', width: 20, height: 20 },\n  },\n  failed: {\n    color: '#000',\n    fontWeight: 'bold',\n  },\n});\n"],"names":["useStyles","makeStyles","viewer","display","alignItems","justifyContent","flexDirection","width","height","position","toolbar","top","background","zIndex","padding","frame","left","border","borderRadius","hiddenFrame","visibility","toolbarButton","verticalAlign","backgroundColor","cursor","outline","toolbarIcon","color","backButton","iconButton","marginLeft","failed","fontWeight"],"mappings":";;AAEaA,IAAAA,SAAS,GAAGC,UAAU,CAAC;AAClCC,EAAAA,MAAM,EAAE;AACNC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,UAAU,EAAE,QAAQ;AACpBC,IAAAA,cAAc,EAAE,QAAQ;AACxBC,IAAAA,aAAa,EAAE,QAAQ;AACvBC,IAAAA,KAAK,EAAE,MAAM;AACbC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,UAAA;GACX;AACDC,EAAAA,OAAO,EAAE;AACPD,IAAAA,QAAQ,EAAE,UAAU;AACpBE,IAAAA,GAAG,EAAE,CAAC;AACNH,IAAAA,MAAM,EAAE,EAAE;AACVD,IAAAA,KAAK,EAAE,MAAM;AACbK,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,IAAI;AACZC,IAAAA,OAAO,EAAE,QAAQ;AACjBX,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,UAAU,EAAE,QAAQ;AACpBC,IAAAA,cAAc,EAAE,eAAA;GACjB;AAEDU,EAAAA,KAAK,EAAE;AACLN,IAAAA,QAAQ,EAAE,UAAU;AACpBE,IAAAA,GAAG,EAAE,EAAE;AACPJ,IAAAA,KAAK,EAAE,mBAAmB;AAC1BC,IAAAA,MAAM,EAAE,mBAAmB;AAC3BQ,IAAAA,IAAI,EAAE,EAAE;AACRC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,YAAY,EAAE,CAAC;AACfN,IAAAA,UAAU,EAAE,MAAA;GACb;AAEDO,EAAAA,WAAW,EAAE;AACXC,IAAAA,UAAU,EAAE,CAAC;AACbZ,IAAAA,MAAM,EAAE,CAAA;GACT;AACDa,EAAAA,aAAa,EAAE;AACbC,IAAAA,aAAa,EAAE,QAAQ;AACvBR,IAAAA,OAAO,EAAE,CAAC;AACVS,IAAAA,eAAe,EAAE,aAAa;AAC9BN,IAAAA,MAAM,EAAE,MAAM;AACdO,IAAAA,MAAM,EAAE,SAAS;AAEjB,IAAA,SAAS,EAAE;AACTC,MAAAA,OAAO,EAAE,MAAA;AACX,KAAA;GACD;AAEDC,EAAAA,WAAW,EAAE;AACXnB,IAAAA,KAAK,EAAE,iBAAiB;AACxBC,IAAAA,MAAM,EAAE,iBAAiB;AACzBM,IAAAA,OAAO,EAAE,SAAS;AAClB,IAAA,SAAS,EAAE;AACTa,MAAAA,KAAK,EAAE,MAAA;AACT,KAAA;GACD;AAEDC,EAAAA,UAAU,EAAE;AACVzB,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,UAAU,EAAE,QAAA;GACb;AACDyB,EAAAA,UAAU,EAAE;AACVC,IAAAA,UAAU,EAAE,EAAE;AACdH,IAAAA,KAAK,EAAE,SAAS;AAChB,IAAA,KAAK,EAAE;AAAEA,MAAAA,KAAK,EAAE,SAAS;AAAEpB,MAAAA,KAAK,EAAE,EAAE;AAAEC,MAAAA,MAAM,EAAE,EAAA;AAAG,KAAA;GAClD;AACDuB,EAAAA,MAAM,EAAE;AACNJ,IAAAA,KAAK,EAAE,MAAM;AACbK,IAAAA,UAAU,EAAE,MAAA;AACd,GAAA;AACF,CAAC;;;;"}