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

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:

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

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

@@ -1 @@
-import React from 'react';
+/**
+ * External dependencies.
+ */
+import React, { PropTypes } from 'react';
+import { identity } from 'lodash';
+import { localize } from 'i18n-calypso';
 
-export default React.createClass( {
-    displayName: 'Section',
+export const Section = ( { content, slug, title, translate } ) => (
+    <div>
+        <div id={ slug } className={ `section read-more plugin-${ slug }` }>
+            <h2>{ title }</h2>
+            <div dangerouslySetInnerHTML={ { __html: content } } />
+        </div>
+        <button
+            type="button"
+            className="button-link section-toggle"
+            aria-controls={ slug }
+            aria-expanded="false"
+            data-show-less={ translate( 'Show less' ) }
+            data-read-more={ translate( 'Read more' ) }
+        >
+            { translate( 'Read more' ) }
+        </button>
+    </div>
+);
 
-    render() {
-        return (
-            <div>
-                <div id={ this.props.slug } className="section read-more">
-                    <h2>{ this.props.title }</h2>
-                    <div dangerouslySetInnerHTML={ { __html: this.props.content } } />
-                </div>
-                <button type="button" className="button-link section-toggle" aria-controls={ this.props.slug } aria-expanded="false">Read more</button>
-            </div>
-        )
-    }
-} );
+Section.propTypes = {
+    content: PropTypes.string.isRequired,
+    slug: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    translate: PropTypes.func,
+};
+
+Section.defaultProps = {
+    translate: identity,
+};
+
+export default localize( Section );