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

fix(inputs): disabled handling (#16071)

Browse Source
This commit is contained in:
Manu MA
2018-10-25 22:50:06 +02:00
committed by GitHub
parent 4d3ad67740
commit ef6895acbd
36 changed files with 320 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
core/src/components/toggle/readme.md
View File

@ -9,14 +9,14 @@ Toggles change the state of a single option. Toggles can be switched on or off b
## Properties
| Property | Attribute | Description | Type |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| `checked` | `checked` | If `true`, the toggle is selected. Defaults to `false`. | `boolean` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the toggle. Default false. | `boolean` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` |
| `value` | `value` | the value of the toggle. | `string` |
| Property | Attribute | Description | Type |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
| `checked` | `checked` | If `true`, the toggle is selected. Defaults to `false`. | `boolean` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the toggle. Defaults to `false`. | `boolean` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` |
| `value` | `value` | the value of the toggle. | `null \| string \| undefined` |
## Events

27
core/src/components/toggle/toggle.tsx
View File

@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, Queu
import { CheckedInputChangeEvent, Color, Gesture, GestureDetail, Mode, StyleEvent } from '../../interface';
import { hapticSelection } from '../../utils/haptic';
import { deferEvent, renderHiddenInput } from '../../utils/helpers';
import { renderHiddenInput } from '../../utils/helpers';
import { createColorClasses, hostContext } from '../../utils/theme';
@Component({
@ -51,14 +51,14 @@ export class Toggle implements ComponentInterface {
@Prop({ mutable: true }) checked = false;
/**
* If `true`, the user cannot interact with the toggle. Default false.
* If `true`, the user cannot interact with the toggle. Defaults to `false`.
*/
@Prop() disabled = false;
/**
* the value of the toggle.
*/
@Prop() value = 'on';
@Prop() value?: string | null = 'on';
/**
* Emitted when the value property has changed.
@ -90,16 +90,14 @@ export class Toggle implements ComponentInterface {
@Watch('disabled')
disabledChanged() {
this.ionStyle.emit({
'interactive-disabled': this.disabled,
});
this.emitStyle();
if (this.gesture) {
this.gesture.setDisabled(this.disabled);
}
}
componentWillLoad() {
this.ionStyle = deferEvent(this.ionStyle);
this.emitStyle();
}
async componentDidLoad() {
@ -125,6 +123,12 @@ export class Toggle implements ComponentInterface {
this.disabledChanged();
}
private emitStyle() {
this.ionStyle.emit({
'interactive-disabled': this.disabled,
});
}
private onStart(detail: GestureDetail) {
this.pivotX = detail.currentX;
this.activated = true;
@ -171,6 +175,10 @@ export class Toggle implements ComponentInterface {
this.ionBlur.emit();
}
private getValue() {
return this.value || '';
}
hostData() {
return {
class: {
@ -186,7 +194,8 @@ export class Toggle implements ComponentInterface {
}
render() {
renderHiddenInput(this.el, this.name, (this.checked ? this.value : ''), this.disabled);
const value = this.getValue();
renderHiddenInput(this.el, this.name, (this.checked ? value : ''), this.disabled);
return [
<div class="toggle-icon">
@ -201,7 +210,7 @@ export class Toggle implements ComponentInterface {
checked={this.checked}
id={this.inputId}
name={this.name}
value={this.value}
value={value}
disabled={this.disabled}
ref={r => this.nativeInput = (r as any)}
/>,