sprint-asia-custom-component 0.1.100 → 0.1.102
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/index.js
CHANGED
|
@@ -26080,7 +26080,10 @@
|
|
|
26080
26080
|
}, title), required && /*#__PURE__*/React__default["default"].createElement("p", {
|
|
26081
26081
|
className: "text-sm font-normal text-danger500 ml-1"
|
|
26082
26082
|
}, "*")), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
26083
|
-
className: `${disabled ? "cursor-default" : "cursor-pointer"}
|
|
26083
|
+
className: `${disabled ? "cursor-default" : "cursor-pointer"}`,
|
|
26084
|
+
style: {
|
|
26085
|
+
width: "fit-content"
|
|
26086
|
+
}
|
|
26084
26087
|
}, /*#__PURE__*/React__default["default"].createElement("div", _extends$2({}, getRootProps({
|
|
26085
26088
|
className: "dropzone"
|
|
26086
26089
|
}), {
|
|
@@ -26093,7 +26096,7 @@
|
|
|
26093
26096
|
required: required
|
|
26094
26097
|
})), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
26095
26098
|
className: "flex w-full h-full justify-center items-center text-center"
|
|
26096
|
-
},
|
|
26099
|
+
}, !selectedFile ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
26097
26100
|
className: "flex justify-center"
|
|
26098
26101
|
}, /*#__PURE__*/React__default["default"].createElement(PiPlus, {
|
|
26099
26102
|
size: 16,
|
|
@@ -26105,12 +26108,12 @@
|
|
|
26105
26108
|
}, errorMessage)) : typeof selectedFile === "string" ? /*#__PURE__*/React__default["default"].createElement("img", {
|
|
26106
26109
|
src: selectedFile,
|
|
26107
26110
|
alt: "Selected",
|
|
26108
|
-
className: "object-contain rounded-lg"
|
|
26111
|
+
className: "object-contain rounded-lg w-full h-full"
|
|
26109
26112
|
}) : /*#__PURE__*/React__default["default"].createElement("img", {
|
|
26110
26113
|
src: URL.createObjectURL(selectedFile),
|
|
26111
26114
|
alt: "Selected",
|
|
26112
|
-
className: "object-contain rounded-lg"
|
|
26113
|
-
}))))
|
|
26115
|
+
className: "object-contain rounded-lg w-full h-full"
|
|
26116
|
+
})))), error && /*#__PURE__*/React__default["default"].createElement("p", {
|
|
26114
26117
|
className: "text-danger500 text-xs mt-1"
|
|
26115
26118
|
}, error), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
26116
26119
|
className: "text-xs text-neutral300 mt-1"
|
package/package.json
CHANGED
|
@@ -40,7 +40,7 @@ const DropzoneUploadPhoto = ({
|
|
|
40
40
|
<p className="text-black text-sm mb-1">{title}</p>
|
|
41
41
|
{required && <p className="text-sm font-normal text-danger500 ml-1">*</p>}
|
|
42
42
|
</div>
|
|
43
|
-
<div className={`${disabled ? "cursor-default" : "cursor-pointer"}
|
|
43
|
+
<div className={`${disabled ? "cursor-default" : "cursor-pointer"}`} style={{ width: "fit-content" }}>
|
|
44
44
|
<div
|
|
45
45
|
{...getRootProps({ className: "dropzone" })}
|
|
46
46
|
style={{
|
|
@@ -53,21 +53,23 @@ const DropzoneUploadPhoto = ({
|
|
|
53
53
|
>
|
|
54
54
|
<input {...getInputProps()} required={required} />
|
|
55
55
|
<div className="flex w-full h-full justify-center items-center text-center">
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
<
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
56
|
+
{!selectedFile ? (
|
|
57
|
+
<>
|
|
58
|
+
<div className="flex justify-center">
|
|
59
|
+
<PiPlus size={16} className="text-neutral300" />
|
|
60
|
+
</div>
|
|
61
|
+
<p className="text-sm text-neutral300 mt-2">Upload Photo</p>
|
|
62
|
+
{errorMessage && <p className="text-xs text-danger500">{errorMessage}</p>}
|
|
63
|
+
</>
|
|
64
|
+
) : typeof selectedFile === "string" ? (
|
|
65
|
+
<img src={selectedFile} alt="Selected" className="object-contain rounded-lg w-full h-full" />
|
|
66
|
+
) : (
|
|
67
|
+
<img
|
|
68
|
+
src={URL.createObjectURL(selectedFile)}
|
|
69
|
+
alt="Selected"
|
|
70
|
+
className="object-contain rounded-lg w-full h-full"
|
|
71
|
+
/>
|
|
72
|
+
)}
|
|
71
73
|
</div>
|
|
72
74
|
</div>
|
|
73
75
|
</div>
|
package/src/templates/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { useCallback } from "react";
|
|
2
2
|
import { useState, useEffect } from "react";
|
|
3
3
|
import Alert from "../components/alert";
|
|
4
4
|
import DangerButton from "../components/button/dangerbutton";
|
|
@@ -101,10 +101,14 @@ const Templates = () => {
|
|
|
101
101
|
|
|
102
102
|
const [currentImage, setCurrentImage] = useState(null);
|
|
103
103
|
|
|
104
|
-
const handleFileChange = (file) => {
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
};
|
|
104
|
+
// const handleFileChange = (file) => {
|
|
105
|
+
// console.log(file);
|
|
106
|
+
// setCurrentImage(URL.createObjectURL(file));
|
|
107
|
+
// };
|
|
108
|
+
|
|
109
|
+
const handleFileChange = useCallback((acceptedFiles) => {
|
|
110
|
+
setCurrentImage(acceptedFiles[0]);
|
|
111
|
+
}, []);
|
|
108
112
|
|
|
109
113
|
const [data, setData] = useState([
|
|
110
114
|
{ id: 1, name: "John Doe", email: "john@example.com" },
|
|
@@ -1109,10 +1113,13 @@ const Templates = () => {
|
|
|
1109
1113
|
|
|
1110
1114
|
<div className="m-9"></div>
|
|
1111
1115
|
<DropzoneUploadPhoto
|
|
1112
|
-
|
|
1113
|
-
disabled={true}
|
|
1114
|
-
layout="rectangle"
|
|
1115
|
-
selectedFile={
|
|
1116
|
+
onDrop={handleFileChange}
|
|
1117
|
+
// disabled={true}
|
|
1118
|
+
// layout="rectangle"
|
|
1119
|
+
selectedFile={currentImage}
|
|
1120
|
+
title="Upload a photos with minimum resolution 300 x 300 px and maximum 5000 x 5000 px."
|
|
1121
|
+
subtitle="Format File PNG, JPEG, or JPG, Maximal File 5 MB"
|
|
1122
|
+
required={true}
|
|
1116
1123
|
/>
|
|
1117
1124
|
|
|
1118
1125
|
<div className="m-9"></div>
|