Skip to content

Commit 413db8a

Browse files
rebeccaalpertrebeccaalpert
committed
Add horizontal resizing
1 parent 44bfe49 commit 413db8a

File tree

2 files changed

+92
-42
lines changed

2 files changed

+92
-42
lines changed

‎packages/module/src/MessageBar/MessageBar.scss‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,15 @@
3434
&-actions {
3535
display: flex;
3636
justify-content: end;
37-
padding-block-start: var(--pf-chatbot__message-bar-child--PaddingBlockStart);
38-
padding-block-end: var(--pf-t--global--spacer--xs);
37+
padding-block-start: var(--pf-t--global--spacer--sm);
38+
padding-block-end: var(--pf-t--global--spacer--sm);
3939
gap: var(--pf-t--global--spacer--xs);
4040
}
4141

4242
&-input {
4343
flex: 1 1 auto;
44-
padding-block-start: var(--pf-chatbot__message-bar-child--PaddingBlockStart);
45-
padding-block-end: var(--pf-chatbot__message-bar-child--PaddingBlockEnd);
44+
padding-block-start: var(--pf-t--global--spacer--sm);
45+
padding-block-end: var(--pf-t--global--spacer--sm);
4646
}
4747
}
4848

@@ -71,3 +71,19 @@
7171
outline: none;
7272
}
7373
}
74+
75+
@media screen and (max-width: 359px) {
76+
.pf-chatbot__message-textarea {
77+
margin-top: var(--pf-t--global--spacer--md) !important;
78+
margin-bottom: var(--pf-t--global--spacer--md) !important;
79+
}
80+
}
81+
82+
.pf-chatbot--embedded {
83+
@media screen and (max-width: 415px) {
84+
.pf-chatbot__message-textarea {
85+
margin-top: var(--pf-t--global--spacer--md) !important;
86+
margin-bottom: var(--pf-t--global--spacer--md) !important;
87+
}
88+
}
89+
}

‎packages/module/src/MessageBar/MessageBar.tsx‎

Lines changed: 72 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import MicrophoneButton from './MicrophoneButton';
77
import { AttachButton } from './AttachButton';
88
import AttachMenu from '../AttachMenu';
99
import StopButton from './StopButton';
10+
import { ChatbotDisplayMode } from '../Chatbot';
1011

1112
export interface MessageBarWithAttachMenuProps {
1213
/** Flag to enable whether attach menu is open */
@@ -62,6 +63,8 @@ export interface MessageBarProps extends TextAreaProps {
6263
};
6364
/** A callback for when the text area value changes. */
6465
onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
66+
/** Display mode of chatbot, if you want to message bar to resize when the display mode changes */
67+
displayMode?: ChatbotDisplayMode;
6568
}
6669

6770
export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
@@ -77,15 +80,14 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
7780
hasStopButton,
7881
buttonProps,
7982
onChange,
83+
displayMode,
8084
...props
8185
}: MessageBarProps) => {
8286
// Text Input
8387
// --------------------------------------------------------------------------
8488
const [message, setMessage] = React.useState<string>('');
8589
const [isListeningMessage, setIsListeningMessage] = React.useState<boolean>(false);
86-
const [height, setHeight] = React.useState<number>();
8790
const [hasSentMessage, setHasSentMessage] = React.useState(false);
88-
8991
const textareaRef = React.useRef<HTMLTextAreaElement>(null);
9092
const attachButtonRef = React.useRef<HTMLButtonElement>(null);
9193

@@ -95,6 +97,12 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
9597
if (parent) {
9698
parent.style.setProperty('margin-top', `0rem`);
9799
parent.style.setProperty('margin-bottom', `0rem`);
100+
parent.style.setProperty('height', 'inherit');
101+
102+
const grandparent = parent.parentElement;
103+
if (grandparent) {
104+
grandparent.style.setProperty('flex-basis', 'auto');
105+
}
98106
}
99107
};
100108

@@ -112,25 +120,34 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
112120
parseInt(computed.getPropertyValue('border-bottom-width'));
113121
parent.style.setProperty('height', `${height}px`);
114122

115-
if (height > 32 || window.innerWidth <= 359) {
123+
if (height > 32 || window.innerWidth <= 507) {
116124
parent.style.setProperty('margin-bottom', `1rem`);
117125
parent.style.setProperty('margin-top', `1rem`);
118126
}
127+
}
128+
};
119129

120-
setHeight(height);
130+
const textIsLongerThan2Lines = (field: HTMLTextAreaElement) => {
131+
const lineHeight = parseFloat(window.getComputedStyle(field).lineHeight);
132+
const lines = field.scrollHeight / lineHeight;
133+
return lines > 2;
134+
};
135+
136+
const setAutoWidth = (field: HTMLTextAreaElement) => {
137+
const parent = field.parentElement;
138+
if (parent) {
139+
const grandparent = parent.parentElement;
140+
if (textIsLongerThan2Lines(field) && grandparent) {
141+
grandparent.style.setProperty('flex-basis', `100%`);
142+
}
121143
}
122144
};
123145

