@bit.rhplus/ui.f7.detail-item 0.0.145 → 0.0.147
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.
package/components/Grid.jsx
CHANGED
|
@@ -20,48 +20,48 @@ import AgGrid from '@bit.rhplus/ui.grid';
|
|
|
20
20
|
import SaveButton from '@bit.rhplus/ui.f7.save-button';
|
|
21
21
|
|
|
22
22
|
|
|
23
|
-
// Grid komponenta s
|
|
23
|
+
// Grid komponenta s mod�ln� editac� - zobrazuje AG Grid pro v�ber polo�ky
|
|
24
24
|
export const Grid = ({
|
|
25
25
|
children,
|
|
26
26
|
value,
|
|
27
27
|
onSave,
|
|
28
|
-
onChange, //
|
|
29
|
-
title = 'Editace
|
|
30
|
-
placeholder = 'Vyberte
|
|
28
|
+
onChange, // Prid�no pro Form.Item kompatibilitu
|
|
29
|
+
title = 'Editace v�beru',
|
|
30
|
+
placeholder = 'Vyberte polo�ku',
|
|
31
31
|
color = '#6887d3',
|
|
32
32
|
size = 16,
|
|
33
|
-
lucideIcon, // Lucide React ikona (
|
|
34
|
-
icon, //
|
|
33
|
+
lucideIcon, // Lucide React ikona (napr. Table)
|
|
34
|
+
icon, // Jak�koliv React komponenta ikony
|
|
35
35
|
rowData = [], // Array dat pro grid
|
|
36
|
-
columnDefs = [], // Definice
|
|
37
|
-
gridOptions = {}, //
|
|
38
|
-
onRowDoubleClicked, // Callback pro double click na
|
|
39
|
-
gridHeight = '400px', //
|
|
36
|
+
columnDefs = [], // Definice sloupcu pro AG Grid
|
|
37
|
+
gridOptions = {}, // Dodatecn� mo�nosti pro AG Grid
|
|
38
|
+
onRowDoubleClicked, // Callback pro double click na r�dek
|
|
39
|
+
gridHeight = '400px', // V��ka gridu
|
|
40
40
|
selectionMode = 'single', // 'single' nebo 'multiple'
|
|
41
|
-
displayField = 'name', // Pole,
|
|
42
|
-
field = null // Pole pro
|
|
41
|
+
displayField = 'name', // Pole, kter� se zobraz� v detail-item pri v�beru
|
|
42
|
+
field = null // Pole pro v�ber konkr�tn� vlastnosti objektu
|
|
43
43
|
}) => {
|
|
44
44
|
const [popupOpened, setPopupOpened] = useState(false);
|
|
45
45
|
|
|
46
|
-
//
|
|
46
|
+
// Naj�st objekty na z�klade value (pokud je field nastaven, value mu�e b�t jen pole konkr�tn�ch vlastnost�)
|
|
47
47
|
const findRowsByValue = (val) => {
|
|
48
48
|
if (!val || !rowData.length) return [];
|
|
49
49
|
|
|
50
50
|
const valueArray = Array.isArray(val) ? val : [val];
|
|
51
51
|
|
|
52
52
|
if (field) {
|
|
53
|
-
// Pokud je field nastaven, hledej objekty podle
|
|
53
|
+
// Pokud je field nastaven, hledej objekty podle t�to vlastnosti
|
|
54
54
|
return valueArray.map(v => rowData.find(row => row[field] === v)).filter(Boolean);
|
|
55
55
|
} else {
|
|
56
|
-
// Pokud field
|
|
56
|
+
// Pokud field nen� nastaven, ocek�v�me objekty
|
|
57
57
|
return valueArray;
|
|
58
58
|
}
|
|
59
59
|
};
|
|
60
60
|
|
|
61
|
-
// Inicializuj selectedRows pouze jednou
|
|
61
|
+
// Inicializuj selectedRows pouze jednou pri mount
|
|
62
62
|
const initialSelectedRows = useMemo(() => {
|
|
63
63
|
return findRowsByValue(value);
|
|
64
|
-
}, []); //
|
|
64
|
+
}, []); // Pr�zdn� dependency array - pouze pri mount
|
|
65
65
|
|
|
66
66
|
const [selectedRows, setSelectedRows] = useState(initialSelectedRows);
|
|
67
67
|
|
|
@@ -74,13 +74,13 @@ export const Grid = ({
|
|
|
74
74
|
};
|
|
75
75
|
|
|
76
76
|
const handleCancel = () => {
|
|
77
|
-
//
|
|
77
|
+
// Pri zru�en� resetuj na puvodn� hodnoty
|
|
78
78
|
setSelectedRows(findRowsByValue(value));
|
|
79
79
|
setPopupOpened(false);
|
|
80
80
|
};
|
|
81
81
|
|
|
82
82
|
const handleOpenPopup = () => {
|
|
83
|
-
//
|
|
83
|
+
// Pri otevren� nastav aktu�ln� hodnotu
|
|
84
84
|
setSelectedRows(findRowsByValue(value));
|
|
85
85
|
setPopupOpened(true);
|
|
86
86
|
};
|
|
@@ -91,13 +91,13 @@ export const Grid = ({
|
|
|
91
91
|
const selectedNodes = event.api.getSelectedNodes();
|
|
92
92
|
const selectedData = selectedNodes.map(node => node.data);
|
|
93
93
|
|
|
94
|
-
// Pro oba
|
|
94
|
+
// Pro oba re�imy pouze aktualizujeme stav - ulo�en� bude pres Save button
|
|
95
95
|
setSelectedRows(selectedData);
|
|
96
96
|
}
|
|
97
97
|
};
|
|
98
98
|
|
|
99
99
|
const handleSaveSelection = () => {
|
|
100
|
-
//
|
|
100
|
+
// Ulo�en� vybran�ch polo�ek pro oba re�imy
|
|
101
101
|
let result;
|
|
102
102
|
|
|
103
103
|
if (selectionMode === 'single') {
|
|
@@ -106,10 +106,10 @@ export const Grid = ({
|
|
|
106
106
|
result = selectedRows.length === 1 ? selectedRows[0] : selectedRows;
|
|
107
107
|
}
|
|
108
108
|
|
|
109
|
-
// Rozhodni jakou hodnotu
|
|
109
|
+
// Rozhodni jakou hodnotu vr�tit podle field parametru
|
|
110
110
|
const returnValue = field && result ? (Array.isArray(result) ? result.map(item => item[field]) : result[field]) : result;
|
|
111
111
|
|
|
112
|
-
// Debug pouze
|
|
112
|
+
// Debug pouze pri ulo�en�
|
|
113
113
|
if (onChange) {
|
|
114
114
|
onChange(returnValue);
|
|
115
115
|
} else if (onSave) {
|
|
@@ -120,7 +120,7 @@ export const Grid = ({
|
|
|
120
120
|
};
|
|
121
121
|
|
|
122
122
|
|
|
123
|
-
//
|
|
123
|
+
// Urc� jakou ikonu pou��t - priorita: icon > lucideIcon > v�choz� Table
|
|
124
124
|
const renderIcon = () => {
|
|
125
125
|
if (icon) {
|
|
126
126
|
return React.cloneElement(icon, { size, color, ...icon.props });
|
|
@@ -133,12 +133,12 @@ export const Grid = ({
|
|
|
133
133
|
};
|
|
134
134
|
|
|
135
135
|
|
|
136
|
-
//
|
|
136
|
+
// Kombinovan� grid options
|
|
137
137
|
const combinedGridOptions = {
|
|
138
138
|
rowSelection: selectionMode,
|
|
139
139
|
onSelectionChanged: handleRowSelection,
|
|
140
140
|
onRowDoubleClicked: onRowDoubleClicked,
|
|
141
|
-
suppressRowClickSelection: false, //
|
|
141
|
+
suppressRowClickSelection: false, // Umo�n� v�ber kliknut�m na r�dek pro oba re�imy
|
|
142
142
|
...gridOptions
|
|
143
143
|
};
|
|
144
144
|
|
|
@@ -147,15 +147,15 @@ export const Grid = ({
|
|
|
147
147
|
<Link onClick={handleOpenPopup} className="link" style={linkStyle}>
|
|
148
148
|
{renderIcon()}
|
|
149
149
|
{(() => {
|
|
150
|
-
//
|
|
150
|
+
// Pou�ij objekty pro zobrazen� (preveden� z value)
|
|
151
151
|
const currentRows = findRowsByValue(value);
|
|
152
152
|
|
|
153
153
|
if (currentRows.length === 1) {
|
|
154
|
-
// Pokud je
|
|
154
|
+
// Pokud je vybran� jedna polo�ka, zobraz hodnotu z displayField
|
|
155
155
|
const item = currentRows[0];
|
|
156
|
-
return item[displayField] || item.name || item.title || item.id || '
|
|
156
|
+
return item[displayField] || item.name || item.title || item.id || 'Vybran� polo�ka';
|
|
157
157
|
} else if (currentRows.length > 1) {
|
|
158
|
-
return `${currentRows.length}
|
|
158
|
+
return `${currentRows.length} vybran�ch polo�ek`;
|
|
159
159
|
}
|
|
160
160
|
return placeholder;
|
|
161
161
|
})()}
|
|
@@ -191,7 +191,7 @@ export const Grid = ({
|
|
|
191
191
|
flex: 1,
|
|
192
192
|
display: 'flex',
|
|
193
193
|
flexDirection: 'column',
|
|
194
|
-
height: 'calc(100vh - 230px)', //
|
|
194
|
+
height: 'calc(100vh - 230px)', // V�ce prostoru pro SaveButton
|
|
195
195
|
padding: '0'
|
|
196
196
|
}}>
|
|
197
197
|
<div
|
|
@@ -209,9 +209,9 @@ export const Grid = ({
|
|
|
209
209
|
rowData={rowData}
|
|
210
210
|
gridOptions={{
|
|
211
211
|
...combinedGridOptions,
|
|
212
|
-
popupParent: document.body, // Popup menu se
|
|
213
|
-
rowHeight: 48, //
|
|
214
|
-
headerHeight: 56 //
|
|
212
|
+
popupParent: document.body, // Popup menu se zobraz� v body, ne v popup
|
|
213
|
+
rowHeight: 48, // Explicitn� v��ka r�dku
|
|
214
|
+
headerHeight: 56 // Explicitn� v��ka hlavicky
|
|
215
215
|
}}
|
|
216
216
|
height="100%"
|
|
217
217
|
// appearance="ag-theme-quartz"
|
|
@@ -219,7 +219,7 @@ export const Grid = ({
|
|
|
219
219
|
sortable: true,
|
|
220
220
|
filter: true,
|
|
221
221
|
resizable: true,
|
|
222
|
-
minWidth: 100, //
|
|
222
|
+
minWidth: 100, // Minim�ln� ��rka sloupcu pro mobil
|
|
223
223
|
...gridOptions.defaultColDef
|
|
224
224
|
}}
|
|
225
225
|
/>
|
package/dist/components/Grid.js
CHANGED
|
@@ -5,38 +5,38 @@ import { Link, Icon, Popup, Navbar, NavLeft, NavTitle, NavTitleLarge, NavRight,
|
|
|
5
5
|
import { Table } from 'lucide-react';
|
|
6
6
|
import AgGrid from '@bit.rhplus/ui.grid';
|
|
7
7
|
import SaveButton from '@bit.rhplus/ui.f7.save-button';
|
|
8
|
-
// Grid komponenta s
|
|
9
|
-
export const Grid = ({ children, value, onSave, onChange, //
|
|
10
|
-
title = 'Editace
|
|
11
|
-
icon, //
|
|
8
|
+
// Grid komponenta s mod�ln� editac� - zobrazuje AG Grid pro v�ber polo�ky
|
|
9
|
+
export const Grid = ({ children, value, onSave, onChange, // Prid�no pro Form.Item kompatibilitu
|
|
10
|
+
title = 'Editace v�beru', placeholder = 'Vyberte polo�ku', color = '#6887d3', size = 16, lucideIcon, // Lucide React ikona (napr. Table)
|
|
11
|
+
icon, // Jak�koliv React komponenta ikony
|
|
12
12
|
rowData = [], // Array dat pro grid
|
|
13
|
-
columnDefs = [], // Definice
|
|
14
|
-
gridOptions = {}, //
|
|
15
|
-
onRowDoubleClicked, // Callback pro double click na
|
|
16
|
-
gridHeight = '400px', //
|
|
13
|
+
columnDefs = [], // Definice sloupcu pro AG Grid
|
|
14
|
+
gridOptions = {}, // Dodatecn� mo�nosti pro AG Grid
|
|
15
|
+
onRowDoubleClicked, // Callback pro double click na r�dek
|
|
16
|
+
gridHeight = '400px', // V��ka gridu
|
|
17
17
|
selectionMode = 'single', // 'single' nebo 'multiple'
|
|
18
|
-
displayField = 'name', // Pole,
|
|
19
|
-
field = null // Pole pro
|
|
18
|
+
displayField = 'name', // Pole, kter� se zobraz� v detail-item pri v�beru
|
|
19
|
+
field = null // Pole pro v�ber konkr�tn� vlastnosti objektu
|
|
20
20
|
}) => {
|
|
21
21
|
const [popupOpened, setPopupOpened] = useState(false);
|
|
22
|
-
//
|
|
22
|
+
// Naj�st objekty na z�klade value (pokud je field nastaven, value mu�e b�t jen pole konkr�tn�ch vlastnost�)
|
|
23
23
|
const findRowsByValue = (val) => {
|
|
24
24
|
if (!val || !rowData.length)
|
|
25
25
|
return [];
|
|
26
26
|
const valueArray = Array.isArray(val) ? val : [val];
|
|
27
27
|
if (field) {
|
|
28
|
-
// Pokud je field nastaven, hledej objekty podle
|
|
28
|
+
// Pokud je field nastaven, hledej objekty podle t�to vlastnosti
|
|
29
29
|
return valueArray.map(v => rowData.find(row => row[field] === v)).filter(Boolean);
|
|
30
30
|
}
|
|
31
31
|
else {
|
|
32
|
-
// Pokud field
|
|
32
|
+
// Pokud field nen� nastaven, ocek�v�me objekty
|
|
33
33
|
return valueArray;
|
|
34
34
|
}
|
|
35
35
|
};
|
|
36
|
-
// Inicializuj selectedRows pouze jednou
|
|
36
|
+
// Inicializuj selectedRows pouze jednou pri mount
|
|
37
37
|
const initialSelectedRows = useMemo(() => {
|
|
38
38
|
return findRowsByValue(value);
|
|
39
|
-
}, []); //
|
|
39
|
+
}, []); // Pr�zdn� dependency array - pouze pri mount
|
|
40
40
|
const [selectedRows, setSelectedRows] = useState(initialSelectedRows);
|
|
41
41
|
const linkStyle = {
|
|
42
42
|
color,
|
|
@@ -46,12 +46,12 @@ field = null // Pole pro výběr konkrétní vlastnosti objektu
|
|
|
46
46
|
gap: '6px'
|
|
47
47
|
};
|
|
48
48
|
const handleCancel = () => {
|
|
49
|
-
//
|
|
49
|
+
// Pri zru�en� resetuj na puvodn� hodnoty
|
|
50
50
|
setSelectedRows(findRowsByValue(value));
|
|
51
51
|
setPopupOpened(false);
|
|
52
52
|
};
|
|
53
53
|
const handleOpenPopup = () => {
|
|
54
|
-
//
|
|
54
|
+
// Pri otevren� nastav aktu�ln� hodnotu
|
|
55
55
|
setSelectedRows(findRowsByValue(value));
|
|
56
56
|
setPopupOpened(true);
|
|
57
57
|
};
|
|
@@ -59,12 +59,12 @@ field = null // Pole pro výběr konkrétní vlastnosti objektu
|
|
|
59
59
|
if (event && event.api) {
|
|
60
60
|
const selectedNodes = event.api.getSelectedNodes();
|
|
61
61
|
const selectedData = selectedNodes.map(node => node.data);
|
|
62
|
-
// Pro oba
|
|
62
|
+
// Pro oba re�imy pouze aktualizujeme stav - ulo�en� bude pres Save button
|
|
63
63
|
setSelectedRows(selectedData);
|
|
64
64
|
}
|
|
65
65
|
};
|
|
66
66
|
const handleSaveSelection = () => {
|
|
67
|
-
//
|
|
67
|
+
// Ulo�en� vybran�ch polo�ek pro oba re�imy
|
|
68
68
|
let result;
|
|
69
69
|
if (selectionMode === 'single') {
|
|
70
70
|
result = selectedRows.length > 0 ? selectedRows[0] : null;
|
|
@@ -72,9 +72,9 @@ field = null // Pole pro výběr konkrétní vlastnosti objektu
|
|
|
72
72
|
else {
|
|
73
73
|
result = selectedRows.length === 1 ? selectedRows[0] : selectedRows;
|
|
74
74
|
}
|
|
75
|
-
// Rozhodni jakou hodnotu
|
|
75
|
+
// Rozhodni jakou hodnotu vr�tit podle field parametru
|
|
76
76
|
const returnValue = field && result ? (Array.isArray(result) ? result.map(item => item[field]) : result[field]) : result;
|
|
77
|
-
// Debug pouze
|
|
77
|
+
// Debug pouze pri ulo�en�
|
|
78
78
|
if (onChange) {
|
|
79
79
|
onChange(returnValue);
|
|
80
80
|
}
|
|
@@ -83,7 +83,7 @@ field = null // Pole pro výběr konkrétní vlastnosti objektu
|
|
|
83
83
|
}
|
|
84
84
|
setPopupOpened(false);
|
|
85
85
|
};
|
|
86
|
-
//
|
|
86
|
+
// Urc� jakou ikonu pou��t - priorita: icon > lucideIcon > v�choz� Table
|
|
87
87
|
const renderIcon = () => {
|
|
88
88
|
if (icon) {
|
|
89
89
|
return React.cloneElement(icon, { size, color, ...icon.props });
|
|
@@ -94,24 +94,24 @@ field = null // Pole pro výběr konkrétní vlastnosti objektu
|
|
|
94
94
|
}
|
|
95
95
|
return _jsx(Table, { size: size, color: color });
|
|
96
96
|
};
|
|
97
|
-
//
|
|
97
|
+
// Kombinovan� grid options
|
|
98
98
|
const combinedGridOptions = {
|
|
99
99
|
rowSelection: selectionMode,
|
|
100
100
|
onSelectionChanged: handleRowSelection,
|
|
101
101
|
onRowDoubleClicked: onRowDoubleClicked,
|
|
102
|
-
suppressRowClickSelection: false, //
|
|
102
|
+
suppressRowClickSelection: false, // Umo�n� v�ber kliknut�m na r�dek pro oba re�imy
|
|
103
103
|
...gridOptions
|
|
104
104
|
};
|
|
105
105
|
return (_jsxs(_Fragment, { children: [_jsxs(Link, { onClick: handleOpenPopup, className: "link", style: linkStyle, children: [renderIcon(), (() => {
|
|
106
|
-
//
|
|
106
|
+
// Pou�ij objekty pro zobrazen� (preveden� z value)
|
|
107
107
|
const currentRows = findRowsByValue(value);
|
|
108
108
|
if (currentRows.length === 1) {
|
|
109
|
-
// Pokud je
|
|
109
|
+
// Pokud je vybran� jedna polo�ka, zobraz hodnotu z displayField
|
|
110
110
|
const item = currentRows[0];
|
|
111
|
-
return item[displayField] || item.name || item.title || item.id || '
|
|
111
|
+
return item[displayField] || item.name || item.title || item.id || 'Vybran� polo�ka';
|
|
112
112
|
}
|
|
113
113
|
else if (currentRows.length > 1) {
|
|
114
|
-
return `${currentRows.length}
|
|
114
|
+
return `${currentRows.length} vybran�ch polo�ek`;
|
|
115
115
|
}
|
|
116
116
|
return placeholder;
|
|
117
117
|
})()] }), _jsx(Popup, { opened: popupOpened, onPopupClosed: () => setPopupOpened(false), animate: true, backdrop: true, push: false, className: "f7-parallax grid-popup", style: {
|
|
@@ -121,7 +121,7 @@ field = null // Pole pro výběr konkrétní vlastnosti objektu
|
|
|
121
121
|
flex: 1,
|
|
122
122
|
display: 'flex',
|
|
123
123
|
flexDirection: 'column',
|
|
124
|
-
height: 'calc(100vh - 230px)', //
|
|
124
|
+
height: 'calc(100vh - 230px)', // V�ce prostoru pro SaveButton
|
|
125
125
|
padding: '0'
|
|
126
126
|
}, children: _jsx("div", { className: "ag-theme-quartz", style: {
|
|
127
127
|
height: '100%',
|
|
@@ -131,16 +131,16 @@ field = null // Pole pro výběr konkrétní vlastnosti objektu
|
|
|
131
131
|
'--ag-odd-row-background-color': 'transparent'
|
|
132
132
|
}, children: _jsx(AgGrid, { columnDefs: columnDefs, rowData: rowData, gridOptions: {
|
|
133
133
|
...combinedGridOptions,
|
|
134
|
-
popupParent: document.body, // Popup menu se
|
|
135
|
-
rowHeight: 48, //
|
|
136
|
-
headerHeight: 56 //
|
|
134
|
+
popupParent: document.body, // Popup menu se zobraz� v body, ne v popup
|
|
135
|
+
rowHeight: 48, // Explicitn� v��ka r�dku
|
|
136
|
+
headerHeight: 56 // Explicitn� v��ka hlavicky
|
|
137
137
|
}, height: "100%",
|
|
138
138
|
// appearance="ag-theme-quartz"
|
|
139
139
|
defaultColDef: {
|
|
140
140
|
sortable: true,
|
|
141
141
|
filter: true,
|
|
142
142
|
resizable: true,
|
|
143
|
-
minWidth: 100, //
|
|
143
|
+
minWidth: 100, // Minim�ln� ��rka sloupcu pro mobil
|
|
144
144
|
...gridOptions.defaultColDef
|
|
145
145
|
} }) }) }), _jsx(SaveButton, { onClick: handleSaveSelection, variant: "black" })] })] }) }) })] }));
|
|
146
146
|
};
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bit.rhplus/ui.f7.detail-item",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.147",
|
|
4
4
|
"homepage": "https://bit.cloud/remote-scope/ui/f7/detail-item",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"componentId": {
|
|
7
7
|
"scope": "remote-scope",
|
|
8
8
|
"name": "ui/f7/detail-item",
|
|
9
|
-
"version": "0.0.
|
|
9
|
+
"version": "0.0.147"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"lucide-react": "^0.503.0",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"@bit.rhplus/ui.f7.small-button": "0.0.13",
|
|
18
18
|
"@bit.rhplus/ui.circle-button": "0.0.20",
|
|
19
19
|
"@bit.rhplus/ui.f7.category": "0.0.6",
|
|
20
|
-
"@bit.rhplus/ui.grid": "0.0.
|
|
20
|
+
"@bit.rhplus/ui.grid": "0.0.172",
|
|
21
21
|
"@bit.rhplus/ui.f7.filter": "0.0.8",
|
|
22
22
|
"@bit.rhplus/ui.f7.segmented": "0.0.15"
|
|
23
23
|
},
|
|
File without changes
|