Skip to content

Commit ee80fce

Browse files
GloryoftanGloryoftan
authored
[新增] Textarea组件新增resize功能，解决了@6718，@6941 
1 parent 9beedaf commit ee80fce

File tree

10 files changed

+203
-16
lines changed

10 files changed

+203
-16
lines changed

‎src/app/demo/pc/textarea/basic/demo.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,4 @@ export class TextareaBasicDemoComponent {
1414
// ====================================================================
1515
summary: string = '';
1616
description: string = '';
17-
}
17+
}

‎src/app/demo/pc/textarea/demo-set.module.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import {TextareaValidComponent} from "./valid/demo.component";
1717
import {TextareaSelectDemoComponent} from "./select/demo.component";
1818
import {TextareaMaxLengthDemoModule} from "./max-length/demo.module";
1919
import {TextareaMaxLengthDemoComponent} from "./max-length/demo.component";
20+
import { TextareaResizeDemoComponent } from './resize/demo.component';
21+
import { TextareaResizeDemoModule } from './resize/demo.module';
2022

2123
export const routerConfig = [
2224
{
@@ -42,6 +44,9 @@ export const routerConfig = [
4244
},
4345
{
4446
path: 'max-length', component: TextareaMaxLengthDemoComponent
47+
},
48+
{
49+
path: 'resize', component: TextareaResizeDemoComponent
4550
}
4651
];
4752

@@ -56,6 +61,7 @@ export const routerConfig = [
5661
TextareaValidModule,
5762
TextareaSelectDemoModule,
5863
TextareaMaxLengthDemoModule,
64+
TextareaResizeDemoModule
5965
]
6066
})
6167
export class TextareaDemoModule {

‎src/app/demo/pc/textarea/resize/demo.component.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.jigsaw-header-host:not(:first-of-type) {
2+
margin-top: 20px;
3+
}
4+
5+
.container {
6+
display: flex;
7+
justify-content: flex-start;
8+
align-items: flex-start;
9+
width: 100%;
10+
height: fit-content;
11+
}
12+
13+
.container-v {
14+
display: flex;
15+
justify-content: flex-start;
16+
align-items: flex-start;
17+
width: 100%;
18+
height: 100px;
19+
}
20+
21+
.container .jigsaw-textarea,
22+
.container-v .jigsaw-textarea {
23+
margin-right: 10px;
24+
}

‎src/app/demo/pc/textarea/resize/demo.component.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!-- ignore the following lines, they are not important to this demo -->
2+
<jigsaw-demo-description [summary]="summary" [content]="description">
3+
</jigsaw-demo-description>
4+
5+
<!-- start to learn the demo from here -->
6+
<jigsaw-header>双向可伸缩</jigsaw-header>
7+
<div class="container">
8+
<jigsaw-textarea [resize]="'both'" width="200px" height="80px" [placeholder]="'width=200px\nheight: 80px'">
9+
</jigsaw-textarea>
10+
<jigsaw-textarea [resize]="'both'" width="200px" height="10vh" [placeholder]="'width=200px\nheight: 10vh'">
11+
</jigsaw-textarea>
12+
<jigsaw-textarea [resize]="'both'" width="15vw" height="80px" [placeholder]="'width=15vw\nheight: 80px'">
13+
</jigsaw-textarea>
14+
<jigsaw-textarea [resize]="'both'" width="15vw" height="10vh" [placeholder]="'width=15vw\nheight: 10vh'">
15+
</jigsaw-textarea>
16+
<jigsaw-textarea [resize]="'both'" [placeholder]="'width: 未设置;\nheight: 未设置'">
17+
</jigsaw-textarea>
18+
</div>
19+
20+
<jigsaw-header>纵向可伸缩</jigsaw-header>
21+
<div class="container">
22+
<jigsaw-textarea [resize]="'vertical'" width="200px" height="80px" [placeholder]="'width=200px\nheight: 80px'">
23+
</jigsaw-textarea>
24+
<jigsaw-textarea [resize]="'vertical'" width="200px" height="10vh" [placeholder]="'width=200px\nheight: 10vh'">
25+
</jigsaw-textarea>
26+
<jigsaw-textarea [resize]="'vertical'" width="15vw" height="80px" [placeholder]="'width=15vw\nheight: 80px'">
27+
</jigsaw-textarea>
28+
<jigsaw-textarea [resize]="'vertical'" width="15vw" height="10vh" [placeholder]="'width=15vw\nheight: 10vh'">
29+
</jigsaw-textarea>
30+
<jigsaw-textarea [resize]="'vertical'" [placeholder]="'width: 未设置;\nheight: 未设置'">
31+
</jigsaw-textarea>
32+
</div>
33+
34+
<jigsaw-header>横向可伸缩</jigsaw-header>
35+
<div class="container-v">
36+
<jigsaw-textarea [resize]="'horizontal'" width="200px" height="80px" [placeholder]="'width=200px\nheight: 80px'">
37+
</jigsaw-textarea>
38+
<jigsaw-textarea [resize]="'horizontal'" width="200px" height="10vh" [placeholder]="'width=200px\nheight: 10vh'">
39+
</jigsaw-textarea>
40+
<jigsaw-textarea [resize]="'horizontal'" width="15vw" height="80px" [placeholder]="'width=15vw\nheight: 80px'">
41+
</jigsaw-textarea>
42+
<jigsaw-textarea [resize]="'horizontal'" width="15vw" height="10vh" [placeholder]="'width=15vw\nheight: 10vh'">
43+
</jigsaw-textarea>
44+
<jigsaw-textarea [resize]="'horizontal'" [placeholder]="'width: 未设置;\nheight: 未设置'">
45+
</jigsaw-textarea>
46+
</div>
47+
48+
<jigsaw-header>不可伸缩（默认）</jigsaw-header>
49+
<div class="container">
50+
<jigsaw-textarea [resize]="'none'" width="200px" height="80px" placeholder="这是不可伸缩的文本输入框">
51+
</jigsaw-textarea>
52+
<jigsaw-textarea [resize]="'none'" width="30%" height="80px" placeholder="这是不可伸缩的文本输入框">
53+
</jigsaw-textarea>
54+
</div>
55+

‎src/app/demo/pc/textarea/resize/demo.component.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Component } from "@angular/core";
2+
3+
@Component({
4+
templateUrl: "./demo.component.html",
5+
styleUrls: ["./demo.component.css"]
6+
})
7+
export class TextareaResizeDemoComponent {
8+
9+
// ====================================================================
10+
// ignore the following lines, they are not important to this demo
11+
// ====================================================================
12+
summary: string = "此Demo演示了textarea组件的可动态调整尺寸的效果，在启用动态调整尺寸时，组件的尺寸单位只能支持px和vw/vh，不支持%";
13+
description: string = "";
14+
}

