@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
195 lines • 8.47 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var react_1 = require("react");
var styled_components_1 = require("styled-components");
var PanelTextInput_1 = require("../PanelTextInput");
var RecentList_1 = require("./RecentList");
// tslint:disable-next-line:variable-name
var Container = (_a = ["\n width: 420px;\n padding-left: 4px;\n display: flex;\n flex-direction: column;\n"], _a.raw = ["\n width: 420px;\n padding-left: 4px;\n display: flex;\n flex-direction: column;\n"], styled_components_1.default.span(_a));
var RecentSearch = (function (_super) {
tslib_1.__extends(RecentSearch, _super);
function RecentSearch() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
selectedIndex: -1,
linkAdded: false,
isLoading: false
};
_this.updateInput = function (input) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var _a, _b, _c, _d, _e, _f;
return tslib_1.__generator(this, function (_g) {
switch (_g.label) {
case 0:
this.setState({
input: input
});
if (!this.state.activityProvider) return [3 /*break*/, 4];
if (!(input.length === 0)) return [3 /*break*/, 2];
_a = this.setState;
_b = {};
_c = limit;
return [4 /*yield*/, this.state.activityProvider.getRecentItems()];
case 1:
_a.apply(this, [(_b.items = _c.apply(void 0, [_g.sent()]),
_b.selectedIndex = -1,
_b)]);
return [3 /*break*/, 4];
case 2:
_d = this.setState;
_e = {};
_f = limit;
return [4 /*yield*/, this.state.activityProvider.searchRecent(input)];
case 3:
_d.apply(this, [(_e.items = _f.apply(void 0, [_g.sent()]),
_e.selectedIndex = 0,
_e)]);
_g.label = 4;
case 4: return [2 /*return*/];
}
});
}); };
_this.handleMouseMove = function (objectId) {
var items = _this.state.items;
if (items) {
var index = findIndex(items, function (item) { return item.objectId === objectId; });
_this.setState({
selectedIndex: index
});
}
};
_this.handleSubmit = function () {
var _a = _this.state, items = _a.items, input = _a.input, selectedIndex = _a.selectedIndex;
// add the link selected in the dropdown if there is one, otherwise submit the value of the input field
if (items && items.length > 0 && selectedIndex > -1) {
var item = items[selectedIndex];
_this.addLink(item.url, item.name);
}
else if (input && input.length > 0) {
_this.addLink(input);
}
};
_this.handleKeyDown = function (e) {
var _a = _this.state, items = _a.items, selectedIndex = _a.selectedIndex;
if (!items) {
return;
}
if (e.keyCode === 40) {
e.preventDefault();
_this.setState({
selectedIndex: (selectedIndex + 1) % items.length
});
}
else if (e.keyCode === 38) {
e.preventDefault();
_this.setState({
selectedIndex: selectedIndex > 0 ? selectedIndex - 1 : items.length - 1
});
}
};
_this.handleBlur = function () {
var _a = _this.props, editorView = _a.editorView, pluginState = _a.pluginState;
var linkAdded = _this.state.linkAdded;
if (linkAdded || editorView.state.selection.empty && !pluginState.active) {
pluginState.hideLinkPanel();
editorView.focus();
}
else {
pluginState.removeLink(editorView);
}
};
_this.addLink = function (href, text) {
var _a = _this.props, editorView = _a.editorView, pluginState = _a.pluginState;
if (editorView.state.selection.empty) {
pluginState.addLink({ href: href, text: text }, editorView);
}
else {
pluginState.updateLink({ href: href }, editorView);
}
_this.setState({
linkAdded: true
}, function () {
editorView.focus();
});
};
return _this;
}
RecentSearch.prototype.resolveProvider = function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var activityProvider;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this.props.activityProvider];
case 1:
activityProvider = _a.sent();
this.setState({
activityProvider: activityProvider
});
return [2 /*return*/, activityProvider];
}
});
});
};
RecentSearch.prototype.componentDidMount = function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var activityProvider;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this.resolveProvider()];
case 1:
activityProvider = _a.sent();
this.loadRecentItems(activityProvider);
return [2 /*return*/];
}
});
});
};
RecentSearch.prototype.loadRecentItems = function (activityProvider) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var _a, _b, _c;
return tslib_1.__generator(this, function (_d) {
switch (_d.label) {
case 0:
_d.trys.push([0, , 2, 3]);
this.setState({ isLoading: true });
_a = this.setState;
_b = {};
_c = limit;
return [4 /*yield*/, activityProvider.getRecentItems()];
case 1:
_a.apply(this, [(_b.items = _c.apply(void 0, [_d.sent()]), _b)]);
return [3 /*break*/, 3];
case 2:
this.setState({ isLoading: false });
return [7 /*endfinally*/];
case 3: return [2 /*return*/];
}
});
});
};
RecentSearch.prototype.render = function () {
var _a = this.state, items = _a.items, isLoading = _a.isLoading, selectedIndex = _a.selectedIndex;
return (React.createElement(Container, null,
React.createElement(PanelTextInput_1.default, { placeholder: "Paste link or search recently viewed", autoFocus: true, onSubmit: this.handleSubmit, onChange: this.updateInput, onBlur: this.handleBlur, onCancel: this.handleBlur, onKeyDown: this.handleKeyDown }),
React.createElement(RecentList_1.default, { items: items, isLoading: isLoading, selectedIndex: selectedIndex, onSelect: this.addLink, onMouseMove: this.handleMouseMove })));
};
return RecentSearch;
}(react_1.PureComponent));
exports.default = RecentSearch;
var findIndex = function (array, predicate) {
var index = -1;
array.some(function (item, i) {
if (predicate(item)) {
index = i;
return true;
}
return false;
});
return index;
};
var limit = function (items) {
return items.slice(0, 5);
};
var _a;
//# sourceMappingURL=index.js.map