@visns-studio/visns-components 1.4.12 → 1.4.13

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.
@@ -318,12 +318,14 @@ const DataGrid = ({
318
318
  }, []);
319
319
 
320
320
  const sortTrigger = () => {
321
- let _url = form.url.replace("/ajax", "");
321
+ const url = form.url.replace("/ajax", "");
322
+ console.info(url);
323
+ const newState = {
324
+ form: form,
325
+ };
322
326
 
323
- navigate(_url + "/sort", {
324
- state: {
325
- form: form,
326
- },
327
+ navigate(`${url}/sort`, {
328
+ state: newState,
327
329
  });
328
330
  };
329
331
 
@@ -1,17 +1,62 @@
1
1
  import React, { useState, useEffect, useRef } from "react";
2
- import CustomFetch from "../crm/visns-fetch";
3
- import Select from "../crm/visns-select";
4
- import MultiSelect from "../crm/visns-multi-select";
5
- import VisnsAutocomplete from "../crm/visns-autocomplete";
6
2
  import DatePicker from "react-datepicker";
7
3
  import _ from "lodash";
8
- import ReactQuill from "react-quill";
4
+ import ReactQuill, { Quill } from "react-quill";
5
+ import ImageUploader from "quill-image-uploader";
9
6
  import Toggle from "react-toggle";
10
7
  import { NumericFormat, PatternFormat } from "react-number-format";
11
8
  import { motion } from "framer-motion";
9
+ import { toast } from "react-toastify";
10
+
12
11
  import "react-toggle/style.css";
13
12
  import "react-quill/dist/quill.snow.css";
14
13
  import "react-datepicker/dist/react-datepicker.css";
14
+ import "quill-image-uploader/dist/quill.imageUploader.min.css";
15
+
16
+ import CustomFetch from "../crm/visns-fetch";
17
+ import Select from "../crm/visns-select";
18
+ import MultiSelect from "../crm/visns-multi-select";
19
+ import VisnsAutocomplete from "../crm/visns-autocomplete";
20
+
21
+ Quill.register("modules/imageUploader", ImageUploader);
22
+
23
+ const modules = {
24
+ toolbar: {
25
+ container: [
26
+ [{ header: [1, 2, false] }],
27
+ ["bold", "italic", "underline", "strike", "blockquote"],
28
+ [{ list: "ordered" }, { list: "bullet" }],
29
+ ["link", "image"],
30
+ ["clean"],
31
+ ],
32
+ },
33
+ imageUploader: {
34
+ upload: async (file) => {
35
+ return new Promise((resolve, reject) => {
36
+ Vapor.store(file, {
37
+ progress: (progress) => {
38
+ console.info(progress * 100);
39
+ },
40
+ }).then((response) => {
41
+ CustomFetch(
42
+ "/ajax/file/upload",
43
+ "POST",
44
+ response,
45
+ function (res) {
46
+ if (res.error === "") {
47
+ resolve(res.path);
48
+ } else {
49
+ toast.error(
50
+ res.error !== undefined ? res.error : ""
51
+ );
52
+ }
53
+ }
54
+ );
55
+ });
56
+ });
57
+ },
58
+ },
59
+ };
15
60
 
16
61
  const Field = ({
17
62
  settings,
@@ -25,41 +70,11 @@ const Field = ({
25
70
  setFormData,
26
71
  uploadProgress,
27
72
  }) => {
28
- const quillFileInputRef = useRef(null);
29
- const quillRef = useRef(null);
30
73
  const inputFile = useRef(null);
31
74
  const [options, setOptions] = useState([]);
32
75
  const [dataOptions, setDataOptions] = useState([]);
33
76
  const [formItemStyle, setFormItemStyle] = useState({});
34
77
  const [formItemClass, setFormItemClass] = useState("formItem");
35
- const modules = {
36
- toolbar: {
37
- container: [
38
- [{ header: [1, 2, false] }],
39
- ["bold", "italic", "underline", "strike", "blockquote"],
40
- [{ list: "ordered" }, { list: "bullet" }],
41
- ["link", "image"],
42
- ["clean"],
43
- ],
44
- },
45
- };
46
-
47
- const handleImageUpload = async (e) => {
48
- try {
49
- const file = e.target.files[0];
50
- const reader = new FileReader();
51
-
52
- reader.onload = () => {
53
- const dataUrl = reader.result;
54
- const range = quillRef.getEditor().getSelection();
55
- quillRef.getEditor().insertEmbed(range.index, "image", dataUrl);
56
- };
57
-
58
- reader.readAsDataURL(file);
59
- } catch (error) {
60
- console.error("Error uploading image:", error);
61
- }
62
- };
63
78
 
64
79
  useEffect(() => {
65
80
  switch (settings.type) {
@@ -624,12 +639,6 @@ const Field = ({
624
639
  case "richeditor":
625
640
  htmlContainer = (
626
641
  <>
627
- <input
628
- type="file"
629
- style={{ display: "none" }}
630
- ref={quillFileInputRef}
631
- onChange={handleImageUpload}
632
- />
633
642
  <ReactQuill
634
643
  theme="snow"
635
644
  name={settings.id}
package/package.json CHANGED
@@ -10,6 +10,7 @@
10
10
  "lodash": "^4.17.21",
11
11
  "moment": "^2.29.4",
12
12
  "numeral": "^2.0.6",
13
+ "quill-image-uploader": "^1.3.0",
13
14
  "react-confirm-alert": "^3.0.6",
14
15
  "react-datepicker": "^4.14.0",
15
16
  "react-dropzone": "^14.2.3",
@@ -34,7 +35,7 @@
34
35
  "react-dom": "^17.0.1"
35
36
  },
36
37
  "name": "@visns-studio/visns-components",
37
- "version": "1.4.12",
38
+ "version": "1.4.13",
38
39
  "description": "Various packages to assist in the development of our Custom Applications.",
39
40
  "main": "index.js",
40
41
  "devDependencies": {},