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, { useState, useRef, useEffect } from 'react';
2
- import { connect } from 'react-redux';
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={() => setSuggestions([])}
96
+ onSuggestionsClearRequested={() => {
97
+ setSuggestions([]);
98
+ if (label) setInputFocused(false);
99
+ }}
62
100
  onSuggestionsFetchRequested={({ value }) => {
63
- setBranchesSearch(value);
64
- getSuggestions(value);
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
- const mapStateToProps = (state) => ({
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "homeflowjs",
3
- "version": "0.10.16",
3
+ "version": "0.10.17",
4
4
  "description": "JavaScript toolkit for Homeflow themes",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -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