sprint-asia-custom-component 0.1.77 → 0.1.78
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
|
@@ -351,13 +351,14 @@
|
|
|
351
351
|
}) => {
|
|
352
352
|
return /*#__PURE__*/React__default["default"].createElement("a", {
|
|
353
353
|
className: `
|
|
354
|
-
${type == "
|
|
354
|
+
${type == "white" && "text-neutral300 border-white bg-neutral40"}
|
|
355
|
+
${type == "neutral" && "text-neutral300 border-neutral300 bg-neutral30"}
|
|
355
356
|
${type == "success" && "text-success600 border-success600 bg-success50"}
|
|
356
357
|
${type == "primary" && "text-primary500 border-primary500 bg-primary50"}
|
|
357
358
|
${type == "dropdown" && "text-primary500 border-primary500 bg-primary50"}
|
|
358
359
|
${type == "warning" && "text-warning800 border-warning800 bg-warning50"}
|
|
359
360
|
${type == "danger" && "text-danger800 border-danger800 bg-danger50"}
|
|
360
|
-
' rounded-full text-xs border-2 flex items-center px-3 justify-center text-center whitespace-nowrap overflow-hidden text-ellipsis block w-full`,
|
|
361
|
+
' cursor-pointer rounded-full text-xs border-2 flex items-center px-3 justify-center text-center whitespace-nowrap overflow-hidden text-ellipsis block w-full`,
|
|
361
362
|
onClick: onClick
|
|
362
363
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
363
364
|
className: "flex items-center"
|
package/package.json
CHANGED
|
@@ -4,13 +4,14 @@ const Chip = ({ title = "Approve", type = "success", onClick }) => {
|
|
|
4
4
|
return (
|
|
5
5
|
<a
|
|
6
6
|
className={`
|
|
7
|
-
${type == "
|
|
7
|
+
${type == "white" && "text-neutral300 border-white bg-neutral40"}
|
|
8
|
+
${type == "neutral" && "text-neutral300 border-neutral300 bg-neutral30"}
|
|
8
9
|
${type == "success" && "text-success600 border-success600 bg-success50"}
|
|
9
10
|
${type == "primary" && "text-primary500 border-primary500 bg-primary50"}
|
|
10
11
|
${type == "dropdown" && "text-primary500 border-primary500 bg-primary50"}
|
|
11
12
|
${type == "warning" && "text-warning800 border-warning800 bg-warning50"}
|
|
12
13
|
${type == "danger" && "text-danger800 border-danger800 bg-danger50"}
|
|
13
|
-
' rounded-full text-xs border-2 flex items-center px-3 justify-center text-center whitespace-nowrap overflow-hidden text-ellipsis block w-full`}
|
|
14
|
+
' cursor-pointer rounded-full text-xs border-2 flex items-center px-3 justify-center text-center whitespace-nowrap overflow-hidden text-ellipsis block w-full`}
|
|
14
15
|
onClick={onClick}
|
|
15
16
|
>
|
|
16
17
|
<div className="flex items-center">
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { PiEyeClosedLight, PiEye, PiInfo } from "react-icons/pi";
|
|
3
|
+
|
|
4
|
+
const TextArea = ({
|
|
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 = "",
|
|
16
|
+
}) => {
|
|
17
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
18
|
+
const [showPassword, setShowPassword] = useState(false);
|
|
19
|
+
|
|
20
|
+
const handleFocus = () => {
|
|
21
|
+
setIsFocused(true);
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
const handleBlur = () => {
|
|
25
|
+
setIsFocused(false);
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
const handleTogglePasswordVisibility = () => {
|
|
29
|
+
setShowPassword(!showPassword);
|
|
30
|
+
};
|
|
31
|
+
|
|
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
|
+
)}
|
|
40
|
+
|
|
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={`
|
|
47
|
+
${mode === "primary" && "text-black"}
|
|
48
|
+
${mode === "disable" && "text-neutral50"}
|
|
49
|
+
${mode === "danger" && "text-danger500"}
|
|
50
|
+
`}
|
|
51
|
+
/>
|
|
52
|
+
</span>
|
|
53
|
+
)}
|
|
54
|
+
|
|
55
|
+
<textarea
|
|
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
|
+
/>
|
|
76
|
+
|
|
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
|
+
)}
|
|
89
|
+
|
|
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={`
|
|
95
|
+
${mode === "primary" && "text-black"}
|
|
96
|
+
${mode === "disable" && "text-neutral50"}
|
|
97
|
+
${mode === "danger" && "text-danger500"}
|
|
98
|
+
`}
|
|
99
|
+
/>
|
|
100
|
+
</span>
|
|
101
|
+
)}
|
|
102
|
+
</div>
|
|
103
|
+
|
|
104
|
+
{footer && (
|
|
105
|
+
<div>
|
|
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
|
+
)}
|
|
116
|
+
</div>
|
|
117
|
+
)}
|
|
118
|
+
</div>
|
|
119
|
+
);
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
export default TextArea;
|