forked/topola-viewer
1
0
Fork 0
mirror of https://github.com/PeWu/topola-viewer.git synced 2026-05-26 23:26:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Display other details in details panel

Browse Source
This commit is contained in:
Przemek Wiech
2019-03-09 23:04:16 +01:00
parent ae7ba54723
commit 0d4766e6e3
1 changed files with 50 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/details.tsx
View File

@@ -12,9 +12,8 @@ interface Props {
indi: string; indi: string;
} }
const NAME_TAGS = ['NAME'];
const EVENT_TAGS = ['BIRT', 'BAPM', 'CHR', 'DEAT', 'BURI']; const EVENT_TAGS = ['BIRT', 'BAPM', 'CHR', 'DEAT', 'BURI'];
const DATA_TAGS = ['TITL', 'OCCU', 'WWW', 'EMAIL']; const EXCLUDED_TAGS = ['NAME', 'SEX', 'FAMC', 'FAMS', 'SOUR', 'NOTE'];
const TAG_DESCRIPTIONS = new Map([ const TAG_DESCRIPTIONS = new Map([
['BAPM', 'Baptism'], ['BAPM', 'Baptism'],
['BIRT', 'Birth'], ['BIRT', 'Birth'],
@@ -45,7 +44,20 @@ function translateDate(gedcomDate: string, locale: string) {
return formatDate(date, locale); return formatDate(date, locale);
} }
function eventDetails(entry: GedcomEntry, tag: string, locale: string) { function joinLines(lines: (JSX.Element | string)[]) {
return (
<>
{lines.map((line) => (
<>
<Linkify properties={{target: '_blank'}}>{line}</Linkify>
<br />
</>
))}
</>
);
}
function eventDetails(entry: GedcomEntry, locale: string) {
const lines = []; const lines = [];
const date = entry.tree.find((subentry) => subentry.tag === 'DATE'); const date = entry.tree.find((subentry) => subentry.tag === 'DATE');
if (date && date.data) { if (date && date.data) {
@@ -65,20 +77,13 @@ function eventDetails(entry: GedcomEntry, tag: string, locale: string) {
} }
return ( return (
<> <>
<div className="ui sub header">{translateTag(tag)}</div> <div className="ui sub header">{translateTag(entry.tag)}</div>
<span> <span>{joinLines(lines)}</span>
{lines.map((line) => (
<>
<Linkify properties={{target: '_blank'}}>{line}</Linkify>
<br />
</>
))}
</span>
</> </>
); );
} }
function dataDetails(entry: GedcomEntry, tag: string) { function dataDetails(entry: GedcomEntry) {
const lines = []; const lines = [];
if (entry.data) { if (entry.data) {
lines.push(entry.data); lines.push(entry.data);
@@ -93,20 +98,24 @@ function dataDetails(entry: GedcomEntry, tag: string) {
} }
return ( return (
<> <>
<div className="ui sub header">{translateTag(tag)}</div> <div className="ui sub header">{translateTag(entry.tag)}</div>
<span> <span>{joinLines(lines)}</span>
{lines.map((line) => (
<>
<Linkify properties={{target: '_blank'}}>{line}</Linkify>
<br />
</>
))}
</span>
</> </>
); );
} }
function nameDetails(entry: GedcomEntry, tag: string) { function noteDetails(entry: GedcomEntry) {
const lines = [];
if (entry.data) {
lines.push(entry.data);
}
if (!lines.length) {
return null;
}
return <i>{joinLines(lines)}</i>;
}
function nameDetails(entry: GedcomEntry) {
return ( return (
<h2 className="ui header"> <h2 className="ui header">
{entry.data {entry.data
@@ -125,17 +134,28 @@ function nameDetails(entry: GedcomEntry, tag: string) {
function getDetails( function getDetails(
entries: GedcomEntry[], entries: GedcomEntry[],
tags: string[], tags: string[],
detailsFunction: (entry: GedcomEntry, tag: string) => JSX.Element | null, detailsFunction: (entry: GedcomEntry) => JSX.Element | null,
): JSX.Element[] { ): JSX.Element[] {
return flatMap(tags, (tag) => return flatMap(tags, (tag) =>
entries entries
.filter((entry) => entry.tag === tag) .filter((entry) => entry.tag === tag)
.map((entry) => detailsFunction(entry, tag)), .map((entry) => detailsFunction(entry)),
) )
.filter((element) => element !== null) .filter((element) => element !== null)
.map((element) => <div className="ui segment">{element}</div>); .map((element) => <div className="ui segment">{element}</div>);
} }
function getOtherDetails(entries: GedcomEntry[]) {
return entries
.filter(
(entry) =>
!EXCLUDED_TAGS.includes(entry.tag) && !EVENT_TAGS.includes(entry.tag),
)
.map((entry) => dataDetails(entry))
.filter((element) => element !== null)
.map((element) => <div className="ui segment">{element}</div>);
}
export class Details extends React.Component<Props, {}> { export class Details extends React.Component<Props, {}> {
/** Make intl appear in this.context. */ /** Make intl appear in this.context. */
static contextTypes = { static contextTypes = {
@@ -147,11 +167,12 @@ export class Details extends React.Component<Props, {}> {
return ( return (
<div className="ui segments" id="details"> <div className="ui segments" id="details">
{getDetails(entries, NAME_TAGS, nameDetails)} {getDetails(entries, ['NAME'], nameDetails)}
{getDetails(entries, EVENT_TAGS, (entry, tag) => {getDetails(entries, EVENT_TAGS, (entry) =>
eventDetails(entry, tag, this.context.intl.locale), eventDetails(entry, this.context.intl.locale),
)} )}
{getDetails(entries, DATA_TAGS, dataDetails)} {getOtherDetails(entries)}
{getDetails(entries, ['NOTE'], noteDetails)}
</div> </div>
); );
} }