alm
Version:
The best IDE for TypeScript
232 lines (231 loc) • 12.4 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ReactDOM = require('react-dom');
var csx = require("./base/csx");
var ui_1 = require("./ui");
var ui = require("./ui");
var utils = require("../common/utils");
var styles = require("./styles/styles");
var state = require("./state/state");
var commands = require("./commands/commands");
var react_redux_1 = require("react-redux");
var icon_1 = require("./components/icon");
var tabRegistry = require("./tabs/v2/tabRegistry");
var appTabsContainer_1 = require("./tabs/v2/appTabsContainer");
var typestyle = require("typestyle");
var csx_1 = require("./base/csx");
var inputBlackStyleBase = styles.Input.inputBlackStyleBase;
var inputBlackClassName = typestyle.style(inputBlackStyleBase);
exports.inputCodeStyle = {
fontFamily: 'monospace',
};
exports.searchOptionsLabelStyle = {
color: 'grey',
fontSize: '1.5rem',
fontWeight: 'bold',
cursor: 'pointer',
paddingLeft: '5px',
paddingRight: '5px',
};
var labelStyle = {
color: 'grey',
padding: '4px'
};
var FindAndReplace = /** @class */ (function (_super) {
__extends(FindAndReplace, _super);
function FindAndReplace() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.findInput = function () { return ReactDOM.findDOMNode(_this.refs.find); };
_this.replaceInput = function () { return ReactDOM.findDOMNode(_this.refs.replace); };
_this.regexInput = function () { return ReactDOM.findDOMNode(_this.refs.regex.refs.input); };
_this.caseInsensitiveInput = function () { return ReactDOM.findDOMNode(_this.refs.caseInsensitive.refs.input); };
_this.fullWordInput = function () { return ReactDOM.findDOMNode(_this.refs.fullWord.refs.input); };
_this.replaceWith = function () { return _this.replaceInput().value; };
/** Tab key is only called on key down :) */
_this.findKeyDownHandler = function (e) {
var _a = ui.getKeyStates(e), tab = _a.tab, shift = _a.shift, enter = _a.enter, mod = _a.mod;
if (shift && tab) {
_this.fullWordInput() && _this.fullWordInput().focus();
e.preventDefault();
return;
}
if (!state.getState().findOptions.query) {
return;
}
if (mod && enter && !shift) {
commands.replaceAll.emit({ newText: _this.replaceWith() });
return;
}
if (shift && enter) {
commands.findPrevious.emit({});
return;
}
if (enter) {
commands.findNext.emit({});
return;
}
};
_this.replaceKeyDownHandler = function (e) {
var _a = ui.getKeyStates(e), tab = _a.tab, shift = _a.shift, enter = _a.enter, mod = _a.mod;
if (!state.getState().findOptions.query) {
return;
}
if (mod && enter) {
commands.replaceAll.emit({ newText: _this.replaceWith() });
return;
}
// The cursor.replace function in code mirror focuses the editor *with a delay* :-/
var focusBackOnReplaceInput = function () { return setTimeout(function () { return _this.replaceInput().focus(); }, 50); };
if (shift && enter) {
commands.replacePrevious.emit({ newText: _this.replaceWith() });
focusBackOnReplaceInput();
return;
}
if (enter) {
commands.replaceNext.emit({ newText: _this.replaceWith() });
focusBackOnReplaceInput();
return;
}
};
_this.fullWordKeyDownHandler = function (e) {
var _a = ui.getKeyStates(e), tab = _a.tab, shift = _a.shift, enter = _a.enter;
if (tab && !shift) {
_this.findInput().focus();
e.preventDefault();
return;
}
};
_this.findChanged = utils.debounce(function () {
var val = _this.findInput().value;
state.setFindOptionsQuery(val);
}, 200);
_this.handleRegexChange = function (e) {
var val = e.target.checked;
state.setFindOptionsIsRegex(val);
};
_this.handleCaseSensitiveChange = function (e) {
var val = e.target.checked;
state.setFindOptionsIsCaseSensitive(val);
};
_this.handleFullWordChange = function (e) {
var val = e.target.checked;
state.setFindOptionsIsFullWord(val);
};
return _this;
}
FindAndReplace.prototype.componentDidMount = function () {
var _this = this;
this.disposible.add(commands.findAndReplace.on(function () {
/** Find input might not be there if current tab doesn't support search */
if (!_this.findInput()) {
return;
}
// if not shown and the current tab is an editor we should load the selected text from the editor (if any)
if (!state.getState().findOptions.isShown) {
var codeEditor = appTabsContainer_1.tabState.getFocusedCodeEditorIfAny();
if (codeEditor) {
var selectedString = codeEditor.getSelectionSearchString();
if (selectedString) {
state.setFindOptionsQuery(selectedString);
_this.findInput().value = selectedString;
}
}
}
state.setFindOptionsIsShown(true);
_this.findInput().select();
_this.replaceInput() && _this.replaceInput().select();
_this.findInput().focus();
}));
this.disposible.add(commands.esc.on(function () {
state.setFindOptionsIsShown(false);
_this.findInput() && _this.findInput().focus();
}));
this.disposible.add(appTabsContainer_1.tabStateChanged.on(function () {
_this.forceUpdate();
}));
};
// searchLocation = (): HTMLInputElement=> ReactDOM.findDOMNode(this.refs.find);
FindAndReplace.prototype.render = function () {
var shownStyle = this.props.findQuery.isShown ? {} : { display: 'none' };
/** Detect advanced find needed or not */
var tab = appTabsContainer_1.tabState.getSelectedTab();
var searchSupport = tab && tabRegistry.getTabConfigByUrl(tab.url).searchSupport;
var advancedFind = searchSupport && searchSupport == tabRegistry.TabSearchSupport.Advanced;
/** For Find and Replace Multi ... completely bail out */
if (!tab || !searchSupport) {
return React.createElement("noscript", null);
}
if (!advancedFind) {
return (React.createElement("div", { style: csx.extend(csx.horizontal, shownStyle) },
React.createElement("div", { style: csx_1.extend(csx.flex, csx.vertical) },
React.createElement("div", { style: csx_1.extend(csx.horizontal, csx.center, styles.padded1) },
React.createElement("input", { tabIndex: 1, ref: "find", placeholder: "Find", className: inputBlackClassName, style: csx_1.extend(exports.inputCodeStyle, csx.flex), onKeyDown: this.findKeyDownHandler, onChange: this.findChanged, defaultValue: this.props.findQuery.query })))));
}
return (React.createElement("div", { style: csx_1.extend(csx.vertical, shownStyle) },
React.createElement("div", { style: csx_1.extend(csx.horizontal, shownStyle) },
React.createElement("div", { style: csx_1.extend(csx.flex, csx.vertical) },
React.createElement("div", { style: csx_1.extend(csx.horizontal, csx.center, styles.padded1) },
React.createElement("input", { tabIndex: 1, ref: "find", placeholder: "Find", className: inputBlackClassName, style: csx.extend(exports.inputCodeStyle, csx.flex), onKeyDown: this.findKeyDownHandler, onChange: this.findChanged, defaultValue: this.props.findQuery.query })),
React.createElement("div", { style: csx_1.extend(csx.horizontal, csx.center, styles.padded1) },
React.createElement("input", { tabIndex: 2, ref: "replace", placeholder: "Replace", className: inputBlackClassName, style: csx.extend(exports.inputCodeStyle, csx.flex), onKeyDown: this.replaceKeyDownHandler }))),
React.createElement("div", { style: csx.centerCenter },
React.createElement("div", { style: csx.extend(csx.horizontal, csx.aroundJustified, styles.padded1) },
React.createElement("label", { style: csx_1.extend(csx.horizontal, csx.center) },
React.createElement(ui.Toggle, { tabIndex: 3, ref: "regex", onChange: this.handleRegexChange }),
React.createElement("span", { style: exports.searchOptionsLabelStyle }, ".*")),
React.createElement("label", { style: csx_1.extend(csx.horizontal, csx.center) },
React.createElement(ui.Toggle, { tabIndex: 4, ref: "caseInsensitive", onChange: this.handleCaseSensitiveChange }),
React.createElement("span", { style: exports.searchOptionsLabelStyle }, "Aa")),
React.createElement("label", { style: csx_1.extend(csx.horizontal, csx.center) },
React.createElement(ui.Toggle, { tabIndex: 5, ref: "fullWord", onKeyDown: this.fullWordKeyDownHandler, onChange: this.handleFullWordChange }),
React.createElement("span", { style: exports.searchOptionsLabelStyle },
React.createElement(icon_1.Icon, { name: "text-width" })))))),
React.createElement("div", { style: styles.Tip.root },
React.createElement("span", { style: styles.Tip.keyboardShortCutStyle }, "Esc"),
" to exit",
' ',
React.createElement("span", { style: styles.Tip.keyboardShortCutStyle }, "Enter"),
" to find/replace next",
' ',
React.createElement("span", { style: styles.Tip.keyboardShortCutStyle }, "Shift + Enter"),
" to find/replace previous",
' ',
React.createElement("span", { style: styles.Tip.keyboardShortCutStyle },
commands.modName,
" + Enter"),
" to replace all")));
};
FindAndReplace.prototype.handleSearchKeys = function (e) {
};
FindAndReplace.prototype.componentWillUpdate = function (nextProps, nextState) {
if (nextProps.findQuery.isShown !== this.props.findQuery.isShown) {
appTabsContainer_1.tabState.debouncedResize();
}
};
FindAndReplace = __decorate([
react_redux_1.connect(function (state) {
return {
findQuery: state.findOptions,
};
})
], FindAndReplace);
return FindAndReplace;
}(ui_1.BaseComponent));
exports.FindAndReplace = FindAndReplace;