Typescript pagination (#704)

* JS to TS / TSX

* Pagination to typescript

* PaginationItem to typescript

* removed unused

* types in pagination control

* Types in function inputs

* MouseEvent / KeyboardEvent added to onChange function

* onChange function typed

* removed console

* removed unused

* Added another type in function

* Correct onClick prev/next buttons

* removed proptypes

libraries/core-react/src/Pagination/Pagination.tokens.js → libraries/core-react/src/Pagination/Pagination.tokens.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { tokens } from '@equinor/eds-tokens'
 
 const {

libraries/core-react/src/Pagination/Pagination.jsx → libraries/core-react/src/Pagination/Pagination.tsx

@@ -1,6 +1,10 @@
-// @ts-nocheck
-import React, { forwardRef, useState } from 'react'
-import PropTypes from 'prop-types'
+import React, {
+  forwardRef,
+  useState,
+  ReactNode,
+  MouseEvent,
+  KeyboardEvent,
+} from 'react'
 import styled from 'styled-components'
 import { Button } from '../Button'
 import { Icon } from '../Icon'
@@ -22,7 +26,9 @@ const icons = {
 
 Icon.add(icons)
 
-const Navigation = styled.nav`
+type NavigationStyledProps = Pick<Props, 'withItemIndicator'>
+
+const Navigation = styled.nav<NavigationStyledProps>`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -61,18 +67,35 @@ const Text = styled(Typography)`
   white-space: nowrap;
 `
 
-function getAriaLabel(page, selected) {
+function getAriaLabel(page: number, selected: number) {
   return `${selected === page ? 'Current page, ' : 'Go to '}page ${page}`
 }
 
-export const Pagination = forwardRef(function Pagination(
+type Props = {
+  // Number of total items to be paginated
+  totalItems: number
+  // To display total item count
+  withItemIndicator?: boolean
+  // Choose number of items per page
+  itemsPerPage?: number
+  // Callback fired on page change
+  onChange?: (event: MouseEvent | KeyboardEvent, page: number) => void
+  // Default start page
+  defaultPage?: number
+  // ClassName
+  className?: string
+  // Children
+  children?: ReactNode
+}
+
+export const Pagination = forwardRef<HTMLElement, Props>(function Pagination(
   {
     totalItems,
-    defaultPage,
+    defaultPage = 1,
     withItemIndicator,
-    itemsPerPage,
-    className,
+    itemsPerPage = 10,
     onChange,
+    className,
     ...other
   },
   ref,
@@ -87,11 +110,13 @@ export const Pagination = forwardRef(function Pagination(
   const currentItemLast =
     activePage === pages ? totalItems : activePage * itemsPerPage // Last number of range of items at current page
 
-  const onPageChange = (event, page) => {
-    setActivePage(page)
-    if (onChange) {
+  const onPageChange = (event: MouseEvent | KeyboardEvent, page: number) => {
+    page && setActivePage(page)
+    if (event && onChange) {
       // Callback for provided onChange func
       onChange(event, page)
+    } else {
+      return undefined
     }
   }
 
@@ -194,29 +219,3 @@ export const Pagination = forwardRef(function Pagination(
 })
 
 Pagination.displayName = 'eds-pagination'
-
-Pagination.propTypes = {
-  // Number of total items to be paginated
-  totalItems: PropTypes.number.isRequired,
-  // To display total item count
-  withItemIndicator: PropTypes.bool,
-  // Choose number of items per page
-  itemsPerPage: PropTypes.number,
-  // Callback fired on page change
-  onChange: PropTypes.func,
-  // Default start page
-  defaultPage: PropTypes.number,
-  /** @ignore */
-  children: PropTypes.node,
-  /** @ignore */
-  className: PropTypes.string,
-}
-
-Pagination.defaultProps = {
-  className: '',
-  defaultPage: 1,
-  children: undefined,
-  withItemIndicator: false,
-  itemsPerPage: 10,
-  onChange: () => {},
-}

libraries/core-react/src/Pagination/PaginationItem.tsx

@@ -0,0 +1,37 @@
+import React, { forwardRef } from 'react'
+import { Button } from '../Button'
+import { pagination as tokens } from './Pagination.tokens'
+
+type Props = {
+  // Current page number
+  page: number
+  // If current page is selected
+  selected: boolean
+  // Click function
+  onClick?: () => void
+}
+
+export const PaginationItem = forwardRef<HTMLButtonElement, Props>(
+  function PaginationItem({ page, selected, onClick, ...other }, ref) {
+    const props = {
+      ref,
+      page,
+      selected,
+      ...other,
+    }
+    const currentColor = selected ? tokens.selectedColor : null
+
+    return (
+      <Button
+        style={{ background: currentColor }}
+        variant="ghost_icon"
+        onClick={onClick ? onClick : undefined}
+        {...props}
+      >
+        {page}
+      </Button>
+    )
+  },
+)
+
+PaginationItem.displayName = 'eds-pagination-item'

libraries/core-react/src/Pagination/index.js → libraries/core-react/src/Pagination/index.ts

@@ -1,2 +1 @@
-// @ts-nocheck
 export { Pagination } from './Pagination'

libraries/core-react/src/Pagination/paginationControl.js → libraries/core-react/src/Pagination/paginationControl.ts

@@ -1,14 +1,11 @@
-// @ts-nocheck
-import React from 'react'
-
-export function PaginationControl(pages, activePage) {
+export function PaginationControl(pages: number, activePage: number) {
   const siblings = 1 // amount of siblings on left and right side of active page after trunking
   const totalPagesShown = 7 // amount of total pages before we start trunking pages in ellipsis
   const pagesBeforeEllipsis = 5 // total pages shown before ellipsis and trunking begins
   const ELLIPSIS = 'ELLIPSIS'
 
   // Range function from https://dev.to/namirsab/comment/2050
-  const range = (start, end) => {
+  const range = (start: number, end: number) => {
     const length = end - start + 1
     return Array.from({ length }, (_, i) => start + i)
   }