2988da0981
Biggest changes forced by this: alt tags for all images, resulting in new strings added to messages.json, and a new i18n paramter/prop added in a plot of places. Another change of note is that there are two new tslint.json files under ts/test and ts/styleguide to relax our rules a bit there. This required a change to our package.json script, as manually specifying the config file there made it ignore our tslint.json files in subdirectories
54 lines
929 B
TypeScript
54 lines
929 B
TypeScript
import React from 'react';
|
|
|
|
import { Message } from './types/Message';
|
|
|
|
interface Props {
|
|
message: Message;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
const size = {
|
|
width: 94,
|
|
height: 94,
|
|
};
|
|
const styles = {
|
|
container: {
|
|
...size,
|
|
cursor: 'pointer',
|
|
backgroundColor: '#f3f3f3',
|
|
marginRight: 4,
|
|
marginBottom: 4,
|
|
},
|
|
image: {
|
|
...size,
|
|
backgroundSize: 'cover',
|
|
},
|
|
};
|
|
|
|
export class MediaGridItem extends React.Component<Props> {
|
|
public renderContent() {
|
|
const { message } = this.props;
|
|
|
|
if (!message.objectURL) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
...styles.container,
|
|
...styles.image,
|
|
backgroundImage: `url("${message.objectURL}")`,
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
public render() {
|
|
return (
|
|
<div style={styles.container} role="button" onClick={this.props.onClick}>
|
|
{this.renderContent()}
|
|
</div>
|
|
);
|
|
}
|
|
}
|