From 6dced3fe6bb81db806fba5120740bdf4bf79dd11 Mon Sep 17 00:00:00 2001 From: Jaco Date: Sat, 29 May 2021 08:53:02 +0300 Subject: [PATCH] Adjust Tabs usage (#5388) * Adjust Tabs usage * text --- packages/apps/src/Content/index.tsx | 6 +-- packages/page-rpc/src/index.tsx | 4 +- packages/page-signing/src/index.tsx | 2 +- packages/page-staking/src/index.tsx | 3 +- packages/react-components/src/Tabs/index.tsx | 48 +++++++++++--------- packages/react-components/src/index.tsx | 2 +- 6 files changed, 35 insertions(+), 30 deletions(-) diff --git a/packages/apps/src/Content/index.tsx b/packages/apps/src/Content/index.tsx index 350e678df3..12ee309d2a 100644 --- a/packages/apps/src/Content/index.tsx +++ b/packages/apps/src/Content/index.tsx @@ -8,7 +8,7 @@ import { useLocation } from 'react-router-dom'; import styled from 'styled-components'; import createRoutes from '@polkadot/apps-routing'; -import { ErrorBoundary, SectionContext, Spinner, StatusContext } from '@polkadot/react-components'; +import { ErrorBoundary, Spinner, StatusContext, TabsContext } from '@polkadot/react-components'; import { useApi } from '@polkadot/react-hooks'; import { findMissingApis } from '../endpoint'; @@ -61,7 +61,7 @@ function Content ({ className }: Props): React.ReactElement { <> - + {missingApis.length ? ( { /> ) } - + diff --git a/packages/page-rpc/src/index.tsx b/packages/page-rpc/src/index.tsx index 57bb9476d6..e237c2c136 100644 --- a/packages/page-rpc/src/index.tsx +++ b/packages/page-rpc/src/index.tsx @@ -6,7 +6,7 @@ import type { AppProps as Props } from '@polkadot/react-components/types'; import React, { useRef } from 'react'; import { Route, Switch } from 'react-router'; -import Tabs from '@polkadot/react-components/Tabs'; +import { Tabs } from '@polkadot/react-components'; import Rpc from './Rpc'; import { useTranslation } from './translate'; @@ -18,7 +18,7 @@ function RpcApp ({ basePath }: Props): React.ReactElement { { isRoot: true, name: 'rpc', - text: t('RPC calls') + text: t('Submission') } ]); diff --git a/packages/page-signing/src/index.tsx b/packages/page-signing/src/index.tsx index 8336c10318..fc3d9274af 100644 --- a/packages/page-signing/src/index.tsx +++ b/packages/page-signing/src/index.tsx @@ -6,7 +6,7 @@ import type { AppProps as Props } from '@polkadot/react-components/types'; import React, { useRef } from 'react'; import { Route, Switch } from 'react-router'; -import Tabs from '@polkadot/react-components/Tabs'; +import { Tabs } from '@polkadot/react-components'; import Hash from './Hash'; import Sign from './Sign'; diff --git a/packages/page-staking/src/index.tsx b/packages/page-staking/src/index.tsx index 0036ddee16..757836a230 100644 --- a/packages/page-staking/src/index.tsx +++ b/packages/page-staking/src/index.tsx @@ -10,8 +10,7 @@ import { Route, Switch } from 'react-router'; import { useLocation } from 'react-router-dom'; import styled from 'styled-components'; -import { HelpOverlay } from '@polkadot/react-components'; -import Tabs from '@polkadot/react-components/Tabs'; +import { HelpOverlay, Tabs } from '@polkadot/react-components'; import { useAccounts, useApi, useAvailableSlashes, useCall, useCallMulti, useFavorites, useOwnStashInfos } from '@polkadot/react-hooks'; import { isFunction } from '@polkadot/util'; diff --git a/packages/react-components/src/Tabs/index.tsx b/packages/react-components/src/Tabs/index.tsx index 67d65f6c25..ba7df8b922 100644 --- a/packages/react-components/src/Tabs/index.tsx +++ b/packages/react-components/src/Tabs/index.tsx @@ -1,6 +1,7 @@ // Copyright 2017-2021 @polkadot/react-components authors & contributors // SPDX-License-Identifier: Apache-2.0 +import type { Location } from 'history'; import type { SectionType, TabItem } from './types'; import React, { useEffect } from 'react'; @@ -9,37 +10,42 @@ import styled from 'styled-components'; import CurrentSection from './CurrentSection'; import Tab from './Tab'; -import TabsSectionDelimiter from './TabsSectionDelimiter'; +import Delimiter from './TabsSectionDelimiter'; -export const SectionContext = React.createContext({}); +export const TabsContext = React.createContext({}); interface Props { className?: string; basePath: string; - hidden?: (string | boolean | undefined)[]; + hidden?: string[] | null | false; items: TabItem[]; } +// redirect on invalid tabs +function redirect (basePath: string, location: Location, items: TabItem[], hidden?: string[] | null | false): void { + if (location.pathname !== basePath) { + // Has the form /staking/query/ + const [,, section] = location.pathname.split('/'); + const alias = items.find(({ alias }) => alias === section); + + if (alias) { + window.location.hash = alias.isRoot + ? basePath + : `${basePath}/${alias.name}`; + } else if (hidden && (hidden.includes(section) || !items.some(({ isRoot, name }) => !isRoot && name === section))) { + window.location.hash = basePath; + } + } +} + function Tabs ({ basePath, className = '', hidden, items }: Props): React.ReactElement { const location = useLocation(); - const { icon, text } = React.useContext(SectionContext); + const { icon, text } = React.useContext(TabsContext); - // redirect on invalid tabs - useEffect((): void => { - if (location.pathname !== basePath) { - // Has the form /staking/query/ - const [,, section] = location.pathname.split('/'); - const alias = items.find(({ alias }) => alias === section); - - if (alias) { - window.location.hash = alias.isRoot - ? basePath - : `${basePath}/${alias.name}`; - } else if (hidden && (hidden.includes(section) || !items.some(({ isRoot, name }) => !isRoot && name === section))) { - window.location.hash = basePath; - } - } - }, [basePath, hidden, items, location]); + useEffect( + () => redirect(basePath, location, items, hidden), + [basePath, hidden, items, location] + ); const filtered = hidden ? items.filter(({ name }) => !hidden.includes(name)) @@ -54,7 +60,7 @@ function Tabs ({ basePath, className = '', hidden, items }: Props): React.ReactE text={text} /> )} - +
    {filtered.map((tab, index) => (
  • diff --git a/packages/react-components/src/index.tsx b/packages/react-components/src/index.tsx index ff8e5480e8..0cd665ff86 100644 --- a/packages/react-components/src/index.tsx +++ b/packages/react-components/src/index.tsx @@ -86,7 +86,7 @@ export { default as Static } from './Static'; export { default as Status, StatusContext } from './Status'; export { default as SummaryBox } from './SummaryBox'; export { default as Table } from './Table'; -export { default as Tabs, SectionContext } from './Tabs'; +export { default as Tabs, TabsContext } from './Tabs'; export { default as Tag } from './Tag'; export { default as Tags } from './Tags'; export { default as Toggle } from './Toggle';