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

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:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin-ratings/stars/index.jsx (modified) (3 diffs)

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

@@ -1 @@
-import React from 'react';
+/**
+ * External dependencies.
+ */
+import React, { Component, PropTypes } from 'react';
+import { identity } from 'lodash';
+import { localize } from 'i18n-calypso';
 
-export default React.createClass( {
-    displayName: 'Stars',
+export class Stars extends Component {
+    static propTypes = {
+        rating: PropTypes.number,
+        translate: PropTypes.func,
+    };
 
-    fillStars( rating ) {
-        const template = '<span class="%1$s"></span>';
+    static defaultProps = {
+        rating: 0,
+        translate: identity,
+    };
+
+    /**
+     * Returns filled stars representative of rating.
+     *
+     * @param {Number} rating Plugin rating.
+     * @return {String} Rating stars.
+     */
+    fillStars = ( rating ) => {
         let counter = rating * 2,
             output = '',
@@ -13 +31 @@
             switch ( counter ) {
                 case 0:
-                    output += template.replace( '%1$s', 'dashicons dashicons-star-empty' );
+                    output += '<span class="dashicons dashicons-star-empty"></span>';
                     break;
 
                 case 1:
-                    output += template.replace( '%1$s', 'dashicons dashicons-star-half' );
+                    output += '<span class="dashicons dashicons-star-half"></span>';
                     counter--;
                     break;
 
                 default:
-                    output += template.replace( '%1$s', 'dashicons dashicons-star-filled' );
+                    output += '<span class="dashicons dashicons-star-filled"></span>';
                     counter -= 2;
             }
@@ -28 +46 @@
 
         return output;
-    },
+    };
 
     render() {
-        const titleTemplate = '%s out of 5 stars',
-            title = titleTemplate.replace( '%s', this.props.rating / 20 );
+        const { rating, translate } = this.props;
+        const stars =  Math.round( rating / 0.5 ) * 0.5;
 
         return (
             <div
                 className="wporg-ratings"
-                aria-label={ title }
-                data-title-template={ titleTemplate }
-                data-rating={ this.props.rating / 20 }
-                dangerouslySetInnerHTML={ { __html: this.fillStars( Math.round( this.props.rating / 10 ) / 2 ) } }
-            ></div>
-        )
+                aria-label={ translate( '%(stars)s out of 5 stars', { args: { stars } } ) }
+                dangerouslySetInnerHTML={ { __html: this.fillStars( stars ) } }
+            />
+        );
     }
-} );
+}
+
+export default localize( Stars );