coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Moved AtlasPreviewLoading.js to SC

Browse Source
This commit is contained in:
Jori Lallo
2017-05-09 23:42:03 -07:00
parent 75094a60a1
commit eb8d2631fb
2 changed files with 22 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/components/AtlasPreviewLoading/AtlasPreviewLoading.js
View File

@ -1,9 +1,7 @@
import React from 'react'; import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import styled, { keyframes } from 'styled-components';
import styles from './AtlasPreviewLoading.scss'; import { Flex } from 'reflexbox';
import classNames from 'classnames/bind';
const cx = classNames.bind(styles);
import { randomInteger } from 'utils/random'; import { randomInteger } from 'utils/random';
@ -12,7 +10,7 @@ const randomValues = Array.from(
() => `${randomInteger(85, 100)}%` () => `${randomInteger(85, 100)}%`
); );
export default _props => { export default () => {
return ( return (
<ReactCSSTransitionGroup <ReactCSSTransitionGroup
transitionName="fadeIn" transitionName="fadeIn"
@ -23,26 +21,25 @@ export default _props => {
transitionEnterTimeout={0} transitionEnterTimeout={0}
transitionLeaveTimeout={0} transitionLeaveTimeout={0}
> >
<div> <Flex column auto>
<div className={cx(styles.container, styles.animated)}> <Mask style={{ width: randomValues[0] }} header />
<div <Mask style={{ width: randomValues[1] }} />
className={cx(styles.mask, styles.header)} <Mask style={{ width: randomValues[2] }} />
style={{ width: randomValues[0] }} <Mask style={{ width: randomValues[3] }} />
/> </Flex>
<div
className={cx(styles.mask, styles.bodyText)}
style={{ width: randomValues[1] }}
/>
<div
className={cx(styles.mask, styles.bodyText)}
style={{ width: randomValues[2] }}
/>
<div
className={cx(styles.mask, styles.bodyText)}
style={{ width: randomValues[3] }}
/>
</div>
</div>
</ReactCSSTransitionGroup> </ReactCSSTransitionGroup>
); );
}; };
const pulsate = keyframes`
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
`;
const Mask = styled(Flex)`
height: ${props => (props.header ? 28 : 18)}px;
margin-bottom: ${props => (props.header ? 32 : 14)}px;
background-color: #ddd;
animation: ${pulsate} 1.3s infinite;
`;

26
frontend/components/AtlasPreviewLoading/AtlasPreviewLoading.scss
View File

@ -1,26 +0,0 @@
.mask {
display: flex;
width: 100%;
background-color: #ddd;
}
.header {
height: 28px;
margin-bottom: 32px;
}
.bodyText {
height: 18px;
margin-bottom: 14px;
}
.animated {
width: 100%;
animation: PULSATE 1.3s infinite;
}
@keyframes PULSATE {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}