@bit.rhplus/ui.f7.detail-item 0.0.147 → 0.0.148

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.
@@ -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 mod�ln� editac� - zobrazuje AG Grid pro v�ber polo�ky
23
+ // Grid komponenta s modální editací - zobrazuje AG Grid pro výběr položky
24
24
  export const Grid = ({
25
25
  children,
26
26
  value,
27
27
  onSave,
28
- onChange, // Prid�no pro Form.Item kompatibilitu
29
- title = 'Editace v�beru',
30
- placeholder = 'Vyberte polo�ku',
28
+ onChange, // Přidáno pro Form.Item kompatibilitu
29
+ title = 'Editace výběru',
30
+ placeholder = 'Vyberte položku',
31
31
  color = '#6887d3',
32
32
  size = 16,
33
- lucideIcon, // Lucide React ikona (napr. Table)
34
- icon, // Jak�koliv React komponenta ikony
33
+ lucideIcon, // Lucide React ikona (např. Table)
34
+ icon, // Jakákoliv React komponenta ikony
35
35
  rowData = [], // Array dat pro grid
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
36
+ columnDefs = [], // Definice sloupců pro AG Grid
37
+ gridOptions = {}, // Dodatečné možnosti pro AG Grid
38
+ onRowDoubleClicked, // Callback pro double click na řádek
39
+ gridHeight = '400px', // Výška gridu
40
40
  selectionMode = 'single', // 'single' nebo 'multiple'
41
- displayField = 'name', // Pole, kter� se zobraz� v detail-item pri v�beru
42
- field = null // Pole pro v�ber konkr�tn� vlastnosti objektu
41
+ displayField = 'name', // Pole, které se zobrazí v detail-item při výběru
42
+ field = null // Pole pro výběr konkrétní vlastnosti objektu
43
43
  }) => {
44
44
  const [popupOpened, setPopupOpened] = useState(false);
45
45
 
46
- // Naj�st objekty na z�klade value (pokud je field nastaven, value mu�e b�t jen pole konkr�tn�ch vlastnost�)
46
+ // Najíst objekty na základě value (pokud je field nastaven, value můž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 t�to vlastnosti
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 nen� nastaven, ocek�v�me objekty
56
+ // Pokud field není nastaven, očekáváme objekty
57
57
  return valueArray;
58
58
  }
59
59
  };
60
60
 
61
- // Inicializuj selectedRows pouze jednou pri mount
61
+ // Inicializuj selectedRows pouze jednou při mount
62
62
  const initialSelectedRows = useMemo(() => {
63
63
  return findRowsByValue(value);
64
- }, []); // Pr�zdn� dependency array - pouze pri mount
64
+ }, []); // Prázdné dependency array - pouze při 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
- // Pri zru�en� resetuj na puvodn� hodnoty
77
+ // Při zrušení resetuj na původní hodnoty
78
78
  setSelectedRows(findRowsByValue(value));
79
79
  setPopupOpened(false);
80
80
  };
81
81
 
82
82
  const handleOpenPopup = () => {
83
- // Pri otevren� nastav aktu�ln� hodnotu
83
+ // Při otevření 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 re�imy pouze aktualizujeme stav - ulo�en� bude pres Save button
94
+ // Pro oba režimy pouze aktualizujeme stav - uložení bude přes Save button
95
95
  setSelectedRows(selectedData);
96
96
  }
97
97
  };
98
98
 
