imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Spotlight search labs (#7116)

Browse source
This commit is contained in:
Michael Telatynski 2021-12-10 11:50:01 +00:00 • committed by GitHub
parent c56833816a
commit 914b61239c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 907 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/structures/SearchBox.tsx
View file

@ -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}
/>