techsbcn-storybook 0.14.9 → 0.15.2

package/dist/components/tables/TableComponent/TableComponent.d.ts

@@ -60,6 +60,7 @@ interface ColumnProps {
         hasColor?: boolean;
         enumSuffix?: string;
     };
+    orderBy?: string;
 }
 interface ActionProps {
     children: React.ReactNode;

package/dist/data/Routes.d.ts

@@ -0,0 +1,2 @@
+import { ObjectKey } from '../interfaces';
+export declare const ROUTES: ObjectKey;

package/dist/data/SelectMock.d.ts

@@ -6,4 +6,6 @@ interface ColourOption {
 export declare const colourOptions: ColourOption[];
 export declare const ResponseHandler: (response: any) => any;
 export declare const SearchSimple: (_filters: SearchFilters) => Promise<SearchSimpleResult[]>;
+export declare const ResponseBlobHandler: (response: any) => any;
+export declare const readFile: (guid: string) => Promise<any>;
 export {};

package/dist/data/UserList.d.ts

@@ -3,6 +3,7 @@ interface UserList {
     id: number;
     name: string;
     image: string;
+    imageGuid: string;
     skills: string[];
     information: string;
     email: string;

package/dist/data/index.d.ts

@@ -1,5 +1,6 @@
 export * from './SelectMock';
 export * from './UserList';
 export * from './Values';
+export * from './Routes';
 export * from './enums/scopes';
 export * from './enums/ActiveStatus';

package/dist/helpers/hooks.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const usePrevious: (value: any) => undefined;
+export declare const useIsMounted: () => import("react").MutableRefObject<boolean>;

package/dist/helpers/index.d.ts

@@ -1,3 +1,4 @@
 export * from './CheckPermission';
 export * from './GroupBy';
 export * from './FileDownloader';
+export * from './hooks';

package/dist/techsbcn-storybook.cjs.development.js

@@ -365,6 +365,50 @@ TextFieldComponent.defaultProps = {
   type: 'text'
 };
 
+var checkPermission = function checkPermission(persmisionAvailable, userRoles) {
+  if (persmisionAvailable === null || persmisionAvailable === undefined || persmisionAvailable.length === 0) {
+    return true;
+  } else {
+    if (userRoles === undefined || userRoles === null || userRoles === 0) {
+      return false;
+    }
+  }
+
+  if (userRoles && Array.isArray(userRoles) && Array.isArray(persmisionAvailable)) {
+    return persmisionAvailable.some(function (r) {
+      return userRoles.indexOf(r) >= 0;
+    });
+  }
+
+  if (userRoles && !Array.isArray(userRoles) && !Array.isArray(persmisionAvailable)) {
+    return userRoles === persmisionAvailable;
+  }
+
+  if (userRoles && !Array.isArray(userRoles) && Array.isArray(persmisionAvailable)) {
+    return persmisionAvailable.indexOf(userRoles) >= 0;
+  }
+
+  return userRoles.indexOf(persmisionAvailable) >= 0;
+};
+
+var usePrevious = function usePrevious(value) {
+  var ref = React.useRef();
+  React.useEffect(function () {
+    ref.current = value;
+  });
+  return ref.current;
+};
+var useIsMounted = function useIsMounted() {
+  var isMounted = React.useRef(false);
+  React.useEffect(function () {
+    isMounted.current = true;
+    return function () {
+      isMounted.current = false;
+    };
+  }, []);
+  return isMounted;
+};
+
 var ImageTableComponent = function ImageTableComponent(props) {
   var _useState = React.useState(false),
       loading = _useState[0],
@@ -374,13 +418,21 @@ var ImageTableComponent = function ImageTableComponent(props) {
       image = _useState2[0],
       setImage = _useState2[1];
 
+  var prevGuidState = usePrevious(props.guid);
+  var isMounted = useIsMounted();
   React.useEffect(function () {
-    setLoading(true);
-    props.readFile(props.guid).then(function (result) {
-      setImage(props.convertImage ? props.convertImage(result) : result);
-      setLoading(false);
-    });
-  }, [props]);
+    if (prevGuidState !== props.guid) {
+      setLoading(true);
+      props.readFile(props.guid).then(function (result) {
+        if (isMounted.current) {
+          setImage(props.convertImage ? props.convertImage(result) : result);
+          setLoading(false);
+        }
+      })["catch"](function () {
+        return setLoading(false);
+      });
+    }
+  }, [props, prevGuidState, isMounted]);
   return React__default.createElement(material.Box, {
     className: "images-table-component"
   }, loading ? React__default.createElement(material.Box, {
@@ -635,11 +687,12 @@ var TableComponent = function TableComponent(props) {
   }, React__default.createElement(_.Hidden, {
     smDown: true
   }, React__default.createElement(_.TableHead, null, React__default.createElement(_.TableRow, null, props.columns.map(function (column) {
-    var _props$isCheckTable10, _props$isCheckTable11, _props$isCheckTable12;
+    var _ref, _props$isCheckTable10, _props$isCheckTable11, _props$isCheckTable12;
 
+    var guid = Math.random().toString(36).substring(7);
     return React__default.createElement(_.TableCell, {
       className: "table-column",
-      key: column.isUnique ? column.id + "-unique" : column.id,
+      key: column.isUnique ? guid : column.id,
       align: column.align ? column.align : 'center',
       style: {
         minWidth: column.minWidth,
@@ -647,10 +700,12 @@ var TableComponent = function TableComponent(props) {
       }
     }, column.id !== 'actions' && !column.isCheck && !column.isActiveFunction && !column.noSort ? React__default.createElement(_.TableSortLabel, {
       className: "table-header-cell",
-      active: filters.orderBy === column.id,
+      active: (_ref = filters.orderBy === column.orderBy) != null ? _ref : column.id,
       direction: filters.orderAsc ? 'asc' : 'desc',
       onClick: function onClick() {
-        return createSortHandler(column.id);
+        var _column$orderBy;
+
+        return createSortHandler((_column$orderBy = column.orderBy) != null ? _column$orderBy : column.id);
       },
       hideSortIcon: true
     }, column.label) : column.isCheck ? React__default.createElement(_.Box, {
@@ -679,13 +734,14 @@ var TableComponent = function TableComponent(props) {
       className: "table-rows " + rowColor + " " + (props.onClickRow || props.onClickRowData ? 'row-click' : ''),
       role: "checkbox",
       tabIndex: -1,
-      key: row.id || index
+      key: index
     }, props.columns.map(function (column) {
       var value = ObjectbyString(row, column.id);
       var isItemSelected = column.isCheck && isSelected(row.id);
+      var guid = Math.random().toString(36).substring(7);
       return React__default.createElement(_.TableCell, {
         className: "table-cell",
-        key: column.isUnique ? column.id + "-unique" : column.id,
+        key: column.isUnique ? guid : column.id,
         sx: {
           textAlign: {
             xs: 'left',
@@ -749,10 +805,10 @@ var TableComponent = function TableComponent(props) {
     count: props.totalCount,
     rowsPerPage: props.baseFilters.limit,
     labelRowsPerPage: props.values.SHOWING,
-    labelDisplayedRows: function labelDisplayedRows(_ref) {
-      var from = _ref.from,
-          to = _ref.to,
-          count = _ref.count;
+    labelDisplayedRows: function labelDisplayedRows(_ref2) {
+      var from = _ref2.from,
+          to = _ref2.to,
+          count = _ref2.count;
       return props.values.TABLE_LABEL_DISPLAY(from, to, count);
     },
     page: props.baseFilters.page - 1,
@@ -1011,9 +1067,10 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
     if (column.id) {
       var _props$isCheckTable13, _props$isCheckTable14, _props$isCheckTable15, _props$isCheckTable16;
 
+      var guid = Math.random().toString(36).substring(7);
       return React__default.createElement(_.TableCell, {
         className: "table-column",
-        key: column.isUnique ? column.id + "-unique" : column.id,
+        key: column.isUnique ? guid : column.id,
         align: column.align ? column.align : 'center',
         style: {
           minWidth: column.minWidth,
@@ -1043,7 +1100,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
   }))), props.rows && props.rows.length > 0 ? props.rows.map(function (row, index) {
     var _props$isCheckTable17;
 
-    var key = props.rows[index + 1] && props.rows[index + 1].id === row.id ? index : row.id;
+    //const key = props.rows[index + 1] && props.rows[index + 1].id === row.id ? index : row.id;
     var rowColor = props.rowsColorColumn && ObjectbyString(row, props.rowsColorColumn.columnName) === props.rowsColorColumn.columnValue ? "row-color-" + props.rowsColorColumn.columnValue : '';
     var isRowSelected = ((_props$isCheckTable17 = props.isCheckTable) == null ? void 0 : _props$isCheckTable17.rowsChecked) && isSelected(row.id);
     return React__default.createElement(_.TableRow, {
@@ -1052,14 +1109,15 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
       tabIndex: -1,
       selected: isRowSelected,
       "aria-checked": isRowSelected,
-      key: key || index
+      key: index
     }, props.columns.map(function (column) {
       if (column.id) {
         var value = ObjectbyString(row, column.id);
         var isItemSelected = column.isCheck && isSelected(row.id);
+        var guid = Math.random().toString(36).substring(7);
         return React__default.createElement(_.TableCell, {
           className: "table-cell",
-          key: column.isUnique ? column.id + "-unique" : column.id,
+          key: column.isUnique ? guid : column.id,
           sx: {
             textAlign: {
               xs: 'left',
@@ -1141,32 +1199,6 @@ var MainLayoutSimple = function MainLayoutSimple(props) {
   }, props.mainComponent))));
 };
 
-var checkPermission = function checkPermission(persmisionAvailable, userRoles) {
-  if (persmisionAvailable === null || persmisionAvailable === undefined || persmisionAvailable.length === 0) {
-    return true;
-  } else {
-    if (userRoles === undefined || userRoles === null || userRoles === 0) {
-      return false;
-    }
-  }
-
-  if (userRoles && Array.isArray(userRoles) && Array.isArray(persmisionAvailable)) {
-    return persmisionAvailable.some(function (r) {
-      return userRoles.indexOf(r) >= 0;
-    });
-  }
-
-  if (userRoles && !Array.isArray(userRoles) && !Array.isArray(persmisionAvailable)) {
-    return userRoles === persmisionAvailable;
-  }
-
-  if (userRoles && !Array.isArray(userRoles) && Array.isArray(persmisionAvailable)) {
-    return persmisionAvailable.indexOf(userRoles) >= 0;
-  }
-
-  return userRoles.indexOf(persmisionAvailable) >= 0;
-};
-
 var VerticalNavItem = function VerticalNavItem(props) {
   var _useLocation = reactRouterDom.useLocation(),
       pathname = _useLocation.pathname;