Bug/accordion (#107)

* chore(release): 0.0.70 * chore(release): 0.0.71 * Accordion height issue * Pagination input box * pagination padding * accordion height revert --------- Co-authored-by: arpit-chhabra_myntra <[email protected]>
myntra · Dec 10, 2024 · ff5a8c2 · ff5a8c2
1 parent 7b72dc9
commit ff5a8c2
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 13 deletions.
diff --git a/components/pagination/src/pagination.module.scss b/components/pagination/src/pagination.module.scss
@@ -6,7 +6,7 @@
   justify-content: center;
 
   > *:not(:last-child) {
-    margin-right: size('8x');
+    margin-right: size('0x');
   }
 
   &-select-size-wrapper {
@@ -18,14 +18,21 @@
   }
 
   &-page-input-wrapper input {
+    width: 32px;
+    height: 32px;
+    padding-left: 5px;
+    text-decoration: none;
     background-color: transparent;
+    border: 1px solid grey;
+    border-radius: 5px;
   }
 }
 
 .pages {
   &-container {
     display: flex;
     list-style-type: none;
+    padding: 0 6px;
   }
 
   &-item {
@@ -46,3 +53,11 @@
     }
   }
 }
+
+input[type=number]::-webkit-inner-spin-button, 
+input[type=number]::-webkit-outer-spin-button { 
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    margin: 0; 
+}
diff --git a/components/pagination/src/pagination.tsx b/components/pagination/src/pagination.tsx
@@ -1,6 +1,5 @@
-import React, { PureComponent } from 'react'
+import React, { useState } from 'react'
 import InputSelect from '@applique-ui/input-select'
-import InputNumber from '@applique-ui/input-number'
 import Layout from '@applique-ui/layout'
 
 import Pages from './pages'
@@ -33,9 +32,9 @@ export interface Props extends BaseProps {
  @see http://uikit.myntra.com/components/pagination
  */
 export default function Pagination(props: Props) {
-  const [pageNumberCustom, setPageNumberCustom] = React.useState(null)
+  const [pageNumberCustom, setPageNumberCustom] = useState('')
 
-  const updatePage = (page) => {
+  const updatePage = (page: number) => {
     const pages = Math.ceil(props.total / props.size)
     const size = props.size
 
@@ -44,15 +43,18 @@ export default function Pagination(props: Props) {
     }
   }
 
-  const handlePageChange = (event) => {
+  const handlePageChange = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter') {
-      updatePage(parseInt(event.target.value, 10))
-      setPageNumberCustom(null)
+      const page = parseInt(pageNumberCustom, 10)
+      if (!isNaN(page)) {
+        updatePage(page)
+        setPageNumberCustom('')
+      }
     }
   }
 
-  const handleSizeChange = (value) => {
-    props.onChange({ size: parseInt(value, 10), page: 1 })
+  const handleSizeChange = (value: number) => {
+    props.onChange({ size: value, page: 1 })
   }
 
   const {
@@ -97,11 +99,13 @@ export default function Pagination(props: Props) {
       >
         <span>Go to</span>
         <div className={classnames('pagination-page-input-wrapper')}>
-          <InputNumber
+          <input
+            type="number"
             value={pageNumberCustom}
-            onChange={setPageNumberCustom}
-            disabled={!!pageInputDisabled}
+            onChange={(e) => setPageNumberCustom(e.target.value)}
             onKeyDown={handlePageChange}
+            disabled={!!pageInputDisabled}
+            className={classnames('pagination-page-input')}
           />
         </div>
         <span>Page</span>