sprint-asia-custom-component 0.1.98 → 0.1.100

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 (5) hide show
  1. package/dist/index.js +14 -7
  2. package/package.json +1 -1
  3. package/src/components/dropdown/dropdownText/index.js +1 -1
  4. package/src/components/dropzone/uploadphoto/index.js +67 -69
  5. package/src/templates/index.js +6 -1
package/dist/index.js CHANGED
@@ -24152,7 +24152,7 @@
24152
24152
  size: 16,
24153
24153
  className: "text-neutral300"
24154
24154
  }))))), isOpen && isEdited && /*#__PURE__*/React__default["default"].createElement("div", {
24155
- className: "z-10 origin-top-right absolute left-0 mt-2 w-full rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden",
24155
+ className: "z-20 origin-top-right absolute left-0 mt-2 w-full rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden",
24156
24156
  role: "menu",
24157
24157
  "aria-orientation": "vertical",
24158
24158
  "aria-labelledby": "options-menu"
@@ -26046,7 +26046,9 @@
26046
26046
  onDrop,
26047
26047
  maxFiles = 1,
26048
26048
  selectedFile,
26049
- error = ""
26049
+ error = "",
26050
+ disabled,
26051
+ layout = "box"
26050
26052
  }) => {
26051
26053
  const [errorMessage, setErrorMessage] = React.useState("");
26052
26054
  const onDropRejected = rejectedFiles => {
@@ -26066,7 +26068,8 @@
26066
26068
  },
26067
26069
  noKeyboard: true,
26068
26070
  maxSize: 5242881,
26069
- onDropRejected
26071
+ onDropRejected,
26072
+ disabled
26070
26073
  });
