From e63eeb506c53c329af91e6be99f46cc4eccae93c Mon Sep 17 00:00:00 2001 From: Jaco Date: Sat, 14 Jan 2023 15:22:42 +0200 Subject: [PATCH] Rework (some) component styled injection (#8795) * Rework (some) component styled injection * Small build fixes * Additional build fixes * Additional * Fixes * Remove unused SelectedDrag * Remover unneeded props passing * Fix build * Remove unneeded inline-block --- .../page-accounts/src/Accounts/Account.tsx | 2 +- .../src/Sidebar/JudgementTag.tsx | 2 +- packages/page-accounts/src/modals/Create.tsx | 2 +- .../src/modals/MultisigCreate.tsx | 1 - .../page-accounts/src/modals/RecoverSetup.tsx | 1 - packages/page-assets/src/Overview/Asset.tsx | 2 +- packages/page-explorer/src/index.tsx | 8 ++- packages/page-gilt/src/Overview/Summary.tsx | 2 +- packages/page-staking/src/Bags/Bag.tsx | 4 +- packages/page-staking/src/Pools/Pool.tsx | 6 +-- packages/react-components/src/AccountName.tsx | 12 +++-- packages/react-components/src/AddressMini.tsx | 10 ++-- packages/react-components/src/AddressRow.tsx | 12 +++-- .../react-components/src/AddressSmall.tsx | 10 ++-- .../react-components/src/AddressToggle.tsx | 10 ++-- packages/react-components/src/AvatarItem.tsx | 10 ++-- packages/react-components/src/Badge.tsx | 12 +++-- .../react-components/src/Button/Button.tsx | 10 ++-- .../react-components/src/Button/Group.tsx | 10 ++-- packages/react-components/src/Call.tsx | 10 ++-- .../react-components/src/CallExpander.tsx | 2 +- packages/react-components/src/Card.tsx | 10 ++-- packages/react-components/src/CardSummary.tsx | 10 ++-- packages/react-components/src/Chart/Base.tsx | 18 +++---- .../src/InputAddress/KeyPair.tsx | 10 ++-- .../src/InputAddress/index.tsx | 10 ++-- .../src/InputAddressMulti/Selected.tsx | 6 +-- .../src/InputAddressMulti/SelectedDrag.tsx | 51 ------------------- .../src/InputAddressMulti/index.tsx | 18 ++++--- .../src/Popup/PopupWindow.tsx | 46 +++++++++-------- packages/react-components/src/Popup/index.tsx | 10 ++-- packages/react-components/src/Row.tsx | 2 +- .../react-components/src/Status/index.tsx | 11 ++-- .../src/Table/Column/Expand.tsx | 10 ++-- .../src/Table/Column/Favorite.tsx | 10 ++-- .../react-components/src/Table/Column/Id.tsx | 10 ++-- packages/react-components/src/Table/Foot.tsx | 10 ++-- packages/react-components/src/Table/Head.tsx | 12 +++-- packages/react-components/src/Table/Table.tsx | 10 ++-- .../src/Tabs/CurrentSection.tsx | 10 ++-- packages/react-components/src/Tabs/Tab.tsx | 10 ++-- .../src/Tabs/TabsSectionDelimiter.tsx | 10 ++-- packages/react-components/src/Tabs/index.tsx | 29 ++++++----- packages/react-query/src/BlockToTime.tsx | 10 ++-- packages/react-query/src/Elapsed.tsx | 12 ++--- packages/react-query/src/FormatBalance.tsx | 17 ++++--- 46 files changed, 256 insertions(+), 244 deletions(-) delete mode 100644 packages/react-components/src/InputAddressMulti/SelectedDrag.tsx diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx index 05ed2436da..695c606885 100644 --- a/packages/page-accounts/src/Accounts/Account.tsx +++ b/packages/page-accounts/src/Accounts/Account.tsx @@ -473,7 +473,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt /> diff --git a/packages/page-accounts/src/Sidebar/JudgementTag.tsx b/packages/page-accounts/src/Sidebar/JudgementTag.tsx index c1b3e44a38..a6e8792767 100644 --- a/packages/page-accounts/src/Sidebar/JudgementTag.tsx +++ b/packages/page-accounts/src/Sidebar/JudgementTag.tsx @@ -19,7 +19,7 @@ function JudgementTag ({ judgement: { judgementName, registrars } }: Props): Rea return ( {registrars.map((registrar) => registrar && ( diff --git a/packages/page-accounts/src/modals/Create.tsx b/packages/page-accounts/src/modals/Create.tsx index 93715afcfc..134ad244ba 100644 --- a/packages/page-accounts/src/modals/Create.tsx +++ b/packages/page-accounts/src/modals/Create.tsx @@ -255,7 +255,7 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ fullLength isEditableName={false} noDefaultNameOpacity - value={isSeedValid ? address : ''} + value={(isSeedValid && address) || null} /> {step === 1 && <> diff --git a/packages/page-accounts/src/modals/MultisigCreate.tsx b/packages/page-accounts/src/modals/MultisigCreate.tsx index 971a777bfa..9f3e2e5753 100644 --- a/packages/page-accounts/src/modals/MultisigCreate.tsx +++ b/packages/page-accounts/src/modals/MultisigCreate.tsx @@ -182,7 +182,6 @@ function Multisig ({ className = '', onClose, onStatusChange }: Props): React.Re availableLabel={t('available signatories')} maxCount={MAX_SIGNATORIES} onChange={_onChangeAddressMulti} - value={signatories} valueLabel={t('selected signatories')} /> diff --git a/packages/page-accounts/src/modals/RecoverSetup.tsx b/packages/page-accounts/src/modals/RecoverSetup.tsx index 3d8b5ba385..55464baa2f 100644 --- a/packages/page-accounts/src/modals/RecoverSetup.tsx +++ b/packages/page-accounts/src/modals/RecoverSetup.tsx @@ -60,7 +60,6 @@ function RecoverSetup ({ address, className = '', onClose }: Props): React.React availableLabel={t('available social recovery helpers')} maxCount={MAX_HELPERS} onChange={setHelpers} - value={helpers} valueLabel={t('trusted social recovery helpers')} /> diff --git a/packages/page-assets/src/Overview/Asset.tsx b/packages/page-assets/src/Overview/Asset.tsx index e007780eeb..4612395428 100644 --- a/packages/page-assets/src/Overview/Asset.tsx +++ b/packages/page-assets/src/Overview/Asset.tsx @@ -17,7 +17,7 @@ interface Props { function Asset ({ className, value: { details, id, isIssuerMe, metadata } }: Props): React.ReactElement { const format = useMemo( - () => metadata + (): [number, string] => metadata ? [metadata.decimals.toNumber(), metadata.symbol.toUtf8()] : [0, '---'], [metadata] diff --git a/packages/page-explorer/src/index.tsx b/packages/page-explorer/src/index.tsx index 40a7a4c07e..ecbe8f466f 100644 --- a/packages/page-explorer/src/index.tsx +++ b/packages/page-explorer/src/index.tsx @@ -5,7 +5,7 @@ import type { TFunction } from 'i18next'; import type { TabItem } from '@polkadot/react-components/Tabs/types'; import type { KeyedEvent } from '@polkadot/react-hooks/ctx/types'; -import React, { useRef, useState } from 'react'; +import React, { useMemo, useRef } from 'react'; import { Route, Switch } from 'react-router'; import { Tabs } from '@polkadot/react-components'; @@ -78,7 +78,11 @@ function ExplorerApp ({ basePath, className }: Props): React.ReactElement const { eventCount, events } = useBlockEvents(); const itemsRef = useRef(createItemsRef(t)); const pathRef = useRef(createPathRef(basePath)); - const hidden = useState(() => isFunction(api.query.babe?.authorities) ? [] : ['forks']); + + const hidden = useMemo( + () => isFunction(api.query.babe?.authorities) ? [] : ['forks'], + [api] + ); return (
diff --git a/packages/page-gilt/src/Overview/Summary.tsx b/packages/page-gilt/src/Overview/Summary.tsx index 1f04bd59b3..78dd19f10f 100644 --- a/packages/page-gilt/src/Overview/Summary.tsx +++ b/packages/page-gilt/src/Overview/Summary.tsx @@ -53,7 +53,7 @@ function Summary ({ activeTotal, className, isDisabled }: Props): React.ReactEle ('intake')} progress={{ - total: api.consts.gilt.intakePeriod, + total: api.consts.gilt.intakePeriod as u128, value: bestNumber.mod(api.consts.gilt.intakePeriod as u128), withTime: true }} diff --git a/packages/page-staking/src/Bags/Bag.tsx b/packages/page-staking/src/Bags/Bag.tsx index 5ac85d288f..106807a181 100644 --- a/packages/page-staking/src/Bags/Bag.tsx +++ b/packages/page-staking/src/Bags/Bag.tsx @@ -65,8 +65,8 @@ function Bag ({ bagLower, bagUpper, info, nodesOwn }: Props): React.ReactElement - {info.head.isSome && } - {info.tail.isSome && } + {info.head.isSome && } + {info.tail.isSome && } {nodesOwn?.map(({ stashId }) => (
{t('root')}
-
+
)} {info.bonded.roles.nominator.isSome && (
{t('nominator')}
-
+
)} {info.bonded.roles.stateToggler.isSome && (
{t('toggler')}
-
+
)} diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx index 87b537adb1..64186f88fc 100644 --- a/packages/react-components/src/AccountName.tsx +++ b/packages/react-components/src/AccountName.tsx @@ -24,7 +24,7 @@ interface Props { onClick?: () => void; override?: React.ReactNode; // this is used by app-account/addresses to toggle editing - toggle?: boolean; + toggle?: unknown; value: AccountId | AccountIndex | Address | string | Uint8Array | null | undefined; withSidebar?: boolean; } @@ -209,7 +209,7 @@ function AccountName ({ children, className = '', defaultName, label, onClick, o ); return ( - {label || ''}{override || name}{children} - + ); } -export default React.memo(styled(AccountName)` +const StyledSpan = styled.span` border: 1px dotted transparent; line-height: 1; vertical-align: middle; @@ -267,4 +267,6 @@ export default React.memo(styled(AccountName)` } } } -`); +`; + +export default React.memo(AccountName); diff --git a/packages/react-components/src/AddressMini.tsx b/packages/react-components/src/AddressMini.tsx index 227706cc76..f56d76eb64 100644 --- a/packages/react-components/src/AddressMini.tsx +++ b/packages/react-components/src/AddressMini.tsx @@ -45,7 +45,7 @@ function AddressMini ({ balance, bonded, children, className = '', iconInfo, isH } return ( -
+ {label && ( )} @@ -100,11 +100,11 @@ function AddressMini ({ balance, bonded, children, className = '', iconInfo, isH
{summary}
)}
- + ); } -export default React.memo(styled(AddressMini)` +const StyledDiv = styled.div` overflow-x: hidden; padding: 0 0.25rem 0 1rem; text-align: left; @@ -190,4 +190,6 @@ export default React.memo(styled(AddressMini)` margin-top: -0.2rem; text-align: left; } -`); +`; + +export default React.memo(AddressMini); diff --git a/packages/react-components/src/AddressRow.tsx b/packages/react-components/src/AddressRow.tsx index 416e26d409..e5f5198b07 100644 --- a/packages/react-components/src/AddressRow.tsx +++ b/packages/react-components/src/AddressRow.tsx @@ -19,7 +19,7 @@ export interface Props extends RowProps { label?: string; noDefaultNameOpacity?: boolean; overlay?: React.ReactNode; - value: AccountId | AccountIndex | Address | string; + value?: AccountId | AccountIndex | Address | string | null; withSidebar?: boolean; withTags?: boolean; } @@ -35,7 +35,7 @@ function AddressRow ({ buttons, children, className, defaultName, fullLength = f const address = value && isValid ? value : DEFAULT_ADDR; return ( - {children} {overlay} - + ); } @@ -69,7 +69,7 @@ export { AddressRow }; -export default React.memo(styled(AddressRow)` +const StyledRow = styled(Row)` button.u.ui--Icon.editButton { padding: 0 .3em .3em .3em; color: #2e86ab; @@ -109,4 +109,6 @@ export default React.memo(styled(AddressRow)` .ui--AddressRow-placeholder { opacity: var(--opacity-light); } -`); +`; + +export default React.memo(AddressRow); diff --git a/packages/react-components/src/AddressSmall.tsx b/packages/react-components/src/AddressSmall.tsx index fd78383ee3..209874726c 100644 --- a/packages/react-components/src/AddressSmall.tsx +++ b/packages/react-components/src/AddressSmall.tsx @@ -25,7 +25,7 @@ interface Props { function AddressSmall ({ children, className = '', defaultName, onClickName, overrideName, parentAddress, toggle, value, withShortAddress = false, withSidebar = true }: Props): React.ReactElement { return ( -
+ @@ -55,11 +55,11 @@ function AddressSmall ({ children, className = '', defaultName, onClickName, ove
)} - + ); } -export default React.memo(styled(AddressSmall)` +const StyledDiv = styled.div` overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -111,4 +111,6 @@ export default React.memo(styled(AddressSmall)` cursor: help; } } -`); +`; + +export default React.memo(AddressSmall); diff --git a/packages/react-components/src/AddressToggle.tsx b/packages/react-components/src/AddressToggle.tsx index 3ac2b344fc..ede5dfbd6e 100644 --- a/packages/react-components/src/AddressToggle.tsx +++ b/packages/react-components/src/AddressToggle.tsx @@ -35,7 +35,7 @@ function AddressToggle ({ address, className = '', filter, isHidden, noToggle, o ); return ( -
@@ -52,11 +52,11 @@ function AddressToggle ({ address, className = '', filter, isHidden, noToggle, o />
)} - + ); } -export default React.memo(styled(AddressToggle)` +const StyledDiv = styled.div` align-items: flex-start; border: 1px solid transparent; /* #eee */ border-radius: 0.25rem; @@ -104,4 +104,6 @@ export default React.memo(styled(AddressToggle)` opacity: 1; } } -`); +`; + +export default React.memo(AddressToggle); diff --git a/packages/react-components/src/AvatarItem.tsx b/packages/react-components/src/AvatarItem.tsx index 3e64803917..86cb57f2b2 100644 --- a/packages/react-components/src/AvatarItem.tsx +++ b/packages/react-components/src/AvatarItem.tsx @@ -16,7 +16,7 @@ interface Props { function AvatarItem ({ children, className = '', icon, isBig, subtitle, title }: Props): React.ReactElement { return ( -
+
{icon}
@@ -29,11 +29,11 @@ function AvatarItem ({ children, className = '', icon, isBig, subtitle, title }:
{children} - + ); } -export default React.memo(styled(AvatarItem)` +const StyledDiv = styled.div` & { display: flex; align-items: center; @@ -77,4 +77,6 @@ export default React.memo(styled(AvatarItem)` } } } -`); +`; + +export default React.memo(AvatarItem); diff --git a/packages/react-components/src/Badge.tsx b/packages/react-components/src/Badge.tsx index 71c132117f..0c190d53f3 100644 --- a/packages/react-components/src/Badge.tsx +++ b/packages/react-components/src/Badge.tsx @@ -13,7 +13,7 @@ import Tooltip from './Tooltip'; interface Props { className?: string; - color?: 'blue' | 'gray' | 'green' | 'highlight' | 'normal' | 'orange' | 'purple' | 'red' | 'transparent' | 'white'; + color?: 'blue' | 'counter' | 'gray' | 'green' | 'highlight' | 'normal' | 'orange' | 'purple' | 'red' | 'transparent' | 'white'; hover?: React.ReactNode; hoverAction?: React.ReactNode; icon?: IconName; @@ -48,7 +48,7 @@ function Badge ({ className = '', color = 'normal', hover, hoverAction, icon, in ), [color, hover, hoverAction, onClick]); return ( -
)} -
+ ); } // FIXME We really need to get rid of the px sizing here -export default React.memo(styled(Badge)` +const StyledDiv = styled.div` border-radius: 16px; box-sizing: border-box; color: #eeedec; @@ -223,4 +223,6 @@ export default React.memo(styled(Badge)` .action-icon { margin-left: 4px; } -`); +`; + +export default React.memo(Badge); diff --git a/packages/react-components/src/Button/Button.tsx b/packages/react-components/src/Button/Button.tsx index a7e7c19457..f029cf089b 100644 --- a/packages/react-components/src/Button/Button.tsx +++ b/packages/react-components/src/Button/Button.tsx @@ -44,7 +44,7 @@ function Button ({ activeOnEnter, children, className = '', dataTestId = '', ico }, [activeOnEnter, listenKeyboard]); return ( - + ); } const ICON_PADDING = 0.5; -export default React.memo(styled(Button)` +const StyledButton = styled.button` background: transparent; border: none; color: inherit; @@ -153,4 +153,6 @@ export default React.memo(styled(Button)` &.isDisabled { color: #bcbbba; } -`); +`; + +export default React.memo(Button); diff --git a/packages/react-components/src/Button/Group.tsx b/packages/react-components/src/Button/Group.tsx index a7952986a2..df20018d12 100644 --- a/packages/react-components/src/Button/Group.tsx +++ b/packages/react-components/src/Button/Group.tsx @@ -8,14 +8,14 @@ import styled from 'styled-components'; function ButtonGroup ({ children, className = '', isCentered }: GroupProps): React.ReactElement { return ( -
+ {children}
-
+ ); } -export default React.memo(styled(ButtonGroup)` +const StyledDiv = styled.div` margin: 1rem 0; text-align: right; @@ -43,4 +43,6 @@ export default React.memo(styled(ButtonGroup)` .ui--ToggleGroup, .ui--Dropdown { float: left; } -`); +`; + +export default React.memo(ButtonGroup); diff --git a/packages/react-components/src/Call.tsx b/packages/react-components/src/Call.tsx index f21951825b..b0a47c5149 100644 --- a/packages/react-components/src/Call.tsx +++ b/packages/react-components/src/Call.tsx @@ -101,7 +101,7 @@ function Call ({ callName, children, className = '', labelHash, labelSignature, }, [callName, value, withHash, withSignature]); return ( -
+ -
+ ); } -export default React.memo(styled(Call)` +const StyledDiv = styled.div` .ui--Labelled.hash .ui--Static { overflow: hidden; text-overflow: ellipsis; @@ -180,4 +180,6 @@ export default React.memo(styled(Call)` > .ui--Params { margin-top: -0.25rem; } -`); +`; + +export default React.memo(Call); diff --git a/packages/react-components/src/CallExpander.tsx b/packages/react-components/src/CallExpander.tsx index 63f0795d7a..e61652ca90 100644 --- a/packages/react-components/src/CallExpander.tsx +++ b/packages/react-components/src/CallExpander.tsx @@ -34,7 +34,7 @@ function CallExpander ({ children, className = '', isHeader, labelHash, labelSig [value] ); - if (!call) { + if (!call || !value) { return null; } diff --git a/packages/react-components/src/Card.tsx b/packages/react-components/src/Card.tsx index 5c7ed78433..39ed3183b2 100644 --- a/packages/react-components/src/Card.tsx +++ b/packages/react-components/src/Card.tsx @@ -14,13 +14,13 @@ interface Props { function Card ({ children, className = '', isError, isSuccess, withBottomMargin }: Props): React.ReactElement { return ( -
+ {children} -
+ ); } -export default React.memo(styled(Card)` +const StyledArticle = styled.article` position: relative; flex: 1 1; min-width: 24%; @@ -79,4 +79,6 @@ export default React.memo(styled(Card)` &.withBottomMargin { margin-bottom: 1.5rem; } -`); +`; + +export default React.memo(Card); diff --git a/packages/react-components/src/CardSummary.tsx b/packages/react-components/src/CardSummary.tsx index 735ccee20b..cdfbee0f52 100644 --- a/packages/react-components/src/CardSummary.tsx +++ b/packages/react-components/src/CardSummary.tsx @@ -57,7 +57,7 @@ function CardSummary ({ children, className = '', label, progress }: Props): Rea const testidSuffix = (label ?? '').toString(); return ( -
@@ -96,11 +96,11 @@ function CardSummary ({ children, className = '', label, progress }: Props): Rea } {progress && !progress.hideGraph && } -
+ ); } -export default React.memo(styled(CardSummary)` +const StyledArticle = styled.article` align-items: center; background: transparent !important; border: none !important; @@ -161,4 +161,6 @@ export default React.memo(styled(CardSummary)` font-size: 1.4rem; } } -`); +`; + +export default React.memo(CardSummary); diff --git a/packages/react-components/src/Chart/Base.tsx b/packages/react-components/src/Chart/Base.tsx index 5b5d0a4c87..9543665614 100644 --- a/packages/react-components/src/Chart/Base.tsx +++ b/packages/react-components/src/Chart/Base.tsx @@ -6,7 +6,15 @@ import type { BaseProps } from './types'; import React from 'react'; import styled from 'styled-components'; -const Wrapper = styled.div` +function BaseChart ({ children, className = '' }: BaseProps): React.ReactElement { + return ( + + {children} + + ); +} + +const StyledDiv = styled.div` position: relative; display: inline-block; padding: 1em 1em 0; @@ -14,12 +22,4 @@ const Wrapper = styled.div` width: 15vw; `; -function BaseChart ({ children, className = '' }: BaseProps): React.ReactElement { - return ( - - {children} - - ); -} - export default React.memo(BaseChart); diff --git a/packages/react-components/src/InputAddress/KeyPair.tsx b/packages/react-components/src/InputAddress/KeyPair.tsx index 91dcb6097a..1b2aec44f6 100644 --- a/packages/react-components/src/InputAddress/KeyPair.tsx +++ b/packages/react-components/src/InputAddress/KeyPair.tsx @@ -17,7 +17,7 @@ interface Props { function KeyPair ({ address, className = '' }: Props): React.ReactElement { return ( -
+
{address}
-
+ ); } -export default React.memo(styled(KeyPair)` +const StyledDiv = styled.div` display: flex; flex-wrap: nowrap; justify-content: space-between; @@ -69,4 +69,6 @@ export default React.memo(styled(KeyPair)` text-transform: uppercase; } } -`); +`; + +export default React.memo(KeyPair); diff --git a/packages/react-components/src/InputAddress/index.tsx b/packages/react-components/src/InputAddress/index.tsx index 9dc91cfd15..3bf2fc3726 100644 --- a/packages/react-components/src/InputAddress/index.tsx +++ b/packages/react-components/src/InputAddress/index.tsx @@ -187,7 +187,7 @@ class InputAddress extends React.PureComponent { : actualValue; return ( - { }; } -const ExportedComponent = withMulti( - styled(InputAddress)` +const StyledDropdown = styled(Dropdown)` .ui.dropdown .text { width: 100%; } @@ -364,7 +363,10 @@ const ExportedComponent = withMulti( flex: 0; max-width: 0; } - `, +`; + +const ExportedComponent = withMulti( + InputAddress, withObservable(keyring.keyringOption.optionsSubject, { propName: 'optionsAll', transform: (optionsAll: KeyringOptions): Record => diff --git a/packages/react-components/src/InputAddressMulti/Selected.tsx b/packages/react-components/src/InputAddressMulti/Selected.tsx index ddee1b82bf..25eece6f45 100644 --- a/packages/react-components/src/InputAddressMulti/Selected.tsx +++ b/packages/react-components/src/InputAddressMulti/Selected.tsx @@ -13,8 +13,8 @@ interface Props { } function Selected ({ address, filter, isHidden, onDeselect }: Props): React.ReactElement | null { - const _onDeselect = useCallback( - (): void => onDeselect(address), + const onChange = useCallback( + () => onDeselect(address), [address, onDeselect] ); @@ -27,7 +27,7 @@ function Selected ({ address, filter, isHidden, onDeselect }: Props): React.Reac address={address} filter={filter} noToggle - onChange={_onDeselect} + onChange={onChange} /> ); } diff --git a/packages/react-components/src/InputAddressMulti/SelectedDrag.tsx b/packages/react-components/src/InputAddressMulti/SelectedDrag.tsx deleted file mode 100644 index 2559cd32be..0000000000 --- a/packages/react-components/src/InputAddressMulti/SelectedDrag.tsx +++ /dev/null @@ -1,51 +0,0 @@ -// Copyright 2017-2023 @polkadot/react-components authors & contributors -// SPDX-License-Identifier: Apache-2.0 - -import React from 'react'; -import { Draggable, DraggableProvided, DraggableStateSnapshot } from 'react-beautiful-dnd'; -import { createRoot } from 'react-dom/client'; - -import { PORTAL_ID } from '../../../apps/src/Apps'; -import AddressToggle from '../AddressToggle'; - -interface Props { - address: string; - index: number; - onDeselect: (index: number) => void; -} - -const portal = document.getElementById(PORTAL_ID) as HTMLElement; - -function Selected ({ address, index, onDeselect }: Props): React.ReactElement { - return ( - - {(provided: DraggableProvided, snapshot: DraggableStateSnapshot): React.ReactElement => { - const element = ( -
- -
- ); - - return snapshot.isDragging - ? createRoot(portal).render(element) as unknown as React.ReactElement - : element; - }} - - ); -} - -export default React.memo(Selected); diff --git a/packages/react-components/src/InputAddressMulti/index.tsx b/packages/react-components/src/InputAddressMulti/index.tsx index 55831d427d..5d588f2a7d 100644 --- a/packages/react-components/src/InputAddressMulti/index.tsx +++ b/packages/react-components/src/InputAddressMulti/index.tsx @@ -49,18 +49,18 @@ function InputAddressMulti ({ available, availableLabel, className = '', default selected && onChange(selected); }, [onChange, selected]); - const _onSelect = useCallback( + const onSelect = useCallback( (address: string) => setSelected((prev) => include(prev, address, maxCount)), [maxCount] ); - const _onDeselect = useCallback( + const onDeselect = useCallback( (address: string) => setSelected((prev) => exclude(prev, address)), [] ); return ( -
+ ))}
@@ -94,18 +94,18 @@ function InputAddressMulti ({ available, availableLabel, className = '', default filter={filter} isHidden={selected?.includes(address)} key={address} - onSelect={_onSelect} + onSelect={onSelect} /> )) }
- + ); } -export default React.memo(styled(InputAddressMulti)` +const StyledDiv = styled.div` border-top-width: 0px; margin-left: 2rem; width: calc(100% - 2rem); @@ -159,4 +159,6 @@ export default React.memo(styled(InputAddressMulti)` } } } -`); +`; + +export default React.memo(InputAddressMulti); diff --git a/packages/react-components/src/Popup/PopupWindow.tsx b/packages/react-components/src/Popup/PopupWindow.tsx index 93f5edeebb..82259edddc 100644 --- a/packages/react-components/src/Popup/PopupWindow.tsx +++ b/packages/react-components/src/Popup/PopupWindow.tsx @@ -5,7 +5,7 @@ import type { PopupWindowProps as Props } from './types'; import React from 'react'; import { createPortal } from 'react-dom'; -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; import { usePopupWindow } from '@polkadot/react-hooks/usePopupWindow'; @@ -13,8 +13,8 @@ function PopupWindow ({ children, className = '', position, triggerRef, windowRe const { pointerStyle, renderCoords: { x, y } } = usePopupWindow(windowRef, triggerRef, position); return createPortal( -
{children} -
, + , document.body ); } -export default React.memo(styled(PopupWindow)` +const StyledDiv = styled.div` background-color: var(--bg-menu); border: 1px solid #d4d4d5; border-radius: 4px; @@ -43,28 +43,30 @@ export default React.memo(styled(PopupWindow)` top: 0; z-index: -1; + &.leftPosition { + &::before { + left: unset; + right: 0.75rem; + } + } + + &.rightPosition { + &::before { + left: 0.75rem; + right: unset; + } + } + &::before { + background-color: var(--bg-menu); bottom: -0.5rem; box-shadow: 1px 1px 0 0 #bababc; + content: ''; + height: 1rem; position: absolute; right: 50%; top: unset; - - ${({ position }) => position === 'left' && css` - left: unset; - right: 0.75rem; - `} - - ${({ position }) => position === 'right' && css` - left: 0.75rem; - right: unset; - `} - - content: ''; - background-color: var(--bg-menu); - width: 1rem; - height: 1rem; transform: rotate(45deg); z-index: 2; } @@ -97,4 +99,6 @@ export default React.memo(styled(PopupWindow)` & > *:last-child:not(.ui--Menu) { margin-bottom: 1rem; } -`); +`; + +export default React.memo(PopupWindow); diff --git a/packages/react-components/src/Popup/index.tsx b/packages/react-components/src/Popup/index.tsx index b5d6798c9d..52a77f3168 100644 --- a/packages/react-components/src/Popup/index.tsx +++ b/packages/react-components/src/Popup/index.tsx @@ -44,7 +44,7 @@ function Popup ({ children, className = '', closeOnScroll, isDisabled, onCloseAc }, [isOpen, onCloseAction]); return ( -
+ {isOpen && ( )}
- + ); } -export default React.memo(styled(Popup)` +const StyledDiv = styled.div` display: inline-flex; flex-direction: column; justify-content: center; position: relative; -`); +`; + +export default React.memo(Popup); diff --git a/packages/react-components/src/Row.tsx b/packages/react-components/src/Row.tsx index 685ef23931..355418c872 100644 --- a/packages/react-components/src/Row.tsx +++ b/packages/react-components/src/Row.tsx @@ -157,7 +157,7 @@ export interface RowProps { buttons?: React.ReactNode; children?: React.ReactNode; className?: string; - defaultName?: string; + defaultName?: string | null; details?: React.ReactNode; icon?: React.ReactNode; iconInfo?: React.ReactNode; diff --git a/packages/react-components/src/Status/index.tsx b/packages/react-components/src/Status/index.tsx index e38ddadb7b..9f06829198 100644 --- a/packages/react-components/src/Status/index.tsx +++ b/packages/react-components/src/Status/index.tsx @@ -171,15 +171,14 @@ function Status ({ className = '' }: Props): React.ReactElement | null { } return ( -
+ {allTx.map(renderItem)} {allSt.map(renderStatus)} -
+ ); } -export default React.memo(styled(Status)` - /* bottom: 0; */ +const StyledDiv = styled.div` display: inline-block; overflow: hidden; position: fixed; @@ -308,4 +307,6 @@ export default React.memo(styled(Status)` } } } -`); +`; + +export default React.memo(Status); diff --git a/packages/react-components/src/Table/Column/Expand.tsx b/packages/react-components/src/Table/Column/Expand.tsx index 4386eca394..05bc6c7e60 100644 --- a/packages/react-components/src/Table/Column/Expand.tsx +++ b/packages/react-components/src/Table/Column/Expand.tsx @@ -10,7 +10,7 @@ import Icon from '../../Icon'; function Expand ({ className = '', isExpanded, toggle }: Props): React.ReactElement { return ( - @@ -23,11 +23,11 @@ function Expand ({ className = '', isExpanded, toggle }: Props): React.ReactElem } /> - + ); } -export default React.memo(styled(Expand)` +const StyledTd = styled.td` && { box-sizing: content-box; cursor: pointer; @@ -47,4 +47,6 @@ export default React.memo(styled(Expand)` width: 1.7rem; } } -`); +`; + +export default React.memo(Expand); diff --git a/packages/react-components/src/Table/Column/Favorite.tsx b/packages/react-components/src/Table/Column/Favorite.tsx index 864dc5ea35..7dbf70f208 100644 --- a/packages/react-components/src/Table/Column/Favorite.tsx +++ b/packages/react-components/src/Table/Column/Favorite.tsx @@ -15,7 +15,7 @@ function Favorite ({ address, className = '', isFavorite, toggle }: Props): Reac ); return ( - @@ -27,11 +27,11 @@ function Favorite ({ address, className = '', isFavorite, toggle }: Props): Reac } icon='star' /> - + ); } -export default React.memo(styled(Favorite)` +const StyledTd = styled.td` && { box-sizing: content-box; cursor: pointer; @@ -40,4 +40,6 @@ export default React.memo(styled(Favorite)` text-align: right; width: 1rem; } -`); +`; + +export default React.memo(Favorite); diff --git a/packages/react-components/src/Table/Column/Id.tsx b/packages/react-components/src/Table/Column/Id.tsx index 038f0843f6..8764d070fe 100644 --- a/packages/react-components/src/Table/Column/Id.tsx +++ b/packages/react-components/src/Table/Column/Id.tsx @@ -10,9 +10,9 @@ import { formatNumber } from '@polkadot/util'; function Id ({ className = '', value }: Props): React.ReactElement { return ( - +

{formatNumber(value)}

- + ); } @@ -20,11 +20,13 @@ function Id ({ className = '', value }: Props): React.ReactElement { // we wrap the display in an h2 with max size text at ~1.3rem, so multiply it out const WIDTH = `${(5.5 * 1.3).toFixed(3)}ch`; -export default React.memo(styled(Id)` +const StyledTd = styled.td` && { box-sizing: content-box; min-width: ${WIDTH}; text-align: right; white-space: nowrap; width: ${WIDTH}; -`); +`; + +export default React.memo(Id); diff --git a/packages/react-components/src/Table/Foot.tsx b/packages/react-components/src/Table/Foot.tsx index 70b7653eea..494377834b 100644 --- a/packages/react-components/src/Table/Foot.tsx +++ b/packages/react-components/src/Table/Foot.tsx @@ -16,13 +16,13 @@ function Foot ({ className = '', footer, isEmpty }: Props): React.ReactElement

+ {footer} - + ); } -export default React.memo(styled(Foot)` +const StyledTfoot = styled.tfoot` td { color: var(--color-table-foot); font: var(--font-sans); @@ -36,4 +36,6 @@ export default React.memo(styled(Foot)` tr { background: var(--bg-page); } -`); +`; + +export default React.memo(Foot); diff --git a/packages/react-components/src/Table/Head.tsx b/packages/react-components/src/Table/Head.tsx index ac0e653227..13f060dcff 100644 --- a/packages/react-components/src/Table/Head.tsx +++ b/packages/react-components/src/Table/Head.tsx @@ -10,7 +10,7 @@ interface Props { children?: React.ReactNode; className?: string; filter?: React.ReactNode; - header?: (null | undefined | HeaderDef)[]; + header?: (false | null | undefined | HeaderDef)[]; isEmpty: boolean; } @@ -20,7 +20,7 @@ function Head ({ children, className = '', filter, header, isEmpty }: Props): Re } return ( - + {filter && ( {filter} @@ -42,11 +42,11 @@ function Head ({ children, className = '', filter, header, isEmpty }: Props): Re )} {children} - + ); } -export default React.memo(styled(Head)` +const StyledThead = styled.thead` z-index: 1; th { @@ -141,4 +141,6 @@ export default React.memo(styled(Head)` } } } -`); +`; + +export default React.memo(Head); diff --git a/packages/react-components/src/Table/Table.tsx b/packages/react-components/src/Table/Table.tsx index 6dcb7c055b..fd8799c6da 100644 --- a/packages/react-components/src/Table/Table.tsx +++ b/packages/react-components/src/Table/Table.tsx @@ -51,7 +51,7 @@ function Table ({ children, className = '', empty, emptySpinner, filter, footer, const tableClassName = `${(isFixed && !isEmpty) ? 'isFixed' : 'isNotFixed'} ${isInline ? 'isInline' : ''} ${splitBody ? 'noMargin' : ''}`; return ( -

+ {legend} {splitBody ? ( @@ -94,14 +94,14 @@ function Table ({ children, className = '', empty, emptySpinner, filter, footer, ) } -
+ ); } const BORDER_RADIUS = '0.5rem'; const BORDER_SOLID = '1px solid var(--bg-page)'; // var(--border-table) -export default React.memo(styled(Table)` +const StyledDiv = styled.div` max-width: 100%; width: 100%; @@ -523,4 +523,6 @@ export default React.memo(styled(Table)` } } } -`); +`; + +export default React.memo(Table); diff --git a/packages/react-components/src/Tabs/CurrentSection.tsx b/packages/react-components/src/Tabs/CurrentSection.tsx index 924c77884f..8c5518dfeb 100644 --- a/packages/react-components/src/Tabs/CurrentSection.tsx +++ b/packages/react-components/src/Tabs/CurrentSection.tsx @@ -15,14 +15,14 @@ interface Props { function CurrentSection ({ className = '', icon, text }: Props): React.ReactElement { return ( -
+ {text} -
+ ); } -export default React.memo(styled(CurrentSection)` +const StyledDiv = styled.div` margin: 0 2.5rem 0 1.5rem; font-weight: var(--font-weight-normal); font-size: var(--font-size-base); @@ -42,4 +42,6 @@ export default React.memo(styled(CurrentSection)` @media only screen and (max-width: 900px) { margin: 0 1.5rem; } -`); +`; + +export default React.memo(CurrentSection); diff --git a/packages/react-components/src/Tabs/Tab.tsx b/packages/react-components/src/Tabs/Tab.tsx index 4c35f9cf4c..6186a33584 100644 --- a/packages/react-components/src/Tabs/Tab.tsx +++ b/packages/react-components/src/Tabs/Tab.tsx @@ -26,7 +26,7 @@ function Tab ({ basePath, className = '', count, hasParams, index, isExact, isRo const tabIsExact = isExact || !hasParams || index === 0; return ( - )} - + ); } -export default React.memo(styled(Tab)` +const StyledNavLink = styled(NavLink)` align-items: center; display: flex; color: #8B8B8B; @@ -97,4 +97,6 @@ export default React.memo(styled(Tab)` .tabIcon { margin-left: 0.75rem; } -`); +`; + +export default React.memo(Tab); diff --git a/packages/react-components/src/Tabs/TabsSectionDelimiter.tsx b/packages/react-components/src/Tabs/TabsSectionDelimiter.tsx index 3dbb287136..06bac4b3e5 100644 --- a/packages/react-components/src/Tabs/TabsSectionDelimiter.tsx +++ b/packages/react-components/src/Tabs/TabsSectionDelimiter.tsx @@ -10,7 +10,7 @@ interface TabsSectionDelimiterProps { function TabsSectionDelimiter ({ className = '' }: TabsSectionDelimiterProps): React.ReactElement { return ( -
+ -
+ ); } -export default React.memo(styled(TabsSectionDelimiter)` +const StyledDiv = styled.div` height: 100%; width: auto; -`); +`; + +export default React.memo(TabsSectionDelimiter); diff --git a/packages/react-components/src/Tabs/index.tsx b/packages/react-components/src/Tabs/index.tsx index c4955be7be..a7ef01dfdb 100644 --- a/packages/react-components/src/Tabs/index.tsx +++ b/packages/react-components/src/Tabs/index.tsx @@ -4,7 +4,7 @@ import type { Location } from 'history'; import type { SectionType, TabItem } from './types'; -import React, { useEffect } from 'react'; +import React, { useEffect, useMemo } from 'react'; import { useLocation } from 'react-router-dom'; import styled from 'styled-components'; @@ -18,21 +18,21 @@ interface Props { className?: string; basePath: string; hidden?: string[] | null | false; - items: TabItem[]; + items: (TabItem | false | null | undefined)[]; } // redirect on invalid tabs -function redirect (basePath: string, location: Location, items: TabItem[], hidden?: string[] | null | false): void { +function redirect (basePath: string, location: Location, items: (TabItem | false | null | undefined)[], 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); + const alias = items.find((v) => v && v.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))) { + } else if (hidden && (hidden.includes(section) || !items.some((v) => v && !v.isRoot && v.name === section))) { window.location.hash = basePath; } } @@ -42,17 +42,18 @@ function Tabs ({ basePath, className = '', hidden, items }: Props): React.ReactE const location = useLocation(); const { icon, text } = React.useContext(TabsCtx); + const filtered = useMemo( + () => items.filter((v): v is TabItem => !!v && (!hidden || !hidden.includes(v.name))), + [hidden, items] + ); + useEffect( () => redirect(basePath, location, items, hidden), [basePath, hidden, items, location] ); - const filtered = hidden - ? items.filter(({ name }) => !hidden.includes(name)) - : items; - return ( -
+
{text && icon && (
-
+ ); } -export default React.memo(styled(Tabs)` +const StyledHeader = styled.header` background: var(--bg-tabs); border-bottom: 1px solid var(--border-tabs); text-align: left; @@ -114,4 +115,6 @@ export default React.memo(styled(Tabs)` margin: 0 2.72rem 0 2.35rem; } } -`); +`; + +export default React.memo(Tabs); diff --git a/packages/react-query/src/BlockToTime.tsx b/packages/react-query/src/BlockToTime.tsx index 198ca232df..f5d6b011a8 100644 --- a/packages/react-query/src/BlockToTime.tsx +++ b/packages/react-query/src/BlockToTime.tsx @@ -26,18 +26,18 @@ function BlockToTime ({ api, children, className = '', isInline, label, value }: } return ( -
+ {label || ''}{text.split(' ').map((v, index) => {v} )}{children} -
+ ); } -export default React.memo(styled(BlockToTime)` +const StyledDiv = styled.div` &.isInline { display: inline-block; } @@ -49,4 +49,6 @@ export default React.memo(styled(BlockToTime)` span.timeUnits { font-size: var(--font-percent-tiny); } -`); +`; + +export default React.memo(BlockToTime); diff --git a/packages/react-query/src/Elapsed.tsx b/packages/react-query/src/Elapsed.tsx index 90be8b5817..19dd073c15 100644 --- a/packages/react-query/src/Elapsed.tsx +++ b/packages/react-query/src/Elapsed.tsx @@ -76,16 +76,16 @@ function Elapsed ({ children, className = '', value }: Props): React.ReactElemen }, []); return ( -
+ {getDisplayValue(now, value)}{children} -
+ ); } -export default React.memo(styled(Elapsed)` - white-space: nowrap; - +const StyledDiv = styled.div` .timeUnit { font-size: var(--font-percent-tiny); } -`); +`; + +export default React.memo(Elapsed); diff --git a/packages/react-query/src/FormatBalance.tsx b/packages/react-query/src/FormatBalance.tsx index 365098b264..0eea132c8e 100644 --- a/packages/react-query/src/FormatBalance.tsx +++ b/packages/react-query/src/FormatBalance.tsx @@ -16,12 +16,12 @@ import { useTranslation } from './translate'; interface Props { children?: React.ReactNode; className?: string; - format?: [number, string]; + format?: [decimals: number, unit: string]; formatIndex?: number; isShort?: boolean; label?: React.ReactNode; labelPost?: LabelPost; - value?: Compact | BN | string | null | 'all'; + value?: Compact | BN | string | number | null | 'all'; valueFormatted?: string; withCurrency?: boolean; withSi?: boolean; @@ -58,7 +58,7 @@ function splitFormat (value: string, label?: LabelPost, isShort?: boolean): Reac return createElement(prefix, postfix, unit, label, isShort); } -function applyFormat (value: Compact | BN | string, [decimals, token]: [number, string], withCurrency = true, withSi?: boolean, _isShort?: boolean, labelPost?: LabelPost): React.ReactNode { +function applyFormat (value: Compact | BN | string | number, [decimals, token]: [number, string], withCurrency = true, withSi?: boolean, _isShort?: boolean, labelPost?: LabelPost): React.ReactNode { const [prefix, postfix] = formatBalance(value, { decimals, forceUnit: '-', withSi: false }).split('.'); const isShort = _isShort || (withSi && prefix.length >= K_LENGTH); const unitPost = withCurrency ? token : ''; @@ -85,7 +85,7 @@ function FormatBalance ({ children, className = '', format, formatIndex, isShort // labelPost here looks messy, however we ensure we have one less text node return ( -
+ {label ? <>{label}  : ''} {children} -
+ ); } -export default React.memo(styled(FormatBalance)` - display: inline-block; +const StyledSpan = styled.span` vertical-align: baseline; white-space: nowrap; @@ -147,4 +146,6 @@ export default React.memo(styled(FormatBalance)` .ui--Icon+.ui--FormatBalance-value { margin-left: 0.375rem; } -`); +`; + +export default React.memo(FormatBalance);