99
99
  const handleSaveSelection = () => {
100
- // Ulo�en� vybran�ch polo�ek pro oba re�imy
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 vr�tit podle field parametru
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 pri ulo�en�
112
+ // Debug pouze při 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
- // Urc� jakou ikonu pou��t - priorita: icon > lucideIcon > v�choz� Table
123
+ // Určí 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
- // Kombinovan� grid options
136
+ // Kombinované grid options
137
137
  const combinedGridOptions = {
138
138
  rowSelection: selectionMode,
139
139
  onSelectionChanged: handleRowSelection,
140
140
  onRowDoubleClicked: onRowDoubleClicked,
141
- suppressRowClickSelection: false, // Umo�n� v�ber kliknut�m na r�dek pro oba re�imy
141
+ suppressRowClickSelection: false, // Umožní výběr kliknutím na řá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
- // Pou�ij objekty pro zobrazen� (preveden� z value)
150
+ // Použij objekty pro zobrazení (převedené z value)
151
151
  const currentRows = findRowsByValue(value);
152
152
 
153
153
  if (currentRows.length === 1) {
154
- // Pokud je vybran� jedna polo�ka, zobraz hodnotu z displayField
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 || 'Vybran� polo�ka';
156
+ return item[displayField] || item.name || item.title || item.id || 'Vybraná položka';
157
157
  } else if (currentRows.length > 1) {
158
- return `${currentRows.length} vybran�ch polo�ek`;
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)', // V�ce prostoru pro SaveButton
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 zobraz� v body, ne v popup
213
- rowHeight: 48, // Explicitn� v��ka r�dku
214
- headerHeight: 56 // Explicitn� v��ka hlavicky
212
+ popupParent: document.body, // Popup menu se zobrazí v body, ne v popup
213
+ rowHeight: 48, // Explicitní výška řádku
214
+ headerHeight: 56 // Explicitní výška hlavičky
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, // Minim�ln� ��rka sloupcu pro mobil
222
+ minWidth: 100, // Minimální šířka sloupců pro mobil
223
223
  ...gridOptions.defaultColDef
224
224
  }}
225
225
  />
@@ -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 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
8
+ // Grid komponenta s modální editací - zobrazuje AG Grid pro výběr položky
9
+ export const Grid = ({ children, value, onSave, onChange, // Přidáno pro Form.Item kompatibilitu
10
+ title = 'Editace výběru', placeholder = 'Vyberte položku', color = '#6887d3', size = 16, lucideIcon, // Lucide React ikona (např. Table)
11
+ icon, // Jakákoliv React komponenta ikony
12
12
  rowData = [], // Array dat pro grid
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
13
+ columnDefs = [], // Definice sloupců pro AG Grid
14
+ gridOptions = {}, // Dodatečné možnosti pro AG Grid
15
+ onRowDoubleClicked, // Callback pro double click na řádek
16
+ gridHeight = '400px', // Výška gridu
17
17
  selectionMode = 'single', // 'single' nebo 'multiple'
18
- displayField = 'name', // Pole, kter� se zobraz� v detail-item pri v�beru
19
- field = null // Pole pro v�ber konkr�tn� vlastnosti objektu
18
+ displayField = 'name', // Pole, které se zobrazí v detail-item při výběru
19
+ field = null // Pole pro výběr konkrétní vlastnosti objektu
20
20
  }) => {
21
21
  const [popupOpened, setPopupOpened] = useState(false);
22
- // Naj�st objekty na z�klade value (pokud je field nastaven, value mu�e b�t jen pole konkr�tn�ch vlastnost�)
22
+ // Najíst objekty na základě value (pokud je field nastaven, value můž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 t�to vlastnosti
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 nen� nastaven, ocek�v�me objekty
32
+ // Pokud field není nastaven, očekáváme objekty
33
33
  return valueArray;
34
34
  }
35
35
  };
36
- // Inicializuj selectedRows pouze jednou pri mount
36
+ // Inicializuj selectedRows pouze jednou při mount
37
37
  const initialSelectedRows = useMemo(() => {
38
38
  return findRowsByValue(value);
39
- }, []); // Pr�zdn� dependency array - pouze pri mount
39
+ }, []); // Prázdné dependency array - pouze při mount
40
40
  const [selectedRows, setSelectedRows] = useState(initialSelectedRows);
41
41
  const linkStyle = {
42
42
  color,
@@ -46,12 +46,12 @@ field = null // Pole pro v�ber konkr�tn� vlastnosti objektu
46
46
  gap: '6px'
47
47
  };
