@fixefy/fixefy-ui-components 0.2.44 → 0.2.46

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 (4) hide show
  1. package/dist/FxAsyncDropdown/FxAsyncDropdown.js +6 -6
  2. package/dist/FxStaticDropdown/FxStaticDropdown.d.ts +1 -0
  3. package/dist/FxStaticDropdown/FxStaticDropdown.js +97 -142
  4. package/package.json +1 -1
package/dist/FxAsyncDropdown/FxAsyncDropdown.js CHANGED
@@ -167,7 +167,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
167
167
  }
168
168
  }, []);
169
169
  (0, _react.useEffect)(()=>{
170
- const storedData = sessionStorage.getItem(`dropdown-${query}`);
170
+ const storedData = sessionStorage.getItem(`dropdown-${query}-${name}`);
171
171
  if (storedData) {
172
172
  const parsedData = JSON.parse(storedData);
173
173
  const items = parsedData[name];
@@ -204,7 +204,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
204
204
  setIsLastPage(false);
205
205
  };
206
206
  const addToStoredDisplayed = (option)=>{
207
- const prevStored = sessionStorage.getItem(`dropdown-${query}`);
207
+ const prevStored = sessionStorage.getItem(`dropdown-${query}-${name}`);
208
208
  let data = prevStored ? JSON.parse(prevStored) : {};
209
209
  if (data[name]) {
210
210
  if (multiple) {
@@ -222,10 +222,10 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
222
222
  option
223
223
  ];
224
224
  }
225
- sessionStorage.setItem(`dropdown-${query}`, JSON.stringify(data));
225
+ sessionStorage.setItem(`dropdown-${query}-${name}`, JSON.stringify(data));
226
226
  };
227
227
  const removeOneFromStoredDisplayed = (option)=>{
228
- let storedDisplayed = sessionStorage.getItem(`dropdown-${query}`);
228
+ let storedDisplayed = sessionStorage.getItem(`dropdown-${query}-${name}`);
229
229
  if (storedDisplayed) {
230
230
  storedDisplayed = JSON.parse(storedDisplayed);
231
231
  if (multiple) {
@@ -234,7 +234,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
234
234
  } else {
235
235
  delete storedDisplayed[name];
236
236
  }
237
- sessionStorage.setItem(`dropdown-${query}`, JSON.stringify(storedDisplayed));
237
+ sessionStorage.setItem(`dropdown-${query}-${name}`, JSON.stringify(storedDisplayed));
238
238
  }
239
239
  };
240
240
  const handleOptionClick = (option)=>{
@@ -496,7 +496,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
496
496
  onClick: ()=>{
497
497
  setDisplayed([]);
498
498
  onRemoveAll && onRemoveAll();
499
- sessionStorage.removeItem(`dropdown-${query}`);
499
+ sessionStorage.removeItem(`dropdown-${query}-${name}`);
500
500
  },
501
501
  icon: `filters/remove_all_button.svg`,
502
502
  width: 16,
package/dist/FxStaticDropdown/FxStaticDropdown.d.ts CHANGED
@@ -14,6 +14,7 @@ export type StaticDropdownPropsType = {
14
14
  onRemoveAll?: () => void;
15
15
  type?: 'checkbox' | 'text';
16
16
  modal_type?: string;
17
+ name: string;
17
18
  query: string;
18
19
  isInitialOpen?: boolean;
19
20
  placeholder?: string;
package/dist/FxStaticDropdown/FxStaticDropdown.js CHANGED
@@ -65,13 +65,13 @@ const checkedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBox,
65
65
  fontSize: "small"
66
66
  });
67
67
  const FxStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
68
- const { onAdd, onRemoveOne, onRemoveAll, type = 'text', modal_type, multiple, query, isInitialOpen, placeholder, data, rootStylesOverride } = props;
68
+ const { onAdd, onRemoveOne, onRemoveAll, type = 'text', modal_type, multiple, name, query, isInitialOpen, placeholder, data, rootStylesOverride } = props;
69
69
  const ref = (0, _react.useRef)(null);
70
70
  const theme = (0, _material.useTheme)();
71
71
  const [displayed, setDisplayed] = (0, _react.useState)(multiple ? [] : '');
72
- const [isOpen, setIOpen] = (0, _react.useState)(isInitialOpen);
72
+ const [isOpen, setIsOpen] = (0, _react.useState)(isInitialOpen);
73
73
  (0, _react.useEffect)(()=>{
74
- const storedData = sessionStorage.getItem(`dropdown-${query}`);
74
+ const storedData = sessionStorage.getItem(`dropdown-${query}-${name}`);
75
75
  if (storedData) {
76
76
  const parsedData = JSON.parse(storedData);
77
77
  if (parsedData) {
@@ -84,7 +84,7 @@ const FxStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
84
84
  query
85
85
  ]);
86
86
  const addToStoredDisplayed = (option)=>{
87
- const prevStored = sessionStorage.getItem(`dropdown-${query}`);
87
+ const prevStored = sessionStorage.getItem(`dropdown-${query}-${name}`);
88
88
  let data = prevStored ? JSON.parse(prevStored) : {};
89
89
  if (data) {
90
90
  if (multiple) {
@@ -102,10 +102,10 @@ const FxStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
102
102
  option
103
103
  ];
104
104
  }
105
- sessionStorage.setItem(`dropdown-${query}`, JSON.stringify(data));
105
+ sessionStorage.setItem(`dropdown-${query}-${name}`, JSON.stringify(data));
106
106
  };
107
107
  const removeOneFromStoredDisplayed = (option)=>{
108
- let storedDisplayed = sessionStorage.getItem(`dropdown-${query}`);
108
+ let storedDisplayed = sessionStorage.getItem(`dropdown-${query}-${name}`);
109
109
  if (storedDisplayed) {
110
110
  storedDisplayed = JSON.parse(storedDisplayed);
111
111
  if (multiple) {
@@ -116,7 +116,7 @@ const FxStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
116
116
  } else {
117
117
  storedDisplayed = storedDisplayed.filter((opt)=>opt !== option);
118
118
  }
119
- sessionStorage.setItem(`dropdown-${query}`, JSON.stringify(storedDisplayed));
119
+ sessionStorage.setItem(`dropdown-${query}-${name}`, JSON.stringify(storedDisplayed));
120
120
  }
121
121
  };
122
122
  const handleOptionClick = (option)=>{
@@ -149,11 +149,7 @@ const FxStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
149
149
  removeOneFromStoredDisplayed(item);
150
150
  };
151
151
  const isChecked = (option)=>{
152
- if (multiple) {
153
- return displayed.includes(option);
154
- } else {
155
- return displayed === option;
156
- }
152
+ return multiple ? displayed.includes(option) : displayed === option;
157
153
  };
158
154
  const displayListOptions = ()=>{
159
155
  switch(type){
@@ -179,7 +175,7 @@ const FxStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
179
175
  }
180
176
  }
181
177
  }),
182
- getSingleValueByModalType(option, 'list')
178
+ getSingleOptionFromListOrDisplayed(option, 'list')
183
179
  ]
184
180
  }, option);
