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 (10 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 );