Skip to content

Commit

Permalink
QuickOpen done.
Browse files Browse the repository at this point in the history
  • Loading branch information
@supnate
supnate committed Mar 11, 2018
1 parent 9ce123e commit dadb2d9
Show file tree
Hide file tree
Showing 6 changed files with 96 additions and 47 deletions.
2 changes: 2 additions & 0 deletions packages/rekit-studio/.eslintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@
"new-cap": 0,
"class-methods-use-this": 0,
"react/jsx-filename-extension": 0,
"jsx-a11y/no-noninteractive-element-interactions": 0,
"no-return-assign": 0,
"react/prefer-stateless-function": 0,
"react/forbid-prop-types": 0,
"react/no-danger": 0,
Expand Down
3 changes: 1 addition & 2 deletions packages/rekit-studio/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,8 +133,7 @@
"express": "^4.15.2",
"express-history-api-fallback": "^2.0.0",
"file-loader": "^1.1.6",
"fuse.js": "^3.2.0",
"fuzzy": "^0.1.3",
"fuzzysort": "^1.1.1",
"highlight.js": "^9.11.0",
"immutability-helper": "^2.6.4",
"isomorphic-fetch": "^2.2.1",
Expand Down
115 changes: 78 additions & 37 deletions packages/rekit-studio/src/features/home/QuickOpen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Icon } from 'antd';
// import Fuse from 'fuse.js';
import fuzzy from 'fuzzy';
import { getElementData } from './helpers';
import fuzzysort from 'fuzzysort';
import scrollIntoView from 'dom-scroll-into-view';
import history from '../../common/history';
import * as actions from './redux/actions';

