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