2017-07-18 04:46:32 +00:00
|
|
|
// @flow
|
2018-05-05 23:16:08 +00:00
|
|
|
import * as React from 'react';
|
2017-07-18 04:46:32 +00:00
|
|
|
import styled from 'styled-components';
|
2017-10-27 05:42:08 +00:00
|
|
|
import { pulsate } from 'shared/styles/animations';
|
2017-10-29 22:02:24 +00:00
|
|
|
import { randomInteger } from 'shared/random';
|
|
|
|
import Flex from 'shared/components/Flex';
|
2017-07-18 04:46:32 +00:00
|
|
|
|
2018-05-05 23:16:08 +00:00
|
|
|
class Mask extends React.Component<*> {
|
2017-07-18 04:46:32 +00:00
|
|
|
width: number;
|
|
|
|
|
|
|
|
shouldComponentUpdate() {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
2018-01-15 22:49:32 +00:00
|
|
|
componentWillMount() {
|
2017-07-18 04:46:32 +00:00
|
|
|
this.width = randomInteger(75, 100);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return <Redacted width={this.width} {...this.props} />;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const Redacted = styled(Flex)`
|
|
|
|
width: ${props => (props.header ? props.width / 2 : props.width)}%;
|
2019-01-05 21:37:33 +00:00
|
|
|
height: ${props => (props.height ? props.height : props.header ? 24 : 18)}px;
|
|
|
|
margin-bottom: 6px;
|
2019-03-13 04:35:35 +00:00
|
|
|
background-color: ${props => props.theme.divider};
|
2017-07-18 04:46:32 +00:00
|
|
|
animation: ${pulsate} 1.3s infinite;
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
export default Mask;
|