@visns-studio/visns-components 2.2.12 → 2.3.1

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 (3) hide show
  1. package/components/crm/Field.jsx +120 -111
  2. package/components/crm/auth/Login.jsx +34 -31
  3. package/package.json +3 -3
package/components/crm/Field.jsx CHANGED
@@ -1,19 +1,19 @@
1
- import React, { useState, useEffect } from "react";
2
- import DatePicker from "react-datepicker";
3
- import _ from "lodash";
4
- import ReactQuill from "react-quill";
5
- import Toggle from "react-toggle";
6
- import { NumericFormat, PatternFormat } from "react-number-format";
7
-
8
- import CustomFetch from "./Fetch";
9
- import Select from "./Select";
10
- import VisnsAsyncSelect from "./AsyncSelect";
11
- import MultiSelect from "./MultiSelect";
12
- import VisnsAutocomplete from "./Autocomplete";
13
-
14
- import "react-toggle/style.css";
15
- import "react-quill/dist/quill.snow.css";
16
- import "react-datepicker/dist/react-datepicker.css";
1
+ import React, { useState, useEffect } from 'react';
2
+ import DatePicker from 'react-datepicker';
3
+ import _ from 'lodash';
4
+ import ReactQuill from 'react-quill';
5
+ import Toggle from 'react-toggle';
6
+ import { NumericFormat, PatternFormat } from 'react-number-format';
7
+
8
+ import CustomFetch from './Fetch';
9
+ import Select from './Select';
10
+ import VisnsAsyncSelect from './AsyncSelect';
11
+ import MultiSelect from './MultiSelect';
12
+ import VisnsAutocomplete from './Autocomplete';
13
+
14
+ import 'react-toggle/style.css';
15
+ import 'react-quill/dist/quill.snow.css';
16
+ import 'react-datepicker/dist/react-datepicker.css';
17
17
 
