@visns-studio/visns-components 2.3.0 → 2.3.2

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 +191 -112
  2. package/components/crm/Form.jsx +10 -0
  3. package/package.json +4 -3
package/components/crm/Field.jsx CHANGED
@@ -1,25 +1,27 @@
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 { BlockPicker } from 'react-color';
7
+ import { NumericFormat, PatternFormat } from 'react-number-format';
8
+
9
+ import CustomFetch from './Fetch';
10
+ import Select from './Select';
11
+ import VisnsAsyncSelect from './AsyncSelect';
12
+ import MultiSelect from './MultiSelect';
13
+ import VisnsAutocomplete from './Autocomplete';
14
+
15
+ import 'react-toggle/style.css';
16
+ import 'react-quill/dist/quill.snow.css';
17
+ import 'react-datepicker/dist/react-datepicker.css';
17
18
 
18
19
  function Field({
19
20
  childDropdownCallback,
20
21
  inputValue,
21
22
  inputClass,
22
23
  onChange,
24
+ onChangeColour,
23
25
  onChangeDate,
24
26
  onChangeSelect,
25
27
  onChangeRicheditor,
@@ -30,10 +32,25 @@ function Field({
30
32
  settings,
31
33
  style,
32
34
  }) {
33
- const [options, setOptions] = useState([]);
35
+ const [colorPickerShow, setColorPickerShow] = useState(false);
34
36
  const [dataOptions, setDataOptions] = useState([]);
35
37
  const [formItemStyle, setFormItemStyle] = useState({});
36
- const [formItemClass, setFormItemClass] = useState("formItem");
38
+ const [formItemClass, setFormItemClass] = useState('formItem');
39
+ const [options, setOptions] = useState([]);
40
+
41
+ const cover = {
42
+ position: 'fixed',
43
+ top: '0px',
44
+ right: '0px',
45
+ bottom: '0px',
46
+ left: '0px',
47
+ };
48
+ const popover = {
49
+ position: 'absolute',
50
+ zIndex: '2',
51
+ left: '20px',
52
+ marginTop: '6px',
53
+ };
37
54
 
38
55
  useEffect(() => {
39
56
  const fetchOptions = () => {
@@ -44,7 +61,7 @@ function Field({
44
61
  };
45
62
  }
46
63
 
47
- CustomFetch(settings.url, "POST", filter, function (result) {
64
+ CustomFetch(settings.url, 'POST', filter, function (result) {
48
65
  setOptions(result.data);
49
66
 
50
67
  let dataArray = [];
@@ -56,8 +73,8 @@ function Field({
56
73
  let modifiedObject = {};
57
74
 
58
75
  Object.keys(_tempObject).forEach(function (c) {
59
- if (c !== "id" && c !== "label") {
60
- modifiedObject["data-" + c] = _tempObject[c];
76
+ if (c !== 'id' && c !== 'label') {
77
+ modifiedObject['data-' + c] = _tempObject[c];
61
78
  }
62
79
  });
63
80
 
@@ -72,21 +89,21 @@ function Field({
72
89
  };
73
90
 
74
91
  switch (settings.type) {
75
- case "hidden":
92
+ case 'hidden':
76
93
  setFormItemStyle({
77
- display: "none",
94
+ display: 'none',
78
95
  });
79
96
  break;
80
- case "dropdown-ajax":
81
- case "multi-dropdown-ajax":
97
+ case 'dropdown-ajax':
98
+ case 'multi-dropdown-ajax':
82
99
  fetchOptions();
83
100
  break;
84
101
  default:
85
102
  break;
86
103
  }
87
104
 
88
- if (settings.size === "full") {
89
- setFormItemClass("formItem fwItem");
105
+ if (settings.size === 'full') {
106
+ setFormItemClass('formItem fwItem');
90
107
  }
91
108
  }, [settings]);
92
109
 
@@ -113,7 +130,7 @@ function Field({
113
130
 
114
131
  CustomFetch(
115
132
  a.url,
116
- "POST",
133
+ 'POST',
117
134
  filter,
118
135
  function (result) {
119
136
  childDropdownCallback({
@@ -135,7 +152,7 @@ function Field({
135
152
 
136
153
  CustomFetch(
137
154
  settings.child.url,
138
- "POST",
155
+ 'POST',
139
156
  filter,
140
157
  function (result) {
141
158
  childDropdownCallback({
@@ -164,8 +181,8 @@ function Field({
164
181
  let modifiedObject = {};
165
182
 
166
183
  Object.keys(_tempObject).forEach(function (c) {
167
- if (c !== "id" && c !== "label") {
168
- modifiedObject["data-" + c] = _tempObject[c];
184
+ if (c !== 'id' && c !== 'label') {
185
+ modifiedObject['data-' + c] = _tempObject[c];
169
186
  }
170
187
  });
171
188
 
@@ -185,19 +202,20 @@ function Field({
185
202
  const renderLabel = () => {
186
203
  if (
187
204
  [
188
- "address",
189
- "date",
190
- "datetime",
191
- "checkbox",
192
- "multi-dropdown",
193
- "multi-dropdown-ajax",
194
- "async-dropdown-ajax",
195
- "richeditor",
205
+ 'address',
206
+ 'date',
207
+ 'datetime',
208
+ 'checkbox',
209
+ 'multi-dropdown',
210
+ 'multi-dropdown-ajax',
211
+ 'async-dropdown-ajax',
212
+ 'richeditor',
213
+ 'colour',
196
214
  ].includes(settings.type)
197
215
  ) {
198
216
  return (
199
217
  <span className="fi__span prefocus">
200
- {settings.label} {settings.required ? "*" : ""}
218
+ {settings.label} {settings.required ? '*' : ''}
201
219
  </span>
202
220
  );
203
221
  }
@@ -205,9 +223,9 @@ function Field({
205
223
 
206
224
  const renderInput = () => {
207
225
  switch (settings.type) {
208
- case "text":
209
- case "json":
210
- case "password":
226
+ case 'text':
227
+ case 'json':
228
+ case 'password':
211
229
  return (
212
230
  <input
213
231
  type={settings.type}
@@ -216,14 +234,14 @@ function Field({
216
234
  placeholder=" "
217
235
  onChange={onChange}
218
236
  value={
219
- inputValue && inputValue !== "null"
237
+ inputValue && inputValue !== 'null'
220
238
  ? inputValue
221
- : ""
239
+ : ''
222
240
  }
223
241
  />
224
242
  );
225
- case "phone":
226
- case "mobile":
243
+ case 'phone':
244
+ case 'mobile':
227
245
  return (
228
246
  <PatternFormat
229
247
  className={inputClass[settings.id]}
@@ -231,20 +249,20 @@ function Field({
231
249
  onChangeNumberFormat(values, settings.id);
232
250
  }}
233
251
  format={
234
- settings.type === "phone"
235
- ? "## #### ####"
236
- : "#### ### ###"
252
+ settings.type === 'phone'
253
+ ? '## #### ####'
254
+ : '#### ### ###'
237
255
  }
238
256
  allowEmptyFormatting
239
257
  mask="_"
240
258
  value={
241
- inputValue && inputValue !== "null"
259
+ inputValue && inputValue !== 'null'
242
260
  ? inputValue
243
- : ""
261
+ : ''
244
262
  }
245
263
  />
246
264
  );
247
- case "currency":
265
+ case 'currency':
248
266
  return (
249
267
  <NumericFormat
250
268
  data-name={settings.id}
@@ -253,16 +271,16 @@ function Field({
253
271
  onChangeNumberFormat(values, settings.id);
254
272
  }}
255
273
  thousandSeparator={true}
256
- prefix={"$"}
274
+ prefix={'$'}
257
275
  value={
258
- inputValue && inputValue !== "null"
276
+ inputValue && inputValue !== 'null'
259
277
  ? inputValue
260
- : ""
278
+ : ''
261
279
  }
262
280
  />
263
281
  );
264
- case "number":
265
- case "decimal":
282
+ case 'number':
283
+ case 'decimal':
266
284
  return (
267
285
  <NumericFormat
268
286
  data-name={settings.id}
@@ -271,38 +289,38 @@ function Field({
271
289
  onChangeNumberFormat(values, settings.id);
272
290
  }}
273
291
  thousandSeparator={
274
- settings.hasOwnProperty("thousandSeperator")
292
+ settings.hasOwnProperty('thousandSeperator')
275
293
  ? settings.thousandSeperator
276
294
  : true
277
295
  }
278
296
  decimalSeparator={
279
- settings.type === "decimal" ? "." : undefined
297
+ settings.type === 'decimal' ? '.' : undefined
280
298
  }
281
299
  decimalScale={
282
- settings.type === "decimal" ? 2 : undefined
300
+ settings.type === 'decimal' ? 2 : undefined
283
301
  }
284
302
  value={
285
- inputValue && inputValue !== "null"
303
+ inputValue && inputValue !== 'null'
286
304
  ? inputValue
287
- : ""
305
+ : ''
288
306
  }
289
307
  />
290
308
  );
291
- case "textarea":
309
+ case 'textarea':
292
310
  return (
293
311
  <textarea
294
312
  data-name={settings.id}
295
313
  className={inputClass[settings.id]}
296
314
  onChange={onChange}
297
315
  value={
298
- inputValue && inputValue !== "null"
316
+ inputValue && inputValue !== 'null'
299
317
  ? inputValue
300
- : ""
318
+ : ''
301
319
  }
302
- style={{ height: "200px" }}
320
+ style={{ height: '200px' }}
303
321
  ></textarea>
304
322
  );
305
- case "address":
323
+ case 'address':
306
324
  return (
307
325
  <VisnsAutocomplete
308
326
  api="pk.eyJ1IjoidmlzbnMtc3R1ZGlvIiwiYSI6ImNrbGlraW5vZDBhMDYycHBsdmk5b3ljbGQifQ.ZGUBk0PWac5GahUeVHdTpg"
@@ -314,37 +332,97 @@ function Field({
314
332
  style={style}
315
333
  />
316
334
  );
317
- case "dropdown":
318
- case "dropdown-ajax":
335
+ case 'dropdown':
336
+ case 'dropdown-ajax':
319
337
  return (
320
338
  <Select
321
339
  settings={settings}
322
340
  className={inputClass[settings.id]}
323
341
  onChange={onChange}
324
- inputValue={inputValue === null ? "" : inputValue}
342
+ inputValue={inputValue === null ? '' : inputValue}
325
343
  options={
326
- settings.type === "dropdown"
344
+ settings.type === 'dropdown'
327
345
  ? settings.options
328
346
  : options
329
347
  }
330
348
  dataOptions={dataOptions}
331
349
  />
332
350
  );
333
- case "multi-dropdown":
334
- case "multi-dropdown-ajax":
351
+ case 'line-break':
352
+ return (
353
+ <div className="formbreak">
354
+ <span>
355
+ {settings.label}{' '}
356
+ {settings.required === true ? '*' : ''}
357
+ </span>
358
+ </div>
359
+ );
360
+ case 'colour':
361
+ return (
362
+ <div className="cpicker">
363
+ <div
364
+ className="cpicker__box"
365
+ style={
366
+ inputValue && inputValue !== 'null'
367
+ ? { background: inputValue }
368
+ : {}
369
+ }
370
+ ></div>
371
+ <div className="cpicker__btn">
372
+ <button
373
+ onClick={(e) => {
374
+ e.preventDefault();
375
+
376
+ setColorPickerShow(
377
+ colorPickerShow === true ? false : true
378
+ );
379
+ }}
380
+ >
381
+ Pick Color
382
+ </button>
383
+ {colorPickerShow === true ? (
384
+ <div style={popover}>
385
+ <div
386
+ style={cover}
387
+ onClick={() => {
388
+ setColorPickerShow(false);
389
+ }}
390
+ />
391
+
392
+ <BlockPicker
393
+ color={
394
+ inputValue && inputValue !== 'null'
395
+ ? inputValue
396
+ : ''
397
+ }
398
+ onChangeComplete={(color, event) => {
399
+ onChangeColour(
400
+ event,
401
+ color,
402
+ settings.id
403
+ );
404
+ }}
405
+ />
406
+ </div>
407
+ ) : null}
408
+ </div>
409
+ </div>
410
+ );
411
+ case 'multi-dropdown':
412
+ case 'multi-dropdown-ajax':
335
413
  return (
336
414
  <MultiSelect
337
415
  settings={settings}
338
416
  className={inputClass[settings.id]}
339
417
  multi={
340
- settings.hasOwnProperty("multi")
418
+ settings.hasOwnProperty('multi')
341
419
  ? settings.multi
342
420
  : false
343
421
  }
344
422
  onChange={onChangeSelect}
345
- inputValue={inputValue === null ? "" : inputValue}
423
+ inputValue={inputValue === null ? '' : inputValue}
346
424
  options={
347
- settings.type === "multi-dropdown"
425
+ settings.type === 'multi-dropdown'
348
426
  ? settings.options
349
427
  : options
350
428
  }
@@ -352,23 +430,23 @@ function Field({
352
430
  style={style}
353
431
  />
354
432
  );
355
- case "async-dropdown-ajax":
433
+ case 'async-dropdown-ajax':
356
434
  return (
357
435
  <VisnsAsyncSelect
358
436
  settings={settings}
359
437
  className={inputClass[settings.id]}
360
438
  multi={
361
- settings.hasOwnProperty("multi")
439
+ settings.hasOwnProperty('multi')
362
440
  ? settings.multi
363
441
  : false
364
442
  }
365
443
  onChange={onChangeSelect}
366
- inputValue={inputValue === null ? "" : inputValue}
444
+ inputValue={inputValue === null ? '' : inputValue}
367
445
  options={options}
368
446
  dataOptions={dataOptions}
369
447
  />
370
448
  );
371
- case "file":
449
+ case 'file':
372
450
  return (
373
451
  <input
374
452
  type="file"
@@ -377,7 +455,7 @@ function Field({
377
455
  onChange={onChange}
378
456
  />
379
457
  );
380
- case "richeditor":
458
+ case 'richeditor':
381
459
  return (
382
460
  <ReactQuill
383
461
  theme="snow"
@@ -385,32 +463,33 @@ function Field({
385
463
  onChange={(value, event) => {
386
464
  onChangeRicheditor(event, value, settings.id);
387
465
  }}
388
- value={inputValue || ""}
466
+ value={inputValue || ''}
389
467
  />
390
468
  );
391
469
  default:
392
- return "";
470
+ return '';
393
471
  }
394
472
  };
395
473
 
396
474
  const renderFieldLabel = () => {
397
475
  if (
398
476
  ![
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",
477
+ 'address',
478
+ 'date',
479
+ 'datetime',
480
+ 'line-break',
481
+ 'checkbox',
482
+ 'multi-dropdown',
483
+ 'multi-dropdown-ajax',
484
+ 'async-dropdown-ajax',
485
+ 'toggle',
486
+ 'richeditor',
487
+ 'colour',
409
488
  ].includes(settings.type)
410
489
  ) {
411
490
  return (
412
491
  <span className="fi__span">
413
- {settings.label} {settings.required ? "*" : ""}
492
+ {settings.label} {settings.required ? '*' : ''}
414
493
  </span>
415
494
  );
416
495
  }
@@ -418,37 +497,37 @@ function Field({
418
497
 
419
498
  const renderAdditionalContainer = () => {
420
499
  switch (settings.type) {
421
- case "date":
422
- case "datetime":
423
- case "time":
500
+ case 'date':
501
+ case 'datetime':
502
+ case 'time':
424
503
  return (
425
504
  <DatePicker
426
505
  dateFormat={
427
506
  settings.format
428
507
  ? settings.format
429
- : settings.type === "datetime"
430
- ? "dd-MM-yyyy hh:mm aa"
431
- : "dd-MM-yyyy"
508
+ : settings.type === 'datetime'
509
+ ? 'dd-MM-yyyy hh:mm aa'
510
+ : 'dd-MM-yyyy'
432
511
  }
433
512
  isClearable
434
513
  className={inputClass[settings.id]}
435
- selected={inputValue || ""}
514
+ selected={inputValue || ''}
436
515
  showMonthDropdown
437
516
  showYearDropdown
438
517
  scrollableYearDropdown
439
518
  onChange={(date) => onChangeDate(date, settings.id)}
440
- showTimeSelect={settings.type === "datetime"}
441
- showTimeSelectOnly={settings.type === "time"}
519
+ showTimeSelect={settings.type === 'datetime'}
520
+ showTimeSelectOnly={settings.type === 'time'}
442
521
  timeIntervals={
443
- settings.type === "time" ? 15 : undefined
522
+ settings.type === 'time' ? 15 : undefined
444
523
  }
445
524
  timeCaption={
446
- settings.type === "time" ? "Time" : undefined
525
+ settings.type === 'time' ? 'Time' : undefined
447
526
  }
448
527
  shouldCloseOnSelect={true}
449
528
  />
450
529
  );
451
- case "toggle":
530
+ case 'toggle':
452
531
  return (
453
532
  <div>
454
533
  <Toggle
@@ -457,13 +536,13 @@ function Field({
457
536
  data-show={
458
537
  settings.show
459
538
  ? JSON.stringify(settings.show)
460
- : ""
539
+ : ''
461
540
  }
462
541
  checked={
463
542
  inputValue !== undefined
464
- ? inputValue === ""
543
+ ? inputValue === ''
465
544
  ? false
466
- : inputValue === "on"
545
+ : inputValue === 'on'
467
546
  ? false
468
547
  : inputValue
469
548
  : false
@@ -471,12 +550,12 @@ function Field({
471
550
  onChange={onChangeToggle}
472
551
  />
473
552
  <span className="fi__toggletxt">
474
- {settings.label} {settings.required ? "*" : ""}
553
+ {settings.label} {settings.required ? '*' : ''}
475
554
  </span>
476
555
  </div>
477
556
  );
478
557
  default:
479
- return "";
558
+ return '';
480
559
  }
481
560
  };
482
561
 
package/components/crm/Form.jsx CHANGED
@@ -117,6 +117,15 @@ function Form(props) {
117
117
  }
118
118
  };
119
119
 
120
+ const handleChangeColour = (event, color, id) => {
121
+ if (color && event && id) {
122
+ setFormData((prevState) => ({
123
+ ...prevState,
124
+ [id]: color.hex,
125
+ }));
126
+ }
127
+ };
128
+
120
129
  const handleChangeNumberFormat = (value, id) => {
121
130
  setFormData((prevState) => ({
122
131
  ...prevState,
@@ -924,6 +933,7 @@ function Form(props) {
924
933
  }
925
934
  inputClass={inputClass}
926
935
  onChange={handleChange}
936
+ onChangeColour={handleChangeColour}
927
937
  onChangeDate={handleChangeDate}
928
938
  onChangeSelect={handleChangeSelect}
929
939
  onChangeRicheditor={
package/package.json CHANGED
@@ -5,13 +5,14 @@
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",
12
12
  "motion": "^10.16.2",
13
13
  "numeral": "^2.0.6",
14
14
  "quill-image-uploader": "^1.3.0",
15
+ "react-color": "^2.19.3",
15
16
  "react-confirm-alert": "^3.0.6",
16
17
  "react-datepicker": "^4.16.0",
17
18
  "react-dropzone": "^14.2.3",
@@ -28,7 +29,7 @@
28
29
  "react-tooltip": "^5.20.0",
29
30
  "react-window": "^1.8.9",
30
31
  "reactjs-popup": "^2.0.5",
31
- "validator": "^13.9.0",
32
+ "validator": "^13.11.0",
32
33
  "yarn": "^1.22.19"
33
34
  },
34
35
  "devDependecies": {
@@ -40,7 +41,7 @@
40
41
  "react-dom": "^17.0.1"
41
42
  },
42
43
  "name": "@visns-studio/visns-components",
43
- "version": "2.3.0",
44
+ "version": "2.3.2",
44
45
  "description": "Various packages to assist in the development of our Custom Applications.",
45
46
  "main": "index.js",
46
47
  "scripts": {