chore: Improve design of comment bar in notes (#1102)
* Improve design of comment bar in notes Co-authored-by: v1b3m <vibenjamin6@gmail.com> * Add autoFocus Co-authored-by: v1b3m <vibenjamin6@gmail.com> * Add requested changes Co-authored-by: v1b3m <vibenjamin6@gmail.com> * Add requested changes Co-authored-by: v1b3m <vibenjamin6@gmail.com> * Align the text area Co-authored-by: v1b3m <vibenjamin6@gmail.com> * Use ref instead of getElementById Co-authored-by: v1b3m <vibenjamin6@gmail.com> --------- Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
This commit is contained in:
gitstart-twenty
@ -4,25 +4,45 @@ import { HotkeysEvent } from 'react-hotkeys-hook/dist/types';
|
||||
import TextareaAutosize from 'react-textarea-autosize';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { Button } from '@/ui/button/components/Button';
|
||||
import { RoundedIconButton } from '@/ui/button/components/RoundedIconButton';
|
||||
import { IconArrowRight } from '@/ui/icon/index';
|
||||
|
||||
const MAX_ROWS = 5;
|
||||
|
||||
export enum AutosizeTextInputVariant {
|
||||
Icon = 'icon',
|
||||
Button = 'button',
|
||||
}
|
||||
|
||||
type OwnProps = {
|
||||
onValidate?: (text: string) => void;
|
||||
minRows?: number;
|
||||
placeholder?: string;
|
||||
onFocus?: () => void;
|
||||
variant?: AutosizeTextInputVariant;
|
||||
buttonTitle?: string;
|
||||
};
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const StyledTextArea = styled(TextareaAutosize)`
|
||||
background: ${({ theme }) => theme.background.tertiary};
|
||||
const StyledInputContainer = styled.div`
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
type StyledTextAreaProps = {
|
||||
variant: AutosizeTextInputVariant;
|
||||
};
|
||||
|
||||
const StyledTextArea = styled(TextareaAutosize)<StyledTextAreaProps>`
|
||||
background: ${({ theme, variant }) =>
|
||||
variant === AutosizeTextInputVariant.Button
|
||||
? 'transparent'
|
||||
: theme.background.tertiary};
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
@ -31,9 +51,6 @@ const StyledTextArea = styled(TextareaAutosize)`
|
||||
font-weight: ${({ theme }) => theme.font.weight.regular};
|
||||
line-height: 16px;
|
||||
overflow: auto;
|
||||
padding: 8px;
|
||||
resize: none;
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
border: none;
|
||||
@ -44,6 +61,10 @@ const StyledTextArea = styled(TextareaAutosize)`
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
font-weight: ${({ theme }) => theme.font.weight.regular};
|
||||
}
|
||||
padding: ${({ variant }) =>
|
||||
variant === AutosizeTextInputVariant.Button ? '8px 0' : '8px'};
|
||||
resize: none;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
// TODO: this messes with the layout, fix it
|
||||
@ -51,19 +72,55 @@ const StyledBottomRightRoundedIconButton = styled.div`
|
||||
height: 0;
|
||||
position: relative;
|
||||
right: 26px;
|
||||
top: calc(100% - 26.5px);
|
||||
top: 6px;
|
||||
width: 0px;
|
||||
`;
|
||||
|
||||
const StyledSendButton = styled(Button)`
|
||||
margin-left: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
const StyledWordCounter = styled.div`
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
line-height: 150%;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
type StyledBottomContainerProps = {
|
||||
isTextAreaHidden: boolean;
|
||||
};
|
||||
|
||||
const StyledBottomContainer = styled.div<StyledBottomContainerProps>`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: ${({ theme, isTextAreaHidden }) =>
|
||||
isTextAreaHidden ? 0 : theme.spacing(4)};
|
||||
`;
|
||||
|
||||
const StyledCommentText = styled.div`
|
||||
cursor: text;
|
||||
padding-bottom: ${({ theme }) => theme.spacing(1)};
|
||||
padding-top: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
export function AutosizeTextInput({
|
||||
placeholder,
|
||||
onValidate,
|
||||
minRows = 1,
|
||||
onFocus,
|
||||
variant = AutosizeTextInputVariant.Icon,
|
||||
buttonTitle,
|
||||
}: OwnProps) {
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
const [isHidden, setIsHidden] = useState(
|
||||
variant === AutosizeTextInputVariant.Button,
|
||||
);
|
||||
const [text, setText] = useState('');
|
||||
|
||||
const isSendButtonDisabled = !text;
|
||||
const words = text.split(/\s|\n/).filter((word) => word).length;
|
||||
|
||||
useHotkeys(
|
||||
['shift+enter', 'enter'],
|
||||
@ -120,22 +177,57 @@ export function AutosizeTextInput({
|
||||
return (
|
||||
<>
|
||||
<StyledContainer>
|
||||
<StyledTextArea
|
||||
placeholder={placeholder || 'Write a comment'}
|
||||
maxRows={MAX_ROWS}
|
||||
minRows={computedMinRows}
|
||||
onChange={handleInputChange}
|
||||
value={text}
|
||||
onFocus={() => setIsFocused(true)}
|
||||
onBlur={() => setIsFocused(false)}
|
||||
/>
|
||||
<StyledBottomRightRoundedIconButton>
|
||||
<RoundedIconButton
|
||||
onClick={handleOnClickSendButton}
|
||||
icon={<IconArrowRight size={15} />}
|
||||
disabled={isSendButtonDisabled}
|
||||
/>
|
||||
</StyledBottomRightRoundedIconButton>
|
||||
<StyledInputContainer>
|
||||
{!isHidden && (
|
||||
<StyledTextArea
|
||||
autoFocus={variant === AutosizeTextInputVariant.Button}
|
||||
placeholder={placeholder ?? 'Write a comment'}
|
||||
maxRows={MAX_ROWS}
|
||||
minRows={computedMinRows}
|
||||
onChange={handleInputChange}
|
||||
value={text}
|
||||
onFocus={() => {
|
||||
onFocus?.();
|
||||
setIsFocused(true);
|
||||
}}
|
||||
onBlur={() => setIsFocused(false)}
|
||||
variant={variant}
|
||||
/>
|
||||
)}
|
||||
{variant === AutosizeTextInputVariant.Icon && (
|
||||
<StyledBottomRightRoundedIconButton>
|
||||
<RoundedIconButton
|
||||
onClick={handleOnClickSendButton}
|
||||
icon={<IconArrowRight size={15} />}
|
||||
disabled={isSendButtonDisabled}
|
||||
/>
|
||||
</StyledBottomRightRoundedIconButton>
|
||||
)}
|
||||
</StyledInputContainer>
|
||||
|
||||
{variant === AutosizeTextInputVariant.Button && (
|
||||
<StyledBottomContainer isTextAreaHidden={isHidden}>
|
||||
<StyledWordCounter>
|
||||
{isHidden ? (
|
||||
<StyledCommentText
|
||||
onClick={() => {
|
||||
setIsHidden(false);
|
||||
onFocus?.();
|
||||
}}
|
||||
>
|
||||
Write a comment
|
||||
</StyledCommentText>
|
||||
) : (
|
||||
`${words} word${words === 1 ? '' : 's'}`
|
||||
)}
|
||||
</StyledWordCounter>
|
||||
<StyledSendButton
|
||||
title={buttonTitle ?? 'Comment'}
|
||||
disabled={isSendButtonDisabled}
|
||||
onClick={handleOnClickSendButton}
|
||||
/>
|
||||
</StyledBottomContainer>
|
||||
)}
|
||||
</StyledContainer>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
|
||||
import { AutosizeTextInput } from '../AutosizeTextInput';
|
||||
import {
|
||||
AutosizeTextInput,
|
||||
AutosizeTextInputVariant,
|
||||
} from '../AutosizeTextInput';
|
||||
|
||||
const meta: Meta<typeof AutosizeTextInput> = {
|
||||
title: 'UI/Input/AutosizeTextInput',
|
||||
@ -14,3 +18,30 @@ export default meta;
|
||||
type Story = StoryObj<typeof AutosizeTextInput>;
|
||||
|
||||
export const Default: Story = {};
|
||||
|
||||
export const ButtonVariant: Story = {
|
||||
args: { variant: AutosizeTextInputVariant.Button },
|
||||
};
|
||||
|
||||
export const Catalog: Story = {
|
||||
parameters: {
|
||||
catalog: {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'variants',
|
||||
values: Object.values(AutosizeTextInputVariant),
|
||||
props: (variant: AutosizeTextInputVariant) => ({ variant }),
|
||||
labels: (variant: AutosizeTextInputVariant) =>
|
||||
`variant -> ${variant}`,
|
||||
},
|
||||
{
|
||||
name: 'minRows',
|
||||
values: [1, 4],
|
||||
props: (minRows: number) => ({ minRows }),
|
||||
labels: (minRows: number) => `minRows -> ${minRows}`,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
decorators: [CatalogDecorator],
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user