sprint-asia-custom-component 0.1.70 → 0.1.72
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/package.json
CHANGED
|
@@ -1,19 +1,18 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { PiFilePdf } from 'react-icons/pi';
|
|
3
3
|
|
|
4
4
|
const DescriptionFile = ({
|
|
5
5
|
title = "Title",
|
|
6
|
-
link
|
|
7
|
-
fileName = ""
|
|
6
|
+
link
|
|
8
7
|
}) => {
|
|
9
8
|
return (
|
|
10
9
|
<div className='w-full'>
|
|
11
10
|
{title && <p className="text-sm font-normal text-black mb-1 py-2">{title}</p>}
|
|
12
|
-
<div className='
|
|
11
|
+
<div className='flex items-center cursor-pointer'>
|
|
13
12
|
<div>
|
|
14
|
-
<
|
|
13
|
+
<PiFilePdf className='text-black' size={16}/>
|
|
15
14
|
</div>
|
|
16
|
-
<a className='text-
|
|
15
|
+
<a className='text-md font-semibold text-base ml-1' href={link ? link : null} target="_blank">{link ? title+".pdf" : "Loading..."}</a>
|
|
17
16
|
</div>
|
|
18
17
|
</div>
|
|
19
18
|
);
|
|
@@ -11,6 +11,7 @@ const DropdownText = ({
|
|
|
11
11
|
mode = "default",
|
|
12
12
|
footer = null,
|
|
13
13
|
currentOption = "",
|
|
14
|
+
className = "",
|
|
14
15
|
}) => {
|
|
15
16
|
const [isOpen, setIsOpen] = useState(false);
|
|
16
17
|
const dropdownRef = useRef(null);
|
|
@@ -47,7 +48,7 @@ const DropdownText = ({
|
|
|
47
48
|
});
|
|
48
49
|
|
|
49
50
|
return (
|
|
50
|
-
<div className=
|
|
51
|
+
<div className={`relative inline-block text-left w-full ${className}`} ref={dropdownRef}>
|
|
51
52
|
{title && (
|
|
52
53
|
<div className="flex">
|
|
53
54
|
<p className="text-sm font-normal text-black mb-1">{title}</p>
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import React, { useState } from
|
|
2
|
-
import { useDropzone } from
|
|
3
|
-
import { PiPlus } from
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { useDropzone } from "react-dropzone";
|
|
3
|
+
import { PiPlus } from "react-icons/pi";
|
|
4
4
|
|
|
5
|
-
const DropzoneUploadPhoto = ({
|
|
6
|
-
|
|
7
|
-
currentImage,
|
|
5
|
+
const DropzoneUploadPhoto = ({
|
|
6
|
+
title = "Title Dropzone",
|
|
8
7
|
subtitle = "Format File PNG, JPEG, or JPG, Maximal File 5 MB",
|
|
8
|
+
required = false,
|
|
9
|
+
onDrop,
|
|
10
|
+
maxFiles = 1,
|
|
11
|
+
selectedFile,
|
|
9
12
|
error = "",
|
|
10
13
|
}) => {
|
|
11
|
-
const [selectedImage, setSelectedImage] = useState(null);
|
|
12
|
-
const [isHovered, setIsHovered] = useState(false);
|
|
13
|
-
|
|
14
14
|
const [errorMessage, setErrorMessage] = useState("");
|
|
15
15
|
|
|
16
16
|
const onDropRejected = (rejectedFiles) => {
|
|
@@ -21,75 +21,62 @@ const DropzoneUploadPhoto = ({
|
|
|
21
21
|
};
|
|
22
22
|
|
|
23
23
|
const { getRootProps, getInputProps } = useDropzone({
|
|
24
|
+
onDrop,
|
|
25
|
+
maxFiles,
|
|
24
26
|
accept: {
|
|
25
|
-
|
|
26
|
-
'image/png': []
|
|
27
|
-
},
|
|
28
|
-
maxFiles: 1,
|
|
29
|
-
maxSize:5000000,
|
|
30
|
-
onDrop: (acceptedFiles) => {
|
|
31
|
-
if (acceptedFiles.length > 0) {
|
|
32
|
-
onFileChange(acceptedFiles[0]);
|
|
33
|
-
setSelectedImage(URL.createObjectURL(acceptedFiles[0]));
|
|
34
|
-
}
|
|
27
|
+
"image/*": [".jpeg", ".png", ".jpg"],
|
|
35
28
|
},
|
|
29
|
+
noKeyboard: true,
|
|
30
|
+
maxSize: 5242881,
|
|
36
31
|
onDropRejected,
|
|
37
32
|
});
|
|
38
33
|
|
|
39
34
|
return (
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
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">
|
|
43
41
|
<div
|
|
44
|
-
className
|
|
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`}
|
|
45
46
|
>
|
|
46
|
-
<
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
{
|
|
54
|
-
currentImage && !selectedImage ?
|
|
55
|
-
<img
|
|
56
|
-
src={currentImage}
|
|
57
|
-
className="w-full h-full object-cover rounded-md"
|
|
58
|
-
/>
|
|
59
|
-
:
|
|
60
|
-
!currentImage && !selectedImage ?
|
|
61
|
-
<div className="flex w-full h-full justify-center items-center text-center">
|
|
62
|
-
<div>
|
|
63
|
-
<div className='flex justify-center'>
|
|
64
|
-
<PiPlus size={18} className='text-neutral300'/>
|
|
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" />
|
|
65
54
|
</div>
|
|
66
|
-
<p className="text-
|
|
55
|
+
<p className="text-sm text-neutral300 mt-2">Upload Photo</p>
|
|
67
56
|
{errorMessage && <p className="text-xs text-danger500">{errorMessage}</p>}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
</div>
|
|
85
|
-
)}
|
|
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>
|
|
86
73
|
</div>
|
|
87
74
|
</div>
|
|
88
75
|
</div>
|
|
89
76
|
{error && <p className="text-danger500 text-xs mt-1">{error}</p>}
|
|
90
77
|
<p className="text-xs text-neutral300 mt-1">{subtitle}</p>
|
|
91
|
-
|
|
78
|
+
</div>
|
|
92
79
|
);
|
|
93
80
|
};
|
|
94
81
|
|
|
95
|
-
export default DropzoneUploadPhoto;
|
|
82
|
+
export default DropzoneUploadPhoto;
|
|
@@ -1,106 +1,122 @@
|
|
|
1
|
-
import React, { useState } from
|
|
2
|
-
import { PiEyeClosedLight, PiEye, PiInfo } from
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { PiEyeClosedLight, PiEye, PiInfo } from "react-icons/pi";
|
|
3
3
|
|
|
4
4
|
const TextInput = ({
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
5
|
+
title = "",
|
|
6
|
+
leftIcon = null,
|
|
7
|
+
rightIcon = null,
|
|
8
|
+
placeholder = "",
|
|
9
|
+
footer = null,
|
|
10
|
+
type = "text",
|
|
11
|
+
mode = "default",
|
|
12
|
+
isRequired = true,
|
|
13
|
+
value,
|
|
14
|
+
onChangeInput,
|
|
15
|
+
className = "",
|
|
15
16
|
}) => {
|
|
16
|
-
|
|
17
|
-
|
|
17
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
18
|
+
const [showPassword, setShowPassword] = useState(false);
|
|
18
19
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
const handleFocus = () => {
|
|
21
|
+
setIsFocused(true);
|
|
22
|
+
};
|
|
22
23
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
const handleBlur = () => {
|
|
25
|
+
setIsFocused(false);
|
|
26
|
+
};
|
|
26
27
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
const handleTogglePasswordVisibility = () => {
|
|
29
|
+
setShowPassword(!showPassword);
|
|
30
|
+
};
|
|
30
31
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
</div>
|
|
40
|
-
}
|
|
32
|
+
return (
|
|
33
|
+
<div className={`w-full ${className}`}>
|
|
34
|
+
{title && (
|
|
35
|
+
<div className="flex">
|
|
36
|
+
<p className="text-sm font-normal text-black mb-1">{title}</p>
|
|
37
|
+
{isRequired && <p className="text-sm font-normal text-danger500 ml-1">*</p>}
|
|
38
|
+
</div>
|
|
39
|
+
)}
|
|
41
40
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
41
|
+
<div className="relative rounded-md">
|
|
42
|
+
{leftIcon && (
|
|
43
|
+
<span className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
|
44
|
+
<PiInfo
|
|
45
|
+
size={16}
|
|
46
|
+
className={`
|
|
46
47
|
${mode === "primary" && "text-black"}
|
|
47
48
|
${mode === "disable" && "text-neutral50"}
|
|
48
49
|
${mode === "danger" && "text-danger500"}
|
|
49
|
-
`}
|
|
50
|
-
|
|
51
|
-
|
|
50
|
+
`}
|
|
51
|
+
/>
|
|
52
|
+
</span>
|
|
53
|
+
)}
|
|
52
54
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
${
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
${
|
|
62
|
-
${
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
55
|
+
<input
|
|
56
|
+
type={type === "password" ? (showPassword ? "text" : "password") : type}
|
|
57
|
+
className={`py-2.5 px-4 w-full font-normal text-sm text-neutral300 rounded-md border
|
|
58
|
+
${
|
|
59
|
+
!value &&
|
|
60
|
+
mode === "default" &&
|
|
61
|
+
"bg-neutral20 border-neutral50 focus:outline-2 outline-primary500"
|
|
62
|
+
}
|
|
63
|
+
${value && mode === "default" && "bg-neutral20 border-black focus:outline-2 outline-primary500"}
|
|
64
|
+
${isFocused && mode === "default" && "bg-neutral20 border-primary500"}
|
|
65
|
+
${mode === "disable" && "bg-neutral30 border-neutral50"}
|
|
66
|
+
${mode === "danger" && "bg-danger50 border-danger500 focus:outline-2 outline-danger500"}
|
|
67
|
+
${leftIcon ? "pl-10" : "pl-3"}
|
|
68
|
+
${rightIcon ? "pr-10" : "pr-3"}`}
|
|
69
|
+
placeholder={placeholder}
|
|
70
|
+
disabled={mode === "disable"}
|
|
71
|
+
value={value}
|
|
72
|
+
onChange={onChangeInput}
|
|
73
|
+
onFocus={handleFocus}
|
|
74
|
+
onBlur={handleBlur}
|
|
75
|
+
/>
|
|
70
76
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
77
|
+
{type === "password" && (
|
|
78
|
+
<span
|
|
79
|
+
className="absolute inset-y-0 right-0 pr-4 flex items-center cursor-pointer"
|
|
80
|
+
onClick={handleTogglePasswordVisibility}
|
|
81
|
+
>
|
|
82
|
+
{showPassword ? (
|
|
83
|
+
<PiEye size={16} className={`text-black ${mode === "danger" && "text-danger500"}`} />
|
|
84
|
+
) : (
|
|
85
|
+
<PiEyeClosedLight size={16} className={`text-black ${mode === "danger" && "text-danger500"}`} />
|
|
86
|
+
)}
|
|
87
|
+
</span>
|
|
88
|
+
)}
|
|
76
89
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
90
|
+
{rightIcon && (
|
|
91
|
+
<span className="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
|
|
92
|
+
<PiInfo
|
|
93
|
+
size={16}
|
|
94
|
+
className={`
|
|
80
95
|
${mode === "primary" && "text-black"}
|
|
81
96
|
${mode === "disable" && "text-neutral50"}
|
|
82
97
|
${mode === "danger" && "text-danger500"}
|
|
83
|
-
`}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
98
|
+
`}
|
|
99
|
+
/>
|
|
100
|
+
</span>
|
|
101
|
+
)}
|
|
102
|
+
</div>
|
|
87
103
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
</div>
|
|
101
|
-
)}
|
|
104
|
+
{footer && (
|
|
105
|
+
<div className="mt-1">
|
|
106
|
+
{mode === "danger" ? (
|
|
107
|
+
<div className="flex">
|
|
108
|
+
<div>
|
|
109
|
+
<PiInfo size={16} className="text-danger500" />
|
|
110
|
+
</div>
|
|
111
|
+
<p className="text-danger500 text-xs ml-1">{footer}</p>
|
|
112
|
+
</div>
|
|
113
|
+
) : (
|
|
114
|
+
<p className="text-black text-xs">{footer}</p>
|
|
115
|
+
)}
|
|
102
116
|
</div>
|
|
103
|
-
|
|
117
|
+
)}
|
|
118
|
+
</div>
|
|
119
|
+
);
|
|
104
120
|
};
|
|
105
121
|
|
|
106
|
-
export default TextInput;
|
|
122
|
+
export default TextInput;
|