venice-ui 2.4.2 → 2.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/cjs/components/Card/Card.js +6 -3
  2. package/dist/cjs/components/ElementHeader/ElementHeader.js +1 -1
  3. package/dist/cjs/components/Table/Table.js +33 -9
  4. package/dist/esm/components/Card/Card.js +6 -3
  5. package/dist/esm/components/ElementHeader/ElementHeader.js +1 -1
  6. package/dist/esm/components/Table/Table.js +33 -9
  7. package/dist/types/components/Card/Card.d.ts +1 -0
  8. package/package.json +1 -1
package/dist/cjs/components/Card/Card.js CHANGED
@@ -8,9 +8,12 @@ const react_1 = __importDefault(require("react"));
8
8
  const Card_styles_1 = require("./Card.styles");
9
9
  const ElementHeader_1 = require("../ElementHeader");
10
10
  const Theme_1 = require("../../Theme");
11
- const Card = ({ children, title, actionLabel, theme = Theme_1.mainTheme, iconColor = theme.textColor, iconHoverColor = theme.action, handleClick, handleBack, height, options, shadow = true, headerDivader = false, actionDisabled = false, }) => {
11
+ const Card = ({ children, title, actionLabel, theme = Theme_1.mainTheme, iconColor = theme.textColor, iconHoverColor = theme.action, handleClick, handleBack, height, options, shadow = true, headerDivader = false, actionDisabled = false, customHeader, }) => {
12
+ const hasHeader = !!title || !!actionLabel || !!customHeader;
12
13
  return (react_1.default.createElement(Card_styles_1.CardElement, { height: height, shadow: shadow },
13
- (title || actionLabel) && (react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, options: options, theme: theme, iconColor: iconColor, iconHoverColor: iconHoverColor, bottomDivader: headerDivader, actionDisabled: actionDisabled })),
14
- react_1.default.createElement(Card_styles_1.CardContent, { soloMode: !title && !actionLabel }, children)));
14
+ customHeader
15
+ ? customHeader
16
+ : (title || actionLabel) && (react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, options: options, theme: theme, iconColor: iconColor, iconHoverColor: iconHoverColor, bottomDivader: headerDivader, actionDisabled: actionDisabled })),
17
+ react_1.default.createElement(Card_styles_1.CardContent, { soloMode: !hasHeader }, children)));
15
18
  };
16
19
  exports.Card = Card;
package/dist/cjs/components/ElementHeader/ElementHeader.js CHANGED
@@ -31,7 +31,7 @@ const ElementHeader = ({ title, actionLabel = '', handleClose, handleClick, hand
31
31
  else if (!handleClose && handleClick && actionLabel) {
32
32
  return (react_1.default.createElement(Aligment_1.Aligment, { align: "center", width: "auto" },
33
33
  react_1.default.createElement(Button_1.Button, { mode: "secondary", text: actionLabel, onClick: () => handleClick(), disabled: actionDisabled }),
34
- options && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: options, right: true, iconColor: iconColor, position: 'right' }))));
34
+ options && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: options, right: true, iconColor: iconColor, position: "right" }))));
35
35
  }
36
36
  };
