Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | 32x 32x 32x 32x 32x 6x 6x 32x 6x 2x 2x 32x 1x 32x 8x 16x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 32x 32x | import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
import store, { StoreState } from '../../store';
import { ComponentProps } from '../../types';
export type AppRootProps = HTMLProps<HTMLElement> & ComponentProps;
export type AppRootState = Pick<
StoreState,
'hasStickyFooter' | 'hasFixedNavBar' | 'navBarHeight' | 'footerHeight'
>;
/**
* This is the most important part of your app.
* This component interacts with other Roe components to adjust styles at the root level.
* Your app must have an AppRoot if you wish to used a fixed / shy NavBar or sticky Footer.
*
* If your app is rendered inside another element directly within the body,
* this element **MUST** have the "app" class applied.
*
* The "app" class ensures that the AppRoot is not affected by the outer, non-react element.
*/
export class AppRoot extends PureComponent<AppRootProps, AppRootState> {
private unsubscribe: () => void;
public constructor(props: AppRootProps) {
super(props);
this.state = store.getState();
}
public componentWillMount() {
this.unsubscribe = store.subscribe(
({ hasStickyFooter, hasFixedNavBar, navBarHeight, footerHeight }) => {
this.setState({
hasStickyFooter,
hasFixedNavBar,
navBarHeight,
footerHeight,
});
}
);
}
public componentWillUnmount() {
this.unsubscribe();
}
public render() {
const {
component: Component = 'div',
children,
className,
...remainingProps
} = this.props;
const {
hasStickyFooter,
hasFixedNavBar,
navBarHeight,
footerHeight,
} = this.state;
const myClassNames = [
'app-root',
(hasStickyFooter && 'has-sticky-footer') || null,
(hasFixedNavBar && 'has-fixed-nav-bar') || null,
className,
];
const style = {
paddingTop: hasFixedNavBar && navBarHeight,
paddingBottom: hasStickyFooter && footerHeight,
};
return (
<Component
{...remainingProps}
className={classNames(myClassNames)}
style={style}
>
{children}
</Component>
);
}
}
export default AppRoot;
|