2018-12-09 02:18:10 +02:00
|
|
|
const React = require('react');
|
|
|
|
const { connect } = require('react-redux');
|
|
|
|
const { themeStyle } = require('../theme.js');
|
|
|
|
const { _ } = require('lib/locale.js');
|
|
|
|
|
|
|
|
class NoteSearchBarComponent extends React.Component {
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
|
|
|
|
this.searchInput_change = this.searchInput_change.bind(this);
|
2019-01-26 20:40:43 +02:00
|
|
|
this.searchInput_keyDown = this.searchInput_keyDown.bind(this);
|
2018-12-09 02:18:10 +02:00
|
|
|
this.previousButton_click = this.previousButton_click.bind(this);
|
|
|
|
this.nextButton_click = this.nextButton_click.bind(this);
|
|
|
|
this.closeButton_click = this.closeButton_click.bind(this);
|
2020-02-05 12:45:24 +02:00
|
|
|
|
|
|
|
this.backgroundColor = undefined;
|
2018-12-09 02:18:10 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
style() {
|
|
|
|
const theme = themeStyle(this.props.theme);
|
|
|
|
|
2020-03-14 01:46:14 +02:00
|
|
|
const style = {
|
2018-12-09 02:18:10 +02:00
|
|
|
root: Object.assign({}, theme.textStyle, {
|
|
|
|
backgroundColor: theme.backgroundColor,
|
|
|
|
color: theme.colorFaded,
|
|
|
|
}),
|
|
|
|
};
|
|
|
|
|
|
|
|
return style;
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
this.refs.searchInput.focus();
|
|
|
|
}
|
|
|
|
|
2020-02-05 12:45:24 +02:00
|
|
|
buttonIconComponent(iconName, clickHandler, isEnabled) {
|
2018-12-09 02:18:10 +02:00
|
|
|
const theme = themeStyle(this.props.theme);
|
|
|
|
|
|
|
|
const searchButton = {
|
|
|
|
paddingLeft: 4,
|
|
|
|
paddingRight: 4,
|
|
|
|
paddingTop: 2,
|
|
|
|
paddingBottom: 2,
|
|
|
|
textDecoration: 'none',
|
|
|
|
marginRight: 5,
|
|
|
|
};
|
|
|
|
|
|
|
|
const iconStyle = {
|
|
|
|
display: 'flex',
|
|
|
|
fontSize: Math.round(theme.fontSize) * 1.2,
|
|
|
|
color: theme.color,
|
2020-02-05 12:45:24 +02:00
|
|
|
opacity: isEnabled ? 1.0 : theme.disabledOpacity,
|
2018-12-09 02:18:10 +02:00
|
|
|
};
|
|
|
|
|
2020-05-17 16:34:42 +02:00
|
|
|
const icon = <i style={iconStyle} className={`fas ${iconName}`}></i>;
|
2018-12-09 02:18:10 +02:00
|
|
|
|
|
|
|
return (
|
2019-07-29 14:13:23 +02:00
|
|
|
<a href="#" style={searchButton} onClick={clickHandler}>
|
|
|
|
{icon}
|
|
|
|
</a>
|
2018-12-09 02:18:10 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
searchInput_change(event) {
|
|
|
|
const query = event.currentTarget.value;
|
|
|
|
this.triggerOnChange(query);
|
|
|
|
}
|
|
|
|
|
2019-01-26 20:40:43 +02:00
|
|
|
searchInput_keyDown(event) {
|
2019-07-29 14:13:23 +02:00
|
|
|
if (event.keyCode === 13) {
|
|
|
|
// ENTER
|
2019-01-26 20:40:43 +02:00
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
if (!event.shiftKey) {
|
|
|
|
if (this.props.onNext) this.props.onNext();
|
|
|
|
} else {
|
|
|
|
if (this.props.onPrevious) this.props.onPrevious();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-07-29 14:13:23 +02:00
|
|
|
if (event.keyCode === 27) {
|
|
|
|
// ESCAPE
|
2019-01-26 20:40:43 +02:00
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
if (this.props.onClose) this.props.onClose();
|
|
|
|
}
|
2020-02-05 12:45:24 +02:00
|
|
|
|
|
|
|
if (event.keyCode === 70) {
|
|
|
|
// F key
|
|
|
|
if (event.ctrlKey) {
|
|
|
|
event.target.select();
|
|
|
|
}
|
|
|
|
}
|
2019-01-26 20:40:43 +02:00
|
|
|
}
|
|
|
|
|
2019-09-13 00:16:42 +02:00
|
|
|
previousButton_click() {
|
2018-12-09 02:18:10 +02:00
|
|
|
if (this.props.onPrevious) this.props.onPrevious();
|
|
|
|
}
|
|
|
|
|
2019-09-13 00:16:42 +02:00
|
|
|
nextButton_click() {
|
2018-12-09 02:18:10 +02:00
|
|
|
if (this.props.onNext) this.props.onNext();
|
|
|
|
}
|
|
|
|
|
2019-09-13 00:16:42 +02:00
|
|
|
closeButton_click() {
|
2018-12-09 02:18:10 +02:00
|
|
|
if (this.props.onClose) this.props.onClose();
|
|
|
|
}
|
|
|
|
|
|
|
|
triggerOnChange(query) {
|
|
|
|
if (this.props.onChange) this.props.onChange(query);
|
|
|
|
}
|
|
|
|
|
|
|
|
focus() {
|
|
|
|
this.refs.searchInput.focus();
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2020-02-05 12:45:24 +02:00
|
|
|
const query = this.props.query ? this.props.query : '';
|
|
|
|
|
|
|
|
// backgroundColor needs to cached to a local variable to prevent the
|
|
|
|
// colour from blinking.
|
|
|
|
// For more info: https://github.com/laurent22/joplin/pull/2329#issuecomment-578376835
|
|
|
|
const theme = themeStyle(this.props.theme);
|
|
|
|
if (!this.props.searching) {
|
|
|
|
if (this.props.resultCount === 0 && query.length > 0) {
|
|
|
|
this.backgroundColor = theme.warningBackgroundColor;
|
|
|
|
} else {
|
|
|
|
this.backgroundColor = theme.backgroundColor;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (this.backgroundColor === undefined) {
|
|
|
|
this.backgroundColor = theme.backgroundColor;
|
|
|
|
}
|
2020-03-14 01:46:14 +02:00
|
|
|
const buttonEnabled = (this.backgroundColor === theme.backgroundColor);
|
2020-02-05 12:45:24 +02:00
|
|
|
|
|
|
|
const closeButton = this.buttonIconComponent('fa-times', this.closeButton_click, true);
|
|
|
|
const previousButton = this.buttonIconComponent('fa-chevron-up', this.previousButton_click, buttonEnabled);
|
|
|
|
const nextButton = this.buttonIconComponent('fa-chevron-down', this.nextButton_click, buttonEnabled);
|
|
|
|
|
|
|
|
const textStyle = Object.assign({
|
|
|
|
fontSize: theme.fontSize,
|
|
|
|
fontFamily: theme.fontFamily,
|
|
|
|
color: theme.colorFaded,
|
|
|
|
backgroundColor: theme.backgroundColor,
|
|
|
|
});
|
|
|
|
const matchesFoundString = (query.length > 0 && this.props.resultCount > 0) ? (
|
|
|
|
<div style={textStyle}>
|
|
|
|
{`${this.props.selectedIndex + 1} / ${this.props.resultCount}`}
|
|
|
|
</div>
|
|
|
|
) : null;
|
2018-12-09 02:18:10 +02:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div style={this.props.style}>
|
2019-07-29 14:13:23 +02:00
|
|
|
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
|
|
|
|
{closeButton}
|
2020-02-05 12:45:24 +02:00
|
|
|
<input
|
|
|
|
placeholder={_('Search...')}
|
|
|
|
value={query}
|
|
|
|
onChange={this.searchInput_change}
|
|
|
|
onKeyDown={this.searchInput_keyDown}
|
|
|
|
ref="searchInput"
|
|
|
|
type="text"
|
2020-02-14 02:57:20 +02:00
|
|
|
style={{ width: 200, marginRight: 5, backgroundColor: this.backgroundColor, color: theme.color }}
|
2020-02-05 12:45:24 +02:00
|
|
|
/>
|
2019-07-29 14:13:23 +02:00
|
|
|
{nextButton}
|
|
|
|
{previousButton}
|
2020-02-05 12:45:24 +02:00
|
|
|
{matchesFoundString}
|
2018-12-09 02:18:10 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-05-21 10:14:33 +02:00
|
|
|
const mapStateToProps = state => {
|
2018-12-09 02:18:10 +02:00
|
|
|
return {
|
|
|
|
theme: state.settings.theme,
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2019-07-29 14:13:23 +02:00
|
|
|
const NoteSearchBar = connect(
|
|
|
|
mapStateToProps,
|
|
|
|
null,
|
|
|
|
null,
|
|
|
|
{ withRef: true }
|
|
|
|
)(NoteSearchBarComponent);
|
2018-12-09 02:18:10 +02:00
|
|
|
|
2019-07-29 14:13:23 +02:00
|
|
|
module.exports = NoteSearchBar;
|