diff --git a/packages/app-accounts/src/Account.tsx b/packages/app-accounts/src/Account.tsx index 91529679a9..22fb9953cd 100644 --- a/packages/app-accounts/src/Account.tsx +++ b/packages/app-accounts/src/Account.tsx @@ -6,9 +6,8 @@ import { ActionStatus } from '@polkadot/react-components/Status/types'; import { I18nProps } from '@polkadot/react-components/types'; import React, { useState, useEffect } from 'react'; -import { Popup } from 'semantic-ui-react'; import styled from 'styled-components'; -import { AddressCard, AddressInfo, Button, ChainLock, Forget, Menu } from '@polkadot/react-components'; +import { AddressCard, AddressInfo, Button, ChainLock, Forget, Menu, Popup } from '@polkadot/react-components'; import keyring from '@polkadot/ui-keyring'; import Backup from './modals/Backup'; @@ -47,8 +46,8 @@ function Account ({ address, className, t }: Props): React.ReactElement { const _toggleDerive = (): void => setIsDeriveOpen(!isDeriveOpen); const _toggleForget = (): void => setIsForgetOpen(!isForgetOpen); const _togglePass = (): void => setIsPasswordOpen(!isPasswordOpen); - const _toggleTransfer = (): void => setIsTransferOpen(!isTransferOpen); const _toggleSettingPopup = (): void => setIsSettingPopupOpen(!isSettingPopupOpen); + const _toggleTransfer = (): void => setIsTransferOpen(!isTransferOpen); const _onForget = (): void => { if (!address) { return; @@ -83,33 +82,6 @@ function Account ({ address, className, t }: Props): React.ReactElement { buttons={
- {isEditable && !isDevelopment && ( -
- {isEditable && !isExternal && ( -
- -
- )}
} className={className} @@ -217,11 +209,6 @@ export default translate( styled(Account)` .accounts--Account-buttons { text-align: right; - - .others { - margin-right: 0.125rem; - margin-top: 0.25rem; - } } ` ); diff --git a/packages/app-address-book/src/Address.tsx b/packages/app-address-book/src/Address.tsx index 8ae133d642..0cc9bb973d 100644 --- a/packages/app-address-book/src/Address.tsx +++ b/packages/app-address-book/src/Address.tsx @@ -8,7 +8,7 @@ import { I18nProps } from '@polkadot/react-components/types'; import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; -import { AddressCard, AddressInfo, Button, ChainLock, Forget } from '@polkadot/react-components'; +import { AddressCard, AddressInfo, Button, ChainLock, Forget, Menu, Popup } from '@polkadot/react-components'; import keyring from '@polkadot/ui-keyring'; import Transfer from '@polkadot/app-accounts/modals/Transfer'; @@ -29,6 +29,7 @@ function Address ({ address, className, t }: Props): React.ReactElement { const [current, setCurrent] = useState(null); const [genesisHash, setGenesisHash] = useState(null); const [isForgetOpen, setIsForgetOpen] = useState(false); + const [isSettingPopupOpen, setIsSettingPopupOpen] = useState(false); const [isTransferOpen, setIsTransferOpen] = useState(false); useEffect((): void => { @@ -39,6 +40,7 @@ function Address ({ address, className, t }: Props): React.ReactElement { }, []); const _toggleForget = (): void => setIsForgetOpen(!isForgetOpen); + const _toggleSettingPopup = (): void => setIsSettingPopupOpen(!isSettingPopupOpen); const _toggleTransfer = (): void => setIsTransferOpen(!isTransferOpen); const _onForget = (): void => { if (address) { @@ -72,16 +74,6 @@ function Address ({ address, className, t }: Props): React.ReactElement { buttons={
- {isEditable && ( -
- {isEditable && ( -
- -
- )}
} className={className} @@ -143,11 +161,6 @@ export default translate( styled(Address)` .addresses--Address-buttons { text-align: right; - - .others { - margin-right: 0.125rem; - margin-top: 0.25rem; - } } ` ); diff --git a/packages/app-staking/src/Actions/Account/index.tsx b/packages/app-staking/src/Actions/Account/index.tsx index e25313019b..bb0fdda456 100644 --- a/packages/app-staking/src/Actions/Account/index.tsx +++ b/packages/app-staking/src/Actions/Account/index.tsx @@ -9,10 +9,9 @@ import { I18nProps } from '@polkadot/react-components/types'; import { AccountId, Exposure, StakingLedger, ValidatorPrefs } from '@polkadot/types/interfaces'; import { KeyringSectionOption } from '@polkadot/ui-keyring/options/types'; -import { Popup } from 'semantic-ui-react'; import React from 'react'; import styled from 'styled-components'; -import { AddressCard, AddressInfo, AddressMini, AddressRow, Button, Menu, OnlineStatus, TxButton } from '@polkadot/react-components'; +import { AddressCard, AddressInfo, AddressMini, AddressRow, Button, Menu, OnlineStatus, Popup, TxButton } from '@polkadot/react-components'; import { withCalls, withMulti } from '@polkadot/react-api'; import BondExtra from './BondExtra'; diff --git a/packages/react-components/src/ChainLock.tsx b/packages/react-components/src/ChainLock.tsx index bb44ca73ce..a0c3301f68 100644 --- a/packages/react-components/src/ChainLock.tsx +++ b/packages/react-components/src/ChainLock.tsx @@ -5,6 +5,7 @@ import { I18nProps } from '@polkadot/react-components/types'; import React from 'react'; +import styled from 'styled-components'; import { useApiContext } from '@polkadot/react-hooks'; import translate from './translate'; @@ -13,10 +14,12 @@ import Toggle from './Toggle'; interface Props extends I18nProps { className?: string; genesisHash: string | null; + isDisabled?: boolean; onChange: (genesisHash: string | null) => void; + preventDefault?: boolean; } -function ChainLock ({ genesisHash, onChange, t }: Props): React.ReactElement | null { +function ChainLock ({ className, genesisHash, isDisabled, onChange, preventDefault, t }: Props): React.ReactElement | null { const { isDevelopment, api } = useApiContext(); if (isDevelopment) { @@ -33,15 +36,22 @@ function ChainLock ({ genesisHash, onChange, t }: Props): React.ReactElement ); } -export default translate(ChainLock); +export default translate( + styled(ChainLock)` + text-align: right; + ` +); diff --git a/packages/react-components/src/Popup.tsx b/packages/react-components/src/Popup.tsx new file mode 100644 index 0000000000..761b82f41b --- /dev/null +++ b/packages/react-components/src/Popup.tsx @@ -0,0 +1,7 @@ +// Copyright 2017-2019 @polkadot/react-components authors & contributors +// This software may be modified and distributed under the terms +// of the Apache-2.0 license. See the LICENSE file for details. + +import { Popup } from 'semantic-ui-react'; + +export default Popup; diff --git a/packages/react-components/src/Toggle.tsx b/packages/react-components/src/Toggle.tsx index 7ecd44a404..a75f03aaac 100644 --- a/packages/react-components/src/Toggle.tsx +++ b/packages/react-components/src/Toggle.tsx @@ -14,11 +14,17 @@ interface Props extends BareProps { isDisabled?: boolean; label: React.ReactNode; onChange?: (isChecked: boolean) => void; + preventDefault?: boolean; value?: boolean; } -function Toggle ({ className, asSwitch = true, defaultValue, isDisabled, onChange, value, label }: Props): React.ReactElement { - const _onChange = (_: React.FormEvent, { checked }: any): void => { +function Toggle ({ className, asSwitch = true, defaultValue, isDisabled, onChange, preventDefault, value, label }: Props): React.ReactElement { + const _onChange = (event: React.FormEvent, { checked }: any): void => { + if (preventDefault) { + event.preventDefault(); + event.stopPropagation(); + } + onChange && onChange(checked); }; diff --git a/packages/react-components/src/index.tsx b/packages/react-components/src/index.tsx index 900bc0d4e3..cd51b865b9 100644 --- a/packages/react-components/src/index.tsx +++ b/packages/react-components/src/index.tsx @@ -63,6 +63,7 @@ export { default as Modal } from './Modal'; export { default as Nonce } from './Nonce'; export { default as Output } from './Output'; export { default as Password } from './Password'; +export { default as Popup } from './Popup'; export { default as Progress } from './Progress'; export { default as ProposedAction } from './ProposedAction'; export { default as OnlineStatus } from './OnlineStatus';