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

show shorter placeholder for filter feed when not focused

Browse source
This commit is contained in:
Bruno Windels 2019-09-10 10:58:11 +02:00
parent da98080859
commit 15d3774665
3 changed files with 15 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/structures/SearchBox.js
View file

@ -22,6 +22,7 @@ import { KeyCode } from '../../Keyboard';
import dis from '../../dispatcher';
import { throttle } from 'lodash';
import AccessibleButton from '../../components/views/elements/AccessibleButton';
import classNames from 'classnames';
module.exports = createReactClass({
displayName: 'SearchBox',
@ -47,6 +48,7 @@ module.exports = createReactClass({
getInitialState: function() {
return {
searchTerm: "",
blurred: true,
};
},
@ -94,6 +96,7 @@ module.exports = createReactClass({
},
_onFocus: function(ev) {
this.setState({blurred: false});
ev.target.select();
if (this.props.onFocus) {
this.props.onFocus(ev);
@ -101,6 +104,7 @@ module.exports = createReactClass({
},
_onBlur: function(ev) {
this.setState({blurred: true});
if (this.props.onBlur) {
this.props.onBlur(ev);
}
@ -128,6 +132,12 @@ module.exports = createReactClass({
onClick={ () => {this._clearSearch("button"); } }>
</AccessibleButton>) : undefined;
// 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="mx_SearchBox mx_textinput">
@ -140,8 +150,8 @@ module.exports = createReactClass({
onFocus={ this._onFocus }
onChange={ this.onChange }
onKeyDown={ this._onKeyDown }
placeholder={ this.props.placeholder }
onBlur={this._onBlur}
placeholder={ placeholder }
/>
{ clearButton }
</div>