sprint-asia-custom-component 0.1.135 → 0.1.136

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 (5) hide show
  1. package/dist/index.js +15 -11
  2. package/package.json +1 -1
  3. package/src/components/searchdropdown/index.js +1 -1
  4. package/src/components/table/pagination/index.js +11 -10
  5. package/src/templates/index.js +17 -0
package/dist/index.js CHANGED
@@ -45422,6 +45422,7 @@
45422
45422
  totalCount = 0,
45423
45423
  currentPage = 1,
45424
45424
  totalPage = 10,
45425
+ isLoading = false,
45425
45426
  onChangePages
45426
45427
  }) => {
45427
45428
  const pageNumbers = Array.from({
@@ -45436,23 +45437,23 @@
45436
45437
  className: "flex justify-between items-center"
45437
45438
  }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
45438
45439
  className: "text-sm text-black font-normal p-4"
45439
- }, "From ", firstData || 0, " to ", lastData || 0, " of total : ", totalCount || 0)), /*#__PURE__*/React__default["default"].createElement("div", {
45440
+ }, "From ", isLoading ? 0 : firstData || 0, " to ", isLoading ? 0 : lastData || 0, " of total : ", isLoading ? 0 : totalCount || 0)), /*#__PURE__*/React__default["default"].createElement("div", {
45440
45441
  className: "flex px-4 py-2"
45441
45442
  }, /*#__PURE__*/React__default["default"].createElement("div", {
45442
- className: `m-1 w-10 h-10 rounded-full ${currentPage === 1 || firstData === 0 || lastData === 0 || totalCount === 0 || !firstData || !lastData || !totalCount ? 'bg-neutral20 cursor-default' : 'bg-white cursor-pointer border border-neutral40'} flex items-center justify-center`,
45443
+ className: `m-1 w-10 h-10 rounded-full ${currentPage === 1 || firstData === 0 || lastData === 0 || totalCount === 0 || !firstData || !lastData || !totalCount || isLoading ? 'bg-neutral20 cursor-default' : 'bg-white cursor-pointer border border-neutral40'} flex items-center justify-center`,
45443
45444
  onClick: () => {
45444
- if (currentPage !== 1 || firstData > 0 || lastData > 0 || totalCount > 0) {
45445
+ if (currentPage !== 1 && !isLoading) {
45445
45446
  handleChangePages(currentPage - 1);
45446
45447
  }
45447
45448
  }
45448
45449
  }, /*#__PURE__*/React__default["default"].createElement(PiCaretLeft, {
45449
45450
  size: 16,
45450
45451
  className: "text-neutral300"
45451
- })), totalPage < 4 ? pageNumbers.map(pageNumber => /*#__PURE__*/React__default["default"].createElement("div", {
45452
+ })), totalPage < 4 && !isLoading ? pageNumbers.map(pageNumber => /*#__PURE__*/React__default["default"].createElement("div", {
45452
45453
  key: pageNumber,
45453
45454
  className: `m-1 w-10 h-10 rounded-full cursor-pointer ${currentPage === pageNumber ? 'bg-primary500 text-white' : 'bg-white text-black border border-neutral40'} flex items-center justify-center font-semibold`,
45454
45455
  onClick: () => handleChangePages(pageNumber)
45455
- }, /*#__PURE__*/React__default["default"].createElement("p", null, pageNumber))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, currentPage == 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
45456
+ }, /*#__PURE__*/React__default["default"].createElement("p", null, pageNumber))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, currentPage == 1 && !isLoading && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
45456
45457
  key: currentPage,
45457
45458
  className: "m-1 w-10 h-10 rounded-full bg-primary500 text-white cursor-pointer flex items-center justify-center font-semibold",
45458
45459
  onClick: () => handleChangePages(currentPage)
@@ -45467,7 +45468,7 @@
45467
45468
  key: totalPage,
45468
45469
  className: "m-1 w-10 h-10 rounded-full bg-white text-black border border-neutral40 cursor-pointer flex items-center justify-center font-semibold",
45469
45470
  onClick: () => handleChangePages(totalPage)
45470
- }, /*#__PURE__*/React__default["default"].createElement("p", null, totalPage))), currentPage > 1 && currentPage != totalPage - 1 && currentPage != totalPage && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
45471
+ }, /*#__PURE__*/React__default["default"].createElement("p", null, totalPage))), currentPage > 1 && currentPage != totalPage - 1 && currentPage != totalPage && !isLoading && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
45471
45472
  key: currentPage - 1,
