Permalink
Browse files

Enable the `react/jsx-sort-props` lint rule

  • Loading branch information...
sindresorhus committed Jan 11, 2019
1 parent 339b25f commit 1911edca5b6cdc1f0ac953c7ffea1edb4dff6f7a
@@ -84,7 +84,6 @@ class DateInput extends React.Component {
component={WrappedInput}
format="YYYY-MM-DD"
formatDate={formatDate}
onDayChange={this.handleDayChange}
parseDate={parseDate}
dayPickerProps={{
...this.props.dayPickerProps,
@@ -96,6 +95,7 @@ class DateInput extends React.Component {
className: hasError ? 'shake-animation' : '',
onBlur: this.handleBlur,
}}
onDayChange={this.handleDayChange}
/>
);
}
@@ -32,8 +32,8 @@ class DonateButton extends React.Component {
className="DonateModal"
title={`${t('donate.title')} ❤️`}
open={this.state.isOpen}
onClose={this.close}
width="500px"
onClose={this.close}
>
<>
<div className="section text">
@@ -49,7 +49,11 @@ class DonateButton extends React.Component {
</div>
</>
</Modal>
<Button className="DonateButton" value={t('donate.title')} onClick={this.open}/>
<Button
className="DonateButton"
value={t('donate.title')}
onClick={this.open}
/>
</>
);
}
@@ -103,7 +103,6 @@ class SwapFilters extends React.Component {
name="dateFrom"
placeholder={`${t('filter.dateFrom')}...`}
value={dateFrom}
onDayChange={this.handleDateChange}
dayPickerProps={{
disabledDays: {after: dateTo},
modifiers,
@@ -116,6 +115,7 @@ class SwapFilters extends React.Component {
this.dateToInput.current.getInput().focus();
},
}}
onDayChange={this.handleDateChange}
/>
{' - '}
<DateInput
@@ -124,7 +124,6 @@ class SwapFilters extends React.Component {
name="dateTo"
placeholder={`${t('filter.dateTo')}...`}
value={dateTo}
onDayChange={this.handleDateChange}
dayPickerProps={{
disabledDays: {after: new Date(), before: dateFrom},
fromMonth: dateFrom,
@@ -135,17 +134,18 @@ class SwapFilters extends React.Component {
selectedDays: [dateFrom || dateTo, {from: dateFrom, to: dateTo}],
toMonth: new Date(),
}}
onDayChange={this.handleDateChange}
/>
</div>
{selectFilters.map(filter => (
<div key={filter.name} className="SwapFilters__section">
<label>{t(`filter.${filter.name}`)}:</label>
<Select
clearable
onChange={this.handleSelectChange(filter.name)}
options={filter.options}
searchable={filter.searchable}
value={this.state[filter.name]}
onChange={this.handleSelectChange(filter.name)}
/>
</div>
))}
@@ -231,9 +231,9 @@ class SwapList extends React.Component {
<Details/>
{showHeader && (
<SwapHeader
onClick={this.handleSort}
sortBy={sortBy}
sortDirection={sortDirection}
onClick={this.handleSort}
/>
)}
<div className="container">
@@ -104,12 +104,16 @@ class TimeSeriesChart extends React.Component {
}}
/>
<YAxis
hide
domain={['auto', 'auto']}
padding={{top: 5}}
hide
/>
{data &&
<Tooltip content={<CustomTooltip/>} isAnimationActive={false} animationDuration={0}/>
<Tooltip
content={<CustomTooltip/>}
isAnimationActive={false}
animationDuration={0}
/>
}
</AreaChart>
</ResponsiveContainer>
@@ -62,9 +62,9 @@ class Tooltip extends React.PureComponent {
return (
<div ref={ref} className="Tooltip__container" style={style}>
<CSSTransition
mountOnEnter
classNames="Tooltip"
in={isOpen}
mountOnEnter
timeout={{
enter: 0, // Start animation immediately
exit: animationDuration,
@@ -45,17 +45,17 @@ class AppSettings extends React.Component {
<Input
name="marketmakerUrl"
value={this.state.marketmakerUrl}
placeholder={t('settings.exampleUrl', {
url: 'http://localhost:7783',
interpolation: {escapeValue: false},
})}
errorMessage={isValidMarketmakerUrl ? null : t('settings.invalidUrl')}
onChange={this.handleChange}
onBlur={() => {
if (!isValidMarketmakerUrl) {
this.setState({marketmakerUrl: ''});
}
}}
placeholder={t('settings.exampleUrl', {
url: 'http://localhost:7783',
interpolation: {escapeValue: false},
})}
errorMessage={isValidMarketmakerUrl ? null : t('settings.invalidUrl')}
/>
</div>
</main>
@@ -15,46 +15,49 @@ const CreatePortfolioStep1 = () => {
<div className="CreatePortfolio">
<LoginBackButton view="NewPortfolio" progress={0}/>
<h1>{t('create.title')}</h1>
<form onSubmit={container.handleStep1Submit} style={{marginTop: '20px'}}>
<form style={{marginTop: '20px'}} onSubmit={container.handleStep1Submit}>
<div className="form-group">
<Input
onChange={container.handlePortfolioNameInputChange}
placeholder={t('create.name')}
value={state.portfolioName}
autoFocus
required
placeholder={t('create.name')}
value={state.portfolioName}
maxLength="50"
iconName="person"
onChange={container.handlePortfolioNameInputChange}
/>
</div>
<div className="form-group">
<Input
onChange={container.handlePortfolioPasswordInputChange}
required
type="password"
placeholder={t('create.password')}
value={state.portfolioPassword}
required
onChange={container.handlePortfolioPasswordInputChange}
/>
</div>
<div className="form-group">
<Input
ref={input => {
container.confirmPasswordInput = input;
}}
onChange={container.handleConfirmPasswordInputChange}
required
type="password"
placeholder={t('create.confirmPassword')}
value={state.confirmedPassword}
required
errorMessage={state.confirmedPasswordError}
onChange={container.handleConfirmPasswordInputChange}
/>
</div>
<div className="form-group">
<Button
type="submit"
value={t('create.next')}
disabled={!(state.portfolioName && state.portfolioPassword && state.confirmedPassword)}
style={{width: '170px', marginTop: '15px'}}
style={{
width: '170px',
marginTop: '15px',
}}
/>
</div>
</form>
@@ -39,8 +39,11 @@ const CreatePortfolioStep2 = () => {
<div className="form-group">
<Button
value={t('create.next')}
style={{
width: '172px',
marginTop: '7px',
}}
onClick={container.handleStep2ClickNext}
style={{width: '172px', marginTop: '7px'}}
/>
</div>
</div>
@@ -16,20 +16,20 @@ const CreatePortfolioStep3 = () => {
<LoginBackButton view="CreatePortfolioStep2" progress={0.50}/>
<h1>{t('create.confirmSeedPhrase')}</h1>
<p>TODO: Put some explanation here on what to do.</p>
<form onSubmit={container.handleStep3Submit} style={{marginTop: '20px'}}>
<form style={{marginTop: '20px'}} onSubmit={container.handleStep3Submit}>
<div className="form-group" style={{width: '460px'}}>
<TextArea
ref={textarea => {
container.confirmSeedPhraseTextArea = textarea;
}}
required
autoFocus
preventNewlines
value={state.confirmedSeedPhrase}
onChange={container.handleConfirmSeedPhraseInputChange}
placeholder={t('create.exampleSeedPhrase', {seedPhrase: 'advanced generous profound'})}
errorMessage={state.seedPhraseError}
autoFocus
required
preventNewlines
style={{padding: '15px'}}
onChange={container.handleConfirmSeedPhraseInputChange}
/>
</div>
<div className="form-group">
@@ -31,8 +31,8 @@ class DepositModal extends React.Component {
className="DepositModal"
title={t('deposit.title', {name: currencyInfo.name, symbol: currencyInfo.symbol})}
open={this.state.isOpen}
onClose={this.close}
width="445px"
onClose={this.close}
>
<>
<div className="section qrcode">
@@ -47,7 +47,11 @@ class DepositModal extends React.Component {
</div>
</>
</Modal>
<Button className="OpenModalButton" value={t('deposit.label')} onClick={this.open}/>
<Button
className="OpenModalButton"
value={t('deposit.label')}
onClick={this.open}
/>
</div>
);
}
@@ -94,7 +94,11 @@ const List = () => {
<div className="right">
<h2>{currency.name} ({currency.symbol})</h2>
<p>{balance}</p>
<Progress value={percentageOfTotalBalance} showLabel hideWhenZero/>
<Progress
showLabel
hideWhenZero
value={percentageOfTotalBalance}
/>
</div>
</div>
);
@@ -106,6 +110,9 @@ const List = () => {
<Input
placeholder={t('list.search')}
value={state.listSearchQuery}
view={() => (
<img src="/assets/search-icon.svg" width="12" height="12"/>
)}
onChange={dashboardContainer.setListSearchQuery}
onBlur={() => {
if (filteredCurrencies.length === 0) {
@@ -117,9 +124,6 @@ const List = () => {
dashboardContainer.setListSearchQuery('');
}
}}
view={() => (
<img src="/assets/search-icon.svg" width="12" height="12"/>
)}
/>
</div>
}
@@ -100,8 +100,8 @@ class WithdrawModal extends React.Component {
<div className="section">
<label>{t('withdraw.recipientLabel')}:</label>
<Input
value={this.state.recipientAddress}
required
value={this.state.recipientAddress}
placeholder={t('withdraw.recipientPlaceholder', {symbol: currencyInfo.symbol})}
disabled={this.state.isWithdrawing}
onChange={value => {
@@ -117,38 +117,38 @@ class WithdrawModal extends React.Component {
<label>{t('withdraw.amountLabel')}:</label>
<div className="amount-inputs">
<Input
value={this.state.amount}
required
onlyNumeric
value={this.state.amount}
fractionalDigits={8}
disabled={this.state.isWithdrawing}
onChange={value => {
setAmount(value);
}}
view={() => (
<span
className={currencyInfo.symbol.length > 3 ? 'long-symbol' : ''}
>
{currencyInfo.symbol}
</span>
)}
onChange={value => {
setAmount(value);
}}
/>
<span className="separator"></span>
<Input
value={this.state.amountInUsd}
required
onlyNumeric
value={this.state.amountInUsd}
fractionalDigits={4}
disabled={this.state.isWithdrawing}
view={() => (
<span>USD</span>
)}
onChange={value => {
this.setState({
amountInUsd: value,
amount: String(Number.parseFloat(value || '0') * currencyInfo.cmcPriceUsd),
});
}}
view={() => (
<span>USD</span>
)}
/>
{/* Hidden because of #302
<Link
@@ -173,16 +173,16 @@ class WithdrawModal extends React.Component {
</div>
{this.state.broadcast ? (
<Button
className="confirm-button"
primary
className="confirm-button"
value={t('withdraw.confirmNetworkFee')}
disabled={this.state.isBroadcasting}
onClick={this.confirmButtonHandler}
/>
) : (
<Button
className="withdraw-button"
primary
className="withdraw-button"
value={t('withdraw.label')}
disabled={
!this.state.recipientAddress ||
Oops, something went wrong.

0 comments on commit 1911edc

Please sign in to comment.