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

refactor(checkbox) form usage and declarative set (#13898)

Browse Source 
* style(checkbox) use debounce helper

* fix(checkbox) remove imperative prop setting

* fix(checkbox) set default name instead of value

* feat(checkbox) default value to on to match native
This commit is contained in:
Cam Wiegert
2018-01-26 16:59:34 -06:00
committed by GitHub
parent 9d5b907bf6
commit f9b7137a41
1 changed files with 11 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
packages/core/src/components/checkbox/checkbox.tsx
View File

@ -1,5 +1,6 @@
import { BlurEvent, CheckboxInput, CheckedInputChangeEvent, FocusEvent, StyleEvent } from '../../utils/input-interfaces';
import { Component, CssClassMap, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
import { debounce } from '../../utils/helpers';
@Component({
@ -16,7 +17,6 @@ export class Checkbox implements CheckboxInput {
private didLoad: boolean;
private inputId: string;
private nativeInput: HTMLInputElement;
private styleTmr: any;
@State() keyFocus: boolean;
@ -35,7 +35,7 @@ export class Checkbox implements CheckboxInput {
/**
* The name of the control, which is submitted with the form data.
*/
@Prop() name: string;
@Prop({ mutable: true }) name: string;
/**
* If true, the checkbox is selected. Defaults to `false`.
@ -50,7 +50,7 @@ export class Checkbox implements CheckboxInput {
/**
* the value of the checkbox.
*/
@Prop({ mutable: true }) value: string;
@Prop() value = 'on';
/**
* Emitted when the checked property has changed.
@ -73,15 +73,15 @@ export class Checkbox implements CheckboxInput {
@Event() ionStyle: EventEmitter<StyleEvent>;
componentWillLoad() {
this.inputId = 'ion-cb-' + (checkboxIds++);
if (this.value === undefined) {
this.value = this.inputId;
this.inputId = `ion-cb-${checkboxIds++}`;
if (this.name === undefined) {
this.name = this.inputId;
}
this.emitStyle();
}
componentDidLoad() {
this.nativeInput.checked = this.checked;
this.ionStyle.emit = debounce(this.ionStyle.emit.bind(this.ionStyle));
this.didLoad = true;
const parentItem = this.nativeInput.closest('ion-item');
@ -96,10 +96,6 @@ export class Checkbox implements CheckboxInput {
@Watch('checked')
checkedChanged(isChecked: boolean) {
if (this.nativeInput.checked !== isChecked) {
// keep the checked value and native input `nync
this.nativeInput.checked = isChecked;
}
if (this.didLoad) {
this.ionChange.emit({
checked: isChecked,
@ -110,19 +106,10 @@ export class Checkbox implements CheckboxInput {
}
@Watch('disabled')
disabledChanged(isDisabled: boolean) {
this.nativeInput.disabled = isDisabled;
this.emitStyle();
}
emitStyle() {
clearTimeout(this.styleTmr);
this.styleTmr = setTimeout(() => {
this.ionStyle.emit({
'checkbox-disabled': this.disabled,
'checkbox-checked': this.checked,
});
this.ionStyle.emit({
'checkbox-disabled': this.disabled,
'checkbox-checked': this.checked,
});
}
@ -169,6 +156,7 @@ export class Checkbox implements CheckboxInput {
onFocus={this.onFocus.bind(this)}
onBlur={this.onBlur.bind(this)}
onKeyUp={this.onKeyUp.bind(this)}
checked={this.checked}
id={this.inputId}
name={this.name}
value={this.value}