Changeset 5024 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin-icon/index.jsx

Timestamp:

03/01/2017 06:08:54 PM (10 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:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin-icon/index.jsx (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin-icon/index.jsx

@@ -1 @@
-import React from 'react';
+/**
+ * External dependencies.
+ */
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
 
-export default React.createClass( {
-        displayName: 'PluginIcon',
+/**
+ * Internal dependencies.
+ */
+import { getPlugin } from 'state/selectors';
 
-        render() {
-                const { icons, slug } = this.props.plugin;
-                let icon;
+/**
+ *
+ * @param {Object} plugin Plugin object.
+ * @return {*}            React element or null.
+ * @constructor
+ */
+export const PluginIcon = ( { plugin } ) => {
+        const { icons, slug } = plugin;
+        let icon;
 
-                if ( ! icons ) {
-                        return <div />;
-                }
+        if ( ! icons ) {
+                return null;
+        }
 
-                if ( icons[ '1x' ] ) {
-                        icon = icons[ '1x' ]
-                } else if ( icons.svg ) {
-                        icon = icons.svg;
-                } else {
-                        icon = icons.default;
-                }
+        if ( icons.svg ) {
+                icon = icons.svg;
+        } else if ( icons[ '1x' ] ) {
+                icon = icons[ '1x' ];
+        } else {
+                icon = icons.default;
+        }
 
-                return (
-                        <div className="entry-thumbnail">
-                                <div className="plugin-icon" id={ `plugin-icon-${ slug }` }></div>
-                                <style type='text/css'>
-                                        { `#plugin-icon-${ slug } { background-image: url('${ icon }'); } .plugin-icon { background-size: contain; height: 128px; width: 128px; }` }
-                                        { icons[ '2x' ] && icon !== icons.default ?
-                                                `@media only screen and (-webkit-min-device-pixel-ratio: 1.5) { #plugin-icon-${ slug } { background-image: url('${ icons[ '2x' ] }'); } }` : ''
-                                        } }
-                                </style>
-                        </div>
-                )
-        }
-} );
+        return (
+                <div className="entry-thumbnail">
+                        <div className="plugin-icon" id={ `plugin-icon-${ slug }` } />
+                        <style type="text/css">
+                                { `#plugin-icon-${ slug } { background-image: url('${ icon }'); }` }
+                                { icons[ '2x' ] && icon !== icons.default
+                                        // eslint-disable-next-line max-len
+                                        ? `@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' ] }'); } }`
+                                        : ''
+                                }
+                        </style>
+                </div>
+        );
+};
+
+PluginIcon.propTypes = {
+        plugin: PropTypes.object,
+        slug: PropTypes.string,
+};
+
+PluginIcon.defaultProps = {
+        plugin: {},
+        slug: '',
+};
+
+export default connect(
+        ( state, { slug } ) => ( {
+                plugin: getPlugin( state, slug ),
+        } ),
+)( PluginIcon );