Changeset 5024 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/plugin-banner/index.jsx
- Timestamp:
- 03/01/2017 06:08:54 PM (7 years ago)
- 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 */ 4 import React, { PropTypes } from 'react'; 5 import { connect } from 'react-redux'; 2 6 3 export default React.createClass( { 4 displayName: 'PluginBanner', 7 /** 8 * Internal dependencies. 9 */ 10 import { getPlugin } from 'state/selectors'; 5 11 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 */ 18 export const PluginBanner = ( { plugin } ) => { 19 const { banners, slug } = plugin; 9 20 10 11 return <div />;12 21 if ( ! banners ) { 22 return null; 23 } 13 24 14 banner = banners[ 'low' ] ? banners[ 'low' ] : banners[ 'high' ];25 const banner = banners.low || banners.high; 15 26 16 17 return <div />;18 27 if ( ! banner ) { 28 return null; 29 } 19 30 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 45 PluginBanner.propTypes = { 46 plugin: PropTypes.object, 47 }; 48 49 PluginBanner.defaultProps = { 50 plugin: {}, 51 }; 52 53 export default connect( 54 ( state ) => ( { 55 plugin: getPlugin( state ), 56 } ), 57 )( PluginBanner );
Note: See TracChangeset
for help on using the changeset viewer.