@fixefy/fixefy-ui-components 0.1.72 → 0.1.73

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.
@@ -11,7 +11,6 @@ export interface StylesOptions {
11
11
  menuSx?: object;
12
12
  }
13
13
  export type AsyncDropdownPropsType = {
14
- debug?: boolean;
15
14
  initialValue?: Option | any;
16
15
  styles?: StylesOptions;
17
16
  method_name: string;
@@ -14,11 +14,11 @@ const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
14
14
  const _iconsmaterial = require("@mui/icons-material");
15
15
  const _material = require("@mui/material");
16
16
  const _FxChip = require("../FxChip");
17
+ const _FxIcon = require("../FxIcon");
17
18
  const _graphqltag = require("graphql-tag");
18
19
  const _dropdownstyles = require("./styles/dropdown.styles");
19
20
  const _helpers = require("./helpers/helpers");
20
21
  const _client = require("@apollo/client");
21
- const _FxIcon = require("../FxIcon");
22
22
  const _nookies = require("nookies");
23
23
  function _define_property(obj, key, value) {
24
24
  if (key in obj) {
@@ -113,33 +113,6 @@ function _object_spread_props(target, source) {
113
113
  }
114
114
  return target;
115
115
  }
116
- function _object_without_properties(source, excluded) {
117
- if (source == null) return {};
118
- var target = _object_without_properties_loose(source, excluded);
119
- var key, i;
120
- if (Object.getOwnPropertySymbols) {
121
- var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
122
- for(i = 0; i < sourceSymbolKeys.length; i++){
123
- key = sourceSymbolKeys[i];
124
- if (excluded.indexOf(key) >= 0) continue;
125
- if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
126
- target[key] = source[key];
127
- }
128
- }
129
- return target;
130
- }
131
- function _object_without_properties_loose(source, excluded) {
132
- if (source == null) return {};
133
- var target = {};
134
- var sourceKeys = Object.keys(source);
135
- var key, i;
136
- for(i = 0; i < sourceKeys.length; i++){
137
- key = sourceKeys[i];
138
- if (excluded.indexOf(key) >= 0) continue;
139
- target[key] = source[key];
140
- }
141
- return target;
142
- }
143
116
  const icon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBoxOutlineBlank, {
144
117
  fontSize: "small"
145
118
  });
@@ -148,34 +121,20 @@ const checkedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBox,
148
121
  });
