Making WordPress.org


Ignore:
Timestamp:
03/01/2017 06:08:54 PM (7 years ago)
Author:
obenland
Message:

Plugin Directory: Update React client with latest changes.

This is largely a cleanup commit with some WIP around switching to node-wpapi.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/plugin-banner/index.jsx

    r4223 r5024  
    1 import React from 'react';
     1/**
     2 * External dependencies.
     3 */
     4import React, { PropTypes } from 'react';
     5import { connect } from 'react-redux';
    26
    3 export default React.createClass( {
    4     displayName: 'PluginBanner',
     7/**
     8 * Internal dependencies.
     9 */
     10import { getPlugin } from 'state/selectors';
    511
    6     render() {
    7         const { banners, slug } = this.props.plugin;
    8         let banner;
     12/**
     13 *
     14 * @param {Object} plugin Plugin object.
     15 * @return {*} React element.
     16 * @constructor
     17 */
     18export const PluginBanner = ( { plugin } ) => {
     19    const { banners, slug } = plugin;
    920
    10         if ( ! banners ) {
    11             return <div />;
    12         }
     21    if ( ! banners ) {
     22        return null;
     23    }
    1324
    14         banner = banners[ 'low' ] ? banners[ 'low' ] : banners[ 'high' ];
     25    const banner = banners.low || banners.high;
    1526
    16         if ( ! banner ) {
    17             return <div />;
    18         }
     27    if ( ! banner ) {
     28        return null;
     29    }
    1930
    20         return (
    21             <div className="entry-banner">
    22                 <div className="plugin-banner" id={ `plugin-banner-${ slug }` }></div>
    23                 <style type='text/css'>
    24                     { `#plugin-banner-${ slug } { background-image: url('${ banner }'); }` }
    25                     { banners[ 'high' ] ?
    26                         `@media only screen and (-webkit-min-device-pixel-ratio: 1.5) { #plugin-banner-${ slug } { background-image: url('${ banners[ 'high' ] }'); } }` : ''
    27                     } }
    28                 </style>
    29             </div>
    30         )
    31     }
    32 } );
     31    return (
     32        <div className="entry-banner">
     33            <div className="plugin-banner" id={ `plugin-banner-${ slug }` } />
     34            <style type="text/css">
     35                { `#plugin-banner-${ slug } { background-image: url('${ banner }'); }` }
     36                { banners.high && '@media ' +
     37                    'only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) ' +
     38                    `{ #plugin-banner-${ slug } { background-image: url('${ banners.high }'); } }`
     39                } }
     40            </style>
     41        </div>
     42    );
     43};
     44
     45PluginBanner.propTypes = {
     46    plugin: PropTypes.object,
     47};
     48
     49PluginBanner.defaultProps = {
     50    plugin: {},
     51};
     52
     53export default connect(
     54    ( state ) => ( {
     55        plugin: getPlugin( state ),
     56    } ),
     57)( PluginBanner );
Note: See TracChangeset for help on using the changeset viewer.