import PropTypes from 'prop-types'; import React, { Component } from 'react'; import TextTruncate from 'react-text-truncate'; import dimensions from 'Styles/Variables/dimensions'; import fonts from 'Styles/Variables/fonts'; import MoviePoster from 'Movie/MoviePoster'; import Link from 'Components/Link/Link'; import AddNewMovieModal from 'AddMovie/AddNewMovie/AddNewMovieModal'; import styles from './AddListMovieOverview.css'; const columnPadding = parseInt(dimensions.movieIndexColumnPadding); const columnPaddingSmallScreen = parseInt(dimensions.movieIndexColumnPaddingSmallScreen); const defaultFontSize = parseInt(fonts.defaultFontSize); const lineHeight = parseFloat(fonts.lineHeight); // Hardcoded height beased on line-height of 32 + bottom margin of 10. // Less side-effecty than using react-measure. const titleRowHeight = 42; function getContentHeight(rowHeight, isSmallScreen) { const padding = isSmallScreen ? columnPaddingSmallScreen : columnPadding; return rowHeight - padding; } class AddListMovieOverview extends Component { // // Lifecycle constructor(props, context) { super(props, context); this.state = { isNewAddMovieModalOpen: false }; } // // Listeners onPress = () => { this.setState({ isNewAddMovieModalOpen: true }); } onAddMovieModalClose = () => { this.setState({ isNewAddMovieModalOpen: false }); } // // Render render() { const { style, tmdbId, title, titleSlug, folder, year, overview, images, posterWidth, posterHeight, rowHeight, isSmallScreen, isExistingMovie } = this.props; const { isNewAddMovieModalOpen } = this.state; const elementStyle = { width: `${posterWidth}px`, height: `${posterHeight}px` }; const linkProps = isExistingMovie ? { to: `/movie/${titleSlug}` } : { onPress: this.onPress }; const contentHeight = getContentHeight(rowHeight, isSmallScreen); const overviewHeight = contentHeight - titleRowHeight; return (