homeflowjs 0.10.16 → 0.10.17
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,22 +1,28 @@
|
|
1
|
-
import React, {
|
2
|
-
|
1
|
+
import React, {
|
2
|
+
useState, useRef, useEffect, useCallback,
|
3
|
+
} from 'react';
|
4
|
+
import { useSelector, useDispatch } from 'react-redux';
|
3
5
|
import PropTypes from 'prop-types';
|
4
6
|
import Autosuggest from 'react-autosuggest';
|
7
|
+
import debounce from 'lodash.debounce';
|
5
8
|
import { setBranchesSearch } from '../../actions/branches.actions';
|
6
9
|
|
7
10
|
const BranchesSearchInput = ({
|
8
|
-
branchesSearch,
|
9
|
-
setBranchesSearch,
|
10
11
|
placeholder,
|
11
12
|
isSelected,
|
12
13
|
setIsSelected,
|
14
|
+
label,
|
15
|
+
isRequired,
|
13
16
|
}) => {
|
17
|
+
const { branchesSearch } = useSelector((state) => state?.branches);
|
18
|
+
const dispatch = useDispatch();
|
14
19
|
const [placeID, setPlaceID] = useState('');
|
15
20
|
const [suggestions, setSuggestions] = useState([]);
|
21
|
+
const [inputFocused, setInputFocused] = useState(false);
|
16
22
|
|
17
23
|
useEffect(() => {
|
18
24
|
const searchedPlace = Homeflow.get('place');
|
19
|
-
if (searchedPlace) setBranchesSearch(searchedPlace.name);
|
25
|
+
if (searchedPlace) dispatch(setBranchesSearch(searchedPlace.name));
|
20
26
|
}, []);
|
21
27
|
|
22
28
|
/**
|
@@ -47,21 +53,53 @@ const BranchesSearchInput = ({
|
|
47
53
|
setSuggestions(suggestions);
|
48
54
|
});
|
49
55
|
|
56
|
+
const debouncedGetSuggestions = useCallback(debounce(getSuggestions, 300), []);
|
57
|
+
|
50
58
|
const renderSuggestion = (suggestion) => (
|
51
59
|
<span className="react-autosuggest_span">{suggestion}</span>
|
52
60
|
);
|
53
61
|
|
62
|
+
const updateLabelState = (reason) => {
|
63
|
+
if (label && (reason === 'input-focused' || reason === 'input-changed')) {
|
64
|
+
setInputFocused(true);
|
65
|
+
}
|
66
|
+
return true;
|
67
|
+
};
|
68
|
+
|
69
|
+
/**
|
70
|
+
* this follows the autosuggest library class naming convention (bem)
|
71
|
+
*/
|
72
|
+
const labelClasses = () => {
|
73
|
+
if (inputFocused || branchesSearch) {
|
74
|
+
return 'react-autosuggest__label react-autosuggest__label--focused';
|
75
|
+
}
|
76
|
+
return 'react-autosuggest__label';
|
77
|
+
};
|
78
|
+
|
54
79
|
return (
|
55
80
|
<>
|
56
81
|
<input type="hidden" name="place_id" value={placeID} />
|
57
82
|
<input type="hidden" name="location" value={branchesSearch} />
|
83
|
+
|
84
|
+
{label && (
|
85
|
+
<label
|
86
|
+
className={labelClasses()}
|
87
|
+
htmlFor="react-autosuggest__input"
|
88
|
+
>
|
89
|
+
{label}
|
90
|
+
</label>
|
91
|
+
)}
|
92
|
+
|
58
93
|
<Autosuggest
|
59
94
|
ref={inputEl}
|
60
95
|
suggestions={suggestions}
|
61
|
-
onSuggestionsClearRequested={() =>
|
96
|
+
onSuggestionsClearRequested={() => {
|
97
|
+
setSuggestions([]);
|
98
|
+
if (label) setInputFocused(false);
|
99
|
+
}}
|
62
100
|
onSuggestionsFetchRequested={({ value }) => {
|
63
|
-
setBranchesSearch(value);
|
64
|
-
|
101
|
+
dispatch(setBranchesSearch(value));
|
102
|
+
debouncedGetSuggestions(value);
|
65
103
|
}}
|
66
104
|
onSuggestionSelected={(_, { suggestion }) => {
|
67
105
|
/**
|
@@ -69,17 +107,22 @@ const BranchesSearchInput = ({
|
|
69
107
|
* countrywide themes, other themes will not use this.
|
70
108
|
*/
|
71
109
|
if (setIsSelected) setIsSelected(false);
|
110
|
+
if (label) setInputFocused(true);
|
72
111
|
return (
|
73
112
|
setPlaceID(suggestion.place)
|
74
113
|
);
|
75
114
|
}}
|
76
115
|
getSuggestionValue={(suggestion) => suggestion.label}
|
116
|
+
shouldRenderSuggestions={(_, reason) => updateLabelState(reason)}
|
77
117
|
renderSuggestion={(suggestion) => renderSuggestion(suggestion.label)}
|
78
118
|
inputProps={{
|
79
119
|
placeholder,
|
120
|
+
name: 'react-autosuggest__input',
|
121
|
+
required: isRequired,
|
80
122
|
value: branchesSearch,
|
123
|
+
// eslint-disable-next-line no-unused-vars
|
81
124
|
onChange: (_, { newValue, method }) => {
|
82
|
-
setBranchesSearch(newValue);
|
125
|
+
dispatch(setBranchesSearch(newValue));
|
83
126
|
},
|
84
127
|
}}
|
85
128
|
highlightFirstSuggestion
|
@@ -89,9 +132,9 @@ const BranchesSearchInput = ({
|
|
89
132
|
};
|
90
133
|
|
91
134
|
BranchesSearchInput.propTypes = {
|
92
|
-
branchesSearch: PropTypes.string.isRequired,
|
93
|
-
setBranchesSearch: PropTypes.func.isRequired,
|
94
135
|
placeholder: PropTypes.string,
|
136
|
+
label: PropTypes.string,
|
137
|
+
isRequired: PropTypes.bool,
|
95
138
|
isSelected: PropTypes.oneOfType([
|
96
139
|
PropTypes.bool,
|
97
140
|
PropTypes.string,
|
@@ -104,19 +147,10 @@ BranchesSearchInput.propTypes = {
|
|
104
147
|
|
105
148
|
BranchesSearchInput.defaultProps = {
|
106
149
|
placeholder: '',
|
150
|
+
label: '',
|
107
151
|
isSelected: '',
|
108
152
|
setIsSelected: '',
|
153
|
+
isRequired: false,
|
109
154
|
};
|
110
155
|
|
111
|
-
|
112
|
-
branchesSearch: state.branches.branchesSearch,
|
113
|
-
});
|
114
|
-
|
115
|
-
const mapDispatchToProps = {
|
116
|
-
setBranchesSearch,
|
117
|
-
};
|
118
|
-
|
119
|
-
export default connect(
|
120
|
-
mapStateToProps,
|
121
|
-
mapDispatchToProps,
|
122
|
-
)(BranchesSearchInput);
|
156
|
+
export default BranchesSearchInput;
|
package/package.json
CHANGED
@@ -27,7 +27,7 @@ const RegisterForm = ({ localUser, registering }) => (
|
|
27
27
|
</div>
|
28
28
|
|
29
29
|
<div className="profile-register-form__group">
|
30
|
-
<UserInput name="tel_home" required />
|
30
|
+
<UserInput name="tel_home" required pattern="^[+]?[0-9]{9,12}$" />
|
31
31
|
<label htmlFor="user-input-tel_home" className={localUser.tel_home ? 'shrink' : ''}>Phone</label>
|
32
32
|
</div>
|
33
33
|
|
@@ -10,7 +10,7 @@ const SignInForm = ({ userCredentials }) => (
|
|
10
10
|
<UserSignInForm className="profile-sign-in">
|
11
11
|
<fieldset>
|
12
12
|
<div className="profile-sign-in__group">
|
13
|
-
<SignInInput name="email" required />
|
13
|
+
<SignInInput name="email" required type="email"/>
|
14
14
|
<label htmlFor="sign-in-input-email" className={userCredentials.email ? 'shrink' : ''}>Email</label>
|
15
15
|
</div>
|
16
16
|
|