sprint-asia-custom-component 0.1.147 → 0.1.148
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
|
@@ -224,7 +224,8 @@
|
|
|
224
224
|
icon = null,
|
|
225
225
|
positionIcon = "left",
|
|
226
226
|
//left, right // Position
|
|
227
|
-
onClick = () => {}
|
|
227
|
+
onClick = () => {},
|
|
228
|
+
isSubmit = false
|
|
228
229
|
}) => {
|
|
229
230
|
const [isPressed, setIsPressed] = React.useState(false);
|
|
230
231
|
const handleButtonPress = () => {
|
|
@@ -238,7 +239,7 @@
|
|
|
238
239
|
};
|
|
239
240
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
240
241
|
className: `
|
|
241
|
-
${isPressed && isActive ?
|
|
242
|
+
${isPressed && isActive ? "bg-primary700 text-white" : isActive ? "bg-primary500 hover:bg-primary600 text-white cursor-pointer" : "bg-neutral30 text-neutral80 cursor-default"}
|
|
242
243
|
${type === "full" && "w-full"}
|
|
243
244
|
${size === "small" && "text-sm h-7"}
|
|
244
245
|
${size === "medium" && "text-md h-8"}
|
|
@@ -253,7 +254,8 @@
|
|
|
253
254
|
onMouseDown: handleButtonPress,
|
|
254
255
|
onMouseUp: handleButtonRelease,
|
|
255
256
|
onTouchStart: handleButtonPress,
|
|
256
|
-
onTouchEnd: handleButtonRelease
|
|
257
|
+
onTouchEnd: handleButtonRelease,
|
|
258
|
+
type: isSubmit ? "submit" : "button"
|
|
257
259
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
258
260
|
className: "flex items-center"
|
|
259
261
|
}, isIconVisible && positionIcon == "left" && icon && /*#__PURE__*/React__default["default"].createElement("span", {
|
package/package.json
CHANGED
|
@@ -1,33 +1,40 @@
|
|
|
1
|
-
import React, { useState } from
|
|
1
|
+
import React, { useState } from "react";
|
|
2
2
|
|
|
3
3
|
const PrimaryButton = ({
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
4
|
+
title = "Button",
|
|
5
|
+
type = "wrap",
|
|
6
|
+
isActive = true,
|
|
7
|
+
size = "large",
|
|
8
|
+
isIconVisible = false,
|
|
9
|
+
icon = null,
|
|
10
|
+
positionIcon = "left", //left, right // Position
|
|
11
|
+
onClick = () => {},
|
|
12
|
+
isSubmit = false,
|
|
12
13
|
}) => {
|
|
13
|
-
|
|
14
|
+
const [isPressed, setIsPressed] = useState(false);
|
|
14
15
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
const handleButtonPress = () => {
|
|
17
|
+
setIsPressed(true);
|
|
18
|
+
};
|
|
18
19
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
const handleButtonRelease = () => {
|
|
21
|
+
setIsPressed(false);
|
|
22
|
+
};
|
|
22
23
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
const handleClick = (e) => {
|
|
25
|
+
onClick(e);
|
|
26
|
+
};
|
|
26
27
|
|
|
27
28
|
return (
|
|
28
29
|
<button
|
|
29
|
-
|
|
30
|
-
${
|
|
30
|
+
className={`
|
|
31
|
+
${
|
|
32
|
+
isPressed && isActive
|
|
33
|
+
? "bg-primary700 text-white"
|
|
34
|
+
: isActive
|
|
35
|
+
? "bg-primary500 hover:bg-primary600 text-white cursor-pointer"
|
|
36
|
+
: "bg-neutral30 text-neutral80 cursor-default"
|
|
37
|
+
}
|
|
31
38
|
${type === "full" && "w-full"}
|
|
32
39
|
${size === "small" && "text-sm h-7"}
|
|
33
40
|
${size === "medium" && "text-md h-8"}
|
|
@@ -36,26 +43,22 @@ const PrimaryButton = ({
|
|
|
36
43
|
${size === "extra very large" && "text-2xl h-14"}
|
|
37
44
|
${size === "detail division" && "text-sm h-10"}
|
|
38
45
|
${size === "client approval" && "text-sm h-8"}
|
|
39
|
-
rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center`
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
46
|
+
rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center`}
|
|
47
|
+
disabled={!isActive}
|
|
48
|
+
onClick={handleClick}
|
|
49
|
+
onMouseDown={handleButtonPress}
|
|
50
|
+
onMouseUp={handleButtonRelease}
|
|
51
|
+
onTouchStart={handleButtonPress}
|
|
52
|
+
onTouchEnd={handleButtonRelease}
|
|
53
|
+
type={isSubmit ? "submit" : "button"}
|
|
47
54
|
>
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
{
|
|
54
|
-
isIconVisible && positionIcon == "right" && icon && <span className='ml-1'>{icon}</span>
|
|
55
|
-
}
|
|
56
|
-
</div>
|
|
55
|
+
<div className="flex items-center">
|
|
56
|
+
{isIconVisible && positionIcon == "left" && icon && <span className="mr-1">{icon}</span>}
|
|
57
|
+
<p>{title}</p>
|
|
58
|
+
{isIconVisible && positionIcon == "right" && icon && <span className="ml-1">{icon}</span>}
|
|
59
|
+
</div>
|
|
57
60
|
</button>
|
|
58
61
|
);
|
|
59
62
|
};
|
|
60
63
|
|
|
61
|
-
export default PrimaryButton;
|
|
64
|
+
export default PrimaryButton;
|