1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-21 09:38:01 +02:00
joplin/packages/app-desktop/gui/NoteEditor/NoteTitle/NoteTitleBar.tsx

130 lines
3.8 KiB
TypeScript
Raw Normal View History

2020-11-05 18:58:23 +02:00
import * as React from 'react';
import { _ } from '@joplin/lib/locale';
import CommandService from '@joplin/lib/services/CommandService';
import { ChangeEvent, useCallback, useRef } from 'react';
2020-11-05 18:58:23 +02:00
import NoteToolbar from '../../NoteToolbar/NoteToolbar';
import { buildStyle } from '@joplin/lib/theme';
import time from '@joplin/lib/time';
2020-11-05 18:58:23 +02:00
interface Props {
themeId: number;
noteUserUpdatedTime: number;
noteTitle: string;
noteIsTodo: number;
isProvisional: boolean;
titleInputRef: React.RefObject<HTMLInputElement>;
onTitleChange(event: ChangeEvent<HTMLInputElement>): void;
disabled: boolean;
2020-11-05 18:58:23 +02:00
}
function styles_(props: Props) {
return buildStyle(['NoteEditorTitleBar'], props.themeId, theme => {
2020-11-05 18:58:23 +02:00
return {
titleInput: {
flex: 1,
display: 'inline-block',
paddingTop: 5,
minHeight: 38,
2020-11-05 18:58:23 +02:00
boxSizing: 'border-box',
fontWeight: 'bold',
paddingBottom: 5,
paddingLeft: 0,
paddingRight: 8,
color: theme.textStyle.color,
fontSize: Math.round(theme.textStyle.fontSize * 1.5),
backgroundColor: theme.backgroundColor,
border: 'none',
width: '100%',
2020-11-05 18:58:23 +02:00
},
titleDate: {
...theme.textStyle,
color: theme.colorFaded,
paddingLeft: 8,
whiteSpace: 'nowrap',
2020-11-05 18:58:23 +02:00
},
toolbarStyle: {
marginBottom: 0,
minWidth: 0,
2020-11-05 18:58:23 +02:00
},
};
});
}
const useReselectHandlers = () => {
const lastTitleFocus = useRef([0, 0]);
const lastTitleValue = useRef('');
const onTitleBlur: React.FocusEventHandler<HTMLInputElement> = useCallback((event) => {
const titleElement = event.currentTarget;
lastTitleFocus.current = [titleElement.selectionStart, titleElement.selectionEnd];
lastTitleValue.current = titleElement.value;
}, []);
const onTitleFocus: React.FocusEventHandler<HTMLInputElement> = useCallback((event) => {
const titleElement = event.currentTarget;
// By default, focusing the note title bar can cause its content to become selected. We override
// this with a more reasonable default:
if (titleElement.selectionStart === 0 && titleElement.selectionEnd === titleElement.value.length) {
if (lastTitleValue.current !== titleElement.value) {
titleElement.selectionStart = titleElement.value.length;
} else {
titleElement.selectionStart = lastTitleFocus.current[0];
titleElement.selectionEnd = lastTitleFocus.current[1];
}
}
}, []);
return { onTitleBlur, onTitleFocus };
};
export default function NoteTitleBar(props: Props) {
2020-11-05 18:58:23 +02:00
const styles = styles_(props);
const onTitleKeydown: React.KeyboardEventHandler<HTMLInputElement> = useCallback((event) => {
const titleElement = event.currentTarget;
const selectionAtEnd = titleElement.selectionEnd === titleElement.value.length;
if ((event.key === 'ArrowDown' && selectionAtEnd) || event.key === 'Enter') {
2020-11-05 18:58:23 +02:00
event.preventDefault();
const moveCursorToStart = event.key === 'ArrowDown';
void CommandService.instance().execute('focusElement', 'noteBody', { moveCursorToStart });
2020-11-05 18:58:23 +02:00
}
}, []);
const { onTitleFocus, onTitleBlur } = useReselectHandlers();
2020-11-05 18:58:23 +02:00
function renderTitleBarDate() {
return <span className="updated-time-label" style={styles.titleDate}>{time.formatMsToLocal(props.noteUserUpdatedTime)}</span>;
2020-11-05 18:58:23 +02:00
}
function renderNoteToolbar() {
return <NoteToolbar
themeId={props.themeId}
style={styles.toolbarStyle}
disabled={props.disabled}
2020-11-05 18:58:23 +02:00
/>;
}
return (
<div className='note-title-wrapper'>
2020-11-05 18:58:23 +02:00
<input
className="title-input"
2020-11-05 18:58:23 +02:00
type="text"
ref={props.titleInputRef}
placeholder={props.isProvisional ? (props.noteIsTodo ? _('Creating new to-do...') : _('Creating new note...')) : ''}
2020-11-05 18:58:23 +02:00
style={styles.titleInput}
readOnly={props.disabled}
2020-11-05 18:58:23 +02:00
onChange={props.onTitleChange}
onKeyDown={onTitleKeydown}
onFocus={onTitleFocus}
onBlur={onTitleBlur}
2020-11-05 18:58:23 +02:00
value={props.noteTitle}
/>
<div className='note-title-info-group'>
{renderTitleBarDate()}
{renderNoteToolbar()}
</div>
</div>
2020-11-05 18:58:23 +02:00
);
}