gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed formatting of the FindBar.js

Browse Source
This commit is contained in:
Andrey Okonetchnikov 2016-09-13 15:35:38 +02:00
parent eb14200643
commit a1a6840826
1 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/containers/FindBar.js
View File

@ -13,7 +13,12 @@ class FindBar extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this._compiledCommands = []; this._compiledCommands = [];
this._searchCommand = { search: true, regexp:`(?:${SEARCH})?(.*)`, param:{ name:'searchTerm', display:'' }, token: SEARCH }; this._searchCommand = {
search: true,
regexp: `(?:${SEARCH})?(.*)`,
param: { name: 'searchTerm', display: '' },
token: SEARCH
};
this.state = { this.state = {
value: '', value: '',
placeholder: PLACEHOLDER, placeholder: PLACEHOLDER,
@ -68,7 +73,7 @@ class FindBar extends Component {
if (match && match[1]) { if (match && match[1]) {
regexp += '(.*)'; regexp += '(.*)';
param = { name:match[1], display:match[2] || this._camelCaseToSpace(match[1]) }; param = { name: match[1], display: match[2] || this._camelCaseToSpace(match[1]) };
} }
return Object.assign({}, command, { return Object.assign({}, command, {
@ -144,6 +149,7 @@ class FindBar extends Component {
getSuggestions() { getSuggestions() {
return this._getSuggestions(this.state.value, this.state.activeScope, this._compiledCommands, this.props.defaultCommands); return this._getSuggestions(this.state.value, this.state.activeScope, this._compiledCommands, this.props.defaultCommands);
} }
// Memoized version // Memoized version
_getSuggestions(value, scope, commands, defaultCommands) { _getSuggestions(value, scope, commands, defaultCommands) {
if (scope) return []; // No autocomplete for scoped input if (scope) return []; // No autocomplete for scoped input
@ -152,7 +158,7 @@ class FindBar extends Component {
.filter(command => defaultCommands.indexOf(command.id) !== -1) .filter(command => defaultCommands.indexOf(command.id) !== -1)
.map(result => ( .map(result => (
Object.assign({}, result, { string: result.token } Object.assign({}, result, { string: result.token }
))); )));
} }
const results = fuzzy.filter(value, commands, { const results = fuzzy.filter(value, commands, {
@ -162,8 +168,8 @@ class FindBar extends Component {
}); });
const returnResults = results.slice(0, 4).map(result => ( const returnResults = results.slice(0, 4).map(result => (
Object.assign({}, result.original, { string:result.string } Object.assign({}, result.original, { string: result.string }
))); )));
returnResults.push(this._searchCommand); returnResults.push(this._searchCommand);
return returnResults; return returnResults;
@ -178,7 +184,7 @@ class FindBar extends Component {
index = ( index = (
highlightedIndex === this.getSuggestions().length - 1 || highlightedIndex === this.getSuggestions().length - 1 ||
this.state.isOpen === false this.state.isOpen === false
) ? 0 : highlightedIndex + 1; ) ? 0 : highlightedIndex + 1;
this.setState({ this.setState({
highlightedIndex: index, highlightedIndex: index,
isOpen: true, isOpen: true,
@ -290,7 +296,7 @@ class FindBar extends Component {
let children; let children;
if (!command.search) { if (!command.search) {
children = ( children = (
<span><span dangerouslySetInnerHTML={{ __html: command.string }} /></span> <span><span dangerouslySetInnerHTML={{ __html: command.string }}/></span>
); );
} else { } else {
children = ( children = (
@ -299,7 +305,8 @@ class FindBar extends Component {
<span><Icon type="search"/>Search... </span> : <span><Icon type="search"/>Search... </span> :
<span className={styles.faded}><Icon type="search"/>Search for: </span> <span className={styles.faded}><Icon type="search"/>Search for: </span>
} }
<strong>{this.state.value}</strong></span> <strong>{this.state.value}</strong>
</span>
); );
} }
return ( return (
@ -328,7 +335,7 @@ class FindBar extends Component {
renderActiveScope() { renderActiveScope() {
if (this.state.activeScope === SEARCH) { if (this.state.activeScope === SEARCH) {
return <div className={styles.inputScope}><Icon type="search"/> </div>; return <div className={styles.inputScope}><Icon type="search"/></div>;
} else { } else {
return <div className={styles.inputScope}>{this.state.activeScope}</div>; return <div className={styles.inputScope}>{this.state.activeScope}</div>;
} }
@ -358,6 +365,7 @@ class FindBar extends Component {
); );
} }
} }
FindBar.propTypes = { FindBar.propTypes = {
commands: PropTypes.arrayOf(PropTypes.shape({ commands: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired, id: PropTypes.string.isRequired,