Making WordPress.org


Ignore:
Timestamp:
08/02/2016 07:37:38 PM (9 years ago)
Author:
obenland
Message:

Plugin Directory: Add search functionality to React client.

See #1719.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/js/client/components/search-form/index.jsx

    r3734 r3764  
    11import React from 'react';
     2import { withRouter } from 'react-router';
    23
    3 export default React.createClass( {
    4     displayName: 'SearchForm',
     4/**
     5 * Internal dependencies.
     6 */
     7import SearchForm from './search-form';
     8
     9const SearchFormContainer = React.createClass( {
     10    getInitialState() {
     11        return {
     12            searchTerm: this.props.searchTerm
     13        };
     14    },
     15
     16    onChange( searchTerm ) {
     17        this.setState( {
     18            searchTerm: searchTerm
     19        } );
     20    },
     21
     22    componentWillReceiveProps( nextProps ) {
     23        this.setState( {
     24            searchTerm: nextProps.searchTerm
     25        } );
     26    },
     27
     28    onSubmit( event ) {
     29        var searchTerm = encodeURIComponent( this.state.searchTerm );
     30        event.preventDefault();
     31
     32        if ( searchTerm ) {
     33            this.props.router.push( `/search/${ searchTerm }/` );
     34        } else {
     35            this.props.router.push( '/' );
     36        }
     37    },
    538
    639    render() {
    7         return (
    8             <form role="search" method="get" className="search-form" action="/plugins/">
    9                 <label htmlFor="s" className="screen-reader-text">Search for:</label>
    10                 <input type="search" id="s" className="search-field" placeholder="Search plugins" name="s" />
    11                 <button className="button button-primary button-search"><i className="dashicons dashicons-search"></i></button>
    12             </form>
    13         )
     40        return <SearchForm searchTerm={ this.state.searchTerm } onSubmit={ this.onSubmit } onChange={ this.onChange } />;
    1441    }
    1542} );
     43
     44export default withRouter( SearchFormContainer );
Note: See TracChangeset for help on using the changeset viewer.