37
37
  return (react_1.default.createElement(ElementHeader_styles_1.ElementHeaderWrapper, { justify: !title && !children ? 'flex-end' : 'space-between', vPadding: Theme_1.Theme.padding.m, hPadding: Theme_1.Theme.padding.l, backgroundColor: backgroundColor, bottomDivader: bottomDivader },
package/dist/cjs/components/Table/Table.js CHANGED
@@ -34,16 +34,21 @@ const Cell_1 = require("./Cell");
34
34
  const Pagination_1 = require("../Pagination");
35
35
  const Filters_1 = require("../Filters");
36
36
  const Typography_1 = require("../Typography");
37
- const Table = ({ theme = Theme_1.mainTheme, headers, elements, hover = true, selectable = true, sortable = true, sort = {
37
+ const Table = ({ theme = Theme_1.mainTheme, headers, elements, hover = true, selectable = true, filtrable = false, sortable = true, sort = {
38
38
  name: '',
39
39
  order: 'none',
40
40
  }, pageSize = 10, ifPagination = false, moreActions = [], onRowClick, }) => {
41
41
  const initialElementsRef = (0, react_1.useRef)(null);
42
42
  (0, react_1.useEffect)(() => {
43
- if (!initialElementsRef.current && Array.isArray(elements) && elements.length > 0) {
43
+ if (!initialElementsRef.current &&
44
+ Array.isArray(elements) &&
45
+ elements.length > 0) {
44
46
  initialElementsRef.current = elements.slice();
45
47
  }
46
- setTableProps((prev) => ({ ...prev, elements: Array.isArray(elements) ? elements : [] }));
48
+ setTableProps((prev) => ({
49
+ ...prev,
50
+ elements: Array.isArray(elements) ? elements : [],
51
+ }));
47
52
  // eslint-disable-next-line react-hooks/exhaustive-deps
48
53
  }, [elements]);
49
54
  const checkHeaders = () => {
@@ -99,21 +104,40 @@ const Table = ({ theme = Theme_1.mainTheme, headers, elements, hover = true, sel
99
104
  elements: filteredElements,
100
105
  }));
101
106
  setCurrentPage(1);
102
- setNoResultsMessage(filteredElements && filteredElements.length === 0 ? 'Nie ma żadnych wyników' : null);
107
+ setNoResultsMessage(filteredElements && filteredElements.length === 0
108
+ ? 'Nie ma żadnych wyników'
109
+ : null);
103
110
  }, [setCurrentPage, setTableProps]);
104
111
  const [filtersClearSignal, setFiltersClearSignal] = (0, react_1.useState)(0);
105
112
  const handleClearFilters = (0, react_1.useCallback)(() => {
106
113
  setFiltersClearSignal((s) => s + 1);
107
- const full = (initialElementsRef.current && initialElementsRef.current.length > 0)
114
+ const full = initialElementsRef.current && initialElementsRef.current.length > 0
108
115
  ? initialElementsRef.current
109
- : (Array.isArray(elements) ? elements : []);
110
- setTableProps((prev) => ({ ...prev, elements: Array.isArray(full) ? full.slice() : [] }));
116
+ : Array.isArray(elements)
117
+ ? elements
118
+ : [];
119
+ setTableProps((prev) => ({
120
+ ...prev,
121
+ elements: Array.isArray(full) ? full.slice() : [],
122
+ }));
111
123
  setCurrentPage(1);
112
124
  setNoResultsMessage(null);
113
125
  }, [elements, setCurrentPage, setNoResultsMessage]);
114
126
  return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
115
- react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 12 } },
116
- react_1.default.createElement(Filters_1.Filters, { title: "Select filters", labelConfirm: "Apply", labelClose: "Cancel", labelClearAll: "Clear", headers: headers, elements: initialElementsRef.current && initialElementsRef.current.length > 0 ? initialElementsRef.current : elements, fullElements: initialElementsRef.current && initialElementsRef.current.length > 0 ? initialElementsRef.current : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters })),
127
+ filtrable && (react_1.default.createElement("div", { style: {
128
+ display: 'flex',
129
+ alignItems: 'center',
130
+ justifyContent: 'space-between',
131
+ gap: 12,
132
+ marginBottom: 12,
133
+ } },
134
+ react_1.default.createElement(Filters_1.Filters, { title: "Select filters", labelConfirm: "Apply", labelClose: "Cancel", labelClearAll: "Clear", headers: headers, elements: initialElementsRef.current &&
135
+ initialElementsRef.current.length > 0
136
+ ? initialElementsRef.current
137
+ : elements, fullElements: initialElementsRef.current &&
138
+ initialElementsRef.current.length > 0
139
+ ? initialElementsRef.current
140
+ : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters }))),
117
141
  react_1.default.createElement(Table_styles_1.TableWrapper, { cellPadding: "0", cellSpacing: "0" },
118
142
  react_1.default.createElement(Table_styles_1.TableHead, null,
119
143
  react_1.default.createElement(Table_styles_1.TableRow, { hover: false, selectable: false, active: false }, tableProps.headers.map((header) => (react_1.default.createElement(HeaderCell_1.HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableProps.sort }))))),
package/dist/esm/components/Card/Card.js CHANGED
@@ -2,8 +2,11 @@ import React from 'react';
2
2
  import { CardContent, CardElement } from './Card.styles';
3
3
  import { ElementHeader } from '../ElementHeader';
4
4
  import { mainTheme } from '../../Theme';
5
- export const Card = ({ children, title, actionLabel, theme = mainTheme, iconColor = theme.textColor, iconHoverColor = theme.action, handleClick, handleBack, height, options, shadow = true, headerDivader = false, actionDisabled = false, }) => {
5
+ export const Card = ({ children, title, actionLabel, theme = mainTheme, iconColor = theme.textColor, iconHoverColor = theme.action, handleClick, handleBack, height, options, shadow = true, headerDivader = false, actionDisabled = false, customHeader, }) => {
6
+ const hasHeader = !!title || !!actionLabel || !!customHeader;
6
7
  return (React.createElement(CardElement, { height: height, shadow: shadow },
7
- (title || actionLabel) && (React.createElement(ElementHeader, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, options: options, theme: theme, iconColor: iconColor, iconHoverColor: iconHoverColor, bottomDivader: headerDivader, actionDisabled: actionDisabled })),
8
- React.createElement(CardContent, { soloMode: !title && !actionLabel }, children)));
8
+ customHeader
9
+ ? customHeader
10
+ : (title || actionLabel) && (React.createElement(ElementHeader, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, options: options, theme: theme, iconColor: iconColor, iconHoverColor: iconHoverColor, bottomDivader: headerDivader, actionDisabled: actionDisabled })),
11
+ React.createElement(CardContent, { soloMode: !hasHeader }, children)));
9
12
  };
