From c101f4eeb563938bd793d59e6343137d6d512269 Mon Sep 17 00:00:00 2001 From: yougotwill Date: Mon, 12 Aug 2024 13:48:31 +1000 Subject: [PATCH] fix: multiline inputs now grow instead of scroll when the content is tall --- ts/components/dialog/UserDetailsDialog.tsx | 23 +----- ts/components/inputs/SessionInput.tsx | 81 +++++++++++++------ .../leftpane/overlay/OverlayCommunity.tsx | 3 +- .../leftpane/overlay/OverlayInvite.tsx | 9 +-- 4 files changed, 65 insertions(+), 51 deletions(-) diff --git a/ts/components/dialog/UserDetailsDialog.tsx b/ts/components/dialog/UserDetailsDialog.tsx index c4559e4a9..88fd8a3e5 100644 --- a/ts/components/dialog/UserDetailsDialog.tsx +++ b/ts/components/dialog/UserDetailsDialog.tsx @@ -1,29 +1,17 @@ import { useState } from 'react'; import useKey from 'react-use/lib/useKey'; -import styled from 'styled-components'; import { getConversationController } from '../../session/conversations'; import { openConversationWithMessages } from '../../state/ducks/conversations'; import { updateUserDetailsModal, UserDetailsModalState } from '../../state/ducks/modalDialog'; import { Avatar, AvatarSize } from '../avatar/Avatar'; -import { Flex } from '../basic/Flex'; import { SessionButton, SessionButtonType } from '../basic/SessionButton'; import { SpacerLG } from '../basic/Text'; import { CopyToClipboardButton } from '../buttons/CopyToClipboardButton'; import { SessionInput } from '../inputs'; import { SessionWrapperModal } from '../SessionWrapperModal'; import { ConversationTypeEnum } from '../../models/types'; -import { StyledTextAreaContainer } from '../inputs/SessionInput'; - -const StyledInputContainer = styled(Flex)` - ${StyledTextAreaContainer} { - overflow-y: hidden; - textarea { - cursor: default; - top: 10px; - } - } -`; +import { Flex } from '../basic/Flex'; export const UserDetailsDialog = (props: UserDetailsModalState) => { const [isEnlargedImageShown, setIsEnlargedImageShown] = useState(false); @@ -82,12 +70,7 @@ export const UserDetailsDialog = (props: UserDetailsModalState) => { - + { monospaced={true} isTextArea={true} /> - +
` display: flex; align-items: center; - overflow-y: ${props => (props.noValue ? 'hidden' : 'auto')}; position: relative; - min-height: 48px; + line-height: 1; + min-height: 80px; height: 100%; - max-height: ${props => - props.textSize ? `calc(var(--font-size-${props.textSize}) * 4)` : '48px'}; width: 100%; - margin: var(--margins-sm) var(--margins-md); + padding: 0 var(--margins-md); background: transparent; color: ${props => (props.error ? 'var(--danger-color)' : 'var(--input-text-color)')}; @@ -114,42 +111,57 @@ export const StyledTextAreaContainer = styled(motion.div)<{ font-family: ${props => (props.monospaced ? 'var(--font-mono)' : 'var(--font-default)')}; ${props => `font-size: var(--font-size-${props.textSize});`} - line-height: 1; - - ${props => props.centerText && 'text-align: center;'} textarea { display: flex; height: 100%; width: 100%; - padding: 0; + padding: var(--margins-md) 0; outline: 0; border: none; background: transparent; - position: absolute; - top: ${props => - `calc(var(--font-size-${props.textSize}) + ${props.textSize === 'xl' ? '8px' : '5px'})`}; - resize: none; word-break: break-all; user-select: all; - ${props => props.centerText && 'text-align: center;'} - &:placeholder-shown { + line-height: 1; font-family: ${props => (props.monospaced ? 'var(--font-mono)' : 'var(--font-default)')}; ${props => `font-size: var(--font-size-${props.textSize});`} - line-height: 1; } &::placeholder { color: var(--input-text-placeholder-color); - ${props => props.centerText && 'text-align: center;'} } } `; +const StyledPlaceholder = styled(motion.div)<{ + error: boolean; + textSize: TextSizes; + editable: boolean; + centerText?: boolean; + monospaced?: boolean; +}>` + position: relative; + width: 100%; + min-height: 80px; + height: 100%; + transition: opacity var(--default-duration) color var(--default-duration); + ${props => props.editable && 'cursor: pointer;'} + line-height: 1; + + background: transparent; + color: ${props => (props.error ? 'var(--danger-color)' : 'var(--input-text-color)')}; + + font-family: ${props => (props.monospaced ? 'var(--font-mono)' : 'var(--font-default)')}; + font-size: ${props => `var(--font-size-${props.textSize})`}; + ${props => + props.centerText && + 'text-align: center; display: flex; align-items: center; justify-content: center;'} +`; + const ErrorItem = (props: { id: string; error: string }) => { return ( { const [errorString, setErrorString] = useState(''); const [textErrorStyle, setTextErrorStyle] = useState(false); const [forceShow, setForceShow] = useState(false); + const [isFocused, setIsFocused] = useState(false); const textAreaRef = useRef(inputRef?.current || null); @@ -312,7 +325,6 @@ export const SessionInput = (props: Props) => { } }; - // TODO[epic=ses-893] Type inputProps properly const inputProps: any = { id, type: correctType, @@ -332,6 +344,9 @@ export const SessionInput = (props: Props) => { onBlur: (event: ChangeEvent) => { if (editable && !disableOnBlurEvent) { updateInputValue(event); + if (isEmpty(value) && isFocused) { + setIsFocused(false); + } } }, onKeyDown: (event: KeyboardEvent) => { @@ -389,11 +404,29 @@ export const SessionInput = (props: Props) => { > {isTextArea ? ( -