atom-nuclide
Version:
A unified developer experience for web and mobile development, built as a suite of features on top of Atom to provide hackability and the support of an active community.
275 lines (242 loc) • 10.4 kB
JavaScript
Object.defineProperty(exports, '__esModule', {
value: true
});
/*
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _atom2;
function _atom() {
return _atom2 = require('atom');
}
var _reactForAtom2;
function _reactForAtom() {
return _reactForAtom2 = require('react-for-atom');
}
var _assert2;
function _assert() {
return _assert2 = _interopRequireDefault(require('assert'));
}
/**
* We need to create this custom HTML element so we can hook into the view
* registry. The overlay decoration only works through the view registry.
*/
var SuggestionListElement = (function (_HTMLElement) {
_inherits(SuggestionListElement, _HTMLElement);
function SuggestionListElement() {
_classCallCheck(this, SuggestionListElement);
_get(Object.getPrototypeOf(SuggestionListElement.prototype), 'constructor', this).apply(this, arguments);
}
_createClass(SuggestionListElement, [{
key: 'initialize',
value: function initialize(model) {
this._model = model;
return this;
}
// $FlowIssue -- readonly props: t10620219
}, {
key: 'attachedCallback',
value: function attachedCallback() {
(_reactForAtom2 || _reactForAtom()).ReactDOM.render((_reactForAtom2 || _reactForAtom()).React.createElement(SuggestionList, { suggestionList: this._model }), this);
}
// $FlowIssue -- readonly props: t10620219
}, {
key: 'detachedCallback',
value: function detachedCallback() {
(_reactForAtom2 || _reactForAtom()).ReactDOM.unmountComponentAtNode(this);
}
}, {
key: 'dispose',
value: function dispose() {
if (this.parentNode) {
this.parentNode.removeChild(this);
}
}
}]);
return SuggestionListElement;
})(HTMLElement);
var SuggestionList = (function (_React$Component) {
_inherits(SuggestionList, _React$Component);
function SuggestionList(props) {
_classCallCheck(this, SuggestionList);
_get(Object.getPrototypeOf(SuggestionList.prototype), 'constructor', this).call(this, props);
this.state = {
selectedIndex: 0
};
this._subscriptions = new (_atom2 || _atom()).CompositeDisposable();
this._boundConfirm = this._confirm.bind(this);
}
_createClass(SuggestionList, [{
key: 'componentWillMount',
value: function componentWillMount() {
var suggestionList = this.props.suggestionList;
var suggestion = suggestionList.getSuggestion();
(0, (_assert2 || _assert()).default)(suggestion);
// TODO(nmote): This is assuming `suggestion.callback` is always an Array, which is not true
// according to hyperclick/lib/types. It can also be a function.
this._items = suggestion.callback;
this._textEditor = suggestionList.getTextEditor();
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
var _this = this;
var textEditor = this._textEditor;
(0, (_assert2 || _assert()).default)(textEditor);
var textEditorView = atom.views.getView(textEditor);
var boundClose = this._close.bind(this);
this._subscriptions.add(atom.commands.add(textEditorView, {
'core:move-up': this._moveSelectionUp.bind(this),
'core:move-down': this._moveSelectionDown.bind(this),
'core:move-to-top': this._moveSelectionToTop.bind(this),
'core:move-to-bottom': this._moveSelectionToBottom.bind(this),
'core:cancel': boundClose,
'editor:newline': this._boundConfirm
}));
this._subscriptions.add(textEditor.onDidChange(boundClose));
this._subscriptions.add(textEditor.onDidChangeCursorPosition(boundClose));
// Prevent scrolling the editor when scrolling the suggestion list.
var stopPropagation = function stopPropagation(event) {
return event.stopPropagation();
};
(_reactForAtom2 || _reactForAtom()).ReactDOM.findDOMNode(this.refs.scroller).addEventListener('mousewheel', stopPropagation);
this._subscriptions.add(new (_atom2 || _atom()).Disposable(function () {
(_reactForAtom2 || _reactForAtom()).ReactDOM.findDOMNode(_this.refs.scroller).removeEventListener('mousewheel', stopPropagation);
}));
var keydown = function keydown(event) {
// If the user presses the enter key, confirm the selection.
if (event.keyCode === 13) {
event.stopImmediatePropagation();
_this._confirm();
}
};
textEditorView.addEventListener('keydown', keydown);
this._subscriptions.add(new (_atom2 || _atom()).Disposable(function () {
textEditorView.removeEventListener('keydown', keydown);
}));
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var itemComponents = this._items.map(function (item, index) {
var className = 'hyperclick-result-item';
if (index === _this2.state.selectedIndex) {
className += ' selected';
}
return (_reactForAtom2 || _reactForAtom()).React.createElement(
'li',
{ className: className,
key: index,
onMouseDown: _this2._boundConfirm,
onMouseEnter: _this2._setSelectedIndex.bind(_this2, index) },
item.title,
(_reactForAtom2 || _reactForAtom()).React.createElement(
'span',
{ className: 'right-label' },
item.rightLabel
)
);
});
return (_reactForAtom2 || _reactForAtom()).React.createElement(
'div',
{ className: 'popover-list select-list hyperclick-suggestion-list-scroller', ref: 'scroller' },
(_reactForAtom2 || _reactForAtom()).React.createElement(
'ol',
{ className: 'list-group', ref: 'selectionList' },
itemComponents
)
);
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps, prevState) {
if (prevState.selectedIndex !== this.state.selectedIndex) {
this._updateScrollPosition();
}
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this._subscriptions.dispose();
}
}, {
key: '_confirm',
value: function _confirm() {
this._items[this.state.selectedIndex].callback();
this._close();
}
}, {
key: '_close',
value: function _close() {
this.props.suggestionList.hide();
}
}, {
key: '_setSelectedIndex',
value: function _setSelectedIndex(index) {
this.setState({
selectedIndex: index
});
}
}, {
key: '_moveSelectionDown',
value: function _moveSelectionDown(event) {
if (this.state.selectedIndex < this._items.length - 1) {
this.setState({ selectedIndex: this.state.selectedIndex + 1 });
} else {
this._moveSelectionToTop();
}
if (event) {
event.stopImmediatePropagation();
}
}
}, {
key: '_moveSelectionUp',
value: function _moveSelectionUp(event) {
if (this.state.selectedIndex > 0) {
this.setState({ selectedIndex: this.state.selectedIndex - 1 });
} else {
this._moveSelectionToBottom();
}
if (event) {
event.stopImmediatePropagation();
}
}
}, {
key: '_moveSelectionToBottom',
value: function _moveSelectionToBottom(event) {
this.setState({ selectedIndex: Math.max(this._items.length - 1, 0) });
if (event) {
event.stopImmediatePropagation();
}
}
}, {
key: '_moveSelectionToTop',
value: function _moveSelectionToTop(event) {
this.setState({ selectedIndex: 0 });
if (event) {
event.stopImmediatePropagation();
}
}
}, {
key: '_updateScrollPosition',
value: function _updateScrollPosition() {
var listNode = (_reactForAtom2 || _reactForAtom()).ReactDOM.findDOMNode(this.refs.selectionList);
var selectedNode = listNode.getElementsByClassName('selected')[0];
selectedNode.scrollIntoViewIfNeeded(false);
}
}]);
return SuggestionList;
})((_reactForAtom2 || _reactForAtom()).React.Component);
exports.default = document.registerElement('hyperclick-suggestion-list', {
prototype: SuggestionListElement.prototype
});
module.exports = exports.default;