185
181
  });
@@ -192,7 +188,7 @@ const FxStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
192
188
  onClick: ()=>{
193
189
  handleOptionClick(option);
194
190
  },
195
- children: getSingleValueByModalType(option, 'list')
191
+ children: getSingleOptionFromListOrDisplayed(option, 'list')
196
192
  }, option._id);
197
193
  });
198
194
  }
@@ -202,140 +198,98 @@ const FxStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
202
198
  if (multiple) {
203
199
  return getMultipleDisplayedValues();
204
200
  } else {
205
- return getSingleValueByModalType(displayed, 'displayed');
201
+ return getSingleOptionFromListOrDisplayed(displayed, 'displayed');
206
202
  }
207
203
  };
208
- const DeleteButton = ({ option })=>{
209
- let rv = null;
210
- switch(multiple){
211
- case true:
212
- if ((displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0) {
213
- rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
214
- onClick: ()=>{
215
- deleteOneItem(option);
216
- },
217
- children: "x"
218
- });
219
- }
220
- break;
221
- case false:
222
- default:
223
- if (displayed === option) {
224
- rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
225
- onClick: ()=>{
226
- deleteOneItem(option);
227
- },
228
- children: "x"
229
- });
230
- }
231
- break;
204
+ const DeleteButton = ({ option, isDisplay })=>{
205
+ const isDisplayButton = isDisplay && multiple && (displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0 || !multiple && displayed === option;
206
+ if (isDisplayButton) {
207
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
208
+ onClick: ()=>{
209
+ deleteOneItem(option);
210
+ },
211
+ children: "x"
212
+ });
213
+ }
214
+ return null;
215
+ };
216
+ const Chip = ({ option, modal })=>{
217
+ return modal == 'displayed' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
218
+ status: option,
219
+ label: (0, _helpers.titleCase)(option),
220
+ variant: "outlined",
221
+ onDelete: ()=>{
222
+ deleteOneItem(option);
223
+ }
224
+ }, option) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
225
+ status: option,
226
+ label: (0, _helpers.titleCase)(option),
227
+ variant: "outlined"
228
+ }, option);
229
+ };
230
+ const ChosenIcon = ({ option, isDisplay })=>{
231
+ if (isDisplay && isChecked(option)) {
232
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
233
+ width: 16,
234
+ height: 16,
235
+ icon: 'filters/chosen_icon.svg'
236
+ });
232
237
  }
