bellingcat/ukraine-timemap
1
0
Fork 0
mirror of https://github.com/bellingcat/ukraine-timemap.git synced 2026-06-12 13:28:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

cards clickability added

Browse Source
This commit is contained in:
Sol
2020-08-04 21:02:32 +01:00
committed by Sol Abrahams
parent da51dabe82
commit bdc683aa1d
4 changed files with 31 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/SearchRow.jsx
View File

@@ -1,6 +1,7 @@
import React from 'react'
const SearchRow = ({ description, category, location, date, query }) => {
const SearchRow = ({ query, eventObj, onSearchRowClick }) => {
const { description, category, location, date } = eventObj
function getHighlightedText (text, highlight) {
// Split text on highlight term, include term itself into parts, ignore case
const parts = text.split(new RegExp(`(${highlight})`, 'gi'))
@@ -18,16 +19,16 @@ const SearchRow = ({ description, category, location, date, query }) => {
}
return (
<div className='search-row'>
<div className='search-row' onClick={() => onSearchRowClick([eventObj])}>
<div className='location-date-container'>
<div className='location-container'>
<i className='material-icons'>location_on</i>
<p>{getHighlightedText(location, query)}</p>
</div>
<div className='date-container'>
<i className='material-icons'>event</i>
<p>{getHighlightedText(date, query)}</p>
</div>
<div className='location-container'>
<i className='material-icons'>location_on</i>
<p>{getHighlightedText(location, query)}</p>
</div>
</div>
<p>{getShortDescription(description, query).map(match => {
return <span>{getHighlightedText(match, query)}...<br /></span>