Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/tree search highlight infos #114

Merged
merged 3 commits into from
Jul 2, 2018
Merged

Feature/tree search highlight infos #114

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4fc45a4
tree search: text highlight in additional infos
May 31, 2018
76924b9
renamed
Jun 1, 2018
35bee9c
Merge branch 'develop' into feature/tree-search-highlight-infos
MarcusBaitz Jul 2, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
19 changes: 15 additions & 4 deletions frontend/lib/js/tooltip/Tooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ import type { Dispatch } from 'redux-thunk';
import T from 'i18n-react';
import { connect } from 'react-redux';
import Markdown from 'react-markdown';
import Highlighter from 'react-highlight-words'

import { IconButton } from '../button';
import { SearchType } from '../category-trees/reducer';

import ActivateTooltip from './ActivateTooltip';
import { toggleDisplayTooltip } from './actions';
Expand All @@ -20,13 +23,16 @@ type PropsType = {
additionalInfos: AdditionalInfosType,
displayTooltip: boolean,
toggleDisplayTooltip: Function,
search: SearchType
};

const Tooltip = (props: PropsType) => {
if (!props.displayTooltip) return <ActivateTooltip />;

const { additionalInfos, toggleDisplayTooltip } = props;
const { label, description, infos, matchingEntries, dateRange } = additionalInfos;
const searchHighlight = (text) =>
<Highlighter searchWords={props.search.words} autoEscape={true} textToHighlight={text} />;

return (
<div className="tooltip">
Expand All @@ -40,17 +46,21 @@ const Tooltip = (props: PropsType) => {
}
<h3 className="tooltip__headline">
{
label
searchHighlight(label)
} {
description &&
<span> - {description}</span>
<span> - {searchHighlight(description)}</span>
}
</h3>
{
infos && infos.map((info, i) => (
<div className="tooltip-info" key={i}>
<h3 className="tooltip-info__key" >{info.key}</h3>
<Markdown className="tooltip-info__value" source={info.value} />
<h3 className="tooltip-info__key" >{searchHighlight(info.key)}</h3>
<Markdown className="tooltip-info__value"
source={info.value}
escapeHtml={true}
renderers={{text: searchHighlight}}
/>
</div>
))
}
Expand Down Expand Up @@ -82,6 +92,7 @@ const mapStateToProps = (state) => {
return {
additionalInfos: state.tooltip.additionalInfos,
displayTooltip: state.tooltip.displayTooltip,
search: state.categoryTrees.search
};
};

Expand Down