neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Button/TxButton submit on enter (#1170)

Browse Source 
* Button/TxButton submit on enter

* promise linting

* testing ref approach

* Add TxComponent to handle submit on enter

* remove accountNonce

* remove input ref

* remove TxButton constructor

* remove comment

* empty constructor

* linting

* bug with null ref

* linting
This commit is contained in:
kwingram25 2019-05-22 18:08:58 +02:00 committed by GitHub
parent bf81be7f8c
commit dc943d7cd6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
62 changed files with 247 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/app-123code/src/Transfer.tsx
View File

@ -4,7 +4,7 @@
import BN from 'bn.js';
import React from 'react';
import { Button, InputAddress, InputBalance, TxButton } from '@polkadot/ui-app';
import { Button, InputAddress, InputBalance, TxButton, TxComponent } from '@polkadot/ui-app';
import Summary from './Summary';
@ -16,7 +16,7 @@ type State = {
recipientId?: string;
};
export default class Transfer extends React.PureComponent<Props> {
export default class Transfer extends TxComponent<Props, State> {
state: State = {};
render () {
@ -31,11 +31,13 @@ export default class Transfer extends React.PureComponent<Props> {
<InputAddress
label='recipient address for this transfer'
onChange={this.onChangeRecipient}
onEnter={this.sendTx}
type='all'
/>
<InputBalance
label='amount to transfer'
onChange={this.onChangeAmount}
onEnter={this.sendTx}
/>
<Button.Group>
<TxButton
@ -43,6 +45,7 @@ export default class Transfer extends React.PureComponent<Props> {
label='make transfer'
params={[recipientId, amount]}
tx='balances.transfer'
ref={this.button}
/>
</Button.Group>
</div>

11
packages/app-accounts/src/Creator.tsx
View File

@ -12,7 +12,7 @@ import FileSaver from 'file-saver';
import React from 'react';
import { DEV_PHRASE } from '@polkadot/keyring/defaults';
import { withApi, withMulti } from '@polkadot/ui-api';
import { AddressSummary, AddressRow, Button, Dropdown, Input, InputTags, Labelled, Modal, Password } from '@polkadot/ui-app';
import { AddressSummary, AddressRow, Button, Dropdown, Input, InputTags, Labelled, Modal, Password, TxComponent } from '@polkadot/ui-app';
import { InputAddress } from '@polkadot/ui-app/InputAddress';
import keyring from '@polkadot/ui-keyring';
import uiSettings from '@polkadot/ui-settings';
@ -90,7 +90,7 @@ function addressFromSeed (phrase: string, derivePath: string, pairType: KeypairT
.address();
}
class Creator extends React.PureComponent<Props, State> {
class Creator extends TxComponent<Props, State> {
state: State = { seedType: 'bip' } as State;
constructor (props: Props) {
@ -150,6 +150,7 @@ class Creator extends React.PureComponent<Props, State> {
isPrimary
label={t('Save')}
onClick={this.onShowWarning}
ref={this.button}
/>
</Button.Group>
);
@ -179,6 +180,7 @@ class Creator extends React.PureComponent<Props, State> {
isError={!isNameValid}
label={t('name')}
onChange={this.onChangeName}
onEnter={this.submit}
value={name}
/>
</div>
@ -190,6 +192,7 @@ class Creator extends React.PureComponent<Props, State> {
isError={!isSeedValid}
label={seedLabel}
onChange={this.onChangeSeed}
onEnter={this.submit}
value={seed}
>
<Dropdown
@ -207,6 +210,7 @@ class Creator extends React.PureComponent<Props, State> {
isError={!isPassValid}
label={t('password')}
onChange={this.onChangePass}
onEnter={this.submit}
value={password}
/>
</div>
@ -240,6 +244,7 @@ class Creator extends React.PureComponent<Props, State> {
isError={!!deriveError}
label={t('secret derivation path')}
onChange={this.onChangeDerive}
onEnter={this.submit}
value={derivePath}
/>
</div>
@ -340,7 +345,7 @@ class Creator extends React.PureComponent<Props, State> {
private nextState (newState: State): void {
this.setState(
(prevState: State, props: Props): State => {
(prevState: State): State => {
const { derivePath = prevState.derivePath, name = prevState.name, pairType = prevState.pairType, password = prevState.password, seed = prevState.seed, seedOptions = prevState.seedOptions, seedType = prevState.seedType, showWarning = prevState.showWarning, tags = prevState.tags } = newState;
let address = prevState.address;
const deriveError = deriveValidate(derivePath, pairType);

6
packages/app-accounts/src/Restore.tsx
View File

@ -8,7 +8,7 @@ import { ActionStatus } from '@polkadot/ui-app/Status/types';
import { ComponentProps } from './types';
import React from 'react';
import { AddressSummary, Button, InputFile, Password } from '@polkadot/ui-app';
import { AddressSummary, Button, InputFile, Password, TxComponent } from '@polkadot/ui-app';
import { InputAddress } from '@polkadot/ui-app/InputAddress';
import { isHex, isObject, u8aToString } from '@polkadot/util';
import keyring from '@polkadot/ui-keyring';
@ -25,7 +25,7 @@ type State = {
password: string
};
class Restore extends React.PureComponent<Props, State> {
class Restore extends TxComponent<Props, State> {
state: State = {
address: null,
isFileValid: false,
@ -57,6 +57,7 @@ class Restore extends React.PureComponent<Props, State> {
isPrimary
onClick={this.onSave}
label={t('Restore')}
ref={this.button}
/>
</Button.Group>
</div>
@ -89,6 +90,7 @@ class Restore extends React.PureComponent<Props, State> {
isError={!isPassValid}
label={t('password')}
onChange={this.onChangePass}
onEnter={this.submit}
value={password}
/>
</div>

6
packages/app-accounts/src/Vanity/index.tsx
View File

@ -9,7 +9,7 @@ import { ComponentProps } from '../types';
import React from 'react';
import styled from 'styled-components';
import { Button, Dropdown, Input } from '@polkadot/ui-app';
import { Button, Dropdown, Input, TxComponent } from '@polkadot/ui-app';
import uiSettings from '@polkadot/ui-settings';
import generator from '../vanitygen';
@ -51,7 +51,7 @@ const Wrapper = styled.div`
}
`;
class VanityApp extends React.PureComponent<Props, State> {
class VanityApp extends TxComponent<Props, State> {
results: Array<Generator$Result> = [];
state: State = {
elapsed: 0,
@ -98,6 +98,7 @@ class VanityApp extends React.PureComponent<Props, State> {
? t('Stop generation')
: t('Start generation')
}
ref={this.button}
/>
</Button.Group>
);
@ -135,6 +136,7 @@ class VanityApp extends React.PureComponent<Props, State> {
isError={!isMatchValid}
label={t('Search for')}
onChange={this.onChangeMatch}
onEnter={this.submit}
value={match}
/>
<Dropdown

6
packages/app-accounts/src/modals/Backup.tsx
View File

@ -6,7 +6,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
import FileSaver from 'file-saver';
import React from 'react';
import { AddressRow, Button, Modal, Password } from '@polkadot/ui-app';
import { AddressRow, Button, Modal, Password, TxComponent } from '@polkadot/ui-app';
import { ActionStatus } from '@polkadot/ui-app/Status/types';
import keyring from '@polkadot/ui-keyring';
@ -22,7 +22,7 @@ type State = {
password: string
};
class Backup extends React.PureComponent<Props, State> {
class Backup extends TxComponent<Props, State> {
state: State = {
isPassValid: false,
password: ''
@ -59,6 +59,7 @@ class Backup extends React.PureComponent<Props, State> {
isPrimary
label={t('Download')}
onClick={this.doBackup}
ref={this.button}
/>
</Button.Group>
</Modal.Actions>
@ -87,6 +88,7 @@ class Backup extends React.PureComponent<Props, State> {
isError={!isPassValid}
label={t('password')}
onChange={this.onChangePass}
onEnter={this.submit}
tabIndex={0}
value={password}
/>

6
packages/app-accounts/src/modals/ChangePass.tsx
View File

@ -5,7 +5,7 @@
import { I18nProps } from '@polkadot/ui-app/types';
import React from 'react';
import { AddressRow, Button, Modal, Password } from '@polkadot/ui-app';
import { AddressRow, Button, Modal, Password, TxComponent } from '@polkadot/ui-app';
import { ActionStatus } from '@polkadot/ui-app/Status/types';
import keyring from '@polkadot/ui-keyring';
@ -23,7 +23,7 @@ type State = {
oldPass: string
};
class ChangePass extends React.PureComponent<Props, State> {
class ChangePass extends TxComponent<Props, State> {
state: State = {
isNewValid: false,
isOldValid: false,
@ -62,6 +62,7 @@ class ChangePass extends React.PureComponent<Props, State> {
isPrimary
label={t('Change')}
onClick={this.doChange}
ref={this.button}
/>
</Button.Group>
</Modal.Actions>
@ -98,6 +99,7 @@ class ChangePass extends React.PureComponent<Props, State> {
isError={!isNewValid}
label={t('your new password')}
onChange={this.onChangeNew}
onEnter={this.submit}
tabIndex={2}
value={newPass}
/>

9
packages/app-address-book/src/Creator.tsx
View File

@ -7,7 +7,7 @@ import { ComponentProps } from './types';
import React from 'react';
import { AddressSummary, Button, Input, InputTags } from '@polkadot/ui-app';
import { AddressSummary, Button, Input, InputTags, TxComponent } from '@polkadot/ui-app';
import { ActionStatus } from '@polkadot/ui-app/Status/types';
import { InputAddress } from '@polkadot/ui-app/InputAddress';
import keyring from '@polkadot/ui-keyring';
@ -26,7 +26,7 @@ type State = {
tags: Array<string>
};
class Creator extends React.PureComponent<Props, State> {
class Creator extends TxComponent<Props, State> {
state: State;
constructor (props: Props) {
@ -69,6 +69,7 @@ class Creator extends React.PureComponent<Props, State> {
isPrimary
onClick={this.onCommit}
label={t('Save')}
ref={this.button}
/>
</Button.Group>
);
@ -88,6 +89,7 @@ class Creator extends React.PureComponent<Props, State> {
isError={!isAddressValid}
label={t('address')}
onChange={this.onChangeAddress}
onEnter={this.submit}
value={address}
/>
</div>
@ -98,6 +100,7 @@ class Creator extends React.PureComponent<Props, State> {
isError={!isNameValid}
label={t('name')}
onChange={this.onChangeName}
onEnter={this.submit}
value={name}
/>
</div>
@ -127,7 +130,7 @@ class Creator extends React.PureComponent<Props, State> {
nextState (newState: State, allowEdit: boolean = false): void {
this.setState(
(prevState: State, props: Props): State => {
(prevState: State): State => {
let { address = prevState.address, name = prevState.name, tags = prevState.tags } = newState;
let isAddressValid = true;
let isAddressExisting = false;

6
packages/app-address-book/src/Editor.tsx
View File

@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
import { ComponentProps } from './types';
import React from 'react';
import { AddressSummary, Button, Input, InputAddress, InputTags } from '@polkadot/ui-app';
import { AddressSummary, Button, Input, InputAddress, InputTags, TxComponent } from '@polkadot/ui-app';
import { ActionStatus } from '@polkadot/ui-app/Status/types';
import keyring from '@polkadot/ui-keyring';
@ -24,7 +24,7 @@ type State = {
tags: Array<string>
};
class Editor extends React.PureComponent<Props, State> {
class Editor extends TxComponent<Props, State> {
state: State;
constructor (props: Props) {
@ -76,6 +76,7 @@ class Editor extends React.PureComponent<Props, State> {
isPrimary
onClick={this.onCommit}
label={t('Save')}
ref={this.button}
/>
</Button.Group>
);
@ -115,6 +116,7 @@ class Editor extends React.PureComponent<Props, State> {
help={t('Name associated with the selected contact. You can change it here. This name will be changed across all the apps.')}
label={t('name')}
onChange={this.onChangeName}
onEnter={this.submit}
value={editedName}
/>
</div>

7
packages/app-contracts/src/Call.tsx
View File

@ -7,7 +7,7 @@ import { ComponentProps } from './types';
import BN from 'bn.js';
import React from 'react';
import { Button, Dropdown, InputAddress, InputBalance, InputNumber, TxButton } from '@polkadot/ui-app';
import { Button, Dropdown, InputAddress, InputBalance, InputNumber, TxButton, TxComponent } from '@polkadot/ui-app';
import { ContractAbi } from '@polkadot/types';
import store from './store';
@ -28,7 +28,7 @@ type State = {
params: Array<any>
};
class Call extends React.PureComponent<Props, State> {
class Call extends TxComponent<Props, State> {
state: State = {
accountId: null,
endowment: new BN(0),
@ -94,6 +94,7 @@ class Call extends React.PureComponent<Props, State> {
/>
<Params
onChange={this.onChangeParams}
onEnter={this.sendTx}
params={
method && contractAbi && contractAbi.messages[method]
? contractAbi.messages[method].args
@ -111,6 +112,7 @@ class Call extends React.PureComponent<Props, State> {
isError={!isGasValid}
label={t('maximum gas allowed')}
onChange={this.onChangeGas}
onEnter={this.sendTx}
/>
<Button.Group>
<TxButton
@ -123,6 +125,7 @@ class Call extends React.PureComponent<Props, State> {
onSuccess={this.toggleBusy}
params={this.constructCall}
tx='contract.call'
ref={this.button}
/>
</Button.Group>
</div>

11
packages/app-contracts/src/Code.tsx
View File

@ -8,7 +8,7 @@ import { ComponentProps } from './types';
import BN from 'bn.js';
import React from 'react';
import { Button, Input, InputAddress, InputFile, InputNumber, TxButton } from '@polkadot/ui-app';
import { Button, Input, InputAddress, InputFile, InputNumber, TxButton, TxComponent } from '@polkadot/ui-app';
import { compactAddLength } from '@polkadot/util';
import { Hash } from '@polkadot/types';
@ -34,7 +34,7 @@ type State = {
wasm?: Uint8Array | null
};
class Deploy extends React.PureComponent<Props, State> {
class Deploy extends TxComponent<Props, State> {
state: State = {
accountId: null,
gasLimit: new BN(0),
@ -105,6 +105,7 @@ class Deploy extends React.PureComponent<Props, State> {
help={t('The maximum amount of gas that can be used by this deployment, if the code requires more, the deployment will fail.')}
label={t('maximum gas allowed')}
onChange={this.onChangeGas}
onEnter={this.sendTx}
/>
<Button.Group>
<TxButton
@ -117,6 +118,7 @@ class Deploy extends React.PureComponent<Props, State> {
onSuccess={this.onSuccess}
params={[gasLimit, wasm]}
tx='contract.putCode'
ref={this.button}
/>
</Button.Group>
</>
@ -136,6 +138,7 @@ class Deploy extends React.PureComponent<Props, State> {
isError={!isCodeValid}
label={t('code hash')}
onChange={this.onChangeHash}
onEnter={this.submit}
value={codeHash}
/>
<ValidateCode
@ -150,6 +153,7 @@ class Deploy extends React.PureComponent<Props, State> {
isPrimary
label={t('Save')}
onClick={this.onSave}
ref={this.button}
/>
</Button.Group>
</>
@ -172,7 +176,7 @@ class Deploy extends React.PureComponent<Props, State> {
private renderInputName () {
const { t } = this.props;
const { isNameValid, name } = this.state;
const { isNameValid, isNew, name } = this.state;
return (
<Input
@ -180,6 +184,7 @@ class Deploy extends React.PureComponent<Props, State> {
isError={!isNameValid}
label={t('code bundle name')}
onChange={this.onChangeName}
onEnter={this[isNew ? 'sendTx' : 'submit']}
value={name}
/>
);

13
packages/app-contracts/src/Instantiate.tsx
View File

@ -8,7 +8,7 @@ import { ComponentProps } from './types';
import BN from 'bn.js';
import React from 'react';
import { Button, Dropdown, Input, InputAddress, InputBalance, InputNumber, TxButton } from '@polkadot/ui-app';
import { Button, Dropdown, Input, InputAddress, InputBalance, InputNumber, TxButton, TxComponent } from '@polkadot/ui-app';
import { AccountId, ContractAbi } from '@polkadot/types';
import ABI from './ABI';
@ -38,7 +38,7 @@ type State = {
params: Array<any>
};
class Create extends React.PureComponent<Props, State> {
class Create extends TxComponent<Props, State> {
state: State = {
accountId: null,
endowment: new BN(0),
@ -147,6 +147,7 @@ class Create extends React.PureComponent<Props, State> {
}
<Params
onChange={this.onChangeParams}
onEnter={this.sendTx}
params={
contractAbi
? contractAbi.deploy.args
@ -158,12 +159,14 @@ class Create extends React.PureComponent<Props, State> {
isError={!isEndowValid}
label={t('endowment')}
onChange={this.onChangeEndowment}
onEnter={this.sendTx}
/>
<InputNumber
help={t('The maximum amount of gas that can be used by this deployment, if the code requires more, the deployment will fail.')}
isError={!isGasValid}
label={t('maximum gas allowed')}
onChange={this.onChangeGas}
onEnter={this.sendTx}
/>
<Button.Group>
<TxButton
@ -176,6 +179,7 @@ class Create extends React.PureComponent<Props, State> {
onSuccess={this.onSuccess}
params={this.constructCall}
tx='contract.create'
ref={this.button}
/>
</Button.Group>
</>
@ -195,6 +199,7 @@ class Create extends React.PureComponent<Props, State> {
isError={!isAddressValid}
label={t('contract address')}
onChange={this.onChangeAddress}
onEnter={this.submit}
value={address}
/>
<ValidateAddr
@ -209,6 +214,7 @@ class Create extends React.PureComponent<Props, State> {
isPrimary
label={t('Save')}
onClick={this.onSave}
ref={this.button}
/>
</Button.Group>
</>
@ -231,7 +237,7 @@ class Create extends React.PureComponent<Props, State> {
private renderInputName () {
const { t } = this.props;
const { isNameValid, name } = this.state;
const { isNameValid, isNew, name } = this.state;
return (
<Input
@ -239,6 +245,7 @@ class Create extends React.PureComponent<Props, State> {
isError={!isNameValid}
label={t('contract name')}
onChange={this.onChangeName}
onEnter={this[isNew ? 'sendTx' : 'submit']}
value={name}
/>
);

5
packages/app-contracts/src/Params.tsx
View File

@ -11,7 +11,8 @@ import { getTypeDef, TypeDef } from '@polkadot/types';
type Props = {
params?: ContractABIArgs,
onChange: (values: Array<any>) => void
onChange: (values: Array<any>) => void,
onEnter?: () => void
};
type State = {
@ -35,6 +36,7 @@ export default class Params extends React.PureComponent<Props, State> {
}
render () {
const { onEnter } = this.props;
const { params } = this.state;
if (!params.length) {
@ -44,6 +46,7 @@ export default class Params extends React.PureComponent<Props, State> {
return (
<UIParams
onChange={this.onChange}
onEnter={onEnter}
params={params}
/>
);

7
packages/app-democracy/src/Propose.tsx
View File

@ -11,7 +11,7 @@ import { RouteComponentProps } from 'react-router';
import { withRouter } from 'react-router-dom';
import { Method, Proposal } from '@polkadot/types';
import { Button, Extrinsic, InputAddress, InputBalance, TxButton } from '@polkadot/ui-app';
import { Button, Extrinsic, InputAddress, InputBalance, TxButton, TxComponent } from '@polkadot/ui-app';
import { withApi, withMulti } from '@polkadot/ui-api';
import translate from './translate';
@ -27,7 +27,7 @@ type State = {
isValid: boolean
};
class Propose extends React.PureComponent<Props, State> {
class Propose extends TxComponent<Props, State> {
state: State = {
method: null,
value: new BN(0),
@ -60,6 +60,7 @@ class Propose extends React.PureComponent<Props, State> {
defaultValue={defaultExtrinsic}
label={t('propose')}
onChange={this.onChangeExtrinsic}
onEnter={this.sendTx}
/>
<InputBalance
className='medium'
@ -67,6 +68,7 @@ class Propose extends React.PureComponent<Props, State> {
help={t('The amount that will be bonded to submit the proposal')}
label={t('value')}
onChange={this.onChangeValue}
onEnter={this.sendTx}
/>
<Button.Group>
<TxButton
@ -79,6 +81,7 @@ class Propose extends React.PureComponent<Props, State> {
...(hasValue ? [value] : [])
]}
onSuccess={this.onSubmitProposal}
ref={this.button}
/>
</Button.Group>
</section>

7
packages/app-explorer/src/Query.tsx
View File

@ -5,7 +5,7 @@
import { I18nProps } from '@polkadot/ui-app/types';
import React from 'react';
import { Button, FilterOverlay, Input } from '@polkadot/ui-app';
import { Button, FilterOverlay, Input, TxComponent } from '@polkadot/ui-app';
import { isHex } from '@polkadot/util';
import translate from './translate';
@ -20,7 +20,7 @@ type State = {
isValid: boolean
};
class Query extends React.PureComponent<Props, State> {
class Query extends TxComponent<Props, State> {
constructor (props: Props) {
super(props);
@ -41,13 +41,14 @@ class Query extends React.PureComponent<Props, State> {
isError={!isValid && value.length !== 0}
placeholder={t('block hash or number to query')}
onChange={this.setHash}
onEnter={this.onQuery}
onEnter={this.submit}
withLabel={false}
>
<Button
icon='play'
isPrimary
onClick={this.onQuery}
ref={this.button}
/>
</Input>
</FilterOverlay>

6
packages/app-extrinsics/src/Selection.tsx
View File

@ -10,7 +10,7 @@ import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
import React from 'react';
import { Method } from '@polkadot/types';
import { Button, Extrinsic, InputAddress, Labelled, TxButton } from '@polkadot/ui-app';
import { Button, Extrinsic, InputAddress, Labelled, TxButton, TxComponent } from '@polkadot/ui-app';
import { withApi, withMulti } from '@polkadot/ui-api';
import { Nonce } from '@polkadot/ui-reactive';
@ -29,7 +29,7 @@ type State = {
accountId: string
};
class Selection extends React.PureComponent<Props, State> {
class Selection extends TxComponent<Props, State> {
state: State = {
isValid: false,
isValidUnsigned: false
@ -76,6 +76,7 @@ class Selection extends React.PureComponent<Props, State> {
defaultValue={defaultExtrinsic}
label={t('submit the following extrinsic')}
onChange={this.onChangeExtrinsic}
onEnter={this.sendTx}
/>
<br></br>
<Button.Group>
@ -92,6 +93,7 @@ class Selection extends React.PureComponent<Props, State> {
isPrimary
label={t('Submit Transaction')}
extrinsic={extrinsic}
ref={this.button}
/>
</Button.Group>
</div>

6
packages/app-js/src/ActionButtons.tsx
View File

@ -6,7 +6,7 @@ import { BareProps, I18nProps } from '@polkadot/ui-app/types';
import React from 'react';
import { Button as SUIB, Popup } from 'semantic-ui-react';
import { Button, Input } from '@polkadot/ui-app';
import { Button, Input, TxComponent } from '@polkadot/ui-app';
import translate from './translate';
@ -27,7 +27,7 @@ type State = {
snippetName: string
};
class ActionButtons extends React.PureComponent<Props, State> {
class ActionButtons extends TxComponent<Props, State> {
state: State = {
isOpen: false,
shareText: this.props.t('Generate link to share code example'),
@ -91,6 +91,7 @@ class ActionButtons extends React.PureComponent<Props, State> {
autoFocus={true}
onBlur={this.onPopupClose}
onChange={this.onChangeName}
onEnter={this.submit}
maxLength={50}
min={1}
placeholder={t('Name your example')}
@ -111,6 +112,7 @@ class ActionButtons extends React.PureComponent<Props, State> {
isCircular
isPositive
onClick={runJs}
ref={this.button}
/>
<Button
icon='close'

6
packages/app-staking/src/Account/Bond.tsx
View File

@ -9,7 +9,7 @@ import { CalculateBalanceProps } from '../types';
import BN from 'bn.js';
import React from 'react';
import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
import { Button, InputAddress, InputBalance, Modal, TxButton, Dropdown } from '@polkadot/ui-app';
import { Button, Dropdown, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/ui-app';
import { withCalls, withApi, withMulti } from '@polkadot/ui-api';
import { calcSignatureLength } from '@polkadot/ui-signer/Checks';
import { ZERO_BALANCE, ZERO_FEES } from '@polkadot/ui-signer/Checks/constants';
@ -41,7 +41,7 @@ const stashOptions = [
const ZERO = new BN(0);
class Bond extends React.PureComponent<Props, State> {
class Bond extends TxComponent<Props, State> {
state: State;
constructor (props: Props) {
@ -105,6 +105,7 @@ class Bond extends React.PureComponent<Props, State> {
label={t('Bond')}
onClick={onClose}
extrinsic={extrinsic}
ref={this.button}
/>
</Button.Group>
</Modal.Actions>
@ -151,6 +152,7 @@ class Bond extends React.PureComponent<Props, State> {
label={t('value bonded')}
maxValue={maxBalance}
onChange={this.onChangeValue}
onEnter={this.sendTx}
withMax
/>
<Dropdown

6
packages/app-staking/src/Account/BondExtra.tsx
View File

@ -8,7 +8,7 @@ import { CalculateBalanceProps } from '../types';
import BN from 'bn.js';
import React from 'react';
import { Button, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/ui-app';
import { Button, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/ui-app';
import { Option, StakingLedger } from '@polkadot/types';
import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
import { withCalls, withApi, withMulti } from '@polkadot/ui-api';
@ -33,7 +33,7 @@ type State = {
const ZERO = new BN(0);
class BondExtra extends React.PureComponent<Props, State> {
class BondExtra extends TxComponent<Props, State> {
state: State = {
extrinsic: null
};
@ -83,6 +83,7 @@ class BondExtra extends React.PureComponent<Props, State> {
label={t('Bond')}
onClick={onClose}
extrinsic={extrinsic}
ref={this.button}
/>
</Button.Group>
</Modal.Actions>
@ -113,6 +114,7 @@ class BondExtra extends React.PureComponent<Props, State> {
label={t('max additional value')}
maxValue={maxBalance}
onChange={this.onChangeValue}
onEnter={this.sendTx}
withMax
/>
</Modal.Content>

6
packages/app-staking/src/Account/Unbond.tsx
View File

@ -8,7 +8,7 @@ import { ApiProps } from '@polkadot/ui-api/types';
import BN from 'bn.js';
import React from 'react';
import { AccountId, Option, StakingLedger } from '@polkadot/types';
import { Button, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/ui-app';
import { Button, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/ui-app';
import { withCalls, withApi, withMulti } from '@polkadot/ui-api';
import translate from '../translate';
@ -25,7 +25,7 @@ type State = {
maxUnbond?: BN
};
class Unbond extends React.PureComponent<Props, State> {
class Unbond extends TxComponent<Props, State> {
state: State = {};
componentDidUpdate (prevProps: Props) {
@ -69,6 +69,7 @@ class Unbond extends React.PureComponent<Props, State> {
onClick={onClose}
params={[maxUnbond]}
tx='staking.unbond'
ref={this.button}
/>
</Button.Group>
</Modal.Actions>
@ -99,6 +100,7 @@ class Unbond extends React.PureComponent<Props, State> {
label={t('unbond amount')}
maxValue={maxBalance}
onChange={this.onChangeValue}
onEnter={this.sendTx}
withMax
/>
</Modal.Content>

7
packages/app-staking/src/Account/Validating.tsx
View File

@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
import BN from 'bn.js';
import React from 'react';
import { ValidatorPrefs } from '@polkadot/types';
import { Button, InputAddress, InputBalance, InputNumber, Modal, TxButton } from '@polkadot/ui-app';
import { Button, InputAddress, InputBalance, InputNumber, Modal, TxButton, TxComponent } from '@polkadot/ui-app';
import translate from '../translate';
@ -24,7 +24,7 @@ type State = {
validatorPayment?: BN
};
class Staking extends React.PureComponent<Props, State> {
class Staking extends TxComponent<Props, State> {
state: State = {
unstakeThreshold: new BN(3),
validatorPayment: new BN(0)
@ -88,6 +88,7 @@ class Staking extends React.PureComponent<Props, State> {
validatorPayment
}]}
tx='staking.validate'
ref={this.button}
/>
</Button.Group>
</Modal.Actions>
@ -123,6 +124,7 @@ class Staking extends React.PureComponent<Props, State> {
help={t('The number of allowed slashes for this validator before being automatically unstaked (maximum of 10 allowed)')}
label={t('unstake threshold')}
onChange={this.onChangeThreshold}
onEnter={this.sendTx}
value={
unstakeThreshold
? unstakeThreshold.toString()
@ -134,6 +136,7 @@ class Staking extends React.PureComponent<Props, State> {
help={t('Reward that validator takes up-front, the remainder is split between themselves and nominators')}
label={t('payment preferences')}
onChange={this.onChangePayment}
onEnter={this.sendTx}
value={
validatorPayment
? validatorPayment.toString()

2
packages/app-storage/src/Query.tsx
View File

@ -84,7 +84,7 @@ class Query extends React.PureComponent<Props, State> {
};
}
static getDerivedStateFromProps ({ value }: Props, prevState: State): State | null {
static getDerivedStateFromProps ({ value }: Props): State | null {
const Component = Query.getCachedComponent(value).Component;
const inputs: Array<React.ReactNode> = isU8a(value.key)
? []

6
packages/app-storage/src/Selection/Modules.tsx
View File

@ -10,7 +10,7 @@ import { ApiProps } from '@polkadot/ui-api/types';
import { ComponentProps } from '../types';
import React from 'react';
import { Button, InputStorage } from '@polkadot/ui-app';
import { Button, InputStorage, TxComponent } from '@polkadot/ui-app';
import Params from '@polkadot/ui-params';
import { withApi, withMulti } from '@polkadot/ui-api';
import { isUndefined } from '@polkadot/util';
@ -26,7 +26,7 @@ type State = {
params: Array<{ type: TypeDef }>
};
class Modules extends React.PureComponent<Props, State> {
class Modules extends TxComponent<Props, State> {
private defaultValue: any;
state: State;
@ -59,6 +59,7 @@ class Modules extends React.PureComponent<Props, State> {
<Params
key={`${section}.${method}:params` /* force re-render on change */}
onChange={this.onChangeParams}
onEnter={this.submit}
params={params}
/>
</div>
@ -68,6 +69,7 @@ class Modules extends React.PureComponent<Props, State> {
isDisabled={!isValid}
isPrimary
onClick={this.onAdd}
ref={this.button}
/>
</div>
</section>

6
packages/app-storage/src/Selection/Raw.tsx
View File

@ -6,7 +6,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
import { ComponentProps } from '../types';
import React from 'react';
import { Button, Input } from '@polkadot/ui-app';
import { Button, Input, TxComponent } from '@polkadot/ui-app';
import translate from '../translate';
import { u8aToU8a } from '@polkadot/util';
@ -19,7 +19,7 @@ type State = {
key: Uint8Array
};
class Raw extends React.PureComponent<Props, State> {
class Raw extends TxComponent<Props, State> {
state: State = {
isValid: false,
key: new Uint8Array([])
@ -36,6 +36,7 @@ class Raw extends React.PureComponent<Props, State> {
autoFocus
label={t('hex-encoded storage key')}
onChange={this.onChangeKey}
onEnter={this.submit}
/>
</div>
<div className='storage--actionrow-buttons'>
@ -44,6 +45,7 @@ class Raw extends React.PureComponent<Props, State> {
isDisabled={!isValid}
isPrimary
onClick={this.onAdd}
ref={this.button}
/>
</div>
</section>

6
packages/app-sudo/src/Sudo.tsx
View File

@ -8,7 +8,7 @@ import { ComponentProps } from './types';
import React from 'react';
import { Method, Proposal } from '@polkadot/types';
import { Button, Icon, Extrinsic, TxButton } from '@polkadot/ui-app';
import { Button, Icon, Extrinsic, TxButton, TxComponent } from '@polkadot/ui-app';
import { withApi, withMulti } from '@polkadot/ui-api';
import translate from './translate';
@ -22,7 +22,7 @@ type State = {
isValid: boolean
};
class Propose extends React.PureComponent<Props> {
class Propose extends TxComponent<Props, State> {
state: State = {
method: null,
isValid: false
@ -46,6 +46,7 @@ class Propose extends React.PureComponent<Props> {
defaultValue={defaultExtrinsic}
label={t('submit the following change')}
onChange={this.onChangeExtrinsic}
onEnter={this.sendTx}
/>
<br />
<Button.Group>
@ -55,6 +56,7 @@ class Propose extends React.PureComponent<Props> {
tx='sudo.sudo'
isDisabled={!method || !isValid}
params={method ? [new Proposal(method)] : []}
ref={this.button}
/>
</Button.Group>
</section>

6
packages/app-toolbox/src/Rpc/Selection.tsx
View File

@ -10,7 +10,7 @@ import { QueueTx$RpcAdd } from '@polkadot/ui-app/Status/types';
import React from 'react';
import rpc from '@polkadot/jsonrpc';
import { getTypeDef } from '@polkadot/types';
import { Button, InputRpc } from '@polkadot/ui-app';
import { Button, InputRpc, TxComponent } from '@polkadot/ui-app';
import Params from '@polkadot/ui-params';
import translate from './translate';
@ -28,7 +28,7 @@ type State = {
const defaultMethod = rpc.author.methods.submitExtrinsic;
class Selection extends React.PureComponent<Props, State> {
class Selection extends TxComponent<Props, State> {
state: State = {
isValid: false,
accountId: null,
@ -55,6 +55,7 @@ class Selection extends React.PureComponent<Props, State> {
<Params
key={`${rpc.section}.${rpc.method}:params` /* force re-render on change */}
onChange={this.onChangeValues}
onEnter={this.submit}
params={params}
/>
<Button.Group>
@ -63,6 +64,7 @@ class Selection extends React.PureComponent<Props, State> {
isPrimary
onClick={this.onSubmit}
label={t('Submit RPC call')}
ref={this.button}
/>
</Button.Group>
</section>

8
packages/app-toolbox/src/Unlock.tsx
View File

@ -6,7 +6,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
import { KeyringPair } from '@polkadot/keyring/types';
import React from 'react';
import { AddressRow, Button, Modal, Password } from '@polkadot/ui-app';
import { AddressRow, Button, Modal, Password, TxComponent } from '@polkadot/ui-app';
import translate from './translate';
@ -21,14 +21,14 @@ type State = {
unlockError: string | null
};
class Unlock extends React.PureComponent<Props, State> {
class Unlock extends TxComponent<Props, State> {
state: State = {
address: '',
password: '',
unlockError: null
};
static getDerivedStateFromProps ({ pair }: Props, prevState: State): State {
static getDerivedStateFromProps ({ pair }: Props): State {
return {
address: pair
? pair.address()
@ -74,6 +74,7 @@ class Unlock extends React.PureComponent<Props, State> {
isPrimary
onClick={this.onUnlock}
label={t('Unlock')}
ref={this.button}
/>
</Button.Group>
</Modal.Actions>
@ -98,6 +99,7 @@ class Unlock extends React.PureComponent<Props, State> {
help={t('The account\'s password specified at the creation of this account.')}
label={t('password')}
onChange={this.onChangePassword}
onEnter={this.submit}
value={password}
/>
</div>

47
packages/app-transfer/src/Submit.tsx
View File

@ -1,47 +0,0 @@
// Copyright 2017-2019 @polkadot/app-transfer 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 { IExtrinsic } from '@polkadot/types/types';
import { I18nProps } from '@polkadot/ui-app/types';
import React from 'react';
import { Index } from '@polkadot/types';
import { Button, TxButton } from '@polkadot/ui-app';
import { withCalls, withMulti } from '@polkadot/ui-api';
import translate from './translate';
type Props = I18nProps & {
isDisabled: boolean,
accountId?: string,
system_accountNonce?: Index,
extrinsic: IExtrinsic | null
};
class Submit extends React.PureComponent<Props> {
render () {
const { accountId, system_accountNonce, extrinsic, isDisabled, t } = this.props;
return (
<Button.Group>
<TxButton
accountId={accountId}
accountNonce={system_accountNonce}
isDisabled={isDisabled}
isPrimary
label={t('Make Transfer')}
extrinsic={extrinsic}
/>
</Button.Group>
);
}
}
export default withMulti(
Submit,
translate,
withCalls<Props>(
['query.system.accountNonce', { paramName: 'accountId' }]
)
);

24
packages/app-transfer/src/Transfer.tsx
View File

@ -10,19 +10,17 @@ import BN from 'bn.js';
import React from 'react';
import styled from 'styled-components';
import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
import { AddressSummary, InputAddress, InputBalance } from '@polkadot/ui-app';
import { AddressSummary, Button, InputAddress, InputBalance, TxButton, TxComponent } from '@polkadot/ui-app';
import { withApi, withCalls, withMulti } from '@polkadot/ui-api';
import keyring from '@polkadot/ui-keyring';
import Checks, { calcSignatureLength } from '@polkadot/ui-signer/Checks';
import { ZERO_FEES } from '@polkadot/ui-signer/Checks/constants';
import Submit from './Submit';
import translate from './translate';
type Props = I18nProps & ApiProps & {
balances_fees?: DerivedFees,
balances_votingBalance?: DerivedBalances,
system_accountNonce?: BN
balances_votingBalance?: DerivedBalances
};
type State = {
@ -56,7 +54,7 @@ const Wrapper = styled.div`
}
`;
class Transfer extends React.PureComponent<Props, State> {
class Transfer extends TxComponent<Props, State> {
state: State = {
accountId: null,
amount: ZERO,
@ -109,6 +107,7 @@ class Transfer extends React.PureComponent<Props, State> {
label={t('amount')}
maxValue={maxBalance}
onChange={this.onChangeAmount}
onEnter={this.sendTx}
withMax
/>
<Checks
@ -117,11 +116,16 @@ class Transfer extends React.PureComponent<Props, State> {
isSendable
onChange={this.onChangeFees}
/>
<Submit
accountId={accountId}
isDisabled={!hasAvailable}
extrinsic={extrinsic}
/>
<Button.Group>
<TxButton
accountId={accountId}
isDisabled={!hasAvailable}
isPrimary
label={t('Make Transfer')}
extrinsic={extrinsic}
ref={this.button}
/>
</Button.Group>
</div>
{this.renderAddress(recipientId, 'large')}
</div>

3
packages/ui-api/src/with/api.tsx
View File

@ -12,6 +12,8 @@ import { ApiConsumer } from '../ApiContext';
export default function withApi <P extends ApiProps> (Inner: React.ComponentType<P>, defaultProps: DefaultProps = {}): React.ComponentType<any> {
return class WithApi extends React.PureComponent<Subtract<P, ApiProps>> {
component: any = React.createRef();
render () {
return (
<ApiConsumer>
@ -24,6 +26,7 @@ export default function withApi <P extends ApiProps> (Inner: React.ComponentType
{...defaultProps}
{...apiProps}
{...this.props}
ref={this.component}
/>
);
}}

7
packages/ui-app/src/Button/Button.tsx
View File

@ -41,4 +41,11 @@ export default class Button extends React.PureComponent<ButtonProps> {
</SUIButton>
);
}
click = () => {
const { onClick } = this.props;
if (onClick) {
onClick();
}
}
}

8
packages/ui-app/src/Button/index.tsx
View File

@ -11,8 +11,8 @@ import Divider from './Divider';
import Group from './Group';
import Or from './Or';
(Button as ButtonType).Divider = Divider;
(Button as ButtonType).Group = Group;
(Button as ButtonType).Or = Or;
(Button as any as ButtonType).Divider = Divider;
(Button as any as ButtonType).Group = Group;
(Button as any as ButtonType).Or = Or;
export default (Button as ButtonType);
export default (Button as any as ButtonType);

1
packages/ui-app/src/Button/types.ts
View File

@ -19,6 +19,7 @@ export type ButtonProps = BareProps & {
isPrimary?: boolean,
label?: React.ReactNode,
onClick?: () => void | Promise<void>,
ref?: any,
size?: Button$Sizes,
tabIndex?: number
};

4
packages/ui-app/src/Extrinsic.tsx
View File

@ -24,6 +24,7 @@ type Props = BareProps & ApiProps & {
isPrivate?: boolean,
label?: React.ReactNode,
onChange: (method?: Method) => void,
onEnter: () => void,
withLabel?: boolean
};
@ -47,7 +48,7 @@ class ExtrinsicDisplay extends React.PureComponent<Props, State> {
}
render () {
const { defaultValue, isDisabled, isError, isPrivate, label, withLabel } = this.props;
const { defaultValue, isDisabled, isError, isPrivate, label, onEnter, withLabel } = this.props;
const { methodfn: { method, section }, params } = this.state;
return (
@ -64,6 +65,7 @@ class ExtrinsicDisplay extends React.PureComponent<Props, State> {
<Params
key={`${section}.${method}:params` /* force re-render on change */}
onChange={this.onChangeValues}
onEnter={onEnter}
overrides={paramComponents}
params={params}
/>

1
packages/ui-app/src/Input.tsx
View File

@ -191,6 +191,7 @@ export default class Input extends React.PureComponent<Props, State> {
}
if (onEnter && event.keyCode === 13) {
(event.target as any).blur();
onEnter();
}
}

4
packages/ui-app/src/InputBalance.tsx
View File

@ -18,6 +18,7 @@ type Props = BareProps & {
label?: any,
maxValue?: BN,
onChange?: (value?: BN) => void,
onEnter?: () => void,
placeholder?: string,
value?: BN | string,
withEllipsis?: boolean,
@ -29,7 +30,7 @@ const DEFAULT_BITLENGTH = BitLengthOption.CHAIN_SPEC as BitLength;
export default class InputBalance extends React.PureComponent<Props> {
render () {
const { autoFocus, className, defaultValue, help, isDisabled, isError, label, maxValue, onChange, placeholder, style, value, withEllipsis, withLabel, withMax } = this.props;
const { autoFocus, className, defaultValue, help, isDisabled, isError, label, maxValue, onChange, onEnter, placeholder, style, value, withEllipsis, withLabel, withMax } = this.props;
return (
<InputNumber
@ -44,6 +45,7 @@ export default class InputBalance extends React.PureComponent<Props> {
label={label}
maxValue={maxValue}
onChange={onChange}
onEnter={onEnter}
placeholder={placeholder}
style={style}
value={value}

4
packages/ui-app/src/InputNumber.tsx
View File

@ -28,6 +28,7 @@ type Props = BareProps & I18nProps & {
maxLength?: number,
maxValue?: BN,
onChange?: (value?: BN) => void,
onEnter?: () => void,
placeholder?: string,
value?: BN | string,
withEllipsis?: boolean,
@ -90,7 +91,7 @@ class InputNumber extends React.PureComponent<Props, State> {
}
render () {
const { bitLength = DEFAULT_BITLENGTH, className, help, isSi, isDisabled, isError = false, maxLength, maxValue, style, withMax, t } = this.props;
const { bitLength = DEFAULT_BITLENGTH, className, help, isSi, isDisabled, isError = false, maxLength, maxValue, onEnter, style, withMax, t } = this.props;
const { isValid, value } = this.state;
const maxValueLength = this.maxValue(bitLength).toString().length - 1;
@ -104,6 +105,7 @@ class InputNumber extends React.PureComponent<Props, State> {
isError={!isValid || isError}
maxLength={maxLength || maxValueLength}
onChange={this.onChange}
onEnter={onEnter}
onKeyDown={this.onKeyDown}
onKeyUp={this.onKeyUp}
onPaste={this.onPaste}

3
packages/ui-app/src/Params/Call.tsx
View File

@ -14,7 +14,7 @@ type Props = ApiProps & BaseProps;
class Call extends React.PureComponent<Props> {
render () {
const { apiDefaultTx, api, className, isDisabled, isError, label, onChange, style, withLabel } = this.props;
const { apiDefaultTx, api, className, isDisabled, isError, label, onChange, onEnter, style, withLabel } = this.props;
const defaultValue = (() => {
try {
return api.tx.balances.transfer;
@ -32,6 +32,7 @@ class Call extends React.PureComponent<Props> {
isPrivate={false}
label={label}
onChange={onChange}
onEnter={onEnter}
style={style}
withLabel={withLabel}
/>

6
packages/ui-app/src/Params/Extrinsic.tsx
View File

@ -4,7 +4,7 @@
import { MethodFunction } from '@polkadot/types/primitive/Method';
import { I18nProps } from '@polkadot/ui-app/types';
import { RawParam$OnChange } from '@polkadot/ui-params/types';
import { RawParam$OnChange, RawParam$OnEnter } from '@polkadot/ui-params/types';
import React from 'react';
import { Method } from '@polkadot/types';
@ -19,12 +19,13 @@ type Props = I18nProps & {
isPrivate: boolean,
label: string,
onChange?: RawParam$OnChange,
onEnter?: RawParam$OnEnter,
withLabel?: boolean
};
class ExtrinsicDisplay extends React.PureComponent<Props> {
render () {
const { className, defaultValue, isDisabled, isError, isPrivate, label, style, t, withLabel } = this.props;
const { className, defaultValue, isDisabled, isError, isPrivate, label, onEnter, style, t, withLabel } = this.props;
return (
<BaseExtrinsic
@ -39,6 +40,7 @@ class ExtrinsicDisplay extends React.PureComponent<Props> {
}
})}
onChange={this.onChange}
onEnter={onEnter}
style={style}
withLabel={withLabel}
/>

3
packages/ui-app/src/Params/Proposal.tsx
View File

@ -15,7 +15,7 @@ type Props = ApiProps & BaseProps;
class ProposalDisplay extends React.PureComponent<Props> {
render () {
const { apiDefaultTx, api, className, isDisabled, isError, label, style, withLabel } = this.props;
const { apiDefaultTx, api, className, isDisabled, isError, label, onEnter, style, withLabel } = this.props;
const defaultValue = (() => {
try {
return api.tx.consensus.setCode;
@ -33,6 +33,7 @@ class ProposalDisplay extends React.PureComponent<Props> {
isPrivate
label={label}
onChange={this.onChange}
onEnter={onEnter}
style={style}
withLabel={withLabel}
/>

6
packages/ui-app/src/Password.tsx
View File

@ -21,7 +21,7 @@ type Props = BareProps & {
label?: string,
name?: string,
onChange: (value: string) => void,
onKeyDown?: (event: React.KeyboardEvent<Element>) => void,
onEnter?: () => void,
tabIndex?: number,
value: any,
withLabel?: boolean
@ -37,7 +37,7 @@ export default class Password extends React.PureComponent<Props, State> {
};
render () {
const { autoFocus, children, className, defaultValue, help, isDisabled, isError, label, name, onChange, onKeyDown, style, tabIndex, value, withLabel } = this.props;
const { autoFocus, children, className, defaultValue, help, isDisabled, isError, label, name, onChange, onEnter, style, tabIndex, value, withLabel } = this.props;
const { isVisible } = this.state;
return (
@ -53,7 +53,7 @@ export default class Password extends React.PureComponent<Props, State> {
maxLength={MAX_PASS_LEN}
name={name}
onChange={onChange}
onKeyDown={onKeyDown}
onEnter={onEnter}
style={style}
tabIndex={tabIndex}
type={

9
packages/ui-app/src/TxButton.tsx
View File

@ -78,7 +78,7 @@ class TxButtonInner extends React.PureComponent<InnerProps> {
);
}
private send = (): void => {
send = (): void => {
const { accountId, api, isUnsigned, onClick, onUpdate, params = [], queueExtrinsic, tx = '', extrinsic: propsExtrinsic } = this.props;
let extrinsic: any;
@ -130,6 +130,8 @@ class TxButtonInner extends React.PureComponent<InnerProps> {
}
class TxButton extends React.PureComponent<Props> {
button: any = React.createRef();
render () {
return (
<QueueConsumer>
@ -138,11 +140,16 @@ class TxButton extends React.PureComponent<Props> {
{...this.props}
queueExtrinsic={queueExtrinsic}
txqueue={txqueue}
ref={this.button}
/>
)}
</QueueConsumer>
);
}
send = () => {
this.button.current.send();
}
}
export default withApi(TxButton);

27
packages/ui-app/src/TxComponent.tsx Normal file
View File

@ -0,0 +1,27 @@
// Copyright 2017-2019 @polkadot/app-transfer 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 React from 'react';
export default class TxComponent<P, S> extends React.PureComponent<P, S> {
button: any;
constructor (props: P) {
super(props);
this.button = React.createRef();
}
sendTx = (): void => {
const { component } = this.button.current;
if (component) {
component.current.send();
}
}
submit = (): void => {
if (this.button && this.button.current && this.button.current.click) {
this.button.current.click();
}
}
}

1
packages/ui-app/src/index.tsx
View File

@ -49,5 +49,6 @@ export { default as Tabs } from './Tabs';
export { default as Tooltip } from './Tooltip';
export { default as TxButton } from './TxButton';
export { default as Unlocking } from './Unlocking';
export { default as TxComponent } from './TxComponent';
export { default as media } from './media';

3
packages/ui-params/src/Param/Amount.tsx
View File

@ -14,7 +14,7 @@ import Bare from './Bare';
export default class Amount extends React.PureComponent<Props> {
render () {
const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = this.props;
const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = this.props;
const defaultValue = isDisabled
? (
value instanceof AccountIndex
@ -36,6 +36,7 @@ export default class Amount extends React.PureComponent<Props> {
label={label}
min={0}
onChange={this.onChange}
onEnter={onEnter}
type={
isDisabled
? 'text'

3
packages/ui-params/src/Param/Balance.tsx
View File

@ -14,7 +14,7 @@ type Props = BareProps;
class Balance extends React.PureComponent<Props> {
render () {
const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = this.props;
const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = this.props;
const defaultValue = new BN((value as BN || '0').toString()).toString(10);
return (
@ -30,6 +30,7 @@ class Balance extends React.PureComponent<Props> {
label={label}
onChange={this.onChange}
withEllipsis
onEnter={onEnter}
withLabel={withLabel}
/>
</Bare>

5
packages/ui-params/src/Param/BaseBytes.tsx
View File

@ -19,12 +19,12 @@ type Props = BaseProps & {
withLength?: boolean
};
const defaultValidate = (u8a: Uint8Array): boolean =>
const defaultValidate = (): boolean =>
true;
export default class BaseBytes extends React.PureComponent<Props> {
render () {
const { children, className, defaultValue: { value }, isDisabled, isError, label, size = 'full', style, withLabel } = this.props;
const { children, className, defaultValue: { value }, isDisabled, isError, label, onEnter, size = 'full', style, withLabel } = this.props;
const defaultValue = value
? (
isHex(value)
@ -46,6 +46,7 @@ export default class BaseBytes extends React.PureComponent<Props> {
isError={isError}
label={label}
onChange={this.onChange}
onEnter={onEnter}
placeholder='0x...'
type='text'
withEllipsis

3
packages/ui-params/src/Param/Bytes.tsx
View File

@ -30,7 +30,7 @@ export default class Bytes extends React.PureComponent<Props, State> {
}
private renderInput () {
const { className, defaultValue, isDisabled, isError, label, name, onChange, style, type, withLabel } = this.props;
const { className, defaultValue, isDisabled, isError, label, name, onChange, onEnter, style, type, withLabel } = this.props;
return (
<BaseBytes
@ -42,6 +42,7 @@ export default class Bytes extends React.PureComponent<Props, State> {
length={-1}
name={name}
onChange={onChange}
onEnter={onEnter}
size='full'
style={style}
type={type}

3
packages/ui-params/src/Param/Code.tsx
View File

@ -31,7 +31,7 @@ export default class Code extends React.PureComponent<Props> {
}
private renderDisabled () {
const { className, defaultValue, isError, label, style, type, withLabel } = this.props;
const { className, defaultValue, isError, label, onEnter, style, type, withLabel } = this.props;
return (
<Bytes
@ -39,6 +39,7 @@ export default class Code extends React.PureComponent<Props> {
defaultValue={defaultValue}
isError={isError}
label={label}
onEnter={onEnter}
style={style}
type={type}
withLabel={withLabel}

3
packages/ui-params/src/Param/Hash.tsx
View File

@ -10,7 +10,7 @@ import BaseBytes from './BaseBytes';
export default class Hash extends React.PureComponent<Props> {
render () {
const { className, defaultValue, isDisabled, isError, label, name, onChange, style, type, withLabel } = this.props;
const { className, defaultValue, isDisabled, isError, label, name, onChange, onEnter, style, type, withLabel } = this.props;
return (
<BaseBytes
@ -22,6 +22,7 @@ export default class Hash extends React.PureComponent<Props> {
length={32}
name={name}
onChange={onChange}
onEnter={onEnter}
size={isDisabled ? 'full' : 'large'}
style={style}
type={type}

3
packages/ui-params/src/Param/KeyValue.tsx
View File

@ -34,7 +34,7 @@ export default class KeyValue extends React.PureComponent<Props, State> {
};
render () {
const { className, isDisabled, label, style, withLabel } = this.props;
const { className, isDisabled, label, onEnter, style, withLabel } = this.props;
const { key, value } = this.state;
return (
@ -57,6 +57,7 @@ export default class KeyValue extends React.PureComponent<Props, State> {
isDisabled={isDisabled}
isError={!value.isValid}
onChange={this.onChangeValue}
onEnter={onEnter}
placeholder='0x...'
type='text'
withLabel={withLabel}

3
packages/ui-params/src/Param/KeyValueArray.tsx
View File

@ -69,7 +69,7 @@ class KeyValueArray extends React.PureComponent<Props, State> {
}
private renderReadOnly () {
const { className, defaultValue: { value }, label, style } = this.props;
const { className, defaultValue: { value }, label, onEnter, style } = this.props;
const pairs = value as Vector<Pair>;
return (
@ -93,6 +93,7 @@ class KeyValueArray extends React.PureComponent<Props, State> {
key={keyHex}
label={keyHex}
name={keyHex}
onEnter={onEnter}
type={BYTES_TYPE}
/>
);

3
packages/ui-params/src/Param/Moment.tsx
View File

@ -11,7 +11,7 @@ import Amount from './Amount';
export default class Code extends React.PureComponent<Props> {
render () {
const { className, defaultValue, isDisabled, isError, label, style, type, withLabel } = this.props;
const { className, defaultValue, isDisabled, isError, label, onEnter, style, type, withLabel } = this.props;
if (isDisabled) {
return this.renderDisabled();
@ -25,6 +25,7 @@ export default class Code extends React.PureComponent<Props> {
isError={isError}
label={label}
onChange={this.onChange}
onEnter={onEnter}
style={style}
type={type}
withLabel={withLabel}

3
packages/ui-params/src/Param/Text.tsx
View File

@ -11,7 +11,7 @@ import Bare from './Bare';
export default class Text extends React.PureComponent<Props> {
render () {
const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = this.props;
const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = this.props;
const defaultValue = (value || '').toString();
return (
@ -26,6 +26,7 @@ export default class Text extends React.PureComponent<Props> {
isError={isError}
label={label}
onChange={this.onChange}
onEnter={onEnter}
placeholder='<any string>'
type='text'
withLabel={withLabel}

3
packages/ui-params/src/Param/Tuple.tsx
View File

@ -54,7 +54,7 @@ export default class Tuple extends React.PureComponent<Props, State> {
}
render () {
const { className, isDisabled, style, withLabel } = this.props;
const { className, isDisabled, onEnter, style, withLabel } = this.props;
const { Components, sub, subTypes, values } = this.state;
return (
@ -69,6 +69,7 @@ export default class Tuple extends React.PureComponent<Props, State> {
key={index}
label={sub[index]}
onChange={this.onChange(index)}
onEnter={onEnter}
type={subTypes[index]}
withLabel={withLabel}
/>

3
packages/ui-params/src/Param/Unknown.tsx
View File

@ -19,7 +19,7 @@ type Props = BareProps & WithTranslation & {
class Unknown extends React.PureComponent<Props> {
render () {
const { className, defaultValue, isDisabled, isError, label, name, onChange, style, t, type } = this.props;
const { className, defaultValue, isDisabled, isError, label, name, onChange, onEnter, style, t, type } = this.props;
if (isDisabled) {
const value = defaultValue && defaultValue.value && defaultValue.value.toString();
@ -48,6 +48,7 @@ class Unknown extends React.PureComponent<Props> {
length={-1}
name={name}
onChange={onChange}
onEnter={onEnter}
size='full'
style={style}
type={type}

3
packages/ui-params/src/Param/Vector.tsx
View File

@ -53,7 +53,7 @@ class Vector extends React.PureComponent<Props, State> {
}
render () {
const { className, isDisabled, style, type, withLabel } = this.props;
const { className, isDisabled, onEnter, style, type, withLabel } = this.props;
const { Component, values } = this.state;
const subType = type.sub as TypeDef;
@ -73,6 +73,7 @@ class Vector extends React.PureComponent<Props, State> {
key={index}
label={`${index}: ${subType.type}`}
onChange={this.onChange(index)}
onEnter={onEnter}
type={subType}
withLabel={withLabel}
/>

3
packages/ui-params/src/Param/index.tsx
View File

@ -41,7 +41,7 @@ class ParamComponent extends React.PureComponent<Props, State> {
return null;
}
const { className, defaultValue, isDisabled, name, onChange, style, type } = this.props;
const { className, defaultValue, isDisabled, name, onChange, onEnter, style, type } = this.props;
return (
<Component
@ -56,6 +56,7 @@ class ParamComponent extends React.PureComponent<Props, State> {
}
name={name}
onChange={onChange}
onEnter={onEnter}
style={style}
type={type}
/>

8
packages/ui-params/src/index.tsx
View File

@ -23,6 +23,7 @@ type Param = {
type Props = I18nProps & {
isDisabled?: boolean,
onChange?: (value: RawParams) => void,
onEnter?: () => void,
overrides?: ComponentMap,
params: Array<Param>,
values?: RawParams
@ -55,7 +56,7 @@ class Params extends React.PureComponent<Props, State> {
const values = createValues(props.params);
const handlers = values.map(
(value, index): RawParam$OnChange =>
(_, index): RawParam$OnChange =>
(value: RawParam$OnChange$Value): void =>
onChangeParam(index, value)
);
@ -74,7 +75,7 @@ class Params extends React.PureComponent<Props, State> {
// This is needed in the case where the item changes, i.e. the values get
// initialised and we need to alert the parent that we have new values
componentDidUpdate (prevProps: Props, prevState: State) {
componentDidUpdate (_: Props, prevState: State) {
const { onChange, isDisabled } = this.props;
const { values } = this.state;
@ -84,7 +85,7 @@ class Params extends React.PureComponent<Props, State> {
}
render () {
const { className, isDisabled, overrides, params, style } = this.props;
const { className, isDisabled, onEnter, overrides, params, style } = this.props;
const { handlers = [], values = this.props.values } = this.state;
if (!params || params.length === 0 || !values || values.length === 0) {
@ -104,6 +105,7 @@ class Params extends React.PureComponent<Props, State> {
key={`${name}:${name}:${index}`}
name={name}
onChange={handlers[index]}
onEnter={onEnter}
overrides={overrides}
type={type}
/>

2
packages/ui-params/src/types.ts
View File

@ -20,6 +20,7 @@ export type RawParam = {
export type RawParam$OnChange$Value = { isValid: boolean, value: RawParam$Values };
export type RawParam$OnChange = (value: RawParam$OnChange$Value) => void;
export type RawParam$OnEnter = () => void;
export type RawParams = Array<RawParam>;
@ -27,6 +28,7 @@ export type BaseProps = BareProps & {
defaultValue: RawParam,
name?: string,
onChange?: RawParam$OnChange,
onEnter?: RawParam$OnEnter,
type: TypeDef
};

7
packages/ui-signer/src/Modal.tsx
View File

@ -180,7 +180,6 @@ class Signer extends React.PureComponent<Props, State> {
autoFocus
error={unlockError || undefined}
onChange={this.onChangePassword}
onKeyDown={this.onKeyDown}
password={password}
value={currentItem.accountId}
tabIndex={1}
@ -223,12 +222,6 @@ class Signer extends React.PureComponent<Props, State> {
});
}
private onKeyDown = async (event: React.KeyboardEvent<Element>) => {
if (event.key === 'Enter') {
await this.onSend();
}
}
private onCancel = (): void => {
const { queueSetTxStatus } = this.props;
const { currentItem } = this.state;

6
packages/ui-signer/src/Unlock.tsx
View File

@ -15,7 +15,7 @@ type Props = I18nProps & {
autoFocus?: boolean,
error?: string,
onChange: (password: string) => void,
onKeyDown?: (event: React.KeyboardEvent<Element>) => void,
onEnter?: () => void,
password: string,
tabIndex?: number,
value?: string | null
@ -52,7 +52,7 @@ class Unlock extends React.PureComponent<Props, State> {
}
render () {
const { autoFocus, onChange, onKeyDown, password, t, tabIndex } = this.props;
const { autoFocus, onChange, onEnter, password, t, tabIndex } = this.props;
const { isError, isInjected, isLocked } = this.state;
if (isInjected || !isLocked) {
@ -66,7 +66,7 @@ class Unlock extends React.PureComponent<Props, State> {
isError={isError}
label={t('unlock account with password')}
onChange={onChange}
onKeyDown={onKeyDown}
onEnter={onEnter}
tabIndex={tabIndex}
value={password}
/>

0
packages/ui-signer/src/util.ts
View File