Making WordPress.org


Ignore:
Timestamp:
03/01/2017 06:08:54 PM (8 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-icon/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: 'PluginIcon',
     7/**
     8 * Internal dependencies.
     9 */
     10import { getPlugin } from 'state/selectors';
    511
    6     render() {
    7         const { icons, slug } = this.props.plugin;
    8         let icon;
     12/**
     13 *
     14 * @param {Object} plugin Plugin object.
     15 * @return {*}            React element or null.
     16 * @constructor
     17 */
     18export const PluginIcon = ( { plugin } ) => {
     19    const { icons, slug } = plugin;
     20    let icon;
    921
    10         if ( ! icons ) {
    11             return <div />;
    12         }
     22    if ( ! icons ) {
     23        return null;
     24    }
    1325
    14         if ( icons[ '1x' ] ) {
    15             icon = icons[ '1x' ]
    16         } else if ( icons.svg ) {
    17             icon = icons.svg;
    18         } else {
    19             icon = icons.default;
    20         }
     26    if ( icons.svg ) {
     27        icon = icons.svg;
     28    } else if ( icons[ '1x' ] ) {
     29        icon = icons[ '1x' ];
     30    } else {
     31        icon = icons.default;
     32    }
    2133
    22         return (
    23             <div className="entry-thumbnail">
    24                 <div className="plugin-icon" id={ `plugin-icon-${ slug }` }></div>
    25                 <style type='text/css'>
    26                     { `#plugin-icon-${ slug } { background-image: url('${ icon }'); } .plugin-icon { background-size: contain; height: 128px; width: 128px; }` }
    27                     { icons[ '2x' ] && icon !== icons.default ?
    28                         `@media only screen and (-webkit-min-device-pixel-ratio: 1.5) { #plugin-icon-${ slug } { background-image: url('${ icons[ '2x' ] }'); } }` : ''
    29                     } }
    30                 </style>
    31             </div>
    32         )
    33     }
    34 } );
     34    return (
     35        <div className="entry-thumbnail">
     36            <div className="plugin-icon" id={ `plugin-icon-${ slug }` } />
     37            <style type="text/css">
     38                { `#plugin-icon-${ slug } { background-image: url('${ icon }'); }` }
     39                { icons[ '2x' ] && icon !== icons.default
     40                    // eslint-disable-next-line max-len
     41                    ? `@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { #plugin-icon-${ slug } { background-image: url('${ icons[ '2x' ] }'); } }`
     42                    : ''
     43                }
     44            </style>
     45        </div>
     46    );
     47};
     48
     49PluginIcon.propTypes = {
     50    plugin: PropTypes.object,
     51    slug: PropTypes.string,
     52};
     53
     54PluginIcon.defaultProps = {
     55    plugin: {},
     56    slug: '',
     57};
     58
     59export default connect(
     60    ( state, { slug } ) => ( {
     61        plugin: getPlugin( state, slug ),
     62    } ),
     63)( PluginIcon );
Note: See TracChangeset for help on using the changeset viewer.