‎src/app/demo/pc/textarea/resize/demo.module.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { NgModule } from "@angular/core";
2+
import { JigsawTextareaModule, JigsawHeaderModule } from "jigsaw/public_api";
3+
import { TextareaResizeDemoComponent } from "./demo.component";
4+
import { JigsawDemoDescriptionModule } from "app/demo-description/demo-description";
5+
6+
@NgModule({
7+
declarations: [TextareaResizeDemoComponent],
8+
exports: [TextareaResizeDemoComponent],
9+
imports: [
10+
JigsawTextareaModule,
11+
JigsawDemoDescriptionModule,
12+
JigsawHeaderModule
13+
]
14+
})
15+
export class TextareaResizeDemoModule {}

‎src/jigsaw/pc-components/textarea/textarea.html‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
1-
<div class="jigsaw-textarea-container" [ngStyle]="{'height': height ? height : '100%'}"
2-
[ngClass]="{'jigsaw-textarea-focused': focused}">
3-
<textarea #textarea [ngStyle]="{'height': maxLength ? 'calc(100% - 20px)' : '100%'}"
4-
[placeholder]="placeholder"
5-
[(ngModel)]="value"
6-
[disabled]="disabled"
7-
(focus)="_$handleFocus($event)"
8-
(blur)="_$handleBlur($event)">
1+
<div
2+
class="jigsaw-textarea-container"
3+
[ngClass]="{'jigsaw-textarea-focused': focused}"
4+
>
5+
<textarea
6+
#textarea
7+
[placeholder]="placeholder"
8+
[(ngModel)]="value"
9+
[disabled]="disabled"
10+
(focus)="_$handleFocus($event)"
11+
(blur)="_$handleBlur($event)"
12+
>
913
</textarea>
1014
<div class="jigsaw-textarea-icon-end">
11-
<span *ngIf="clearable && !disabled && !!value" (click)="_$clearValue()" class="jigsaw-textarea-clear-bar">&times;</span>
15+
<span *ngIf="clearable && !disabled && !!value" (click)="_$clearValue()" class="jigsaw-textarea-clear-bar">
16+
&times;
17+
</span>
1218
</div>
1319
<div class="jigsaw-textarea-statistics" *ngIf="maxLength">
1420
<span class="jigsaw-textarea-content">{{_$currentLength}}/{{maxLength}}</span>

‎src/jigsaw/pc-components/textarea/textarea.scss‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ $textarea-prefix-cls: #{$jigsaw-prefix}-textarea;
55
.#{$textarea-prefix-cls} {
66
@include inline-block();
77
position: relative;
8-
width: 300px;
9-
height: 100px;
108
line-height: 1.2;
119
font-size: $font-size-base;
1210

@@ -18,18 +16,44 @@ $textarea-prefix-cls: #{$jigsaw-prefix}-textarea;
1816
}
1917

2018
textarea {
21-
width: 100%;
2219
resize: none;
2320
box-shadow: none;
2421
outline: none;
2522
border: none;
23+
width: 100%;
24+
height: 100%;
25+
min-width: 120px;
26+
min-height: 40px;
2627
padding: 10px;
2728
background: $bg-component;
2829
border-radius: $border-radius-base;
2930
}
3031