124146
const handleNewLine = (field: HTMLTextAreaElement) => {
125147
const parent = field.parentElement;
126-
const oldHeight = height ?? 0;
127148
if (parent) {
128-
if (oldHeight === 0) {
129-
parent.style.setProperty('margin-bottom', `1rem`);
130-
parent.style.setProperty('margin-top', `1rem`);
131-
} else {
132-
parent.style.setProperty('height', `${oldHeight + 16}px`);
133-
}
149+
parent.style.setProperty('margin-bottom', `1rem`);
150+
parent.style.setProperty('margin-top', `1rem`);
134151
}
135152
};
136153

@@ -145,27 +162,66 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
145162
React.useEffect(() => {
146163
const field = textareaRef.current;
147164
if (field) {
148-
setInitialLineHeight(field);
149-
setAutoHeight(field);
165+
if (field.value === '') {
166+
if (window.innerWidth > 507) {
167+
setInitialLineHeight(field);
168+
} else {
169+
handleMobileHeight(field);
170+
}
171+
} else {
172+
setAutoHeight(field);
173+
setAutoWidth(field);
174+
}
150175
}
176+
const resetHeight = () => {
177+
if (field) {
178+
if (field.value === '') {
179+
if (window.innerWidth > 507) {
180+
setInitialLineHeight(field);
181+
} else {
182+
handleMobileHeight(field);
183+
}
184+
} else {
185+
setAutoHeight(field);
186+
setAutoWidth(field);
187+
}
188+
}
189+
};
190+
window.addEventListener('resize', resetHeight);
191+
192+
return () => {
193+
window.removeEventListener('resize', resetHeight);
194+
};
151195
}, []);
152196

197+
React.useEffect(() => {
198+
const field = textareaRef.current;
199+
if (field) {
200+
if (field.value === '') {
201+
setInitialLineHeight(textareaRef.current);
202+
} else {
203+
setAutoHeight(textareaRef.current);
204+
setAutoWidth(field);
205+
}
206+
}
207+
}, [displayMode, message]);
208+
153209
React.useEffect(() => {
154210
const field = textareaRef.current;
155211
if (field) {
156212
setInitialLineHeight(field);
157-
setAutoHeight(field);
213+
setHasSentMessage(false);
158214
}
159-
setHasSentMessage(false);
160215
}, [hasSentMessage]);
161216

162217
const handleChange = React.useCallback((event) => {
163218
onChange && onChange(event, event.target.value);
164219
if (textareaRef.current) {
165220
if (event.target.value === '') {
166221
setInitialLineHeight(textareaRef.current);
222+
} else {
223+
setAutoHeight(textareaRef.current);
167224
}
168-
setAutoHeight(textareaRef.current);
169225
}
170226
setMessage(event.target.value);
171227
}, []);
@@ -179,13 +235,6 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
179235
});
180236
}, [onSendMessage]);
181237

182-
// want to exclude things like delete, shift, etc.
183-
const isTypeableKey = (key) => {
184-
if (key.length > 1) {
185-
return false;
186-
}
187-
return true;
188-
};
189238
const handleKeyDown = React.useCallback(
190239
(event: React.KeyboardEvent) => {
191240
if (event.key === 'Enter' && !event.shiftKey) {
@@ -199,11 +248,6 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
199248
handleNewLine(textareaRef.current);
200249
}
201250
}
202-
if (window.innerWidth <= 411 && isTypeableKey(event.key)) {
203-
if (textareaRef.current) {
204-
handleMobileHeight(textareaRef.current);
205-
}
206-
}
207251
},
208252
[handleSend]
209253
);
@@ -268,16 +312,6 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
268312
const messageBarContents = (
269313
<>
270314
<div className="pf-chatbot__message-bar-input">
271-
{/* <AutoTextArea
272-
ref={textareaRef}
273-
className="pf-chatbot__message-textarea"
274-
value={message as any} // Added any to make the third part TextArea component types happy. Remove when replced with PF TextArea
275-
onChange={handleChange as any} // Added any to make the third part TextArea component types happy. Remove when replced with PF TextArea
276-
onKeyDown={handleKeyDown}
277-
placeholder={isListeningMessage ? 'Listening' : 'Send a message...'}
278-
aria-label={isListeningMessage ? 'Listening' : 'Send a message...'}
279-
{...props}
280-
/>*/}
281315
<TextArea
282316
className="pf-chatbot__message-textarea"
283317
value={message}

0 commit comments

Comments
 (0)