mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-12 08:54:00 +02:00
185 lines
5.4 KiB
TypeScript
185 lines
5.4 KiB
TypeScript
import * as React from 'react';
|
|
import { useRef, forwardRef, useImperativeHandle, useCallback } from 'react';
|
|
const { themeStyle } = require('@joplin/lib/theme');
|
|
const Mark = require('mark.js/dist/mark.min.js');
|
|
const markJsUtils = require('@joplin/lib/markJsUtils');
|
|
const Note = require('@joplin/lib/models/Note');
|
|
const { replaceRegexDiacritics, pregQuote } = require('@joplin/lib/string-utils');
|
|
const styled = require('styled-components').default;
|
|
|
|
const StyledRoot = styled.div`
|
|
width: ${(props: any) => props.width}px;
|
|
height: ${(props: any) => props.height}px;
|
|
opacity: ${(props: any) => props.isProvisional ? '0.5' : '1'};
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: stretch;
|
|
position: relative;
|
|
background-color: ${(props: any) => props.selected ? props.theme.selectedColor : 'none'};
|
|
|
|
border-style: solid;
|
|
border-color: ${(props: any) => props.theme.color};
|
|
border-top-width: ${(props: any) => props.dragItemPosition === 'top' ? 2 : 0}px;
|
|
border-bottom-width: ${(props: any) => props.dragItemPosition === 'bottom' ? 2 : 0}px;
|
|
border-right: none;
|
|
border-left: none;
|
|
|
|
// https://stackoverflow.com/questions/50174448/css-how-to-add-white-space-before-elements-border
|
|
&::before {
|
|
content: '';
|
|
border-bottom: 1px solid ${(props: any) => props.theme.dividerColor};
|
|
width: ${(props: any) => props.width - 32}px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 16px;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: ${(props: any) => props.theme.backgroundColorHover3};
|
|
}
|
|
`;
|
|
|
|
interface NoteListItemProps {
|
|
themeId: number,
|
|
width: number,
|
|
height: number,
|
|
style: any,
|
|
dragItemIndex: number,
|
|
highlightedWords: string[],
|
|
index: number,
|
|
isProvisional: boolean,
|
|
isSelected: boolean,
|
|
isWatched: boolean
|
|
item: any,
|
|
itemCount: number,
|
|
onCheckboxClick: any,
|
|
onDragStart: any,
|
|
onNoteDragOver: any,
|
|
onNoteDrop: any,
|
|
onTitleClick: any,
|
|
onContextMenu(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>): void,
|
|
}
|
|
|
|
function NoteListItem(props: NoteListItemProps, ref: any) {
|
|
const item = props.item;
|
|
const theme = themeStyle(props.themeId);
|
|
const hPadding = 16;
|
|
|
|
const anchorRef = useRef(null);
|
|
|
|
useImperativeHandle(ref, () => {
|
|
return {
|
|
focus: function() {
|
|
if (anchorRef.current) anchorRef.current.focus();
|
|
},
|
|
};
|
|
});
|
|
|
|
let dragItemPosition = '';
|
|
if (props.dragItemIndex === props.index) {
|
|
dragItemPosition = 'top';
|
|
} else if (props.index === props.itemCount - 1 && props.dragItemIndex >= props.itemCount) {
|
|
dragItemPosition = 'bottom';
|
|
}
|
|
|
|
const onTitleClick = useCallback((event) => {
|
|
props.onTitleClick(event, props.item);
|
|
}, [props.onTitleClick, props.item]);
|
|
|
|
const onCheckboxClick = useCallback((event) => {
|
|
props.onCheckboxClick(event, props.item);
|
|
}, [props.onCheckboxClick, props.item]);
|
|
|
|
// Setting marginBottom = 1 because it makes the checkbox looks more centered, at least on Windows
|
|
// but don't know how it will look in other OSes.
|
|
function renderCheckbox() {
|
|
if (!item.is_todo) return null;
|
|
|
|
return (
|
|
<div style={{ display: 'flex', height: props.height, alignItems: 'center', paddingLeft: hPadding }}>
|
|
<input
|
|
style={{ margin: 0, marginBottom: 1, marginRight: 5 }}
|
|
type="checkbox"
|
|
checked={!!item.todo_completed}
|
|
onChange={onCheckboxClick}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
let listItemTitleStyle = Object.assign({}, props.style.listItemTitle);
|
|
listItemTitleStyle.paddingLeft = !item.is_todo ? hPadding : 4;
|
|
if (item.is_todo && !!item.todo_completed) listItemTitleStyle = Object.assign(listItemTitleStyle, props.style.listItemTitleCompleted);
|
|
|
|
const displayTitle = Note.displayTitle(item);
|
|
let titleComp = null;
|
|
|
|
if (props.highlightedWords.length) {
|
|
const titleElement = document.createElement('span');
|
|
titleElement.textContent = displayTitle;
|
|
const mark = new Mark(titleElement, {
|
|
exclude: ['img'],
|
|
acrossElements: true,
|
|
});
|
|
|
|
mark.unmark();
|
|
|
|
for (let i = 0; i < props.highlightedWords.length; i++) {
|
|
const w = props.highlightedWords[i];
|
|
|
|
markJsUtils.markKeyword(mark, w, {
|
|
pregQuote: pregQuote,
|
|
replaceRegexDiacritics: replaceRegexDiacritics,
|
|
});
|
|
}
|
|
|
|
// Note: in this case it is safe to use dangerouslySetInnerHTML because titleElement
|
|
// is a span tag that we created and that contains data that's been inserted as plain text
|
|
// with `textContent` so it cannot contain any XSS attacks. We use this feature because
|
|
// mark.js can only deal with DOM elements.
|
|
// https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
|
|
titleComp = <span dangerouslySetInnerHTML={{ __html: titleElement.outerHTML }}></span>;
|
|
} else {
|
|
titleComp = <span>{displayTitle}</span>;
|
|
}
|
|
|
|
const watchedIconStyle = {
|
|
paddingRight: 4,
|
|
color: theme.color,
|
|
};
|
|
const watchedIcon = props.isWatched ? null : <i style={watchedIconStyle} className={'fa fa-share-square'}></i>;
|
|
|
|
// Need to include "todo_completed" in key so that checkbox is updated when
|
|
// item is changed via sync.
|
|
return (
|
|
<StyledRoot
|
|
className="list-item-container"
|
|
onDragOver={props.onNoteDragOver}
|
|
onDrop={props.onNoteDrop}
|
|
width={props.width}
|
|
height={props.height}
|
|
isProvisional={props.isProvisional}
|
|
selected={props.isSelected}
|
|
dragItemPosition={dragItemPosition}
|
|
>
|
|
{renderCheckbox()}
|
|
<a
|
|
ref={anchorRef}
|
|
onContextMenu={props.onContextMenu}
|
|
href="#"
|
|
draggable={true}
|
|
style={listItemTitleStyle}
|
|
onClick={onTitleClick}
|
|
onDragStart={props.onDragStart}
|
|
data-id={item.id}
|
|
>
|
|
{watchedIcon}
|
|
{titleComp}
|
|
</a>
|
|
</StyledRoot>
|
|
);
|
|
}
|
|
|
|
export default forwardRef(NoteListItem);
|