From 65a9d91ad09aaac6c5fc52aaadd717c8ab64d72e Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Fri, 6 Sep 2019 15:53:21 +0200 Subject: [PATCH] Collapse unbonding, hover expands all at once (#1589) * Collapse unbonding, hover expands all at once * Return null (not 0) * Linting --- packages/app-accounts/src/Account.tsx | 317 +++++++----------- packages/app-accounts/src/Overview.tsx | 149 ++++---- packages/react-api/src/with/call.tsx | 6 +- packages/react-components/src/AddressInfo.tsx | 127 ++++--- 4 files changed, 245 insertions(+), 354 deletions(-) diff --git a/packages/app-accounts/src/Account.tsx b/packages/app-accounts/src/Account.tsx index a58f399570..9a4106d76e 100644 --- a/packages/app-accounts/src/Account.tsx +++ b/packages/app-accounts/src/Account.tsx @@ -5,7 +5,7 @@ import { ActionStatus } from '@polkadot/react-components/Status/types'; import { I18nProps } from '@polkadot/react-components/types'; -import React from 'react'; +import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; import { AddressCard, AddressInfo, Button, ChainLock, Forget, Icon } from '@polkadot/react-components'; import keyring from '@polkadot/ui-keyring'; @@ -20,145 +20,28 @@ interface Props extends I18nProps { className?: string; } -interface State { - genesisHash: string | null; - isBackupOpen: boolean; - isEditable: boolean; - isExternal: boolean; - isForgetOpen: boolean; - isPasswordOpen: boolean; - isTransferOpen: boolean; -} +function Account ({ address, className, t }: Props): React.ReactElement { + const [genesisHash, setGenesisHash] = useState(null); + const [isBackupOpen, setIsBackupOpen] = useState(false); + const [isEditable, setIsEditable] = useState(false); + const [isExternal, setIsExternal] = useState(false); + const [isForgetOpen, setIsForgetOpen] = useState(false); + const [isPasswordOpen, setIsPasswordOpen] = useState(false); + const [isTransferOpen, setIsTransferOpen] = useState(false); -class Account extends React.PureComponent { - public state: State; + useEffect((): void => { + const account = keyring.getAccount(address); - public constructor (props: Props) { - super(props); - - const account = keyring.getAccount(props.address); - - this.state = { - genesisHash: (account && account.meta.genesisHash) || null, - isBackupOpen: false, - isEditable: account - ? !(account.meta.isInjected) - : false, - isExternal: (account && account.meta.isExternal) || false, - isForgetOpen: false, - isPasswordOpen: false, - isTransferOpen: false - }; - } - - public render (): React.ReactNode { - const { address, className } = this.props; - const { isEditable } = this.state; - - // FIXME It is a bit heavy-handled switching of being editable here completely - // (and removing the tags, however the keyring cannot save these) - return ( - - {this.renderModals()} - - - ); - } - - private renderModals (): React.ReactNode { - const { address } = this.props; - const { isBackupOpen, isForgetOpen, isPasswordOpen, isTransferOpen } = this.state; - - if (!address) { - return null; - } - - const modals = []; - - if (isBackupOpen) { - modals.push( - - ); - } - - if (isForgetOpen) { - modals.push( - - ); - } - - if (isPasswordOpen) { - modals.push( - - ); - } - - if (isTransferOpen) { - modals.push( - - ); - } - - return modals; - } - - private toggleBackup = (): void => { - this.setState(({ isBackupOpen }: State): Pick => ({ - isBackupOpen: !isBackupOpen - })); - } - - private toggleForget = (): void => { - this.setState(({ isForgetOpen }: State): Pick => ({ - isForgetOpen: !isForgetOpen - })); - } - - private togglePass = (): void => { - this.setState(({ isPasswordOpen }: State): Pick => ({ - isPasswordOpen: !isPasswordOpen - })); - } - - private toggleTransfer = (): void => { - this.setState(({ isTransferOpen }: State): Pick => ({ - isTransferOpen: !isTransferOpen - })); - } - - private onForget = (): void => { - const { address, t } = this.props; + setGenesisHash((account && account.meta.genesisHash) || null); + setIsEditable((account && !(account.meta.isInjected)) || false); + setIsExternal((account && account.meta.isExternal) || false); + }, [address]); + const _toggleBackup = (): void => setIsBackupOpen(!isBackupOpen); + const _toggleForget = (): void => setIsForgetOpen(!isForgetOpen); + const _togglePass = (): void => setIsPasswordOpen(!isPasswordOpen); + const _toggleTransfer = (): void => setIsTransferOpen(!isTransferOpen); + const _onForget = (): void => { if (!address) { return; } @@ -176,71 +59,113 @@ class Account extends React.PureComponent { status.status = 'error'; status.message = error.message; } - } + }; + const _onGenesisChange = (genesisHash: string | null): void => { + const account = keyring.getPair(address); - private onGenesisChange = (genesisHash: string | null): void => { - const { address } = this.props; + account && keyring.saveAccountMeta(account, { ...account.meta, genesisHash }); + }; - this.setState({ genesisHash }, (): void => { - const account = keyring.getPair(address); - - account && keyring.saveAccountMeta(account, { ...account.meta, genesisHash }); - }); - } - - private renderButtons (): React.ReactNode { - const { t } = this.props; - const { genesisHash, isEditable, isExternal } = this.state; - - return ( -
-
- {isEditable && ( + // FIXME It is a bit heavy-handled switching of being editable here completely + // (and removing the tags, however the keyring cannot save these) + return ( + +
+ {isEditable && ( +
- {isEditable && !isExternal && ( -
-
- )} -
- ); - } + {isEditable && !isExternal && ( +
+ +
+ )} +
+ } + className={className} + isEditable={isEditable} + type='account' + value={address} + withExplorer + withIndex + withTags + > + {address && ( + <> + {isBackupOpen && ( + + )} + {isForgetOpen && ( + + )} + {isPasswordOpen && ( + + )} + {isTransferOpen && ( + + )} + + )} + + + ); } export default translate( diff --git a/packages/app-accounts/src/Overview.tsx b/packages/app-accounts/src/Overview.tsx index e85756c581..8a9f6eb57b 100644 --- a/packages/app-accounts/src/Overview.tsx +++ b/packages/app-accounts/src/Overview.tsx @@ -6,7 +6,7 @@ import { I18nProps } from '@polkadot/react-components/types'; import { SubjectInfo } from '@polkadot/ui-keyring/observable/types'; import { ComponentProps } from './types'; -import React from 'react'; +import React, { useState } from 'react'; import accountObservable from '@polkadot/ui-keyring/observable/accounts'; import { withMulti, withObservable } from '@polkadot/react-api'; import { Button, CardGrid } from '@polkadot/react-components'; @@ -22,100 +22,69 @@ interface Props extends ComponentProps, I18nProps { accounts?: SubjectInfo[]; } -interface State { - isCreateOpen: boolean; - isImportOpen: boolean; - isQrOpen: boolean; -} +function Overview ({ accounts = [], onStatusChange, t }: Props): React.ReactElement { + const [isCreateOpen, setIsCreateOpen] = useState(false); + const [isImportOpen, setIsImportOpen] = useState(false); + const [isQrOpen, setIsQrOpen] = useState(false); + const emptyScreen = !(isCreateOpen || isImportOpen || isQrOpen) && (Object.keys(accounts).length === 0); -class Overview extends React.PureComponent { - public constructor (props: Props) { - super(props); + const _toggleCreate = (): void => setIsCreateOpen(!isCreateOpen); + const _toggleImport = (): void => setIsImportOpen(!setIsImportOpen); + const _toggleQr = (): void => setIsQrOpen(!isQrOpen); - this.state = { - isCreateOpen: false, - isImportOpen: false, - isQrOpen: false - }; - } - - public render (): React.ReactNode { - const { accounts = [], onStatusChange, t } = this.props; - const { isCreateOpen, isImportOpen, isQrOpen } = this.state; - const emptyScreen = !(isCreateOpen || isImportOpen || isQrOpen) && (Object.keys(accounts).length === 0); - - return ( - } - buttons={ - -