@visns-studio/visns-components 4.10.22 → 4.10.24

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 (4) hide show
  1. package/package.json +2 -1
  2. package/src/components/cms/Field.jsx +63 -39
  3. package/src/components/crm/Field.jsx +10 -0
  4. package/src/components/crm/MultiSelect.jsx +49 -24
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.24",
80
81
  "description": "Various packages to assist in the development of our Custom Applications.",
81
82
  "main": "src/index.js",
82
83
  "files": [
package/src/components/cms/Field.jsx CHANGED
@@ -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':
package/src/components/crm/Field.jsx CHANGED
@@ -1030,6 +1030,16 @@ function Field({
1030
1030
  }
1031
1031
  dataOptions={dataOptions}
1032
1032
  style={style}
1033
+ isCreatable={
1034
+ settings.hasOwnProperty('isCreatable')
1035
+ ? settings.isCreatable
1036
+ : false
1037
+ }
1038
+ creatableConfig={
1039
+ settings.hasOwnProperty('creatableConfig')
1040
+ ? settings.creatableConfig
1041
+ : {}
1042
+ }
1033
1043
  />
1034
1044
  {settings.create && (
1035
1045
  <button
package/src/components/crm/MultiSelect.jsx CHANGED
@@ -1,49 +1,73 @@
1
1
  import React, { useEffect, useState } from 'react';
2
+ import CustomFetch from './Fetch';
2
3
  import SelectList from './SelectList';
3
4
  import Select, { createFilter } from 'react-select';
5
+ import CreatableSelect from 'react-select/creatable';
4
6
  import styles from './styles/AsyncSelect.module.scss';
5
7
 
6
8
  function MultiSelect({
7
9
  className,
8
- inputValue,
10
+ inputValue = [], // Default to an empty array
9
11
  multi,
10
12
  onChange,
11
- options,
13
+ options = [], // Default to an empty array
12
14
  placeholder,
13
15
  settings,
14
16
  style,
17
+ isCreatable = false,
18
+ creatableConfig = {},
15
19
  }) {
16
20
  const [selectOptions, setSelectOptions] = useState([]);
21
+ const [selectValue, setSelectValue] = useState([]);
17
22
 
18
23
  useEffect(() => {
19
- let _options = [];
24
+ const _options = Array.isArray(options)
25
+ ? options.map((a) => ({
26
+ value: a.id,
27
+ label: a.label || a.name || a.description || 'Unknown',
28
+ ...a,
29
+ }))
30
+ : [];
31
+ setSelectOptions(_options);
32
+ }, [options]);
20
33
 
21
- if (options.length > 0) {
22
- options.forEach((a) => {
23
- let _optionItem = {
24
- value: a.id,
25
- label: a.label,
26
- };
34
+ useEffect(() => {
35
+ const _values = Array.isArray(inputValue)
36
+ ? inputValue.map((a) => ({
37
+ value: a.id,
38
+ label: a.label || a.name || a.description || 'Unknown',
39
+ ...a,
40
+ }))
41
+ : [];
42
+ setSelectValue(_values);
43
+ }, [inputValue]);
27
44
 
28
- Object.keys(a).forEach((b) => {
29
- if (b !== 'id') {
30
- _optionItem = {
31
- ..._optionItem,
32
- [b]: a[b],
33
- };
34
- }
35
- });
45
+ const handleCreate = async (inputValue) => {
46
+ if (creatableConfig.url && creatableConfig.method) {
47
+ const res = await CustomFetch(
48
+ creatableConfig.url,
49
+ creatableConfig.method,
50
+ { label: inputValue }
51
+ );
36
52
 
37
- _options.push(_optionItem);
38
- });
53
+ if (res && res.data) {
54
+ const newOption = {
55
+ value: res.data.id,
56
+ label: res.data.label || inputValue,
57
+ ...res.data,
58
+ };
39
59
 
40
- setSelectOptions(_options);
60
+ setSelectOptions((prevOptions) => [...prevOptions, newOption]);
61
+ setSelectValue((prevValues) => [...prevValues, newOption]);
62
+ }
41
63
  }
42
- }, [options]);
64
+ };
65
+
66
+ const SelectComponent = isCreatable ? CreatableSelect : Select;
43
67
 
44
68
  return (
45
- <Select
46
- closeMenuOnSelect={multi ? false : true}
69
+ <SelectComponent
70
+ closeMenuOnSelect={!multi}
47
71
  isClearable
48
72
  isSearchable
49
73
  isMulti={multi}
@@ -69,7 +93,8 @@ function MultiSelect({
69
93
  : '52px',
70
94
  }),
71
95
  }}
72
- value={inputValue}
96
+ value={selectValue}
97
+ onCreateOption={handleCreate}
73
98
  placeholder={placeholder ? placeholder : 'Select...'}
74
99
  />
75
100
  );