nexle-tvguide-lib/src/tvEPG/components/programs/programLine.js

TV guide library for Android TV

import React from "react";
import { FlatList } from "react-native";
import ProgramCell from "./programCell";
import PropTypes from "prop-types";
import { TV_GUIDE_CONSTANTS } from '../../constants';

class ProgramLine extends React.Component {
    constructor(props) {
        super(props);
        this.renderItemList = this.renderItemList.bind(this);
        this.getKeyExactractorItem = this.getKeyExactractorItem.bind(this);
        this.programHeight = (props.tvGuideHeight - props.timeLineHeaderHeight) / props.numberOfChannelsDisplayed;
        this.programLineWidth = props.tvGuideWidth - props.channelListWidth;
        this.focusManager = global.focusManager.getFocusForRoute();
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (nextProps.currentDate !== this.props.currentDate) {
            return true;
        }
        return false;
    }

    renderItemList({ item, index }) {
        const { lineNumber, lastProgramFocus, onFocus, programStylesColors, programContainerStyles, timelineCellWidth } = this.props;
        const isFocused = lastProgramFocus?.lineIndex === lineNumber && lastProgramFocus?.index === index;
        return (
            <ProgramCell
                isFocused={isFocused}
                onFocus={onFocus}
                program={item}
                index={index}
                lineNumber={lineNumber}
                programStylesColors={programStylesColors}
                programContainerStyles={programContainerStyles}
                programHeight={this.programHeight}
                timelineCellWidth={timelineCellWidth}
            />
        );
    }

    getKeyExactractorItem(item, index) {
        return `${index.toString() + this.props.currentDate.getDate()}`;
    }

    render() {
        const { programs } = this.props;
        return (
            <FlatList
                scrollEnabled={false}
                horizontal
                removeClippedSubviews
                legacyImplementation
                scrollEnabled={false}
                initialNumToRender={5}
                windowSize={TV_GUIDE_CONSTANTS.FLAT_LIST_CONFIG.WINDOW_SIZE}
                data={programs}
                renderItem={this.renderItemList}
                keyExtractor={this.getKeyExactractorItem}
            />
        );
    }
}

ProgramLine.propTypes = {
    programs: PropTypes.array.isRequired,
    lineNumber: PropTypes.number.isRequired,
    onFocus: PropTypes.func.isRequired,
};

ProgramLine.defaultProps = {
    lastProgramFocus: {},
    lineNumber: 0,
    onFocus: () => { },
    setFocus: () => { },
    programs: [],
    currentDate: new Date(),
};

export default ProgramLine;