Skip to content

Commit 8c300d3

Browse files
yannbfyannbf
committed
chore(image-checkbox) Add ngModel support
1 parent 72b0e61 commit 8c300d3

File tree

5 files changed

+88
-23
lines changed

5 files changed

+88
-23
lines changed

‎src/components/image-checkbox/image-checkbox.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<ion-grid>
22
<ion-row>
3-
<ion-col *ngFor="let option of options"
4-
(click)="select(option)"
5-
[class.selected]="option.selected"
6-
[class.pulse]="option.selected"
3+
<ion-col *ngFor="let item of items"
4+
(click)="select(item)"
5+
[class.selected]="item.selected"
6+
[class.pulse]="item.selected && animated"
77
class="scroll-item selectable-icon">
8-
<img [src]="option.image"
8+
<img [src]="item.image"
99
[style.border-color]="borderColor"/>
1010
<p text-center
1111
[style.color]="textColor">
12-
{{option.text}}
12+
{{item.text}}
1313
</p>
14-
<ion-icon name="ios-checkmark-circle"
14+
<ion-icon [name]="checkIcon"
1515
[style.color]="textColor">
1616
</ion-icon>
1717
</ion-col>

‎src/components/image-checkbox/image-checkbox.scss

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
image-checkbox {
2-
$my-red: rgb(255,50,81);
32
ion-scroll[scrollX] {
43
white-space: nowrap;
54
height: 75px;
@@ -40,18 +39,16 @@ image-checkbox {
4039
transition: all .2s linear;
4140

4241
border-radius: 50%;
43-
border: 1px solid $my-red;
42+
border: 1px solid;
4443
padding: 1.5rem;
4544
}
4645

4746
p {
4847
margin: 0;
4948
padding-top: 1rem;
50-
color: $my-red;
5149
}
5250

5351
ion-icon {
54-
color: $my-red;
5552
background: white;
5653
position: absolute;
5754
top: 8%;

‎src/components/image-checkbox/image-checkbox.ts

Lines changed: 61 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,76 @@
1-
import { Component, Input, Output } from '@angular/core';
1+
import { Component, Input, Output, forwardRef} from '@angular/core';
2+
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
23

34
@Component({
45
selector: 'image-checkbox',
5-
templateUrl: 'image-checkbox.html'
6+
templateUrl: 'image-checkbox.html',
7+
providers: [
8+
{
9+
provide: NG_VALUE_ACCESSOR,
10+
useExisting: forwardRef(() => ImageCheckboxComponent),
11+
multi: true
12+
}
13+
]
614
})
7-
export class ImageCheckboxComponent {
15+
export class ImageCheckboxComponent implements ControlValueAccessor {
816

17+
@Input('items') items;
18+
@Input() disabled:boolean = false;
919
@Input('options') options;
1020
@Output() onSelected;
1121

12-
borderColor = '#FF0000';
13-
textColor = 'red';
22+
defaultColor = '#FF3251';
23+
borderColor = this.defaultColor;
24+
textColor = this.defaultColor;
25+
checkIcon = 'ios-checkmark-circle';
26+
animated;
27+
28+
constructor() { }
29+
30+
value: boolean = false;
31+
32+
onChange = (_) => {
33+
console.log('oi');
34+
};
35+
onTouched = () => {};
36+
37+
writeValue(value: any) { //just fire once to get the inital value
38+
if (value !== undefined) {
39+
}
40+
this.propagateChange(value);
41+
}
42+
1443

15-
constructor() {
16-
if(!this.options) {
17-
console.log('ImageCheckbox warn: no items were added.');
44+
ngAfterViewInit() {
45+
if(!this.items) {
46+
console.warn('ImageCheckbox warn: no items were added.');
1847
}
48+
49+
if(this.options){
50+
this.borderColor = this.options.borderColor || this.defaultColor;
51+
this.textColor = this.options.textColor || this.defaultColor;
52+
this.checkIcon = this.options.checkIcon || this.checkIcon;
53+
this.animated = this.options.animated !== false;;
54+
}
55+
}
56+
57+
ngOnChanges(changes) {
58+
console.log('change', changes);
59+
if (changes && changes.disabled) {
60+
// this.setDisabled(changes.disabled.currentValue);
61+
}
62+
}
63+
64+
propagateChange = (_: any) => { };
65+
66+
registerOnChange(fn) {
67+
this.propagateChange = fn;
1968
}
69+
registerOnTouched() { }
2070

21-
select(option) {
22-
this.options.map(opt => opt.selected = opt === option);
71+
select(item) {
72+
this.items.map(_item => _item.selected = _item === item);
73+
this.propagateChange(item.value);
2374
// this.onSelected();
2475
}
2576
}

‎src/pages/_home/home.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ <h3>Advanced Ionic 2 Components</h3>
1616
Also, the best way to understand the ionic framework is by reading the <a href="http://ionicframework.com/docs/v2">docs</a>,
1717
which are really great.
1818
</p>
19-
<image-checkbox [options]="options"></image-checkbox>
19+
<image-checkbox [items]="items" [(ngModel)]="teste"></image-checkbox>
20+
<button ion-button (click)="show()" (ionChange)="show()">test</button>
2021
<button class="pop-in" ion-button secondary menuToggle>Toggle Menu</button>
2122
</ion-content>
2223

‎src/pages/_home/home.ts

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,36 @@ import { IonicPage, NavController } from 'ionic-angular';
88
})
99
export class HomePage {
1010

11-
options = [
11+
items = [
1212
{
1313
selected: false,
1414
image: 'https://www.shareicon.net/data/128x128/2016/04/22/753629_people_512x512.png',
1515
text: 'Beginner',
16+
value: 'Beginner v',
1617
},
1718
{
1819
selected: false,
1920
image: 'https://www.shareicon.net/data/128x128/2016/04/22/753631_character_512x512.png',
2021
text: 'Intermediate',
22+
value: 'Intermediate v',
2123
},
2224
{
2325
selected: false,
2426
image: 'https://www.shareicon.net/data/128x128/2016/04/22/753637_wizard_512x512.png',
2527
text: 'Advanced',
28+
value: 'Advanced v',
2629
},
2730
]
2831

32+
options = {
33+
borderColor: '#FFFF00',
34+
textColor: '#FF00FF',
35+
checkIcon: 'heart',
36+
animated: false
37+
}
38+
39+
teste;
40+
2941
drawerOptions: any;
3042
constructor(public navCtrl: NavController) {
3143
this.drawerOptions = {
@@ -35,4 +47,8 @@ export class HomePage {
3547
bounceBack: true
3648
};
3749
}
50+
51+
show(){
52+
console.log(this.teste);
53+
}
3854
}

0 commit comments

Comments
 (0)