@progress/kendo-react-editor
Version:
Kendo UI for React Editor package
244 lines • 15.9 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
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 extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ReactDOM = require("react-dom");
var kendo_react_dialogs_1 = require("@progress/kendo-react-dialogs");
var kendo_react_layout_1 = require("@progress/kendo-react-layout");
var kendo_react_intl_1 = require("@progress/kendo-react-intl");
var messages_1 = require("./../messages");
var toolsSettings_1 = require("./../config/toolsSettings");
var utils_1 = require("./../tools/utils");
var kendo_editor_common_1 = require("@progress/kendo-editor-common");
var enter = 13, esc = 27;
var checkboxProps = { className: 'k-checkbox', type: 'checkbox' };
var settings = toolsSettings_1.EditorToolsSettings.findAndReplace;
/**
* @hidden
*/
var FindAndReplaceDialog = /** @class */ (function (_super) {
__extends(FindAndReplaceDialog, _super);
function FindAndReplaceDialog(props) {
var _this = _super.call(this, props) || this;
_this.onTabSelect = function (event) {
_this.setState({ selectedTab: event.selected });
};
_this.onClose = function () {
var view = _this.props.view;
var state = view.state;
var transaction = state.tr.setSelection(kendo_editor_common_1.TextSelection.create(state.doc, state.selection.from, state.selection.to));
view.updateState(state.apply(transaction));
view.focus();
_this.props.onClose.call(undefined);
};
_this.matchesMessage = function (locMessage) {
var matches = _this.state.matches;
var nextMatch = _this.state.nextMatch;
var cur = 0, all = 0;
if (matches && nextMatch) {
var current = matches.findIndex(function (s) { return s.eq(nextMatch); });
cur = current === -1 ? matches.length : current + 1;
all = matches.length;
}
return utils_1.formatString(locMessage, cur, all);
};
_this.onFindNext = function () {
_this.onFind();
};
_this.onFindPrev = function () {
_this.onFind(true);
};
_this.onFind = function (backward) {
if (backward === void 0) { backward = false; }
var view = _this.props.view;
var _a = _this.state, text = _a.searchText, matchCase = _a.matchCase, matchCyclic = _a.matchCyclic, matchWord = _a.matchWord, useRegExp = _a.useRegExp;
var searchOptions = { text: text, matchWord: matchWord, matchCase: matchCase, useRegExp: useRegExp, backward: backward, matchCyclic: matchCyclic };
var selectionResult = kendo_editor_common_1.find(view.state, searchOptions);
if (selectionResult) {
var transaction = view.state.tr.setSelection(selectionResult);
transaction.scrollIntoView();
view.updateState(view.state.apply(transaction));
_this.setState({ nextMatch: selectionResult });
}
};
_this.onReplace = function () {
var view = _this.props.view;
var selection = view.state.selection;
var replaceText = _this.state.replaceText;
if (!selection.empty) {
var start = selection.from;
var end = start + replaceText.length;
var transaction = kendo_editor_common_1.replace(selection, replaceText, view.state.tr);
transaction.setSelection(kendo_editor_common_1.TextSelection.create(transaction.doc, start, end));
transaction.scrollIntoView();
view.dispatch(transaction);
_this.setNextState({});
}
};
_this.onReplaceAll = function () {
var view = _this.props.view;
var _a = _this.state, searchText = _a.searchText, replaceText = _a.replaceText, matchCase = _a.matchCase, matchWord = _a.matchWord, useRegExp = _a.useRegExp;
var searchOptions = { text: searchText, matchWord: matchWord, matchCase: matchCase, useRegExp: useRegExp };
view.dispatch(kendo_editor_common_1.replaceAll(view.state, replaceText, searchOptions));
_this.setNextState({});
};
_this.onKeyDown = function (event) {
if (event.keyCode === enter) {
_this.onFindNext();
}
else if (event.keyCode === esc) {
_this.onClose();
}
};
_this.onMatchCaseChecked = function (e) { return _this.setNextState({ matchCase: e.target.checked }); };
_this.onMatchWordChecked = function (e) { return _this.setNextState({ matchWord: e.target.checked }); };
_this.onMatchCyclicChecked = function (e) { return _this.setNextState({ matchCyclic: e.target.checked }); };
_this.onUseRegExpChecked = function (e) { return _this.setNextState({ useRegExp: e.target.checked }); };
_this.onSearchChange = function (e) { return _this.setNextState({ searchText: e.target.value }); };
_this.onReplaceChange = function (e) { return _this.setNextState({ replaceText: e.target.value }); };
_this.setNextState = function (next) {
var nextState = __assign({}, _this.state, next, { matches: undefined, nextMatch: undefined });
var view = _this.props.view;
if (nextState.searchText) {
var text = nextState.searchText, matchWord = nextState.matchWord, matchCase = nextState.matchCase, useRegExp = nextState.useRegExp, matchCyclic = nextState.matchCyclic;
var searchOptions = { text: text, matchWord: matchWord, matchCase: matchCase, useRegExp: useRegExp };
var selection_1 = view.state.selection;
var matches = kendo_editor_common_1.findAll(view.state.doc, searchOptions);
var nextMatch = (!_this.state.searchText && matches[0]) ||
matches.find(function (match) { return match.from >= selection_1.from; }) ||
(matchCyclic && matches[0]) ||
undefined;
_this.setState(__assign({}, nextState, { matches: matches,
nextMatch: nextMatch }));
}
else {
_this.setState(nextState);
}
};
_this.state = {
selectedTab: 0,
searchText: kendo_editor_common_1.selectedLineTextOnly(props.view.state),
replaceText: '',
matchCase: false,
matchWord: false,
matchCyclic: false,
useRegExp: false
};
return _this;
}
Object.defineProperty(FindAndReplaceDialog.prototype, "settings", {
get: function () {
return this.props.settings || settings;
},
enumerable: true,
configurable: true
});
/**
* @hidden
*/
FindAndReplaceDialog.prototype.componentDidUpdate = function (_, prevState) {
var view = this.props.view;
var _a = this.state, _b = _a.matches, matches = _b === void 0 ? [] : _b, nextMatch = _a.nextMatch;
if (prevState.nextMatch !== nextMatch) {
var state = view.state;
// highlight selection
var tr = state.tr;
var highlights_1 = [];
matches.forEach(function (m) {
highlights_1.push({
from: m.from,
to: m.to,
attrs: {
class: (nextMatch && m.eq(nextMatch)) ?
'k-text-selected' :
'k-text-highlighted'
}
});
});
tr.setMeta(kendo_editor_common_1.textHighlightKey, highlights_1);
tr.setSelection(nextMatch || kendo_editor_common_1.TextSelection.create(state.doc, state.selection.from));
view.dispatch(tr);
}
};
/**
* @hidden
*/
FindAndReplaceDialog.prototype.render = function () {
var localization = kendo_react_intl_1.provideLocalizationService(this);
var _a = this.settings.messages, findReplaceDialogTitle = _a.findReplaceDialogTitle, findReplaceTabFind = _a.findReplaceTabFind, findReplaceTabReplace = _a.findReplaceTabReplace, findReplaceFindWhat = _a.findReplaceFindWhat, findReplaceReplaceWith = _a.findReplaceReplaceWith, findReplaceReplace = _a.findReplaceReplace, findReplaceReplaceAll = _a.findReplaceReplaceAll, findReplaceMatchCase = _a.findReplaceMatchCase, findReplaceMatchWord = _a.findReplaceMatchWord, findReplaceMatchCyclic = _a.findReplaceMatchCyclic, findReplaceUseRegExp = _a.findReplaceUseRegExp, findReplacePrevMatch = _a.findReplacePrevMatch, findReplaceNextMatch = _a.findReplaceNextMatch, findReplaceMatches = _a.findReplaceMatches;
var _b = this.state, matchCase = _b.matchCase, matchWord = _b.matchWord, matchCyclic = _b.matchCyclic, useRegExp = _b.useRegExp, searchText = _b.searchText, replaceText = _b.replaceText, nextMatch = _b.nextMatch;
var checkboxes = (React.createElement("div", { className: "k-search-options" },
React.createElement("span", null,
React.createElement("input", __assign({}, checkboxProps, { id: "match-case", checked: matchCase, onChange: this.onMatchCaseChecked })),
React.createElement("label", { htmlFor: "match-case", className: "k-checkbox-label" }, localization.toLanguageString(findReplaceMatchCase, messages_1.messages[findReplaceMatchCase]))),
React.createElement("span", null,
React.createElement("input", __assign({}, checkboxProps, { id: "match-whole", checked: matchWord, onChange: this.onMatchWordChecked })),
React.createElement("label", { htmlFor: "match-whole", className: "k-checkbox-label" }, localization.toLanguageString(findReplaceMatchWord, messages_1.messages[findReplaceMatchWord]))),
React.createElement("span", null,
React.createElement("input", __assign({}, checkboxProps, { id: "match-cyclic", checked: matchCyclic, onChange: this.onMatchCyclicChecked })),
React.createElement("label", { htmlFor: "match-cyclic", className: "k-checkbox-label" }, localization.toLanguageString(findReplaceMatchCyclic, messages_1.messages[findReplaceMatchCyclic]))),
React.createElement("span", null,
React.createElement("input", __assign({}, checkboxProps, { id: "regular-expression", checked: useRegExp, onChange: this.onUseRegExpChecked })),
React.createElement("label", { htmlFor: "regular-expression", className: "k-checkbox-label" }, localization.toLanguageString(findReplaceUseRegExp, messages_1.messages[findReplaceUseRegExp])))));
var navigation = (React.createElement("div", { className: "k-matches-container" },
React.createElement("button", { className: "k-button k-flat k-primary", onClick: this.onFindPrev },
React.createElement("span", { className: "k-icon k-i-arrow-chevron-left" }),
localization.toLanguageString(findReplacePrevMatch, messages_1.messages[findReplacePrevMatch])),
React.createElement("span", null, this.matchesMessage(localization.toLanguageString(findReplaceMatches, messages_1.messages[findReplaceMatches]))),
React.createElement("button", { className: "k-button k-flat k-primary", onClick: this.onFindNext },
localization.toLanguageString(findReplaceNextMatch, messages_1.messages[findReplaceNextMatch]),
React.createElement("span", { className: "k-icon k-i-arrow-chevron-right" }))));
var findWhat = (React.createElement(React.Fragment, null,
React.createElement("div", { className: "k-edit-label" },
React.createElement("label", { htmlFor: "findWhat" }, localization.toLanguageString(findReplaceFindWhat, messages_1.messages[findReplaceFindWhat]))),
React.createElement("div", { className: "k-edit-field" },
React.createElement("input", { id: "findWhat", type: "text", className: "k-textbox", value: searchText, onChange: this.onSearchChange, onFocus: this.onSearchChange, onKeyDown: this.onKeyDown, autoFocus: true }))));
var replaceWith = (React.createElement(React.Fragment, null,
React.createElement("div", { className: "k-edit-label" },
React.createElement("label", { htmlFor: "replaceWith" }, localization.toLanguageString(findReplaceReplaceWith, messages_1.messages[findReplaceReplaceWith]))),
React.createElement("div", { className: "k-edit-field" },
React.createElement("input", { id: "replaceWith", className: "k-textbox", type: "text", value: replaceText, onChange: this.onReplaceChange }))));
return ReactDOM.createPortal((React.createElement(kendo_react_dialogs_1.Window, { title: localization.toLanguageString(findReplaceDialogTitle, messages_1.messages[findReplaceDialogTitle]), onClose: this.onClose, style: { width: 'auto', height: 'auto', userSelect: 'none' }, resizable: false, minimizeButton: function () { return null; }, maximizeButton: function () { return null; } },
React.createElement(kendo_react_layout_1.TabStrip, { selected: this.state.selectedTab, className: "k-editor-find-replace", onSelect: this.onTabSelect, animation: false },
React.createElement(kendo_react_layout_1.TabStripTab, { title: localization.toLanguageString(findReplaceTabFind, messages_1.messages[findReplaceTabFind]) },
React.createElement("div", { className: "k-edit-form-container" }, findWhat),
checkboxes,
navigation),
React.createElement(kendo_react_layout_1.TabStripTab, { title: localization.toLanguageString(findReplaceTabReplace, messages_1.messages[findReplaceTabReplace]) },
React.createElement("div", { className: "k-edit-form-container" },
findWhat,
replaceWith),
React.createElement("div", { className: "k-action-buttons k-actions k-actions-end" },
React.createElement("button", { className: "k-button", disabled: !Boolean(nextMatch), onClick: this.onReplace }, localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])),
React.createElement("button", { className: "k-button", disabled: !Boolean(nextMatch), onClick: this.onReplaceAll }, localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll]))),
checkboxes,
navigation)))), document.body);
};
return FindAndReplaceDialog;
}(React.Component));
exports.FindAndReplaceDialog = FindAndReplaceDialog;
kendo_react_intl_1.registerForLocalization(FindAndReplaceDialog);
//# sourceMappingURL=FindReplace.js.map