149
122
  const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRef)=>{
150
123
  var _props_styles;
151
- const { debug, onChange, renderOptions, fetcher, disabled, type = 'text', title_path, variables, search_path, modal_type, multiple, name, query } = props;
124
+ const { onChange, fetcher, disabled, type = 'text', variables, search_path, modal_type, multiple, name, query } = props;
152
125
  const ref = (0, _react.useRef)(null);
153
126
  const theme = (0, _material.useTheme)();
154
- const [displayedValue, setDisplayedValue] = (0, _react.useState)(multiple ? [] : '');
127
+ const [displayed, setDisplayed] = (0, _react.useState)(multiple ? [] : '');
155
128
  const [options, setOptions] = (0, _react.useState)([]);
156
- const [loadingData, setLoadingData] = (0, _react.useState)(false);
157
129
  const [reason, setReason] = (0, _react.useState)('init');
158
130
  const [isLastPage, setIsLastPage] = (0, _react.useState)(false);
159
131
  const [searchValue, setSearchValue] = (0, _react.useState)(null);
160
- const [hasClearBtn, setHasClearBtn] = (0, _react.useState)(false);
161
132
  const [page, setPage] = (0, _react.useState)(1);
162
133
  const [prevPage, setPrevPage] = (0, _react.useState)(0);
163
134
  const pageSize = 20;
164
135
  const { method_name } = variables;
165
136
  const ws = (0, _nookies.parseCookies)().ws;
166
- (0, _react.useEffect)(()=>{
167
- let storedFilters = sessionStorage.getItem(query) || undefined;
168
- if (storedFilters) {
169
- storedFilters = JSON.parse(storedFilters);
170
- if (storedFilters === null || storedFilters === void 0 ? void 0 : storedFilters[name]) {
171
- const storedOperator = Object.keys(storedFilters[name])[0];
172
- setDisplayedValue(storedFilters[name][storedOperator]);
173
- }
174
- }
175
- }, [
176
- name,
177
- query
178
- ]);
137
+ const isLocal = fetcher.query.loc;
179
138
  const getWhere = ()=>{
180
139
  if (variables.method_name == 'workspace') {
181
140
  return searchValue ? _object_spread_props(_object_spread({}, fetcher.queryOptions.variables.where), {
@@ -194,87 +153,92 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
194
153
  }) : _object_spread({}, fetcher.queryOptions.variables.where);
195
154
  }
196
155
  };
197
- const isLocal = fetcher.query.loc;
198
- const [fetch, { data }] = (0, _client.useLazyQuery)((0, _graphqltag.gql)(isLocal ? fetcher.query.loc.source.body : fetcher.query), _object_spread_props(_object_spread({}, fetcher.queryOptions), {
156
+ const [fetch, { data, loading }] = (0, _client.useLazyQuery)((0, _graphqltag.gql)(isLocal ? fetcher.query.loc.source.body : fetcher.query), _object_spread_props(_object_spread({}, fetcher.queryOptions), {
199
157
  variables: _object_spread_props(_object_spread({}, fetcher.queryOptions.variables), {
200
158
  where: getWhere(),
201
159
  skip: page * pageSize - pageSize,
202
160
  limit: pageSize
203
161
  })
204
162
  }));
163
+ (0, _react.useEffect)(()=>{
164
+ let storedFilters = sessionStorage.getItem(query) || undefined;
165
+ if (storedFilters) {
166
+ storedFilters = JSON.parse(storedFilters);
167
+ if (storedFilters === null || storedFilters === void 0 ? void 0 : storedFilters[name]) {
168
+ const storedOperator = Object.keys(storedFilters[name])[0];
169
+ setDisplayed(storedFilters[name][storedOperator]);
170
+ }
171
+ }
172
+ }, [
173
+ name,
174
+ query
175
+ ]);
176
+ (0, _react.useEffect)(()=>{
177
+ if (!disabled) {
178
+ fetch();
179
+ }
180
+ }, []);
181
+ (0, _react.useEffect)(()=>{
182
+ if (data && !isLastPage && prevPage < page) {
183
+ //raaya todo: this is too messy clean it
184
+ const newOptions = variables.method_name == 'workspace' ? data.workspace[search_path === null || search_path === void 0 ? void 0 : search_path.split('.')[1]] : data[method_name];
185
+ if (newOptions.length === 0 || newOptions.length < pageSize) {
186
+ setIsLastPage(true);
187
+ }
188
+ if (reason === 'searched' || reason === 'init') {
189
+ setOptions(newOptions);
190
+ } else if (reason === 'loaded more') {
191
+ setOptions((prevOptions)=>[
192
+ ...prevOptions,
193
+ ...newOptions
194
+ ]);
195
+ }
196
+ }
197
+ }, [
198
+ data,
199
+ reason
200
+ ]);
205
201
  const handleSearch = (e)=>{
206
202
  setSearchValue(e.target.value);
207
- setDisplayedValue(e.target.value);
203
+ setDisplayed(e.target.value);
208
204
  setReason('searched');
209
205
  setPage(1);
210
206
  setPrevPage(0);
211
207
  setIsLastPage(false);
212
208
  };
213
- const handleChildrens = (_param)=>{
214
- var { structure } = _param, rest = _object_without_properties(_param, [
215
- "structure"
216
- ]);
217
- let rv = null;
218
- const { type, children } = structure;
219
- debug === true && console.log('handleChildrens', structure);
220
- switch(type){
221
- case 'dropdownOptions':
222
- case 'dropdown_options':
223
- {
224
- rv = children.map((child)=>handleChildrens(_object_spread({
225
- structure: child
226
- }, rest)));
227
- break;
228
- }
229
- case 'clear':
230
- {
231
- if (!hasClearBtn) {
232
- setHasClearBtn(true);
233
- }
234
- rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, _object_spread_props(_object_spread({}, rest), {
235
- children: structure.title
236
- }));
237
- break;
209
+ const handleOptionClick = (option, extractedVal)=>{
210
+ switch(multiple){
211
+ case true:
212
+ if (displayed.includes(extractedVal)) {
213
+ setDisplayed((prev)=>prev.filter((val)=>val !== extractedVal));
214
+ onChange && onChange(option, 'uncheck');
215
+ } else {
216
+ onChange && onChange(option, 'check');
217
+ setDisplayed((prev)=>[
218
+ ...prev,
219
+ extractedVal
220
+ ]);
238
221
  }
222
+ break;
239
223
  default:
240
- {
241
- break;
242
- }
224
+ setDisplayed(extractedVal);
225
+ onChange && onChange(option, null);
243
226
  }
244
- return rv;
245
227
  };
246
- const handleRenderOptions = ()=>{
247
- debug === true && console.log('renderOptions: ', renderOptions);
228
+ const handleListOptions = ()=>{
248
229
  switch(type){
249
230
  case 'checkbox':
250
231
  {
251
232
  return options.map((option)=>{
252
- var _option_title_path;
253
- const displayedVal = (_option_title_path = option[title_path]) !== null && _option_title_path !== void 0 ? _option_title_path : option.title;
254
- let title = (0, _helpers.getJPart)(option, title_path, 0);
255
- //if title is an array need to extract the first element
256
- if (typeof title === 'object' && title.length > 0) {
257
- title = title[0];
258
- }
259
- var _option_title;
233
+ const extractedVal = option[search_path] || option.title;
260
234
  return /*#__PURE__*/ (0, _jsxruntime.jsxs)("li", {
261
235
  onClick: ()=>{
262
- if (displayedValue.includes(option[title_path])) {
263
- setDisplayedValue((prev)=>prev.filter((val)=>val !== displayedVal));
264
- onChange && onChange(option, 'uncheck');
265
- } else {
266
- // debugger
267
- onChange && onChange(option, 'check');
268
- setDisplayedValue((prev)=>[
269
- ...prev,
270
- displayedVal
271
- ]);
272
- }
236
+ handleOptionClick(option, extractedVal);
273
237
  },
274
238
  children: [
275
239
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
276
240
  icon: icon,
277
- checked: displayedValue.includes(option[title_path]),
241
+ checked: displayed.includes(extractedVal),
278
242
  checkedIcon: checkedIcon,
279
243
  sx: {
280
244
  mr: 1,
@@ -289,7 +253,7 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
289
253
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
290
254
  variant: "subtitle2",
291
255
  color: theme.palette.typography.title,
292
- children: (0, _helpers.titleCase)((_option_title = option === null || option === void 0 ? void 0 : option.title) !== null && _option_title !== void 0 ? _option_title : title)
256
+ children: (0, _helpers.titleCase)(extractedVal)
293
257
  })
294
258
  ]
295
259
  }, option._id);
@@ -298,17 +262,14 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
298
262
  case 'text':
299
263
  {
300
264
  return options.map((option)=>{
301
- debug === true && console.log('renderOptions: ', title_path, option[title_path], options);
302
- var _option_title_path;
303
- const displayedVal = (_option_title_path = option[title_path]) !== null && _option_title_path !== void 0 ? _option_title_path : option.title;
265
+ const extractedVal = option[search_path] || option.title;
304
266
  return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
305
267
  onClick: ()=>{
306
- setDisplayedValue(displayedVal);
307
- onChange && onChange(option, null);
268
+ handleOptionClick(option, extractedVal);
308
269
  },
309
270
  children: modal_type === 'chip' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
310
271
  status: option.value,
311
- label: (0, _helpers.titleCase)(displayedVal),
272
+ label: (0, _helpers.titleCase)(extractedVal),
312
273
  variant: "outlined"
313
274
  }) : modal_type === 'logo' ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
314
275
  children: [
@@ -323,29 +284,28 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
323
284
  },
324
285
  variant: "subtitle2",
325
286
  color: theme.palette.typography.title,
326
- children: (0, _helpers.titleCase)(displayedVal)
287
+ children: (0, _helpers.titleCase)(extractedVal)
327
288
  })
328
289
  ]
329
290
  }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
330
291
  variant: "subtitle2",
331
292
  color: theme.palette.typography.title,
332
- children: (0, _helpers.titleCase)(displayedVal)
293
+ children: (0, _helpers.titleCase)(extractedVal)
333
294
  })
334
295
  }, option._id);
335
296
  });
336
297
  }
337
298
  default:
338
299
  {
339
- return options.map((option, index)=>{
340
- debug === true && console.log('renderOptions: ', title_path, option[title_path], options);
341
- var _option_title_path;
300
+ return options.map((option, i)=>{
301
+ const extractedVal = option[search_path] || option.title;
342
302
  return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
343
303
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
344
304
  variant: "subtitle2",
345
305
  color: theme.palette.typography.title,
346
- children: (0, _helpers.titleCase)((_option_title_path = option[title_path]) !== null && _option_title_path !== void 0 ? _option_title_path : option.title)
306
+ children: (0, _helpers.titleCase)(extractedVal || '')
347
307
  })
348
- }, index);
308
+ }, i);
349
309
  });
