@visns-studio/visns-components 2.5.0 → 2.5.1

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