@wix/design-system
Version:
@wix/design-system
68 lines • 3.05 kB
JavaScript
import React from 'react';
import { st, classes } from './SocialPreview.st.css.js';
import Text from '../Text';
import Box from '../Box';
import { Link } from '@wix/wix-ui-icons-common';
import { dataHooks } from './constants';
/**
* A displayer for a social post
*/
class SocialPreview extends React.Component {
_isTwitter() {
const { skin } = this.props;
return skin === 'twitter';
}
_isTwitterSmall() {
const { size } = this.props;
return this._isTwitter() && size === 'small';
}
_renderTitle() {
const { skin, title } = this.props;
return (React.createElement(Text, { weight: "bold", size: this._isTwitter() ? 'tiny' : 'small', dataHook: dataHooks.socialPreviewTitle, className: st(classes.socialPreviewTitle, { skin }), ellipsis: true }, title));
}
_renderDescription() {
const { skin, description } = this.props;
return (React.createElement(Text, { weight: this._isTwitter() ? 'normal' : 'thin', size: "tiny", dataHook: dataHooks.socialPreviewDescription, className: st(classes.socialPreviewDescription, { skin }), ellipsis: true, maxLines: this._isTwitter() ? 2 : 1 }, description));
}
_renderUrlText() {
const { skin, previewUrl } = this.props;
return (React.createElement(Text, { weight: "normal", size: "tiny", dataHook: dataHooks.socialPreviewUrl, className: st(classes.socialPreviewUrl, { skin }), ellipsis: true }, this._isTwitter()
? previewUrl
: previewUrl && previewUrl.toUpperCase()));
}
_renderUrl() {
const { skin, previewUrl } = this.props;
if (this._isTwitter()) {
return (previewUrl && (React.createElement("div", { className: st(classes.socialPreviewUrlContainer, { skin }) },
React.createElement(Link, { size: "14px" }),
this._renderUrlText())));
}
else {
return this._renderUrlText();
}
}
_renderMedia() {
const { skin, size, media } = this.props;
if (this._isTwitterSmall()) {
return (React.createElement("div", { className: st(classes.mediaContainer, { skin, size }) }, media));
}
return media;
}
render() {
const { skin, size } = this.props;
return (React.createElement("div", { className: st(classes.root, { skin, size }), "data-hook": this.props.dataHook, "data-skin": skin, "data-size": size },
this._renderMedia(),
React.createElement(Box, { className: st(classes.container, { skin, size }), direction: "vertical", verticalAlign: this._isTwitterSmall() ? 'middle' : undefined },
!this._isTwitter() && this._renderUrl(),
this._renderTitle(),
this._renderDescription(),
this._isTwitter() && this._renderUrl())));
}
}
SocialPreview.displayName = 'SocialPreview';
SocialPreview.defaultProps = {
skin: 'social',
size: 'large',
};
export default SocialPreview;
//# sourceMappingURL=SocialPreview.js.map