package/dist/esm/components/ElementHeader/ElementHeader.js CHANGED
@@ -25,7 +25,7 @@ export const ElementHeader = ({ title, actionLabel = '', handleClose, handleClic
25
25
  else if (!handleClose && handleClick && actionLabel) {
26
26
  return (React.createElement(Aligment, { align: "center", width: "auto" },
27
27
  React.createElement(Button, { mode: "secondary", text: actionLabel, onClick: () => handleClick(), disabled: actionDisabled }),
28
- options && (React.createElement(DropdownMenu, { options: options, right: true, iconColor: iconColor, position: 'right' }))));
28
+ options && (React.createElement(DropdownMenu, { options: options, right: true, iconColor: iconColor, position: "right" }))));
29
29
  }
30
30
  };
31
31
  return (React.createElement(ElementHeaderWrapper, { justify: !title && !children ? 'flex-end' : 'space-between', vPadding: Theme.padding.m, hPadding: Theme.padding.l, backgroundColor: backgroundColor, bottomDivader: bottomDivader },
package/dist/esm/components/Table/Table.js CHANGED
@@ -8,16 +8,21 @@ import { Cell } from './Cell';
8
8
  import { Pagination } from '../Pagination';
9
9
  import { Filters } from '../Filters';
10
10
  import { TextAccent } from '../Typography';
11
- export const Table = ({ theme = mainTheme, headers, elements, hover = true, selectable = true, sortable = true, sort = {
11
+ export const Table = ({ theme = mainTheme, headers, elements, hover = true, selectable = true, filtrable = false, sortable = true, sort = {
12
12
  name: '',
13
13
  order: 'none',
14
14
  }, pageSize = 10, ifPagination = false, moreActions = [], onRowClick, }) => {
15
15
  const initialElementsRef = useRef(null);
16
16
  useEffect(() => {
17
- if (!initialElementsRef.current && Array.isArray(elements) && elements.length > 0) {
17
+ if (!initialElementsRef.current &&
18
+ Array.isArray(elements) &&
19
+ elements.length > 0) {
18
20
  initialElementsRef.current = elements.slice();
19
21
  }
20
- setTableProps((prev) => ({ ...prev, elements: Array.isArray(elements) ? elements : [] }));
22
+ setTableProps((prev) => ({
23
+ ...prev,
24
+ elements: Array.isArray(elements) ? elements : [],
25
+ }));
21
26
  // eslint-disable-next-line react-hooks/exhaustive-deps
22
27
  }, [elements]);
23
28
  const checkHeaders = () => {
@@ -73,21 +78,40 @@ export const Table = ({ theme = mainTheme, headers, elements, hover = true, sele
73
78
  elements: filteredElements,
74
79
  }));
75
80
  setCurrentPage(1);
76
- setNoResultsMessage(filteredElements && filteredElements.length === 0 ? 'Nie ma żadnych wyników' : null);
81
+ setNoResultsMessage(filteredElements && filteredElements.length === 0
82
+ ? 'Nie ma żadnych wyników'
83
+ : null);
77
84
  }, [setCurrentPage, setTableProps]);
78
85
  const [filtersClearSignal, setFiltersClearSignal] = useState(0);
79
86
  const handleClearFilters = useCallback(() => {
80
87
  setFiltersClearSignal((s) => s + 1);
81
- const full = (initialElementsRef.current && initialElementsRef.current.length > 0)
88
+ const full = initialElementsRef.current && initialElementsRef.current.length > 0
82
89
  ? initialElementsRef.current
83
- : (Array.isArray(elements) ? elements : []);
84
- setTableProps((prev) => ({ ...prev, elements: Array.isArray(full) ? full.slice() : [] }));
90
+ : Array.isArray(elements)
91
+ ? elements
92
+ : [];
93
+ setTableProps((prev) => ({
94
+ ...prev,
95
+ elements: Array.isArray(full) ? full.slice() : [],
96
+ }));
85
97
  setCurrentPage(1);
86
98
  setNoResultsMessage(null);
87
99
  }, [elements, setCurrentPage, setNoResultsMessage]);
88
100
  return (React.createElement(ThemeProvider, { theme: theme },
89
- React.createElement("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 12 } },
90
- React.createElement(Filters, { title: "Select filters", labelConfirm: "Apply", labelClose: "Cancel", labelClearAll: "Clear", headers: headers, elements: initialElementsRef.current && initialElementsRef.current.length > 0 ? initialElementsRef.current : elements, fullElements: initialElementsRef.current && initialElementsRef.current.length > 0 ? initialElementsRef.current : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters })),
101
+ filtrable && (React.createElement("div", { style: {
102
+ display: 'flex',
103
+ alignItems: 'center',
104
+ justifyContent: 'space-between',
105
+ gap: 12,
106
+ marginBottom: 12,
107
+ } },
108
+ React.createElement(Filters, { title: "Select filters", labelConfirm: "Apply", labelClose: "Cancel", labelClearAll: "Clear", headers: headers, elements: initialElementsRef.current &&
109
+ initialElementsRef.current.length > 0
110
+ ? initialElementsRef.current
111
+ : elements, fullElements: initialElementsRef.current &&
112
+ initialElementsRef.current.length > 0
113
+ ? initialElementsRef.current
114
+ : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters }))),
91
115
  React.createElement(TableWrapper, { cellPadding: "0", cellSpacing: "0" },
92
116
  React.createElement(TableHead, null,
93
117
  React.createElement(TableRow, { hover: false, selectable: false, active: false }, tableProps.headers.map((header) => (React.createElement(HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableProps.sort }))))),
package/dist/types/components/Card/Card.d.ts CHANGED
@@ -2,6 +2,7 @@ import React, { FC } from 'react';
2
2
  import { IAction } from '../../types';
3
3
  interface ICardProps {
4
4
  children: React.ReactNode;
5
+ customHeader?: React.ReactNode;
5
6
  title?: string;
6
7
  actionLabel?: string;
7
8
  handleClick?: () => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "2.4.2",
3
+ "version": "2.4.4",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",