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