Allow multi-line input for query box in Graph (#41)

This commit is contained in:
Laurent Nguyen 2020-06-23 09:35:16 +02:00 committed by GitHub
parent bccebaade5
commit 123902e7ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 140 additions and 11 deletions

View File

@ -4,4 +4,21 @@
vertical-align: middle;
display: inline-block;
width: 100%;
textarea {
width: 100%;
line-height: 1;
font-size: 14px;
padding: 6px 12px;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px 0 0 2px;
min-height: 25px;
resize: vertical;
&:focus {
border-color: #66afe9;
}
}
}

View File

@ -0,0 +1,34 @@
import React from "react";
import { shallow } from "enzyme";
import { InputTypeaheadComponent, InputTypeaheadComponentProps } from "./InputTypeaheadComponent";
import "../../../../externals/jquery.typeahead.min.js";
describe("inputTypeahead", () => {
it("renders <input />", () => {
const props: InputTypeaheadComponentProps = {
choices: [
{ caption: "item1", value: "value1" },
{ caption: "item2", value: "value2" }
],
placeholder: "placeholder",
useTextarea: false
};
const wrapper = shallow(<InputTypeaheadComponent {...props} />);
expect(wrapper).toMatchSnapshot();
});
it("renders <textarea />", () => {
const props: InputTypeaheadComponentProps = {
choices: [
{ caption: "item1", value: "value1" },
{ caption: "item2", value: "value2" }
],
placeholder: "placeholder",
useTextarea: true
};
const wrapper = shallow(<InputTypeaheadComponent {...props} />);
expect(wrapper).toMatchSnapshot();
});
});

View File

@ -7,6 +7,7 @@
*
*/
import * as React from "react";
import "./InputTypeahead.less";
import { KeyCodes } from "../../../Common/Constants";
export interface Item {
@ -17,7 +18,7 @@ export interface Item {
/**
* Parameters for this component
*/
interface InputTypeaheadComponentProps {
export interface InputTypeaheadComponentProps {
/**
* List of choices available in the dropdown.
*/
@ -66,6 +67,11 @@ interface InputTypeaheadComponentProps {
* true: show (X) button that clears the text inside the textbox when typing
*/
showCancelButton?: boolean;
/**
* true: use <textarea /> instead of <input />
*/
useTextarea?: boolean;
}
interface OnClickItem {
@ -135,14 +141,25 @@ export class InputTypeaheadComponent extends React.Component<
<div className="typeahead__container" ref={input => (this.containerElt = input)}>
<div className="typeahead__field">
<span className="typeahead__query">
<input
name="q"
type="search"
autoComplete="off"
aria-label="Input query"
ref={input => (this.inputElt = input)}
defaultValue={this.props.defaultValue}
/>
{this.props.useTextarea ? (
<textarea
rows={1}
name="q"
autoComplete="off"
aria-label="Input query"
ref={input => (this.inputElt = input)}
defaultValue={this.props.defaultValue}
/>
) : (
<input
name="q"
type="search"
autoComplete="off"
aria-label="Input query"
ref={input => (this.inputElt = input)}
defaultValue={this.props.defaultValue}
/>
)}
</span>
{this.props.showSearchButton && (
<span className="typeahead__button">

View File

@ -0,0 +1,61 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`inputTypeahead renders <input /> 1`] = `
<span
className="input-typeahead-container"
>
<div
className="input-typehead"
onKeyDown={[Function]}
>
<div
className="typeahead__container"
>
<div
className="typeahead__field"
>
<span
className="typeahead__query"
>
<input
aria-label="Input query"
autoComplete="off"
name="q"
type="search"
/>
</span>
</div>
</div>
</div>
</span>
`;
exports[`inputTypeahead renders <textarea /> 1`] = `
<span
className="input-typeahead-container"
>
<div
className="input-typehead"
onKeyDown={[Function]}
>
<div
className="typeahead__container"
>
<div
className="typeahead__field"
>
<span
className="typeahead__query"
>
<textarea
aria-label="Input query"
autoComplete="off"
name="q"
rows={1}
/>
</span>
</div>
</div>
</div>
</span>
`;

View File

@ -40,6 +40,7 @@ export class QueryContainerComponent extends React.Component<
submitFct={(inputValue: string, selection: InputTypeaheadComponent.Item) =>
this.onSubmit(inputValue, selection)
}
useTextarea={true}
/>
{this.renderQueryInputButton()}
</div>

View File

@ -6,7 +6,6 @@ import "../less/forms.less";
import "../less/menus.less";
import "../less/infobox.less";
import "../less/messagebox.less";
import "./Explorer/Controls/InputTypeahead/InputTypeahead.less";
import "./Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less";
import "./Explorer/Menus/NotificationConsole/NotificationConsole.less";
import "./Explorer/Menus/CommandBar/CommandBarComponent.less";