sprint-asia-custom-component 0.1.69 → 0.1.70
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,13 @@
|
|
|
351
351
|
}) => {
|
|
352
352
|
return /*#__PURE__*/React__default["default"].createElement("a", {
|
|
353
353
|
className: `
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
354
|
+
${type == "neutral" && "text-neutral300 border-neutral300 bg-neutral30 cursor-pointer"}
|
|
355
|
+
${type == "success" && "text-success600 border-success600 bg-success50"}
|
|
356
|
+
${type == "primary" && "text-primary500 border-primary500 bg-primary50"}
|
|
357
|
+
${type == "dropdown" && "text-primary500 border-primary500 bg-primary50"}
|
|
358
|
+
${type == "warning" && "text-warning800 border-warning800 bg-warning50"}
|
|
359
|
+
${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
361
|
onClick: onClick
|
|
362
362
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
363
363
|
className: "flex items-center"
|
|
@@ -24068,8 +24068,7 @@
|
|
|
24068
24068
|
isEdited = true,
|
|
24069
24069
|
mode = "default",
|
|
24070
24070
|
footer = null,
|
|
24071
|
-
currentOption = ""
|
|
24072
|
-
className = ""
|
|
24071
|
+
currentOption = ""
|
|
24073
24072
|
}) => {
|
|
24074
24073
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
24075
24074
|
const dropdownRef = React.useRef(null);
|
|
@@ -24102,7 +24101,7 @@
|
|
|
24102
24101
|
return val.value === currentOption;
|
|
24103
24102
|
});
|
|
24104
24103
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
24105
|
-
className:
|
|
24104
|
+
className: "relative inline-block text-left w-full",
|
|
24106
24105
|
ref: dropdownRef
|
|
24107
24106
|
}, title && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
24108
24107
|
className: "flex"
|
|
@@ -28925,12 +28924,11 @@
|
|
|
28925
28924
|
rightIcon = null,
|
|
28926
28925
|
placeholder = "",
|
|
28927
28926
|
footer = null,
|
|
28928
|
-
type =
|
|
28927
|
+
type = 'text',
|
|
28929
28928
|
mode = "default",
|
|
28930
28929
|
isRequired = true,
|
|
28931
28930
|
value,
|
|
28932
|
-
onChangeInput
|
|
28933
|
-
className = ""
|
|
28931
|
+
onChangeInput
|
|
28934
28932
|
}) => {
|
|
28935
28933
|
const [isFocused, setIsFocused] = React.useState(false);
|
|
28936
28934
|
const [showPassword, setShowPassword] = React.useState(false);
|
|
@@ -28944,7 +28942,7 @@
|
|
|
28944
28942
|
setShowPassword(!showPassword);
|
|
28945
28943
|
};
|
|
28946
28944
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
28947
|
-
className:
|
|
28945
|
+
className: "w-full"
|
|
28948
28946
|
}, title && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
28949
28947
|
className: "flex"
|
|
28950
28948
|
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
@@ -28963,22 +28961,22 @@
|
|
|
28963
28961
|
${mode === "danger" && "text-danger500"}
|
|
28964
28962
|
`
|
|
28965
28963
|
})), /*#__PURE__*/React__default["default"].createElement("input", {
|
|
28966
|
-
type: type ===
|
|
28964
|
+
type: type === 'password' ? showPassword ? 'text' : 'password' : type,
|
|
28967
28965
|
className: `py-2.5 px-4 w-full font-normal text-sm text-neutral300 rounded-md border
|
|
28968
|
-
${!value && mode === "default" &&
|
|
28969
|
-
${value && mode === "default" &&
|
|
28970
|
-
${isFocused && mode === "default" &&
|
|
28971
|
-
${mode === "disable" &&
|
|
28972
|
-
${mode === "danger" &&
|
|
28973
|
-
${leftIcon ?
|
|
28974
|
-
${rightIcon ?
|
|
28966
|
+
${!value && mode === "default" && 'bg-neutral20 border-neutral50 focus:outline-2 outline-primary500'}
|
|
28967
|
+
${value && mode === "default" && 'bg-neutral20 border-black focus:outline-2 outline-primary500'}
|
|
28968
|
+
${isFocused && mode === "default" && 'bg-neutral20 border-primary500'}
|
|
28969
|
+
${mode === "disable" && 'bg-neutral30 border-neutral50'}
|
|
28970
|
+
${mode === "danger" && 'bg-danger50 border-danger500 focus:outline-2 outline-danger500'}
|
|
28971
|
+
${leftIcon ? 'pl-10' : 'pl-3'}
|
|
28972
|
+
${rightIcon ? 'pr-10' : 'pr-3'}`,
|
|
28975
28973
|
placeholder: placeholder,
|
|
28976
28974
|
disabled: mode === "disable",
|
|
28977
28975
|
value: value,
|
|
28978
28976
|
onChange: onChangeInput,
|
|
28979
28977
|
onFocus: handleFocus,
|
|
28980
28978
|
onBlur: handleBlur
|
|
28981
|
-
}), type ===
|
|
28979
|
+
}), type === 'password' && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
28982
28980
|
className: "absolute inset-y-0 right-0 pr-4 flex items-center cursor-pointer",
|
|
28983
28981
|
onClick: handleTogglePasswordVisibility
|
|
28984
28982
|
}, showPassword ? /*#__PURE__*/React__default["default"].createElement(PiEye, {
|
package/package.json
CHANGED
|
@@ -4,13 +4,13 @@ const Chip = ({ title = "Approve", type = "success", onClick }) => {
|
|
|
4
4
|
return (
|
|
5
5
|
<a
|
|
6
6
|
className={`
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
${type == "neutral" && "text-neutral300 border-neutral300 bg-neutral30 cursor-pointer"}
|
|
8
|
+
${type == "success" && "text-success600 border-success600 bg-success50"}
|
|
9
|
+
${type == "primary" && "text-primary500 border-primary500 bg-primary50"}
|
|
10
|
+
${type == "dropdown" && "text-primary500 border-primary500 bg-primary50"}
|
|
11
|
+
${type == "warning" && "text-warning800 border-warning800 bg-warning50"}
|
|
12
|
+
${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
14
|
onClick={onClick}
|
|
15
15
|
>
|
|
16
16
|
<div className="flex items-center">
|
|
@@ -11,7 +11,6 @@ const DropdownText = ({
|
|
|
11
11
|
mode = "default",
|
|
12
12
|
footer = null,
|
|
13
13
|
currentOption = "",
|
|
14
|
-
className = "",
|
|
15
14
|
}) => {
|
|
16
15
|
const [isOpen, setIsOpen] = useState(false);
|
|
17
16
|
const dropdownRef = useRef(null);
|
|
@@ -48,7 +47,7 @@ const DropdownText = ({
|
|
|
48
47
|
});
|
|
49
48
|
|
|
50
49
|
return (
|
|
51
|
-
<div className=
|
|
50
|
+
<div className="relative inline-block text-left w-full" ref={dropdownRef}>
|
|
52
51
|
{title && (
|
|
53
52
|
<div className="flex">
|
|
54
53
|
<p className="text-sm font-normal text-black mb-1">{title}</p>
|
|
@@ -1,122 +1,106 @@
|
|
|
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
|
-
|
|
15
|
-
className = "",
|
|
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
|
|
16
15
|
}) => {
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
17
|
+
const [showPassword, setShowPassword] = useState(false);
|
|
19
18
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
const handleFocus = () => {
|
|
20
|
+
setIsFocused(true);
|
|
21
|
+
};
|
|
23
22
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
23
|
+
const handleBlur = () => {
|
|
24
|
+
setIsFocused(false);
|
|
25
|
+
};
|
|
27
26
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
27
|
+
const handleTogglePasswordVisibility = () => {
|
|
28
|
+
setShowPassword(!showPassword);
|
|
29
|
+
};
|
|
31
30
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
31
|
+
return (
|
|
32
|
+
<div className='w-full'>
|
|
33
|
+
{title &&
|
|
34
|
+
<div className='flex'>
|
|
35
|
+
<p className="text-sm font-normal text-black mb-1">{title}</p>
|
|
36
|
+
{
|
|
37
|
+
isRequired && <p className="text-sm font-normal text-danger500 ml-1">*</p>
|
|
38
|
+
}
|
|
39
|
+
</div>
|
|
40
|
+
}
|
|
40
41
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
size={16}
|
|
46
|
-
className={`
|
|
42
|
+
<div className="relative rounded-md">
|
|
43
|
+
{leftIcon && (
|
|
44
|
+
<span className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
|
45
|
+
<PiInfo size={16} className={`
|
|
47
46
|
${mode === "primary" && "text-black"}
|
|
48
47
|
${mode === "disable" && "text-neutral50"}
|
|
49
48
|
${mode === "danger" && "text-danger500"}
|
|
50
|
-
`}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
)}
|
|
49
|
+
`}/>
|
|
50
|
+
</span>
|
|
51
|
+
)}
|
|
54
52
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
${
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
}
|
|
63
|
-
${
|
|
64
|
-
${
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
onChange={onChangeInput}
|
|
73
|
-
onFocus={handleFocus}
|
|
74
|
-
onBlur={handleBlur}
|
|
75
|
-
/>
|
|
53
|
+
<input
|
|
54
|
+
type={type === 'password' ? (showPassword ? 'text' : 'password') : type}
|
|
55
|
+
className={`py-2.5 px-4 w-full font-normal text-sm text-neutral300 rounded-md border
|
|
56
|
+
${!value && mode === "default" && 'bg-neutral20 border-neutral50 focus:outline-2 outline-primary500'}
|
|
57
|
+
${value && mode === "default" && 'bg-neutral20 border-black focus:outline-2 outline-primary500'}
|
|
58
|
+
${isFocused && mode === "default" && 'bg-neutral20 border-primary500'}
|
|
59
|
+
${mode === "disable" && 'bg-neutral30 border-neutral50'}
|
|
60
|
+
${mode === "danger" && 'bg-danger50 border-danger500 focus:outline-2 outline-danger500'}
|
|
61
|
+
${leftIcon ? 'pl-10' : 'pl-3'}
|
|
62
|
+
${rightIcon ? 'pr-10' : 'pr-3'}`}
|
|
63
|
+
placeholder={placeholder}
|
|
64
|
+
disabled={mode === "disable"}
|
|
65
|
+
value={value}
|
|
66
|
+
onChange={onChangeInput}
|
|
67
|
+
onFocus={handleFocus}
|
|
68
|
+
onBlur={handleBlur}
|
|
69
|
+
/>
|
|
76
70
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
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
|
-
)}
|
|
71
|
+
{type === 'password' && (
|
|
72
|
+
<span className="absolute inset-y-0 right-0 pr-4 flex items-center cursor-pointer" onClick={handleTogglePasswordVisibility}>
|
|
73
|
+
{showPassword ? <PiEye size={16} className={`text-black ${mode === "danger" && "text-danger500"}`} /> : <PiEyeClosedLight size={16} className={`text-black ${mode === "danger" && "text-danger500"}`} />}
|
|
74
|
+
</span>
|
|
75
|
+
)}
|
|
89
76
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
size={16}
|
|
94
|
-
className={`
|
|
77
|
+
{rightIcon && (
|
|
78
|
+
<span className="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
|
|
79
|
+
<PiInfo size={16} className={`
|
|
95
80
|
${mode === "primary" && "text-black"}
|
|
96
81
|
${mode === "disable" && "text-neutral50"}
|
|
97
82
|
${mode === "danger" && "text-danger500"}
|
|
98
|
-
`}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
)}
|
|
102
|
-
</div>
|
|
103
|
-
|
|
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>
|
|
83
|
+
`}/>
|
|
84
|
+
</span>
|
|
85
|
+
)}
|
|
112
86
|
</div>
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
87
|
+
|
|
88
|
+
{footer && (
|
|
89
|
+
<div className='mt-1'>
|
|
90
|
+
{mode === "danger" ? (
|
|
91
|
+
<div className='flex'>
|
|
92
|
+
<div>
|
|
93
|
+
<PiInfo size={16} className='text-danger500' />
|
|
94
|
+
</div>
|
|
95
|
+
<p className="text-danger500 text-xs ml-1">{footer}</p>
|
|
96
|
+
</div>
|
|
97
|
+
) : (
|
|
98
|
+
<p className="text-black text-xs">{footer}</p>
|
|
99
|
+
)}
|
|
100
|
+
</div>
|
|
101
|
+
)}
|
|
116
102
|
</div>
|
|
117
|
-
|
|
118
|
-
</div>
|
|
119
|
-
);
|
|
103
|
+
);
|
|
120
104
|
};
|
|
121
105
|
|
|
122
|
-
export default TextInput;
|
|
106
|
+
export default TextInput;
|