[codex] Add auto-growing text inputs #3
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| <?php | ||
|
|
||
| namespace Nativephp\NativeUi\Elements\Concerns; | ||
|
|
||
| trait ConfiguresTextInputBehavior | ||
| { | ||
| /** Keyboard hint: "text" (default) | "number" | "email" | "phone" | "url" | "decimal" | "password" */ | ||
| public function keyboard(string|int $type): static | ||
| { | ||
| $this->inputProps['keyboard'] = $type; | ||
|
|
||
| return $this; | ||
| } | ||
|
|
||
| public function secure(bool $value = true): static | ||
| { | ||
| $this->inputProps['secure'] = $value; | ||
|
|
||
| return $this; | ||
| } | ||
|
|
||
| public function maxLength(int $length): static | ||
| { | ||
| $this->inputProps['max_length'] = $length; | ||
|
|
||
| return $this; | ||
| } | ||
|
|
||
| public function multiline(bool $value = true): static | ||
| { | ||
| $this->inputProps['multiline'] = $value; | ||
|
|
||
| return $this; | ||
| } | ||
|
|
||
| public function autoGrow(int $minLines = 1, int $maxLines = 5): static | ||
|
Contributor
There was a problem hiding this comment.
Every other toggle in this trait is So |
||
| { | ||
| $minLines = max(1, $minLines); | ||
| $maxLines = max($minLines, $maxLines); | ||
|
|
||
| $this->inputProps['multiline'] = true; | ||
| $this->inputProps['auto_grow'] = true; | ||
| $this->inputProps['min_lines'] = $minLines; | ||
| $this->inputProps['max_lines'] = $maxLines; | ||
|
Contributor
There was a problem hiding this comment. These unconditional writes make the fluent API order-dependent: |
||
|
|
||
| return $this; | ||
| } | ||
|
|
||
| public function maxLines(int $lines): static | ||
| { | ||
| $this->inputProps['max_lines'] = $lines; | ||
|
|
||
| return $this; | ||
| } | ||
|
|
||
| public function minLines(int $lines): static | ||
| { | ||
| $this->inputProps['min_lines'] = $lines; | ||
|
|
||
| return $this; | ||
| } | ||
|
|
||
| /** | ||
| * How the native side should dispatch change events back to PHP. | ||
| * | ||
| * 'live' - every keystroke (default, matches `wire:model.live`) | ||
| * 'blur' - only when the field loses focus / user submits | ||
| * 'debounce' - after `debounce_ms` of inactivity | ||
| * | ||
| * Typically set indirectly via `native:model.live` / `.blur` / `.debounce.Xms` | ||
| * in Blade; the precompiler translates those into this prop. | ||
| */ | ||
| public function syncMode(string $mode): static | ||
| { | ||
| $this->inputProps['sync_mode'] = $mode; | ||
|
|
||
| return $this; | ||
| } | ||
|
|
||
| public function debounceMs(int $ms): static | ||
| { | ||
| $this->inputProps['debounce_ms'] = $ms; | ||
|
|
||
| return $this; | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| <?php | ||
|
|
||
| beforeEach(function () { | ||
| $this->pluginPath = dirname(__DIR__); | ||
| }); | ||
|
|
||
| it('exposes an auto grow text input API from PHP', function () { | ||
| $baseInput = file_get_contents($this->pluginPath.'/src/Elements/BaseTextInput.php'); | ||
| $behavior = file_get_contents($this->pluginPath.'/src/Elements/Concerns/ConfiguresTextInputBehavior.php'); | ||
|
|
||
| expect($baseInput) | ||
| ->toContain('use ConfiguresTextInputBehavior'); | ||
|
|
||
| expect($behavior) | ||
| ->toContain('autoGrow') | ||
| ->toContain("'auto_grow'") | ||
| ->toContain("\$this->inputProps['multiline'] = true") | ||
| ->toContain("\$this->inputProps['min_lines'] = \$minLines") | ||
| ->toContain("\$this->inputProps['max_lines'] = \$maxLines"); | ||
| }); | ||
|
|
||
| it('accepts blade auto grow attributes', function () { | ||
| $content = file_get_contents($this->pluginPath.'/src/Elements/BaseTextInput.php'); | ||
|
|
||
| expect($content) | ||
| ->toContain("'autoGrow'") | ||
| ->toContain("'auto-grow'"); | ||
| }); | ||
|
|
||
| it('supports auto grow in the iOS text input core', function () { | ||
| $content = file_get_contents($this->pluginPath.'/resources/ios/NativeUITextInputCore.swift'); | ||
|
|
||
| expect($content) | ||
| ->toContain('p.getBool("auto_grow")') | ||
| ->toContain('p.getInt("min_lines")') | ||
| ->toContain('resolvedLineRange(minLines: minLines, maxLines: maxLines)') | ||
| ->toContain('fixedSize(horizontal: false, vertical: true)'); | ||
| }); | ||
|
|
||
| it('supports auto grow in Android text input renderers', function () { | ||
| $shared = file_get_contents($this->pluginPath.'/resources/android/TextInputShared.kt'); | ||
| $bare = file_get_contents($this->pluginPath.'/resources/android/BareTextInputRenderer.kt'); | ||
|
|
||
| expect($shared) | ||
| ->toContain('val autoGrow: Boolean') | ||
| ->toContain('autoGrow = p.getBool("auto_grow")') | ||
|
Contributor
There was a problem hiding this comment. The suite asserts on source text rather than behavior — every assertion is These pass even if A behavioral test would be more useful: build |
||
| ->toContain('!multiline && !autoGrow') | ||
| ->toContain('p.getBool("multiline") || p.getBool("auto_grow")'); | ||
|
|
||
| expect($bare) | ||
| ->toContain('singleLine = props.singleLine') | ||
| ->toContain('props.multiline || props.autoGrow'); | ||
| }); | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Crash:
min_lines>max_linesthrows on first composition.parseTextInputPropsderivesminLinesandmaxLinesindependently and never clamps one against the other. With this hunk now forwarding both toBasicTextField,<native:bare-text-input auto-grow min-lines="8" />producesmin_lines=8withmax_linesfalling back to5. Compose'sModifier.heightInLinesdoesrequire(minLines <= maxLines), so the screen throwsIllegalArgumentException.The Blade path reaches this directly:
applyAttributesrunsautoGrow()(settingmax_lines = 5) and then applies themin-linesattribute, with no clamp in between. Same for->multiline()->minLines(8).iOS's new
resolvedLineRange()clamps for exactly this reason — Android should do the same inparseTextInputProps(maxLines = max(maxLines, minLines)), which also closes the same pre-existing exposure in the outlined and filled renderers.