useCallback in Extrinsic & Proposal components (#2501)
This commit is contained in:
parent
e3e68342ed
commit
82d53d1af3
@ -7,7 +7,7 @@ import { BareProps } from '@polkadot/react-components/types';
|
||||
import { RawParam } from '@polkadot/react-params/types';
|
||||
import { TypeDef } from '@polkadot/types/types';
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { GenericCall, getTypeDef } from '@polkadot/types';
|
||||
import { InputExtrinsic } from '@polkadot/react-components';
|
||||
import Params from '@polkadot/react-params';
|
||||
@ -63,7 +63,10 @@ function ExtrinsicDisplay ({ defaultValue, isDisabled, isError, isPrivate, label
|
||||
onChange(method);
|
||||
}, [extrinsic, onChange, values]);
|
||||
|
||||
const _onChangeMethod = (fn: SubmittableExtrinsicFunction<'promise'>): void => setCall({ fn, params: getParams(fn) });
|
||||
const _onChangeMethod = useCallback(
|
||||
(fn: SubmittableExtrinsicFunction<'promise'>): void => setCall({ fn, params: getParams(fn) }),
|
||||
[]
|
||||
);
|
||||
|
||||
const { fn: { meta, method, section }, params } = extrinsic;
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ import { SubmittableExtrinsic, SubmittableExtrinsicFunction } from '@polkadot/ap
|
||||
import { RawParamOnChange, RawParamOnEnter, RawParamOnEscape } from '@polkadot/react-params/types';
|
||||
import { BareProps } from '../types';
|
||||
|
||||
import React from 'react';
|
||||
import React, { useCallback } from 'react';
|
||||
|
||||
import BaseExtrinsic from '../Extrinsic';
|
||||
|
||||
@ -22,17 +22,15 @@ interface Props extends BareProps {
|
||||
withLabel?: boolean;
|
||||
}
|
||||
|
||||
function onChange ({ onChange }: Props): (method?: SubmittableExtrinsic<'promise'>) => void {
|
||||
return (method?: SubmittableExtrinsic<'promise'>): void => {
|
||||
onChange && onChange({
|
||||
isValid: !!method,
|
||||
value: method
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function ExtrinsicDisplay (props: Props): React.ReactElement<Props> {
|
||||
const { className, defaultValue, isDisabled, isError, isPrivate, label, onEnter, onEscape, style, withLabel } = props;
|
||||
function ExtrinsicDisplay ({ className, defaultValue, isDisabled, isError, isPrivate, label, onChange, onEnter, onEscape, style, withLabel }: Props): React.ReactElement<Props> {
|
||||
const _onChange = useCallback(
|
||||
(method?: SubmittableExtrinsic<'promise'>): void =>
|
||||
onChange && onChange({
|
||||
isValid: !!method,
|
||||
value: method
|
||||
}),
|
||||
[onChange]
|
||||
);
|
||||
|
||||
return (
|
||||
<BaseExtrinsic
|
||||
@ -42,7 +40,7 @@ function ExtrinsicDisplay (props: Props): React.ReactElement<Props> {
|
||||
isError={isError}
|
||||
isPrivate={isPrivate}
|
||||
label={label}
|
||||
onChange={onChange(props)}
|
||||
onChange={_onChange}
|
||||
onEnter={onEnter}
|
||||
onEscape={onEscape}
|
||||
style={style}
|
||||
|
||||
@ -4,31 +4,29 @@
|
||||
|
||||
import { Props, RawParam } from '@polkadot/react-params/types';
|
||||
|
||||
import React from 'react';
|
||||
import { createType } from '@polkadot/types';
|
||||
import React, { useCallback } from 'react';
|
||||
import { registry } from '@polkadot/react-api';
|
||||
import { useApi } from '@polkadot/react-hooks';
|
||||
|
||||
import ExtrinsicDisplay from './Extrinsic';
|
||||
|
||||
function onChange ({ onChange }: Props): (_: RawParam) => void {
|
||||
return function ({ isValid, value }: RawParam): void {
|
||||
let proposal = null;
|
||||
|
||||
if (isValid && value) {
|
||||
proposal = createType(registry, 'Proposal', value);
|
||||
}
|
||||
|
||||
onChange && onChange({
|
||||
isValid,
|
||||
value: proposal
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function ProposalDisplay (props: Props): React.ReactElement<Props> {
|
||||
function ProposalDisplay ({ className, isDisabled, isError, label, onChange, onEnter, onEscape, style, withLabel }: Props): React.ReactElement<Props> {
|
||||
const { apiDefaultTxSudo } = useApi();
|
||||
const { className, isDisabled, isError, label, onEnter, onEscape, style, withLabel } = props;
|
||||
const _onChange = useCallback(
|
||||
({ isValid, value }: RawParam): void => {
|
||||
let proposal = null;
|
||||
|
||||
if (isValid && value) {
|
||||
proposal = registry.createType('Proposal', value);
|
||||
}
|
||||
|
||||
onChange && onChange({
|
||||
isValid,
|
||||
value: proposal
|
||||
});
|
||||
},
|
||||
[onChange]
|
||||
);
|
||||
|
||||
return (
|
||||
<ExtrinsicDisplay
|
||||
@ -38,7 +36,7 @@ function ProposalDisplay (props: Props): React.ReactElement<Props> {
|
||||
isError={isError}
|
||||
isPrivate
|
||||
label={label}
|
||||
onChange={onChange(props)}
|
||||
onChange={_onChange}
|
||||
onEnter={onEnter}
|
||||
onEscape={onEscape}
|
||||
style={style}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user