2022-02-05 22:03:45 +08:00
|
|
|
#include <algorithm> // for max, min
|
2022-03-31 08:17:43 +08:00
|
|
|
#include <cstddef> // for size_t
|
2021-07-10 19:20:43 +08:00
|
|
|
#include <functional> // for function
|
2022-12-20 01:51:25 +08:00
|
|
|
#include <memory> // for shared_ptr
|
2022-08-31 00:52:33 +08:00
|
|
|
#include <string> // for string, allocator
|
2021-07-10 19:20:43 +08:00
|
|
|
#include <utility> // for move
|
2022-01-07 18:03:54 +08:00
|
|
|
#include <vector> // for vector
|
2021-05-10 02:32:27 +08:00
|
|
|
|
2021-07-10 19:20:43 +08:00
|
|
|
#include "ftxui/component/captured_mouse.hpp" // for CapturedMouse
|
|
|
|
#include "ftxui/component/component.hpp" // for Make, Input
|
|
|
|
#include "ftxui/component/component_base.hpp" // for ComponentBase
|
|
|
|
#include "ftxui/component/component_options.hpp" // for InputOption
|
2022-12-20 01:51:25 +08:00
|
|
|
#include "ftxui/component/event.hpp" // for Event, Event::ArrowLeft, Event::ArrowLeftCtrl, Event::ArrowRight, Event::ArrowRightCtrl, Event::Backspace, Event::Custom, Event::Delete, Event::End, Event::Home, Event::Return
|
2021-05-10 02:32:27 +08:00
|
|
|
#include "ftxui/component/mouse.hpp" // for Mouse, Mouse::Left, Mouse::Pressed
|
|
|
|
#include "ftxui/component/screen_interactive.hpp" // for Component
|
2022-12-20 01:51:25 +08:00
|
|
|
#include "ftxui/dom/elements.hpp" // for operator|, text, Element, reflect, operator|=, flex, inverted, hbox, size, bold, dim, focus, focusCursorBarBlinking, frame, select, Decorator, EQUAL, HEIGHT
|
2021-07-10 19:20:43 +08:00
|
|
|
#include "ftxui/screen/box.hpp" // for Box
|
2022-12-20 01:51:25 +08:00
|
|
|
#include "ftxui/screen/string.hpp" // for GlyphPosition, WordBreakProperty, GlyphCount, Utf8ToWordBreakProperty, CellToGlyphIndex, WordBreakProperty::ALetter, WordBreakProperty::CR, WordBreakProperty::Double_Quote, WordBreakProperty::Extend, WordBreakProperty::ExtendNumLet, WordBreakProperty::Format, WordBreakProperty::Hebrew_Letter, WordBreakProperty::Katakana, WordBreakProperty::LF, WordBreakProperty::MidLetter, WordBreakProperty::MidNum, WordBreakProperty::MidNumLet, WordBreakProperty::Newline, WordBreakProperty::Numeric, WordBreakProperty::Regional_Indicator, WordBreakProperty::Single_Quote, WordBreakProperty::WSegSpace, WordBreakProperty::ZWJ
|
|
|
|
#include "ftxui/screen/util.hpp" // for clamp
|
|
|
|
#include "ftxui/util/ref.hpp" // for StringRef, Ref, ConstStringRef
|
2021-05-10 02:32:27 +08:00
|
|
|
|
|
|
|
namespace ftxui {
|
2020-03-24 04:26:00 +08:00
|
|
|
|
2021-12-13 04:31:54 +08:00
|
|
|
namespace {
|
|
|
|
|
2022-10-07 03:16:55 +08:00
|
|
|
// Group together several propertiej so they appear to form a similar group.
|
|
|
|
// For instance, letters are grouped with number and form a single word.
|
|
|
|
bool IsWordCharacter(WordBreakProperty property) {
|
|
|
|
switch (property) {
|
|
|
|
case WordBreakProperty::ALetter:
|
|
|
|
case WordBreakProperty::Hebrew_Letter:
|
|
|
|
case WordBreakProperty::Katakana:
|
|
|
|
case WordBreakProperty::Numeric:
|
|
|
|
return true;
|
|
|
|
|
|
|
|
case WordBreakProperty::CR:
|
|
|
|
case WordBreakProperty::Double_Quote:
|
|
|
|
case WordBreakProperty::LF:
|
|
|
|
case WordBreakProperty::MidLetter:
|
|
|
|
case WordBreakProperty::MidNum:
|
|
|
|
case WordBreakProperty::MidNumLet:
|
|
|
|
case WordBreakProperty::Newline:
|
|
|
|
case WordBreakProperty::Single_Quote:
|
|
|
|
case WordBreakProperty::WSegSpace:
|
|
|
|
// Unsure:
|
|
|
|
case WordBreakProperty::Extend:
|
|
|
|
case WordBreakProperty::ExtendNumLet:
|
|
|
|
case WordBreakProperty::Format:
|
|
|
|
case WordBreakProperty::Regional_Indicator:
|
|
|
|
case WordBreakProperty::ZWJ:
|
|
|
|
return false;
|
2022-10-19 04:58:22 +08:00
|
|
|
}
|
2022-12-20 01:51:25 +08:00
|
|
|
return true; // NOT_REACHED();
|
2022-10-16 16:45:11 +08:00
|
|
|
}
|
2022-10-07 03:16:55 +08:00
|
|
|
|
2022-03-31 08:17:43 +08:00
|
|
|
std::string PasswordField(size_t size) {
|
2021-12-13 04:31:54 +08:00
|
|
|
std::string out;
|
|
|
|
out.reserve(2 * size);
|
2022-03-31 08:17:43 +08:00
|
|
|
while (size--) {
|
2021-12-13 04:31:54 +08:00
|
|
|
out += "•";
|
2022-03-31 08:17:43 +08:00
|
|
|
}
|
2021-12-13 04:31:54 +08:00
|
|
|
return out;
|
|
|
|
}
|
|
|
|
|
2021-07-10 20:23:46 +08:00
|
|
|
// An input box. The user can type text into it.
|
2021-12-13 04:31:54 +08:00
|
|
|
class InputBase : public ComponentBase {
|
2021-07-10 18:29:39 +08:00
|
|
|
public:
|
2021-12-13 04:31:54 +08:00
|
|
|
InputBase(StringRef content,
|
|
|
|
ConstStringRef placeholder,
|
|
|
|
Ref<InputOption> option)
|
2022-03-31 08:17:43 +08:00
|
|
|
: content_(std::move(content)),
|
|
|
|
placeholder_(std::move(placeholder)),
|
|
|
|
option_(std::move(option)) {}
|
2021-07-10 18:29:39 +08:00
|
|
|
|
2021-08-22 19:51:00 +08:00
|
|
|
int cursor_position_internal_ = 0;
|
|
|
|
int& cursor_position() {
|
|
|
|
int& opt = option_->cursor_position();
|
2022-03-31 08:17:43 +08:00
|
|
|
if (opt != -1) {
|
2021-08-22 19:51:00 +08:00
|
|
|
return opt;
|
2022-03-31 08:17:43 +08:00
|
|
|
}
|
2021-08-22 19:51:00 +08:00
|
|
|
return cursor_position_internal_;
|
|
|
|
}
|
2021-07-10 18:29:39 +08:00
|
|
|
|
|
|
|
// Component implementation:
|
|
|
|
Element Render() override {
|
2021-12-13 04:31:54 +08:00
|
|
|
std::string password_content;
|
2022-03-31 08:17:43 +08:00
|
|
|
if (option_->password()) {
|
2021-12-13 04:31:54 +08:00
|
|
|
password_content = PasswordField(content_->size());
|
2022-03-31 08:17:43 +08:00
|
|
|
}
|
2022-12-20 01:51:25 +08:00
|
|
|
const std::string& content =
|
|
|
|
option_->password() ? password_content : *content_;
|
2021-07-17 16:36:50 +08:00
|
|
|
|
2022-12-20 01:51:25 +08:00
|
|
|
const int size = GlyphCount(content);
|
2021-12-13 04:31:54 +08:00
|
|
|
|
|
|
|
cursor_position() = std::max(0, std::min<int>(size, cursor_position()));
|
|
|
|
auto main_decorator = flex | ftxui::size(HEIGHT, EQUAL, 1);
|
2022-12-20 01:51:25 +08:00
|
|
|
const bool is_focused = Focused();
|
2021-07-10 18:29:39 +08:00
|
|
|
|
|
|
|
// placeholder.
|
2021-12-13 04:31:54 +08:00
|
|
|
if (size == 0) {
|
2022-11-11 21:09:53 +08:00
|
|
|
auto element = text(*placeholder_) | dim | main_decorator | reflect(box_);
|
2022-03-31 08:17:43 +08:00
|
|
|
if (is_focused) {
|
2022-11-11 21:09:53 +08:00
|
|
|
element |= focus;
|
2022-03-31 08:17:43 +08:00
|
|
|
}
|
2022-12-20 01:51:25 +08:00
|
|
|
if (hovered_ || is_focused) {
|
2022-11-11 21:09:53 +08:00
|
|
|
element |= inverted;
|
2022-03-31 08:17:43 +08:00
|
|
|
}
|
2022-11-11 21:09:53 +08:00
|
|
|
return element;
|
2021-07-10 18:29:39 +08:00
|
|
|
}
|
2019-01-20 05:06:05 +08:00
|
|
|
|
2021-07-10 18:29:39 +08:00
|
|
|
// Not focused.
|
2021-11-07 19:01:17 +08:00
|
|
|
if (!is_focused) {
|
2022-11-11 21:09:53 +08:00
|
|
|
auto element = text(content) | main_decorator | reflect(box_);
|
2022-03-31 08:17:43 +08:00
|
|
|
if (hovered_) {
|
2022-11-11 21:09:53 +08:00
|
|
|
element |= inverted;
|
2022-12-20 01:51:25 +08:00
|
|
|
}
|
2022-11-11 21:09:53 +08:00
|
|
|
return element;
|
2021-11-07 19:01:17 +08:00
|
|
|
}
|
2021-07-10 18:29:39 +08:00
|
|
|
|
2022-12-20 01:51:25 +08:00
|
|
|
const int index_before_cursor = GlyphPosition(content, cursor_position());
|
|
|
|
const int index_after_cursor =
|
|
|
|
GlyphPosition(content, 1, index_before_cursor);
|
|
|
|
const std::string part_before_cursor =
|
|
|
|
content.substr(0, index_before_cursor);
|
2021-12-13 04:31:54 +08:00
|
|
|
std::string part_at_cursor = " ";
|
|
|
|
if (cursor_position() < size) {
|
|
|
|
part_at_cursor = content.substr(index_before_cursor,
|
|
|
|
index_after_cursor - index_before_cursor);
|
|
|
|
}
|
2022-12-20 01:51:25 +08:00
|
|
|
const std::string part_after_cursor = content.substr(index_after_cursor);
|
2022-11-11 21:09:53 +08:00
|
|
|
auto focused = (is_focused || hovered_) ? focusCursorBarBlinking : select;
|
2021-12-13 04:31:54 +08:00
|
|
|
return hbox({
|
|
|
|
text(part_before_cursor),
|
2022-11-11 21:09:53 +08:00
|
|
|
text(part_at_cursor) | focused | reflect(cursor_box_),
|
2021-12-13 04:31:54 +08:00
|
|
|
text(part_after_cursor),
|
|
|
|
}) |
|
|
|
|
flex | frame | bold | main_decorator | reflect(box_);
|
2021-07-10 18:29:39 +08:00
|
|
|
}
|
2021-04-25 22:58:16 +08:00
|
|
|
|
2021-07-10 18:29:39 +08:00
|
|
|
bool OnEvent(Event event) override {
|
|
|
|
cursor_position() =
|
2022-03-31 08:17:43 +08:00
|
|
|
std::max(0, std::min<int>((int)content_->size(), cursor_position()));
|
2021-04-25 22:58:16 +08:00
|
|
|
|
2022-03-31 08:17:43 +08:00
|
|
|
if (event.is_mouse()) {
|
2021-07-10 18:29:39 +08:00
|
|
|
return OnMouseEvent(event);
|
2022-03-31 08:17:43 +08:00
|
|
|
}
|
2018-10-19 04:58:38 +08:00
|
|
|
|
2021-07-10 18:29:39 +08:00
|
|
|
// Backspace.
|
|
|
|
if (event == Event::Backspace) {
|
2022-03-31 08:17:43 +08:00
|
|
|
if (cursor_position() == 0) {
|
2021-07-10 18:29:39 +08:00
|
|
|
return false;
|
2022-03-31 08:17:43 +08:00
|
|
|
}
|
2022-12-20 01:51:25 +08:00
|
|
|
const size_t start = GlyphPosition(*content_, cursor_position() - 1);
|
|
|
|
const size_t end = GlyphPosition(*content_, cursor_position());
|
2021-12-13 04:31:54 +08:00
|
|
|
content_->erase(start, end - start);
|
2021-07-10 18:29:39 +08:00
|
|
|
cursor_position()--;
|
|
|
|
option_->on_change();
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Delete
|
|
|
|
if (event == Event::Delete) {
|
2022-03-31 08:17:43 +08:00
|
|
|
if (cursor_position() == int(content_->size())) {
|
2021-07-10 18:29:39 +08:00
|
|
|
return false;
|
2022-03-31 08:17:43 +08:00
|
|
|
}
|
2022-12-20 01:51:25 +08:00
|
|
|
const size_t start = GlyphPosition(*content_, cursor_position());
|
|
|
|
const size_t end = GlyphPosition(*content_, cursor_position() + 1);
|
2021-12-13 04:31:54 +08:00
|
|
|
content_->erase(start, end - start);
|
2021-07-10 18:29:39 +08:00
|
|
|
option_->on_change();
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Enter.
|
|
|
|
if (event == Event::Return) {
|
|
|
|
option_->on_enter();
|
|
|
|
return true;
|
|
|
|
}
|
2018-10-19 04:58:38 +08:00
|
|
|
|
2021-07-10 18:29:39 +08:00
|
|
|
if (event == Event::Custom) {
|
2019-07-01 06:40:55 +08:00
|
|
|
return false;
|
2021-07-10 18:29:39 +08:00
|
|
|
}
|
2019-07-01 06:40:55 +08:00
|
|
|
|
2022-10-07 03:16:55 +08:00
|
|
|
// Arrow
|
2021-07-10 18:29:39 +08:00
|
|
|
if (event == Event::ArrowLeft && cursor_position() > 0) {
|
|
|
|
cursor_position()--;
|
|
|
|
return true;
|
|
|
|
}
|
2018-10-19 04:58:38 +08:00
|
|
|
|
2021-07-10 18:29:39 +08:00
|
|
|
if (event == Event::ArrowRight &&
|
|
|
|
cursor_position() < (int)content_->size()) {
|
|
|
|
cursor_position()++;
|
|
|
|
return true;
|
|
|
|
}
|
2019-01-27 09:33:06 +08:00
|
|
|
|
2022-10-07 03:16:55 +08:00
|
|
|
// CTRL + Arrow:
|
|
|
|
if (event == Event::ArrowLeftCtrl) {
|
|
|
|
HandleLeftCtrl();
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
if (event == Event::ArrowRightCtrl) {
|
|
|
|
HandleRightCtrl();
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
2021-07-10 18:29:39 +08:00
|
|
|
if (event == Event::Home) {
|
|
|
|
cursor_position() = 0;
|
|
|
|
return true;
|
|
|
|
}
|
2018-10-21 20:18:11 +08:00
|
|
|
|
2021-07-10 18:29:39 +08:00
|
|
|
if (event == Event::End) {
|
2021-12-13 04:31:54 +08:00
|
|
|
cursor_position() = GlyphCount(*content_);
|
2021-07-10 18:29:39 +08:00
|
|
|
return true;
|
|
|
|
}
|
2018-10-21 20:18:11 +08:00
|
|
|
|
2021-07-10 18:29:39 +08:00
|
|
|
// Content
|
|
|
|
if (event.is_character()) {
|
2022-12-20 01:51:25 +08:00
|
|
|
const size_t start = GlyphPosition(*content_, cursor_position());
|
2021-12-13 04:31:54 +08:00
|
|
|
content_->insert(start, event.character());
|
2021-07-10 18:29:39 +08:00
|
|
|
cursor_position()++;
|
|
|
|
option_->on_change();
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return false;
|
2021-03-28 08:01:04 +08:00
|
|
|
}
|
|
|
|
|
2021-07-10 18:29:39 +08:00
|
|
|
private:
|
2022-10-07 03:16:55 +08:00
|
|
|
void HandleLeftCtrl() {
|
|
|
|
auto properties = Utf8ToWordBreakProperty(*content_);
|
|
|
|
|
|
|
|
// Move left, as long as left is not a word character.
|
|
|
|
while (cursor_position() > 0 &&
|
|
|
|
!IsWordCharacter(properties[cursor_position() - 1])) {
|
|
|
|
cursor_position()--;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Move left, as long as left is a word character:
|
|
|
|
while (cursor_position() > 0 &&
|
|
|
|
IsWordCharacter(properties[cursor_position() - 1])) {
|
|
|
|
cursor_position()--;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
void HandleRightCtrl() {
|
|
|
|
auto properties = Utf8ToWordBreakProperty(*content_);
|
2022-12-20 01:51:25 +08:00
|
|
|
const int max = (int)properties.size();
|
2022-10-07 03:16:55 +08:00
|
|
|
|
|
|
|
// Move right, as long as right is not a word character.
|
|
|
|
while (cursor_position() < max &&
|
|
|
|
!IsWordCharacter(properties[cursor_position()])) {
|
|
|
|
cursor_position()++;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Move right, as long as right is a word character:
|
|
|
|
while (cursor_position() < max &&
|
|
|
|
IsWordCharacter(properties[cursor_position()])) {
|
|
|
|
cursor_position()++;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-07-10 18:29:39 +08:00
|
|
|
bool OnMouseEvent(Event event) {
|
2021-11-07 19:01:17 +08:00
|
|
|
hovered_ =
|
|
|
|
box_.Contain(event.mouse().x, event.mouse().y) && CaptureMouse(event);
|
2022-03-31 08:17:43 +08:00
|
|
|
if (!hovered_) {
|
2021-07-10 18:29:39 +08:00
|
|
|
return false;
|
2022-03-31 08:17:43 +08:00
|
|
|
}
|
2021-11-07 19:01:17 +08:00
|
|
|
|
|
|
|
if (event.mouse().button != Mouse::Left ||
|
|
|
|
event.mouse().motion != Mouse::Pressed) {
|
2021-07-10 18:29:39 +08:00
|
|
|
return false;
|
2021-11-07 19:01:17 +08:00
|
|
|
}
|
2021-03-28 08:01:04 +08:00
|
|
|
|
2021-07-10 18:29:39 +08:00
|
|
|
TakeFocus();
|
2022-03-31 08:17:43 +08:00
|
|
|
if (content_->empty()) {
|
2021-12-13 04:31:54 +08:00
|
|
|
return true;
|
2022-03-31 08:17:43 +08:00
|
|
|
}
|
2021-12-13 04:31:54 +08:00
|
|
|
|
|
|
|
auto mapping = CellToGlyphIndex(*content_);
|
|
|
|
int original_glyph = cursor_position();
|
2022-02-05 22:03:45 +08:00
|
|
|
original_glyph = util::clamp(original_glyph, 0, int(mapping.size()));
|
2022-03-31 08:17:43 +08:00
|
|
|
size_t original_cell = 0;
|
2021-12-13 04:31:54 +08:00
|
|
|
for (size_t i = 0; i < mapping.size(); i++) {
|
|
|
|
if (mapping[i] == original_glyph) {
|
2022-03-31 08:17:43 +08:00
|
|
|
original_cell = (int)i;
|
2021-12-13 04:31:54 +08:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
2022-03-31 08:17:43 +08:00
|
|
|
if (mapping[original_cell] != original_glyph) {
|
2021-12-13 04:31:54 +08:00
|
|
|
original_cell = mapping.size();
|
2022-03-31 08:17:43 +08:00
|
|
|
}
|
2022-12-20 01:51:25 +08:00
|
|
|
const int target_cell =
|
|
|
|
int(original_cell) + event.mouse().x - cursor_box_.x_min;
|
2021-12-13 04:31:54 +08:00
|
|
|
int target_glyph = target_cell < (int)mapping.size() ? mapping[target_cell]
|
|
|
|
: (int)mapping.size();
|
2022-02-05 22:03:45 +08:00
|
|
|
target_glyph = util::clamp(target_glyph, 0, GlyphCount(*content_));
|
2021-12-13 04:31:54 +08:00
|
|
|
if (cursor_position() != target_glyph) {
|
|
|
|
cursor_position() = target_glyph;
|
2021-11-07 19:01:17 +08:00
|
|
|
option_->on_change();
|
2021-07-10 18:29:39 +08:00
|
|
|
}
|
2018-10-19 04:58:38 +08:00
|
|
|
return true;
|
|
|
|
}
|
2021-08-06 04:40:40 +08:00
|
|
|
|
2021-08-07 02:32:33 +08:00
|
|
|
bool Focusable() const final { return true; }
|
2021-08-06 04:40:40 +08:00
|
|
|
|
2021-11-07 19:01:17 +08:00
|
|
|
bool hovered_ = false;
|
2021-12-13 04:31:54 +08:00
|
|
|
StringRef content_;
|
2021-07-10 18:29:39 +08:00
|
|
|
ConstStringRef placeholder_;
|
2018-10-19 04:58:38 +08:00
|
|
|
|
2021-09-08 15:36:37 +08:00
|
|
|
Box box_;
|
2021-07-10 18:29:39 +08:00
|
|
|
Box cursor_box_;
|
|
|
|
Ref<InputOption> option_;
|
|
|
|
};
|
2021-04-25 22:58:16 +08:00
|
|
|
|
2021-12-13 04:31:54 +08:00
|
|
|
} // namespace
|
|
|
|
|
2021-07-10 18:29:39 +08:00
|
|
|
/// @brief An input box for editing text.
|
|
|
|
/// @param content The editable content.
|
|
|
|
/// @param placeholder The text displayed when content is still empty.
|
2021-07-10 20:23:46 +08:00
|
|
|
/// @param option Additional optional parameters.
|
2021-07-10 18:29:39 +08:00
|
|
|
/// @ingroup component
|
|
|
|
/// @see InputBase
|
|
|
|
///
|
|
|
|
/// ### Example
|
|
|
|
///
|
|
|
|
/// ```cpp
|
|
|
|
/// auto screen = ScreenInteractive::FitComponent();
|
2021-08-09 05:25:20 +08:00
|
|
|
/// std::string content= "";
|
|
|
|
/// std::string placeholder = "placeholder";
|
2021-07-10 18:29:39 +08:00
|
|
|
/// Component input = Input(&content, &placeholder);
|
|
|
|
/// screen.Loop(input);
|
|
|
|
/// ```
|
|
|
|
///
|
|
|
|
/// ### Output
|
|
|
|
///
|
|
|
|
/// ```bash
|
|
|
|
/// placeholder
|
|
|
|
/// ```
|
|
|
|
Component Input(StringRef content,
|
|
|
|
ConstStringRef placeholder,
|
|
|
|
Ref<InputOption> option) {
|
2022-03-31 08:17:43 +08:00
|
|
|
return Make<InputBase>(std::move(content), std::move(placeholder),
|
|
|
|
std::move(option));
|
2021-04-25 22:58:16 +08:00
|
|
|
}
|
|
|
|
|
2019-01-12 22:00:08 +08:00
|
|
|
} // namespace ftxui
|
2020-08-16 06:24:18 +08:00
|
|
|
|
|
|
|
// Copyright 2020 Arthur Sonzogni. All rights reserved.
|
|
|
|
// Use of this source code is governed by the MIT license that can be found in
|
|
|
|
// the LICENSE file.
|