Skip to content

Add up and down arrow support - #30 #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Oct 23, 2022
Merged

Add up and down arrow support - #30 #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2be4d38
Fixed issue #30
serickson67 Oct 11, 2022
4c28631
fix linting
kamalkishor1991 Oct 14, 2022
4b94b32
Update index.tsx
kamalkishor1991 Oct 14, 2022
7bd9034
updated the input tracker to make use of React state using useRef()
serickson67 Oct 20, 2022
56c37a3
updated the input tracker to make use of React state using useRef() a…
serickson67 Oct 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 36 additions & 15 deletions src/components/Todo/common/Todo/Form/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,41 @@
import React, { useState } from "react";
import uuid from "react-uuid";
import AddIcon from "@material-ui/icons/Add";
import React, { useState, useRef } from 'react';
import uuid from 'react-uuid';
import AddIcon from '@material-ui/icons/Add';
import {
Container,
FormControl,
TextField,
makeStyles,
} from "@material-ui/core";
} from '@material-ui/core';

import { TodoItem } from "../../types";
import { TodoItem } from '../../types';

export interface AddProps {
addItem: (item: TodoItem | TodoItem[]) => void;
}

const useStyles = makeStyles({
root: {
display: "flex",
width: "100%",
display: 'flex',
width: '100%',
},
plusIcon: {
margin: "5px 10px 0px 8px",
margin: '5px 10px 0px 8px',
},
});

export const Form = (props: AddProps) => {
const classes = useStyles();
const { addItem } = props;
const [itemName, setItemName] = useState("");
const [itemName, setItemName] = useState('');
const inputRef = useRef<HTMLInputElement>(null);

return (
<Container className={classes.root}>
<AddIcon className={classes.plusIcon} />
<FormControl fullWidth>
<TextField
inputRef={inputRef}
onPaste={(e) => {
// Stop data actually being pasted into div
e.stopPropagation();
Expand All @@ -42,10 +44,10 @@ export const Form = (props: AddProps) => {
// Get pasted data via clipboard API
const clipboardData = e.clipboardData;
const pastedData = clipboardData
.getData("Text")
.split("\n")
.getData('Text')
.split('\n')
.reverse()
.filter((name) => name.trim() !== "");
.filter((name) => name.trim() !== '');

// Do whatever with pasteddata
const items = pastedData.map((name) => {
Expand All @@ -59,12 +61,31 @@ export const Form = (props: AddProps) => {
uuid: uuid(),
isComplete: false,
});
setItemName("");
setItemName('');
}}
placeholder="Add item."
placeholder='Add item.'
value={itemName}
className="w-10/12"
className='w-10/12'
autoFocus
onKeyDown={(e) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please do it with react state instead of dom manupulation.
You should declear a new state for focused item and use that to focus the item and manupulate that state on pressing up and down arrow.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry - got a little busy with a few other things, but I'll be working on updating that to use React state instead of dom manipulation early this week. Thanks for the feedback.

if (e.key === 'ArrowDown') {
// Move cursor down to the next item
const inputs = document.querySelectorAll("input[type='text']");
const inputsArray = Array.from(inputs);
const index = inputsArray.indexOf(
inputRef.current as HTMLInputElement
);

// Checks if the focused item is at the bottom
if (index < inputsArray.length - 1) {
const nextInputElement = inputsArray[
index + 1
] as HTMLInputElement;

nextInputElement.focus();
}
}
}}
/>
</FormControl>
</Container>
Expand Down
89 changes: 59 additions & 30 deletions src/components/Todo/common/Todo/Item/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,49 @@
import React, { FC, useEffect, useRef, useState } from "react";
import React, { FC, useEffect, useRef, useState } from 'react';

import uuid from "react-uuid";
import uuid from 'react-uuid';
import {
Checkbox,
Container,
FormControl,
makeStyles,
TextField,
} from "@material-ui/core";
import { Reorder, useMotionValue } from "framer-motion";
import CloseIcon from "@material-ui/icons/Close";
import DragIndicatorIcon from "@material-ui/icons/DragIndicator";
import useRaisedShadow from "./useRaisedShadow";
import { TodoItem } from "../../types";
} from '@material-ui/core';
import { Reorder, useMotionValue } from 'framer-motion';
import CloseIcon from '@material-ui/icons/Close';
import DragIndicatorIcon from '@material-ui/icons/DragIndicator';
import useRaisedShadow from './useRaisedShadow';
import { TodoItem } from '../../types';

const useStyles = makeStyles({
root: {
display: "flex",
width: "100%",
alignItems: "center",
display: 'flex',
width: '100%',
alignItems: 'center',
zIndex: 0,
},
underline: {
"&&&:before": {
borderBottom: "none",
'&&&:before': {
borderBottom: 'none',
},
},
textFeild: {
padding: "10px 0px 7px",
padding: '10px 0px 7px',
},
dragIndicatorIcon: {
cursor: "grab",
cursor: 'grab',
},
closeIcon: {
cursor: "pointer",
padding:"2px",
cursor: 'pointer',
padding: '2px',
'&:hover': {
backgroundColor: "#b9b5b5",
borderRadius: '50%',
}

backgroundColor: '#b9b5b5',
borderRadius: '50%',
},
},
reorderItem: {
listStyle: "none",
position: "relative",
backgroundColor: "white",
listStyle: 'none',
position: 'relative',
backgroundColor: 'white',
},
});

Expand All @@ -60,13 +59,14 @@ export const Item: FC<Props> = ({
itemIndex,
setItemsCallback,
addItem,
// handleArrowUpDown,
}) => {
const inputRef = useRef<HTMLInputElement>(null);
const y = useMotionValue(0);
const boxShadow = useRaisedShadow(y);
const classes = useStyles();

const [itemText, setItemText] = useState("");
const [itemText, setItemText] = useState('');
const [draggable, setDraggable] = useState(false);

useEffect(() => {
Expand Down Expand Up @@ -112,10 +112,10 @@ export const Item: FC<Props> = ({
// Get pasted data via clipboard API
const clipboardData = e.clipboardData;
const pastedData = clipboardData
.getData("Text")
.split("\n")
.getData('Text')
.split('\n')
.reverse()
.filter((name) => name.trim() !== "");
.filter((name) => name.trim() !== '');

// Do whatever with pasteddata
const items = pastedData.map((name) => {
Expand All @@ -131,10 +131,39 @@ export const Item: FC<Props> = ({
setItemsCallback([...items]);
}}
onKeyPress={(e) =>
e.key === "Enter" &&
e.key === 'Enter' &&
itemIndex < 1 &&
addItem({ name: "", uuid: uuid(), isComplete: false })
addItem({ name: '', uuid: uuid(), isComplete: false })
}
onKeyDown={(e) => {
const inputs = document.querySelectorAll("input[type='text']");
const inputsArray = Array.from(inputs);
const index = inputsArray.indexOf(
inputRef.current as HTMLInputElement
);

if (inputRef.current) {
if (e.key === 'ArrowUp') {
// Move cursor to the previous item
// Checks if the focused item is at the top
if (index >= 0) {
const nextInputElement = inputsArray[
index - 1
] as HTMLInputElement;
nextInputElement.focus();
}
} else if (e.key === 'ArrowDown') {
// Move cursor to the next item
// Checks if the focused item is at the bottom
if (index < inputsArray.length - 1) {
const nextInputElement = inputsArray[
index + 1
] as HTMLInputElement;
nextInputElement.focus();
}
}
}
}}
/>
</FormControl>
<CloseIcon
Expand Down