sprint-asia-custom-component 0.1.134 → 0.1.136

package/dist/index.js

@@ -45422,6 +45422,7 @@
     totalCount = 0,
     currentPage = 1,
     totalPage = 10,
+    isLoading = false,
     onChangePages
   }) => {
     const pageNumbers = Array.from({
@@ -45436,23 +45437,23 @@
       className: "flex justify-between items-center"
     }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
       className: "text-sm text-black font-normal p-4"
-    }, "From ", firstData, " to ", lastData, " of total : ", totalCount)), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, "From ", isLoading ? 0 : firstData || 0, " to ", isLoading ? 0 : lastData || 0, " of total : ", isLoading ? 0 : totalCount || 0)), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex px-4 py-2"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: `m-1 w-10 h-10 rounded-full ${currentPage === 1 ? 'bg-neutral20 cursor-default' : 'bg-white cursor-pointer border border-neutral40'} flex items-center justify-center`,
+      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`,
       onClick: () => {
-        if (currentPage !== 1) {
+        if (currentPage !== 1 && !isLoading) {
           handleChangePages(currentPage - 1);
         }
       }
     }, /*#__PURE__*/React__default["default"].createElement(PiCaretLeft, {
       size: 16,
       className: "text-neutral300"
-    })), totalPage < 4 ? pageNumbers.map(pageNumber => /*#__PURE__*/React__default["default"].createElement("div", {
+    })), totalPage < 4 && !isLoading ? pageNumbers.map(pageNumber => /*#__PURE__*/React__default["default"].createElement("div", {
       key: pageNumber,
       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`,
       onClick: () => handleChangePages(pageNumber)
-    }, /*#__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", {
+    }, /*#__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", {
       key: currentPage,
       className: "m-1 w-10 h-10 rounded-full bg-primary500 text-white cursor-pointer flex items-center justify-center font-semibold",
       onClick: () => handleChangePages(currentPage)
@@ -45467,7 +45468,7 @@
       key: totalPage,
       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",
       onClick: () => handleChangePages(totalPage)
-    }, /*#__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", {
+    }, /*#__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", {
       key: currentPage - 1,
       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",
       onClick: () => handleChangePages(currentPage - 1)
@@ -45482,7 +45483,7 @@
       key: totalPage,
       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",
       onClick: () => handleChangePages(totalPage)
-    }, /*#__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", {
+    }, /*#__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", {
       key: totalPage - 2,
       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",
       onClick: () => handleChangePages(totalPage - 2)
@@ -45497,7 +45498,7 @@
       key: totalPage,
       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",
       onClick: () => handleChangePages(totalPage)
-    }, /*#__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", {
+    }, /*#__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", {
       key: totalPage - 2,
       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",
       onClick: () => handleChangePages(totalPage - 2)
@@ -45513,9 +45514,9 @@
       className: "m-1 w-10 h-10 rounded-full bg-primary500 text-white cursor-pointer flex items-center justify-center font-semibold",
       onClick: () => handleChangePages(currentPage)
     }, /*#__PURE__*/React__default["default"].createElement("p", null, currentPage)))), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: `m-1 w-10 h-10 rounded-full ${currentPage === totalPage ? 'bg-neutral20 cursor-default' : 'bg-white cursor-pointer border border-neutral40'} flex items-center justify-center`,
