();
22 |
23 | static defaultProps = {
24 | multiline: true,
25 | };
26 |
27 | componentDidMount() {
28 | const textarea = this.textareaRef.current;
29 |
30 | if (!textarea) {
31 | return;
32 | }
33 |
34 | autosize(textarea);
35 | }
36 |
37 | componentWillUnmount() {
38 | const textarea = this.textareaRef.current;
39 |
40 | if (!textarea) {
41 | return;
42 | }
43 |
44 | autosize.destroy(textarea);
45 | }
46 |
47 | render() {
48 | const { onKeyDown, multiline, className, value, ...props } = this.props;
49 |
50 | return (
51 |
58 | );
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/app/src/components/Input/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import styles from './styles.module.css';
3 | import Textarea from './Textarea';
4 | import keyCodes from 'utils/keyCodes';
5 | import classNames from 'classnames';
6 | import { renderText, IRenderer } from './utils';
7 |
8 | interface IProps {
9 | id?: string;
10 | value: string;
11 | onChange: (value: string) => void;
12 | onStartEditing?: () => void;
13 | onPaste?: (value: string) => void;
14 | onKeyDown?: (e: any) => void;
15 | className?: string;
16 | multiline?: boolean;
17 | placeholder?: string;
18 | autoFocus?: boolean;
19 | tabIndex?: number | undefined;
20 | textRender?: IRenderer;
21 | }
22 |
23 | export default function Input({
24 | onChange,
25 | autoFocus = true,
26 | tabIndex = 0,
27 | onStartEditing,
28 | textRender = 'markdown',
29 | ...props
30 | }: IProps) {
31 | const [isEditing, setIsEditing] = React.useState(autoFocus && !props.value);
32 |
33 | if (!isEditing) {
34 | const startEditing = () => {
35 | setIsEditing(true);
36 | onStartEditing && onStartEditing();
37 | };
38 | return (
39 |
46 | {renderText(props.value, textRender)}
47 |
48 | );
49 | }
50 |
51 | return (
52 | {
55 | setIsEditing(false);
56 | onChange && onChange(value);
57 | }}
58 | />
59 | );
60 | }
61 |
62 | function InputInEditMode({
63 | value: initalValue,
64 | className,
65 | onPaste,
66 | onChange,
67 | onKeyDown,
68 | multiline,
69 | placeholder,
70 | }: IProps) {
71 | const [value, setValue] = React.useState(initalValue);
72 |
73 | return (
74 | 
Focused Task
2 |
3 | 
12 |
13 | 🍿 See it in action 🎥
14 |
15 |
16 | ### Features
17 |
18 | * Focus on a single task - *multitasking is dangerous* 🎯
19 | * Shortcut for everything - *you don't need mouse* 🛑 🖱
20 | * Menu-bar app - *it gets out of your way* 😇
21 | * Organize your tasks with - todos, bookmark links, and free-form text 📋
22 | * Drag & Drop file as bookmarks 🔖
23 | * Open-sourced 💻
24 |
25 | ### Download
26 |
27 | 👉 Download latest version 👈
28 |
29 | ## Development
30 |
31 | **Installation**
32 |
33 | Have `yarn` installed
34 |
35 | ```
36 | ./bin/bootstrap
37 | ```
38 |
39 | **Running**
40 |
41 | ```
42 | yarn dev
43 | ```
44 |
--------------------------------------------------------------------------------
/app/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | transform: { '^.+\\.tsx?$': 'ts-jest' },
3 | moduleNameMapper: {
4 | '\\.css$': '