sprint-asia-custom-component 0.1.119 → 0.1.121

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 (4) hide show
  1. package/dist/index.js +14 -7
  2. package/package.json +1 -1
  3. package/src/components/button/primarybutton/index.js +5 -1
  4. package/src/components/header/index.js +131 -121
package/dist/index.js CHANGED
@@ -153,6 +153,8 @@
153
153
  size = "large",
154
154
  isIconVisible = false,
155
155
  icon = null,
156
+ positionIcon = "left",
157
+ //left, right
156
158
  onClick = () => {}
157
159
  }) => {
158
160
  const [isPressed, setIsPressed] = React.useState(false);
@@ -185,9 +187,11 @@
185
187
  onTouchEnd: handleButtonRelease
186
188
  }, /*#__PURE__*/React__default["default"].createElement("div", {
187
189
  className: "flex items-center"
188
- }, isIconVisible && icon && /*#__PURE__*/React__default["default"].createElement("span", {
190
+ }, isIconVisible && positionIcon == "left" && icon && /*#__PURE__*/React__default["default"].createElement("span", {
189
191
  className: "mr-1"
190
- }, icon), /*#__PURE__*/React__default["default"].createElement("p", null, title)));
192
+ }, icon), /*#__PURE__*/React__default["default"].createElement("p", null, title), isIconVisible && positionIcon == "right" && icon && /*#__PURE__*/React__default["default"].createElement("span", {
193
+ className: "ml-1"
194
+ }, icon)));
191
195
  };
192
196
 
