@fixefy/fixefy-ui-components 0.2.44 → 0.2.45

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/dist/FxStaticDropdown/FxStaticDropdown.js +90 -135
  2. package/package.json +1 -1
package/dist/FxStaticDropdown/FxStaticDropdown.js CHANGED
@@ -69,7 +69,7 @@ const FxStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((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
74
  const storedData = sessionStorage.getItem(`dropdown-${query}`);
75
75
  if (storedData) {
@@ -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,14 +313,15 @@ 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: ()=>{
@@ -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.45"
69
69
  }