+      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`,
       onClick: () => {
-        if (currentPage !== totalPage) {
+        if (currentPage !== totalPage && firstData > 0 && lastData > 0 && totalCount > 0 && !isLoading) {
           handleChangePages(currentPage + 1);
         }
       }
@@ -47745,7 +47746,10 @@
       className: `${input ? "border-black" : "border-neutral50"} relative cursor-pointer border-t border-b border-l rounded-tl-md rounded-bl-md`,
       onClick: () => setIsOpen(!isOpen)
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "flex items-center bg-white rounded-tl-md rounded-bl-md"
+      className: "flex items-center bg-white rounded-tl-md rounded-bl-md",
+      style: {
+        minWidth: "144px"
+      }
     }, /*#__PURE__*/React__default["default"].createElement("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"
     }, filterDropdown.option), isOpen ? /*#__PURE__*/React__default["default"].createElement(PiCaretUp, null) : /*#__PURE__*/React__default["default"].createElement(PiCaretDown, null), /*#__PURE__*/React__default["default"].createElement("p", {
@@ -47807,6 +47811,22 @@
         value: "payment1"
       }],
       type: "checkbox"
+    }, {
+      menu: "Payment 2",
+      parameter: "payment 2",
+      submenu: [{
+        option: "Payment 2",
+        value: "payment2"
+      }],
+      type: "checkbox"
+    }, {
+      menu: "Payment 3",
+      parameter: "payment 3",
+      submenu: [{
+        option: "Payment 3",
+        value: "payment3"
+      }],
+      type: "checkbox"
     }],
     dataFilterResult,
     setDataFilterResult = () => {}
@@ -47910,7 +47930,7 @@
         fontSize: "8px"
       }
     }, dataFilterResult[option.parameter]?.length || 0))), showFilterSubmenu && option.submenu.length > 0 && dataSelectionOptionMenu === option.menu && /*#__PURE__*/React__default["default"].createElement("div", {
-      className: `ml-1 border border-neutral40 bg-white p-3 shadow-md rounded-md w-56 absolute left-48 cursor-pointer ${index == 0 && "top-0"} ${index == 1 && "top-16"} ${index == 2 && "top-24"} ${index == 3 && "top-36"}`
+      className: `ml-1 border border-neutral40 bg-white p-3 shadow-md rounded-md w-56 absolute left-48 cursor-pointer ${index == 0 && "top-0"} ${index == 1 && "top-16"} ${index == 2 && "top-24"} ${index == 3 && "top-36"} ${index == 4 && "top-48"}`
     }, option.submenu.map((submenu, subIndex) => /*#__PURE__*/React__default["default"].createElement("div", {
       key: subIndex,
       className: "flex bg-white hover:bg-neutral20 rounded-md py-2.5 px-4 my-0.5",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprint-asia-custom-component",
   "main": "dist/index.js",
-  "version": "0.1.134",
+  "version": "0.1.136",
   "private": false,
   "dependencies": {
     "@headlessui/react": "^1.7.18",

package/src/components/filter/filterDropdown/index.js

@@ -30,6 +30,24 @@ const FilterDropdown = ({
             }],
             type:"checkbox"
         },
+        {
+            menu:"Payment 2",
+            parameter : "payment 2",
+            submenu:[{
+                option : "Payment 2",
+                value : "payment2"
+            }],
+            type:"checkbox"
+        },
+        {
+            menu:"Payment 3",
+            parameter : "payment 3",
+            submenu:[{
+                option : "Payment 3",
+                value : "payment3"
+            }],
+            type:"checkbox"
+        },
     ],
     dataFilterResult,
     setDataFilterResult = () => {},
@@ -157,7 +175,7 @@ const FilterDropdown = ({
                                         </div>
                                         {   
                                             showFilterSubmenu && option.submenu.length > 0 && dataSelectionOptionMenu === option.menu &&
-                                            <div className={`ml-1 border border-neutral40 bg-white p-3 shadow-md rounded-md w-56 absolute left-48 cursor-pointer ${index == 0 && "top-0"} ${index == 1 && "top-16"} ${index == 2 && "top-24"} ${index == 3 && "top-36"}`}>
+                                            <div className={`ml-1 border border-neutral40 bg-white p-3 shadow-md rounded-md w-56 absolute left-48 cursor-pointer ${index == 0 && "top-0"} ${index == 1 && "top-16"} ${index == 2 && "top-24"} ${index == 3 && "top-36"} ${index == 4 && "top-48"}`}>
                                                 {
                                                     option.submenu.map((submenu, subIndex) => (
                                                         <div key={subIndex} className='flex bg-white hover:bg-neutral20 rounded-md py-2.5 px-4 my-0.5' 

package/src/components/searchdropdown/index.js

@@ -41,7 +41,7 @@ const SearchDropdown = ({
           } relative cursor-pointer border-t border-b border-l rounded-tl-md rounded-bl-md`}
           onClick={() => setIsOpen(!isOpen)}
         >
-          <div className="flex items-center bg-white rounded-tl-md rounded-bl-md">
+          <div className="flex items-center bg-white rounded-tl-md rounded-bl-md" style={{minWidth:"144px"}}>
             <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">
               {filterDropdown.option}
             </p>

package/src/components/table/pagination/index.js

