Merge pull request #3148 from yougotwill/fix/ses-2521/input_improvements

Fix pasting community URL in session input

ts/components/dialog/UserDetailsDialog.tsx

@@ -1,26 +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';
-
-const StyledInputContainer = styled(Flex)`
-  textarea {
-    cursor: default;
-    overflow: hidden;
-    top: 14px;
-  }
-`;
+import { Flex } from '../basic/Flex';
 
 export const UserDetailsDialog = (props: UserDetailsModalState) => {
   const [isEnlargedImageShown, setIsEnlargedImageShown] = useState(false);
@@ -79,12 +70,7 @@ export const UserDetailsDialog = (props: UserDetailsModalState) => {
         </div>
       </div>
       <SpacerLG />
-      <StyledInputContainer
-        container={true}
-        width={'100%'}
-        justifyContent="center"
-        alignItems="center"
-      >
+      <Flex container={true} width={'100%'} justifyContent="center" alignItems="center">
         <SessionInput
           value={props.conversationId}
           textSize="md"
@@ -93,7 +79,7 @@ export const UserDetailsDialog = (props: UserDetailsModalState) => {
           monospaced={true}
           isTextArea={true}
         />
-      </StyledInputContainer>
+      </Flex>
       <SpacerLG />
       <div className="session-modal__button-group__center">
         <SessionButton

ts/components/inputs/SessionInput.tsx

@@ -91,7 +91,6 @@ const StyledInput = styled(motion.input)<{
 `;
 
 export const StyledTextAreaContainer = styled(motion.div)<{
-  noValue: boolean;
   error: boolean;
   textSize: TextSizes;
   centerText?: boolean;
@@ -99,11 +98,12 @@ export const StyledTextAreaContainer = styled(motion.div)<{
 }>`
   display: flex;
   align-items: center;
-  overflow: hidden;
   position: relative;
-  height: ${props => (props.textSize ? `calc(var(--font-size-${props.textSize}) * 4)` : '48px')};
+  line-height: 1;
+  min-height: 80px;
+  height: 100%;
   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)')};
@@ -111,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 (
     <motion.label
@@ -281,6 +296,7 @@ export const SessionInput = (props: Props) => {
   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);
 
@@ -309,7 +325,6 @@ export const SessionInput = (props: Props) => {
     }
   };
 
-  // TODO[epic=ses-893] Type inputProps properly
   const inputProps: any = {
     id,
     type: correctType,
@@ -329,6 +344,9 @@ export const SessionInput = (props: Props) => {
     onBlur: (event: ChangeEvent<HTMLInputElement>) => {
       if (editable && !disableOnBlurEvent) {
         updateInputValue(event);
+        if (isEmpty(value) && isFocused) {
+          setIsFocused(false);
+        }
       }
     },
     onKeyDown: (event: KeyboardEvent) => {
@@ -386,11 +404,29 @@ export const SessionInput = (props: Props) => {
       >
         {isTextArea ? (
           <StyledTextAreaContainer {...containerProps}>
-            <textarea
-              {...inputProps}
-              ref={inputRef || textAreaRef}
-              aria-label={ariaLabel || 'session input text area'}
-            />
+            {isFocused ? (
+              <textarea
+                {...inputProps}
+                placeholder={''}
+                ref={inputRef || textAreaRef}
+                aria-label={ariaLabel || 'session input text area'}
+              />
+            ) : (
+              <StyledPlaceholder
+                error={textErrorStyle}
+                textSize={textSize}
+                editable={editable}
+                centerText={centerText}
+                monospaced={monospaced}
+                onClick={() => {
+                  if (editable) {
+                    setIsFocused(true);
+                  }
+                }}
+              >
+                {editable ? placeholder : value}
+              </StyledPlaceholder>
+            )}
           </StyledTextAreaContainer>
         ) : (
           <StyledInput

ts/components/leftpane/overlay/OverlayCommunity.tsx

@@ -62,7 +62,8 @@ export const OverlayCommunity = () => {
         return;
       }
       setGroupUrlError(undefined);
-      await joinOpenGroup(completeUrl || groupUrl, setGroupUrlError, joinSogsUICallback);
+      const url = (completeUrl && completeUrl.trim()) || (groupUrl && groupUrl.trim());
+      await joinOpenGroup(url, setGroupUrlError, joinSogsUICallback);
     } catch (e) {
       setGroupUrlError(e.message);
       window.log.warn(e);

ts/components/leftpane/overlay/OverlayInvite.tsx

@@ -55,11 +55,9 @@ const StyledButtonerContainer = styled.div`
 
 const StyledInputContainer = styled(Flex)`
   ${StyledTextAreaContainer} {
-    margin: var(--margins-sm);
-    textarea {
-      cursor: default;
-      overflow: hidden;
-      top: 12px;
+    padding: 0;
+    div:first-child {
+      padding: 0 var(--margins-sm);
     }
   }
 `;