Yadciel/taskcafe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: change project title input to auto-grow on content change

Browse Source
This commit is contained in:
Jordan Knott 2021-01-05 18:53:48 -06:00
parent ff15e7fb53
commit c2a0f5e5d0
2 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/shared/components/TopNavbar/Styles.ts
View File

@ -1,11 +1,9 @@
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
import TextareaAutosize from 'react-autosize-textarea';
import { mixin } from 'shared/utils/styles'; import { mixin } from 'shared/utils/styles';
import Button from 'shared/components/Button'; import Button from 'shared/components/Button';
import { Taskcafe } from 'shared/icons'; import { Taskcafe } from 'shared/icons';
import { NavLink, Link } from 'react-router-dom'; import { NavLink, Link } from 'react-router-dom';
import TaskAssignee from 'shared/components/TaskAssignee'; import TaskAssignee from 'shared/components/TaskAssignee';
import { useRef } from 'react';
export const ProjectMember = styled(TaskAssignee)<{ zIndex: number }>` export const ProjectMember = styled(TaskAssignee)<{ zIndex: number }>`
z-index: ${props => props.zIndex}; z-index: ${props => props.zIndex};
@ -163,7 +161,20 @@ export const ProjectName = styled.h1`
padding: 3px 10px 3px 8px; padding: 3px 10px 3px 8px;
margin: -4px 0; margin: -4px 0;
`; `;
export const ProjectNameTextarea = styled(TextareaAutosize)`
export const ProjectNameWrapper = styled.div`
position: relative;
`;
export const ProjectNameSpan = styled.div`
padding: 3px 10px 3px 8px;
font-weight: 600;
font-size: 20px;
`;
export const ProjectNameTextarea = styled.input`
position: absolute;
width: 100%;
left: 0;
top: 0;
border: none; border: none;
resize: none; resize: none;
overflow: hidden; overflow: hidden;
@ -171,7 +182,7 @@ export const ProjectNameTextarea = styled(TextareaAutosize)`
background: transparent; background: transparent;
border-radius: 3px; border-radius: 3px;
box-shadow: none; box-shadow: none;
margin: -4px 0; margin: 0;
letter-spacing: normal; letter-spacing: normal;
word-spacing: normal; word-spacing: normal;

25
frontend/src/shared/components/TopNavbar/index.tsx
View File

@ -13,6 +13,8 @@ import {
LogoContainer, LogoContainer,
NavSeparator, NavSeparator,
IconContainerWrapper, IconContainerWrapper,
ProjectNameWrapper,
ProjectNameSpan,
ProjectNameTextarea, ProjectNameTextarea,
InviteButton, InviteButton,
GlobalActions, GlobalActions,
@ -73,7 +75,7 @@ const ProjectHeading: React.FC<ProjectHeadingProps> = ({
}) => { }) => {
const [isEditProjectName, setEditProjectName] = useState(false); const [isEditProjectName, setEditProjectName] = useState(false);
const [projectName, setProjectName] = useState(initialProjectName); const [projectName, setProjectName] = useState(initialProjectName);
const $projectName = useRef<HTMLTextAreaElement>(null); const $projectName = useRef<HTMLInputElement>(null);
useEffect(() => { useEffect(() => {
if (isEditProjectName && $projectName && $projectName.current) { if (isEditProjectName && $projectName && $projectName.current) {
$projectName.current.focus(); $projectName.current.focus();
@ -84,7 +86,7 @@ const ProjectHeading: React.FC<ProjectHeadingProps> = ({
setProjectName(initialProjectName); setProjectName(initialProjectName);
}, [initialProjectName]); }, [initialProjectName]);
const onProjectNameChange = (event: React.FormEvent<HTMLTextAreaElement>): void => { const onProjectNameChange = (event: React.FormEvent<HTMLInputElement>): void => {
setProjectName(event.currentTarget.value); setProjectName(event.currentTarget.value);
}; };
const onProjectNameBlur = () => { const onProjectNameBlur = () => {
@ -106,14 +108,17 @@ const ProjectHeading: React.FC<ProjectHeadingProps> = ({
return ( return (
<> <>
{isEditProjectName ? ( {isEditProjectName ? (
<ProjectNameTextarea <ProjectNameWrapper>
ref={$projectName} <ProjectNameSpan>{projectName}</ProjectNameSpan>
onChange={onProjectNameChange} <ProjectNameTextarea
onKeyDown={onProjectNameKeyDown} ref={$projectName}
onBlur={onProjectNameBlur} onChange={onProjectNameChange}
spellCheck={false} onKeyDown={onProjectNameKeyDown}
value={projectName} onBlur={onProjectNameBlur}
/> spellCheck={false}
value={projectName}
/>
</ProjectNameWrapper>
) : ( ) : (
<ProjectName <ProjectName
onClick={() => { onClick={() => {