export class QuickOpen extends Component {
Expand All @@ -15,6 +15,7 @@ export class QuickOpen extends Component {
};

state = {
selectedIndex: 0,
search: '',
results: [],
visible: false,
Expand All @@ -27,8 +28,27 @@ export class QuickOpen extends Component {
document.body.removeEventListener('keydown', this.handleKeydown);
}

highlightMatch(item) {
const indexes = item.indexes.reduce((prev, i) => {
prev[i] = true;
return prev;
}, {});

const posLength = item.obj.position.length + 1;
const highlightedName = item.obj.name
.split('')
.map((c, i) => (indexes[posLength + i] ? `<strong>${c}</strong>` : c))
.join('');

const highlightedPos = item.obj.position
.split('')
.map((c, i) => (indexes[i] ? `<strong>${c}</strong>` : c))
.join('');
return `${highlightedName}<span class="element-description">${highlightedPos}</span>`;
}

handleKeydown = evt => {
if (evt.key === 'p' && evt.metaKey) {
if (evt.key === 'p' && (evt.metaKey || evt.ctrlKey)) {
evt.preventDefault();
evt.stopPropagation();
const newState = {
Expand All @@ -37,6 +57,7 @@ export class QuickOpen extends Component {
if (newState.visible) {
newState.search = '';
newState.results = [];
newState.selectedIndex = 0;
}
this.setState(newState, () => {
if (this.inputNode) this.inputNode.focus();
Expand All @@ -54,7 +75,6 @@ export class QuickOpen extends Component {
};

handleInputChange = evt => {
console.log('searching: ', evt.target.value);
this.setState({ search: evt.target.value });
if (evt.target.value.indexOf('|') >= 0) {
this.setState({ results: [] });
Expand All @@ -64,44 +84,60 @@ export class QuickOpen extends Component {
const { elementById } = this.props.home;
const list = Object.keys(elementById)
.map(k => {
const item = { ...elementById[k] };
if (/component|action/.test(item.type)) {
const item = {
...elementById[k],
};
if (/component|action|misc/.test(item.type)) {
item.position = item.file
.split('/')
.slice(0, -1)
.join('/');
item.toSearch = `${item.position}/${item.name}`;
}
return item;
})
.filter(e => /component|action/.test(e.type))
.map(e => `${e.position}/|${e.name}`);

const options = { pre: '<strong>', post: '</strong>' };
const results = fuzzy.filter(evt.target.value, list, options).map(s => {
const arr = s.string.split('|');
const name = arr.pop();
return `${name}<span class="element-description">${arr.join('')}</span>`;
});
this.setState({ results });
.filter(e => /component|action|misc/.test(e.type));

const results = fuzzysort.go(evt.target.value, list, { key: 'toSearch' });
this.setState({ results, selectedIndex: 0 });
};

handleInputKeyDown = evt => {
const scrollToSelected = () => {
scrollIntoView(this.resultsNode.querySelectorAll('li')[this.state.selectedIndex], this.resultsNode, {
onlyScrollIfNeeded: true,
});
};
switch (evt.key) {
case 'Enter':
this.handleItemClick(this.state.selectedIndex);
evt.preventDefault();
break;
case 'ArrowUp':
evt.preventDefault();
this.setState({
selectedIndex: this.state.selectedIndex < 1 ? this.state.results.length - 1 : this.state.selectedIndex - 1,
}, scrollToSelected);

break;
case 'ArrowDown':
evt.preventDefault();
this.setState({
selectedIndex: this.state.selectedIndex < this.state.results.length - 1 ? this.state.selectedIndex + 1 : 0,
}, scrollToSelected);
break;
default:
break;
}
};

handleItemClick = index => {
this.setState({ visible: false });
const item = this.state.results[index];
history.push(`/element/${encodeURIComponent(item.obj.file)}/code`);
};
render() {
if (!this.state.visible) return null;
const { elementById } = this.props.home;

const result = Object.keys(elementById)
.map(k => {
const item = { ...elementById[k] };
if (/component|action/.test(item.type)) {
item.position = item.file
.split('/')
.slice(0, -1)
.join('/');
}
return item;
})
.filter(e => /component|action|misc|file/.test(e.type))
.slice(0, 15);

const iconTypes = {
component: 'appstore-o',
Expand All @@ -117,16 +153,21 @@ export class QuickOpen extends Component {
onBlur={this.handleInputBlur}
placeholder="Type something to search..."
value={this.state.search}
onKeyDown={this.handleInputKeyDown}
onChange={this.handleInputChange}
/>
</div>
<div className="quick-open-result">
<div className="quick-open-result" ref={n => (this.resultsNode = n)}>
<ul>
{this.state.results.length === 0 && <li className="no-results is-selected">No results found.</li>}
{this.state.results.map((s, i) => (
<li className={i === 0 ? 'is-selected' : ''} key={s}>
<Icon type="appstore-o" />
<span dangerouslySetInnerHTML={{ __html: s }} />
{this.state.results.map((item, i) => (
<li
className={i === this.state.selectedIndex ? 'is-selected' : ''}
key={item.obj.file}
onClick={() => this.handleItemClick(i)}
>
<Icon type={iconTypes[item.obj.type]} />
<span dangerouslySetInnerHTML={{ __html: this.highlightMatch(item) }} />
</li>
))}
</ul>
Expand Down
2 changes: 1 addition & 1 deletion packages/rekit-studio/src/features/home/QuickOpen.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
left: 50%;
transform: translateX(-50%);
background-color: #191919;
max-height: 600px;
max-height: 500px;
overflow: auto;
&::-webkit-scrollbar {
width: 0.5rem;
Expand Down
11 changes: 11 additions & 0 deletions packages/rekit-studio/src/features/home/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,3 +36,14 @@ export function getElementFiles(homeState, file) {
if (data.type === 'component') files.style = `src/features/${data.feature}/${data.name}.${homeState.cssExt}`;
return files;
}

export function getElementUrl(element) {
switch (element.type) {
case 'component':
case 'action':
case 'misc':
return `/element/${encodeURIComponent(element.file)}/code`;
default:
return '/';
}
}
10 changes: 3 additions & 7 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4227,13 +4227,9 @@ functional-red-black-tree@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"

fuse.js@^3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.2.0.tgz#f0448e8069855bf2a3e683cdc1d320e7e2a07ef4"

fuzzy@^0.1.3:
version "0.1.3"
resolved "https://registry.yarnpkg.com/fuzzy/-/fuzzy-0.1.3.tgz#4c76ec2ff0ac1a36a9dccf9a00df8623078d4ed8"
fuzzysort@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/fuzzysort/-/fuzzysort-1.1.1.tgz#bf128f1a4cc6e6b7188665ac5676de46a3d81768"

gauge@~1.2.5:
version "1.2.7"
Expand Down

0 comments on commit dadb2d9

Please sign in to comment.