venice-ui 1.1.2 → 1.1.4

package/dist/cjs/Theme/Theme.js

@@ -70,6 +70,10 @@ exports.mainTheme = {
     buttonInverseHover: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
     disabledBackground: exports.Theme.colors.gray_4,
     disabledText: exports.Theme.colors.gray_1,
+    //icon
+    iconColor: exports.Theme.colors.text,
+    iconDisabledColor: exports.Theme.colors.gray_4,
+    iconHoverColor: exports.Theme.colors.primary_10,
     //text
     textColor: exports.Theme.colors.text,
     // input

package/dist/cjs/components/Icons/Icon.js

@@ -8,8 +8,13 @@ const react_1 = __importDefault(require("react"));
 const Theme_1 = require("../../Theme/Theme");
 const Icon_styles_1 = require("./Icon.styles");
 const IconsPath_1 = require("./IconsPath");
-const Icon = ({ size = 24, name, right = false, left = false, color = Theme_1.Theme.colors.text, hoverColor = Theme_1.Theme.colors.primary_10, active = false, inverseMode = false, onClick, }) => {
-    return (react_1.default.createElement(Icon_styles_1.IconElement, { onClick: onClick, right: right, left: left, active: active, hoverColor: hoverColor, inverseMode: inverseMode },
+const Icon = ({ size = 24, name, right = false, left = false, hoverColor = Theme_1.mainTheme.iconHoverColor, active = false, inverseMode = false, onClick, isDisabled = false, color = isDisabled ? Theme_1.mainTheme.iconDisabledColor : Theme_1.mainTheme.iconColor, }) => {
+    const handleClick = () => {
+        if (!isDisabled && !!onClick) {
+            onClick();
+        }
+    };
+    return (react_1.default.createElement(Icon_styles_1.IconElement, { onClick: handleClick, right: right, left: left, active: active, hoverColor: hoverColor, inverseMode: inverseMode, isDisabled: isDisabled },
         react_1.default.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
             react_1.default.createElement("path", { d: IconsPath_1.iconsPath[name], fill: color }))));
 };

package/dist/cjs/components/Icons/Icon.styles.js

@@ -15,28 +15,35 @@ exports.IconElement = styled_components_1.default.div `
   margin-left: ${(p) => (p.right ? Theme_1.Theme.padding.m : '0')};
   margin-right: ${(p) => (p.left ? Theme_1.Theme.padding.m : '0')};
   padding: 4px;
+
   ${(p) => p.onClick !== undefined &&
     `
-    cursor:pointer;
+    cursor: ${(p) => (!p.isDisabled ? 'pointer' : 'not-allowed')};
     path {
-      fill:${(p) => (p.color ? p.color : Theme_1.Theme.colors.primary)};
-      }
-    &:hover{
-      cursor:pointer;
-      ${!p.inverseMode
-        ? `
-        background-color:${p.hoverColor};  
-      `
-        : `
-      path{
-        fill:${p.hoverColor};
-      }
-      `}
+      fill: ${(p) => (p.color ? p.color : Theme_1.Theme.colors.primary)};
+    }
+
+    ${!p.isDisabled &&
+        `
+      &:hover {
+        cursor: ${(!p.isDisabled ? 'pointer' : 'not-allowed')};
+        ${!p.inverseMode
+            ? `
+          background-color: ${p.hoverColor};  
+        `
+            : `
+          path {
+            fill: ${p.hoverColor};
+          }
+        `}
       }
+    `}
   `}
 
   ${(p) => p.active &&
     `
-    background-color:${p.hoverColor};path {
-    }`}
+    background-color: ${p.hoverColor};
+    path {
+    }
+  `}
 `;

package/dist/cjs/components/Table/Table.js

@@ -58,12 +58,26 @@ hover = true, selectable = true, sortable = true, filtrable = false, sort = {
         filters: filters,
         headers: checkHeaders(),
     });
+    const isElementsArrayEqual = (arr1, arr2) => {
+        if (arr1.length !== arr2.length) {
+            return false;
+        }
+        return arr1.every((element, index) => element === arr2[index]);
+    };
     (0, react_1.useEffect)(() => {
         setTableProps({
             ...tableProps,
             elements: (0, tableHelper_1.setElements)(elements, sort, filters),
         });
     }, [elements]);
+    (0, react_1.useEffect)(() => {
+        if (!isElementsArrayEqual(elements, tableProps.elements)) {
+            setTableProps({
+                ...tableProps,
+                elements: (0, tableHelper_1.setElements)(elements, sort, filters),
+            });
+        }
+    });
     const [selectedRow, setSelectedRow] = (0, react_1.useState)('');
     const handleRowClick = (id) => {
         if (selectable) {
@@ -115,7 +129,7 @@ hover = true, selectable = true, sortable = true, filtrable = false, sort = {
                                 : 'arrow_drop_up', color: theme.tableCellSortIcon, size: 20 })))))))))),
             react_1.default.createElement("tbody", null, tableProps.elements.map((item) => (react_1.default.createElement(Table_styles_1.TableRow, { key: item.id, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header) => (react_1.default.createElement(react_1.default.Fragment, null, header.action ? (react_1.default.createElement(Table_styles_1.OptionTableCell, null,
                 react_1.default.createElement(Table_styles_1.OptionTableCellWrapper, { onClick: (e) => e.stopPropagation() },
-                    react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: moreActions, targetID: item.id, iconName: 'more_vert', color: theme.tableMoreIconColor, iconInverseMode: true })))) : (react_1.default.createElement(Table_styles_1.TableCell, { key: `${item.id}-${header.name}` }, header.date
+                    react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: moreActions, targetID: item.id, iconName: "more_vert", color: theme.tableMoreIconColor, iconInverseMode: true })))) : (react_1.default.createElement(Table_styles_1.TableCell, { key: `${item.id}-${header.name}` }, header.date
                 ? (0, date_fns_1.format)(item[header.valueSource], 'dd-MM-yyyy')
                 : item[header.valueSource]))))))))))));
 };

package/dist/esm/Theme/Theme.js

@@ -67,6 +67,10 @@ export const mainTheme = {
     buttonInverseHover: lighten(0.3, Theme.colors.primary),
     disabledBackground: Theme.colors.gray_4,
     disabledText: Theme.colors.gray_1,
+    //icon
+    iconColor: Theme.colors.text,
+    iconDisabledColor: Theme.colors.gray_4,
+    iconHoverColor: Theme.colors.primary_10,
     //text
     textColor: Theme.colors.text,
     // input

package/dist/esm/components/Icons/Icon.js

@@ -1,9 +1,14 @@
 import React from 'react';
-import { Theme } from '../../Theme/Theme';
+import { mainTheme } from '../../Theme/Theme';
 import { IconElement } from './Icon.styles';
 import { iconsPath } from './IconsPath';
-export const Icon = ({ size = 24, name, right = false, left = false, color = Theme.colors.text, hoverColor = Theme.colors.primary_10, active = false, inverseMode = false, onClick, }) => {
-    return (React.createElement(IconElement, { onClick: onClick, right: right, left: left, active: active, hoverColor: hoverColor, inverseMode: inverseMode },
+export const Icon = ({ size = 24, name, right = false, left = false, hoverColor = mainTheme.iconHoverColor, active = false, inverseMode = false, onClick, isDisabled = false, color = isDisabled ? mainTheme.iconDisabledColor : mainTheme.iconColor, }) => {
+    const handleClick = () => {
+        if (!isDisabled && !!onClick) {
+            onClick();
+        }
+    };
+    return (React.createElement(IconElement, { onClick: handleClick, right: right, left: left, active: active, hoverColor: hoverColor, inverseMode: inverseMode, isDisabled: isDisabled },
         React.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
             React.createElement("path", { d: iconsPath[name], fill: color }))));
 };

package/dist/esm/components/Icons/Icon.styles.js

@@ -9,28 +9,35 @@ export const IconElement = styled.div `
   margin-left: ${(p) => (p.right ? Theme.padding.m : '0')};
   margin-right: ${(p) => (p.left ? Theme.padding.m : '0')};
   padding: 4px;
+
   ${(p) => p.onClick !== undefined &&
     `
-    cursor:pointer;
+    cursor: ${(p) => (!p.isDisabled ? 'pointer' : 'not-allowed')};
     path {
-      fill:${(p) => (p.color ? p.color : Theme.colors.primary)};
-      }
-    &:hover{
-      cursor:pointer;
-      ${!p.inverseMode
-        ? `
-        background-color:${p.hoverColor};  
-      `
-        : `
-      path{
-        fill:${p.hoverColor};
-      }
-      `}
+      fill: ${(p) => (p.color ? p.color : Theme.colors.primary)};
+    }
+
+    ${!p.isDisabled &&
+        `
+      &:hover {
+        cursor: ${(!p.isDisabled ? 'pointer' : 'not-allowed')};
+        ${!p.inverseMode
+            ? `
+          background-color: ${p.hoverColor};  
+        `
+            : `
+          path {
+            fill: ${p.hoverColor};
+          }
+        `}
       }
+    `}
   `}
 
   ${(p) => p.active &&
     `
-    background-color:${p.hoverColor};path {
-    }`}
+    background-color: ${p.hoverColor};
+    path {
+    }
+  `}
 `;

package/dist/esm/components/Table/Table.js

@@ -32,12 +32,26 @@ hover = true, selectable = true, sortable = true, filtrable = false, sort = {
         filters: filters,
         headers: checkHeaders(),
     });
+    const isElementsArrayEqual = (arr1, arr2) => {
+        if (arr1.length !== arr2.length) {
+            return false;
+        }
+        return arr1.every((element, index) => element === arr2[index]);
+    };
     useEffect(() => {
         setTableProps({
             ...tableProps,
             elements: setElements(elements, sort, filters),
         });
     }, [elements]);
+    useEffect(() => {
+        if (!isElementsArrayEqual(elements, tableProps.elements)) {
+            setTableProps({
+                ...tableProps,
+                elements: setElements(elements, sort, filters),
+            });
+        }
+    });
     const [selectedRow, setSelectedRow] = useState('');
     const handleRowClick = (id) => {
         if (selectable) {
@@ -89,7 +103,7 @@ hover = true, selectable = true, sortable = true, filtrable = false, sort = {
                                 : 'arrow_drop_up', color: theme.tableCellSortIcon, size: 20 })))))))))),
             React.createElement("tbody", null, tableProps.elements.map((item) => (React.createElement(TableRow, { key: item.id, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header) => (React.createElement(React.Fragment, null, header.action ? (React.createElement(OptionTableCell, null,
                 React.createElement(OptionTableCellWrapper, { onClick: (e) => e.stopPropagation() },
-                    React.createElement(DropdownMenu, { options: moreActions, targetID: item.id, iconName: 'more_vert', color: theme.tableMoreIconColor, iconInverseMode: true })))) : (React.createElement(TableCell, { key: `${item.id}-${header.name}` }, header.date
+                    React.createElement(DropdownMenu, { options: moreActions, targetID: item.id, iconName: "more_vert", color: theme.tableMoreIconColor, iconInverseMode: true })))) : (React.createElement(TableCell, { key: `${item.id}-${header.name}` }, header.date
                 ? format(item[header.valueSource], 'dd-MM-yyyy')
                 : item[header.valueSource]))))))))))));
 };

package/dist/types/Theme/Theme.d.ts

@@ -65,6 +65,9 @@ export declare const mainTheme: {
     buttonInverseHover: string;
     disabledBackground: string;
     disabledText: string;
+    iconColor: string;
+    iconDisabledColor: string;
+    iconHoverColor: string;
     textColor: string;
     inputDefaultBackground: string;
     inputDefaultBorder: string;

package/dist/types/components/Icons/Icon.d.ts

@@ -9,5 +9,6 @@ export interface IIconActionProps {
     onClick?: () => void;
     active?: boolean;
     inverseMode?: boolean;
+    isDisabled?: boolean;
 }
 export declare const Icon: FC<IIconActionProps>;

package/dist/types/components/Icons/Icon.styles.d.ts

@@ -5,6 +5,7 @@ interface IIconElementProps {
     hoverColor: string;
     active: boolean;
     inverseMode: boolean;
+    isDisabled: boolean;
 }
 export declare const IconElement: import("styled-components").StyledComponent<"div", any, IIconElementProps, never>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",