350
310
  }
351
311
  }
@@ -358,83 +318,171 @@ const FxAsyncDropdown = /*#__PURE__*/ _react.default.forwardRef((props, parentRe
358
318
  }
359
319
  }));
360
320
  const loadMore = ()=>{
361
- setLoadingData(true);
362
321
  setPage((prevPage)=>prevPage + 1);
363
322
  setPrevPage((prevPage)=>prevPage + 1);
364
323
  };
365
- (0, _react.useEffect)(()=>{
366
- if (!disabled) {
367
- fetch();
324
+ const getCurrentValues = ()=>{
325
+ let rv = null;
326
+ switch(multiple){
327
+ case true:
328
+ rv = getMultipleDisplayedValues();
329
+ break;
330
+ default:
331
+ rv = getSingleDisplayedValue();
332
+ return rv;
368
333
  }
369
- }, []);
370
- (0, _react.useEffect)(()=>{
371
- if (data && !isLastPage && prevPage < page) {
372
- //raaya todo: this is too messy clean it
373
- const newOptions = variables.method_name == 'workspace' ? data.workspace[search_path === null || search_path === void 0 ? void 0 : search_path.split('.')[1]] : data[method_name];
374
- if (newOptions.length === 0 || newOptions.length < pageSize) {
375
- setIsLastPage(true);
376
- }
377
- if (reason === 'searched' || reason === 'init') {
378
- setOptions(newOptions);
379
- } else if (reason === 'loaded more') {
380
- setOptions((prevOptions)=>[
381
- ...prevOptions,
382
- ...newOptions
383
- ]);
384
- }
385
- setLoadingData(false);
334
+ return rv;
335
+ };
336
+ const getMultipleDisplayedValues = ()=>{
337
+ let rv = null;
338
+ switch(modal_type){
339
+ case 'chip':
340
+ rv = displayed.map((val, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
341
+ status: val,
342
+ label: (0, _helpers.titleCase)(val),
343
+ variant: "outlined"
344
+ }, i));
345
+ break;
346
+ case 'logo':
347
+ rv = [];
348
+ for (const opt of displayed){
349
+ var _options_find;
350
+ const logo = (_options_find = options.find((opt)=>opt[search_path] === opt || opt.title === opt)) === null || _options_find === void 0 ? void 0 : _options_find.logo;
351
+ rv.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
352
+ children: [
353
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
354
+ icon: `companies/${logo}`,
355
+ width: 70,
356
+ height: 16
357
+ }),
358
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
359
+ sx: {
360
+ marginLeft: '5px'
361
+ },
362
+ variant: "subtitle2",
363
+ color: theme.palette.typography.title,
364
+ children: (0, _helpers.titleCase)(opt)
365
+ })
366
+ ]
367
+ }));
368
+ }
369
+ break;
370
+ default:
371
+ rv = displayed.map((val, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
372
+ variant: "subtitle2",
373
+ color: theme.palette.typography.title,
374
+ children: (0, _helpers.titleCase)(val)
375
+ }, i));
376
+ return rv;
386
377
  }
