PHP Classes

File: src/components/spacex-data-search/Search.tsx

Recommend this page to a friend!
  Classes of Maniruzzaman Akash   Maniruzzaman WordPress Frontend Editor   src/components/spacex-data-search/Search.tsx   Download  
File: src/components/spacex-data-search/Search.tsx
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Maniruzzaman WordPress Frontend Editor
WordPress plugin for visual front-end development
Author: By
Last change:
Date: 8 months ago
Size: 2,899 bytes
 

Contents

Class file image Download
/** * External dependencies. */ import { __ } from '@wordpress/i18n'; /** * Internal dependencies. */ import { missions, statuses, types } from "../../utils/spacex-data-helper"; import { ISearch } from "../../interfaces"; export default function Search({ filter, onSearched, onFiltered, searchText = __('Search', 'bsf-spacex'), searchButtonstyle = {} }: ISearch) { const handleSearch = (e: any) => { e.preventDefault(); onSearched(filter); } const handleChange = (e: any) => { onFiltered({ name: e.target.name, value: e.target.value }); } return ( <form className="capsule-filter-form" onSubmit={handleSearch}> <div className="form-div-area"> <label htmlFor="status-select" hidden> {__('Status', 'bsf-spacex')} </label> <select id="status-select" value={filter.status} onChange={handleChange} name="status" > { Object.keys(statuses).map((status, index) => ( <option value={status} key={index}> {statuses?.[status]} </option> )) } </select> <label htmlFor="mission-select" hidden> {__('Mission', 'bsf-spacex')} </label> <select id="mission-select" value={filter.mission} onChange={handleChange} name="mission" > { Object.keys(missions).map((mission, index) => ( <option value={mission} key={index}> {missions?.[mission]} </option> )) } </select> <label htmlFor="type-select" hidden> {__('Type', 'bsf-spacex')} </label> <select id="type-select" name="type" value={filter.type} onChange={handleChange} > { Object.keys(types).map((type, index) => ( <option value={type} key={index}> {types?.[type]} </option> )) } </select> </div> <div className="search-button"> <button type="submit" className="" style={searchButtonstyle}> {searchText} </button> </div> </form> ) }