javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 14:01:20 +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

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

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