refactor(warnings): remove react warnings
This commit is contained in:
parent
c23c521b53
commit
4cea1ad88e
|
@ -38,9 +38,7 @@ const ValueWrapper = styled.div`
|
|||
text-overflow: ellipsis;
|
||||
`;
|
||||
|
||||
const SelectMenuButtonWrapper = styled.button`
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
const SelectMenuButtonWrapper = styled.div`
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
width: 50px;
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Link, type Location } from 'react-router-dom';
|
||||
import type { Location, RouterHistory } from 'react-router-dom';
|
||||
import { MENU_OPTIONS } from '../constants/sidebar';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
|
@ -15,17 +15,13 @@ const Wrapper = styled.div`
|
|||
padding-top: 15px;
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
const StyledLink = styled(Link)`
|
||||
color: ${props => (props.isActive
|
||||
? props.theme.colors.sidebarItemActive
|
||||
: props.theme.colors.sidebarItem)};
|
||||
/* eslint-disable max-len */
|
||||
const StyledLink = styled.a`
|
||||
color: ${props => (props.isActive ? props.theme.colors.sidebarItemActive : props.theme.colors.sidebarItem)};
|
||||
font-size: ${props => `${props.theme.fontSize.regular}em`};
|
||||
text-decoration: none;
|
||||
font-weight: ${props => props.theme.fontWeight.bold};
|
||||
background-color: ${props => (props.isActive
|
||||
? `${props.theme.colors.sidebarHoveredItem}`
|
||||
: 'transparent')};
|
||||
background-color: ${props => (props.isActive ? `${props.theme.colors.sidebarHoveredItem}` : 'transparent')};
|
||||
letter-spacing: 0.25px;
|
||||
padding: 25px 20px;
|
||||
height: 35px;
|
||||
|
@ -33,17 +29,12 @@ const StyledLink = styled(Link)`
|
|||
display: flex;
|
||||
align-items: center;
|
||||
outline: none;
|
||||
border-right: ${props => (props.isActive
|
||||
? `3px solid ${props.theme.colors.sidebarItemActive}`
|
||||
: 'none')};
|
||||
border-right: ${props => (props.isActive ? `3px solid ${props.theme.colors.sidebarItemActive}` : 'none')};
|
||||
cursor: pointer;
|
||||
transition: all 0.03s ${props => props.theme.colors.transitionEase};
|
||||
|
||||
&:hover {
|
||||
color: ${
|
||||
/* eslint-disable-next-line max-len */
|
||||
props => (props.isActive ? props.theme.colors.sidebarItemActive : '#ddd')
|
||||
}
|
||||
color: ${props => (props.isActive ? props.theme.colors.sidebarItemActive : '#ddd')}
|
||||
background-color: ${props => props.theme.colors.sidebarHoveredItem};
|
||||
}
|
||||
`;
|
||||
|
@ -65,22 +56,23 @@ type MenuItem = {
|
|||
};
|
||||
|
||||
type Props = {
|
||||
history: RouterHistory,
|
||||
options?: MenuItem[],
|
||||
location: Location,
|
||||
};
|
||||
|
||||
export const SidebarComponent = ({ options, location }: Props) => (
|
||||
export const SidebarComponent = ({ options, location, history }: Props) => (
|
||||
<Wrapper id='sidebar'>
|
||||
{(options || []).map((item) => {
|
||||
const isActive = location.pathname === item.route;
|
||||
|
||||
return (
|
||||
<StyledLink isActive={isActive} key={item.route} to={item.route}>
|
||||
<Icon
|
||||
isActive={isActive}
|
||||
src={item.icon(isActive)}
|
||||
alt={`${item.route}`}
|
||||
/>
|
||||
<StyledLink
|
||||
isActive={isActive}
|
||||
key={item.route}
|
||||
onClick={() => (isActive ? {} : history.push(item.route))}
|
||||
>
|
||||
<Icon isActive={isActive} src={item.icon(isActive)} alt={`${item.route}`} />
|
||||
{item.label}
|
||||
</StyledLink>
|
||||
);
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
// @flow
|
||||
|
||||
import React from 'react';
|
||||
import { Route, Switch, type Location } from 'react-router-dom';
|
||||
import {
|
||||
Route, Switch, type Location, type RouterHistory,
|
||||
} from 'react-router-dom';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { ScrollTopComponent } from './scroll-top';
|
||||
|
@ -43,28 +45,27 @@ const getTitle = (path: string) => {
|
|||
return path.replace('/', '');
|
||||
};
|
||||
|
||||
export const RouterComponent = ({ location }: { location: Location }) => (
|
||||
export const RouterComponent = ({
|
||||
location,
|
||||
history,
|
||||
}: {
|
||||
location: Location,
|
||||
history: RouterHistory,
|
||||
}) => (
|
||||
<FullWrapper>
|
||||
<HeaderComponent title={getTitle(location.pathname)} />
|
||||
<ContentWrapper>
|
||||
<SidebarContainer location={location} />
|
||||
<SidebarContainer location={location} history={history} />
|
||||
{/* $FlowFixMe */}
|
||||
<LayoutComponent>
|
||||
<ScrollTopComponent>
|
||||
<Switch>
|
||||
<Route
|
||||
exact
|
||||
path={DASHBOARD_ROUTE}
|
||||
component={DashboardContainer}
|
||||
/>
|
||||
<Route exact path={DASHBOARD_ROUTE} component={DashboardContainer} />
|
||||
<Route path={SEND_ROUTE} component={SendContainer} />
|
||||
<Route path={RECEIVE_ROUTE} component={ReceiveContainer} />
|
||||
<Route path={SETTINGS_ROUTE} component={SettingsContainer} />
|
||||
<Route path={CONSOLE_ROUTE} component={ConsoleView} />
|
||||
<Route
|
||||
path={TRANSACTIONS_ROUTE}
|
||||
component={TransactionsContainer}
|
||||
/>
|
||||
<Route path={TRANSACTIONS_ROUTE} component={TransactionsContainer} />
|
||||
<Route component={NotFoundView} />
|
||||
</Switch>
|
||||
</ScrollTopComponent>
|
||||
|
|
|
@ -70,6 +70,10 @@ export class ConsoleView extends Component<Props, State> {
|
|||
});
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
ipcRenderer.removeAllListeners('zcashd-log');
|
||||
}
|
||||
|
||||
render() {
|
||||
const { log } = this.state;
|
||||
|
||||
|
|
|
@ -69,7 +69,7 @@ type Props = {
|
|||
|
||||
type State = {
|
||||
showAdditionalOptions: boolean,
|
||||
}
|
||||
};
|
||||
|
||||
export class ReceiveView extends PureComponent<Props, State> {
|
||||
state = {
|
||||
|
@ -91,36 +91,26 @@ export class ReceiveView extends PureComponent<Props, State> {
|
|||
const buttonText = `${showAdditionalOptions ? 'Hide' : 'Show'} Other Address Types`;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<Fragment key={address}>
|
||||
<Label value='Shielded Address' />
|
||||
<Row
|
||||
alignItems='center'
|
||||
justifyContent='space-between'
|
||||
>
|
||||
<Row alignItems='center' justifyContent='space-between'>
|
||||
<WalletAddress address={address} />
|
||||
</Row>
|
||||
<Row>
|
||||
<ShowMoreButton
|
||||
onClick={this.toggleAdditionalOptions}
|
||||
isActive={showAdditionalOptions}
|
||||
>
|
||||
<ShowMoreIcon
|
||||
isActive={showAdditionalOptions}
|
||||
src={MenuIcon}
|
||||
alt='More Options'
|
||||
/>
|
||||
<ShowMoreButton onClick={this.toggleAdditionalOptions} isActive={showAdditionalOptions}>
|
||||
<ShowMoreIcon isActive={showAdditionalOptions} src={MenuIcon} alt='More Options' />
|
||||
<TextComponent value={buttonText} />
|
||||
</ShowMoreButton>
|
||||
</Row>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
renderTransparentAddresses = (address: string) => {
|
||||
const { showAdditionalOptions } = this.state;
|
||||
|
||||
return (
|
||||
<RevealsMain>
|
||||
<RevealsMain key={address}>
|
||||
<Transition
|
||||
native
|
||||
items={showAdditionalOptions}
|
||||
|
@ -133,22 +123,20 @@ export class ReceiveView extends PureComponent<Props, State> {
|
|||
opacity: 0,
|
||||
}}
|
||||
>
|
||||
{show => show && (props => (
|
||||
<animated.div style={props}>
|
||||
<Label value='Transparent Address (not private)' />
|
||||
<Row
|
||||
key={address}
|
||||
alignItems='center'
|
||||
justifyContent='space-between'
|
||||
>
|
||||
<WalletAddress address={address} />
|
||||
</Row>
|
||||
</animated.div>
|
||||
))}
|
||||
{show => show
|
||||
&& (props => (
|
||||
<animated.div style={props}>
|
||||
<Label value='Transparent Address (not private)' />
|
||||
<Row key={address} alignItems='center' justifyContent='space-between'>
|
||||
<WalletAddress address={address} />
|
||||
</Row>
|
||||
</animated.div>
|
||||
))
|
||||
}
|
||||
</Transition>
|
||||
</RevealsMain>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { addresses } = this.props;
|
||||
|
|
|
@ -37,6 +37,7 @@ export class TransactionsView extends PureComponent<Props> {
|
|||
transactionsDate={day}
|
||||
transactions={list}
|
||||
zecPrice={zecPrice}
|
||||
key={day}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
|
|
Loading…
Reference in New Issue