Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: correct multiline in LG page list view #5220

Merged
merged 13 commits into from
Dec 9, 2020
Merged

fix: correct multiline in LG page list view #5220

Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
24b23d9
improve multiline exprience in EditableField
zhixzhan Dec 8, 2020
c23f510
Merge branch 'main' into zhixzhan/lg-listview-editable-filed
zhixzhan Dec 8, 2020
7fdecdb
Merge branch 'main' into zhixzhan/lg-listview-editable-filed
boydc2014 Dec 8, 2020
0db0324
Merge branch 'main' into zhixzhan/lg-listview-editable-filed
cwhitten Dec 8, 2020
7dc9664
Merge branch 'main' into zhixzhan/lg-listview-editable-filed
a-b-r-o-w-n Dec 8, 2020
bed0841
Merge branch 'main' into zhixzhan/lg-listview-editable-filed
hatpick Dec 8, 2020
1b41300
Merge branch 'main' into zhixzhan/lg-listview-editable-filed
zhixzhan Dec 9, 2020
351a136
Merge branch 'main' into zhixzhan/lg-listview-editable-filed
zhixzhan Dec 9, 2020
154c689
EditableField allow navigations
sorgh Dec 9, 2020
47c8092
Merge branch 'main' of https://github.com/microsoft/BotFramework-Comp…
sorgh Dec 9, 2020
6548bfc
minor changes
sorgh Dec 9, 2020
d211cf4
synthetic events can do it too!
sorgh Dec 9, 2020
ab70fa8
Merge branch 'zhixzhan/lg-listview-editable-filed' of https://github.…
sorgh Dec 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 26 additions & 7 deletions Composer/packages/client/src/components/EditableField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ import { IconButton } from 'office-ui-fabric-react/lib/Button';
import { IIconProps } from 'office-ui-fabric-react/lib/Icon';

import { FieldConfig, useForm } from '../hooks/useForm';

const allowedNavigationKeys = ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'PageDown', 'PageUp', 'Home', 'End'];

//------------------------
const defaultContainerStyle = (hasFocus, hasErrors) => css`
display: flex;
Expand All @@ -36,6 +39,17 @@ const defaultContainerStyle = (hasFocus, hasErrors) => css`
// turncat to show two line.
const maxCharacterNumbers = 120;

const isMultiLineText = (value?: string): boolean => {
if (!value) return false;
const valueTrimmed = value.trim();
return (
valueTrimmed.length > maxCharacterNumbers ||
valueTrimmed.includes('\r') ||
valueTrimmed.includes('\r\n') ||
valueTrimmed.includes('\n')
);
};

//------------------------
type IconProps = {
iconStyles?: Partial<IIconProps>;
Expand Down Expand Up @@ -122,13 +136,13 @@ const EditableField: React.FC<EditableFieldProps> = (props) => {
}, [value]);

useEffect(() => {
if (formData.value.length > maxCharacterNumbers) {
if (isMultiLineText(formData.value)) {
setMultiline(true);
return;
}

if (expanded || hasFocus) {
if (formData.value.length > maxCharacterNumbers) {
if (isMultiLineText(formData.value)) {
setMultiline(true);
}
}
Expand All @@ -142,7 +156,7 @@ const EditableField: React.FC<EditableFieldProps> = (props) => {
};

const handleChange = (_e: any, newValue?: string) => {
if (newValue && newValue?.length > maxCharacterNumbers) setMultiline(true);
if (isMultiLineText(newValue)) setMultiline(true);
updateField('value', newValue);
setHasBeenEdited(true);
onChange(newValue);
Expand Down Expand Up @@ -171,12 +185,17 @@ const EditableField: React.FC<EditableFieldProps> = (props) => {
fieldRef.current?.blur();
};

// single line, press Enter to submit
// multipe line, press Enter to submit, Shift+Enter get a new line,
// press Enter to submit, Shift+Enter get a new line,
const handleOnKeyDown = (e) => {
// This prevents host DetailsList's FocusZone from stealing the focus and consuming the navigation keys.
if (allowedNavigationKeys.includes(e.key)) {
e.stopPropagation();
}
const enterOnField = e.key === 'Enter' && hasFocus;
const multilineEnter = multiline ? !e.shiftKey : true;
if (enterOnField && multilineEnter) {
if (enterOnField && !multiline) {
setMultiline(true);
}
if (enterOnField && !e.shiftKey) {
handleCommit();
}
if (e.key === 'Escape') {
Expand Down