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 TextareaAutosize from 'react-autosize-textarea';
import { mixin } from 'shared/utils/styles';
import Button from 'shared/components/Button';
import { Taskcafe } from 'shared/icons';
import { NavLink, Link } from 'react-router-dom';
import TaskAssignee from 'shared/components/TaskAssignee';
import { useRef } from 'react';
export const ProjectMember = styled(TaskAssignee)<{ zIndex: number }>`
z-index: ${props => props.zIndex};
@ -163,7 +161,20 @@ export const ProjectName = styled.h1`
padding: 3px 10px 3px 8px;
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;
resize: none;
overflow: hidden;
@ -171,7 +182,7 @@ export const ProjectNameTextarea = styled(TextareaAutosize)`
background: transparent;
border-radius: 3px;
box-shadow: none;
margin: -4px 0;
margin: 0;
letter-spacing: normal;
word-spacing: normal;

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

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