Apps wrapper to functional (#1734)
This commit is contained in:
Jaco Greeff
GitHub
parent
fb35cbf375
commit
6a79ce2f53
@ -8,7 +8,7 @@ import { BareProps as Props } from '@polkadot/react-components/types';
|
||||
// we also need to export the default as hot(Apps) (last line)
|
||||
// import { hot } from 'react-hot-loader/root';
|
||||
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import store from 'store';
|
||||
import styled from 'styled-components';
|
||||
import GlobalStyle from '@polkadot/react-components/styles';
|
||||
@ -16,165 +16,69 @@ import Signer from '@polkadot/react-signer';
|
||||
|
||||
import ConnectingOverlay from './overlays/Connecting';
|
||||
import AccountsOverlay from './overlays/Accounts';
|
||||
import { SideBarTransition, SIDEBAR_TRANSITION_DURATION, SIDEBAR_MENU_THRESHOLD } from './constants';
|
||||
import { SideBarTransition, SIDEBAR_MENU_THRESHOLD } from './constants';
|
||||
import Content from './Content';
|
||||
import SideBar from './SideBar';
|
||||
|
||||
interface State {
|
||||
interface SidebarState {
|
||||
isCollapsed: boolean;
|
||||
isMenu: boolean;
|
||||
menuOpen: boolean;
|
||||
transition: SideBarTransition;
|
||||
}
|
||||
|
||||
class Apps extends React.Component<Props, State> {
|
||||
public state: State;
|
||||
function Apps ({ className }: Props): React.ReactElement<Props> {
|
||||
const [sidebar, setSidebar] = useState<SidebarState>({
|
||||
isCollapsed: false,
|
||||
transition: SideBarTransition.COLLAPSED,
|
||||
...store.get('sidebar', {}),
|
||||
menuOpen: false,
|
||||
isMenu: window.innerWidth < SIDEBAR_MENU_THRESHOLD
|
||||
});
|
||||
|
||||
public constructor (props: Props) {
|
||||
super(props);
|
||||
const { isCollapsed, isMenu, menuOpen } = sidebar;
|
||||
|
||||
const state = store.get('sidebar') || {};
|
||||
|
||||
this.state = {
|
||||
isCollapsed: false,
|
||||
menuOpen: false,
|
||||
transition: SideBarTransition.COLLAPSED,
|
||||
...state
|
||||
};
|
||||
}
|
||||
|
||||
public componentDidMount (): void {
|
||||
this.setState({
|
||||
menuOpen: false,
|
||||
isMenu: window.innerWidth < SIDEBAR_MENU_THRESHOLD
|
||||
});
|
||||
}
|
||||
|
||||
public componentDidUpdate (): void {
|
||||
this.handleMenuTransition();
|
||||
}
|
||||
|
||||
public render (): React.ReactNode {
|
||||
const { className } = this.props;
|
||||
const { isCollapsed, isMenu, menuOpen } = this.state;
|
||||
|
||||
return (
|
||||
<>
|
||||
<GlobalStyle />
|
||||
<div className={`apps-Wrapper ${isCollapsed ? 'collapsed' : 'expanded'} ${isMenu && 'fixed'} ${menuOpen && 'menu-open'} theme--default ${className}`}>
|
||||
{this.renderMenuBg()}
|
||||
<SideBar
|
||||
collapse={this.collapse}
|
||||
handleResize={this.handleResize}
|
||||
menuOpen={menuOpen}
|
||||
isCollapsed={isCollapsed}
|
||||
toggleMenu={this.toggleMenu}
|
||||
/>
|
||||
<Signer>
|
||||
<Content />
|
||||
</Signer>
|
||||
<ConnectingOverlay />
|
||||
<AccountsOverlay />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
private collapse = (): void => {
|
||||
this.setState(({ isCollapsed }: State): Pick<State, never> => ({
|
||||
isCollapsed: !isCollapsed
|
||||
}), (): void => {
|
||||
store.set('sidebar', this.state);
|
||||
});
|
||||
}
|
||||
|
||||
private handleResize = (): void => {
|
||||
const { isMenu, menuOpen } = this.state;
|
||||
const dir = window.innerWidth < SIDEBAR_MENU_THRESHOLD ? 'hide' : 'show';
|
||||
|
||||
if (!menuOpen) {
|
||||
if ((isMenu && dir === 'hide') || (!isMenu && dir === 'show')) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const transition = (dir === 'hide')
|
||||
const _setSidebar = (update: Partial<SidebarState>): void =>
|
||||
setSidebar(store.set('sidebar', { ...sidebar, ...update }));
|
||||
const _collapse = (): void =>
|
||||
_setSidebar({ isCollapsed: !isCollapsed });
|
||||
const _toggleMenu = (): void =>
|
||||
_setSidebar({ isCollapsed: false, menuOpen: true });
|
||||
const _handleResize = (): void => {
|
||||
const transition = window.innerWidth < SIDEBAR_MENU_THRESHOLD
|
||||
? SideBarTransition.MINIMISED_AND_EXPANDED
|
||||
: SideBarTransition.EXPANDED_AND_MAXIMISED;
|
||||
|
||||
this.toggleMenuResize(transition);
|
||||
}
|
||||
|
||||
private handleMenuTransition = (): void => {
|
||||
const { transition } = this.state;
|
||||
|
||||
switch (transition) {
|
||||
case SideBarTransition.MINIMISED_AND_EXPANDED:
|
||||
setTimeout((): void => {
|
||||
this.setState({
|
||||
isMenu: true,
|
||||
isCollapsed: false,
|
||||
transition: SideBarTransition.COLLAPSED
|
||||
});
|
||||
}, SIDEBAR_TRANSITION_DURATION);
|
||||
break;
|
||||
|
||||
case SideBarTransition.EXPANDED_AND_MAXIMISED:
|
||||
setTimeout((): void => {
|
||||
this.setState({
|
||||
isMenu: false,
|
||||
isCollapsed: store.get('sidebar').isCollapsed,
|
||||
transition: SideBarTransition.EXPANDED
|
||||
});
|
||||
}, SIDEBAR_TRANSITION_DURATION);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private renderMenuBg = (): React.ReactNode => {
|
||||
return (
|
||||
<div
|
||||
className={`apps-Menu-bg ${this.state.menuOpen ? 'open' : 'closed'}`}
|
||||
onClick={this.handleResize}
|
||||
>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private toggleMenu = (): void => {
|
||||
this.setState({
|
||||
isCollapsed: false,
|
||||
menuOpen: true
|
||||
_setSidebar({
|
||||
isMenu: transition === SideBarTransition.MINIMISED_AND_EXPANDED,
|
||||
menuOpen: false,
|
||||
transition
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
private toggleMenuResize = (transition: SideBarTransition): void => {
|
||||
switch (transition) {
|
||||
case SideBarTransition.MINIMISED_AND_EXPANDED:
|
||||
this.setState({
|
||||
isMenu: true,
|
||||
menuOpen: false,
|
||||
transition: transition
|
||||
});
|
||||
break;
|
||||
|
||||
case SideBarTransition.EXPANDED_AND_MAXIMISED:
|
||||
this.setState({
|
||||
menuOpen: false,
|
||||
transition: transition
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
this.setState(({ isCollapsed }: State): Pick<State, never> => ({
|
||||
isCollapsed: !isCollapsed
|
||||
}));
|
||||
break;
|
||||
}
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<GlobalStyle />
|
||||
<div className={`apps-Wrapper ${isCollapsed ? 'collapsed' : 'expanded'} ${isMenu && 'fixed'} ${menuOpen && 'menu-open'} theme--default ${className}`}>
|
||||
<div
|
||||
className={`apps-Menu-bg ${menuOpen ? 'open' : 'closed'}`}
|
||||
onClick={_handleResize}
|
||||
/>
|
||||
<SideBar
|
||||
collapse={_collapse}
|
||||
handleResize={_handleResize}
|
||||
menuOpen={menuOpen}
|
||||
isCollapsed={isCollapsed}
|
||||
toggleMenu={_toggleMenu}
|
||||
/>
|
||||
<Signer>
|
||||
<Content />
|
||||
</Signer>
|
||||
<ConnectingOverlay />
|
||||
<AccountsOverlay />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default styled(Apps)`
|
||||
|
||||
@ -9,7 +9,7 @@ import { interval } from 'rxjs/observable/interval';
|
||||
|
||||
const interval$ = interval(500);
|
||||
|
||||
export default function intervalSubscribe<T, Props, State extends CallState> (that: React.Component<Props, State>): Subscription {
|
||||
export default function intervalObservable<T, Props, State extends CallState> (that: React.Component<Props, State>): Subscription {
|
||||
return interval$.subscribe((): void => {
|
||||
const elapsed = Date.now() - ((that.state.callUpdatedAt as number) || 0);
|
||||
const callUpdated = elapsed <= 1500;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user