48
48
  const handleCancel = () => {
49
- // Pri zru�en� resetuj na puvodn� hodnoty
49
+ // Při zrušení resetuj na původní hodnoty
50
50
  setSelectedRows(findRowsByValue(value));
51
51
  setPopupOpened(false);
52
52
  };
53
53
  const handleOpenPopup = () => {
54
- // Pri otevren� nastav aktu�ln� hodnotu
54
+ // Při otevření nastav aktuální hodnotu
55
55
  setSelectedRows(findRowsByValue(value));
56
56
  setPopupOpened(true);
57
57
  };
@@ -59,12 +59,12 @@ field = null // Pole pro v�ber 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 re�imy pouze aktualizujeme stav - ulo�en� bude pres Save button
62
+ // Pro oba režimy pouze aktualizujeme stav - uložení bude přes Save button
63
63
  setSelectedRows(selectedData);
64
64
  }
65
65
  };
66
66
  const handleSaveSelection = () => {
67
- // Ulo�en� vybran�ch polo�ek pro oba re�imy
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�ber konkr�tn� vlastnosti objektu
72
72
  else {
73
73
  result = selectedRows.length === 1 ? selectedRows[0] : selectedRows;
74
74
  }
75
- // Rozhodni jakou hodnotu vr�tit podle field parametru
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 pri ulo�en�
77
+ // Debug pouze při uložení
78
78
  if (onChange) {
79
79
  onChange(returnValue);
80
80
  }
@@ -83,7 +83,7 @@ field = null // Pole pro v�ber konkr�tn� vlastnosti objektu
83
83
  }
84
84
  setPopupOpened(false);
85
85
  };
86
- // Urc� jakou ikonu pou��t - priorita: icon > lucideIcon > v�choz� Table
86
+ // Určí 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�ber konkr�tn� vlastnosti objektu
94
94
  }
95
95
  return _jsx(Table, { size: size, color: color });
96
96
  };
97
- // Kombinovan� grid options
97
+ // Kombinované grid options
98
98
  const combinedGridOptions = {
99
99
  rowSelection: selectionMode,
100
100
  onSelectionChanged: handleRowSelection,
101
101
  onRowDoubleClicked: onRowDoubleClicked,
102
- suppressRowClickSelection: false, // Umo�n� v�ber kliknut�m na r�dek pro oba re�imy
102
+ suppressRowClickSelection: false, // Umožní výběr kliknutím na řá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
- // Pou�ij objekty pro zobrazen� (preveden� z value)
106
+ // Použij objekty pro zobrazení (převedené z value)
107
107
  const currentRows = findRowsByValue(value);
108
108
  if (currentRows.length === 1) {
109
- // Pokud je vybran� jedna polo�ka, zobraz hodnotu z displayField
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 || 'Vybran� polo�ka';
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} vybran�ch polo�ek`;
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�ber konkr�tn� vlastnosti objektu
121
121
  flex: 1,
122
122
  display: 'flex',
123
123
  flexDirection: 'column',
124
- height: 'calc(100vh - 230px)', // V�ce prostoru pro SaveButton
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�ber 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 zobraz� v body, ne v popup
135
- rowHeight: 48, // Explicitn� v��ka r�dku
136
- headerHeight: 56 // Explicitn� v��ka hlavicky
134
+ popupParent: document.body, // Popup menu se zobrazí v body, ne v popup
135
+ rowHeight: 48, // Explicitní výška řádku
136
+ headerHeight: 56 // Explicitní výška hlavičky
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, // Minim�ln� ��rka sloupcu pro mobil
143
+ minWidth: 100, // Minimální šířka sloupců 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.147",
3
+ "version": "0.0.148",
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.147"
9
+ "version": "0.0.148"
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.172",
20
+ "@bit.rhplus/ui.grid": "0.0.173",
21
21
  "@bit.rhplus/ui.f7.filter": "0.0.8",
22
22
  "@bit.rhplus/ui.f7.segmented": "0.0.15"
23
23
  },