1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-30 10:36:35 +02:00
joplin/packages/app-desktop/gui/NoteEditor/NoteTitle/NoteTitleBar.tsx

128 lines
3.1 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';
2020-11-05 18:58:23 +02:00
import { ChangeEvent, useCallback } from 'react';
import NoteToolbar from '../../NoteToolbar/NoteToolbar';
import { buildStyle } from '@joplin/lib/theme';
import time from '@joplin/lib/time';
import styled from 'styled-components';
const StyledRoot = styled.div`
display: flex;
flex-direction: row;
align-items: center;
padding-left: ${props => props.theme.editorPaddingLeft}px;
@media (max-width: 800px) {
flex-direction: column;
align-items: flex-start;
}
`;
const InfoGroup = styled.div`
display: flex;
flex-direction: row;
align-items: center;
@media (max-width: 800px) {
border-top: 1px solid ${props => props.theme.dividerColor};
width: 100%;
}
`;
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
},
};
});
}
export default function NoteTitleBar(props: Props) {
2020-11-05 18:58:23 +02:00
const styles = styles_(props);
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
const onTitleKeydown = useCallback((event: any) => {
2020-11-05 18:58:23 +02:00
const keyCode = event.keyCode;
if (keyCode === 9) { // TAB
event.preventDefault();
if (event.shiftKey) {
2020-11-25 16:40:25 +02:00
void CommandService.instance().execute('focusElement', 'noteList');
2020-11-05 18:58:23 +02:00
} else {
2020-11-25 16:40:25 +02:00
void CommandService.instance().execute('focusElement', 'noteBody');
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 (
<StyledRoot>
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}
value={props.noteTitle}
/>
<InfoGroup>
{renderTitleBarDate()}
{renderNoteToolbar()}
</InfoGroup>
</StyledRoot>
2020-11-05 18:58:23 +02:00
);
}