From 7ddff379c74f4df5b6f7b379be75d3985ffecd5d Mon Sep 17 00:00:00 2001 From: ItsSelis Date: Fri, 19 May 2023 22:49:46 +0200 Subject: [PATCH] TextBox Shift-Enter (Multilines) --- code/modules/tgui_input/text.dm | 2 +- tgui/packages/tgui/components/TextArea.js | 70 ++++++++++++++++--- .../tgui/interfaces/TextInputModal.tsx | 44 ++++++++---- tgui/public/tgui.bundle.css | 8 +-- tgui/public/tgui.bundle.js | 2 +- 5 files changed, 99 insertions(+), 27 deletions(-) diff --git a/code/modules/tgui_input/text.dm b/code/modules/tgui_input/text.dm index f115fdde63..d10e921225 100644 --- a/code/modules/tgui_input/text.dm +++ b/code/modules/tgui_input/text.dm @@ -122,8 +122,8 @@ data["multiline"] = multiline data["placeholder"] = default // Default is a reserved keyword data["swapped_buttons"] = !user.client.prefs.tgui_swapped_buttons + // CHOMPedit - prevent_enter should be completely removed in the future data["title"] = title - data["prevent_enter"] = prevent_enter return data /datum/tgui_input_text/tgui_data(mob/user) diff --git a/tgui/packages/tgui/components/TextArea.js b/tgui/packages/tgui/components/TextArea.js index 4476426e17..f616713401 100644 --- a/tgui/packages/tgui/components/TextArea.js +++ b/tgui/packages/tgui/components/TextArea.js @@ -15,9 +15,10 @@ export class TextArea extends Component { constructor(props, context) { super(props, context); this.textareaRef = props.innerRef || createRef(); - this.fillerRef = createRef(); + // CHOMPedit this.state = { editing: false, + scrolledAmount: 0, }; const { dontUseTabForIndent = false } = props; this.handleOnInput = (e) => { @@ -52,7 +53,8 @@ export class TextArea extends Component { }; this.handleKeyDown = (e) => { const { editing } = this.state; - const { onChange, onInput, onEnter, onKeyDown } = this.props; + // CHOMPedit + const { onChange, onInput, onEnter, onKey } = this.props; if (e.keyCode === KEY_ENTER) { this.setEditing(false); if (onChange) { @@ -86,8 +88,10 @@ export class TextArea extends Component { if (!editing) { this.setEditing(true); } - if (onKeyDown) { - onKeyDown(e, e.target.value); + // CHOMPedit + // Custom key handler + if (onKey) { + onKey(e, e.target.value); } if (!dontUseTabForIndent) { const keyCode = e.keyCode || e.which; @@ -96,6 +100,10 @@ export class TextArea extends Component { const { value, selectionStart, selectionEnd } = e.target; e.target.value = value.substring(0, selectionStart) + '\t' + value.substring(selectionEnd); e.target.selectionEnd = selectionStart + 1; + // CHOMPedit + if (onInput) { + onInput(e, e.target.value); + } } } }; @@ -115,6 +123,16 @@ export class TextArea extends Component { } } }; + // CHOMPedit Start + this.handleScroll = (e) => { + const { displayedValue } = this.props; + const input = this.textareaRef.current; + if (displayedValue && input) { + this.setState({ + scrolledAmount: input.scrollTop, + }); + } + }; } componentDidMount() { @@ -123,8 +141,15 @@ export class TextArea extends Component { if (input) { input.value = toInputValue(nextValue); } - if (this.props.autoFocus) { - setTimeout(() => input.focus(), 1); + if (this.props.autoFocus || this.props.autoSelect) { + setTimeout(() => { + input.focus(); + + if (this.props.autoSelect) { + input.select(); + } + }, 1); + // CHOMPedit End } } @@ -158,15 +183,37 @@ export class TextArea extends Component { value, maxLength, placeholder, + // CHOMPedit Start + scrollbar, + noborder, + displayedValue, ...boxProps } = this.props; // Box props - const { className, fluid, ...rest } = boxProps; + const { className, fluid, nowrap, ...rest } = boxProps; + const { scrolledAmount } = this.state; return ( - + + {!!displayedValue && ( + +
+ {displayedValue} +
+ + )}