Changeset 5024 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/search-form/search-form.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/search-form/search-form.jsx (modified) (2 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/search-form/search-form.jsx

@@ -1 @@
-import React from 'react';
+/**
+ * Internal dependencies.
+ */
+import React, { Component, PropTypes } from 'react';
+import { identity } from 'lodash';
+import { localize } from 'i18n-calypso';
 
-export default React.createClass( {
-        displayName: 'SearchForm',
+export class SearchForm extends Component {
+        static propTypes = {
+                onChange: PropTypes.func,
+                onSubmit: PropTypes.func,
+                search: PropTypes.string,
+                translate: PropTypes.func,
+        };
 
-        onChange() {
-                this.props.onChange( this.refs.search.value );
-        },
+        static defaultProps = {
+                onChange: () => {},
+                onSubmit: () => {},
+                search: '',
+                translate: identity,
+        };
+
+        onChange = () => this.props.onChange( this.refs.search.value );
 
         render() {
+                const { onSubmit, search, translate } = this.props;
+
                 return (
-                        <form onSubmit={ this.props.onSubmit } role="search" method="get" className="search-form">
-                                <label htmlFor="s" className="screen-reader-text">Search for:</label>
+                        <form onSubmit={ onSubmit } role="search" method="get" className="search-form">
+                                <label htmlFor="s" className="screen-reader-text">{ translate( 'Search for:' ) }</label>
                                 <input
                                         className="search-field"
@@ -20 +37 @@
                                         ref="search"
                                         type="search"
-                                        value={ this.props.searchTerm }
+                                        defaultValue={ search }
                                 />
                                 <button className="button button-primary button-search">
-                                        <i className="dashicons dashicons-search"></i>
-                                        <span className="screen-reader-text">Search plugins</span>
+                                        <i className="dashicons dashicons-search" />
+                                        <span className="screen-reader-text">{ translate( 'Search plugins' ) }</span>
                                 </button>
                         </form>
-                )
+                );
         }
-} );
+}
+
+export default localize( SearchForm );