Spotlight search labs (#7116)

src/components/structures/RoomSearch.tsx

@@ -30,6 +30,9 @@ import { replaceableComponent } from "../../utils/replaceableComponent";
 import SpaceStore from "../../stores/spaces/SpaceStore";
 import { UPDATE_SELECTED_SPACE } from "../../stores/spaces";
 import { isMac } from "../../Keyboard";
+import SettingsStore from "../../settings/SettingsStore";
+import Modal from "../../Modal";
+import SpotlightDialog from "../views/dialogs/SpotlightDialog";
 
 interface IProps {
     isMinimized: boolean;
@@ -83,11 +86,19 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
         SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.clearInput);
     }
 
+    private openSpotlight() {
+        Modal.createTrackedDialog("Spotlight", "", SpotlightDialog, {}, "mx_SpotlightDialog_wrapper", false, true);
+    }
+
     private onAction = (payload: ActionPayload) => {
         if (payload.action === Action.ViewRoom && payload.clear_search) {
             this.clearInput();
         } else if (payload.action === 'focus_room_filter' && this.inputRef.current) {
-            this.inputRef.current.focus();
+            if (SettingsStore.getValue("feature_spotlight")) {
+                this.openSpotlight();
+            } else {
+                this.inputRef.current.focus();
+            }
         }
     };
 
@@ -107,6 +118,14 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
         this.setState({ query: this.inputRef.current.value });
     };
 
+    private onMouseDown = (ev: React.MouseEvent<HTMLInputElement>) => {
+        if (SettingsStore.getValue("feature_spotlight")) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.openSpotlight();
+        }
+    };
+
     private onFocus = (ev: React.FocusEvent<HTMLInputElement>) => {
         this.setState({ focused: true });
         ev.target.select();
@@ -162,11 +181,12 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
                 ref={this.inputRef}
                 className={inputClasses}
                 value={this.state.query}
+                onMouseDown={this.onMouseDown}
                 onFocus={this.onFocus}
                 onBlur={this.onBlur}
                 onChange={this.onChange}
                 onKeyDown={this.onKeyDown}
-                placeholder={_t("Filter")}
+                placeholder={SettingsStore.getValue("feature_spotlight") ? _t("Search") : _t("Filter")}
                 autoComplete="off"
             />
         );

src/components/structures/SearchBox.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef } from 'react';
+import React, { createRef, HTMLProps } from 'react';
 import { throttle } from 'lodash';
 import classNames from 'classnames';
 
@@ -25,7 +25,7 @@ import AccessibleButton from '../../components/views/elements/AccessibleButton';
 import { replaceableComponent } from "../../utils/replaceableComponent";
 import { Action } from '../../dispatcher/actions';
 
-interface IProps {
+interface IProps extends HTMLProps<HTMLInputElement> {
     onSearch?: (query: string) => void;
     onCleared?: (source?: string) => void;
     onKeyDown?: (ev: React.KeyboardEvent) => void;
@@ -135,11 +135,15 @@ export default class SearchBox extends React.Component<IProps, IState> {
     }
 
     public render(): JSX.Element {
+        /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
+        const { onSearch, onCleared, onKeyDown, onFocus, onBlur, className = "", placeholder, blurredPlaceholder,
+            autoFocus, initialValue, collapsed, enableRoomSearchFocus, ...props } = this.props;
+
         // check for collapsed here and
         // not at parent so we keep
         // searchTerm in our state
         // when collapsing and expanding
-        if (this.props.collapsed) {
+        if (collapsed) {
             return null;
         }
         const clearButton = (!this.state.blurred || this.state.searchTerm) ?
@@ -153,13 +157,10 @@ export default class SearchBox extends React.Component<IProps, IState> {
         // show a shorter placeholder when blurred, if requested
         // this is used for the room filter field that has
         // the explore button next to it when blurred
-        const placeholder = this.state.blurred ?
-            (this.props.blurredPlaceholder || this.props.placeholder) :
-            this.props.placeholder;
-        const className = this.props.className || "";
         return (
             <div className={classNames("mx_SearchBox", "mx_textinput", { "mx_SearchBox_blurred": this.state.blurred })}>
                 <input
+                    {...props}
                     key="searchfield"
                     type="text"
                     ref={this.search}
@@ -169,7 +170,7 @@ export default class SearchBox extends React.Component<IProps, IState> {
                     onChange={this.onChange}
                     onKeyDown={this.onKeyDown}
                     onBlur={this.onBlur}
-                    placeholder={placeholder}
+                    placeholder={this.state.blurred ? (blurredPlaceholder || placeholder) : placeholder}
                     autoComplete="off"
                     autoFocus={this.props.autoFocus}
                 />