387
- }, [
388
- data,
389
- reason
390
- ]);
378
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
379
+ direction: 'row',
380
+ sx: {
381
+ maxWidth: 270,
382
+ minWidth: 270,
383
+ overflow: 'hidden',
384
+ flexWrap: 'wrap',
385
+ gap: 1
386
+ },
387
+ children: rv
388
+ });
389
+ };
390
+ const getSingleDisplayedValue = ()=>{
391
+ let rv = null;
392
+ switch(modal_type){
393
+ case 'chip':
394
+ rv = /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxChip.FxChip, {
395
+ status: displayed,
396
+ label: (0, _helpers.titleCase)(displayed),
397
+ variant: "outlined"
398
+ });
399
+ break;
400
+ case 'logo':
401
+ var _options_find;
402
+ const logo = (_options_find = options.find((opt)=>opt[search_path] === displayed || opt.title === displayed)) === null || _options_find === void 0 ? void 0 : _options_find.logo;
403
+ rv = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
404
+ children: [
405
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
406
+ icon: `companies/${logo}`,
407
+ width: 70,
408
+ height: 16
409
+ }),
410
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
411
+ sx: {
412
+ marginLeft: '5px'
413
+ },
414
+ variant: "subtitle2",
415
+ color: theme.palette.typography.title,
416
+ children: (0, _helpers.titleCase)(displayed)
417
+ })
418
+ ]
419
+ });
420
+ break;
421
+ default:
422
+ rv = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
423
+ children: [
424
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
425
+ variant: "subtitle2",
426
+ color: theme.palette.typography.title,
427
+ children: (0, _helpers.titleCase)(displayed)
428
+ }),
429
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.InputWrapper, {
430
+ disabled: disabled,
431
+ sx: {
432
+ width: '100%',
433
+ border: 'none !important',
434
+ outline: 'none !important'
435
+ },
436
+ children: [
437
+ /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
438
+ style: {
439
+ border: 'none',
440
+ outline: 'none'
441
+ },
442
+ autoFocus: true,
443
+ placeholder: "Select an option...",
444
+ onChange: (e)=>{
445
+ handleSearch(e);
446
+ }
447
+ }),
448
+ loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.Loading, {
449
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {})
450
+ })
451
+ ]
452
+ })
453
+ ]
454
+ });
455
+ return rv;
456
+ }
457
+ return rv;
458
+ };
391
459
  return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.Root, {
392
460
  children: [
393
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.InputWrapper, {
394
- disabled: disabled,
461
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
395
462
  sx: {
396
- width: '100%',
397
- border: 'none !important',
398
- outline: 'none !important'
463
+ padding: '5px 0 5px 15px'
399
464
  },
400
- children: [
401
- /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
402
- style: {
403
- border: 'none',
404
- outline: 'none'
405
- },
406
- autoFocus: true,
407
- defaultValue: displayedValue !== null && displayedValue !== void 0 ? displayedValue : '',
408
- placeholder: "Select an option...",
409
- onChange: (e)=>{
410
- handleSearch(e);
411
- }
412
- }),
413
- loadingData && /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.Loading, {
414
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {})
415
- })
416
- ]
465
+ children: getCurrentValues()
417
466
  }),
