@desynova-digital/components 9.1.44 → 9.1.45

package/molecules/errorScreen/TableErrorScreen.jsx

@@ -1,85 +1,85 @@
-import React from 'react';
-
-const TableErrorScreen = ({ h1 = "No Results Found", h2 = "Try a different filter set" }) => {
-  return (
-    <div
-      style={{
-        height: '279px',
-        width: '100%',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center'
-      }}>
-      <div
-        style={{
-          width: '520px',
-          height: '130px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: '10px'
-        }}>
-        <div
-          style={{
-            height: '120px',
-            width: '120px',
-            background: '#303F51',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: '50%',
-            flexDirection: 'column'
-          }}>
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'flex-start',
-              justifyContent: 'center',
-              gap: '8px',
-              flexDirection: 'column'
-            }}>
-            <div style={{ height: '10px', width: '60px', background: '#182738', borderRadius: '10px' }}></div>
-            <div style={{ height: '10px', width: '40px', background: '#182738', borderRadius: '10px' }}></div>
-            <div style={{ height: '10px', width: '50px', background: '#182738', borderRadius: '10px' }}></div>
-            <div style={{ height: '10px', width: '30px', background: '#182738', borderRadius: '10px' }}></div>
-            <div style={{ height: '10px', width: '50px', background: '#182738', borderRadius: '10px' }}></div>
-          </div>
-        </div>
-        <div
-          style={{
-            height: '120px',
-            width: '300px ',
-            display: 'flex',
-            alignItems: 'flex-start',
-            justifyContent: 'center',
-            flexDirection: 'column'
-          }}>
-          <p
-            style={{
-              color: 'var(--color-text-color-pure-white, #FFF)',
-              fontSize: '24px',
-              fontWeight: '500',
-              lineHeight: '36px',
-              fontStyle: 'normal',
-              fontFamily: 'SFUIText-Medium'
-            }}>
-            {h1}
-          </p>
-          <p
-            style={{
-              color: 'var(--color-text-color-pure-white, #FFF)',
-              fontSize: '14px',
-              fontStyle: 'normal',
-              fontWeight: '300',
-              lineHeight: '21px',
-              fontFamily: 'SFUIText-Medium'
-            }}>
-            {h2}
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default TableErrorScreen;
+import React from 'react';
+
+const TableErrorScreen = ({ h1 = "No Results Found", h2 = "Try a different filter set" }) => {
+  return (
+    <div
+      style={{
+        height: '279px',
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }}>
+      <div
+        style={{
+          width: '520px',
+          height: '130px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '10px'
+        }}>
+        <div
+          style={{
+            height: '120px',
+            width: '120px',
+            background: '#303F51',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '50%',
+            flexDirection: 'column'
+          }}>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'flex-start',
+              justifyContent: 'center',
+              gap: '8px',
+              flexDirection: 'column'
+            }}>
+            <div style={{ height: '10px', width: '60px', background: '#182738', borderRadius: '10px' }}></div>
+            <div style={{ height: '10px', width: '40px', background: '#182738', borderRadius: '10px' }}></div>
+            <div style={{ height: '10px', width: '50px', background: '#182738', borderRadius: '10px' }}></div>
+            <div style={{ height: '10px', width: '30px', background: '#182738', borderRadius: '10px' }}></div>
+            <div style={{ height: '10px', width: '50px', background: '#182738', borderRadius: '10px' }}></div>
+          </div>
+        </div>
+        <div
+          style={{
+            height: '120px',
+            width: '300px ',
+            display: 'flex',
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+            flexDirection: 'column'
+          }}>
+          <p
+            style={{
+              color: 'var(--color-text-color-pure-white, #FFF)',
+              fontSize: '24px',
+              fontWeight: '500',
+              lineHeight: '36px',
+              fontStyle: 'normal',
+              fontFamily: 'SFUIText-Medium'
+            }}>
+            {h1}
+          </p>
+          <p
+            style={{
+              color: 'var(--color-text-color-pure-white, #FFF)',
+              fontSize: '14px',
+              fontStyle: 'normal',
+              fontWeight: '300',
+              lineHeight: '21px',
+              fontFamily: 'SFUIText-Medium'
+            }}>
+            {h2}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TableErrorScreen;

