groovinads-ui 1.2.41 → 1.2.42

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 (5) hide show
  1. package/README.md +1 -1
  2. package/dist/index.es.js +1 -1
  3. package/dist/index.js +1 -1
  4. package/package.json +1 -1
  5. package/src/components/Dropdowns/DropdownFilter.jsx +90 -59
package/src/components/Dropdowns/DropdownFilter.jsx CHANGED
@@ -21,7 +21,6 @@ const DropdownFilter = ({
21
21
  onToggle,
22
22
  overflow = false,
23
23
  className = '',
24
-
25
24
  }) => {
26
25
  const [query, setQuery] = useState('');
27
26
 
@@ -37,24 +36,24 @@ const DropdownFilter = ({
37
36
  <p>It looks like this value does not exist.</p>
38
37
  </div>
39
38
  </div>
40
- )
41
- }
39
+ );
40
+ };
42
41
 
43
42
  const handleCheckbox = (value, i) => {
44
- if (value) setValuesSelected([...valuesSelected, values[i]]);
45
- else setValuesSelected(valuesSelected.filter((item) => item !== values[i]));
46
- };
43
+ if (value) setValuesSelected([...valuesSelected, values[i]]);
44
+ else setValuesSelected(valuesSelected.filter((item) => item !== values[i]));
45
+ };
47
46
 
48
47
  const selectAll = () => {
49
48
  setValuesSelected([...values]);
50
- }
49
+ };
51
50
 
52
51
  const clearSelection = () => {
53
52
  setValuesSelected([]);
54
- }
53
+ };
55
54
 
56
55
  const handlePill = (index) =>
57
- setValuesSelected(valuesSelected.filter((item, i) => i !== index));
56
+ setValuesSelected(valuesSelected.filter((item, i) => i !== index));
58
57
 
