@visns-studio/visns-components 1.0.19 → 1.0.20
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.
|
@@ -1,147 +1,147 @@
|
|
|
1
|
-
import React, { useState, useEffect } from
|
|
2
|
-
import axios from
|
|
3
|
-
import AwesomeDebouncePromise from
|
|
4
|
-
import { ToggleOffFill, ToggleOnFill } from
|
|
1
|
+
import React, { useState, useEffect } from "react";
|
|
2
|
+
import axios from "axios";
|
|
3
|
+
import AwesomeDebouncePromise from "awesome-debounce-promise";
|
|
4
|
+
import { ToggleOffFill, ToggleOnFill } from "akar-icons";
|
|
5
5
|
|
|
6
6
|
const VisnsAutocomplete = (props) => {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
7
|
+
const { api, country, onSelect, setFormData, field, inputValue } = props;
|
|
8
|
+
const [search, setSearch] = useState("");
|
|
9
|
+
const [results, setResults] = useState([]);
|
|
10
|
+
const [isLoading, setIsLoading] = useState(false);
|
|
11
|
+
const [overwrite, setOverwrite] = useState(false);
|
|
12
|
+
|
|
13
|
+
const performSearch = (id, value) => {
|
|
14
|
+
if (id > 0) {
|
|
15
|
+
if (value === "") {
|
|
16
|
+
setResults([]);
|
|
17
|
+
setIsLoading(false);
|
|
18
|
+
} else {
|
|
19
|
+
let url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${value}.json?types=address,poi&access_token=${api}`;
|
|
20
|
+
|
|
21
|
+
if (import.meta.env.VITE_MAPBOX_COUNTRY) {
|
|
22
|
+
url += `&country=${import.meta.env.VITE_MAPBOX_COUNTRY}`;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
if (import.meta.env.hasOwnProperty("VITE_MAPBOX_PROXIMITY")) {
|
|
26
|
+
url += `&proximity=${
|
|
27
|
+
import.meta.env.VITE_MAPBOX_PROXIMITY
|
|
28
|
+
}`;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
axios
|
|
32
|
+
.get(url)
|
|
33
|
+
.then((response) => {
|
|
34
|
+
setResults(response.data.features);
|
|
35
|
+
setIsLoading(false);
|
|
36
|
+
})
|
|
37
|
+
.catch(function (error) {
|
|
38
|
+
console.log(error);
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
const handleSearchChange = async (e) => {
|
|
45
|
+
if (e) {
|
|
46
|
+
setSearch(e.target.value);
|
|
47
|
+
setFormData((prevState) => ({
|
|
48
|
+
...prevState,
|
|
49
|
+
[field]: e.target.value,
|
|
50
|
+
}));
|
|
51
|
+
|
|
52
|
+
if (overwrite === false) {
|
|
53
|
+
setIsLoading(true);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
if (overwrite === false) {
|
|
57
|
+
await performSearchDebounced(1, e.target.value);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
const performSearchDebounced = AwesomeDebouncePromise(performSearch, 500, {
|
|
63
|
+
key: (id, value) => id,
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
const handleItemClicked = (place) => {
|
|
67
|
+
setSearch(place.address + " " + place.text);
|
|
68
|
+
setResults([]);
|
|
69
|
+
onSelect(place, field);
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
const handleOverwrite = () => {
|
|
73
|
+
if (overwrite === false) {
|
|
74
|
+
setOverwrite(true);
|
|
75
|
+
setResults([]);
|
|
76
|
+
} else {
|
|
77
|
+
setOverwrite(false);
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
useEffect(() => {
|
|
82
|
+
if (overwrite === false) {
|
|
83
|
+
if (search !== "") {
|
|
84
|
+
performSearch();
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}, [overwrite]);
|
|
88
|
+
|
|
89
|
+
useEffect(() => {
|
|
90
|
+
setSearch(inputValue);
|
|
91
|
+
}, [inputValue]);
|
|
92
|
+
|
|
93
|
+
return (
|
|
94
|
+
<>
|
|
95
|
+
<div className="AutocompletePlace">
|
|
96
|
+
<input
|
|
97
|
+
className="AutocompletePlace-input"
|
|
98
|
+
style={{ height: "53px" }}
|
|
99
|
+
type="text"
|
|
100
|
+
value={search || ""}
|
|
101
|
+
onChange={handleSearchChange}
|
|
102
|
+
placeholder="Type an address"
|
|
103
|
+
autoComplete="off"
|
|
104
|
+
/>
|
|
105
|
+
{overwrite === false ? (
|
|
106
|
+
<ToggleOffFill
|
|
107
|
+
data-tooltip-id="system-tooltip"
|
|
108
|
+
data-tooltip-content="Disable Autocomplete"
|
|
109
|
+
strokeWidth={2}
|
|
110
|
+
size={24}
|
|
111
|
+
onClick={handleOverwrite}
|
|
112
|
+
/>
|
|
113
|
+
) : (
|
|
114
|
+
<ToggleOnFill
|
|
115
|
+
data-tooltip-id="system-tooltip"
|
|
116
|
+
data-tooltip-content="Enable Autocomplete"
|
|
117
|
+
strokeWidth={2}
|
|
118
|
+
size={24}
|
|
119
|
+
onClick={handleOverwrite}
|
|
120
|
+
className="toggleActive"
|
|
121
|
+
/>
|
|
122
|
+
)}
|
|
123
|
+
{results.length > 0 ? (
|
|
124
|
+
<ul className="AutocompletePlace-results">
|
|
125
|
+
{results.map((place) => (
|
|
126
|
+
<li
|
|
127
|
+
key={place.id}
|
|
128
|
+
className="AutocompletePlace-items"
|
|
129
|
+
onClick={() => handleItemClicked(place)}
|
|
130
|
+
>
|
|
131
|
+
{place.place_name}
|
|
132
|
+
</li>
|
|
133
|
+
))}
|
|
134
|
+
|
|
135
|
+
{isLoading && (
|
|
136
|
+
<li className="AutocompletePlace-items">
|
|
137
|
+
Loading...
|
|
138
|
+
</li>
|
|
139
|
+
)}
|
|
140
|
+
</ul>
|
|
141
|
+
) : null}
|
|
142
|
+
</div>
|
|
143
|
+
</>
|
|
144
|
+
);
|
|
145
145
|
};
|
|
146
146
|
|
|
147
147
|
export default VisnsAutocomplete;
|
|
@@ -350,6 +350,8 @@ const DataGrid = (props) => {
|
|
|
350
350
|
|
|
351
351
|
useEffect(() => {
|
|
352
352
|
const renderColumn = (column) => {
|
|
353
|
+
let nameFrom;
|
|
354
|
+
|
|
353
355
|
switch (column.type) {
|
|
354
356
|
case "created_by":
|
|
355
357
|
return {
|
|
@@ -434,14 +436,39 @@ const DataGrid = (props) => {
|
|
|
434
436
|
}
|
|
435
437
|
},
|
|
436
438
|
};
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
439
|
+
case "icons":
|
|
440
|
+
return {
|
|
441
|
+
name: column.id,
|
|
442
|
+
header: column.label,
|
|
443
|
+
defaultFlex: 1,
|
|
444
|
+
link: column.link ? column.link : {},
|
|
445
|
+
render: ({ data }) => {
|
|
446
|
+
let icons = [];
|
|
447
|
+
|
|
448
|
+
if (column.icons && column.icons.length > 0) {
|
|
449
|
+
column.icons.forEach((icon) => {
|
|
450
|
+
icons.push(
|
|
451
|
+
<img
|
|
452
|
+
src={icon.url}
|
|
453
|
+
alt={icon.name}
|
|
454
|
+
data-tooltip-id="system-tooltip"
|
|
455
|
+
data-tooltip-content={icon.name}
|
|
456
|
+
/>
|
|
457
|
+
);
|
|
458
|
+
});
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
return <span>{icons}</span>;
|
|
462
|
+
},
|
|
463
|
+
};
|
|
464
|
+
case "number":
|
|
465
|
+
return {
|
|
466
|
+
name: column.id,
|
|
467
|
+
header: column.label,
|
|
468
|
+
defaultFlex: 1,
|
|
469
|
+
link: column.link ? column.link : {},
|
|
470
|
+
type: "number",
|
|
471
|
+
};
|
|
445
472
|
case "option":
|
|
446
473
|
return {
|
|
447
474
|
name: column.id,
|
|
@@ -455,6 +482,16 @@ const DataGrid = (props) => {
|
|
|
455
482
|
return <span>{data}</span>;
|
|
456
483
|
},
|
|
457
484
|
};
|
|
485
|
+
case "placeholder":
|
|
486
|
+
return {
|
|
487
|
+
name: column.id,
|
|
488
|
+
header: column.label,
|
|
489
|
+
defaultFlex: 1,
|
|
490
|
+
link: column.link ? column.link : {},
|
|
491
|
+
render: ({ data }) => {
|
|
492
|
+
return <span>{column.placeholder}</span>;
|
|
493
|
+
},
|
|
494
|
+
};
|
|
458
495
|
case "relation":
|
|
459
496
|
let relationName = column.id.reduce(
|
|
460
497
|
(acc, id) => acc + `${id}.`,
|
|
@@ -477,7 +514,18 @@ const DataGrid = (props) => {
|
|
|
477
514
|
}, "");
|
|
478
515
|
|
|
479
516
|
if (value) {
|
|
480
|
-
|
|
517
|
+
if (Array.isArray(column.nameFrom)) {
|
|
518
|
+
let nameFrom = column.nameFrom.reduce(
|
|
519
|
+
(acc, id) => {
|
|
520
|
+
return acc[id];
|
|
521
|
+
},
|
|
522
|
+
""
|
|
523
|
+
);
|
|
524
|
+
|
|
525
|
+
value = value[nameFrom];
|
|
526
|
+
} else {
|
|
527
|
+
value = value[column.nameFrom];
|
|
528
|
+
}
|
|
481
529
|
}
|
|
482
530
|
|
|
483
531
|
return <span>{value}</span>;
|
|
@@ -516,6 +564,22 @@ const DataGrid = (props) => {
|
|
|
516
564
|
return <span>{data}</span>;
|
|
517
565
|
},
|
|
518
566
|
};
|
|
567
|
+
case "url":
|
|
568
|
+
return {
|
|
569
|
+
name: column.id,
|
|
570
|
+
header: column.label,
|
|
571
|
+
defaultFlex: 1,
|
|
572
|
+
link: column.link ? column.link : {},
|
|
573
|
+
render: ({ data }) => {
|
|
574
|
+
return (
|
|
575
|
+
<span>
|
|
576
|
+
<a href={data} target="_blank">
|
|
577
|
+
Link
|
|
578
|
+
</a>
|
|
579
|
+
</span>
|
|
580
|
+
);
|
|
581
|
+
},
|
|
582
|
+
};
|
|
519
583
|
default:
|
|
520
584
|
return {
|
|
521
585
|
name: column.id,
|
package/package.json
CHANGED
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"react-dom": ">=18.2.0"
|
|
33
33
|
},
|
|
34
34
|
"name": "@visns-studio/visns-components",
|
|
35
|
-
"version": "1.0.
|
|
35
|
+
"version": "1.0.20",
|
|
36
36
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
37
37
|
"main": "index.js",
|
|
38
38
|
"devDependencies": {},
|