feat: remove uifabric experiments and uifabric styling

packages/neuron-ui/package.json

@@ -42,8 +42,6 @@
   "dependencies": {
     "@nervosnetwork/ckb-sdk-core": "0.103.1",
     "@nervosnetwork/ckb-sdk-utils": "0.103.1",
-    "@uifabric/experiments": "7.42.4",
-    "@uifabric/styling": "7.20.0",
     "canvg": "2.0.0",
     "i18next": "21.6.6",
     "immer": "9.0.12",

packages/neuron-ui/src/components/History/history.module.scss

@@ -58,11 +58,6 @@
     div[class^='visibleItemLabel'] {
       font-size: 0.75rem;
     }
-    button {
-      transform: scale(0.75);
-      padding-left: 10px;
-      padding-right: 10px;
-    }
   }
 }
 

packages/neuron-ui/src/components/SpecialAssetList/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate, useLocation } from 'react-router-dom'
-import { Pagination } from '@uifabric/experiments'
+import Pagination from 'widgets/Pagination'
 import SpecialAsset, { AssetInfo } from 'components/SpecialAsset'
 import Experimental from 'widgets/ExperimentalRibbon'
 import {
@@ -190,6 +190,7 @@ const SpecialAssetList = () => {
 
   useEffect(() => {
     const { pageNo: no } = listParams(search)
+
     setPageNo(no)
     fetchList(id, no)
   }, [search, id, dispatch, fetchList])
@@ -334,23 +335,11 @@ const SpecialAssetList = () => {
       <div className={styles.pagination}>
         {totalCount ? (
           <Pagination
-            selectedPageIndex={pageNo - 1}
-            pageCount={Math.ceil(totalCount / PAGE_SIZE)}
-            itemsPerPage={PAGE_SIZE}
-            totalItemCount={totalCount}
-            previousPageAriaLabel={t('pagination.previous-page')}
-            nextPageAriaLabel={t('pagination.next-page')}
-            firstPageAriaLabel={t('pagination.first-page')}
-            lastPageAriaLabel={t('pagination.last-page')}
-            pageAriaLabel={t('pagination.page')}
-            selectedAriaLabel={t('pagination.selected')}
-            firstPageIconProps={{ iconName: 'FirstPage' }}
-            previousPageIconProps={{ iconName: 'PrevPage' }}
-            nextPageIconProps={{ iconName: 'NextPage' }}
-            lastPageIconProps={{ iconName: 'LastPage' }}
-            format="buttons"
-            onPageChange={(idx: number) => {
-              navigate(`${RoutePath.SpecialAssets}?pageNo=${idx + 1}`)
+            pageNo={pageNo}
+            count={totalCount}
+            pageSize={PAGE_SIZE}
+            onChange={(idx: number) => {
+              navigate(`${RoutePath.SpecialAssets}?pageNo=${idx}`)
             }}
           />
         ) : null}

packages/neuron-ui/src/styles/theme.scss

@@ -20,6 +20,10 @@ body {
   --button-cancel-color: #999999;
   --svg-color: #666666;
   --dialog-secondary-text-color: #666666;
+  --disable-button-text-color: #CCCCCC;
+  --enable-button-text-color: #333333;
+  --main-pagination-button-text-color: #666666;
+  --main-pagination-text-color: #666666;
 
   @media (prefers-color-scheme: dark) {
     --primary-color: #00C891;
@@ -43,5 +47,9 @@ body {
     --button-cancel-color: #FFFFFF;
     --svg-color: #FFFFFF;
     --dialog-secondary-text-color: #FFFFFF;
+    --disable-button-text-color: #666666;
+    --enable-button-text-color: #FFFFFF;
+    --main-pagination-button-text-color: #CCCCCC;
+    --main-pagination-text-color: #999999;
   }
 }

packages/neuron-ui/src/theme.tsx

@@ -1,31 +1,4 @@
-import React from 'react'
 import { loadTheme } from 'office-ui-fabric-react'
-import {
-  Explorer,
-  Search,
-  FirstPage,
-  PreviousPage,
-  LastPage,
-  NextPage,
-  Matched,
-  InfoCircleOutlined,
-  Close,
-  More,
-  ArrowDown,
-  Alert,
-  Check,
-  CopyOutlined,
-  RightOutlined,
-  Plus,
-  ArrowLeftOutlined,
-  Connected,
-  PendingIcon,
-  Keystore,
-  ScanOutlined,
-  UploadOutlined,
-} from 'widgets/Icons/icon'
-
-import { registerIcons } from 'utils/icons'
 
 loadTheme({
   defaultFontStyle: { fontFamily: 'inherit' },
@@ -44,40 +17,4 @@ loadTheme({
   },
 })
 
-registerIcons({
-  icons: {
-    info: <InfoCircleOutlined />,
-    errorbadge: <Alert />,
-    completed: <Check />,
-    cancel: <Close />,
-    MiniCopy: <CopyOutlined type="activity" />,
-    Search: <Search />,
-    FirstPage: <FirstPage type="activity" />,
-    LastPage: <LastPage type="activity" />,
-    PrevPage: <PreviousPage type="activity" />,
-    NextPage: <NextPage type="activity" />,
-    ArrowDown: <ArrowDown />,
-    ChevronRightMed: <RightOutlined />,
-    Scan: <ScanOutlined />,
-    Import: <UploadOutlined />,
-    Create: <Plus />,
-    Clear: <Close style={{ height: '14px', width: '14px' }} />,
-    Dismiss: <Close />,
-    Leave: <ArrowLeftOutlined />,
-    Connected: <Connected />,
-    Disconnected: <Alert type="error" />,
-    Updating: <PendingIcon style={{ animation: 'rotate360 3s linear infinite' }} />,
-    More: <More />,
-    Matched: <Matched />,
-    Unmatched: <InfoCircleOutlined type="error" />,
-    TransactionSuccess: <Check type="success" />,
-    TransactionFailure: <Close type="error" />,
-    TransactionPending: (
-      <PendingIcon style={{ animation: 'rotate360 3s linear infinite', width: '14px', height: '14px' }} />
-    ),
-    Keystore: <Keystore />,
-    Explorer: <Explorer />,
-  },
-})
-
 export default undefined

packages/neuron-ui/src/widgets/Icons/icon.tsx

@@ -40,6 +40,8 @@ import { ReactComponent as NervosDAOSvg } from './NervosDAO.svg'
 import { ReactComponent as ExperimentalSvg } from './Experimental.svg'
 import { ReactComponent as ArrowOpenRightSvg } from './ArrowOpenRight.svg'
 import { ReactComponent as MenuExpandSvg } from './MenuExpand.svg'
+import { ReactComponent as ArrowEndSvg } from './ArrowEnd.svg'
+import { ReactComponent as ArrowNextSvg } from './ArrowNext.svg'
 
 import styles from './icon.module.scss'
 
@@ -94,3 +96,5 @@ export const NervosDAO = WrapSvg(NervosDAOSvg)
 export const Experimental = WrapSvg(ExperimentalSvg)
 export const ArrowOpenRight = WrapSvg(ArrowOpenRightSvg)
 export const MenuExpand = WrapSvg(MenuExpandSvg)
+export const ArrowEnd = WrapSvg(ArrowEndSvg)
+export const ArrowNext = WrapSvg(ArrowNextSvg)

packages/neuron-ui/src/widgets/Pagination/index.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getPageNoList } from 'utils'
-import { ReactComponent as ArrowToEndIcon } from 'widgets/Icons/ArrowToEnd.svg'
-import { ReactComponent as ArrowToNextIcon } from 'widgets/Icons/ArrowToNext.svg'
+import { ArrowEnd, ArrowNext } from 'widgets/Icons/icon'
 
 import styles from './pagination.module.scss'
 
@@ -42,33 +41,41 @@ const Pagination = ({ count, pageNo, onChange, pageSize }: PaginationProps) => {
   const end = Math.min(count, pageNo * pageSize)
   const range = t(`${I18N_PATH}.range`, { start, end, count })
 
+  const disableToHead = pageNo === 1 || pageCount === 0
+  const disableToEnd = pageNo >= pageCount
+
   return (
     <div role="presentation" className={styles.container} onClick={handlePageNoClick}>
       <div className={styles.range}>{range}</div>
       <div className={styles.navigator} role="navigation" arial-label="pagination">
-        <span
-          role="button"
-          data-page-no={1}
-          tabIndex={pageNo === 1 ? -1 : 0}
-          className={styles.toPrev}
-          data-disabled={pageNo === 1}
-          title={t(`${I18N_PATH}.first-page`)}
-        >
-          <ArrowToEndIcon />
-        </span>
-        <span
-          role="button"
-          data-page-no={pageNo - 1}
-          tabIndex={pageNo === 1 ? -1 : 0}
-          className={styles.toPrev}
-          data-disabled={pageNo === 1}
-          title={t(`${I18N_PATH}.previous-page`)}
-        >
-          <ArrowToNextIcon />
-        </span>
+        <div className={styles.arrowBlock}>
+          <button
+            type="button"
+            data-page-no={1}
+            tabIndex={pageNo === 1 ? -1 : 0}
+            className={styles.toHead}
+            data-disabled={disableToHead}
+            data-title="first-page"
+            title={t(`${I18N_PATH}.first-page`)}
+          >
+            <ArrowEnd />
+          </button>
+          <button
+            type="button"
+            data-page-no={pageNo - 1}
+            tabIndex={pageNo === 1 ? -1 : 0}
+            className={styles.toHead}
+            data-disabled={disableToHead}
+            data-title="previous-page"
+            title={t(`${I18N_PATH}.previous-page`)}
+          >
+            <ArrowNext />
+          </button>
+        </div>
+
         {pageNoList.map(no => (
-          <span
-            role="button"
+          <button
+            type="button"
             tabIndex={pageNo === no ? -1 : 0}
             key={no}
             className={styles.pageNo}
@@ -77,28 +84,34 @@ const Pagination = ({ count, pageNo, onChange, pageSize }: PaginationProps) => {
             title={t(`${I18N_PATH}.page-no`, { pageNo: no })}
           >
             {no}
-          </span>
+          </button>
         ))}
-        <span
-          role="button"
-          tabIndex={pageNo === pageCount ? -1 : 0}
-          data-page-no={pageNo + 1}
-          className={styles.toNext}
-          data-disabled={pageNo === pageCount}
-          title={t(`${I18N_PATH}.next-page`)}
-        >
-          <ArrowToNextIcon />
-        </span>
-        <span
-          role="button"
-          tabIndex={pageNo === pageCount ? -1 : 0}
-          data-page-no={pageCount}
-          className={styles.toNext}
-          data-disabled={pageNo === pageCount}
-          title={t(`${I18N_PATH}.last-page`)}
-        >
-          <ArrowToEndIcon />
-        </span>
+
+        <div className={styles.arrowBlock}>
+          <button
+            type="button"
+            tabIndex={pageNo === pageCount ? -1 : 0}
+            data-page-no={pageNo + 1}
+            className={styles.toEnd}
+            data-disabled={disableToEnd}
+            data-title="next-page"
+            title={t(`${I18N_PATH}.next-page`)}
+          >
+            <ArrowNext />
+          </button>
+
+          <button
+            type="button"
+            tabIndex={pageNo === pageCount ? -1 : 0}
+            data-page-no={pageCount}
+            className={styles.toEnd}
+            data-disabled={disableToEnd}
+            data-title="last-page"
+            title={t(`${I18N_PATH}.last-page`)}
+          >
+            <ArrowEnd />
+          </button>
+        </div>
       </div>
     </div>
   )