parent
d41e3f96ee
commit
47b433915b
@ -0,0 +1,35 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
|
export default class Avatar extends React.PureComponent {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
size: PropTypes.number,
|
||||||
|
style: PropTypes.object,
|
||||||
|
inline: PropTypes.bool,
|
||||||
|
};
|
||||||
|
|
||||||
|
static defaultProps = {
|
||||||
|
inline: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { size, inline } = this.props;
|
||||||
|
|
||||||
|
// : TODO : remove inline and change all avatars to be sized using css
|
||||||
|
const style = !size ? {} : {
|
||||||
|
width: `${size}px`,
|
||||||
|
height: `${size}px`,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={classNames('account__avatar', { 'account__avatar-inline': inline })}
|
||||||
|
style={style}
|
||||||
|
alt=''
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,27 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { randomIntFromInterval, generateText } from '../utils';
|
||||||
|
|
||||||
|
export default class DisplayName extends React.Component {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
maxLength: PropTypes.number.isRequired,
|
||||||
|
minLength: PropTypes.number.isRequired,
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { maxLength, minLength } = this.props;
|
||||||
|
const length = randomIntFromInterval(maxLength, minLength);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span className='display-name'>
|
||||||
|
<span>
|
||||||
|
<span className='display-name__name'>
|
||||||
|
<bdi><strong className='display-name__html'>{generateText(length)}</strong></bdi>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,16 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PlaceholderStatus from './placeholder_status';
|
||||||
|
|
||||||
|
export default class PlaceholderMaterialStatus extends React.Component {
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className='material-status' tabIndex={-1} aria-hidden>
|
||||||
|
<div className='material-status__status' tabIndex={0}>
|
||||||
|
<PlaceholderStatus {...this.props} focusable={false} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,40 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PlaceholderAvatar from './placeholder_avatar';
|
||||||
|
import PlaceholderDisplayName from './placeholder_display_name';
|
||||||
|
import PlaceholderStatusContent from './placeholder_status_content';
|
||||||
|
|
||||||
|
export default class PlaceholderStatus extends React.Component {
|
||||||
|
|
||||||
|
shouldComponentUpdate() {
|
||||||
|
// Re-rendering this will just cause the random lengths to jump around.
|
||||||
|
// There's basically no reason to ever do it.
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className='placeholder-status'>
|
||||||
|
<div className='status__wrapper'>
|
||||||
|
<div className='status'>
|
||||||
|
<div className='status__info'>
|
||||||
|
<div className='status__profile'>
|
||||||
|
<div className='status__avatar'>
|
||||||
|
<PlaceholderAvatar size={48} />
|
||||||
|
</div>
|
||||||
|
<span className='status__display-name'>
|
||||||
|
<PlaceholderDisplayName minLength={3} maxLength={25} />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<PlaceholderStatusContent minLength={5} maxLength={120} />
|
||||||
|
|
||||||
|
{/* TODO */}
|
||||||
|
{/* <PlaceholderActionBar /> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,23 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { randomIntFromInterval, generateText } from '../utils';
|
||||||
|
|
||||||
|
export default class PlaceholderStatusContent extends React.Component {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
maxLength: PropTypes.number.isRequired,
|
||||||
|
minLength: PropTypes.number.isRequired,
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { maxLength, minLength } = this.props;
|
||||||
|
const length = randomIntFromInterval(maxLength, minLength);
|
||||||
|
|
||||||
|
return(
|
||||||
|
<div className='status__content' tabIndex='0' key='content'>
|
||||||
|
{generateText(length)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,16 @@
|
|||||||
|
export const PLACEHOLDER_CHAR = '█';
|
||||||
|
|
||||||
|
export const generateText = length => {
|
||||||
|
let text = '';
|
||||||
|
|
||||||
|
for (let i = 0; i < length; i++) {
|
||||||
|
text += PLACEHOLDER_CHAR;
|
||||||
|
}
|
||||||
|
|
||||||
|
return text;
|
||||||
|
};
|
||||||
|
|
||||||
|
// https://stackoverflow.com/a/7228322/8811886
|
||||||
|
export const randomIntFromInterval = (min, max) => {
|
||||||
|
return Math.floor(Math.random() * (max - min + 1) + min);
|
||||||
|
};
|
Loading…
Reference in new issue