@visns-studio/visns-components 4.10.22 → 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.22",
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
- <Editor
671
- tinymceScriptSrc="https://d16lktya8ojp5z.cloudfront.net/generic/packages/tinymce_v701/tinymce.min.js"
672
- licenseKey="gpl"
673
- onEditorChange={(value, e) => {
674
- onChangeRicheditor(e, value, settings.id);
675
- }}
676
- onInit={(evt, editor) =>
677
- (editorRef.current = editor)
678
- }
679
- value={inputValue || ''}
680
- init={{
681
- branding: false,
682
- height: 500,
683
- menubar: false,
684
- plugins: [
685
- 'advlist',
686
- 'autolink',
687
- 'lists',
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
- 'charmap',
691
- 'preview',
692
- 'anchor',
693
- 'searchreplace',
694
- 'visualblocks',
695
- 'code',
696
- 'fullscreen',
697
- 'insertdatetime',
698
- 'media',
699
- 'table',
700
- 'code',
701
- ],
702
- toolbar:
703
- 'undo redo | blocks | ' +
704
- 'bold italic forecolor | alignleft aligncenter ' +
705
- 'alignright alignjustify | bullist numlist outdent indent | ' +
706
- 'removeformat | table',
707
- content_style:
708
- 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
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':
@@ -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: a.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={inputValue}
103
+ value={selectValue}
73
104
  placeholder={placeholder ? placeholder : 'Select...'}
74
105
  />
75
106
  );