@visns-studio/visns-components 2.3.1 → 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.
- package/components/crm/Field.jsx +71 -1
- package/components/crm/Form.jsx +10 -0
- package/package.json +2 -1
package/components/crm/Field.jsx
CHANGED
|
@@ -3,6 +3,7 @@ import DatePicker from 'react-datepicker';
|
|
|
3
3
|
import _ from 'lodash';
|
|
4
4
|
import ReactQuill from 'react-quill';
|
|
5
5
|
import Toggle from 'react-toggle';
|
|
6
|
+
import { BlockPicker } from 'react-color';
|
|
6
7
|
import { NumericFormat, PatternFormat } from 'react-number-format';
|
|
7
8
|
|
|
8
9
|
import CustomFetch from './Fetch';
|
|
@@ -20,6 +21,7 @@ function Field({
|
|
|
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 [
|
|
35
|
+
const [colorPickerShow, setColorPickerShow] = useState(false);
|
|
34
36
|
const [dataOptions, setDataOptions] = useState([]);
|
|
35
37
|
const [formItemStyle, setFormItemStyle] = useState({});
|
|
36
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 = () => {
|
|
@@ -193,6 +210,7 @@ function Field({
|
|
|
193
210
|
'multi-dropdown-ajax',
|
|
194
211
|
'async-dropdown-ajax',
|
|
195
212
|
'richeditor',
|
|
213
|
+
'colour',
|
|
196
214
|
].includes(settings.type)
|
|
197
215
|
) {
|
|
198
216
|
return (
|
|
@@ -339,6 +357,57 @@ function Field({
|
|
|
339
357
|
</span>
|
|
340
358
|
</div>
|
|
341
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
|
+
);
|
|
342
411
|
case 'multi-dropdown':
|
|
343
412
|
case 'multi-dropdown-ajax':
|
|
344
413
|
return (
|
|
@@ -415,6 +484,7 @@ function Field({
|
|
|
415
484
|
'async-dropdown-ajax',
|
|
416
485
|
'toggle',
|
|
417
486
|
'richeditor',
|
|
487
|
+
'colour',
|
|
418
488
|
].includes(settings.type)
|
|
419
489
|
) {
|
|
420
490
|
return (
|
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
|
@@ -12,6 +12,7 @@
|
|
|
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",
|
|
@@ -40,7 +41,7 @@
|
|
|
40
41
|
"react-dom": "^17.0.1"
|
|
41
42
|
},
|
|
42
43
|
"name": "@visns-studio/visns-components",
|
|
43
|
-
"version": "2.3.
|
|
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": {
|