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 (8 years ago)
- 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 */ 4 import React, { PropTypes } from 'react'; 5 import { connect } from 'react-redux'; 2 6 3 export default React.createClass( { 4 displayName: 'PluginIcon', 7 /** 8 * Internal dependencies. 9 */ 10 import { getPlugin } from 'state/selectors'; 5 11 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 */ 18 export const PluginIcon = ( { plugin } ) => { 19 const { icons, slug } = plugin; 20 let icon; 9 21 10 11 return <div />;12 22 if ( ! icons ) { 23 return null; 24 } 13 25 14 if ( icons[ '1x' ]) {15 icon = icons[ '1x' ]16 } else if ( icons.svg) {17 icon = icons.svg;18 19 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 } 21 33 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 49 PluginIcon.propTypes = { 50 plugin: PropTypes.object, 51 slug: PropTypes.string, 52 }; 53 54 PluginIcon.defaultProps = { 55 plugin: {}, 56 slug: '', 57 }; 58 59 export default connect( 60 ( state, { slug } ) => ( { 61 plugin: getPlugin( state, slug ), 62 } ), 63 )( PluginIcon );
Note: See TracChangeset
for help on using the changeset viewer.