Expanding query input

microsoftgraph · Jul 13, 2021 · c4ade2c · c4ade2c
1 parent adbbc9f
commit c4ade2c
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
  "@azure/msal-browser": "2.12.0",
  "@babel/core": "7.12.13",
  "@babel/eslint-parser": "7.12.13",
+ "@fluentui/react": "^8.22.2",
  "@microsoft/applicationinsights-react-js": "2.3.1",
  "@microsoft/applicationinsights-web": "2.3.1",
  "@microsoft/microsoft-graph-client": "2.1.0",

diff --git a/src/app/views/query-runner/query-input/auto-complete/AutoComplete.tsx b/src/app/views/query-runner/query-input/auto-complete/AutoComplete.tsx
@@ -1,6 +1,7 @@
-import { getId, getTheme, Icon, ITextField, KeyCodes, Spinner, TextField, TooltipHost } from 'office-ui-fabric-react';
+import { getId, getTheme, Icon, ITextField, KeyCodes, Spinner, TooltipHost } from 'office-ui-fabric-react';
 import { ITooltipHostStyles } from 'office-ui-fabric-react/lib/components/Tooltip/TooltipHost.types';
 import React, { Component } from 'react';
+import { TextField } from '@fluentui/react/lib/TextField';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
@@ -23,6 +24,7 @@ import SuggestionsList from './SuggestionsList';
 
 class AutoComplete extends Component<IAutoCompleteProps, IAutoCompleteState> {
  private autoCompleteRef: React.RefObject<ITextField>;
+ private element: HTMLDivElement | null | undefined;
 
  constructor(props: IAutoCompleteProps) {
  super(props);
@@ -36,7 +38,8 @@ class AutoComplete extends Component<IAutoCompleteProps, IAutoCompleteState> {
  showSuggestions: false,
  userInput: this.props.sampleQuery.sampleUrl,
  queryUrl: this.props.sampleQuery.sampleUrl,
- compare: ''
+ compare: '',
+ multiline: false
  };
  }
 
@@ -57,13 +60,34 @@ class AutoComplete extends Component<IAutoCompleteProps, IAutoCompleteState> {
  this.props.contentChanged(userInput);
  };
 
+ public isOverflowing = (input: string) => {
+
+ function getTextWidth(text: string) {
+ const canvas = document.createElement('canvas');
+ const context = canvas.getContext('2d');
+
+ if (context === null) {
+ return 0;
+ }
+
+ context.font = getComputedStyle(document.body).font;
+ return context.measureText(text).width + 5;
+
+ }
+
+ return !!this.element
+ && getTextWidth(input) > this.element.scrollWidth;
+
+ }
+
  public onChange = (e: any) => {
  const { suggestions, showSuggestions, userInput: previousUserInput, compare } = this.state;
  const userInput = e.target.value;
 
  this.setState({
  userInput,
- queryUrl: userInput
+ queryUrl: userInput,
+ multiline: this.isOverflowing(userInput)
  });
 
  if (showSuggestions && suggestions.length) {
@@ -247,7 +271,8 @@ class AutoComplete extends Component<IAutoCompleteProps, IAutoCompleteState> {
  if (newUrl !== this.state.queryUrl) {
  this.setState({
  queryUrl: newUrl,
- userInput: newUrl
+ userInput: newUrl,
+ multiline: this.isOverflowing(newUrl)
  });
  }
  }
@@ -378,7 +403,8 @@ class AutoComplete extends Component<IAutoCompleteProps, IAutoCompleteState> {
  filteredSuggestions,
  showSuggestions,
  userInput,
- queryUrl
+ queryUrl,
+ multiline
  } = this.state;
 
  const currentTheme = getTheme();
@@ -388,20 +414,25 @@ class AutoComplete extends Component<IAutoCompleteProps, IAutoCompleteState> {
 
  return (
  <div onBlur={this.closeSuggestionDialog}>
- <TextField
- className={autoInput}
- type='text'
- autoComplete='off'
- onChange={this.onChange}
- onBlur={this.updateUrlContent}
- onKeyDown={this.onKeyDown}
- value={queryUrl}
- componentRef={this.autoCompleteRef}
- onRenderSuffix={(this.renderSuffix()) ? this.renderSuffix : undefined}
- ariaLabel={translateMessage('Query Sample Input')}
- role='textbox'
- errorMessage={!queryUrl ? translateMessage('Missing url') : ''}
- />
+ <div ref={(el) => {this.element = el}}>
+ <TextField 
+ className={autoInput}
+ multiline={multiline}
+ autoAdjustHeight 
+ resizable={false}
+ type='text'
+ autoComplete='off'
+ onChange={this.onChange}
+ onBlur={this.updateUrlContent}
+ onKeyDown={this.onKeyDown}
+ value={queryUrl}
+ componentRef={this.autoCompleteRef}
+ onRenderSuffix={(this.renderSuffix()) ? this.renderSuffix : undefined}
+ ariaLabel={translateMessage('Query Sample Input')}
+ role='textbox'
+ errorMessage={!queryUrl ? translateMessage('Missing url') : ''}
+ />
+ </div>
  {showSuggestions && userInput && filteredSuggestions.length > 0 &&
  <SuggestionsList
  filteredSuggestions={filteredSuggestions}

diff --git a/src/app/views/query-runner/query-input/auto-complete/auto-complete.styles.ts b/src/app/views/query-runner/query-input/auto-complete/auto-complete.styles.ts
@@ -44,7 +44,7 @@ export const autoCompleteStyles = (theme: ITheme) => {
  borderWidth: '1px',
  borderStyle: 'solid',
  borderColor: theme.palette.neutralLight,
- overflow: 'hidden',
+ overflow: 'hidden'
  },
  suggestionActive: {
  display: 'block',
@@ -61,6 +61,7 @@ export const autoCompleteStyles = (theme: ITheme) => {
  borderWidth: '1px',
  borderStyle: 'solid',
  overflow: 'hidden',
+ wordWrap: "normal",
  backgroundColor: theme.palette.neutralLight
  },
  suggestionTitle: {

diff --git a/src/types/auto-complete.ts b/src/types/auto-complete.ts
@@ -26,6 +26,7 @@ export interface IAutoCompleteState {
  userInput: string;
  compare: string;
  queryUrl: string;
+ multiline: boolean;
 }
 
 export interface ISuggestionsList {