2017-07-18 04:46:32 +00:00
|
|
|
// @flow
|
2020-06-20 20:59:15 +00:00
|
|
|
import * as React from "react";
|
|
|
|
import styled from "styled-components";
|
|
|
|
import { randomInteger } from "shared/random";
|
2020-07-10 05:33:07 +00:00
|
|
|
import Flex from "components/Flex";
|
2021-07-21 17:34:55 +00:00
|
|
|
import { pulsate } from "styles/animations";
|
2017-07-18 04:46:32 +00:00
|
|
|
|
2021-01-30 05:36:09 +00:00
|
|
|
type Props = {|
|
2019-08-09 06:09:09 +00:00
|
|
|
header?: boolean,
|
|
|
|
height?: number,
|
2021-05-20 04:36:10 +00:00
|
|
|
minWidth?: number,
|
|
|
|
maxWidth?: number,
|
2021-07-15 19:26:34 +00:00
|
|
|
delay?: number,
|
2021-01-30 05:36:09 +00:00
|
|
|
|};
|
2019-08-09 06:09:09 +00:00
|
|
|
|
2021-07-15 19:26:34 +00:00
|
|
|
class PlaceholderText extends React.Component<Props> {
|
|
|
|
width = randomInteger(this.props.minWidth || 75, this.props.maxWidth || 100);
|
2017-07-18 04:46:32 +00:00
|
|
|
|
|
|
|
shouldComponentUpdate() {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2021-07-15 19:26:34 +00:00
|
|
|
return (
|
|
|
|
<Mask
|
|
|
|
width={this.width}
|
|
|
|
height={this.props.height}
|
|
|
|
delay={this.props.delay}
|
|
|
|
/>
|
|
|
|
);
|
2017-07-18 04:46:32 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-07-15 19:26:34 +00:00
|
|
|
const Mask = styled(Flex)`
|
2020-08-09 01:53:11 +00:00
|
|
|
width: ${(props) => (props.header ? props.width / 2 : props.width)}%;
|
|
|
|
height: ${(props) =>
|
|
|
|
props.height ? props.height : props.header ? 24 : 18}px;
|
2019-01-05 21:37:33 +00:00
|
|
|
margin-bottom: 6px;
|
2021-07-15 19:26:34 +00:00
|
|
|
border-radius: 6px;
|
2020-08-09 01:53:11 +00:00
|
|
|
background-color: ${(props) => props.theme.divider};
|
2021-07-15 19:26:34 +00:00
|
|
|
animation: ${pulsate} 2s infinite;
|
|
|
|
animation-delay: ${(props) => props.delay || 0}s;
|
2017-07-18 04:46:32 +00:00
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2021-07-15 19:26:34 +00:00
|
|
|
export default PlaceholderText;
|