233
- return rv;
238
+ return null;
234
239
  };
235
- const getSingleValueByModalType = (option, modal)=>{
240
+ const OneOption = ({ option, modal })=>{
241
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
242
+ sx: {
243
+ display: 'flex',
244
+ justifyContent: 'space-between',
245
+ width: '100%',
246
+ gap: 1,
247
+ color: 'grey',
248
+ cursor: 'pointer'
249
+ },
250
+ children: [
251
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
252
+ sx: {
253
+ width: '100%',
254
+ display: 'flex',
255
+ justifyContent: 'flex-start',
256
+ gap: 1
257
+ },
258
+ children: [
259
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
260
+ variant: "subtitle2",
261
+ color: theme.palette.typography.title,
262
+ children: (0, _helpers.titleCase)(option)
263
+ }),
264
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(DeleteButton, {
265
+ option: option,
266
+ isDisplay: modal == 'displayed'
267
+ })
268
+ ]
269
+ }),
270
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(ChosenIcon, {
271
+ option: option,
272
+ isDisplay: modal == 'list'
273
+ })
274
+ ]
275
+ }, option);
276
+ };
277
+ const getSingleOptionFromListOrDisplayed = (option, modal)=>{
236
278
  if (option) {
237
279
  let rv = null;
238
280
  switch(modal_type){
239
281
  case 'chip':
240
- rv = modal === 'displayed' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
241
- status: option,
242
- label: (0, _helpers.titleCase)(option),
243
- variant: "outlined",
244
- onDelete: ()=>{
245
- deleteOneItem(option);
246
- }
247
- }, option) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
248
- status: option,
249
- label: (0, _helpers.titleCase)(option),
250
- variant: "outlined"
251
- }, option);
252
- break;
253
- case 'logo':
254
- rv = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
255
- sx: {
256
- display: 'flex',
257
- gap: 1,
258
- color: 'grey',
259
- cursor: 'pointer',
260
- width: '100%'
261
- },
262
- children: [
263
- /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
264
- style: {
265
- width: '70px'
266
- },
267
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
268
- icon: `companies/${option.logo ? option.logo : 'logo_placeholder/logo_placeholder.svg'}`,
269
- width: 70,
270
- height: 16
271
- })
272
- }),
273
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
274
- sx: {
275
- width: '170px',
276
- overflow: 'hidden',
277
- display: 'flex',
278
- justifyContent: 'flex-start',
279
- gap: 1
280
- },
281
- children: [
282
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
283
- variant: "subtitle2",
284
- color: theme.palette.typography.title,
285
- children: (0, _helpers.titleCase)(option)
286
- }),
287
- modal === 'displayed' && /*#__PURE__*/ (0, _jsxruntime.jsx)(DeleteButton, {
288
- option: option
289
- })
290
- ]
291
- }),
292
- modal === 'list' && isChecked(option) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
293
- width: 16,
294
- height: 16,
295
- icon: 'filters/chosen_icon.svg'
296
- })
297
- ]
298
- }, option._id);
282
+ rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(Chip, {
283
+ option: option,
284
+ modal: modal
285
+ });
299
286
  break;