26071
26074
  return /*#__PURE__*/React__default["default"].createElement("div", {
26072
26075
  className: "w-full"
@@ -26077,11 +26080,15 @@
26077
26080
  }, title), required && /*#__PURE__*/React__default["default"].createElement("p", {
26078
26081
  className: "text-sm font-normal text-danger500 ml-1"
26079
26082
  }, "*")), /*#__PURE__*/React__default["default"].createElement("div", {
26080
- className: "cursor-pointer"
26083
+ className: `${disabled ? "cursor-default" : "cursor-pointer"} w-fit`
26081
26084
  }, /*#__PURE__*/React__default["default"].createElement("div", _extends$2({}, getRootProps({
26082
26085
  className: "dropzone"
26083
26086
  }), {
26084
- className: `bg-neutral20 w-52 h-52 rounded-lg border-2 ${error ? "border-danger500" : "border-neutral50"} border-dashed`
26087
+ style: {
26088
+ width: layout === "box" ? "208px" : "347px",
26089
+ height: layout === "box" ? "208px" : "192px"
26090
+ },
26091
+ className: `bg-neutral20 rounded-lg ${disabled ? "border-0" : "border-2"} ${error ? "border-danger500" : "border-neutral50"} border-dashed`
26085
26092
  }), /*#__PURE__*/React__default["default"].createElement("input", _extends$2({}, getInputProps(), {
26086
26093
  required: required
26087
26094
  })), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -26098,11 +26105,11 @@
26098
26105
  }, errorMessage)) : typeof selectedFile === "string" ? /*#__PURE__*/React__default["default"].createElement("img", {
26099
26106
  src: selectedFile,
26100
26107
  alt: "Selected",
26101
- className: "w-52 h-52 object-contain rounded-lg"
26108
+ className: "object-contain rounded-lg"
26102
26109
  }) : /*#__PURE__*/React__default["default"].createElement("img", {
26103
26110
  src: URL.createObjectURL(selectedFile),
26104
26111
  alt: "Selected",
26105
- className: "w-52 h-52 object-contain rounded-lg"
26112
+ className: "object-contain rounded-lg"
26106
26113
  }))))), error && /*#__PURE__*/React__default["default"].createElement("p", {
26107
26114
  className: "text-danger500 text-xs mt-1"
26108
26115
  }, error), /*#__PURE__*/React__default["default"].createElement("p", {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "sprint-asia-custom-component",
3
3
  "main": "dist/index.js",
4
- "version": "0.1.98",
4
+ "version": "0.1.100",
5
5
  "private": false,
6
6
  "dependencies": {
7
7
  "@headlessui/react": "^1.7.18",
package/src/components/dropdown/dropdownText/index.js CHANGED
@@ -82,7 +82,7 @@ const DropdownText = ({
82
82
 
83
83
  {isOpen && isEdited && (
84
84
  <div
85
- className="z-10 origin-top-right absolute left-0 mt-2 w-full rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden"
85
+ className="z-20 origin-top-right absolute left-0 mt-2 w-full rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden"
86
86
  role="menu"
87
87
  aria-orientation="vertical"
88
88
  aria-labelledby="options-menu"
package/src/components/dropzone/uploadphoto/index.js CHANGED
@@ -3,80 +3,78 @@ import { useDropzone } from "react-dropzone";
3
3
  import { PiPlus } from "react-icons/pi";
4
4
 
5
5
  const DropzoneUploadPhoto = ({
6
- title = "Title Dropzone",
7
- subtitle = "Format File PNG, JPEG, or JPG, Maximal File 5 MB",
8
- required = false,
9
- onDrop,
10
- maxFiles = 1,
11
- selectedFile,
12
- error = "",
6
+ title = "Title Dropzone",
7
+ subtitle = "Format File PNG, JPEG, or JPG, Maximal File 5 MB",
8
+ required = false,
9
+ onDrop,
10
+ maxFiles = 1,
11
+ selectedFile,
12
+ error = "",
13
+ disabled,
14
+ layout = "box",
13
15
  }) => {
14
- const [errorMessage, setErrorMessage] = useState("");
16
+ const [errorMessage, setErrorMessage] = useState("");
15
17
 
16
- const onDropRejected = (rejectedFiles) => {
17
- const file = rejectedFiles[0];
18
- if (file.errors[0]?.code === "file-too-large") {
19
- setErrorMessage("Your file is too large, Max file size is 5 MB");
20
- }
21
- };
18
+ const onDropRejected = (rejectedFiles) => {
19
+ const file = rejectedFiles[0];
20
+ if (file.errors[0]?.code === "file-too-large") {
21
+ setErrorMessage("Your file is too large, Max file size is 5 MB");
22
+ }
23
+ };
22
24
 
23
- const { getRootProps, getInputProps } = useDropzone({
24
- onDrop,
25
- maxFiles,
26
- accept: {
27
- "image/*": [".jpeg", ".png", ".jpg"],
28
- },
29
- noKeyboard: true,
30
- maxSize: 5242881,
31
- onDropRejected,
32
- });
25
+ const { getRootProps, getInputProps } = useDropzone({
26
+ onDrop,
27
+ maxFiles,
28
+ accept: {
29
+ "image/*": [".jpeg", ".png", ".jpg"],
30
+ },
31
+ noKeyboard: true,
32
+ maxSize: 5242881,
33
+ onDropRejected,
34
+ disabled,
35
+ });
33
36
 
34
- return (
35
- <div className="w-full">
36
- <div className="flex items-center">
37
- <p className="text-black text-sm mb-1">{title}</p>
38
- {required && <p className="text-sm font-normal text-danger500 ml-1">*</p>}
39
- </div>
40
- <div className="cursor-pointer">
41
- <div
42
- {...getRootProps({ className: "dropzone" })}
43
- className={`bg-neutral20 w-52 h-52 rounded-lg border-2 ${
44
- error ? "border-danger500" : "border-neutral50"
45
- } border-dashed`}
46
- >
47
- <input {...getInputProps()} required={required} />
48
- <div className="flex w-full h-full justify-center items-center text-center">
49
- <div>
50
- {!selectedFile ? (
51
- <>
52
- <div className="flex justify-center">
53
- <PiPlus size={16} className="text-neutral300" />
54
- </div>
55
- <p className="text-sm text-neutral300 mt-2">Upload Photo</p>
56
- {errorMessage && <p className="text-xs text-danger500">{errorMessage}</p>}
57
- </>
58
- ) : (
59
- typeof selectedFile === "string" ?
60
- <img
61
- src={selectedFile}
62
- alt="Selected"
63
- className="w-52 h-52 object-contain rounded-lg"
64
- />
65
- :
66
- <img
67
- src={URL.createObjectURL(selectedFile)}
68
- alt="Selected"
69
- className="w-52 h-52 object-contain rounded-lg"
70
- />
71
- )}
72
- </div>
73
- </div>
74
- </div>
37
+ return (
38
+ <div className="w-full">
39
+ <div className="flex items-center">
40
+ <p className="text-black text-sm mb-1">{title}</p>
41
+ {required && <p className="text-sm font-normal text-danger500 ml-1">*</p>}
42
+ </div>
43
+ <div className={`${disabled ? "cursor-default" : "cursor-pointer"} w-fit`}>
44
+ <div
45
+ {...getRootProps({ className: "dropzone" })}
46
+ style={{
47
+ width: layout === "box" ? "208px" : "347px",
48
+ height: layout === "box" ? "208px" : "192px",
49
+ }}
50
+ className={`bg-neutral20 rounded-lg ${disabled ? "border-0" : "border-2"} ${
51
+ error ? "border-danger500" : "border-neutral50"
52
+ } border-dashed`}
53
+ >
54
+ <input {...getInputProps()} required={required} />
55
+ <div className="flex w-full h-full justify-center items-center text-center">
56
+ <div>
57
+ {!selectedFile ? (
58
+ <>
59
+ <div className="flex justify-center">
60
+ <PiPlus size={16} className="text-neutral300" />
61
+ </div>
62
+ <p className="text-sm text-neutral300 mt-2">Upload Photo</p>
63
+ {errorMessage && <p className="text-xs text-danger500">{errorMessage}</p>}
64
+ </>
65
+ ) : typeof selectedFile === "string" ? (
66
+ <img src={selectedFile} alt="Selected" className="object-contain rounded-lg" />
67
+ ) : (
68
+ <img src={URL.createObjectURL(selectedFile)} alt="Selected" className="object-contain rounded-lg" />
69
+ )}
75
70
  </div>
76
- {error && <p className="text-danger500 text-xs mt-1">{error}</p>}
77
- <p className="text-xs text-neutral300 mt-1">{subtitle}</p>
71
+ </div>
78
72
  </div>
79
- );
73
+ </div>
74
+ {error && <p className="text-danger500 text-xs mt-1">{error}</p>}
75
+ <p className="text-xs text-neutral300 mt-1">{subtitle}</p>
76
+ </div>
77
+ );
80
78
  };
81
79
 
82
- export default DropzoneUploadPhoto;
80
+ export default DropzoneUploadPhoto;
package/src/templates/index.js CHANGED
@@ -1108,7 +1108,12 @@ const Templates = () => {
1108
1108
  <DropzoneUploadFile title="Upload Your File" subtitle="Accepts PDF, JPEG, JPG. Max size 5 MB" required={true} />
1109
1109
 
1110
1110
  <div className="m-9"></div>
1111
- <DropzoneUploadPhoto onFileChange={handleFileChange} currentImage={currentImage} />
1111
+ <DropzoneUploadPhoto
1112
+ onFileChange={handleFileChange}
1113
+ disabled={true}
1114
+ layout="rectangle"
1115
+ selectedFile={`http://192.168.4.224:8081/voucher/27bf0b31-39e2-4995-874d-1363fe578423.jpg`}
1116
+ />
1112
1117
 
1113
1118
  <div className="m-9"></div>
1114
1119
  <p className="text-black font-bold text-2xl text-center py-2">Empty Data</p>