18
18
  function Field({
19
19
  childDropdownCallback,
@@ -33,7 +33,7 @@ function Field({
33
33
  const [options, setOptions] = useState([]);
34
34
  const [dataOptions, setDataOptions] = useState([]);
35
35
  const [formItemStyle, setFormItemStyle] = useState({});
36
- const [formItemClass, setFormItemClass] = useState("formItem");
36
+ const [formItemClass, setFormItemClass] = useState('formItem');
37
37
 
38
38
  useEffect(() => {
39
39
  const fetchOptions = () => {
@@ -44,7 +44,7 @@ function Field({
44
44
  };
45
45
  }
46
46
 
47
- CustomFetch(settings.url, "POST", filter, function (result) {
47
+ CustomFetch(settings.url, 'POST', filter, function (result) {
48
48
  setOptions(result.data);
49
49
 
50
50
  let dataArray = [];
@@ -56,8 +56,8 @@ function Field({
56
56
  let modifiedObject = {};
57
57
 
58
58
  Object.keys(_tempObject).forEach(function (c) {
59
- if (c !== "id" && c !== "label") {
60
- modifiedObject["data-" + c] = _tempObject[c];
59
+ if (c !== 'id' && c !== 'label') {
60
+ modifiedObject['data-' + c] = _tempObject[c];
61
61
  }
62
62
  });
63
63
 
@@ -72,21 +72,21 @@ function Field({
72
72
  };
73
73
 
74
74
  switch (settings.type) {
75
- case "hidden":
75
+ case 'hidden':
76
76
  setFormItemStyle({
77
- display: "none",
77
+ display: 'none',
78
78
  });
79
79
  break;
80
- case "dropdown-ajax":
81
- case "multi-dropdown-ajax":
80
+ case 'dropdown-ajax':
81
+ case 'multi-dropdown-ajax':
82
82
  fetchOptions();
83
83
  break;
84
84
  default:
85
85
  break;
86
86
  }
87
87
 
88
- if (settings.size === "full") {
89
- setFormItemClass("formItem fwItem");
88
+ if (settings.size === 'full') {
89
+ setFormItemClass('formItem fwItem');
90
90
  }
91
91
  }, [settings]);
92
92
 
@@ -113,7 +113,7 @@ function Field({
113
113
 
114
114
  CustomFetch(
115
115
  a.url,
116
- "POST",
116
+ 'POST',
117
117
  filter,
118
118
  function (result) {
119
119
  childDropdownCallback({
@@ -135,7 +135,7 @@ function Field({
135
135
 
136
136
  CustomFetch(
137
137
  settings.child.url,
138
- "POST",
138
+ 'POST',
139
139
  filter,
140
140
  function (result) {
141
141
  childDropdownCallback({
@@ -164,8 +164,8 @@ function Field({
164
164
  let modifiedObject = {};
165
165
 
166
166
  Object.keys(_tempObject).forEach(function (c) {
167
- if (c !== "id" && c !== "label") {
168
- modifiedObject["data-" + c] = _tempObject[c];
167
+ if (c !== 'id' && c !== 'label') {
168
+ modifiedObject['data-' + c] = _tempObject[c];
169
169
  }
170
170
  });
171
171
 
@@ -185,19 +185,19 @@ function Field({
185
185
  const renderLabel = () => {
186
186
  if (
187
187
  [
188
- "address",
189
- "date",
190
- "datetime",
191
- "checkbox",
192
- "multi-dropdown",
193
- "multi-dropdown-ajax",
194
- "async-dropdown-ajax",
195
- "richeditor",
188
+ 'address',
189
+ 'date',
190
+ 'datetime',
191
+ 'checkbox',
192
+ 'multi-dropdown',
193
+ 'multi-dropdown-ajax',
194
+ 'async-dropdown-ajax',
195
+ 'richeditor',
196
196
  ].includes(settings.type)
197
197
  ) {
198
198
  return (
199
199
  <span className="fi__span prefocus">
200
- {settings.label} {settings.required ? "*" : ""}
200
+ {settings.label} {settings.required ? '*' : ''}
201
201
  </span>
202
202
  );
203
203
  }
@@ -205,9 +205,9 @@ function Field({
205
205
 
206
206
  const renderInput = () => {
207
207
  switch (settings.type) {
208
- case "text":
209
- case "json":
210
- case "password":
208
+ case 'text':
209
+ case 'json':
210
+ case 'password':
211
211
  return (
212
212
  <input
213
213
  type={settings.type}
@@ -216,14 +216,14 @@ function Field({
216
216
  placeholder=" "
217
217
  onChange={onChange}
218
218
  value={
219
- inputValue && inputValue !== "null"
219
+ inputValue && inputValue !== 'null'
220
220
  ? inputValue
221
- : ""
221
+ : ''
222
222
  }
223
223
  />
224
224
  );
225
- case "phone":
226
- case "mobile":
225
+ case 'phone':
226
+ case 'mobile':
227
227
  return (
228
228
  <PatternFormat
229
229
  className={inputClass[settings.id]}
@@ -231,20 +231,20 @@ function Field({
231
231
  onChangeNumberFormat(values, settings.id);
232
232
  }}
233
233
  format={
234
- settings.type === "phone"
235
- ? "## #### ####"
236
- : "#### ### ###"
234
+ settings.type === 'phone'
235
+ ? '## #### ####'
236
+ : '#### ### ###'
237
237
  }
238
238
  allowEmptyFormatting
239
239
  mask="_"
240
240
  value={
241
- inputValue && inputValue !== "null"
241
+ inputValue && inputValue !== 'null'
242
242
  ? inputValue
243
- : ""
243
+ : ''
244
244
  }
245
245
  />
246
246
  );
247
- case "currency":
247
+ case 'currency':
248
248
  return (
249
249
  <NumericFormat
250
250
  data-name={settings.id}
@@ -253,16 +253,16 @@ function Field({
253
253
  onChangeNumberFormat(values, settings.id);
254
254
  }}
255
255
  thousandSeparator={true}
256
- prefix={"$"}
256
+ prefix={'$'}
257
257
  value={
258
- inputValue && inputValue !== "null"
258
+ inputValue && inputValue !== 'null'
259
259
  ? inputValue
260
- : ""
260
+ : ''
261
261
  }
262
262
  />
263
263
  );
264
- case "number":
265
- case "decimal":
264
+ case 'number':
265
+ case 'decimal':
266
266
  return (
267
267
  <NumericFormat
268
268
  data-name={settings.id}
@@ -271,38 +271,38 @@ function Field({
271
271
  onChangeNumberFormat(values, settings.id);
272
272
  }}
273
273
  thousandSeparator={
274
- settings.hasOwnProperty("thousandSeperator")
274
+ settings.hasOwnProperty('thousandSeperator')
275
275
  ? settings.thousandSeperator
276
276
  : true
277
277
  }
278
278
  decimalSeparator={
279
- settings.type === "decimal" ? "." : undefined
279
+ settings.type === 'decimal' ? '.' : undefined
280
280
  }
281
281
  decimalScale={
282
- settings.type === "decimal" ? 2 : undefined
282
+ settings.type === 'decimal' ? 2 : undefined
283
283
  }
284
284
  value={
285
- inputValue && inputValue !== "null"
285
+ inputValue && inputValue !== 'null'
286
286
  ? inputValue
287
- : ""
287
+ : ''
288
288
  }
289
289
  />
290
290
  );
291
- case "textarea":
291
+ case 'textarea':
292
292
  return (
293
293
  <textarea
294
294
  data-name={settings.id}
295
295
  className={inputClass[settings.id]}
296
296
  onChange={onChange}
297
297
  value={
298
- inputValue && inputValue !== "null"
298
+ inputValue && inputValue !== 'null'
299
299
  ? inputValue
300
- : ""
300
+ : ''
301
301
  }
302
- style={{ height: "200px" }}
302
+ style={{ height: '200px' }}
303
303
  ></textarea>
304
304
  );
305
- case "address":
305
+ case 'address':
306
306
  return (
307
307
  <VisnsAutocomplete
308
308
  api="pk.eyJ1IjoidmlzbnMtc3R1ZGlvIiwiYSI6ImNrbGlraW5vZDBhMDYycHBsdmk5b3ljbGQifQ.ZGUBk0PWac5GahUeVHdTpg"
@@ -314,37 +314,46 @@ function Field({
314
314
  style={style}
315
315
  />
316
316
  );
317
- case "dropdown":
318
- case "dropdown-ajax":
317
+ case 'dropdown':
318
+ case 'dropdown-ajax':
319
319
  return (
320
320
  <Select
321
321
  settings={settings}
322
322
  className={inputClass[settings.id]}
323
323
  onChange={onChange}
324
- inputValue={inputValue === null ? "" : inputValue}
324
+ inputValue={inputValue === null ? '' : inputValue}
325
325
  options={
326
- settings.type === "dropdown"
326
+ settings.type === 'dropdown'
327
327
  ? settings.options
328
328
  : options
329
329
  }
330
330
  dataOptions={dataOptions}
331
331
  />
332
332
  );
333
- case "multi-dropdown":
334
- case "multi-dropdown-ajax":
333
+ case 'line-break':
334
+ return (
335
+ <div className="formbreak">
336
+ <span>
337
+ {settings.label}{' '}
338
+ {settings.required === true ? '*' : ''}
339
+ </span>
340
+ </div>
341
+ );
342
+ case 'multi-dropdown':
343
+ case 'multi-dropdown-ajax':
335
344
  return (
336
345
  <MultiSelect
337
346
  settings={settings}
338
347
  className={inputClass[settings.id]}
339
348
  multi={
340
- settings.hasOwnProperty("multi")
349
+ settings.hasOwnProperty('multi')
341
350
  ? settings.multi
342
351
  : false
343
352
  }
344
353
  onChange={onChangeSelect}
345
- inputValue={inputValue === null ? "" : inputValue}
354
+ inputValue={inputValue === null ? '' : inputValue}
346
355
  options={
347
- settings.type === "multi-dropdown"
356
+ settings.type === 'multi-dropdown'
348
357
  ? settings.options
349
358
  : options
350
359
  }
@@ -352,23 +361,23 @@ function Field({
352
361
  style={style}
353
362
  />
354
363
  );
355
- case "async-dropdown-ajax":
364
+ case 'async-dropdown-ajax':
356
365
  return (
357
366
  <VisnsAsyncSelect
358
367
  settings={settings}
359
368
  className={inputClass[settings.id]}
360
369
  multi={
361
- settings.hasOwnProperty("multi")
370
+ settings.hasOwnProperty('multi')
362
371
  ? settings.multi
363
372
  : false
364
373
  }
365
374
  onChange={onChangeSelect}
366
- inputValue={inputValue === null ? "" : inputValue}
375
+ inputValue={inputValue === null ? '' : inputValue}
367
376
  options={options}
368
377
  dataOptions={dataOptions}
369
378
  />
370
379
  );
371
- case "file":
380
+ case 'file':
372
381
  return (
373
382
  <input
374
383
  type="file"
@@ -377,7 +386,7 @@ function Field({
377
386
  onChange={onChange}
378
387
  />
379
388
  );
380
- case "richeditor":
389
+ case 'richeditor':
381
390
  return (
382
391
  <ReactQuill
383
392
  theme="snow"
@@ -385,32 +394,32 @@ function Field({
385
394
  onChange={(value, event) => {
386
395
  onChangeRicheditor(event, value, settings.id);
387
396
  }}
388
- value={inputValue || ""}
397
+ value={inputValue || ''}
389
398
  />
390
399
  );
391
400
  default:
392
- return "";
401
+ return '';
393
402
  }
394
403
  };
395
404
 
396
405
  const renderFieldLabel = () => {
397
406
  if (
398
407
  ![
399
- "address",
400
- "date",
401
- "datetime",
402
- "line-break",
403
- "checkbox",
404
- "multi-dropdown",
405
- "multi-dropdown-ajax",
406
- "async-dropdown-ajax",
407
- "toggle",
408
- "richeditor",
408
+ 'address',
409
+ 'date',
410
+ 'datetime',
411
+ 'line-break',
412
+ 'checkbox',
413
+ 'multi-dropdown',
414
+ 'multi-dropdown-ajax',
415
+ 'async-dropdown-ajax',
416
+ 'toggle',
417
+ 'richeditor',
409
418
  ].includes(settings.type)
410
419
  ) {
411
420
  return (
412
421
  <span className="fi__span">
413
- {settings.label} {settings.required ? "*" : ""}
422
+ {settings.label} {settings.required ? '*' : ''}
414
423
  </span>
415
424
  );
416
425
  }
@@ -418,37 +427,37 @@ function Field({
418
427
 
419
428
  const renderAdditionalContainer = () => {
420
429
  switch (settings.type) {
421
- case "date":
422
- case "datetime":
423
- case "time":
430
+ case 'date':
431
+ case 'datetime':
432
+ case 'time':
424
433
  return (
425
434
  <DatePicker
426
435
  dateFormat={
427
436
  settings.format
428
437
  ? settings.format
429
- : settings.type === "datetime"
430
- ? "dd-MM-yyyy hh:mm aa"
431
- : "dd-MM-yyyy"
438
+ : settings.type === 'datetime'
439
+ ? 'dd-MM-yyyy hh:mm aa'
440
+ : 'dd-MM-yyyy'
432
441
  }
433
442
  isClearable
434
443
  className={inputClass[settings.id]}
435
- selected={inputValue || ""}
444
+ selected={inputValue || ''}
436
445
  showMonthDropdown
437
446
  showYearDropdown
438
447
  scrollableYearDropdown
439
448
  onChange={(date) => onChangeDate(date, settings.id)}
440
- showTimeSelect={settings.type === "datetime"}
441
- showTimeSelectOnly={settings.type === "time"}
449
+ showTimeSelect={settings.type === 'datetime'}
450
+ showTimeSelectOnly={settings.type === 'time'}
442
451
  timeIntervals={
443
- settings.type === "time" ? 15 : undefined
452
+ settings.type === 'time' ? 15 : undefined
444
453
  }
445
454
  timeCaption={
446
- settings.type === "time" ? "Time" : undefined
455
+ settings.type === 'time' ? 'Time' : undefined
447
456
  }
448
457
  shouldCloseOnSelect={true}
449
458
  />
450
459
  );
451
- case "toggle":
460
+ case 'toggle':
452
461
  return (
453
462
  <div>
454
463
  <Toggle
@@ -457,13 +466,13 @@ function Field({
457
466
  data-show={
458
467
  settings.show
459
468
  ? JSON.stringify(settings.show)
460
- : ""
469
+ : ''
461
470
  }
462
471
  checked={
463
472
  inputValue !== undefined
464
- ? inputValue === ""
473
+ ? inputValue === ''
465
474
  ? false
466
- : inputValue === "on"
475
+ : inputValue === 'on'
467
476
  ? false
468
477
  : inputValue
469
478
  : false
@@ -471,12 +480,12 @@ function Field({
471
480
  onChange={onChangeToggle}
472
481
  />
473
482
  <span className="fi__toggletxt">
474
- {settings.label} {settings.required ? "*" : ""}
483
+ {settings.label} {settings.required ? '*' : ''}
475
484
  </span>
476
485
  </div>
477
486
  );
478
487
  default:
479
- return "";
488
+ return '';
480
489
  }
481
490
  };
482
491
 
package/components/crm/auth/Login.jsx CHANGED
@@ -23,42 +23,45 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
23
23
 
24
24
  const renderSsoButton = () => {
25
25
  let content =
26
- providers.length > 0 ? (
26
+ providers && providers.length > 0 ? (
27
27
  <div className="formItem fwItem lastItem forgotten">
28
28
  <span>OR</span>
29
29
  </div>
30
30
  ) : null;
31
31
 
32
- providers.forEach((provider) => {
33
- switch (provider) {
34
- case 'azure':
35
- content = (
36
- <>
37
- {content}
38
- <div className="formItem fwItem lastItem forgotten">
39
- <button
40
- className="btn"
41
- onClick={(e) => {
42
- e.preventDefault();
43
-
44
- window.location.href = '/auth/azure';
45
- }}
46
- >
47
- <img
48
- src={
49
- 'https://d16lktya8ojp5z.cloudfront.net/generic/images/microsoft.png'
50
- }
51
- width="13px"
52
- height="13px"
53
- />{' '}
54
- Microsoft
55
- </button>
56
- </div>
57
- </>
58
- );
59
- break;
60
- }
61
- });
32
+ if (providers) {
33
+ providers.forEach((provider) => {
34
+ switch (provider) {
35
+ case 'azure':
36
+ content = (
37
+ <>
38
+ {content}
39
+ <div className="formItem fwItem lastItem forgotten">
40
+ <button
41
+ className="btn"
42
+ onClick={(e) => {
43
+ e.preventDefault();
44
+
45
+ window.location.href =
46
+ '/auth/azure';
47
+ }}
48
+ >
49
+ <img
50
+ src={
51
+ 'https://d16lktya8ojp5z.cloudfront.net/generic/images/microsoft.png'
52
+ }
53
+ width="13px"
54
+ height="13px"
55
+ />{' '}
56
+ Microsoft
57
+ </button>
58
+ </div>
59
+ </>
60
+ );
61
+ break;
62
+ }
63
+ });
64
+ }
62
65
 
63
66
  return content;
64
67
  };
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "akar-icons": "^1.9.28",
6
6
  "awesome-debounce-promise": "^2.1.0",
7
7
  "axios": "^1.4.0",
8
- "framer-motion": "^10.15.0",
8
+ "framer-motion": "^10.15.1",
9
9
  "html-react-parser": "^4.2.0",
10
10
  "lodash": "^4.17.21",
11
11
  "moment": "^2.29.4",
@@ -28,7 +28,7 @@
28
28
  "react-tooltip": "^5.20.0",
29
29
  "react-window": "^1.8.9",
30
30
  "reactjs-popup": "^2.0.5",
31
- "validator": "^13.9.0",
31
+ "validator": "^13.11.0",
32
32
  "yarn": "^1.22.19"
33
33
  },
34
34
  "devDependecies": {
@@ -40,7 +40,7 @@
40
40
  "react-dom": "^17.0.1"
41
41
  },
42
42
  "name": "@visns-studio/visns-components",
43
- "version": "2.2.12",
43
+ "version": "2.3.1",
44
44
  "description": "Various packages to assist in the development of our Custom Applications.",
45
45
  "main": "index.js",
46
46
  "scripts": {