siam-ui-utils 3.1.0 → 3.1.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.
Files changed (96) hide show
  1. package/dist/CustomBootstrap.js +9 -9
  2. package/dist/_virtual/_commonjsHelpers.js +7 -7
  3. package/dist/_virtual/events.js +6 -6
  4. package/dist/_virtual/events2.js +5 -5
  5. package/dist/_virtual/index.js +8 -8
  6. package/dist/_virtual/index2.js +5 -5
  7. package/dist/assets/img/copiar.png.js +5 -5
  8. package/dist/assets/img/take-photo.jpg.js +5 -5
  9. package/dist/constants.js +9 -9
  10. package/dist/copy-link/index.js +60 -60
  11. package/dist/copy-link/styles.css +37 -37
  12. package/dist/custom-input/CustomInputCheckbox.js +37 -37
  13. package/dist/custom-input/CustomInputCurrency.js +84 -84
  14. package/dist/custom-input/CustomInputFile.js +47 -47
  15. package/dist/custom-input/CustomInputRadio.js +68 -68
  16. package/dist/custom-input/constant.js +5 -5
  17. package/dist/custom-input/index.js +12 -12
  18. package/dist/drag-and-dropzone/DropzoneComponent.js +83 -83
  19. package/dist/drag-and-dropzone/config.js +59 -59
  20. package/dist/drag-and-dropzone/index.js +39 -39
  21. package/dist/dropzone/Input.js +77 -77
  22. package/dist/dropzone/Layout.js +50 -50
  23. package/dist/dropzone/Preview.js +117 -117
  24. package/dist/dropzone/SubmitButton.js +34 -34
  25. package/dist/dropzone/assets/cancel.svg.js +5 -5
  26. package/dist/dropzone/assets/remove.svg.js +5 -5
  27. package/dist/dropzone/assets/restart.svg.js +5 -5
  28. package/dist/dropzone/index.js +514 -514
  29. package/dist/dropzone/utils.js +93 -93
  30. package/dist/dropzone-uploader/base/index.js +135 -135
  31. package/dist/dropzone-uploader/index.js +7 -7
  32. package/dist/dropzone-uploader/styled/index.js +148 -148
  33. package/dist/iconos/constants-svg.js +666 -666
  34. package/dist/iconos/icon-button-svg.js +50 -50
  35. package/dist/iconos/index.js +24 -24
  36. package/dist/iconos/styled-icon.js +26 -26
  37. package/dist/index.js +4 -4
  38. package/dist/intl-messages/index.js +11 -11
  39. package/dist/node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js +8 -8
  40. package/dist/node_modules/@babel/runtime/helpers/esm/extends.js +13 -13
  41. package/dist/node_modules/@babel/runtime/helpers/esm/inheritsLoose.js +8 -8
  42. package/dist/node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js +13 -13
  43. package/dist/node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js +9 -9
  44. package/dist/node_modules/@neolution-ch/reactstrap/esm/Badge.js +77 -0
  45. package/dist/node_modules/@neolution-ch/reactstrap/esm/Badge.js.map +1 -0
  46. package/dist/node_modules/@neolution-ch/reactstrap/esm/Button.js +111 -111
  47. package/dist/node_modules/@neolution-ch/reactstrap/esm/CloseButton.js +106 -106
  48. package/dist/node_modules/@neolution-ch/reactstrap/esm/Col.js +125 -125
  49. package/dist/node_modules/@neolution-ch/reactstrap/esm/FormGroup.js +75 -75
  50. package/dist/node_modules/@neolution-ch/reactstrap/esm/Input.js +225 -225
  51. package/dist/node_modules/@neolution-ch/reactstrap/esm/Label.js +122 -122
  52. package/dist/node_modules/@neolution-ch/reactstrap/esm/Row.js +83 -83
  53. package/dist/node_modules/@neolution-ch/reactstrap/esm/utils.js +68 -68
  54. package/dist/node_modules/classnames/index.js +62 -62
  55. package/dist/node_modules/dom-helpers/esm/addClass.js +10 -10
  56. package/dist/node_modules/dom-helpers/esm/hasClass.js +8 -8
  57. package/dist/node_modules/dom-helpers/esm/removeClass.js +16 -16
  58. package/dist/node_modules/dropzone/dist/dropzone.js +1968 -1968
  59. package/dist/node_modules/events/events.js +372 -372
  60. package/dist/node_modules/just-extend/index.esm.js +43 -43
  61. package/dist/node_modules/react-transition-group/esm/CSSTransition.js +275 -275
  62. package/dist/node_modules/react-transition-group/esm/Transition.js +441 -441
  63. package/dist/node_modules/react-transition-group/esm/TransitionGroup.js +146 -146
  64. package/dist/node_modules/react-transition-group/esm/TransitionGroupContext.js +6 -6
  65. package/dist/node_modules/react-transition-group/esm/config.js +7 -7
  66. package/dist/node_modules/react-transition-group/esm/utils/ChildMapping.js +100 -100
  67. package/dist/node_modules/react-transition-group/esm/utils/PropTypes.js +24 -24
  68. package/dist/node_modules/react-transition-group/esm/utils/reflow.js +7 -7
  69. package/dist/react-notifications/Notification.js +73 -73
  70. package/dist/react-notifications/NotificationContainer.js +59 -59
  71. package/dist/react-notifications/NotificationManager.js +174 -174
  72. package/dist/react-notifications/Notifications.js +72 -72
  73. package/dist/react-notifications/constants.js +26 -26
  74. package/dist/react-notifications/index.js +11 -11
  75. package/dist/select/custom-select/constants.js +8 -8
  76. package/dist/select/custom-select/index.js +89 -89
  77. package/dist/select/custom-select-input/index.js +12 -12
  78. package/dist/select/index.js +9 -9
  79. package/dist/select/multi-select/badge-label-multi-select.js +29 -29
  80. package/dist/select/multi-select/index.css +36 -36
  81. package/dist/select/multi-select/index.js +171 -171
  82. package/dist/select/multi-select/index.js.map +1 -1
  83. package/dist/select/multi-select/styled-component.js +23 -23
  84. package/dist/select/multi-select/styled-component.js.map +1 -1
  85. package/dist/timer/index.js +60 -60
  86. package/dist/timer/styles.css +58 -58
  87. package/dist/tomar-foto/index.js +62 -62
  88. package/dist/view-layout/button-editor.js +14 -14
  89. package/dist/view-layout/constants.js +11 -11
  90. package/dist/view-layout/editor-layer.js +28 -28
  91. package/dist/view-layout/index.js +53 -53
  92. package/dist/view-layout/slot-wrapper.js +39 -39
  93. package/dist/view-layout/styles.css +126 -126
  94. package/dist/where-by-room/index.js +20 -20
  95. package/dist/where-by-room/room.js +78 -78
  96. package/package.json +1 -4
