@visns-studio/visns-components 2.5.0 → 2.5.2

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.
Files changed (2) hide show
  1. package/components/crm/Autocomplete.jsx +158 -156
  2. package/package.json +1 -1
package/components/crm/Autocomplete.jsx CHANGED
@@ -1,161 +1,163 @@
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";
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
- const { api, country, field, inputValue, onSelect, setFormData, style } =
8
- props;
9
- const [search, setSearch] = useState("");
10
- const [results, setResults] = useState([]);
11
- const [isLoading, setIsLoading] = useState(false);
12
- const [overwrite, setOverwrite] = useState(false);
13
-
14
- const performSearch = (id, value) => {
15
- if (id > 0) {
16
- if (value === "") {
17
- setResults([]);
18
- setIsLoading(false);
19
- } else {
20
- let url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${value}.json?types=address,poi&access_token=${api}`;
21
-
22
- if (country) {
23
- url += `&country=${country}`;
24
- }
25
-
26
- if (import.meta.env.hasOwnProperty("VITE_MAPBOX_PROXIMITY")) {
27
- url += `&proximity=${
28
- import.meta.env.VITE_MAPBOX_PROXIMITY
29
- }`;
30
- }
31
-
32
- axios
33
- .get(url)
34
- .then((response) => {
35
- setResults(response.data.features);
36
- setIsLoading(false);
37
- })
38
- .catch(function (error) {
39
- console.log(error);
40
- });
41
- }
42
- }
43
- };
44
-
45
- const handleSearchChange = async (e) => {
46
- if (e) {
47
- setSearch(e.target.value);
48
- setFormData((prevState) => ({
49
- ...prevState,
50
- [field]: e.target.value,
51
- }));
52
-
53
- if (overwrite === false) {
54
- setIsLoading(true);
55
- }
56
-
57
- if (overwrite === false) {
58
- await performSearchDebounced(1, e.target.value);
59
- }
60
- }
61
- };
62
-
63
- const performSearchDebounced = AwesomeDebouncePromise(performSearch, 500, {
64
- key: (id, value) => id,
65
- });
66
-
67
- const handleItemClicked = (place) => {
68
- const address =
69
- place.address !== undefined && place.address !== null
70
- ? place.address
71
- : "";
72
- const text =
73
- place.text !== undefined && place.text !== null ? place.text : "";
74
-
75
- const search = address && text ? `${address} ${text}` : text;
76
- setSearch(search);
77
- setResults([]);
78
- onSelect(place, field);
79
- };
80
-
81
- const handleOverwrite = () => {
82
- if (overwrite === false) {
83
- setOverwrite(true);
84
- setResults([]);
85
- } else {
86
- setOverwrite(false);
87
- }
88
- };
89
-
90
- useEffect(() => {
91
- if (overwrite === false) {
92
- if (search !== "") {
93
- performSearch();
94
- }
95
- }
96
- }, [overwrite]);
97
-
98
- useEffect(() => {
99
- setSearch(inputValue);
100
- }, [inputValue]);
101
-
102
- return (
103
- <>
104
- <div className="AutocompletePlace">
105
- <input
106
- className="AutocompletePlace-input"
107
- style={{
108
- height:
109
- style && style.multi_select_height
110
- ? style.multi_select_height
111
- : "52px",
112
- }}
113
- type="text"
114
- value={search || ""}
115
- onChange={handleSearchChange}
116
- placeholder="Type an address"
117
- autoComplete="off"
118
- />
119
- {overwrite === false ? (
120
- <ToggleOffFill
121
- data-tooltip-id="system-tooltip"
122
- data-tooltip-content="Disable Autocomplete"
123
- strokeWidth={2}
124
- size={24}
125
- onClick={handleOverwrite}
126
- />
127
- ) : (
128
- <ToggleOnFill
129
- data-tooltip-id="system-tooltip"
130
- data-tooltip-content="Enable Autocomplete"
131
- strokeWidth={2}
132
- size={24}
133
- onClick={handleOverwrite}
134
- className="toggleActive"
135
- />
136
- )}
137
- {results.length > 0 ? (
138
- <ul className="AutocompletePlace-results">
139
- {results.map((place) => (
140
- <li
141
- key={place.id}
142
- className="AutocompletePlace-items"
143
- onClick={() => handleItemClicked(place)}
144
- >
145
- {place.place_name}
146
- </li>
147
- ))}
148
-
149
- {isLoading && (
150
- <li className="AutocompletePlace-items">
151
- Loading...
152
- </li>
153
- )}
154
- </ul>
155
- ) : null}
156
- </div>
157
- </>
158
- );
7
+ const { api, country, field, inputValue, onSelect, setFormData, style } =
8
+ props;
9
+ const [search, setSearch] = useState('');
10
+ const [results, setResults] = useState([]);
11
+ const [isLoading, setIsLoading] = useState(false);
12
+ const [overwrite, setOverwrite] = useState(false);
13
+
14
+ const performSearch = (id, value) => {
15
+ if (id > 0) {
16
+ if (value === '') {
17
+ setResults([]);
18
+ setIsLoading(false);
19
+ } else {
20
+ let url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${value}.json?types=address,poi&access_token=${api}`;
21
+
22
+ if (country) {
23
+ url += `&country=${country}`;
24
+ }
25
+
26
+ if (style.mapbox_proximity) {
27
+ url += `&proximity=${style.mapbox_proximity}`;
28
+ }
29
+
30
+ if (style.mapbox_bbox) {
31
+ url += `&bbox=${style.mapbox_bbox}`;
32
+ }
33
+
34
+ axios
35
+ .get(url)
36
+ .then((response) => {
37
+ setResults(response.data.features);
38
+ setIsLoading(false);
39
+ })
40
+ .catch(function (error) {
41
+ console.log(error);
42
+ });
43
+ }
44
+ }
45
+ };
46
+
47
+ const handleSearchChange = async (e) => {
48
+ if (e) {
49
+ setSearch(e.target.value);
50
+ setFormData((prevState) => ({
51
+ ...prevState,
52
+ [field]: e.target.value,
53
+ }));
54
+
55
+ if (overwrite === false) {
56
+ setIsLoading(true);
57
+ }
58
+
59
+ if (overwrite === false) {
60
+ await performSearchDebounced(1, e.target.value);
61
+ }
62
+ }
63
+ };
64
+
65
+ const performSearchDebounced = AwesomeDebouncePromise(performSearch, 500, {
66
+ key: (id, value) => id,
67
+ });
68
+
69
+ const handleItemClicked = (place) => {
70
+ const address =
71
+ place.address !== undefined && place.address !== null
72
+ ? place.address
73
+ : '';
74
+ const text =
75
+ place.text !== undefined && place.text !== null ? place.text : '';
76
+
77
+ const search = address && text ? `${address} ${text}` : text;
78
+ setSearch(search);
79
+ setResults([]);
80
+ onSelect(place, field);
81
+ };
82
+
83
+ const handleOverwrite = () => {
84
+ if (overwrite === false) {
85
+ setOverwrite(true);
86
+ setResults([]);
87
+ } else {
88
+ setOverwrite(false);
89
+ }
90
+ };
91
+
92
+ useEffect(() => {
93
+ if (overwrite === false) {
94
+ if (search !== '') {
95
+ performSearch();
96
+ }
97
+ }
98
+ }, [overwrite]);
99
+
100
+ useEffect(() => {
101
+ setSearch(inputValue);
102
+ }, [inputValue]);
103
+
104
+ return (
105
+ <>
106
+ <div className="AutocompletePlace">
107
+ <input
108
+ className="AutocompletePlace-input"
109
+ style={{
110
+ height:
111
+ style && style.multi_select_height
112
+ ? style.multi_select_height
113
+ : '52px',
114
+ }}
115
+ type="text"
116
+ value={search || ''}
117
+ onChange={handleSearchChange}
118
+ placeholder="Type an address"
119
+ autoComplete="off"
120
+ />
121
+ {overwrite === false ? (
122
+ <ToggleOffFill
123
+ data-tooltip-id="system-tooltip"
124
+ data-tooltip-content="Disable Autocomplete"
125
+ strokeWidth={2}
126
+ size={24}
127
+ onClick={handleOverwrite}
128
+ />
129
+ ) : (
130
+ <ToggleOnFill
131
+ data-tooltip-id="system-tooltip"
132
+ data-tooltip-content="Enable Autocomplete"
133
+ strokeWidth={2}
134
+ size={24}
135
+ onClick={handleOverwrite}
136
+ className="toggleActive"
137
+ />
138
+ )}
139
+ {results.length > 0 ? (
140
+ <ul className="AutocompletePlace-results">
141
+ {results.map((place) => (
142
+ <li
143
+ key={place.id}
144
+ className="AutocompletePlace-items"
145
+ onClick={() => handleItemClicked(place)}
146
+ >
147
+ {place.place_name}
148
+ </li>
149
+ ))}
150
+
151
+ {isLoading && (
152
+ <li className="AutocompletePlace-items">
153
+ Loading...
154
+ </li>
155
+ )}
156
+ </ul>
157
+ ) : null}
158
+ </div>
159
+ </>
160
+ );
159
161
  };
160
162
 
161
163
  export default VisnsAutocomplete;
package/package.json CHANGED
@@ -42,7 +42,7 @@
42
42
  "react-dom": "^17.0.1"
43
43
  },
44
44
  "name": "@visns-studio/visns-components",
45
- "version": "2.5.0",
45
+ "version": "2.5.2",
46
46
  "description": "Various packages to assist in the development of our Custom Applications.",
47
47
  "main": "index.js",
48
48
  "scripts": {