package/molecules/errorScreen/errorScreen.js

@@ -23,11 +23,11 @@ var SubHeader = _styledComponents["default"].p(_templateObject4 || (_templateObj
 var Line = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 50px;\n  border-bottom: 3px solid #00cec6;\n"])));
 var ErrorButtons = (0, _styledComponents["default"])(_button["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 30px 0 0 0;\n  width: 150px;\n  border: none;\n  padding: 15px 0;\n"])));
 
-/*
- * Image links
- * https://ctdnstgthumbnail.contido.io/contido-assets/
- * props that we recieve are names of images. the page renders content based on that
- * Name of images are 404-error, no-ressults, went-wrong & network-error
+/*
+ * Image links
+ * https://ctdnstgthumbnail.contido.io/contido-assets/
+ * props that we recieve are names of images. the page renders content based on that
+ * Name of images are 404-error, no-ressults, went-wrong & network-error
  */
 
 var propTypes = {
@@ -38,10 +38,10 @@ var propTypes = {
   showButton: _propTypes["default"].bool
 };
 
-/**
- * @component
- * @category App
- * @subcategory Error Screen
+/**
+ * @component
+ * @category App
+ * @subcategory Error Screen
  */
 
 var ErrorScreen = function ErrorScreen(props) {

package/molecules/errorScreen/errorScreen.jsx

@@ -1,149 +1,149 @@
-/* eslint-disable no-unused-expressions, no-restricted-globals */
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import Button from '../../atoms/button/button';
-
-const Wrapper = styled.div`
-  display: flex;
-  font-size: 32px;
-  align-items: center;
-  color: #fff;
-  flex-direction: column;
-  justify-content: center;
-  font-family: 'SFUIText-Medium';
-  color: rgba(255, 255, 255, 0.8);
-  /* height: calc(100vh - 80px); */
-  height: ${(props => props.smallImage ? '' : '100vh')};
-  background: #0c141d;
-  .flex {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-`;
-
-const ImageWrapper = styled.div`
-  width: ${(props => props.smallImage ? '240px' : '400px')};
-  margin-right: 50px;
-  img {
-    width: 100%;
-  }
-`;
-
-const Header = styled.p`
-  font-size: 50px;
-  margin-bottom: 40px;
-  font-weight: bold;
-  display: flex;
-`;
-
-const SubHeader = styled.p`
-  font-size: 20px;
-  font-weight: 300;
-  margin-top: 40px;
-  display: flex;
-`;
-
-const Line = styled.div`
-  width: 50px;
-  border-bottom: 3px solid #00cec6;
-`;
-
-const ErrorButtons = styled(Button)`
-  margin: 30px 0 0 0;
-  width: 150px;
-  border: none;
-  padding: 15px 0;
-`;
-
-/*
- * Image links
- * https://ctdnstgthumbnail.contido.io/contido-assets/
- * props that we recieve are names of images. the page renders content based on that
- * Name of images are 404-error, no-ressults, went-wrong & network-error
- */
-
-const propTypes = {
-  type: PropTypes.oneOf(['no-result-found', 'went-wrong', '404-error', 'network-error' ]),
-  title: PropTypes.string,
-  subTitle: PropTypes.string,
-  smallImage: PropTypes.bool,
-  showButton: PropTypes.bool
-};
-
-/**
- * @component
- * @category App
- * @subcategory Error Screen
- */
-
-const ErrorScreen = (props) => {
-  const { type, smallImage, showButton } = props;
-
-  const data = {
-    'no-result-found': {
-      'title': 'No Results Found',
-      'subTitle': 'No data available for the selected filters',
-      'buttonText': ''
-    },
-    'went-wrong': {
-      'title': 'Something Went Wrong',
-      'subTitle': '',
-      'buttonText': ''
-    },
-    '404-error': {
-      'title': 'Page Not Found',
-      'subTitle': 'We can’t seem to find the page you are looking for.',
-      'buttonText': 'Go Home'
-    },
-    'network-error': {
-      'title': 'Network Error',
-      'subTitle': '',
-      'buttonText': ''
-    }
-  }
-
-  const title = props.title || data[type].title;
-  const subTitle = props.subTitle || data[type].subTitle;
-  const buttonText = props.buttonText || data[type].buttonText;
-    
-  const ctaFunction = () => {
-    type === '404-error' ? (location.href = '/') : window.location.reload();
-  };
-
-  return (
-    <Wrapper smallImage={smallImage}>
-      <div className="flex">
-        <ImageWrapper smallImage={smallImage}>
-          <img src={`https://ctdnstgthumbnail.contido.io/contido-assets/${type}.svg`} alt="" />
-        </ImageWrapper>
-        <div className="text">
-          <Header>{title}</Header>
-          <Line />
-          <SubHeader>{subTitle}</SubHeader>
-          {showButton ? 
-            <ErrorButtons
-                display="rounded"
-                onClick={() => {
-                ctaFunction();
-                }}>
-                {buttonText}
-            </ErrorButtons> :
-            null
-          }
-        </div>
-      </div>
-    </Wrapper>
-  );
-};
-
-ErrorScreen.propTypes = propTypes;
-
-ErrorScreen.defaultProps = {
-  title: 'No Results Found',
-  subTitle: 'Refresh this page or try again later.',
-  buttonText: 'Refresh'
-};
-
-export default ErrorScreen;
+/* eslint-disable no-unused-expressions, no-restricted-globals */
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import Button from '../../atoms/button/button';
+
+const Wrapper = styled.div`
+  display: flex;
+  font-size: 32px;
+  align-items: center;
+  color: #fff;
+  flex-direction: column;
+  justify-content: center;
+  font-family: 'SFUIText-Medium';
+  color: rgba(255, 255, 255, 0.8);
+  /* height: calc(100vh - 80px); */
+  height: ${(props => props.smallImage ? '' : '100vh')};
+  background: #0c141d;
+  .flex {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+`;
+
+const ImageWrapper = styled.div`
+  width: ${(props => props.smallImage ? '240px' : '400px')};
+  margin-right: 50px;
+  img {
+    width: 100%;
+  }
+`;
+
+const Header = styled.p`
+  font-size: 50px;
+  margin-bottom: 40px;
+  font-weight: bold;
+  display: flex;
+`;
+
+const SubHeader = styled.p`
+  font-size: 20px;
+  font-weight: 300;
+  margin-top: 40px;
+  display: flex;
+`;
+
+const Line = styled.div`
+  width: 50px;
+  border-bottom: 3px solid #00cec6;
+`;
+
+const ErrorButtons = styled(Button)`
+  margin: 30px 0 0 0;
+  width: 150px;
+  border: none;
+  padding: 15px 0;
+`;
+
+/*
+ * Image links
+ * https://ctdnstgthumbnail.contido.io/contido-assets/
+ * props that we recieve are names of images. the page renders content based on that
+ * Name of images are 404-error, no-ressults, went-wrong & network-error
+ */
+
+const propTypes = {
+  type: PropTypes.oneOf(['no-result-found', 'went-wrong', '404-error', 'network-error' ]),
+  title: PropTypes.string,
+  subTitle: PropTypes.string,
+  smallImage: PropTypes.bool,
+  showButton: PropTypes.bool
+};
+
+/**
+ * @component
+ * @category App
+ * @subcategory Error Screen
+ */
+
+const ErrorScreen = (props) => {
+  const { type, smallImage, showButton } = props;
+
+  const data = {
+    'no-result-found': {
+      'title': 'No Results Found',
+      'subTitle': 'No data available for the selected filters',
+      'buttonText': ''
+    },
+    'went-wrong': {
+      'title': 'Something Went Wrong',
+      'subTitle': '',
+      'buttonText': ''
+    },
+    '404-error': {
+      'title': 'Page Not Found',
+      'subTitle': 'We can’t seem to find the page you are looking for.',
+      'buttonText': 'Go Home'
+    },
+    'network-error': {
+      'title': 'Network Error',
+      'subTitle': '',
+      'buttonText': ''
+    }
+  }
+
+  const title = props.title || data[type].title;
+  const subTitle = props.subTitle || data[type].subTitle;
+  const buttonText = props.buttonText || data[type].buttonText;
+    
+  const ctaFunction = () => {
+    type === '404-error' ? (location.href = '/') : window.location.reload();
+  };
+
+  return (
+    <Wrapper smallImage={smallImage}>
+      <div className="flex">
+        <ImageWrapper smallImage={smallImage}>
+          <img src={`https://ctdnstgthumbnail.contido.io/contido-assets/${type}.svg`} alt="" />
+        </ImageWrapper>
+        <div className="text">
+          <Header>{title}</Header>
+          <Line />
+          <SubHeader>{subTitle}</SubHeader>
+          {showButton ? 
+            <ErrorButtons
+                display="rounded"
+                onClick={() => {
+                ctaFunction();
+                }}>
+                {buttonText}
+            </ErrorButtons> :
+            null
+          }
+        </div>
+      </div>
+    </Wrapper>
+  );
+};
+
+ErrorScreen.propTypes = propTypes;
+
+ErrorScreen.defaultProps = {
+  title: 'No Results Found',
+  subTitle: 'Refresh this page or try again later.',
+  buttonText: 'Refresh'
+};
+
+export default ErrorScreen;

package/molecules/filter/filter.js

@@ -76,10 +76,10 @@ var Filter = /*#__PURE__*/function (_Component) {
     var _this;
     (0, _classCallCheck2["default"])(this, Filter);
     _this = _callSuper(this, Filter, [props]);
-    /**
-     * This function handle the onChange event in the filter.
-     * @param {Object} groupItem GUI elements for the particular section
-     * @param {Object} optionItem the item from the options of that section
+    /**
+     * This function handle the onChange event in the filter.
+     * @param {Object} groupItem GUI elements for the particular section
+     * @param {Object} optionItem the item from the options of that section
      */
     (0, _defineProperty2["default"])(_this, "onSelection", function (groupItem, optionItem) {
       var selectedFiltersObj = _this.state.selectedFiltersObj;
@@ -105,9 +105,9 @@ var Filter = /*#__PURE__*/function (_Component) {
               var multiple = filters[groupItem.field].value || []; // initial from filters object
               filters[groupItem.field].label = groupItem.title;
 
-              /*
-               * multiselect will always have groupItem.title as filter Title
-               * because we cant show option.title as its value changes
+              /*
+               * multiselect will always have groupItem.title as filter Title
+               * because we cant show option.title as its value changes
                */
 
               var optionIndex = multiple.findIndex(function (item) {
@@ -190,10 +190,10 @@ var Filter = /*#__PURE__*/function (_Component) {
       }
       _this.changeFilters("selected", filters);
     });
-    /**
-     * This function performs action based on forAction on filters object
-     * @param {String} forAction action performed on the filter object
-     * @param {Object} filters Object containing current filters selected values
+    /**
+     * This function performs action based on forAction on filters object
+     * @param {String} forAction action performed on the filter object
+     * @param {Object} filters Object containing current filters selected values
      */
     (0, _defineProperty2["default"])(_this, "changeFilters", function (forAction, filters) {
       var initialFilters = _this.props.initialFilters;
@@ -215,10 +215,10 @@ var Filter = /*#__PURE__*/function (_Component) {
         }
       });
     });
-    /**
-     * This function hadles the onchange event for search input field inside filter
-     * @param {string} query Input Filed value
-     * @param {string} permission Type of dashboard
+    /**
+     * This function hadles the onchange event for search input field inside filter
+     * @param {string} query Input Filed value
+     * @param {string} permission Type of dashboard
      */
     (0, _defineProperty2["default"])(_this, "handleDebounce", (0, _lodash.debounce)(function (permission, query) {
       if (query.length > 1) _this.props.handleUserIdFilterChange(permission, query);
@@ -230,10 +230,10 @@ var Filter = /*#__PURE__*/function (_Component) {
       if (selectedFiltersObj[element.field]) {
         if (element.select_type === "select") {
           if (element.field === "date") {
-            /*
-             * for date we have value as Object which contains fromDate and toDate
-             * so we add "key" in that object and check based on that key
-             * key is nothing but the value of selected label
+            /*
+             * for date we have value as Object which contains fromDate and toDate
+             * so we add "key" in that object and check based on that key
+             * key is nothing but the value of selected label
              */
             selectedStyle = selectedFiltersObj[element.field].value.key === option.field ? "checked" : "";
           } else {
@@ -274,9 +274,9 @@ var Filter = /*#__PURE__*/function (_Component) {
       }
       return "".concat(element.title === "Date" ? "" : "".concat(element.title, ": ")).concat(label);
     });
-    /**
-     * This function toggle filters menu - show & hide.
-     * @param {boolean} flag contains value true/false to show/ hide filter.
+    /**
+     * This function toggle filters menu - show & hide.
+     * @param {boolean} flag contains value true/false to show/ hide filter.
      */
     (0, _defineProperty2["default"])(_this, "toggleFiltersMenu", function (flag) {
       var selectedFilters = _this.props.selectedFilters;
@@ -312,9 +312,9 @@ var Filter = /*#__PURE__*/function (_Component) {
         }
       }
     });
-    /**
-     * This function hides the dropdown list when user clicks outside the area of input box
-     * @param {Object} e click event that gets fired.
+    /**
+     * This function hides the dropdown list when user clicks outside the area of input box
+     * @param {Object} e click event that gets fired.
      */
     (0, _defineProperty2["default"])(_this, "toggleDropDown", function (e) {
       var showDropDownOptions = _this.state.showDropDownOptions;
@@ -324,9 +324,9 @@ var Filter = /*#__PURE__*/function (_Component) {
         });
       }
     });
-    /**
-     * This function applies the selected filter based on forData.
-     * @param {string} forData action that needs to be performed on the filter.
+    /**
+     * This function applies the selected filter based on forData.
+     * @param {string} forData action that needs to be performed on the filter.
      */
     (0, _defineProperty2["default"])(_this, "applyFilters", function (forData) {
       var _this$state = _this.state,
@@ -363,10 +363,10 @@ var Filter = /*#__PURE__*/function (_Component) {
         applyFilters(selectedFiltersObj, "apply");
       }
     });
-    /**
-     * This function takes the current user object from the dropdown list and checks if it is pre-selected.
-     * @param {Objec} user object that contains details for the user
-     * @returns the name of class with active state or not.
+    /**
+     * This function takes the current user object from the dropdown list and checks if it is pre-selected.
+     * @param {Objec} user object that contains details for the user
+     * @returns the name of class with active state or not.
      */
     (0, _defineProperty2["default"])(_this, "getClassName", function (user, indx) {
       var _this$state2 = _this.state,
@@ -379,8 +379,8 @@ var Filter = /*#__PURE__*/function (_Component) {
         return index >= 0 ? "dropdown-options active" : "dropdown-options";
       }
     });
-    /**
-     * This function reset userIds in the filter.
+    /**
+     * This function reset userIds in the filter.
      */
     (0, _defineProperty2["default"])(_this, "resetSelectedUserFilter", function () {
       _this.setState({
@@ -659,10 +659,10 @@ var Filter = /*#__PURE__*/function (_Component) {
   return (0, _createClass2["default"])(Filter, [{
     key: "onKeyDown",
     value:
-    /**
-     * This function handles the keypress traverse over the dropdown option list
-     * @param {Object} e the event object that is fired
-     * @param {Object} groupItem Object containing groupitem details
+    /**
+     * This function handles the keypress traverse over the dropdown option list
+     * @param {Object} e the event object that is fired
+     * @param {Object} groupItem Object containing groupitem details
      */
     function onKeyDown(e, groupItem) {
       var autoSelectIndex = this.state.autoSelectIndex;