@@ -1,84 +1,84 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import { useState, useEffect } from "react";
3
- import Input from "../node_modules/@neolution-ch/reactstrap/esm/Input.js";
4
- import { fieldToCurrency } from "siam-utils";
5
- const CustomInputCurrency = (props) => {
6
- const {
7
- onChange = () => {
8
- },
9
- onFocus = () => {
10
- },
11
- value = {},
12
- maxLength = "20",
13
- style = {}
14
- } = props;
15
- const styleCurrency = { ...style, textAlign: "right" };
16
- const [valueInputCur, setValueInputCur] = useState("");
17
- const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
18
- const handleInputOnBlur = (event) => {
19
- const { target } = event;
20
- if (valueInputCur !== "") {
21
- const valor = valueInputCur.replace(".", "");
22
- const valorPersistence = valor.replace(",", ".");
23
- setValueInputCur(fieldToCurrency(valorPersistence));
24
- onChange({
25
- ...event,
26
- target: {
27
- ...target,
28
- value: valorPersistence,
29
- valueCurrency: fieldToCurrency(valorPersistence),
30
- valueFloat: parseFloat(valorPersistence)
31
- }
32
- });
33
- }
34
- };
35
- const handleInputOnFocus = (e) => {
36
- if (valueInputCur !== "") {
37
- const valor = valueInputCur.replace("$ ", "");
38
- const valor2 = valor.replace(/\./g, "");
39
- setValueInputCur(valor2);
40
- }
41
- onFocus(e);
42
- };
43
- const handleInputChange = (event) => {
44
- const { target } = event;
45
- const valor = target.value.replace("$ ", "");
46
- const valid = /^-?[0-9.]*(?:[,]\d?\d?)?$/;
47
- if (valid.test(valor)) {
48
- const sepDec = valor.slice(-1) === "." ? `${valor.slice(0, -1)},` : valor;
49
- const punto = new RegExp(escapeRegExp("."), "g");
50
- const sinSepMil = sepDec.replace(punto, "");
51
- const posPuntoDec = sinSepMil.indexOf(",");
52
- const parteDecimal = posPuntoDec >= 0 ? sinSepMil.slice(posPuntoDec) : "";
53
- const parteEntera = posPuntoDec >= 0 ? sinSepMil.slice(0, posPuntoDec) : sinSepMil;
54
- setValueInputCur(parteEntera + parteDecimal);
55
- }
56
- };
57
- useEffect(() => {
58
- if (value && value !== "") {
59
- if (typeof value != "number" && value && value.includes("$")) {
60
- setValueInputCur(value.toString());
61
- } else {
62
- setValueInputCur(fieldToCurrency(value.toString()));
63
- }
64
- } else {
65
- setValueInputCur("");
66
- }
67
- }, [value]);
68
- return /* @__PURE__ */ jsx(
69
- Input,
70
- {
71
- ...props,
72
- style: styleCurrency,
73
- maxLength,
74
- value: valueInputCur,
75
- onFocus: handleInputOnFocus,
76
- onChange: handleInputChange,
77
- onBlur: handleInputOnBlur
78
- }
79
- );
80
- };
81
- export {
82
- CustomInputCurrency
83
- };
84
- //# sourceMappingURL=CustomInputCurrency.js.map
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { useState, useEffect } from "react";
3
+ import Input from "../node_modules/@neolution-ch/reactstrap/esm/Input.js";
4
+ import { fieldToCurrency } from "siam-utils";
5
+ const CustomInputCurrency = (props) => {
6
+ const {
7
+ onChange = () => {
8
+ },
9
+ onFocus = () => {
10
+ },
11
+ value = {},
12
+ maxLength = "20",
13
+ style = {}
14
+ } = props;
15
+ const styleCurrency = { ...style, textAlign: "right" };
16
+ const [valueInputCur, setValueInputCur] = useState("");
17
+ const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
18
+ const handleInputOnBlur = (event) => {
19
+ const { target } = event;
20
+ if (valueInputCur !== "") {
21
+ const valor = valueInputCur.replace(".", "");
22
+ const valorPersistence = valor.replace(",", ".");
23
+ setValueInputCur(fieldToCurrency(valorPersistence));
24
+ onChange({
25
+ ...event,
26
+ target: {
27
+ ...target,
28
+ value: valorPersistence,
29
+ valueCurrency: fieldToCurrency(valorPersistence),
30
+ valueFloat: parseFloat(valorPersistence)
31
+ }
32
+ });
33
+ }
34
+ };
35
+ const handleInputOnFocus = (e) => {
36
+ if (valueInputCur !== "") {
37
+ const valor = valueInputCur.replace("$ ", "");
38
+ const valor2 = valor.replace(/\./g, "");
39
+ setValueInputCur(valor2);
40
+ }
41
+ onFocus(e);
42
+ };
43
+ const handleInputChange = (event) => {
44
+ const { target } = event;
45
+ const valor = target.value.replace("$ ", "");
46
+ const valid = /^-?[0-9.]*(?:[,]\d?\d?)?$/;
47
+ if (valid.test(valor)) {
48
+ const sepDec = valor.slice(-1) === "." ? `${valor.slice(0, -1)},` : valor;
49
+ const punto = new RegExp(escapeRegExp("."), "g");
50
+ const sinSepMil = sepDec.replace(punto, "");
51
+ const posPuntoDec = sinSepMil.indexOf(",");
52
+ const parteDecimal = posPuntoDec >= 0 ? sinSepMil.slice(posPuntoDec) : "";
53
+ const parteEntera = posPuntoDec >= 0 ? sinSepMil.slice(0, posPuntoDec) : sinSepMil;
54
+ setValueInputCur(parteEntera + parteDecimal);
55
+ }
56
+ };
57
+ useEffect(() => {
58
+ if (value && value !== "") {
59
+ if (typeof value != "number" && value && value.includes("$")) {
60
+ setValueInputCur(value.toString());
61
+ } else {
62
+ setValueInputCur(fieldToCurrency(value.toString()));
63
+ }
64
+ } else {
65
+ setValueInputCur("");
66
+ }
67
+ }, [value]);
68
+ return /* @__PURE__ */ jsx(
69
+ Input,
70
+ {
71
+ ...props,
72
+ style: styleCurrency,
73
+ maxLength,
74
+ value: valueInputCur,
75
+ onFocus: handleInputOnFocus,
76
+ onChange: handleInputChange,
77
+ onBlur: handleInputOnBlur
78
+ }
79
+ );
80
+ };
81
+ export {
82
+ CustomInputCurrency
83
+ };
84
+ //# sourceMappingURL=CustomInputCurrency.js.map
@@ -1,47 +1,47 @@
1
- import { jsxs, jsx } from "react/jsx-runtime";
2
- import { useState } from "react";
3
- import FormGroup from "../node_modules/@neolution-ch/reactstrap/esm/FormGroup.js";
4
- import Input from "../node_modules/@neolution-ch/reactstrap/esm/Input.js";
5
- import Label from "../node_modules/@neolution-ch/reactstrap/esm/Label.js";
6
- import { MENSAJE } from "./constant.js";
7
- import "./index.css";
8
- const CustomInputFile = ({
9
- accept,
10
- className = "",
11
- id,
12
- label,
13
- name,
14
- onChange
15
- }) => {
16
- const [fileName, setFileName] = useState(label || LABEL_FILE);
17
- const { LABEL_FILE } = MENSAJE;
18
- const handleFileChange = (event) => {
19
- const files = event.target.files;
20
- if (files.length > 0) {
21
- setFileName(files[0].name);
22
- } else {
23
- setFileName(label || LABEL_FILE);
24
- }
25
- if (onChange) {
26
- onChange(event);
27
- }
28
- };
29
- return /* @__PURE__ */ jsxs(FormGroup, { className: `custom-file ${className}`, children: [
30
- /* @__PURE__ */ jsx(Label, { for: id, className: "custom-file-label", children: fileName }),
31
- /* @__PURE__ */ jsx(
32
- Input,
33
- {
34
- id,
35
- name,
36
- accept,
37
- type: "file",
38
- onChange: handleFileChange,
39
- className: "custom-file-input"
40
- }
41
- )
42
- ] });
43
- };
44
- export {
45
- CustomInputFile
46
- };
47
- //# sourceMappingURL=CustomInputFile.js.map
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { useState } from "react";
3
+ import FormGroup from "../node_modules/@neolution-ch/reactstrap/esm/FormGroup.js";
4
+ import Input from "../node_modules/@neolution-ch/reactstrap/esm/Input.js";
5
+ import Label from "../node_modules/@neolution-ch/reactstrap/esm/Label.js";
6
+ import { MENSAJE } from "./constant.js";
7
+ import "./index.css";
8
+ const CustomInputFile = ({
9
+ accept,
10
+ className = "",
11
+ id,
12
+ label,
13
+ name,
14
+ onChange
15
+ }) => {
16
+ const [fileName, setFileName] = useState(label || LABEL_FILE);
17
+ const { LABEL_FILE } = MENSAJE;
18
+ const handleFileChange = (event) => {
19
+ const files = event.target.files;
20
+ if (files.length > 0) {
21
+ setFileName(files[0].name);
22
+ } else {
23
+ setFileName(label || LABEL_FILE);
24
+ }
25
+ if (onChange) {
26
+ onChange(event);
27
+ }
28
+ };
29
+ return /* @__PURE__ */ jsxs(FormGroup, { className: `custom-file ${className}`, children: [
30
+ /* @__PURE__ */ jsx(Label, { for: id, className: "custom-file-label", children: fileName }),
31
+ /* @__PURE__ */ jsx(
32
+ Input,
33
+ {
34
+ id,
35
+ name,
36
+ accept,
37
+ type: "file",
38
+ onChange: handleFileChange,
39
+ className: "custom-file-input"
40
+ }
41
+ )
42
+ ] });
43
+ };
44
+ export {
45
+ CustomInputFile
46
+ };
47
+ //# sourceMappingURL=CustomInputFile.js.map
@@ -1,68 +1,68 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import FormGroup from "../node_modules/@neolution-ch/reactstrap/esm/FormGroup.js";
3
- import Input from "../node_modules/@neolution-ch/reactstrap/esm/Input.js";
4
- import Label from "../node_modules/@neolution-ch/reactstrap/esm/Label.js";
5
- import "./index.css";
6
- const CustomInputRadio = ({
7
- className,
8
- customClassName,
9
- checked,
10
- disabled,
11
- id,
12
- inline,
13
- label,
14
- name,
15
- onChange,
16
- direction = "row"
17
- }) => {
18
- return /* @__PURE__ */ jsx(
19
- FormGroup,
20
- {
21
- inline,
22
- className: `custom-radio ${customClassName || ""}`,
23
- children: /* @__PURE__ */ jsxs(
24
- "div",
25
- {
26
- style: {
27
- display: "flex",
28
- flexDirection: direction,
29
- alignItems: "center",
30
- justifyContent: "center"
31
- },
32
- children: [
33
- /* @__PURE__ */ jsx(
34
- Input,
35
- {
36
- id,
37
- type: "radio",
38
- name,
39
- checked,
40
- onChange,
41
- disabled,
42
- className
43
- }
44
- ),
45
- /* @__PURE__ */ jsx(
46
- Label,
47
- {
48
- check: true,
49
- htmlFor: id,
50
- style: {
51
- alignItems: "center",
52
- justifyContent: "center",
53
- height: "25px",
54
- width: "25px"
55
- }
56
- }
57
- ),
58
- /* @__PURE__ */ jsx("div", { children: label })
59
- ]
60
- }
61
- )
62
- }
63
- );
64
- };
65
- export {
66
- CustomInputRadio
67
- };
68
- //# sourceMappingURL=CustomInputRadio.js.map
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import FormGroup from "../node_modules/@neolution-ch/reactstrap/esm/FormGroup.js";
3
+ import Input from "../node_modules/@neolution-ch/reactstrap/esm/Input.js";
4
+ import Label from "../node_modules/@neolution-ch/reactstrap/esm/Label.js";
5
+ import "./index.css";
6
+ const CustomInputRadio = ({
7
+ className,
8
+ customClassName,
9
+ checked,
10
+ disabled,
11
+ id,
12
+ inline,
13
+ label,
14
+ name,
15
+ onChange,
16
+ direction = "row"
17
+ }) => {
18
+ return /* @__PURE__ */ jsx(
19
+ FormGroup,
20
+ {
21
+ inline,
22
+ className: `custom-radio ${customClassName || ""}`,
23
+ children: /* @__PURE__ */ jsxs(
24
+ "div",
25
+ {
26
+ style: {
27
+ display: "flex",
28
+ flexDirection: direction,
29
+ alignItems: "center",
30
+ justifyContent: "center"
31
+ },
32
+ children: [
33
+ /* @__PURE__ */ jsx(
34
+ Input,
35
+ {
36
+ id,
37
+ type: "radio",
38
+ name,
39
+ checked,
40
+ onChange,
41
+ disabled,
42
+ className
43
+ }
44
+ ),
45
+ /* @__PURE__ */ jsx(
46
+ Label,
47
+ {
48
+ check: true,
49
+ htmlFor: id,
50
+ style: {
51
+ alignItems: "center",
52
+ justifyContent: "center",
53
+ height: "25px",
54
+ width: "25px"
55
+ }
56
+ }
57
+ ),
58
+ /* @__PURE__ */ jsx("div", { children: label })
59
+ ]
60
+ }
61
+ )
62
+ }
63
+ );
64
+ };
65
+ export {
66
+ CustomInputRadio
67
+ };
68
+ //# sourceMappingURL=CustomInputRadio.js.map
@@ -1,5 +1,5 @@
1
- const MENSAJE = { LABEL_FILE: "Elija el archivo..." };
2
- export {
3
- MENSAJE
4
- };
5
- //# sourceMappingURL=constant.js.map
1
+ const MENSAJE = { LABEL_FILE: "Elija el archivo..." };
2
+ export {
3
+ MENSAJE
4
+ };
5
+ //# sourceMappingURL=constant.js.map
@@ -1,12 +1,12 @@
1
- import "./index.css";
2
- import { CustomInputCheckbox } from "./CustomInputCheckbox.js";
3
- import { CustomInputRadio } from "./CustomInputRadio.js";
4
- import { CustomInputFile } from "./CustomInputFile.js";
5
- import { CustomInputCurrency } from "./CustomInputCurrency.js";
6
- export {
7
- CustomInputCheckbox,
8
- CustomInputCurrency,
9
- CustomInputFile,
10
- CustomInputRadio
11
- };
12
- //# sourceMappingURL=index.js.map
1
+ import "./index.css";
2
+ import { CustomInputCheckbox } from "./CustomInputCheckbox.js";
3
+ import { CustomInputRadio } from "./CustomInputRadio.js";
4
+ import { CustomInputFile } from "./CustomInputFile.js";
5
+ import { CustomInputCurrency } from "./CustomInputCurrency.js";
6
+ export {
7
+ CustomInputCheckbox,
8
+ CustomInputCurrency,
9
+ CustomInputFile,
10
+ CustomInputRadio
11
+ };
12
+ //# sourceMappingURL=index.js.map
@@ -1,83 +1,83 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import { useRef, useState, useMemo, useEffect } from "react";
3
- function DropzoneComponent({
4
- config = {},
5
- djsConfig = {},
6
- eventHandlers = {},
7
- className = "",
8
- action,
9
- children
10
- }) {
11
- const dropzoneRef = useRef(null);
12
- const dropzoneInstance = useRef(null);
13
- const [files, setFiles] = useState([]);
14
- const options = useMemo(() => {
15
- return {
16
- ...config.postUrl ? { url: config.postUrl } : {},
17
- ...djsConfig
18
- };
19
- }, [config.postUrl, djsConfig]);
20
- const setupEvents = (dz) => {
21
- if (!eventHandlers) return;
22
- Object.entries(eventHandlers).forEach(([event, handler]) => {
23
- if (!handler) return;
24
- const handlers = Array.isArray(handler) ? handler : [handler];
25
- handlers.forEach((fn) => {
26
- if (event === "init") {
27
- fn(dz);
28
- } else {
29
- dz.on(event, fn);
30
- }
31
- });
32
- });
33
- dz.on("addedfile", (file) => {
34
- if (!file) return;
35
- setFiles((prev) => [...prev, file]);
36
- });
37
- dz.on("removedfile", (file) => {
38
- if (!file) return;
39
- setFiles(
40
- (prev) => prev.filter((f) => !(f.name === file.name && f.size === file.size))
41
- );
42
- });
43
- };
44
- useEffect(() => {
45
- let mounted = true;
46
- const initDropzone = async () => {
47
- const { default: Dropzone } = await import("../node_modules/dropzone/dist/dropzone.js");
48
- if (!mounted) return;
49
- Dropzone.autoDiscover = false;
50
- const node = config.dropzoneSelector || dropzoneRef.current;
51
- if (!node) return;
52
- const dz = new Dropzone(node, options);
53
- dropzoneInstance.current = dz;
54
- setupEvents(dz);
55
- };
56
- initDropzone();
57
- return () => {
58
- mounted = false;
59
- const dz = dropzoneInstance.current;
60
- if (!dz) return;
61
- dz.off();
62
- dz.destroy();
63
- };
64
- }, []);
65
- useEffect(() => {
66
- const dz = dropzoneInstance.current;
67
- if (!dz) return;
68
- dz.options = {
69
- ...dz.options,
70
- ...djsConfig,
71
- ...config.postUrl ? { url: config.postUrl } : {}
72
- };
73
- }, [config.postUrl, djsConfig]);
74
- const dropzoneClass = className ? `filepicker dropzone ${className}` : "filepicker dropzone";
75
- if (!config.postUrl && action) {
76
- return /* @__PURE__ */ jsx("form", { ref: dropzoneRef, action, className: dropzoneClass, children });
77
- }
78
- return /* @__PURE__ */ jsx("div", { ref: dropzoneRef, className: dropzoneClass, children });
79
- }
80
- export {
81
- DropzoneComponent as default
82
- };
83
- //# sourceMappingURL=DropzoneComponent.js.map
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { useRef, useState, useMemo, useEffect } from "react";
3
+ function DropzoneComponent({
4
+ config = {},
5
+ djsConfig = {},
6
+ eventHandlers = {},
7
+ className = "",
8
+ action,
9
+ children
10
+ }) {
11
+ const dropzoneRef = useRef(null);
12
+ const dropzoneInstance = useRef(null);
13
+ const [files, setFiles] = useState([]);
14
+ const options = useMemo(() => {
15
+ return {
16
+ ...config.postUrl ? { url: config.postUrl } : {},
17
+ ...djsConfig
18
+ };
19
+ }, [config.postUrl, djsConfig]);
20
+ const setupEvents = (dz) => {
21
+ if (!eventHandlers) return;
22
+ Object.entries(eventHandlers).forEach(([event, handler]) => {
23
+ if (!handler) return;
24
+ const handlers = Array.isArray(handler) ? handler : [handler];
25
+ handlers.forEach((fn) => {
26
+ if (event === "init") {
27
+ fn(dz);
28
+ } else {
29
+ dz.on(event, fn);
30
+ }
31
+ });
32
+ });
33
+ dz.on("addedfile", (file) => {
34
+ if (!file) return;
35
+ setFiles((prev) => [...prev, file]);
36
+ });
37
+ dz.on("removedfile", (file) => {
38
+ if (!file) return;
39
+ setFiles(
40
+ (prev) => prev.filter((f) => !(f.name === file.name && f.size === file.size))
41
+ );
42
+ });
43
+ };
44
+ useEffect(() => {
45
+ let mounted = true;
46
+ const initDropzone = async () => {
47
+ const { default: Dropzone } = await import("../node_modules/dropzone/dist/dropzone.js");
48
+ if (!mounted) return;
49
+ Dropzone.autoDiscover = false;
50
+ const node = config.dropzoneSelector || dropzoneRef.current;
51
+ if (!node) return;
52
+ const dz = new Dropzone(node, options);
53
+ dropzoneInstance.current = dz;
54
+ setupEvents(dz);
55
+ };
56
+ initDropzone();
57
+ return () => {
58
+ mounted = false;
59
+ const dz = dropzoneInstance.current;
60
+ if (!dz) return;
61
+ dz.off();
62
+ dz.destroy();
63
+ };
64
+ }, []);
65
+ useEffect(() => {
66
+ const dz = dropzoneInstance.current;
67
+ if (!dz) return;
68
+ dz.options = {
69
+ ...dz.options,
70
+ ...djsConfig,
71
+ ...config.postUrl ? { url: config.postUrl } : {}
72
+ };
73
+ }, [config.postUrl, djsConfig]);
74
+ const dropzoneClass = className ? `filepicker dropzone ${className}` : "filepicker dropzone";
75
+ if (!config.postUrl && action) {
76
+ return /* @__PURE__ */ jsx("form", { ref: dropzoneRef, action, className: dropzoneClass, children });
77
+ }
78
+ return /* @__PURE__ */ jsx("div", { ref: dropzoneRef, className: dropzoneClass, children });
79
+ }
80
+ export {
81
+ DropzoneComponent as default
82
+ };
83
+ //# sourceMappingURL=DropzoneComponent.js.map