59
58
  return (
60
59
  <Dropdown
@@ -63,20 +62,13 @@ const DropdownFilter = ({
63
62
  className={`dropdown-filter ${locked ? 'locked' : ''} ${className}`}
64
63
  autoClose={false}
65
64
  >
66
- <Dropdown.Toggle
67
- variant='toggle-filter'
68
- >
65
+ <Dropdown.Toggle variant='toggle-filter'>
69
66
  <div className='filter-heading'>
70
-
71
67
  <div className='filter-title'>
72
68
  <span>{title}</span>
73
69
  {locked && (
74
- <Icon
75
- style={'solid'}
76
- iconName={'lock-keyhole'}
77
- scale={0.7}
78
- />
79
- )}
70
+ <Icon style={'solid'} iconName={'lock-keyhole'} scale={0.7} />
71
+ )}
80
72
  </div>
81
73
  <Icon
82
74
  style={'solid'}
@@ -86,7 +78,11 @@ const DropdownFilter = ({
86
78
  />
87
79
  </div>
88
80
  <div className='filter-values'>
89
- { valuesSelected.length === values.length ? 'All selected' : valuesSelected.length ? valuesSelected.join('; ') : 'None'}
81
+ {valuesSelected.length === values.length
82
+ ? 'All selected'
83
+ : valuesSelected.length
84
+ ? valuesSelected.join('; ')
85
+ : 'None'}
90
86
  </div>
91
87
  </Dropdown.Toggle>
92
88
  {!locked && (
@@ -100,9 +96,17 @@ const DropdownFilter = ({
100
96
  )}
101
97
 
102
98
  {menuType === 'simple' && (
103
- <Dropdown.Menu
99
+ <Dropdown.Menu
104
100
  className='dropdown-menu-simple'
105
- popperConfig={overflow ? { strategy: 'fixed', onFirstUpdate: () => window.dispatchEvent(new CustomEvent('scroll')) } : undefined}
101
+ popperConfig={
102
+ overflow
103
+ ? {
104
+ strategy: 'fixed',
105
+ onFirstUpdate: () =>
106
+ window.dispatchEvent(new CustomEvent('scroll')),
107
+ }
108
+ : undefined
109
+ }
106
110
  >
107
111
  <div className='dropdown-menu-wrapper'>
108
112
  <Input
@@ -111,35 +115,50 @@ const DropdownFilter = ({
111
115
  icon='magnifying-glass'
112
116
  className='w-100'
113
117
  value={query}
114
- onChange={({target}) => setQuery(target.value)}
118
+ onChange={({ target }) => setQuery(target.value)}
115
119
  customRef={show}
116
120
  />
117
- {values.filter( (item) => item.toLowerCase().includes(query.toLowerCase() ) ).length > 0 ? (
121
+ {values.filter((item) =>
122
+ item.toString().toLowerCase().includes(query.toLowerCase()),
123
+ ).length > 0 ? (
118
124
  <ul className='dropdown-filter-list'>
119
125
  {/* List values */}
120
- {values.filter( (item) => item.toLowerCase().includes(query.toLowerCase() ) ).map((value, index) => {
121
- return (
122
- <Checkbox
123
- setStatus={ (status) => {handleCheckbox(status, index)} }
124
- status={valuesSelected.includes(value)}
125
- key={'Dropdown.Simple.Checkbox' + index}
126
- >
127
- {value}
128
- </Checkbox>
126
+ {values
127
+ .filter((item) =>
128
+ item.toString().toLowerCase().includes(query.toLowerCase()),
129
129
  )
130
- })}
130
+ .map((value, index) => {
131
+ return (
132
+ <Checkbox
133
+ setStatus={(status) => {
134
+ handleCheckbox(status, index);
135
+ }}
136
+ status={valuesSelected.includes(value)}
137
+ key={'Dropdown.Simple.Checkbox' + index}
138
+ >
139
+ {value}
140
+ </Checkbox>
141
+ );
142
+ })}
131
143
  </ul>
132
144
  ) : (
133
145
  <EmptySpace />
134
146
  )}
135
147
  </div>
136
-
137
- </Dropdown.Menu>
138
- )}
139
- {menuType === 'selection' && (
140
- <Dropdown.Menu
141
- className='dropdown-menu-selection'
142
- popperConfig={overflow ? { strategy: 'fixed', onFirstUpdate: () => window.dispatchEvent(new CustomEvent('scroll')) } : undefined}
148
+ </Dropdown.Menu>
149
+ )}
150
+ {menuType === 'selection' && (
151
+ <Dropdown.Menu
152
+ className='dropdown-menu-selection'
153
+ popperConfig={
154
+ overflow
155
+ ? {
156
+ strategy: 'fixed',
157
+ onFirstUpdate: () =>
158
+ window.dispatchEvent(new CustomEvent('scroll')),
159
+ }
160
+ : undefined
161
+ }
143
162
  >
144
163
  <div className='dropdown-menu-wrapper'>
145
164
  <div className='dropdown-filter-list-wrapper'>
@@ -149,25 +168,36 @@ const DropdownFilter = ({
149
168
  icon='magnifying-glass'
150
169
  className='w-100'
151
170
  value={query}
152
- onChange={({target}) => setQuery(target.value)}
171
+ onChange={({ target }) => setQuery(target.value)}
153
172
  customRef={show}
154
173
  />
155
174
  <h4>All values ({values.length})</h4>
156
- {values.filter( (item) => item.toLowerCase().includes(query.toLowerCase() ) ).length > 0 ? (
175
+ {values.filter((item) =>
176
+ item.toString().toLowerCase().includes(query.toLowerCase()),
177
+ ).length > 0 ? (
157
178
  <>
158
179
  <ul className='dropdown-filter-list'>
159
180
  {/* List values */}
160
- {values.filter( (item) => item.toLowerCase().includes(query.toLowerCase() ) ).map((value, index) => {
161
- return (
162
- <Checkbox
163
- setStatus={ (status) => {handleCheckbox(status, index)} }
164
- status={valuesSelected.includes(value)}
165
- key={'Dropdown.Selection.Checkbox' + index}
166
- >
167
- {value}
168
- </Checkbox>
181
+ {values
182
+ .filter((item) =>
183
+ item
184
+ .toString()
185
+ .toLowerCase()
186
+ .includes(query.toLowerCase()),
169
187
  )
170
- })}
188
+ .map((value, index) => {
189
+ return (
190
+ <Checkbox
191
+ setStatus={(status) => {
192
+ handleCheckbox(status, index);
193
+ }}
194
+ status={valuesSelected.includes(value)}
195
+ key={'Dropdown.Selection.Checkbox' + index}
196
+ >
197
+ {value}
198
+ </Checkbox>
199
+ );
200
+ })}
171
201
  </ul>
172
202
  </>
173
203
  ) : (
@@ -201,19 +231,20 @@ const DropdownFilter = ({
201
231
  <PillComponent
202
232
  color='light'
203
233
  closeButton={true}
204
- onClick={ () => { handlePill(index) } }
234
+ onClick={() => {
235
+ handlePill(index);
236
+ }}
205
237
  key={'Dropdown.PillComponent' + index}
206
238
  >
207
239
  {value}
208
240
  </PillComponent>
209
- )
241
+ );
210
242
  })}
211
243
  </div>
212
244
  </div>
213
245
  </div>
214
-
215
- </Dropdown.Menu>
216
- )}
246
+ </Dropdown.Menu>
247
+ )}
217
248
  </Dropdown>
218
249
  );
219
250
  };
@@ -232,4 +263,4 @@ DropdownFilter.propTypes = {
232
263
  className: PropTypes.string,
233
264
  };
234
265
 
235
- export default DropdownFilter;
266
+ export default DropdownFilter;