@@ -7,6 +7,7 @@ const Pagination = ({
     totalCount = 0, 
     currentPage = 1, 
     totalPage = 10,
+    isLoading = false,
     onChangePages
 }) => {
   const pageNumbers = Array.from({ length: totalPage }, (_, index) => index + 1);
@@ -20,25 +21,25 @@ const Pagination = ({
       <div className='flex justify-between items-center'>
         <div>
             <p className='text-sm text-black font-normal p-4'>
-                From {firstData} to {lastData} of total : {totalCount}
+                From {isLoading ? 0 : firstData || 0} to {isLoading ? 0 : lastData || 0} of total : {isLoading ? 0 : totalCount || 0}
             </p>
         </div>
         <div className='flex px-4 py-2'>
         <div
             className={`m-1 w-10 h-10 rounded-full ${
-                currentPage === 1
+                (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`}
             onClick={() => {
-                if (currentPage !== 1) {
+                if (currentPage !== 1 && !isLoading) {
                     handleChangePages(currentPage - 1);
                 }
             }}
         >
             <PiCaretLeft size={16} className='text-neutral300' />
         </div>
-            {totalPage < 4 ?
+            {totalPage < 4 && !isLoading ?
                 pageNumbers.map((pageNumber) => (
                     <div
                         key={pageNumber}
@@ -55,7 +56,7 @@ const Pagination = ({
                 :
                 <>
                     {
-                        currentPage == 1 && (
+                        currentPage == 1 && !isLoading && (
                             <>
                                 <div
                                     key={currentPage}
@@ -88,7 +89,7 @@ const Pagination = ({
                         )
                     }
                     {
-                        (currentPage > 1 && currentPage != totalPage - 1 && currentPage != totalPage) && (
+                        (currentPage > 1 && currentPage != totalPage - 1 && currentPage != totalPage) && !isLoading && (
                             <>
                                 <div
                                     key={currentPage - 1}
@@ -121,7 +122,7 @@ const Pagination = ({
                         )
                     }
                     {
-                        (currentPage == totalPage - 1) && (
+                        (currentPage == totalPage - 1) && !isLoading && (
                             <>
                                 <div
                                     key={totalPage - 2}
@@ -154,7 +155,7 @@ const Pagination = ({
                         )
                     }
                     {
-                        (currentPage == totalPage) && (
+                        (currentPage == totalPage) && !isLoading && (
                             <>
                                 <div
                                     key={totalPage - 2}
@@ -190,12 +191,12 @@ const Pagination = ({
             }
             <div
                 className={`m-1 w-10 h-10 rounded-full ${
-                currentPage === totalPage
+                (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`}
                 onClick={() => {
-                    if (currentPage !== totalPage) {
+                    if (currentPage !== totalPage && firstData > 0 && lastData > 0 && totalCount > 0 && !isLoading) {
                         handleChangePages(currentPage + 1)
                     }
                 }}

package/src/templates/index.js

@@ -1220,6 +1220,40 @@ const Templates = () => {
                 option: "Payment 1",
                 value: "payment1",
               },
+              {
+                option: "Payment 1",
+                value: "payment1",
+              },
+            ],
+            type: "radiobutton",
+          },
+          {
+            menu: "Payment 2",
+            parameter: "payment2",
+            submenu: [
+              {
+                option: "Payment 1",
+                value: "payment1",
+              },
+              {
+                option: "Payment 1",
+                value: "payment1",
+              },
+            ],
+            type: "radiobutton",
+          },
+          {
+            menu: "Payment 3",
+            parameter: "payment3",
+            submenu: [
+              {
+                option: "Payment 1",
+                value: "payment1",
+              },
+              {
+                option: "Payment 1",
+                value: "payment1",
+              },
             ],
             type: "radiobutton",
           },
@@ -1305,6 +1339,14 @@ const Templates = () => {
             option: "Name 2",
             value: "Value 2",
           },
+          {
+            option: "Ref id",
+            value: "Value 2",
+          },
+          {
+            option: "Voucher Statusssssssss",
+            value: "Value 2",
+          },
         ]}
         placeholderSearch="Search Here..."
         filterDropdown={filterDropdown}
@@ -1473,6 +1515,31 @@ const Templates = () => {
         totalPage={totalPage}
         onChangePages={(page) => setCurrentPage(page)}
       />
+      <Pagination
+        firstData={null}
+        lastData={null}
+        totalCount={null}
+        currentPage={1}
+        totalPage={null}
+        onChangePages={(page) => setCurrentPage(page)}
+      />
+      <Pagination
+        firstData={0}
+        lastData={0}
+        totalCount={0}
+        currentPage={1}
+        totalPage={0}
+        onChangePages={(page) => setCurrentPage(page)}
+      />
+      <Pagination
+        firstData={(currentPage - 1) * 10 + 1}
+        lastData={currentPage * 10 > totalCount ? totalCount : currentPage * 10}
+        totalCount={totalCount}
+        currentPage={currentPage}
+        totalPage={totalPage}
+        isLoading
+        onChangePages={(page) => setCurrentPage(page)}
+      />
 
       <div className="m-9"></div>
       <p className="text-black font-bold text-2xl text-center py-2">Text Input</p>