32+
&-resize-vertical {
33+
height: auto !important;
34+
textarea {
35+
resize: vertical;
36+
}
37+
}
38+
39+
&-resize-horizontal {
40+
width: auto !important;
41+
textarea {
42+
resize: horizontal;
43+
}
44+
}
45+
46+
&-resize-both {
47+
width: auto !important;
48+
height: auto !important;
49+
textarea {
50+
resize: both;
51+
}
52+
}
53+
3154
&-container {
3255
width: 100%;
56+
height: 100%;
3357
background: $bg-component;
3458
border: 1px solid $border-color-default;
3559
border-radius: $border-radius-base;

‎src/jigsaw/pc-components/textarea/textarea.ts‎

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ import {
88
Injector,
99
Input,
1010
Output,
11-
ViewChild
11+
ViewChild,
12+
OnInit,
13+
AfterViewInit
1214
} from '@angular/core';
1315
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";
1416
import {AbstractJigsawComponent, IJigsawFormControl} from "../../common/common";
@@ -28,15 +30,18 @@ import {RequireMarkForCheck} from "../../common/decorator/mark-for-check";
2830
'[style.height]': 'height',
2931
'[class.jigsaw-textarea]': 'true',
3032
'[class.jigsaw-textarea-error]': '!valid',
31-
'[class.jigsaw-textarea-disabled]': 'disabled'
33+
'[class.jigsaw-textarea-disabled]': 'disabled',
34+
'[class.jigsaw-textarea-resize-vertical]':'resize === "vertical"',
35+
'[class.jigsaw-textarea-resize-horizontal]':'resize === "horizontal"',
36+
'[class.jigsaw-textarea-resize-both]':'resize === "both"',
3237
},
3338
providers: [
3439
{provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => JigsawTextarea), multi: true},
3540
],
3641
changeDetection: ChangeDetectionStrategy.OnPush
3742
})
3843

39-
export class JigsawTextarea extends AbstractJigsawComponent implements IJigsawFormControl, ControlValueAccessor {
44+
export class JigsawTextarea extends AbstractJigsawComponent implements IJigsawFormControl, ControlValueAccessor, AfterViewInit {
4045
/**
4146
* 在文本框里的文本非空时，是否显示快速清除按钮，默认为显示。用户单击了清除按钮时，文本框里的文本立即被清空。
4247
*
@@ -55,6 +60,26 @@ export class JigsawTextarea extends AbstractJigsawComponent implements IJigsawFo
5560
@RequireMarkForCheck()
5661
public disabled: boolean = false;
5762

63+
64+
private _resize: "both" | "horizontal" | "vertical" | "none" = "none";
65+
/**
66+
* 设置文本输入框是否可以拉伸
67+
*
68+
* @NoMarkForCheckRequired
69+
*
70+
* $demo = textarea/resize
71+
*/
72+
@Input()
73+
public get resize(): "both" | "horizontal" | "vertical" | "none" {
74+
return this._resize;
75+
}
76+
77+
public set resize(value: "both" | "horizontal" | "vertical" | "none") {
78+
if (CommonUtils.isDefined(value)) {
79+
this._resize = value;
80+
}
81+
}
82+
5883
/**
5984
* 当用户输入非法时，组件给予样式上的提示，以提升易用性，常常和表单配合使用。
6085
*
@@ -304,4 +329,21 @@ export class JigsawTextarea extends AbstractJigsawComponent implements IJigsawFo
304329
this._focused = false;
305330
this.blur.emit(event);
306331
}
332+
333+
ngAfterViewInit() {
334+
if (this.resize === "vertical" || this.resize === "both") {
335+
if (/.+(px|vh)\s*$/i.test(this.height)) {
336+
this._textareaElement.nativeElement.style.height = this.height;
337+
} else {
338+
console.warn("Resizeable JigsawTextarea only accepts height in 'px' and 'vh' format.")
339+
}
340+
}
341+
if (this.resize === "horizontal" || this.resize === "both") {
342+
if (/.+(px|vw)\s*$/i.test(this.width)) {
343+
this._textareaElement.nativeElement.style.width = this.width;
344+
} else {
345+
console.warn("Resizeable JigsawTextarea only accepts width in 'px' and 'vh' format.")
346+
}
347+
}
348+
}
307349
}

‎src/ngx-formly/jigsaw/textarea/src/textarea.type.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {JigsawTextarea} from "@rdkmaster/jigsaw";
1313
[(value)]="to.value"
1414
[clearable]="to.clearable"
1515
[placeholder]="to.placeholder"
16+
[resize]="to.resize"
1617
[maxLength]="to.maxContentLength"
1718
[includesCRLF]="to.includesCRLF"
1819
[valid]="to.valid && !showError"

0 commit comments

Comments
 (0)