418
467
  options.length > 0 && !disabled ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.StyledListBox, {
419
468
  sx: _object_spread_props(_object_spread({}, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.menuSx), {
420
469
  '&::-webkit-scrollbar': {
421
- width: '16px',
422
- backgroundColor: '#F5F5F5'
470
+ width: '8px',
471
+ backgroundColor: 'transparent'
423
472
  },
424
473
  '&::-webkit-scrollbar-thumb': {
425
- backgroundColor: '#F5F5F580',
426
- borderRadius: '8px',
427
- border: '4px solid #F5F5F5'
474
+ backgroundColor: '#8B9092',
475
+ borderRadius: '8px'
428
476
  },
429
477
  // To support Firefox
430
478
  scrollbarWidth: 'thin',
431
- scrollbarColor: '#F5F5F580 #F5F5F5',
479
+ scrollbarColor: '#8B9092 transparent',
432
480
  maxHeight: '300px',
433
481
  overflowY: 'auto'
434
482
  }),
435
483
  ref: ref,
436
484
  children: [
437
- handleRenderOptions(),
485
+ handleListOptions(),
438
486
  !isLastPage && /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
439
487
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
440
488
  onClick: ()=>{
package/package.json CHANGED
@@ -70,5 +70,5 @@
70
70
  "require": "./dist/index.js"
71
71
  }
72
72
  },
73
- "version": "0.1.72"
73
+ "version": "0.1.73"
74
74
  }