javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 17:42:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(textarea): add option to expand textarea as value changes (#16916)

Browse Source 
* feat(textarea): add autoGrow - set height to scrollHeight

* change 1px to inherit, remove additional 4px
This commit is contained in:
Adam LaCombe
2019-05-07 16:52:24 -04:00
committed by Liam DeBeasi
parent 669ec0da3d
commit cc8678ad58
7 changed files with 34 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
angular/src/directives/proxies.ts
View File

@ -857,7 +857,7 @@ export class IonText {
proxyInputs(IonText, ['color', 'mode']);
export declare interface IonTextarea extends StencilComponents<'IonTextarea'> {}
@Component({ selector: 'ion-textarea', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode', 'color', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'value'] })
@Component({ selector: 'ion-textarea', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode', 'color', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'autoGrow', 'value'] })
export class IonTextarea {
ionChange!: EventEmitter<CustomEvent>;
ionInput!: EventEmitter<CustomEvent>;
@ -871,7 +871,7 @@ export class IonTextarea {
}
}
proxyMethods(IonTextarea, ['setFocus', 'getInputElement']);
proxyInputs(IonTextarea, ['mode', 'color', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'value']);
proxyInputs(IonTextarea, ['mode', 'color', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'autoGrow', 'value']);
export declare interface IonThumbnail extends StencilComponents<'IonThumbnail'> {}
@Component({ selector: 'ion-thumbnail', changeDetection: 0, template: '<ng-content></ng-content>' })

1
core/api.txt
View File

@ -1096,6 +1096,7 @@ ion-text,prop,color,string | undefined,undefined,false,false
ion-text,prop,mode,"ios" | "md",undefined,false,false
ion-textarea,scoped
ion-textarea,prop,autoGrow,boolean,false,false,false
ion-textarea,prop,autocapitalize,string,'none',false,false
ion-textarea,prop,autofocus,boolean,false,false,false
ion-textarea,prop,clearOnEdit,boolean,false,false,false

8
core/src/components.d.ts vendored
View File

@ -4604,6 +4604,10 @@ export namespace Components {
}
interface IonTextarea {
/**
* If `true`, the element height will increase based on the value.
*/
'autoGrow': boolean;
/**
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
*/
@ -4686,6 +4690,10 @@ export namespace Components {
'wrap'?: 'hard' | 'soft' | 'off';
}
interface IonTextareaAttributes extends StencilHTMLAttributes {
/**
* If `true`, the element height will increase based on the value.
*/
'autoGrow'?: boolean;
/**
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
*/

1
core/src/components/textarea/readme.md
View File

@ -194,6 +194,7 @@ export default Example;
| Property | Attribute | Description | Type | Default |
| ---------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------- |
| `autoGrow` | `auto-grow` | If `true`, the element height will increase based on the value. | `boolean` | `false` |
| `autocapitalize` | `autocapitalize` | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. | `string` | `'none'` |
| `autofocus` | `autofocus` | This Boolean attribute lets you specify that a form control should have input focus when the page loads. | `boolean` | `false` |
| `clearOnEdit` | `clear-on-edit` | If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. | `boolean` | `false` |

5
core/src/components/textarea/test/basic/index.html
View File

@ -66,6 +66,11 @@
<ion-label color="primary">Clear on Edit</ion-label>
<ion-textarea clear-on-edit="true"></ion-textarea>
</ion-item>
<ion-item>
<ion-label color="primary">Autogrow</ion-label>
<ion-textarea auto-grow="true"></ion-textarea>
</ion-item>
</ion-list>
<div text-center>

3
core/src/components/textarea/test/standalone/index.html
View File

@ -15,7 +15,8 @@
<ion-textarea placeholder="Textarea"></ion-textarea>
<ion-textarea value="value"></ion-textarea>
<ion-textarea value="44"></ion-textarea>
<ion-textarea placeholder="Custom" class="custom"></textarea>
<ion-textarea placeholder="Custom" class="custom"></ion-textarea>
<ion-textarea placeholder="Auto Grow!" auto-grow="true"></ion-textarea>
<style>
.custom {

15
core/src/components/textarea/textarea.tsx
View File

@ -119,6 +119,11 @@ export class Textarea implements ComponentInterface {
*/
@Prop() wrap?: 'hard' | 'soft' | 'off';
/**
* If `true`, the element height will increase based on the value.
*/
@Prop() autoGrow = false;
/**
* The value of the textarea.
*/
@ -134,6 +139,7 @@ export class Textarea implements ComponentInterface {
if (nativeInput && nativeInput.value !== value) {
nativeInput.value = value;
}
this.runAutoGrow();
this.emitStyle();
this.ionChange.emit({ value });
}
@ -183,9 +189,18 @@ export class Textarea implements ComponentInterface {
componentDidLoad() {
this.debounceChanged();
this.runAutoGrow();
this.ionInputDidLoad.emit();
}
private runAutoGrow() {
if (this.nativeInput && this.autoGrow) {
this.nativeInput.style.height = 'inherit';
this.nativeInput.style.height = this.nativeInput.scrollHeight + 'px';
}
}
componentDidUnload() {
this.ionInputDidUnload.emit();
}