45472
45473
  className: "m-1 w-10 h-10 rounded-full bg-white text-black border border-neutral40 cursor-pointer flex items-center justify-center font-semibold",
45473
45474
  onClick: () => handleChangePages(currentPage - 1)
@@ -45482,7 +45483,7 @@
45482
45483
  key: totalPage,
45483
45484
  className: "m-1 w-10 h-10 rounded-full bg-white text-black border border-neutral40 cursor-pointer flex items-center justify-center font-semibold",
45484
45485
  onClick: () => handleChangePages(totalPage)
45485
- }, /*#__PURE__*/React__default["default"].createElement("p", null, totalPage))), currentPage == totalPage - 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
45486
+ }, /*#__PURE__*/React__default["default"].createElement("p", null, totalPage))), currentPage == totalPage - 1 && !isLoading && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
45486
45487
  key: totalPage - 2,
45487
45488
  className: "m-1 w-10 h-10 rounded-full bg-white text-black border border-neutral40 cursor-pointer flex items-center justify-center font-semibold",
45488
45489
  onClick: () => handleChangePages(totalPage - 2)
@@ -45497,7 +45498,7 @@
45497
45498
  key: totalPage,
45498
45499
  className: "m-1 w-10 h-10 rounded-full bg-white text-black border border-neutral40 cursor-pointer flex items-center justify-center font-semibold",
45499
45500
  onClick: () => handleChangePages(totalPage)
45500
- }, /*#__PURE__*/React__default["default"].createElement("p", null, totalPage))), currentPage == totalPage && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
45501
+ }, /*#__PURE__*/React__default["default"].createElement("p", null, totalPage))), currentPage == totalPage && !isLoading && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
45501
45502
  key: totalPage - 2,
45502
45503
  className: "m-1 w-10 h-10 rounded-full bg-white text-black border border-neutral40 cursor-pointer flex items-center justify-center font-semibold",
45503
45504
  onClick: () => handleChangePages(totalPage - 2)
@@ -45513,9 +45514,9 @@
45513
45514
  className: "m-1 w-10 h-10 rounded-full bg-primary500 text-white cursor-pointer flex items-center justify-center font-semibold",
45514
45515
  onClick: () => handleChangePages(currentPage)
