techsbcn-storybook 0.15.1 → 0.16.0

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

@@ -58,6 +58,7 @@ interface ColumnProps {
         hasColor?: boolean;
         enumSuffix?: string;
     };
+    rowViewFormat?: (row: any) => any;
 }
 interface ActionProps {
     children: React.ReactNode;

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

@@ -61,6 +61,7 @@ interface ColumnProps {
         enumSuffix?: string;
     };
     orderBy?: string;
+    rowViewFormat?: (row: any) => any;
 }
 interface ActionProps {
     children: React.ReactNode;

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/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

@@ -135,14 +135,14 @@ var SearchComponent = function SearchComponent(props) {
     alignItems: "center"
   }, React__default.createElement(material.Grid, {
     item: true,
-    xs: props.actions ? 6 : 12,
+    xs: props.actions ? 8 : 12,
     md: props.searchBar ? 4 : props.actions ? 6 : 12
   }, React__default.createElement(material.Box, {
     px: 1,
     className: (props.enableAfter ? 'main-background-color-after' : '') + " title"
   }, props.title)), props.actions && React__default.createElement(material.Grid, {
     item: true,
-    xs: props.title ? 6 : 12,
+    xs: props.title ? 4 : 12,
     sx: {
       display: {
         xs: 'block',
@@ -153,14 +153,14 @@ var SearchComponent = function SearchComponent(props) {
     sx: {
       display: {
         xs: 'none',
-        sm: 'flex'
+        md: 'flex'
       }
     }
   }, ActionsList(props.actions)), React__default.createElement(material.Box, {
     sx: {
       display: {
         xs: 'flex',
-        sm: 'none'
+        md: 'none'
       }
     }
   }, props.actions.length > 1 ? React__default.createElement(material.Box, {
@@ -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,17 +418,21 @@ var ImageTableComponent = function ImageTableComponent(props) {
       image = _useState2[0],
       setImage = _useState2[1];
 
+  var prevGuidState = usePrevious(props.guid);
+  var isMounted = useIsMounted();
   React.useEffect(function () {
-    if (!image) {
+    if (prevGuidState !== props.guid) {
       setLoading(true);
       props.readFile(props.guid).then(function (result) {
-        setImage(props.convertImage ? props.convertImage(result) : result);
-        setLoading(false);
+        if (isMounted.current) {
+          setImage(props.convertImage ? props.convertImage(result) : result);
+          setLoading(false);
+        }
       })["catch"](function () {
         return setLoading(false);
       });
     }
-  }, [props, image]);
+  }, [props, prevGuidState, isMounted]);
   return React__default.createElement(material.Box, {
     className: "images-table-component"
   }, loading ? React__default.createElement(material.Box, {
@@ -585,6 +633,16 @@ var TableComponent = function TableComponent(props) {
     return o;
   };
 
+  var checkFormat = function checkFormat(o, f) {
+    try {
+      o = f(o);
+    } catch (_error) {
+      return undefined;
+    }
+
+    return o;
+  };
+
   var EditableTableCell = function EditableTableCell(row, value, fieldName, editableCell) {
     var rowEdit = JSON.parse(JSON.stringify(row));
 
@@ -688,7 +746,7 @@ var TableComponent = function TableComponent(props) {
       tabIndex: -1,
       key: index
     }, props.columns.map(function (column) {
-      var value = ObjectbyString(row, column.id);
+      var value = column.rowViewFormat ? checkFormat(row, column.rowViewFormat) : ObjectbyString(row, column.id);
       var isItemSelected = column.isCheck && isSelected(row.id);
       var guid = Math.random().toString(36).substring(7);
       return React__default.createElement(_.TableCell, {
@@ -708,7 +766,9 @@ var TableComponent = function TableComponent(props) {
       }, column.label !== '-' && React__default.createElement(_.Box, {
         display: "inline-block",
         className: "label-cell"
-      }, column.label)), column.action ? React__default.createElement(_.Box, null, React__default.createElement(_.Box, {
+      }, column.label)), column.rowViewFormat ? React__default.createElement(_.Box, {
+        className: "format-value"
+      }, value) : column.action ? React__default.createElement(_.Box, null, React__default.createElement(_.Box, {
         display: "flex",
         className: "actions"
       }, column.action && column.action.map(function (action, i) {
@@ -969,6 +1029,18 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
     return o;
   };
 
+  var checkFormat = function checkFormat(o, f) {
+    var result = o;
+
+    try {
+      result = f(o);
+    } catch (_error) {
+      return undefined;
+    }
+
+    return result;
+  };
+
   var EditableTableCell = function EditableTableCell(row, value, fieldName, editableCell) {
     var rowEdit = JSON.parse(JSON.stringify(row));
 
@@ -1052,7 +1124,6 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
   }))), props.rows && props.rows.length > 0 ? props.rows.map(function (row, index) {
     var _props$isCheckTable17;
 
-    //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, {
@@ -1064,7 +1135,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
       key: index
     }, props.columns.map(function (column) {
       if (column.id) {
-        var value = ObjectbyString(row, column.id);
+        var value = column.rowViewFormat ? checkFormat(row, column.rowViewFormat) : ObjectbyString(row, column.id);
         var isItemSelected = column.isCheck && isSelected(row.id);
         var guid = Math.random().toString(36).substring(7);
         return React__default.createElement(_.TableCell, {
@@ -1087,7 +1158,9 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
         }, column.label)), column.action ? React__default.createElement(_.Box, null, React__default.createElement(_.Box, {
           display: "flex",
           className: "actions"
-        }, column.action && column.action.map(function (action, i) {
+        }, column.rowViewFormat ? React__default.createElement(_.Box, {
+          className: "format-value"
+        }, value) : column.action && column.action.map(function (action, i) {
           return React__default.createElement(_.Box, {
             key: i
           }, action.onClick && React__default.createElement(_.Box, {
@@ -1151,32 +1224,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;