@visns-studio/visns-components 2.1.4 → 2.2.0
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.
|
@@ -3,6 +3,7 @@ import React, {
|
|
|
3
3
|
useCallback,
|
|
4
4
|
useEffect,
|
|
5
5
|
useImperativeHandle,
|
|
6
|
+
useRef,
|
|
6
7
|
useState,
|
|
7
8
|
} from 'react';
|
|
8
9
|
import { useNavigate } from 'react-router-dom';
|
|
@@ -32,6 +33,7 @@ import {
|
|
|
32
33
|
Ribbon,
|
|
33
34
|
Search,
|
|
34
35
|
ShippingBoxV1,
|
|
36
|
+
SoundOn,
|
|
35
37
|
TriangleAlert,
|
|
36
38
|
} from 'akar-icons';
|
|
37
39
|
|
|
@@ -111,6 +113,10 @@ const DataGrid = forwardRef(
|
|
|
111
113
|
) => {
|
|
112
114
|
const navigate = useNavigate();
|
|
113
115
|
|
|
116
|
+
/** Audio */
|
|
117
|
+
const audioRef = useRef(null);
|
|
118
|
+
const [audioSource, setAudioSource] = useState('');
|
|
119
|
+
|
|
114
120
|
/** Modal States */
|
|
115
121
|
const [formData, setFormData] = useState({});
|
|
116
122
|
const [formType, setFormType] = useState('');
|
|
@@ -178,9 +184,6 @@ const DataGrid = forwardRef(
|
|
|
178
184
|
|
|
179
185
|
const handleSettingClick = (s, d) => {
|
|
180
186
|
switch (s.id) {
|
|
181
|
-
case 'update':
|
|
182
|
-
modalOpen('update', d.id);
|
|
183
|
-
break;
|
|
184
187
|
case 'delete':
|
|
185
188
|
confirmAlert({
|
|
186
189
|
title: 'Delete Item',
|
|
@@ -234,6 +237,26 @@ const DataGrid = forwardRef(
|
|
|
234
237
|
],
|
|
235
238
|
});
|
|
236
239
|
break;
|
|
240
|
+
case 'sound':
|
|
241
|
+
const soundRelation = s.relation.reduce((acc, id) => {
|
|
242
|
+
if (acc === '') {
|
|
243
|
+
return d[id];
|
|
244
|
+
} else {
|
|
245
|
+
if (acc && acc[id]) {
|
|
246
|
+
return acc[id];
|
|
247
|
+
} else {
|
|
248
|
+
return '';
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
}, '');
|
|
252
|
+
|
|
253
|
+
if (soundRelation && soundRelation[d[s.path]]) {
|
|
254
|
+
setAudioSource(soundRelation[d[s.path]]);
|
|
255
|
+
}
|
|
256
|
+
break;
|
|
257
|
+
case 'update':
|
|
258
|
+
modalOpen('update', d.id);
|
|
259
|
+
break;
|
|
237
260
|
default:
|
|
238
261
|
confirmAlert({
|
|
239
262
|
title: s.title,
|
|
@@ -587,6 +610,8 @@ const DataGrid = forwardRef(
|
|
|
587
610
|
return getIconComponent(Ribbon);
|
|
588
611
|
case 'restore':
|
|
589
612
|
return getIconComponent(ArrowCounterClockwise);
|
|
613
|
+
case 'sound':
|
|
614
|
+
return getIconComponent(SoundOn);
|
|
590
615
|
case 'ssa':
|
|
591
616
|
return getIconComponent(Clock);
|
|
592
617
|
case 'update':
|
|
@@ -1744,41 +1769,49 @@ const DataGrid = forwardRef(
|
|
|
1744
1769
|
{renderSearch()}
|
|
1745
1770
|
{renderCreateButton()}
|
|
1746
1771
|
{limit && limit > 0 && (
|
|
1747
|
-
|
|
1748
|
-
|
|
1749
|
-
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
|
|
1753
|
-
|
|
1754
|
-
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
|
|
1760
|
-
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1772
|
+
<>
|
|
1773
|
+
<ReactDataGrid
|
|
1774
|
+
columns={gridColumns}
|
|
1775
|
+
dataSource={data}
|
|
1776
|
+
filterValue={filterValue}
|
|
1777
|
+
limit={limit}
|
|
1778
|
+
enableColumnAutosize={false}
|
|
1779
|
+
enableColumnFilterContextMenu={false}
|
|
1780
|
+
enableSelection={false}
|
|
1781
|
+
headerProps={headerProps}
|
|
1782
|
+
idProperty={`visns-datagrid-${ajaxSetting.url.replace(
|
|
1783
|
+
/\//g,
|
|
1784
|
+
'-'
|
|
1785
|
+
)}`}
|
|
1786
|
+
minRowHeight={40}
|
|
1787
|
+
onFilterValueChange={(filterValue) => {
|
|
1788
|
+
handleFilterChange(filterValue);
|
|
1789
|
+
}}
|
|
1790
|
+
onLimitChange={setLimit}
|
|
1791
|
+
onSortInfoChange={handleSort}
|
|
1792
|
+
onRenderRow={onRenderRow}
|
|
1793
|
+
pagination
|
|
1794
|
+
renderColumnContextMenu={renderColumnContextMenu}
|
|
1795
|
+
rowClassName="vs-datagrid--row"
|
|
1796
|
+
rowHeight={null}
|
|
1797
|
+
showZebraRows={true}
|
|
1798
|
+
sortInfo={
|
|
1799
|
+
ajaxSetting.sortBy && ajaxSetting.sort
|
|
1800
|
+
? {
|
|
1801
|
+
name: ajaxSetting.sortBy,
|
|
1802
|
+
dir:
|
|
1803
|
+
ajaxSetting.sort === 'asc'
|
|
1804
|
+
? 1
|
|
1805
|
+
: -1,
|
|
1806
|
+
}
|
|
1807
|
+
: null
|
|
1808
|
+
}
|
|
1809
|
+
style={gridStyle}
|
|
1810
|
+
/>
|
|
1811
|
+
{audioSource && (
|
|
1812
|
+
<audio src={audioSource} ref={audioRef} />
|
|
1813
|
+
)}
|
|
1814
|
+
</>
|
|
1782
1815
|
)}
|
|
1783
1816
|
<Popup
|
|
1784
1817
|
open={modalShow}
|
|
@@ -12,6 +12,7 @@ import {
|
|
|
12
12
|
Grid,
|
|
13
13
|
Home,
|
|
14
14
|
LightBulb,
|
|
15
|
+
Microphone,
|
|
15
16
|
Newspaper,
|
|
16
17
|
PeopleGroup,
|
|
17
18
|
PeopleMultiple,
|
|
@@ -102,6 +103,7 @@ function Navigation({ logo, logout, navConfig, setSystemAuth, userProfile }) {
|
|
|
102
103
|
grid: Grid,
|
|
103
104
|
home: Home,
|
|
104
105
|
lightBulb: LightBulb,
|
|
106
|
+
microphone: Microphone,
|
|
105
107
|
newspaper: Newspaper,
|
|
106
108
|
peopleGroup: PeopleGroup,
|
|
107
109
|
peopleMultiple: PeopleMultiple,
|
package/package.json
CHANGED