45515
45516
  }, /*#__PURE__*/React__default["default"].createElement("p", null, currentPage)))), /*#__PURE__*/React__default["default"].createElement("div", {
45516
- className: `m-1 w-10 h-10 rounded-full ${currentPage === totalPage || firstData === 0 || lastData === 0 || totalCount === 0 || !firstData || !lastData || !totalCount ? 'bg-neutral20 cursor-default' : 'bg-white cursor-pointer border border-neutral40'} flex items-center justify-center`,
45517
+ className: `m-1 w-10 h-10 rounded-full ${currentPage === totalPage || firstData === 0 || lastData === 0 || totalCount === 0 || !firstData || !lastData || !totalCount || isLoading ? 'bg-neutral20 cursor-default' : 'bg-white cursor-pointer border border-neutral40'} flex items-center justify-center`,
45517
45518
  onClick: () => {
45518
- if (currentPage !== totalPage || firstData > 0 || lastData > 0 || totalCount > 0) {
45519
+ if (currentPage !== totalPage && firstData > 0 && lastData > 0 && totalCount > 0 && !isLoading) {
45519
45520
  handleChangePages(currentPage + 1);
45520
45521
  }
45521
45522
  }
@@ -47745,7 +47746,10 @@
47745
47746
  className: `${input ? "border-black" : "border-neutral50"} relative cursor-pointer border-t border-b border-l rounded-tl-md rounded-bl-md`,
47746
47747
  onClick: () => setIsOpen(!isOpen)
47747
47748
  }, /*#__PURE__*/React__default["default"].createElement("div", {
47748
- className: "flex items-center bg-white rounded-tl-md rounded-bl-md min-w-36"
47749
+ className: "flex items-center bg-white rounded-tl-md rounded-bl-md",
47750
+ style: {
47751
+ minWidth: "144px"
47752
+ }
47749
47753
  }, /*#__PURE__*/React__default["default"].createElement("p", {
47750
47754
  className: "flex items-center w-full py-2.5 text-left pl-4 pr-4 bg-white rounded-md font-bold text-sm text-neutral300"
47751
47755
  }, filterDropdown.option), isOpen ? /*#__PURE__*/React__default["default"].createElement(PiCaretUp, null) : /*#__PURE__*/React__default["default"].createElement(PiCaretDown, null), /*#__PURE__*/React__default["default"].createElement("p", {
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.135",
4
+ "version": "0.1.136",
5
5
  "private": false,
6
6
  "dependencies": {
7
7
  "@headlessui/react": "^1.7.18",
package/src/components/searchdropdown/index.js CHANGED
@@ -41,7 +41,7 @@ const SearchDropdown = ({
41
41
  } relative cursor-pointer border-t border-b border-l rounded-tl-md rounded-bl-md`}
42
42
  onClick={() => setIsOpen(!isOpen)}
43
43
  >
44
- <div className="flex items-center bg-white rounded-tl-md rounded-bl-md min-w-36">
44
+ <div className="flex items-center bg-white rounded-tl-md rounded-bl-md" style={{minWidth:"144px"}}>
45
45
  <p className="flex items-center w-full py-2.5 text-left pl-4 pr-4 bg-white rounded-md font-bold text-sm text-neutral300">
46
46
  {filterDropdown.option}
47
47
  </p>
package/src/components/table/pagination/index.js CHANGED
@@ -7,6 +7,7 @@ const Pagination = ({
7
7
  totalCount = 0,
8
8
  currentPage = 1,
9
9
  totalPage = 10,
10
+ isLoading = false,
10
11
  onChangePages
11
12
  }) => {
12
13
  const pageNumbers = Array.from({ length: totalPage }, (_, index) => index + 1);
@@ -20,25 +21,25 @@ const Pagination = ({
20
21
  <div className='flex justify-between items-center'>
21
22
  <div>
22
23
  <p className='text-sm text-black font-normal p-4'>
23
- From {firstData || 0} to {lastData || 0} of total : {totalCount || 0}
24
+ From {isLoading ? 0 : firstData || 0} to {isLoading ? 0 : lastData || 0} of total : {isLoading ? 0 : totalCount || 0}
24
25
  </p>
25
26
  </div>
26
27
  <div className='flex px-4 py-2'>
27
28
  <div
28
29
  className={`m-1 w-10 h-10 rounded-full ${
29
- (currentPage === 1 || firstData === 0 || lastData === 0 || totalCount === 0 || !firstData || !lastData || !totalCount)
30
+ (currentPage === 1 || firstData === 0 || lastData === 0 || totalCount === 0 || !firstData || !lastData || !totalCount || isLoading)
30
31
  ? 'bg-neutral20 cursor-default'
31
32
  : 'bg-white cursor-pointer border border-neutral40'
32
33
  } flex items-center justify-center`}
33
34
  onClick={() => {
34
- if (currentPage !== 1 || firstData > 0 || lastData > 0 || totalCount > 0) {
35
+ if (currentPage !== 1 && !isLoading) {
35
36
  handleChangePages(currentPage - 1);
36
37
  }
37
38
  }}
38
39
  >
39
40
  <PiCaretLeft size={16} className='text-neutral300' />
40
41
  </div>
41
- {totalPage < 4 ?
42
+ {totalPage < 4 && !isLoading ?
42
43
  pageNumbers.map((pageNumber) => (
43
44
  <div
44
45
  key={pageNumber}
@@ -55,7 +56,7 @@ const Pagination = ({
55
56
  :
56
57
  <>
57
58
  {
58
- currentPage == 1 && (
59
+ currentPage == 1 && !isLoading && (
59
60
  <>
60
61
  <div
61
62
  key={currentPage}
@@ -88,7 +89,7 @@ const Pagination = ({
88
89
  )
89
90
  }
90
91
  {
91
- (currentPage > 1 && currentPage != totalPage - 1 && currentPage != totalPage) && (
92
+ (currentPage > 1 && currentPage != totalPage - 1 && currentPage != totalPage) && !isLoading && (
92
93
  <>
93
94
  <div
94
95
  key={currentPage - 1}
@@ -121,7 +122,7 @@ const Pagination = ({
121
122
  )
122
123
  }
123
124
  {
124
- (currentPage == totalPage - 1) && (
125
+ (currentPage == totalPage - 1) && !isLoading && (
125
126
  <>
126
127
  <div
127
128
  key={totalPage - 2}
@@ -154,7 +155,7 @@ const Pagination = ({
154
155
  )
155
156
  }
156
157
  {
157
- (currentPage == totalPage) && (
158
+ (currentPage == totalPage) && !isLoading && (
158
159
  <>
159
160
  <div
160
161
  key={totalPage - 2}
@@ -190,12 +191,12 @@ const Pagination = ({
190
191
  }
191
192
  <div
192
193
  className={`m-1 w-10 h-10 rounded-full ${
193
- (currentPage === totalPage || firstData === 0 || lastData === 0 || totalCount === 0 || !firstData || !lastData || !totalCount)
194
+ (currentPage === totalPage || firstData === 0 || lastData === 0 || totalCount === 0 || !firstData || !lastData || !totalCount || isLoading)
194
195
  ? 'bg-neutral20 cursor-default'
195
196
  : 'bg-white cursor-pointer border border-neutral40'
196
197
  } flex items-center justify-center`}
197
198
  onClick={() => {
198
- if (currentPage !== totalPage || firstData > 0 || lastData > 0 || totalCount > 0) {
199
+ if (currentPage !== totalPage && firstData > 0 && lastData > 0 && totalCount > 0 && !isLoading) {
199
200
  handleChangePages(currentPage + 1)
200
201
  }
201
202
  }}
package/src/templates/index.js CHANGED
@@ -1523,6 +1523,23 @@ const Templates = () => {
1523
1523
  totalPage={null}
1524
1524
  onChangePages={(page) => setCurrentPage(page)}
1525
1525
  />
1526
+ <Pagination
1527
+ firstData={0}
1528
+ lastData={0}
1529
+ totalCount={0}
1530
+ currentPage={1}
1531
+ totalPage={0}
1532
+ onChangePages={(page) => setCurrentPage(page)}
1533
+ />
1534
+ <Pagination
1535
+ firstData={(currentPage - 1) * 10 + 1}
1536
+ lastData={currentPage * 10 > totalCount ? totalCount : currentPage * 10}
1537
+ totalCount={totalCount}
1538
+ currentPage={currentPage}
1539
+ totalPage={totalPage}
1540
+ isLoading
1541
+ onChangePages={(page) => setCurrentPage(page)}
1542
+ />
1526
1543
 
1527
1544
  <div className="m-9"></div>
1528
1545
  <p className="text-black font-bold text-2xl text-center py-2">Text Input</p>