refactor PageLoader common component
This commit is contained in:
parent
203f4be015
commit
3b47cf3104
3 changed files with 17 additions and 6 deletions
|
@ -2,14 +2,14 @@ import React from 'react';
|
||||||
import cx from 'classnames';
|
import cx from 'classnames';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
isFullHeight: boolean;
|
fullHeight: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const PageLoader: React.FC<Partial<Props>> = ({ isFullHeight = true }) => (
|
const PageLoader: React.FC<Partial<Props>> = ({ fullHeight }) => (
|
||||||
<section
|
<section
|
||||||
className={cx(
|
className={cx(
|
||||||
'hero',
|
'hero',
|
||||||
isFullHeight ? 'is-fullheight-with-navbar' : 'is-halfheight'
|
fullHeight ? 'is-fullheight-with-navbar' : 'is-halfheight'
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -4,7 +4,18 @@ import PageLoader from '../PageLoader';
|
||||||
|
|
||||||
describe('PageLoader', () => {
|
describe('PageLoader', () => {
|
||||||
it('matches the snapshot', () => {
|
it('matches the snapshot', () => {
|
||||||
const component = mount(<PageLoader />);
|
expect(mount(<PageLoader />)).toMatchSnapshot();
|
||||||
expect(component).toMatchSnapshot();
|
});
|
||||||
|
|
||||||
|
it('renders half-height page loader by default', () => {
|
||||||
|
const wrapper = mount(<PageLoader />);
|
||||||
|
expect(wrapper.exists('.hero.is-halfheight')).toBeTruthy();
|
||||||
|
expect(wrapper.exists('.hero.is-fullheight-with-navbar')).toBeFalsy();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders fullheight page loader', () => {
|
||||||
|
const wrapper = mount(<PageLoader fullHeight />);
|
||||||
|
expect(wrapper.exists('.hero.is-halfheight')).toBeFalsy();
|
||||||
|
expect(wrapper.exists('.hero.is-fullheight-with-navbar')).toBeTruthy();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
exports[`PageLoader matches the snapshot 1`] = `
|
exports[`PageLoader matches the snapshot 1`] = `
|
||||||
<PageLoader>
|
<PageLoader>
|
||||||
<section
|
<section
|
||||||
className="hero is-fullheight-with-navbar"
|
className="hero is-halfheight"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="hero-body has-text-centered"
|
className="hero-body has-text-centered"
|
||||||
|
|
Loading…
Add table
Reference in a new issue