Skip to content

Commit cf482c9

Browse files
rdkmasterrdkmaster
authored
[新增] 增加一个支持多行版的steps组件jigsaw-steps-multiline，用于处理步骤节点多且复杂的情形
1 parent 07c01c6 commit cf482c9

File tree

9 files changed

+612
-8
lines changed

9 files changed

+612
-8
lines changed

‎src/app/demo/steps/demo-set.module.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import {StepsVerticalFullComponent} from "./vertical/demo.component";
88
import {StepsClickChangeStatusComponent} from "./step-interactive/demo.component";
99
import {StepsCustomIconsModule} from "./custom-icons/demo.module";
1010
import {StepsCustomIconsComponent} from "./custom-icons/demo.component";
11+
import {StepsMultilineComponent} from "./steps-multiline/demo.component";
12+
import {StepsMultilineModule} from "./steps-multiline/demo.module";
1113

1214
export const routerConfig = [
1315
{
@@ -22,6 +24,9 @@ export const routerConfig = [
2224
},
2325
{
2426
path:'custom-icons',component:StepsCustomIconsComponent
27+
},
28+
{
29+
path:'steps-multiline',component:StepsMultilineComponent
2530
}
2631
];
2732

@@ -31,7 +36,8 @@ export const routerConfig = [
3136
StepsHorizontalBasicModule,
3237
StepsClickChangeStatusModule,
3338
StepsCustomIconsModule,
34-
StepsVerticalModule
39+
StepsVerticalModule,
40+
StepsMultilineModule
3541
]
3642
})
3743
export class StepsDemoModule {

‎src/app/demo/steps/steps-multiline/demo.component.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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+
6+
<!-- start to learn the demo from here -->
7+
<j-button (click)="_$handleAdd()"> 每行放更多个</j-button>
8+
<j-button (click)="_$handleSub()" [disabled]="numInLine == 1 "> 每行放更少个</j-button>
9+
<j-button (click)="_$handleLarge()"> 大图标</j-button>
10+
<j-button (click)="_$handleSmall()"> 小图标</j-button>
11+
<j-button (click)="_$handleDefault()"> 默认图标</j-button>
12+
<div> 一行有 {{numInLine}} 个元素</div>
13+
<div style="height: calc( 100vh - 110px )">
14+
<jigsaw-steps-multiline [data]="steps" [numInline]="numInLine" [preSize]="presize"
15+
(select)="_$selectChange($event)">
16+
</jigsaw-steps-multiline>
17+
</div>

‎src/app/demo/steps/steps-multiline/demo.component.ts‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import {Component} from "@angular/core";
2+
import {InternalUtils} from "jigsaw/core/utils/internal-utils";
3+
4+
@Component({
5+
templateUrl: './demo.component.html',
6+
})
7+
export class StepsMultilineComponent {
8+
steps = [];
9+
10+
constructor() {
11+
for (let i = 0; i < 50; i++) {
12+
this.steps.push(this._createStepData(i));
13+
}
14+
}
15+
16+
public changeStatus(idx: number) {
17+
this.steps = this.steps.concat([]);
18+
this.steps[idx] = this._createStepData(idx);
19+
}
20+
21+
private _createStepData(index: number) {
22+
const statuses = ["done", "error", "processing", "warning", "skipped", "waiting"];
23+
const status = statuses[InternalUtils.randomNumber(0, statuses.length - 1)];
24+
return {
25+
title: `This is a ${status} node`,
26+
status: status,
27+
subTitle: `#${index + 1} - <a (click)="changeStatus(${index})">click here</a> to change a random status.`,
28+
context: this
29+
};
30+
}
31+
32+
public numInLine = 5;
33+
34+
public presize = 'default';
35+
36+
public _$handleAdd() {
37+
this.numInLine++;
38+
}
39+
40+
public _$handleSub() {
41+
if (this.numInLine > 1) {
42+
this.numInLine--;
43+
}
44+
}
45+
46+
public _$handleLarge() {
47+
this.presize = 'large';
48+
}
49+
50+
public _$handleSmall() {
51+
this.presize = 'small';
52+
}
53+
54+
55+
public _$handleDefault() {
56+
this.presize = 'default';
57+
}
58+
59+
60+
public _$selectChange($event) {
61+
console.log($event);
62+
}
63+
64+
// ====================================================================
65+
// ignore the following lines, they are not important to this demo
66+
// ====================================================================
67+
summary: string = '本demo演示了jigsaw-steps-lite组件最简单的用法';
68+
description: string = '';
69+
}

‎src/app/demo/steps/steps-multiline/demo.module.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {NgModule} from "@angular/core";
2+
import {CommonModule} from "@angular/common";
3+
import {JigsawStepsModule} from "jigsaw/component/steps/index";
4+
import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description";
5+
import {StepsMultilineComponent} from './demo.component';
6+
import {JigsawStepsMultilineModule} from "jigsaw/component/steps/steps-multiline";
7+
import {JigsawButtonModule} from "jigsaw/component/button/button";
8+
import {PerfectScrollbarModule} from "ngx-perfect-scrollbar";
9+
10+
@NgModule({
11+
imports: [
12+
CommonModule, JigsawDemoDescriptionModule, JigsawStepsModule, JigsawStepsMultilineModule, PerfectScrollbarModule,JigsawButtonModule
13+
],
14+
declarations: [StepsMultilineComponent],
15+
exports: [StepsMultilineComponent]
16+
})
17+
export class StepsMultilineModule {
18+
}

‎src/jigsaw/component/steps/step-item.ts‎

Lines changed: 70 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,42 +41,106 @@ export class JigsawStepItem extends AbstractJigsawComponent implements OnInit {
4141
*
4242
* $demo = steps/custom-icons
4343
*/
44-
@Input() public waitingIcon: string = 'fa-file-text-o';
44+
private _waitingIcon: string = 'fa-file-text-o';
45+
@Input()
46+
public get waitingIcon(): string {
47+
return this._waitingIcon;
48+
}
49+
50+
public set waitingIcon(value: string) {
51+
if (value && value != this._waitingIcon) {
52+
this._waitingIcon = value;
53+
}
54+
}
4555

4656
/**
4757
* 设置`done`状态的图标，仅支持font-awesome和Jigsaw自研的iconfont图标
4858
*
4959
* $demo = steps/custom-icons
5060
*/
51-
@Input() public doneIcon: string = 'fa-check-square-o';
61+
62+
private _doneIcon: string = 'fa-check-square-o';
63+
@Input()
64+
public get doneIcon(): string {
65+
return this._doneIcon;
66+
}
67+
68+
public set doneIcon(value: string) {
69+
if (value && value != this._doneIcon) {
70+
this._doneIcon = value;
71+
}
72+
}
5273

5374
/**
5475
* 设置`processing`状态的图标，仅支持font-awesome和Jigsaw自研的iconfont图标
5576
*
5677
* $demo = steps/custom-icons
5778
*/
58-
@Input() public processingIcon: string = 'fa-cog fa-spin fa-2x fa-fw';
79+
80+
private _processingIcon: string = 'fa-cog fa-spin fa-2x fa-fw';
81+
@Input()
82+
public get processingIcon(): string {
83+
return this._processingIcon;
84+
}
85+
86+
public set processingIcon(value: string) {
87+
if (value && value != this._processingIcon) {
88+
this._processingIcon = value;
89+
}
90+
}
5991

6092
/**
6193
* 设置`error`状态的图标，仅支持font-awesome和Jigsaw自研的iconfont图标
6294
*
6395
* $demo = steps/custom-icons
6496
*/
65-
@Input() public errorIcon: string = 'fa-times';
97+
98+
private _errorIcon: string = 'fa-times';
99+
@Input()
100+
public get errorIcon(): string {
101+
return this._errorIcon;
102+
}
103+
104+
public set errorIcon(value: string) {
105+
if (value && value != this._errorIcon) {
106+
this._errorIcon = value;
107+
}
108+
}
66109

67110
/**
68111
* 设置`skipped`状态的图标，仅支持font-awesome和Jigsaw自研的iconfont图标
69112
*
70113
* $demo = steps/custom-icons
71114
*/
72-
@Input() public skippedIcon: string = 'fa-ban';
115+
116+
private _skippedIcon: string = 'fa-ban';
117+
@Input()
118+
public get skippedIcon(): string {
119+
return this._waitingIcon;
120+
}
121+
122+
public set skippedIcon(value: string) {
123+
if (value && value != this._skippedIcon) {
124+
this._skippedIcon = value;
125+
}
126+
}
73127

74128
/**
75129
* 设置`warning`状态的图标，仅支持font-awesome和Jigsaw自研的iconfont图标
76130
*
77131
* $demo = steps/custom-icons
78132
*/
79-
@Input() public warningIcon: string = 'fa-exclamation-triangle';
133+
private _warningIcon: string = 'fa-exclamation-triangle';
134+
@Input()
135+
public get warningIcon(): string {
136+
return this._warningIcon;
137+
}
138+
139+
public set warningIcon(value: string) {
140+
if (value && value != this._warningIcon) {
141+
this._warningIcon = value;
142+
}
143+
}
80144

81145
/**
82146
* @internal

‎src/jigsaw/component/steps/steps-multiline.scss‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
@import "../../assets/scss/core/base";
2+
3+
$steps-prefix-cls: #{$jigsaw-prefix}-steps;
4+
$steps-multiline-prefix-cls: #{$jigsaw-prefix}-steps-multiline;
5+
$step-item-prefix-cls: #{$jigsaw-prefix}-step-item;
6+
7+
.#{$steps-multiline-prefix-cls} {
8+
&-odd {
9+
.#{$steps-prefix-cls}-container {
10+
flex-direction: row-reverse !important;
11+
12+
.#{$step-item-prefix-cls} {
13+
.#{$jigsaw-prefix}-logo-line-container {
14+
flex-direction: row-reverse !important;
15+
.#{$jigsaw-prefix}-step-status-logo {
16+
cursor: pointer;
17+
}
18+
}
19+
20+
&:nth-last-child(3) {
21+
padding-right: 0px !important;
22+
padding-left: 26px !important;
23+
.#{$jigsaw-prefix}-step-title, .#{$jigsaw-prefix}-sub-title {
24+
text-align: center;
25+
padding-right: 26px !important;
26+
margin-right: 50% !important;
27+
margin-left: 0 !important;
28+
}
29+
}
30+
31+
.#{$jigsaw-prefix}-step-title, .#{$jigsaw-prefix}-sub-title {
32+
text-align: center;
33+
margin-left: 50% !important;
34+
width: 100%;
35+
padding-right: 26px !important;
36+
padding-left: 0px !important;
37+
}
38+
}
39+
40+
.#{$step-item-prefix-cls}-overflow {
41+
visibility: hidden;
42+
}
43+
44+
.#{$step-item-prefix-cls}-last {
45+
.#{$jigsaw-prefix}-step-line {
46+
display: none;
47+
}
48+
}
49+
}
50+
51+
}
52+
&-even {
53+
.#{$jigsaw-prefix}-logo-line-container {
54+
.#{$jigsaw-prefix}-step-status-logo {
55+
cursor: pointer;
56+
}
57+
}
58+
.#{$steps-prefix-cls}-container {
59+
.#{$step-item-prefix-cls}-overflow {
60+
visibility: hidden;
61+
}
62+
63+
.#{$step-item-prefix-cls}-last {
64+
.#{$jigsaw-prefix}-step-line {
65+
display: none;
66+
}
67+
}
68+
}
69+
70+
}
71+
72+
&-odd.#{$steps-prefix-cls}-size-large {
73+
.#{$steps-prefix-cls}-container {
74+
.#{$step-item-prefix-cls} {
75+
76+
&:nth-last-child(3) {
77+
padding-left: 30px !important;
78+
.#{$jigsaw-prefix}-step-title, .#{$jigsaw-prefix}-sub-title {
79+
padding-right: 30px !important;
80+
}
81+
}
82+
83+
.#{$jigsaw-prefix}-step-title, .#{$jigsaw-prefix}-sub-title {
84+
padding-right: 30px !important;
85+
}
86+
}
87+
}
88+
89+
}
90+
91+
&-odd.#{$steps-prefix-cls}-size-small {
92+
.#{$steps-prefix-cls}-container {
93+
flex-direction: row-reverse !important;
94+
95+
.#{$step-item-prefix-cls} {
96+
&:nth-last-child(3) {
97+
padding-left: 20px !important;
98+
.#{$jigsaw-prefix}-step-title, .#{$jigsaw-prefix}-sub-title {
99+
padding-right: 20px !important;
100+
}
101+
}
102+
103+
.#{$jigsaw-prefix}-step-title, .#{$jigsaw-prefix}-sub-title {
104+
padding-right: 20px !important;
105+
}
106+
}
107+
}
108+
}
109+
}

0 commit comments

Comments
 (0)