principles-ui-components/UI_Component/common/Image.js

Supporting UI controller for Tizen TV web application, which developed base on React Framework.

/**
 * @author Haipeng Zhang(hp.zhang@samsung.com)
 * @fileoverview This module manages image item.
 * @date    2017/06/13 (last modified date)
 *
 * Copyright 2017 by Samsung Electronics, Inc.,
 *
 * This software is the confidential and proprietary information
 * of Samsung Electronics, Inc. ("Confidential Information").  You
 * shall not disclose such Confidential Information and shall use
 * it only in accordance with the terms of the license agreement
 * you entered into with Samsung.
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { is, Map, fromJS } from 'immutable';

export default class Image extends Component {

  // constructor(props) {
    // super(props);
  // }

    componentDidMount() {
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return (JSON.stringify(nextProps) !== JSON.stringify(this.props));
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }

    render() {
        const { OSD } = this.props;

        const borderStyle = {
            position: 'absolute',
            top: OSD.t,
            left: OSD.l,
            width: OSD.w,
            height: OSD.h,
            borderRadius: '3px',
            overflow: 'hidden',
            backgroundColor: 'rgba(0,0,0,0.0)',
        };

        const imageStyle = {
            height: OSD.h,
            width: OSD.w,
        };

        return (
          <div style={borderStyle}>
            <img style={imageStyle} src={OSD.url} alt='X' />
          </div>
        );
    }
}

Image.defaultProps = {
    OSD: {
        t: 0,
        l: 0,
        w: 285,
        h: 285,
        url: '',
    },
};

Image.propTypes = {
    OSD: PropTypes.shape({        // thumbnail position
        t: PropTypes.number,         // thumbnail top
        l: PropTypes.number,        // thumbnail left
        w: PropTypes.number,           // thumbnail width
        h: PropTypes.number,           // thumbnail height
        url: PropTypes.string,
    }),
};