@visns-studio/visns-components 1.0.19 → 1.0.21
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;
|
|
@@ -434,14 +434,39 @@ const DataGrid = (props) => {
|
|
|
434
434
|
}
|
|
435
435
|
},
|
|
436
436
|
};
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
437
|
+
case "icons":
|
|
438
|
+
return {
|
|
439
|
+
name: column.id,
|
|
440
|
+
header: column.label,
|
|
441
|
+
defaultFlex: 1,
|
|
442
|
+
link: column.link ? column.link : {},
|
|
443
|
+
render: ({ data }) => {
|
|
444
|
+
let icons = [];
|
|
445
|
+
|
|
446
|
+
if (column.icons && column.icons.length > 0) {
|
|
447
|
+
column.icons.forEach((icon) => {
|
|
448
|
+
icons.push(
|
|
449
|
+
<img
|
|
450
|
+
src={icon.url}
|
|
451
|
+
alt={icon.name}
|
|
452
|
+
data-tooltip-id="system-tooltip"
|
|
453
|
+
data-tooltip-content={icon.name}
|
|
454
|
+
/>
|
|
455
|
+
);
|
|
456
|
+
});
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
return <span>{icons}</span>;
|
|
460
|
+
},
|
|
461
|
+
};
|
|
462
|
+
case "number":
|
|
463
|
+
return {
|
|
464
|
+
name: column.id,
|
|
465
|
+
header: column.label,
|
|
466
|
+
defaultFlex: 1,
|
|
467
|
+
link: column.link ? column.link : {},
|
|
468
|
+
type: "number",
|
|
469
|
+
};
|
|
445
470
|
case "option":
|
|
446
471
|
return {
|
|
447
472
|
name: column.id,
|
|
@@ -455,6 +480,16 @@ const DataGrid = (props) => {
|
|
|
455
480
|
return <span>{data}</span>;
|
|
456
481
|
},
|
|
457
482
|
};
|
|
483
|
+
case "placeholder":
|
|
484
|
+
return {
|
|
485
|
+
name: column.id,
|
|
486
|
+
header: column.label,
|
|
487
|
+
defaultFlex: 1,
|
|
488
|
+
link: column.link ? column.link : {},
|
|
489
|
+
render: ({ data }) => {
|
|
490
|
+
return <span>{column.placeholder}</span>;
|
|
491
|
+
},
|
|
492
|
+
};
|
|
458
493
|
case "relation":
|
|
459
494
|
let relationName = column.id.reduce(
|
|
460
495
|
(acc, id) => acc + `${id}.`,
|
|
@@ -477,7 +512,17 @@ const DataGrid = (props) => {
|
|
|
477
512
|
}, "");
|
|
478
513
|
|
|
479
514
|
if (value) {
|
|
480
|
-
|
|
515
|
+
if (Array.isArray(column.nameFrom)) {
|
|
516
|
+
let tempValue = "";
|
|
517
|
+
|
|
518
|
+
column.nameFrom.forEach((nf) => {
|
|
519
|
+
tempValue += value[nf] + " ";
|
|
520
|
+
});
|
|
521
|
+
|
|
522
|
+
value = tempValue;
|
|
523
|
+
} else {
|
|
524
|
+
value = value[column.nameFrom];
|
|
525
|
+
}
|
|
481
526
|
}
|
|
482
527
|
|
|
483
528
|
return <span>{value}</span>;
|
|
@@ -516,6 +561,22 @@ const DataGrid = (props) => {
|
|
|
516
561
|
return <span>{data}</span>;
|
|
517
562
|
},
|
|
518
563
|
};
|
|
564
|
+
case "url":
|
|
565
|
+
return {
|
|
566
|
+
name: column.id,
|
|
567
|
+
header: column.label,
|
|
568
|
+
defaultFlex: 1,
|
|
569
|
+
link: column.link ? column.link : {},
|
|
570
|
+
render: ({ data }) => {
|
|
571
|
+
return (
|
|
572
|
+
<span>
|
|
573
|
+
<a href={data} target="_blank">
|
|
574
|
+
Link
|
|
575
|
+
</a>
|
|
576
|
+
</span>
|
|
577
|
+
);
|
|
578
|
+
},
|
|
579
|
+
};
|
|
519
580
|
default:
|
|
520
581
|
return {
|
|
521
582
|
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.21",
|
|
36
36
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
37
37
|
"main": "index.js",
|
|
38
38
|
"devDependencies": {},
|