Replace <Aux> with React Fragements (#816)

* replace <Aux> with React Fragements

* Remove Aux imports
This commit is contained in:
Daniel Ternyak 2018-01-14 20:07:02 -06:00 committed by GitHub
parent 7097a44f32
commit fa8fbe531f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 28 additions and 50 deletions

View File

@ -13,7 +13,6 @@ import BroadcastTx from 'containers/Tabs/BroadcastTx';
import ErrorScreen from 'components/ErrorScreen';
import PageNotFound from 'components/PageNotFound';
import LogOutPrompt from 'components/LogOutPrompt';
import { Aux } from 'components/ui';
import { Store } from 'redux';
import { pollOfflineStatus } from 'actions/config';
import { AppState } from 'reducers';
@ -75,11 +74,11 @@ export default class Root extends Component<Props, State> {
return (
<Provider store={store} key={Math.random()}>
<Router key={Math.random()}>
<Aux>
<React.Fragment>
{routes}
<LegacyRoutes />
<LogOutPrompt />
</Aux>
</React.Fragment>
</Router>
</Provider>
);

View File

@ -1,7 +1,6 @@
import React from 'react';
import { AddressFieldFactory } from './AddressFieldFactory';
import { donationAddressMap } from 'config/data';
import { Aux } from 'components/ui';
interface Props {
isReadOnly?: boolean;
@ -10,7 +9,7 @@ interface Props {
export const AddressField: React.SFC<Props> = ({ isReadOnly }) => (
<AddressFieldFactory
withProps={({ currentTo, isValid, onChange, readOnly, errorMsg }) => (
<Aux>
<React.Fragment>
<input
className={`form-control ${isValid ? 'is-valid' : 'is-invalid'}`}
type="text"
@ -24,7 +23,7 @@ export const AddressField: React.SFC<Props> = ({ isReadOnly }) => (
<span className="help-block">{errorMsg}</span>
</div>
)}
</Aux>
</React.Fragment>
)}
/>
);

View File

@ -1,6 +1,5 @@
import React from 'react';
import { AmountFieldFactory } from './AmountFieldFactory';
import { Aux } from 'components/ui';
import { UnitDropDown } from 'components';
import translate, { translateRaw } from 'translations';
@ -17,7 +16,7 @@ export const AmountField: React.SFC<Props> = ({
}) => (
<AmountFieldFactory
withProps={({ currentValue: { raw }, isValid, onChange, readOnly }) => (
<Aux>
<React.Fragment>
<label>{translate('SEND_amount')}</label>
<div className="input-group">
<input
@ -32,7 +31,7 @@ export const AmountField: React.SFC<Props> = ({
/>
{hasUnitDropdown && <UnitDropDown showAllTokens={showAllTokens} />}
</div>
</Aux>
</React.Fragment>
)}
/>
);

View File

@ -1,6 +1,5 @@
import { getTransactionFields, makeTransaction } from 'libs/transaction';
import { SerializedTransaction } from 'components/renderCbs';
import { Aux } from 'components/ui';
import ERC20 from 'libs/erc20';
import { From } from '../From';
import React, { Component } from 'react';
@ -21,7 +20,7 @@ class AddressesClass extends Component<StateProps> {
const { to, data } = getTransactionFields(transactionInstance);
return (
<Aux>
<React.Fragment>
<li className="ConfModal-details-detail">
You are sending from <From withFrom={from => <code>{from}</code>} />
</li>
@ -32,7 +31,7 @@ class AddressesClass extends Component<StateProps> {
{this.props.unit === 'ether' ? to : ERC20.transfer.decodeInput(data)._to}
</code>
</li>
</Aux>
</React.Fragment>
);
}}
/>

View File

@ -1,10 +1,9 @@
import React from 'react';
import { GasLimitFieldFactory } from './GasLimitFieldFactory';
import translate from 'translations';
import { Aux } from 'components/ui';
export const GasLimitField: React.SFC<{}> = () => (
<Aux>
<React.Fragment>
<label>{translate('TRANS_gas')} </label>
<GasLimitFieldFactory
withProps={({ gasLimit: { raw, value }, onChange, readOnly }) => (
@ -17,5 +16,5 @@ export const GasLimitField: React.SFC<{}> = () => (
/>
)}
/>
</Aux>
</React.Fragment>
);

View File

@ -1,5 +1,4 @@
import React, { Component } from 'react';
import { Aux } from 'components/ui';
import { Query } from 'components/renderCbs';
import Help from 'components/ui/Help';
import { getNonce, nonceRequestFailed } from 'selectors/transaction';
@ -26,7 +25,7 @@ class NonceInputClass extends Component<Props> {
public render() {
const { nonce: { raw, value }, onChange, shouldDisplay } = this.props;
const content = (
<Aux>
<React.Fragment>
<label>Nonce</label>
{nonceHelp}
@ -42,7 +41,7 @@ class NonceInputClass extends Component<Props> {
/>
)}
/>
</Aux>
</React.Fragment>
);
return shouldDisplay ? content : null;

View File

@ -1,5 +1,4 @@
import React, { Component } from 'react';
import { Aux } from 'components/ui';
import { ConfirmationModal } from 'components/ConfirmationModal';
import { getOffline } from 'selectors/config';
import { AppState } from 'reducers';
@ -40,10 +39,10 @@ class OnlineSendClass extends Component<Props, State> {
) : null;
return !this.props.offline ? (
<Aux>
<React.Fragment>
{this.props.withProps({ onClick: this.openModal })}
{displayModal}
</Aux>
</React.Fragment>
) : null;
}
private openModal = () => {

View File

@ -1,5 +1,4 @@
import translate from 'translations';
import { Aux } from 'components/ui';
import { getTransactionFields, makeTransaction } from 'libs/transaction';
import { OfflineBroadcast } from './OfflineBroadcast';
import { SerializedTransaction } from 'components/renderCbs';
@ -33,7 +32,7 @@ class SendButtonFactoryClass extends Component<Props> {
return (
<SerializedTransaction
withSerializedTransaction={serializedTransaction => (
<Aux>
<React.Fragment>
<div className={`col-sm-${columnSize}`}>
<label>
{this.props.walletType.isWeb3Wallet
@ -64,7 +63,7 @@ class SendButtonFactoryClass extends Component<Props> {
)}
<OfflineBroadcast />
<OnlineSend withProps={this.props.withProps} />
</Aux>
</React.Fragment>
)}
/>
);

View File

@ -1,7 +0,0 @@
import React from 'react';
interface Props {
children: any;
}
export const Aux: React.SFC<Props> = ({ children }) => children;

View File

@ -1,5 +1,4 @@
import React, { Component } from 'react';
import { Aux } from 'components/ui';
export type ExpandHandler = (ev: React.FormEvent<HTMLAnchorElement>) => void;
@ -19,10 +18,10 @@ export class Expandable extends Component<Props, State> {
public render() {
return (
<Aux>
<React.Fragment>
{this.props.expandLabel(this.expandHandler)}
{this.state.expanded && this.props.children}
</Aux>
</React.Fragment>
);
}

View File

@ -11,5 +11,4 @@ export { default as Spinner } from './Spinner';
export { default as SwapDropdown } from './SwapDropdown';
export { default as Tooltip } from './Tooltip';
export * from './ConditionalInput';
export * from './AuxComponent';
export * from './Expandable';

View File

@ -4,7 +4,6 @@ import React, { Component } from 'react';
import { NonceField, SendButton, SigningStatus } from 'components';
import WalletDecrypt, { DISABLE_WALLETS } from 'components/WalletDecrypt';
import { FullWalletOnly } from 'components/renderCbs';
import { Aux } from 'components/ui';
interface OwnProps {
button: React.ReactElement<any>;
@ -12,14 +11,14 @@ interface OwnProps {
export class Fields extends Component<OwnProps> {
public render() {
const makeContent = () => (
<Aux>
<React.Fragment>
<GasLimitField />
<AmountField />
<NonceField />
{this.props.button}
<SigningStatus />
<SendButton />
</Aux>
</React.Fragment>
);
const makeDecrypt = () => <WalletDecrypt disabledWallets={DISABLE_WALLETS.READ_ONLY} />;

View File

@ -2,7 +2,6 @@ import React, { Component } from 'react';
import translate from 'translations';
import './InteractExplorer.scss';
import { TShowNotification, showNotification } from 'actions/notifications';
import { Aux } from 'components/ui';
import { getNodeLib } from 'selectors/config';
import { getTo, getDataExists } from 'selectors/transaction';
import { INode } from 'libs/nodes/INode';
@ -126,9 +125,9 @@ class InteractExplorerClass extends Component<Props, State> {
{translate('CONTRACT_Read')}
</button>
) : (
<Aux>
<React.Fragment>
<Fields button={generateOrWriteButton} />
</Aux>
</React.Fragment>
)}
</div>
)}

View File

@ -13,7 +13,7 @@ import {
} from 'components';
import { OnlyUnlocked, WhenQueryExists } from 'components/renderCbs';
import translate from 'translations';
import { Aux } from 'components/ui';
import { AppState } from 'reducers';
import { NonStandardTransaction } from './components';
@ -68,10 +68,10 @@ class FieldsClass extends Component<StateProps> {
return (
<OnlyUnlocked
whenUnlocked={
<Aux>
<React.Fragment>
<QueryWarning />
{shouldDisplay ? content : null}
</Aux>
</React.Fragment>
}
/>
);

View File

@ -3,8 +3,6 @@ import { AmountFieldFactory } from 'components/AmountFieldFactory';
import { AddressFieldFactory } from 'components/AddressFieldFactory';
import { connect } from 'react-redux';
import { AppState } from 'reducers';
import { Aux } from 'components/ui';
import { GenerateTransaction, SendButton, SigningStatus, GasSlider } from 'components';
import { resetWallet, TResetWallet } from 'actions/wallet';
import translate from 'translations';
@ -46,7 +44,7 @@ class FieldsClass extends Component<Props> {
<AmountFieldFactory
withProps={({ currentValue, isValid }) => (
<Aux>
<React.Fragment>
{!isValid && (
<h5 style={{ color: 'red' }}>
WARNING: Your ether or token balance is not high enough to complete this
@ -61,7 +59,7 @@ class FieldsClass extends Component<Props> {
readOnly={true}
/>
)}
</Aux>
</React.Fragment>
)}
/>
</div>

View File

@ -1,7 +1,6 @@
import React, { Component } from 'react';
import WalletDecrypt from 'components/WalletDecrypt';
import { OnlyUnlocked } from 'components/renderCbs';
import { Aux } from 'components/ui';
import { Fields } from './Fields';
import { isUnlocked as isUnlockedSelector } from 'selectors/wallet';
import { getNetworkConfig } from 'selectors/config';
@ -48,7 +47,7 @@ class LiteSendClass extends Component<Props> {
renderMe = isUnlocked ? <OnlyUnlocked whenUnlocked={<Fields />} /> : <WalletDecrypt />;
}
return <Aux>{renderMe}</Aux>;
return <React.Fragment>{renderMe}</React.Fragment>;
}
}