193
197
  const Alert = ({
@@ -47946,6 +47950,7 @@
47946
47950
 
47947
47951
  var img$6 = "data:image/png;base64,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";
47948
47952
 
47953
+ /* eslint-disable jsx-a11y/anchor-is-valid */
47949
47954
  const Header = ({
47950
47955
  title = "Label",
47951
47956
  fullName = "Undefined Name",
@@ -47965,7 +47970,8 @@
47965
47970
  }],
47966
47971
  isNotificationActive = false,
47967
47972
  dataNotification = ["Notification 1", "Notification 2"],
47968
- dataBalance = "0"
47973
+ dataBalance = "0",
47974
+ onClickWallet
47969
47975
  }) => {
47970
47976
  const [isProfileContentVisible, setProfileContentVisible] = React.useState(false);
47971
47977
  const [isNotificationContentVisible, setNotificationContentVisible] = React.useState(false);
@@ -47987,8 +47993,9 @@
47987
47993
  className: "text-2xl font-semibold"
47988
47994
  }, title), /*#__PURE__*/React__default["default"].createElement("div", {
47989
47995
  className: "flex"
47990
- }, /*#__PURE__*/React__default["default"].createElement("div", {
47991
- className: "flex items-center"
47996
+ }, /*#__PURE__*/React__default["default"].createElement("a", {
47997
+ className: "flex items-center cursor-pointer",
47998
+ onClick: onClickWallet
47992
47999
  }, /*#__PURE__*/React__default["default"].createElement("div", {
47993
48000
  className: "w-10 h-10 rounded-full border border-neutral40 mr-2 flex items-center justify-center"
47994
48001
  }, /*#__PURE__*/React__default["default"].createElement(PiWalletDuotone, {
@@ -48018,7 +48025,7 @@
48018
48025
  }, dataNotification.map((value, index) => /*#__PURE__*/React__default["default"].createElement("div", {
48019
48026
  key: index,
48020
48027
  className: `px-2 flex items-center cursor-pointer bg-white hover:bg-neutral20 p-2
48021
- ${dataProfile.length == 1 ? "rounded-md" : index === 0 ? "rounded-t-md" : index === dataProfile.length - 1 ? 'rounded-b-md' : ""}
48028
+ ${dataProfile.length == 1 ? "rounded-md" : index === 0 ? "rounded-t-md" : index === dataProfile.length - 1 ? "rounded-b-md" : ""}
48022
48029
  `,
48023
48030
  onClick: value.action
48024
48031
  }, /*#__PURE__*/React__default["default"].createElement("p", {
@@ -48045,7 +48052,7 @@
48045
48052
  }, dataProfile.map((value, index) => /*#__PURE__*/React__default["default"].createElement("div", {
48046
48053
  key: index,
48047
48054
  className: `px-2 flex items-center cursor-pointer bg-white hover:bg-neutral20 p-2
48048
- ${dataProfile.length == 1 ? "rounded-md" : index === 0 ? "rounded-t-md" : index === dataProfile.length - 1 ? 'rounded-b-md' : ""}
48055
+ ${dataProfile.length == 1 ? "rounded-md" : index === 0 ? "rounded-t-md" : index === dataProfile.length - 1 ? "rounded-b-md" : ""}
48049
48056
  `,
48050
48057
  onClick: value.action
48051
48058
  }, /*#__PURE__*/React__default["default"].createElement(value.logo, {
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.119",
4
+ "version": "0.1.121",
5
5
  "private": false,
6
6
  "dependencies": {
7
7
  "@headlessui/react": "^1.7.18",
package/src/components/button/primarybutton/index.js CHANGED
@@ -7,6 +7,7 @@ const PrimaryButton = ({
7
7
  size = "large",
8
8
  isIconVisible = false,
9
9
  icon = null,
10
+ positionIcon = "left", //left, right
10
11
  onClick = () => {}
11
12
  }) => {
12
13
  const [isPressed, setIsPressed] = useState(false);
@@ -46,9 +47,12 @@ const PrimaryButton = ({
46
47
  >
47
48
  <div className='flex items-center'>
48
49
  {
49
- isIconVisible && icon && <span className='mr-1'>{icon}</span>
50
+ isIconVisible && positionIcon == "left" && icon && <span className='mr-1'>{icon}</span>
50
51
  }
51
52
  <p>{title}</p>
53
+ {
54
+ isIconVisible && positionIcon == "right" && icon && <span className='ml-1'>{icon}</span>
55
+ }
52
56
  </div>
53
57
  </button>
54
58
  );
package/src/components/header/index.js CHANGED
@@ -1,134 +1,144 @@
1
- import React, {useState, useRef} from 'react'
2
- import Profile from '../../assets/images/profile.png';
3
- import { PiDoorOpenDuotone, PiUserCircleDuotone, PiBellDuotone,PiWalletDuotone } from 'react-icons/pi';
1
+ /* eslint-disable jsx-a11y/anchor-is-valid */
2
+ import React, { useState, useRef } from "react";
3
+ import Profile from "../../assets/images/profile.png";
4
+ import { PiDoorOpenDuotone, PiUserCircleDuotone, PiBellDuotone, PiWalletDuotone } from "react-icons/pi";
4
5
 
5
6
  const Header = ({
6
- title = "Label",
7
- fullName = "Undefined Name",
8
- roleName = "Undefined Role",
9
- dataProfile = [
10
- { title: "Change Password", action: () => {console.log("Change Password")}, logo: PiUserCircleDuotone},
11
- { title: "Logout", action: () => {console.log("Logout")}, logo: PiDoorOpenDuotone},
12
- ],
13
- isNotificationActive = false,
14
- dataNotification = ["Notification 1", "Notification 2"],
15
- dataBalance = "0"
7
+ title = "Label",
8
+ fullName = "Undefined Name",
9
+ roleName = "Undefined Role",
10
+ dataProfile = [
11
+ {
12
+ title: "Change Password",
13
+ action: () => {
14
+ console.log("Change Password");
15
+ },
16
+ logo: PiUserCircleDuotone,
17
+ },
18
+ {
19
+ title: "Logout",
20
+ action: () => {
21
+ console.log("Logout");
22
+ },
23
+ logo: PiDoorOpenDuotone,
24
+ },
25
+ ],
26
+ isNotificationActive = false,
27
+ dataNotification = ["Notification 1", "Notification 2"],
28
+ dataBalance = "0",
29
+ onClickWallet,
16
30
  }) => {
17
-
18
- const [isProfileContentVisible, setProfileContentVisible] = useState(false);
19
- const [isNotificationContentVisible, setNotificationContentVisible] = useState(false);
20
- const modalRefProfile = useRef(null);
21
- const modalRefNotification = useRef(null);
31
+ const [isProfileContentVisible, setProfileContentVisible] = useState(false);
32
+ const [isNotificationContentVisible, setNotificationContentVisible] = useState(false);
33
+ const modalRefProfile = useRef(null);
34
+ const modalRefNotification = useRef(null);
22
35
 
23
- function toggleProfileContent() {
24
- setProfileContentVisible(!isProfileContentVisible)
25
- setNotificationContentVisible(false)
26
- }
36
+ function toggleProfileContent() {
37
+ setProfileContentVisible(!isProfileContentVisible);
38
+ setNotificationContentVisible(false);
39
+ }
40
+
41
+ function toggleNotificationContent() {
42
+ setNotificationContentVisible(!isNotificationContentVisible);
43
+ setProfileContentVisible(false);
44
+ }
27
45
 
28
- function toggleNotificationContent() {
29
- setNotificationContentVisible(!isNotificationContentVisible)
30
- setProfileContentVisible(false)
31
- }
32
-
33
46
  return (
34
- <div className='w-full h-16 flex items-center bg-white border-b border-neutral40 px-8'>
35
- <div className='flex w-full justify-between items-center'>
36
- <p className='text-2xl font-semibold'>{title}</p>
37
- <div className='flex'>
38
- <div className='flex items-center'>
39
- <div className='w-10 h-10 rounded-full border border-neutral40 mr-2 flex items-center justify-center'>
40
- <PiWalletDuotone size={24} />
41
- </div>
42
- <div>
43
- <p className='text-neutral300 text-xs'>Balance:</p>
44
- <p className='font-semibold text-black'>Rp {dataBalance}</p>
45
- </div>
46
- </div>
47
- <div className="w-px bg-neutral40 h-16 mx-3"></div>
48
- <div className='flex items-center cursor-pointer' onClick={toggleNotificationContent} ref={modalRefNotification}>
49
- <div className='w-10 h-10 rounded-full border border-neutral40 flex items-center justify-center'>
50
- <div className='relative'>
51
- <PiBellDuotone size={24} />
52
- {
53
- isNotificationActive &&
54
- <div className='absolute top-0 right-0 border border-white w-2 h-2 rounded-full bg-danger500'></div>
55
- }
56
- </div>
57
- </div>
58
- {isNotificationContentVisible && (
59
- <div
60
- className='absolute right-20 top-16 z-50'
61
- >
62
- {dataNotification.length !== 0 && (
63
- <div className='z-50 w-48 bg-white border border-neutral40 rounded-md shadow-md'>
64
- {dataNotification.map((value, index) => (
65
- <div
66
- key={index}
67
- className={`px-2 flex items-center cursor-pointer bg-white hover:bg-neutral20 p-2
68
- ${dataProfile.length == 1 ?
69
- "rounded-md"
70
- :
71
- index === 0 ?
72
- "rounded-t-md"
73
- :
74
- index === dataProfile.length - 1 ?
75
- 'rounded-b-md'
76
- : ""
47
+ <div className="w-full h-16 flex items-center bg-white border-b border-neutral40 px-8">
48
+ <div className="flex w-full justify-between items-center">
49
+ <p className="text-2xl font-semibold">{title}</p>
50
+ <div className="flex">
51
+ <a className="flex items-center cursor-pointer" onClick={onClickWallet}>
52
+ <div className="w-10 h-10 rounded-full border border-neutral40 mr-2 flex items-center justify-center">
53
+ <PiWalletDuotone size={24} />
54
+ </div>
55
+ <div>
56
+ <p className="text-neutral300 text-xs">Balance:</p>
57
+ <p className="font-semibold text-black">Rp {dataBalance}</p>
58
+ </div>
59
+ </a>
60
+ <div className="w-px bg-neutral40 h-16 mx-3"></div>
61
+ <div
62
+ className="flex items-center cursor-pointer"
63
+ onClick={toggleNotificationContent}
64
+ ref={modalRefNotification}
65
+ >
66
+ <div className="w-10 h-10 rounded-full border border-neutral40 flex items-center justify-center">
67
+ <div className="relative">
68
+ <PiBellDuotone size={24} />
69
+ {isNotificationActive && (
70
+ <div className="absolute top-0 right-0 border border-white w-2 h-2 rounded-full bg-danger500"></div>
71
+ )}
72
+ </div>
73
+ </div>
74
+ {isNotificationContentVisible && (
75
+ <div className="absolute right-20 top-16 z-50">
76
+ {dataNotification.length !== 0 && (
77
+ <div className="z-50 w-48 bg-white border border-neutral40 rounded-md shadow-md">
78
+ {dataNotification.map((value, index) => (
79
+ <div
80
+ key={index}
81
+ className={`px-2 flex items-center cursor-pointer bg-white hover:bg-neutral20 p-2
82
+ ${
83
+ dataProfile.length == 1
84
+ ? "rounded-md"
85
+ : index === 0
86
+ ? "rounded-t-md"
87
+ : index === dataProfile.length - 1
88
+ ? "rounded-b-md"
89
+ : ""
77
90
  }
78
91
  `}
79
- onClick={value.action}
80
- >
81
- <p className='text-sm'>{value}</p>
82
- </div>
83
- ))}
84
- </div>
85
- )}
86
- </div>
87
- )}
88
- </div>
89
- <div className="w-px bg-neutral40 h-16 mx-3"></div>
90
- <div className='flex items-center cursor-pointer' onClick={toggleProfileContent} ref={modalRefProfile}>
91
- <img src={Profile} className='w-10 h-10 mr-2' />
92
- <div className='flex-1'>
93
- <p className='text-sm text-black font-semibold whitespace-nowrap'>{fullName}</p>
94
- <p className='text-xs text-neutral300 font-normal whitespace-nowrap'>{roleName}</p>
95
- </div>
96
- {isProfileContentVisible && (
97
- <div
98
- className='absolute right-0 top-16 z-50'
99
- >
100
- {dataProfile.length !== 0 && (
101
- <div className='z-50 w-48 bg-white border border-neutral40 rounded-md shadow-md'>
102
- {dataProfile.map((value, index) => (
103
- <div
104
- key={index}
105
- className={`px-2 flex items-center cursor-pointer bg-white hover:bg-neutral20 p-2
106
- ${dataProfile.length == 1 ?
107
- "rounded-md"
108
- :
109
- index === 0 ?
110
- "rounded-t-md"
111
- :
112
- index === dataProfile.length - 1 ?
113
- 'rounded-b-md'
114
- : ""
92
+ onClick={value.action}
93
+ >
94
+ <p className="text-sm">{value}</p>
95
+ </div>
96
+ ))}
97
+ </div>
98
+ )}
99
+ </div>
100
+ )}
101
+ </div>
102
+ <div className="w-px bg-neutral40 h-16 mx-3"></div>
103
+ <div className="flex items-center cursor-pointer" onClick={toggleProfileContent} ref={modalRefProfile}>
104
+ <img src={Profile} className="w-10 h-10 mr-2" />
105
+ <div className="flex-1">
106
+ <p className="text-sm text-black font-semibold whitespace-nowrap">{fullName}</p>
107
+ <p className="text-xs text-neutral300 font-normal whitespace-nowrap">{roleName}</p>
108
+ </div>
109
+ {isProfileContentVisible && (
110
+ <div className="absolute right-0 top-16 z-50">
111
+ {dataProfile.length !== 0 && (
112
+ <div className="z-50 w-48 bg-white border border-neutral40 rounded-md shadow-md">
113
+ {dataProfile.map((value, index) => (
114
+ <div
115
+ key={index}
116
+ className={`px-2 flex items-center cursor-pointer bg-white hover:bg-neutral20 p-2
117
+ ${
118
+ dataProfile.length == 1
119
+ ? "rounded-md"
120
+ : index === 0
121
+ ? "rounded-t-md"
122
+ : index === dataProfile.length - 1
123
+ ? "rounded-b-md"
124
+ : ""
115
125
  }
116
126
  `}
117
- onClick={value.action}
118
- >
119
- <value.logo size={16} className='text-neutral300 mr-2' />
120
- <p className='text-sm'>{value.title}</p>
121
- </div>
122
- ))}
123
- </div>
124
- )}
125
- </div>
126
- )}
127
- </div>
128
- </div>
127
+ onClick={value.action}
128
+ >
129
+ <value.logo size={16} className="text-neutral300 mr-2" />
130
+ <p className="text-sm">{value.title}</p>
131
+ </div>
132
+ ))}
133
+ </div>
134
+ )}
135
+ </div>
136
+ )}
137
+ </div>
129
138
  </div>
139
+ </div>
130
140
  </div>
131
- )
132
- }
141
+ );
142
+ };
133
143
 
134
- export default Header
144
+ export default Header;