1mpacto-react-ui 2.0.19 → 2.0.21
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/dist/assets/style.css +1 -1
- package/dist/components/Alert/index.cjs +1 -1
- package/dist/components/Alert/index.mjs +40 -40
- package/dist/components/Breadcrumbs/Breadcrumbs.cjs +3 -3
- package/dist/components/Breadcrumbs/Breadcrumbs.mjs +43 -43
- package/dist/components/ButtonPopover/ButtonPopover.cjs +1 -1
- package/dist/components/ButtonPopover/ButtonPopover.mjs +28 -31
- package/dist/components/Calendar/Calendar.cjs +1 -1
- package/dist/components/Calendar/Calendar.mjs +98 -100
- package/dist/components/Calendar/CalendarMonth.cjs +1 -1
- package/dist/components/Calendar/CalendarMonth.mjs +41 -42
- package/dist/components/Calendar/CalendarRange.cjs +1 -1
- package/dist/components/Calendar/CalendarRange.mjs +59 -61
- package/dist/components/Calendar/CalendarYear.cjs +2 -2
- package/dist/components/Calendar/CalendarYear.mjs +37 -38
- package/dist/components/Chart/DoughnutChart.cjs +1 -1
- package/dist/components/Chart/DoughnutChart.mjs +93 -96
- package/dist/components/Chart/GradientBarChart.cjs +1 -1
- package/dist/components/Chart/GradientBarChart.mjs +80 -81
- package/dist/components/Chart/GradientLineChart.cjs +1 -1
- package/dist/components/Chart/GradientLineChart.mjs +50 -51
- package/dist/components/Chart/LineChart.cjs +1 -1
- package/dist/components/Chart/LineChart.mjs +23 -23
- package/dist/components/Chart/PieChart.cjs +1 -1
- package/dist/components/Chart/PieChart.mjs +45 -48
- package/dist/components/Collapse/Collapse.cjs +1 -1
- package/dist/components/Collapse/Collapse.mjs +23 -24
- package/dist/components/DatePicker/DatePicker.cjs +1 -1
- package/dist/components/DatePicker/DatePicker.mjs +86 -89
- package/dist/components/DatePicker/DateRangePicker.cjs +1 -1
- package/dist/components/DatePicker/DateRangePicker.mjs +91 -92
- package/dist/components/DatePicker/FilterDate.cjs +1 -1
- package/dist/components/DatePicker/FilterDate.mjs +107 -110
- package/dist/components/DatePicker/MonthYearPicker.cjs +1 -1
- package/dist/components/DatePicker/MonthYearPicker.mjs +51 -53
- package/dist/components/FilterContainer/FilterContainer.cjs +1 -1
- package/dist/components/FilterContainer/FilterContainer.mjs +27 -27
- package/dist/components/Input/InputFloatingInner.cjs +5 -5
- package/dist/components/Input/InputFloatingInner.mjs +24 -25
- package/dist/components/NumberFormat/NumberFormat.cjs +1 -1
- package/dist/components/NumberFormat/NumberFormat.mjs +12 -13
- package/dist/components/Pagination/Pagination.cjs +2 -2
- package/dist/components/Pagination/Pagination.mjs +76 -80
- package/dist/components/SelectDropdownContainer/SelectDropdownContainer.cjs +1 -1
- package/dist/components/SelectDropdownContainer/SelectDropdownContainer.mjs +98 -102
- package/dist/components/Sidebar/ItemSidebar.cjs +8 -8
- package/dist/components/Sidebar/ItemSidebar.mjs +71 -72
- package/dist/components/Sidebar/Sidebar.cjs +1 -1
- package/dist/components/Sidebar/Sidebar.mjs +65 -68
- package/dist/components/Step/Step.cjs +5 -5
- package/dist/components/Step/Step.mjs +52 -52
- package/dist/components/Table/Table.cjs +3 -3
- package/dist/components/Table/Table.mjs +275 -298
- package/dist/components/Table/TableSubMobile.cjs +1 -1
- package/dist/components/Table/TableSubMobile.mjs +32 -35
- package/dist/components/Tabs/Tabs.cjs +8 -8
- package/dist/components/Tabs/Tabs.mjs +66 -70
- package/dist/components/Textarea/Textarea.cjs +7 -7
- package/dist/components/Textarea/Textarea.mjs +47 -50
- package/dist/components/Textarea/TextareaFloatingInner.cjs +6 -6
- package/dist/components/Textarea/TextareaFloatingInner.mjs +56 -61
- package/dist/components/Textarea/TextareaInnerLabel.cjs +6 -6
- package/dist/components/Textarea/TextareaInnerLabel.mjs +47 -50
- package/dist/components/TimeRange/TimeRange.cjs +1 -1
- package/dist/components/TimeRange/TimeRange.mjs +88 -91
- package/dist/components/Tooltip/Tooltip.cjs +1 -1
- package/dist/components/Tooltip/Tooltip.mjs +44 -46
- package/dist/components/Upload/UploadFile.cjs +1 -1
- package/dist/components/Upload/UploadFile.mjs +50 -54
- package/dist/components/Upload/UploadImage.cjs +3 -3
- package/dist/components/Upload/UploadImage.mjs +62 -68
- package/dist/components/Upload/UploadMultipleFile.cjs +1 -1
- package/dist/components/Upload/UploadMultipleFile.mjs +61 -62
- package/dist/components/Virtualization/ListVirtualization.cjs +1 -1
- package/dist/components/Virtualization/ListVirtualization.mjs +52 -55
- package/dist/components/Virtualization/TableVirtualization.cjs +1 -1
- package/dist/components/Virtualization/TableVirtualization.mjs +56 -59
- package/dist/config/components/tinymce.cjs +2 -2
- package/dist/config/components/tinymce.mjs +3 -3
- package/dist/hooks/useCountdown.cjs +1 -1
- package/dist/hooks/useCountdown.mjs +15 -15
- package/dist/hooks/useDebounce.cjs +1 -0
- package/dist/hooks/useDebounce.mjs +27 -0
- package/dist/hooks/useOtpInput.cjs +1 -1
- package/dist/hooks/useOtpInput.mjs +47 -51
- package/dist/hooks/usePacked.cjs +1 -0
- package/dist/hooks/usePacked.mjs +56 -0
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +52 -48
- package/dist/package.json.cjs +1 -1
- package/dist/package.json.d.ts +5 -4
- package/dist/package.json.mjs +1 -1
- package/dist/src/hooks/index.d.ts +4 -2
- package/dist/src/hooks/useDebounce.d.ts +61 -0
- package/dist/src/hooks/usePacked.d.ts +84 -0
- package/dist/utils/common.cjs +1 -1
- package/dist/utils/common.mjs +172 -173
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),l=require("react"),h=require("./Tooltip.module.scss.cjs"),x=require("../Popover/Popover.cjs"),y=require("../../config/tailwind/colors.cjs"),M=({id:v="1ru-tooltip",children:m,text:S,zIndexPopover:T=1,onShow:s,onClose:i,placement:k="top",backgroundColor:u="black",popoverProps:w={},arrowProps:C={},className:b,isHover:c,delay:I=600})=>{let r;const n=l.useRef(null),a={backgroundColor:y.default[u]||u},[o,f]=l.useState(!1),[j,d]=l.useState(!1),p=e=>{n.current?.handlerShow(e),d(!0),typeof s=="function"&&s()},g=()=>{d(!1),o||(clearInterval(r),n.current?.setShow(!1),typeof i=="function"&&i())};return t.jsxs(t.Fragment,{children:[t.jsx("div",{id:v,onMouseEnter:e=>{if(c&&!o){const q=e.currentTarget;r=setTimeout(()=>{p({...e,currentTarget:q})},I)}},onMouseLeave:()=>{c&&!o&&g()},onClick:e=>{f(!0),clearInterval(r),j||p(e)},className:h.default.container,children:m}),t.jsx(x.default,{floatingOptions:{placement:k},ref:n,id:"1ru-popover-tooltip",offset:10,withArrow:!0,zIndex:T,onClose:()=>{o&&(f(!1),g())},styleInnerPopover:{backgroundColor:a.backgroundColor},propsArrow:{fill:a.backgroundColor,...C},className:`${h.default["container-popover"]} ${b??""}`,...w,children:S})]})};exports.default=M;
|
|
@@ -1,73 +1,71 @@
|
|
|
1
|
-
import { jsxs as j, Fragment as A, jsx as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import { jsxs as j, Fragment as A, jsx as d } from "react/jsx-runtime";
|
|
2
|
+
import n from "react";
|
|
3
|
+
import h from "./Tooltip.module.scss.mjs";
|
|
4
4
|
import M from "../Popover/Popover.mjs";
|
|
5
5
|
import N from "../../config/tailwind/colors.mjs";
|
|
6
6
|
const F = ({
|
|
7
|
-
id:
|
|
8
|
-
children:
|
|
9
|
-
text:
|
|
10
|
-
zIndexPopover:
|
|
11
|
-
onShow:
|
|
12
|
-
onClose:
|
|
13
|
-
placement:
|
|
14
|
-
backgroundColor:
|
|
15
|
-
popoverProps:
|
|
16
|
-
arrowProps:
|
|
17
|
-
className:
|
|
18
|
-
isHover:
|
|
19
|
-
delay:
|
|
7
|
+
id: g = "1ru-tooltip",
|
|
8
|
+
children: k,
|
|
9
|
+
text: v,
|
|
10
|
+
zIndexPopover: w = 1,
|
|
11
|
+
onShow: s,
|
|
12
|
+
onClose: l,
|
|
13
|
+
placement: C = "top",
|
|
14
|
+
backgroundColor: i = "black",
|
|
15
|
+
popoverProps: I = {},
|
|
16
|
+
arrowProps: S = {},
|
|
17
|
+
className: T,
|
|
18
|
+
isHover: a,
|
|
19
|
+
delay: b = 600
|
|
20
20
|
}) => {
|
|
21
|
-
let
|
|
22
|
-
const
|
|
23
|
-
backgroundColor: N[
|
|
24
|
-
}, [e,
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
var o;
|
|
29
|
-
u(!1), e || (clearInterval(r), (o = n.current) == null || o.setShow(!1), typeof i == "function" && i());
|
|
21
|
+
let t;
|
|
22
|
+
const r = n.useRef(null), c = {
|
|
23
|
+
backgroundColor: N[i] || i
|
|
24
|
+
}, [e, f] = n.useState(!1), [x, p] = n.useState(!1), u = (o) => {
|
|
25
|
+
r.current?.handlerShow(o), p(!0), typeof s == "function" && s();
|
|
26
|
+
}, m = () => {
|
|
27
|
+
p(!1), e || (clearInterval(t), r.current?.setShow(!1), typeof l == "function" && l());
|
|
30
28
|
};
|
|
31
29
|
return /* @__PURE__ */ j(A, { children: [
|
|
32
|
-
/* @__PURE__ */
|
|
30
|
+
/* @__PURE__ */ d(
|
|
33
31
|
"div",
|
|
34
32
|
{
|
|
35
|
-
id:
|
|
33
|
+
id: g,
|
|
36
34
|
onMouseEnter: (o) => {
|
|
37
|
-
if (
|
|
38
|
-
const
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
},
|
|
35
|
+
if (a && !e) {
|
|
36
|
+
const y = o.currentTarget;
|
|
37
|
+
t = setTimeout(() => {
|
|
38
|
+
u({ ...o, currentTarget: y });
|
|
39
|
+
}, b);
|
|
42
40
|
}
|
|
43
41
|
},
|
|
44
42
|
onMouseLeave: () => {
|
|
45
|
-
|
|
43
|
+
a && !e && m();
|
|
46
44
|
},
|
|
47
45
|
onClick: (o) => {
|
|
48
|
-
|
|
46
|
+
f(!0), clearInterval(t), x || u(o);
|
|
49
47
|
},
|
|
50
|
-
className:
|
|
51
|
-
children:
|
|
48
|
+
className: h.container,
|
|
49
|
+
children: k
|
|
52
50
|
}
|
|
53
51
|
),
|
|
54
|
-
/* @__PURE__ */
|
|
52
|
+
/* @__PURE__ */ d(
|
|
55
53
|
M,
|
|
56
54
|
{
|
|
57
|
-
floatingOptions: { placement:
|
|
58
|
-
ref:
|
|
55
|
+
floatingOptions: { placement: C },
|
|
56
|
+
ref: r,
|
|
59
57
|
id: "1ru-popover-tooltip",
|
|
60
58
|
offset: 10,
|
|
61
59
|
withArrow: !0,
|
|
62
|
-
zIndex:
|
|
60
|
+
zIndex: w,
|
|
63
61
|
onClose: () => {
|
|
64
|
-
e && (
|
|
62
|
+
e && (f(!1), m());
|
|
65
63
|
},
|
|
66
|
-
styleInnerPopover: { backgroundColor:
|
|
67
|
-
propsArrow: { fill:
|
|
68
|
-
className: `${
|
|
69
|
-
...
|
|
70
|
-
children:
|
|
64
|
+
styleInnerPopover: { backgroundColor: c.backgroundColor },
|
|
65
|
+
propsArrow: { fill: c.backgroundColor, ...S },
|
|
66
|
+
className: `${h["container-popover"]} ${T ?? ""}`,
|
|
67
|
+
...I,
|
|
68
|
+
children: v
|
|
71
69
|
}
|
|
72
70
|
)
|
|
73
71
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),C=require("react"),R=require("../Input/InputReguler.cjs"),y=require("./UploadFile.module.scss.cjs"),B=()=>t.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M6.19544 6.19126C6.32045 6.06628 6.48999 5.99607 6.66677 5.99607C6.84354 5.99607 7.01308 6.06628 7.1381 6.19126L10.0001 9.05326L12.8621 6.19126C12.9236 6.12758 12.9972 6.0768 13.0785 6.04186C13.1598 6.00692 13.2473 5.98853 13.3358 5.98776C13.4244 5.98699 13.5121 6.00386 13.5941 6.03738C13.676 6.0709 13.7504 6.1204 13.813 6.18299C13.8756 6.24559 13.9251 6.32002 13.9587 6.40195C13.9922 6.48389 14.009 6.57167 14.0083 6.66019C14.0075 6.74871 13.9891 6.83619 13.9542 6.91753C13.9192 6.99886 13.8684 7.07243 13.8048 7.13392L10.9428 9.99592L13.8048 12.8579C13.9262 12.9837 13.9934 13.1521 13.9919 13.3269C13.9904 13.5017 13.9203 13.6689 13.7966 13.7925C13.673 13.9161 13.5058 13.9862 13.331 13.9877C13.1562 13.9892 12.9878 13.922 12.8621 13.8006L10.0001 10.9386L7.1381 13.8006C7.01237 13.922 6.84397 13.9892 6.66917 13.9877C6.49437 13.9862 6.32716 13.9161 6.20356 13.7925C6.07995 13.6689 6.00984 13.5017 6.00832 13.3269C6.0068 13.1521 6.074 12.9837 6.19544 12.8579L9.05744 9.99592L6.19544 7.13392C6.07045 7.00891 6.00024 6.83937 6.00024 6.66259C6.00024 6.48581 6.07045 6.31628 6.19544 6.19126Z",fill:"#212121"})}),E=()=>t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:t.jsx("path",{d:"M2 11.3334V4.66671C2 4.31309 2.14048 3.97395 2.39052 3.7239C2.64057 3.47385 2.97971 3.33337 3.33333 3.33337H7.33333L8.66667 4.66671H12.6667C13.0203 4.66671 13.3594 4.80718 13.6095 5.05723C13.8595 5.30728 14 5.64642 14 6.00004V11.3334C14 11.687 13.8595 12.0261 13.6095 12.2762C13.3594 12.5262 13.0203 12.6667 12.6667 12.6667H3.33333C2.97971 12.6667 2.64057 12.5262 2.39052 12.2762C2.14048 12.0261 2 11.687 2 11.3334Z",stroke:"#9E9E9E",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),h=f=>{const r=C.useRef(null),{fileName:l,onChange:i,maxFile:g,maxSize:s=2,validateFile:o,error:a,label:p,inputProps:m,priorityError:v="external",eventError:x}=f,u=o||["image/png","image/jpeg","image/jpg"],[c,k]=C.useState(""),j={internal:c||a,external:a||c},w=e=>{if(e?.length){const d=e[0],F=d.size/1024/1024;let n="";if(u.some(M=>e[0].type?.includes(M))?F>s?n=`${e.length>1?"Jumlah u":"U"}kuran berkas tidak boleh melebihi ${s}MB.`:i(d):n="Berkas tidak didukung, silahkan pilih file kembali.",k(n),x?.(n),!r?.current)return;r.current.value=""}},L=e=>{e.preventDefault(),r?.current&&r.current?.click()},b=e=>{e.preventDefault(),r?.current&&(i(null),r.current.value="")};return t.jsxs(t.Fragment,{children:[t.jsx("input",{accept:u?.join(", "),ref:r,hidden:!0,type:"file",max:g,onChange:e=>{w(e.target.files)}}),t.jsx(R.default,{sizeInput:"medium",placeholder:"Pilih Berkas",label:p,value:l,readOnly:!0,onClick:e=>L(e),startIcon:t.jsx(E,{}),endIcon:l&&t.jsx("div",{className:y.default["button-remove"],onClick:e=>b(e),children:t.jsx(B,{})}),error:j[v],...m})]})};h.displayName="UploadFile";exports.default=h;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
const
|
|
1
|
+
import { jsxs as F, Fragment as R, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import d from "react";
|
|
3
|
+
import b from "../Input/InputReguler.mjs";
|
|
4
|
+
import j from "./UploadFile.module.scss.mjs";
|
|
5
|
+
const I = () => /* @__PURE__ */ r("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ r(
|
|
6
6
|
"path",
|
|
7
7
|
{
|
|
8
8
|
fillRule: "evenodd",
|
|
@@ -10,7 +10,7 @@ const z = () => /* @__PURE__ */ n("svg", { width: "20", height: "20", viewBox: "
|
|
|
10
10
|
d: "M6.19544 6.19126C6.32045 6.06628 6.48999 5.99607 6.66677 5.99607C6.84354 5.99607 7.01308 6.06628 7.1381 6.19126L10.0001 9.05326L12.8621 6.19126C12.9236 6.12758 12.9972 6.0768 13.0785 6.04186C13.1598 6.00692 13.2473 5.98853 13.3358 5.98776C13.4244 5.98699 13.5121 6.00386 13.5941 6.03738C13.676 6.0709 13.7504 6.1204 13.813 6.18299C13.8756 6.24559 13.9251 6.32002 13.9587 6.40195C13.9922 6.48389 14.009 6.57167 14.0083 6.66019C14.0075 6.74871 13.9891 6.83619 13.9542 6.91753C13.9192 6.99886 13.8684 7.07243 13.8048 7.13392L10.9428 9.99592L13.8048 12.8579C13.9262 12.9837 13.9934 13.1521 13.9919 13.3269C13.9904 13.5017 13.9203 13.6689 13.7966 13.7925C13.673 13.9161 13.5058 13.9862 13.331 13.9877C13.1562 13.9892 12.9878 13.922 12.8621 13.8006L10.0001 10.9386L7.1381 13.8006C7.01237 13.922 6.84397 13.9892 6.66917 13.9877C6.49437 13.9862 6.32716 13.9161 6.20356 13.7925C6.07995 13.6689 6.00984 13.5017 6.00832 13.3269C6.0068 13.1521 6.074 12.9837 6.19544 12.8579L9.05744 9.99592L6.19544 7.13392C6.07045 7.00891 6.00024 6.83937 6.00024 6.66259C6.00024 6.48581 6.07045 6.31628 6.19544 6.19126Z",
|
|
11
11
|
fill: "#212121"
|
|
12
12
|
}
|
|
13
|
-
) }),
|
|
13
|
+
) }), M = () => /* @__PURE__ */ r("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ r(
|
|
14
14
|
"path",
|
|
15
15
|
{
|
|
16
16
|
d: "M2 11.3334V4.66671C2 4.31309 2.14048 3.97395 2.39052 3.7239C2.64057 3.47385 2.97971 3.33337 3.33333 3.33337H7.33333L8.66667 4.66671H12.6667C13.0203 4.66671 13.3594 4.80718 13.6095 5.05723C13.8595 5.30728 14 5.64642 14 6.00004V11.3334C14 11.687 13.8595 12.0261 13.6095 12.2762C13.3594 12.5262 13.0203 12.6667 12.6667 12.6667H3.33333C2.97971 12.6667 2.64057 12.5262 2.39052 12.2762C2.14048 12.0261 2 11.687 2 11.3334Z",
|
|
@@ -19,76 +19,72 @@ const z = () => /* @__PURE__ */ n("svg", { width: "20", height: "20", viewBox: "
|
|
|
19
19
|
strokeLinecap: "round",
|
|
20
20
|
strokeLinejoin: "round"
|
|
21
21
|
}
|
|
22
|
-
) }),
|
|
23
|
-
const
|
|
24
|
-
fileName:
|
|
25
|
-
onChange:
|
|
26
|
-
maxFile:
|
|
27
|
-
maxSize:
|
|
28
|
-
validateFile:
|
|
29
|
-
error:
|
|
30
|
-
label:
|
|
31
|
-
inputProps:
|
|
32
|
-
priorityError:
|
|
33
|
-
eventError:
|
|
34
|
-
} =
|
|
35
|
-
internal:
|
|
36
|
-
external:
|
|
37
|
-
},
|
|
38
|
-
if (e
|
|
39
|
-
const
|
|
40
|
-
let
|
|
41
|
-
if (
|
|
42
|
-
|
|
43
|
-
return (p = e[0].type) == null ? void 0 : p.includes(b);
|
|
44
|
-
}) ? F > a ? l = `${e.length > 1 ? "Jumlah u" : "U"}kuran berkas tidak boleh melebihi ${a}MB.` : u(t) : l = "Berkas tidak didukung, silahkan pilih file kembali.", w(l), o == null || o(l), !(r != null && r.current)) return;
|
|
45
|
-
r.current.value = "";
|
|
22
|
+
) }), z = (h) => {
|
|
23
|
+
const t = d.useRef(null), {
|
|
24
|
+
fileName: i,
|
|
25
|
+
onChange: l,
|
|
26
|
+
maxFile: p,
|
|
27
|
+
maxSize: o = 2,
|
|
28
|
+
validateFile: s,
|
|
29
|
+
error: a,
|
|
30
|
+
label: f,
|
|
31
|
+
inputProps: m,
|
|
32
|
+
priorityError: g = "external",
|
|
33
|
+
eventError: v
|
|
34
|
+
} = h, u = s || ["image/png", "image/jpeg", "image/jpg"], [c, k] = d.useState(""), w = {
|
|
35
|
+
internal: c || a,
|
|
36
|
+
external: a || c
|
|
37
|
+
}, x = (e) => {
|
|
38
|
+
if (e?.length) {
|
|
39
|
+
const C = e[0], B = C.size / 1024 / 1024;
|
|
40
|
+
let n = "";
|
|
41
|
+
if (u.some((E) => e[0].type?.includes(E)) ? B > o ? n = `${e.length > 1 ? "Jumlah u" : "U"}kuran berkas tidak boleh melebihi ${o}MB.` : l(C) : n = "Berkas tidak didukung, silahkan pilih file kembali.", k(n), v?.(n), !t?.current) return;
|
|
42
|
+
t.current.value = "";
|
|
46
43
|
}
|
|
44
|
+
}, L = (e) => {
|
|
45
|
+
e.preventDefault(), t?.current && t.current?.click();
|
|
47
46
|
}, y = (e) => {
|
|
48
|
-
|
|
49
|
-
e.preventDefault(), r != null && r.current && ((t = r.current) == null || t.click());
|
|
50
|
-
}, B = (e) => {
|
|
51
|
-
e.preventDefault(), r != null && r.current && (u(null), r.current.value = "");
|
|
47
|
+
e.preventDefault(), t?.current && (l(null), t.current.value = "");
|
|
52
48
|
};
|
|
53
|
-
return /* @__PURE__ */
|
|
54
|
-
/* @__PURE__ */
|
|
49
|
+
return /* @__PURE__ */ F(R, { children: [
|
|
50
|
+
/* @__PURE__ */ r(
|
|
55
51
|
"input",
|
|
56
52
|
{
|
|
57
|
-
accept:
|
|
58
|
-
ref:
|
|
53
|
+
accept: u?.join(", "),
|
|
54
|
+
ref: t,
|
|
59
55
|
hidden: !0,
|
|
60
56
|
type: "file",
|
|
61
|
-
max:
|
|
57
|
+
max: p,
|
|
62
58
|
onChange: (e) => {
|
|
63
|
-
|
|
59
|
+
x(e.target.files);
|
|
64
60
|
}
|
|
65
61
|
}
|
|
66
62
|
),
|
|
67
|
-
/* @__PURE__ */
|
|
68
|
-
|
|
63
|
+
/* @__PURE__ */ r(
|
|
64
|
+
b,
|
|
69
65
|
{
|
|
70
66
|
sizeInput: "medium",
|
|
71
67
|
placeholder: "Pilih Berkas",
|
|
72
|
-
label:
|
|
73
|
-
value:
|
|
68
|
+
label: f,
|
|
69
|
+
value: i,
|
|
74
70
|
readOnly: !0,
|
|
75
|
-
onClick: (e) =>
|
|
76
|
-
startIcon: /* @__PURE__ */
|
|
77
|
-
endIcon:
|
|
71
|
+
onClick: (e) => L(e),
|
|
72
|
+
startIcon: /* @__PURE__ */ r(M, {}),
|
|
73
|
+
endIcon: i && /* @__PURE__ */ r(
|
|
78
74
|
"div",
|
|
79
75
|
{
|
|
80
|
-
className:
|
|
81
|
-
onClick: (e) =>
|
|
82
|
-
children: /* @__PURE__ */
|
|
76
|
+
className: j["button-remove"],
|
|
77
|
+
onClick: (e) => y(e),
|
|
78
|
+
children: /* @__PURE__ */ r(I, {})
|
|
83
79
|
}
|
|
84
80
|
),
|
|
85
|
-
error:
|
|
86
|
-
...
|
|
81
|
+
error: w[g],
|
|
82
|
+
...m
|
|
87
83
|
}
|
|
88
84
|
)
|
|
89
85
|
] });
|
|
90
86
|
};
|
|
91
|
-
|
|
87
|
+
z.displayName = "UploadFile";
|
|
92
88
|
export {
|
|
93
|
-
|
|
89
|
+
z as default
|
|
94
90
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),g=require("react"),$=require("../Button/Button.cjs"),n=require("./UploadImage.module.scss.cjs"),R=({className:r})=>t.jsx("svg",{viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",className:`iru-h-5 iru-w-5 iru-text-red-600 ${r??""}`,fill:"currentColor",children:t.jsx("g",{id:"x",children:t.jsx("path",{id:"Vector",fillRule:"evenodd",clipRule:"evenodd",d:`M6.19544 6.19126C6.32045 6.06628 6.48999 5.99607 6.66677 5.99607C6.84354 5.99607 7.01308 6.06628 7.1381 \r
|
|
2
2
|
6.19126L10.0001 9.05326L12.8621 6.19126C12.9236 6.12758 12.9972 6.0768 13.0785 6.04186C13.1598 6.00692 13.2473 \r
|
|
3
3
|
5.98853 13.3358 5.98776C13.4244 5.98699 13.5121 6.00386 13.5941 6.03738C13.676 6.0709 13.7504 6.1204 13.813 \r
|
|
4
4
|
6.18299C13.8756 6.24559 13.9251 6.32002 13.9587 6.40195C13.9922 6.48389 14.009 6.57167 14.0083 6.66019C14.0075 \r
|
|
@@ -7,6 +7,6 @@
|
|
|
7
7
|
13.9161 13.5058 13.9862 13.331 13.9877C13.1562 13.9892 12.9878 13.922 12.8621 13.8006L10.0001 10.9386L7.1381 \r
|
|
8
8
|
13.8006C7.01237 13.922 6.84397 13.9892 6.66917 13.9877C6.49437 13.9862 6.32716 13.9161 6.20356 13.7925C6.07995 \r
|
|
9
9
|
13.6689 6.00984 13.5017 6.00832 13.3269C6.0068 13.1521 6.074 12.9837 6.19544 12.8579L9.05744 9.99592L6.19544 \r
|
|
10
|
-
7.13392C6.07045 7.00891 6.00024 6.83937 6.00024 6.66259C6.00024 6.48581 6.07045 6.31628 6.19544 6.19126Z`})})}),
|
|
10
|
+
7.13392C6.07045 7.00891 6.00024 6.83937 6.00024 6.66259C6.00024 6.48581 6.07045 6.31628 6.19544 6.19126Z`})})}),N=({className:r})=>t.jsx("svg",{viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:`iru-h-5 iru-w-5 ${r??""}`,children:t.jsx("g",{id:"upload",children:t.jsx("path",{id:"Vector",d:`M3.83337 13.3333V14.1666C3.83337 14.8297 4.09677 15.4656 4.56561 15.9344C5.03445 16.4033 5.67033 \r
|
|
11
11
|
16.6666 6.33337 16.6666H14.6667C15.3297 16.6666 15.9656 16.4033 16.4345 15.9344C16.9033 15.4656 17.1667 \r
|
|
12
|
-
14.8297 17.1667 14.1666V13.3333M13.8334 6.66665L10.5 3.33331M10.5 3.33331L7.16671 6.66665M10.5 3.33331V13.3333`,stroke:"#1976D2",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}),
|
|
12
|
+
14.8297 17.1667 14.1666V13.3333M13.8334 6.66665L10.5 3.33331M10.5 3.33331L7.16671 6.66665M10.5 3.33331V13.3333`,stroke:"#1976D2",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}),y=({onChange:r,valueUrl:i,validateFile:p,validateFileDesc:k="Max 2MB (.jpg, .jpeg, .png, .svg)",maxSize:h=2,icon:D,desc:o,classNameContainer:L,classNameImage:c,classNameAction:w,id:l})=>{const s=g.useRef(null),m=p||["image/png","image/jpeg","image/jpg"],[a,x]=g.useState(""),[j,u]=g.useState(""),v=e=>{if(e?.length){const d=e[0],b=d.size/1024/1024;if(!m.some(f=>e[0].type?.includes(f)))u("Berkas tidak didukung, silahkan pilih file kembali.");else if(b>h){const f=`${e.length>1?"Jumlah u":"U"}kuran berkas tidak boleh melebihi ${h}MB.`;u(f)}else{if(!s?.current)return;u(""),r(d),x(URL.createObjectURL(d)),s.current.value=""}}},C=e=>{e.preventDefault(),v(e.dataTransfer.files)},M=e=>{e.preventDefault(),s?.current&&(typeof r=="function"&&r(null),x(""),s.current.value="")};return t.jsxs("div",{className:`${n.default.container} ${L}`,children:[t.jsx("input",{accept:m?.join(", "),ref:s,hidden:!0,type:"file",multiple:!1,onChange:e=>{e.target.files&&v(e.target.files)}}),a||i?t.jsx("div",{id:`${l}-exist`,className:`${n.default["image-content"]} ${c}`,onDrop:C,onDragOver:e=>e.preventDefault(),onDragLeave:e=>e.preventDefault(),children:t.jsx("img",{src:a||i,alt:"upload-image",className:`${n.default.image} ${c}`})}):t.jsxs("div",{id:l,className:`${n.default["image-content"]} ${c}`,onDrop:C,onDragOver:e=>e.preventDefault(),onDragLeave:e=>e.preventDefault(),children:[D,t.jsx("div",{className:n.default["text-desc"],children:typeof o=="function"?o():o})]}),t.jsxs("div",{className:n.default["action-content"],children:[t.jsxs("div",{className:`${n.default["button-content"]} ${w}`,children:[(a||i)&&t.jsx($.default,{id:`${l}-delete-img`,variants:"tertiary-red-600",size:"xs",startIcon:t.jsx(R,{}),onClick:e=>M(e),children:"Hapus"}),t.jsxs($.default,{id:`${l}-change-img`,variants:"tertiary-blue-700",size:"xs",onClick:()=>s.current?.click(),startIcon:t.jsx(N,{}),children:[a||i?"Ganti":"Pilih"," Gambar"]})]}),t.jsx("p",{className:n.default["text-desc"],children:k}),j&&t.jsx("p",{className:n.default["text-error"],children:j})]})]})};exports.default=y;
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
const
|
|
1
|
+
import { jsxs as l, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import g from "react";
|
|
3
|
+
import L from "../Button/Button.mjs";
|
|
4
|
+
import r from "./UploadImage.module.scss.mjs";
|
|
5
|
+
const b = ({ className: n }) => /* @__PURE__ */ t(
|
|
6
6
|
"svg",
|
|
7
7
|
{
|
|
8
8
|
viewBox: "0 0 20 20",
|
|
9
9
|
xmlns: "http://www.w3.org/2000/svg",
|
|
10
|
-
className: `iru-h-5 iru-w-5 iru-text-red-600 ${
|
|
10
|
+
className: `iru-h-5 iru-w-5 iru-text-red-600 ${n ?? ""}`,
|
|
11
11
|
fill: "currentColor",
|
|
12
|
-
children: /* @__PURE__ */
|
|
12
|
+
children: /* @__PURE__ */ t("g", { id: "x", children: /* @__PURE__ */ t(
|
|
13
13
|
"path",
|
|
14
14
|
{
|
|
15
15
|
id: "Vector",
|
|
@@ -28,14 +28,14 @@ const B = ({ className: i }) => /* @__PURE__ */ r(
|
|
|
28
28
|
}
|
|
29
29
|
) })
|
|
30
30
|
}
|
|
31
|
-
),
|
|
31
|
+
), y = ({ className: n }) => /* @__PURE__ */ t(
|
|
32
32
|
"svg",
|
|
33
33
|
{
|
|
34
34
|
viewBox: "0 0 20 20",
|
|
35
35
|
fill: "none",
|
|
36
36
|
xmlns: "http://www.w3.org/2000/svg",
|
|
37
|
-
className: `iru-h-5 iru-w-5 ${
|
|
38
|
-
children: /* @__PURE__ */
|
|
37
|
+
className: `iru-h-5 iru-w-5 ${n ?? ""}`,
|
|
38
|
+
children: /* @__PURE__ */ t("g", { id: "upload", children: /* @__PURE__ */ t(
|
|
39
39
|
"path",
|
|
40
40
|
{
|
|
41
41
|
id: "Vector",
|
|
@@ -49,46 +49,43 @@ const B = ({ className: i }) => /* @__PURE__ */ r(
|
|
|
49
49
|
}
|
|
50
50
|
) })
|
|
51
51
|
}
|
|
52
|
-
),
|
|
53
|
-
onChange:
|
|
54
|
-
valueUrl:
|
|
55
|
-
validateFile:
|
|
56
|
-
validateFileDesc:
|
|
57
|
-
maxSize:
|
|
58
|
-
icon:
|
|
59
|
-
desc:
|
|
60
|
-
classNameContainer:
|
|
52
|
+
), z = ({
|
|
53
|
+
onChange: n,
|
|
54
|
+
valueUrl: a,
|
|
55
|
+
validateFile: m,
|
|
56
|
+
validateFileDesc: x = "Max 2MB (.jpg, .jpeg, .png, .svg)",
|
|
57
|
+
maxSize: h = 2,
|
|
58
|
+
icon: w,
|
|
59
|
+
desc: c,
|
|
60
|
+
classNameContainer: M,
|
|
61
61
|
classNameImage: d,
|
|
62
|
-
classNameAction:
|
|
63
|
-
id:
|
|
62
|
+
classNameAction: j,
|
|
63
|
+
id: s
|
|
64
64
|
}) => {
|
|
65
|
-
const
|
|
66
|
-
if (e
|
|
67
|
-
const
|
|
68
|
-
if (!
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
else if (y > C) {
|
|
74
|
-
const m = `${e.length > 1 ? "Jumlah u" : "U"}kuran berkas tidak boleh melebihi ${C}MB.`;
|
|
75
|
-
p(m);
|
|
65
|
+
const i = g.useRef(null), C = m || ["image/png", "image/jpeg", "image/jpg"], [o, v] = g.useState(""), [$, u] = g.useState(""), k = (e) => {
|
|
66
|
+
if (e?.length) {
|
|
67
|
+
const p = e[0], R = p.size / 1024 / 1024;
|
|
68
|
+
if (!C.some((f) => e[0].type?.includes(f)))
|
|
69
|
+
u("Berkas tidak didukung, silahkan pilih file kembali.");
|
|
70
|
+
else if (R > h) {
|
|
71
|
+
const f = `${e.length > 1 ? "Jumlah u" : "U"}kuran berkas tidak boleh melebihi ${h}MB.`;
|
|
72
|
+
u(f);
|
|
76
73
|
} else {
|
|
77
|
-
if (!
|
|
78
|
-
|
|
74
|
+
if (!i?.current) return;
|
|
75
|
+
u(""), n(p), v(URL.createObjectURL(p)), i.current.value = "";
|
|
79
76
|
}
|
|
80
77
|
}
|
|
81
78
|
}, D = (e) => {
|
|
82
79
|
e.preventDefault(), k(e.dataTransfer.files);
|
|
83
|
-
},
|
|
84
|
-
e.preventDefault(),
|
|
80
|
+
}, N = (e) => {
|
|
81
|
+
e.preventDefault(), i?.current && (typeof n == "function" && n(null), v(""), i.current.value = "");
|
|
85
82
|
};
|
|
86
|
-
return /* @__PURE__ */
|
|
87
|
-
/* @__PURE__ */
|
|
83
|
+
return /* @__PURE__ */ l("div", { className: `${r.container} ${M}`, children: [
|
|
84
|
+
/* @__PURE__ */ t(
|
|
88
85
|
"input",
|
|
89
86
|
{
|
|
90
|
-
accept:
|
|
91
|
-
ref:
|
|
87
|
+
accept: C?.join(", "),
|
|
88
|
+
ref: i,
|
|
92
89
|
hidden: !0,
|
|
93
90
|
type: "file",
|
|
94
91
|
multiple: !1,
|
|
@@ -97,66 +94,63 @@ const B = ({ className: i }) => /* @__PURE__ */ r(
|
|
|
97
94
|
}
|
|
98
95
|
}
|
|
99
96
|
),
|
|
100
|
-
|
|
97
|
+
o || a ? /* @__PURE__ */ t(
|
|
101
98
|
"div",
|
|
102
99
|
{
|
|
103
|
-
id: `${
|
|
104
|
-
className: `${
|
|
100
|
+
id: `${s}-exist`,
|
|
101
|
+
className: `${r["image-content"]} ${d}`,
|
|
105
102
|
onDrop: D,
|
|
106
103
|
onDragOver: (e) => e.preventDefault(),
|
|
107
104
|
onDragLeave: (e) => e.preventDefault(),
|
|
108
|
-
children: /* @__PURE__ */
|
|
105
|
+
children: /* @__PURE__ */ t("img", { src: o || a, alt: "upload-image", className: `${r.image} ${d}` })
|
|
109
106
|
}
|
|
110
|
-
) : /* @__PURE__ */
|
|
107
|
+
) : /* @__PURE__ */ l(
|
|
111
108
|
"div",
|
|
112
109
|
{
|
|
113
|
-
id:
|
|
114
|
-
className: `${
|
|
110
|
+
id: s,
|
|
111
|
+
className: `${r["image-content"]} ${d}`,
|
|
115
112
|
onDrop: D,
|
|
116
113
|
onDragOver: (e) => e.preventDefault(),
|
|
117
114
|
onDragLeave: (e) => e.preventDefault(),
|
|
118
115
|
children: [
|
|
119
|
-
|
|
120
|
-
/* @__PURE__ */
|
|
116
|
+
w,
|
|
117
|
+
/* @__PURE__ */ t("div", { className: r["text-desc"], children: typeof c == "function" ? c() : c })
|
|
121
118
|
]
|
|
122
119
|
}
|
|
123
120
|
),
|
|
124
|
-
/* @__PURE__ */
|
|
125
|
-
/* @__PURE__ */
|
|
126
|
-
(
|
|
127
|
-
|
|
121
|
+
/* @__PURE__ */ l("div", { className: r["action-content"], children: [
|
|
122
|
+
/* @__PURE__ */ l("div", { className: `${r["button-content"]} ${j}`, children: [
|
|
123
|
+
(o || a) && /* @__PURE__ */ t(
|
|
124
|
+
L,
|
|
128
125
|
{
|
|
129
|
-
id: `${
|
|
126
|
+
id: `${s}-delete-img`,
|
|
130
127
|
variants: "tertiary-red-600",
|
|
131
128
|
size: "xs",
|
|
132
|
-
startIcon: /* @__PURE__ */
|
|
133
|
-
onClick: (e) =>
|
|
129
|
+
startIcon: /* @__PURE__ */ t(b, {}),
|
|
130
|
+
onClick: (e) => N(e),
|
|
134
131
|
children: "Hapus"
|
|
135
132
|
}
|
|
136
133
|
),
|
|
137
|
-
/* @__PURE__ */
|
|
138
|
-
|
|
134
|
+
/* @__PURE__ */ l(
|
|
135
|
+
L,
|
|
139
136
|
{
|
|
140
|
-
id: `${
|
|
137
|
+
id: `${s}-change-img`,
|
|
141
138
|
variants: "tertiary-blue-700",
|
|
142
139
|
size: "xs",
|
|
143
|
-
onClick: () =>
|
|
144
|
-
|
|
145
|
-
return (e = n.current) == null ? void 0 : e.click();
|
|
146
|
-
},
|
|
147
|
-
startIcon: /* @__PURE__ */ r(R, {}),
|
|
140
|
+
onClick: () => i.current?.click(),
|
|
141
|
+
startIcon: /* @__PURE__ */ t(y, {}),
|
|
148
142
|
children: [
|
|
149
|
-
|
|
143
|
+
o || a ? "Ganti" : "Pilih",
|
|
150
144
|
" Gambar"
|
|
151
145
|
]
|
|
152
146
|
}
|
|
153
147
|
)
|
|
154
148
|
] }),
|
|
155
|
-
/* @__PURE__ */
|
|
156
|
-
$ && /* @__PURE__ */
|
|
149
|
+
/* @__PURE__ */ t("p", { className: r["text-desc"], children: x }),
|
|
150
|
+
$ && /* @__PURE__ */ t("p", { className: r["text-error"], children: $ })
|
|
157
151
|
] })
|
|
158
152
|
] });
|
|
159
153
|
};
|
|
160
154
|
export {
|
|
161
|
-
|
|
155
|
+
z as default
|
|
162
156
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),N=require("react"),z=require("../Button/Button.cjs"),s=require("./UploadMultipleFile.module.scss.cjs"),T=require("../Input/InputNative.cjs"),k=require("../../utils/common.cjs"),A=({value:x,validateFile:u,classNameContainer:y,classNameButton:b,textUpload:M="Unggah Lampiran",buttonProps:F={},maxFile:o=1,maxSize:f=1,error:d,removeElement:n,onChange:p,handlerDownload:m,priorityError:q="external",eventError:v,locationRemoveElement:g="right",idItemAttachment:$})=>{const B={variants:"ghost-laba-blue-10",size:"small"},a=N.useRef(null),h=u||["image/png","image/jpeg","image/jpg"],[j,C]=N.useState(""),U={internal:j||d,external:d||j},P=e=>{if(e?.length){const i=Array.from(e).slice(0,o),r=i?.filter(c=>!h.includes(c.type)),S=i?.reduce((c,_)=>c+_.size,0)/1024/1024;let l="";if(r.length>0?l="Berkas tidak didukung, silahkan pilih file kembali.":S>f?l=`${e.length>1?"Jumlah u":"U"}kuran berkas tidak boleh melebihi ${f}MB.`:typeof p=="function"&&p(i),C(l),v?.(l),!a?.current)return;a.current.value=""}},R=e=>{e.preventDefault(),a?.current&&a.current?.click()};return t.jsxs("div",{className:`${s.default.container} ${y??""}`,children:[t.jsx(z.default,{...B,...F,className:b??"",onClick:e=>R(e),children:M}),t.jsx(T.default,{accept:h?.join(", "),ref:a,type:"file",onChange:e=>P(e.target.files),error:U[q],multiple:o>1,hidden:!0}),t.jsx("div",{className:s.default.files,children:x?.map((e,i)=>t.jsxs("div",{id:`${$}-${i}`,className:s.default.file,onClick:r=>{r.stopPropagation(),typeof m=="function"&&m(e)},children:[typeof n=="function"&&g==="left"&&t.jsx(t.Fragment,{children:n(e,i)}),t.jsxs("div",{className:s.default["file-name-wrapper"],children:[t.jsx("span",{className:s.default["file-name"],children:k.parseFileName(e?.originalName??e?.name??e?.fileName??"").filename}),t.jsx("span",{className:s.default["file-extension"],children:k.parseFileName(e?.originalName??e?.name??e?.fileName??"").extension})]}),typeof n=="function"&&g==="right"&&t.jsx(t.Fragment,{children:n(e,i)})]},i))})]})};exports.default=A;
|