@visns-studio/visns-components 4.10.21 → 4.10.23
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/package.json
CHANGED
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
"array-move": "^4.0.0",
|
|
16
16
|
"awesome-debounce-promise": "^2.1.0",
|
|
17
17
|
"axios": "^1.7.7",
|
|
18
|
+
"browser-image-compression": "^2.0.2",
|
|
18
19
|
"dayjs": "^1.11.13",
|
|
19
20
|
"fabric": "^6.4.3",
|
|
20
21
|
"file-saver": "^2.0.5",
|
|
@@ -76,7 +77,7 @@
|
|
|
76
77
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
77
78
|
},
|
|
78
79
|
"name": "@visns-studio/visns-components",
|
|
79
|
-
"version": "4.10.
|
|
80
|
+
"version": "4.10.23",
|
|
80
81
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
81
82
|
"main": "src/index.js",
|
|
82
83
|
"files": [
|
|
@@ -667,47 +667,71 @@ const Field = ({
|
|
|
667
667
|
break;
|
|
668
668
|
case 'richeditor':
|
|
669
669
|
htmlContainer = (
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
'
|
|
686
|
-
'
|
|
687
|
-
'
|
|
670
|
+
<>
|
|
671
|
+
<ReactQuill
|
|
672
|
+
theme="snow"
|
|
673
|
+
name={settings.id}
|
|
674
|
+
onChange={(value) => {
|
|
675
|
+
onChangeRicheditor(value, settings.id);
|
|
676
|
+
}}
|
|
677
|
+
value={inputValue || ''}
|
|
678
|
+
modules={modules}
|
|
679
|
+
formats={[
|
|
680
|
+
'header',
|
|
681
|
+
'bold',
|
|
682
|
+
'italic',
|
|
683
|
+
'underline',
|
|
684
|
+
'strike',
|
|
685
|
+
'blockquote',
|
|
686
|
+
'list',
|
|
687
|
+
'bullet',
|
|
688
688
|
'link',
|
|
689
689
|
'image',
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
690
|
+
]}
|
|
691
|
+
/>
|
|
692
|
+
</>
|
|
693
|
+
|
|
694
|
+
// <Editor
|
|
695
|
+
// tinymceScriptSrc="https://d16lktya8ojp5z.cloudfront.net/generic/packages/tinymce_v701/tinymce.min.js"
|
|
696
|
+
// licenseKey="gpl"
|
|
697
|
+
// onEditorChange={(value, e) => {
|
|
698
|
+
// onChangeRicheditor(e, value, settings.id);
|
|
699
|
+
// }}
|
|
700
|
+
// onInit={(evt, editor) =>
|
|
701
|
+
// (editorRef.current = editor)
|
|
702
|
+
// }
|
|
703
|
+
// value={inputValue || ''}
|
|
704
|
+
// init={{
|
|
705
|
+
// branding: false,
|
|
706
|
+
// height: 500,
|
|
707
|
+
// menubar: false,
|
|
708
|
+
// plugins: [
|
|
709
|
+
// 'advlist',
|
|
710
|
+
// 'autolink',
|
|
711
|
+
// 'lists',
|
|
712
|
+
// 'link',
|
|
713
|
+
// 'image',
|
|
714
|
+
// 'charmap',
|
|
715
|
+
// 'preview',
|
|
716
|
+
// 'anchor',
|
|
717
|
+
// 'searchreplace',
|
|
718
|
+
// 'visualblocks',
|
|
719
|
+
// 'code',
|
|
720
|
+
// 'fullscreen',
|
|
721
|
+
// 'insertdatetime',
|
|
722
|
+
// 'media',
|
|
723
|
+
// 'table',
|
|
724
|
+
// 'code',
|
|
725
|
+
// ],
|
|
726
|
+
// toolbar:
|
|
727
|
+
// 'undo redo | blocks | ' +
|
|
728
|
+
// 'bold italic forecolor | alignleft aligncenter ' +
|
|
729
|
+
// 'alignright alignjustify | bullist numlist outdent indent | ' +
|
|
730
|
+
// 'removeformat | table',
|
|
731
|
+
// content_style:
|
|
732
|
+
// 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
|
|
733
|
+
// }}
|
|
734
|
+
// />
|
|
711
735
|
);
|
|
712
736
|
break;
|
|
713
737
|
case 'image':
|
|
@@ -730,9 +730,8 @@ function Field({
|
|
|
730
730
|
className={inputClass[settings.id]}
|
|
731
731
|
onChange={onChange}
|
|
732
732
|
/>
|
|
733
|
-
{console.info(inputValue)}
|
|
734
733
|
{inputValue && inputValue.length > 0 && (
|
|
735
|
-
<ul className=
|
|
734
|
+
<ul className={styles['file-list']}>
|
|
736
735
|
{inputValue.map((file, index) => (
|
|
737
736
|
<li
|
|
738
737
|
key={`file-${settings.id}-${index}`}
|
|
@@ -743,7 +742,9 @@ function Field({
|
|
|
743
742
|
? file.file_name
|
|
744
743
|
: ''}
|
|
745
744
|
<button
|
|
746
|
-
className=
|
|
745
|
+
className={
|
|
746
|
+
styles['trash-button']
|
|
747
|
+
}
|
|
747
748
|
onClick={(e) => {
|
|
748
749
|
e.preventDefault();
|
|
749
750
|
e.stopPropagation();
|
|
@@ -14,19 +14,22 @@ function MultiSelect({
|
|
|
14
14
|
style,
|
|
15
15
|
}) {
|
|
16
16
|
const [selectOptions, setSelectOptions] = useState([]);
|
|
17
|
+
const [selectValue, setSelectValue] = useState([]);
|
|
17
18
|
|
|
18
19
|
useEffect(() => {
|
|
19
20
|
let _options = [];
|
|
20
21
|
|
|
21
22
|
if (options.length > 0) {
|
|
22
23
|
options.forEach((a) => {
|
|
24
|
+
let labelValue =
|
|
25
|
+
a.label || a.name || a.description || 'Unknown';
|
|
23
26
|
let _optionItem = {
|
|
24
27
|
value: a.id,
|
|
25
|
-
label:
|
|
28
|
+
label: labelValue,
|
|
26
29
|
};
|
|
27
30
|
|
|
28
31
|
Object.keys(a).forEach((b) => {
|
|
29
|
-
if (b !== 'id') {
|
|
32
|
+
if (b !== 'id' && b !== 'label') {
|
|
30
33
|
_optionItem = {
|
|
31
34
|
..._optionItem,
|
|
32
35
|
[b]: a[b],
|
|
@@ -41,6 +44,34 @@ function MultiSelect({
|
|
|
41
44
|
}
|
|
42
45
|
}, [options]);
|
|
43
46
|
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
let _values = [];
|
|
49
|
+
|
|
50
|
+
if (inputValue.length > 0) {
|
|
51
|
+
inputValue.forEach((a) => {
|
|
52
|
+
let labelValue =
|
|
53
|
+
a.label || a.name || a.description || 'Unknown';
|
|
54
|
+
let _valueItems = {
|
|
55
|
+
value: a.id,
|
|
56
|
+
label: labelValue,
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
Object.keys(a).forEach((b) => {
|
|
60
|
+
if (b !== 'id' && b !== 'label') {
|
|
61
|
+
_valueItems = {
|
|
62
|
+
..._valueItems,
|
|
63
|
+
[b]: a[b],
|
|
64
|
+
};
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
_values.push(_valueItems);
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
setSelectValue(_values);
|
|
72
|
+
}
|
|
73
|
+
}, [inputValue]);
|
|
74
|
+
|
|
44
75
|
return (
|
|
45
76
|
<Select
|
|
46
77
|
closeMenuOnSelect={multi ? false : true}
|
|
@@ -69,7 +100,7 @@ function MultiSelect({
|
|
|
69
100
|
: '52px',
|
|
70
101
|
}),
|
|
71
102
|
}}
|
|
72
|
-
value={
|
|
103
|
+
value={selectValue}
|
|
73
104
|
placeholder={placeholder ? placeholder : 'Select...'}
|
|
74
105
|
/>
|
|
75
106
|
);
|
|
@@ -523,3 +523,54 @@ input[type='file']:hover {
|
|
|
523
523
|
display: block;
|
|
524
524
|
margin: 0 auto;
|
|
525
525
|
}
|
|
526
|
+
|
|
527
|
+
/* File List Styling */
|
|
528
|
+
.file-list {
|
|
529
|
+
list-style: none; /* Remove default list styles */
|
|
530
|
+
padding: 0; /* Remove default padding */
|
|
531
|
+
margin: 0; /* Remove default margin */
|
|
532
|
+
border: 1px solid var(--border-color); /* Add a border */
|
|
533
|
+
border-radius: var(--br); /* Rounded corners */
|
|
534
|
+
background: var(--tertiary-color); /* Background color */
|
|
535
|
+
max-height: 200px; /* Limit height */
|
|
536
|
+
overflow-y: auto; /* Scroll if too many files */
|
|
537
|
+
margin-top: 0.5em; /* Space above the list */
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
/* File List Item Styling */
|
|
541
|
+
.file-list li {
|
|
542
|
+
display: flex; /* Flexbox for layout */
|
|
543
|
+
justify-content: space-between; /* Space between text and button */
|
|
544
|
+
align-items: center; /* Center items vertically */
|
|
545
|
+
padding: 0.5em 1em; /* Padding for items */
|
|
546
|
+
border-bottom: 1px solid var(--border-color); /* Border between items */
|
|
547
|
+
color: var(--paragraph-color); /* Text color */
|
|
548
|
+
transition: background 0.3s; /* Transition for hover effect */
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
.file-list li:hover {
|
|
552
|
+
background: rgba(
|
|
553
|
+
var(--paragraph-color-rgb),
|
|
554
|
+
0.1
|
|
555
|
+
); /* Change background on hover */
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
/* Trash Button Styling */
|
|
559
|
+
.trash-button {
|
|
560
|
+
background: transparent; /* Transparent background */
|
|
561
|
+
border: none; /* No border */
|
|
562
|
+
cursor: pointer; /* Pointer cursor */
|
|
563
|
+
color: var(--primary-color); /* Button color */
|
|
564
|
+
display: flex; /* Flex for icon alignment */
|
|
565
|
+
align-items: center; /* Center icon vertically */
|
|
566
|
+
transition: color 0.3s; /* Transition for color change */
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
.trash-button:hover {
|
|
570
|
+
color: var(--secondary-color); /* Change color on hover */
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
.trash-button svg {
|
|
574
|
+
width: 1.5em; /* Adjust icon size */
|
|
575
|
+
height: 1.5em; /* Adjust icon size */
|
|
576
|
+
}
|