300
287
  case 'text':
301
288
  default:
302
- rv = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
303
- sx: {
304
- display: 'flex',
305
- justifyContent: 'space-between',
306
- width: '100%',
307
- maxWidth: '250px',
308
- gap: 1,
309
- color: 'grey',
310
- cursor: 'pointer'
311
- },
312
- children: [
313
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
314
- sx: {
315
- width: '210px',
316
- overflow: 'hidden',
317
- display: 'flex',
318
- justifyContent: 'flex-start',
319
- gap: 1
320
- },
321
- children: [
322
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
323
- variant: "subtitle2",
324
- color: theme.palette.typography.title,
325
- children: (0, _helpers.titleCase)(option)
326
- }),
327
- modal === 'displayed' && /*#__PURE__*/ (0, _jsxruntime.jsx)(DeleteButton, {
328
- option: option
329
- })
330
- ]
331
- }),
332
- modal === 'list' && isChecked(option) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
333
- width: 16,
334
- height: 16,
335
- icon: 'filters/chosen_icon.svg'
336
- })
337
- ]
338
- }, option._id);
289
+ rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(OneOption, {
290
+ option: option,
291
+ modal: modal
292
+ });
339
293
  break;
340
294
  }
341
295
  return rv;
@@ -359,20 +313,21 @@ const FxStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
359
313
  gap: 1
360
314
  },
361
315
  children: displayed.map((item)=>{
362
- return getSingleValueByModalType(item, 'displayed');
316
+ return getSingleOptionFromListOrDisplayed(item, 'displayed');
363
317
  })
364
318
  }),
365
319
  (displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
366
320
  sx: {
367
321
  minWidth: '20px',
368
322
  maxWidth: '20px',
369
- cursor: 'pointer'
323
+ cursor: 'pointer',
324
+ paddingLeft: '3px'
370
325
  },
371
326
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
372
327
  onClick: ()=>{
373
328
  setDisplayed([]);
374
329
  onRemoveAll && onRemoveAll();
375
- sessionStorage.removeItem(`dropdown-${query}`);
330
+ sessionStorage.removeItem(`dropdown-${query}-${name}`);
376
331
  },
377
332
  icon: `filters/remove_all_button.svg`,
378
333
  width: 16,
@@ -393,11 +348,11 @@ const FxStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
393
348
  autoFocus: true,
394
349
  placeholder: placeholder || 'Select an option...',
395
350
  onFocus: ()=>{
396
- !isInitialOpen && setIOpen(true);
351
+ !isInitialOpen && setIsOpen(true);
397
352
  },
398
353
  onBlur: ()=>{
399
354
  setTimeout(()=>{
400
- !isInitialOpen && setIOpen(false);
355
+ !isInitialOpen && setIsOpen(false);
401
356
  }, 200);
402
357
  }
403
358
  })
package/package.json CHANGED
@@ -65,5 +65,5 @@
65
65
  "require": "./dist/index.js"
66
66
  }
67
67
  },
68
- "version": "0.2.44"
68
+ "version": "0.2.46"
69
69
  }