Changeset 5024 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/faq/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/faq/index.jsx (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/faq/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: 'FAQ',
+export class FAQ extends Component {
+    static propTypes = {
+        content: PropTypes.string,
+        translate: PropTypes.func,
+    };
 
-    toggleAnswer( event ) {
-        var $question = jQuery( event.target );
+    static defaultProps = {
+        content: null,
+        translate: identity,
+    };
+
+    toggleAnswer = ( event ) => {
+        const $question = jQuery( event.target );
 
         if ( ! $question.is( '.open' ) ) {
-            $question.siblings( '.open' ).toggleClass( 'open' ).attr( 'aria-expanded', false ).next( 'dd' ).slideToggle( 200 );
+            $question.siblings( '.open' ).toggleClass( 'open' ).attr( 'aria-expanded', false )
+                .next( 'dd' ).slideToggle( 200 );
         }
 
-        $question.toggleClass( 'open' ).attr( 'aria-expanded', function( index, attribute ) {
-            return 'true' !== attribute;
-        } ).next( 'dd' ).slideToggle( 200 );
-    },
+        $question.toggleClass( 'open' ).attr( 'aria-expanded', ( index, attribute ) => ( 'true' !== attribute ) )
+            .next( 'dd' ).slideToggle( 200 );
+    };
 
     render() {
-        if ( ! this.props.content ) {
-            return <div />;
+        const { content, translate } = this.props;
+
+        if ( content ) {
+            return (
+                <div id="faq" className="section plugin-faq">
+                    <h2>{ translate( 'FAQ' ) }</h2>
+                    <div onClick={ this.toggleAnswer } dangerouslySetInnerHTML={ { __html: content } } />
+                </div>
+            );
         }
 
-        return (
-            <div id="faq">
-                <h2>FAQ</h2>
-                <div onClick={ this.toggleAnswer } dangerouslySetInnerHTML={ { __html: this.props.content } } />
-            </div>
-        )
+        return null;
     }
-} );
+}
+
+export default localize( FAQ );