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

refactor(gesture): using disabled

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-01-23 18:55:16 +01:00
parent fbf0059219
commit ef53f249bc
8 changed files with 26 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/src/components.d.ts vendored
View File

@ -952,8 +952,8 @@ declare global {
block?: string; block?: string;
canStart?: GestureCallback; canStart?: GestureCallback;
direction?: string; direction?: string;
disabled?: boolean;
disableScroll?: boolean; disableScroll?: boolean;
enabled?: boolean;
gestureName?: string; gestureName?: string;
gesturePriority?: number; gesturePriority?: number;
maxAngle?: number; maxAngle?: number;

14
packages/core/src/components/gesture/gesture.tsx
View File

@ -30,7 +30,7 @@ export class Gesture {
@Prop({ context: 'dom' }) dom: DomController; @Prop({ context: 'dom' }) dom: DomController;
@Prop({ context: 'enableListener' }) enableListener: EventListenerEnable; @Prop({ context: 'enableListener' }) enableListener: EventListenerEnable;
@Prop() enabled = true; @Prop() disabled = false;
@Prop() attachTo: ElementRef = 'child'; @Prop() attachTo: ElementRef = 'child';
@Prop() autoBlockAll = false; @Prop() autoBlockAll = false;
@Prop() block: string = null; @Prop() block: string = null;
@ -90,7 +90,7 @@ export class Gesture {
} }
this.hasPress = (types.indexOf('press') > -1); this.hasPress = (types.indexOf('press') > -1);
this.enabledChanged(this.enabled); this.disabledChanged(this.disabled);
if (this.pan || this.hasPress) { if (this.pan || this.hasPress) {
this.dom.write(() => { this.dom.write(() => {
applyStyles(getElementReference(this.el, this.attachTo), GESTURE_INLINE_STYLES); applyStyles(getElementReference(this.el, this.attachTo), GESTURE_INLINE_STYLES);
@ -103,12 +103,12 @@ export class Gesture {
} }
} }
@Watch('enabled') @Watch('disabled')
protected enabledChanged(isEnabled: boolean) { protected disabledChanged(isDisabled: boolean) {
if (this.pan || this.hasPress) { if (this.pan || this.hasPress) {
this.enableListener(this, 'touchstart', isEnabled, this.attachTo, this.passive); this.enableListener(this, 'touchstart', !isDisabled, this.attachTo, this.passive);
this.enableListener(this, 'mousedown', isEnabled, this.attachTo, this.passive); this.enableListener(this, 'mousedown', !isDisabled, this.attachTo, this.passive);
if (!isEnabled) { if (isDisabled) {
this.abortGesture(); this.abortGesture();
} }
} }

4
packages/core/src/components/gesture/readme.md
View File

@ -37,7 +37,7 @@ string
boolean boolean
#### enabled #### disabled
boolean boolean
@ -134,7 +134,7 @@ string
boolean boolean
#### enabled #### disabled
boolean boolean

2
packages/core/src/components/menu/menu.tsx
View File

@ -452,7 +452,7 @@ export class Menu {
'onEnd': this.onDragEnd.bind(this), 'onEnd': this.onDragEnd.bind(this),
'maxEdgeStart': this.maxEdgeStart, 'maxEdgeStart': this.maxEdgeStart,
'edge': this.side, 'edge': this.side,
'enabled': this.isActive() && this.swipeEnabled, 'disabled': !this.isActive() || !this.swipeEnabled,
'gestureName': 'menu-swipe', 'gestureName': 'menu-swipe',
'gesturePriority': 10, 'gesturePriority': 10,
'type': 'pan', 'type': 'pan',

8
packages/core/src/components/range/range.tsx
View File

@ -411,20 +411,18 @@ export class Range implements BaseInputComponent {
render() { render() {
return [ return [
<slot name='start'></slot>, <slot name='start'></slot>,
<ion-gesture <ion-gesture {...{
{...{
disableScroll: true, disableScroll: true,
onStart: this.onDragStart.bind(this), onStart: this.onDragStart.bind(this),
onMove: this.onDragMove.bind(this), onMove: this.onDragMove.bind(this),
onEnd: this.onDragEnd.bind(this), onEnd: this.onDragEnd.bind(this),
enabled: !this.disabled, disabled: this.disabled,
gestureName: 'range', gestureName: 'range',
gesturePriority: 30, gesturePriority: 30,
type: 'pan', type: 'pan',
direction: 'x', direction: 'x',
threshold: 0 threshold: 0
}} }}>
>
<div class='range-slider'> <div class='range-slider'>
{this.ticks.map(t => {this.ticks.map(t =>
<div <div

2
packages/core/src/components/refresher/refresher.tsx
View File

@ -361,7 +361,7 @@ export class Refresher {
render() { render() {
return <ion-gesture {...this.gestureConfig} return <ion-gesture {...this.gestureConfig}
enabled={this.enabled}> disabled={!this.enabled}>
<slot></slot> <slot></slot>
</ion-gesture>; </ion-gesture>;
} }

2
packages/core/src/components/reorder-group/reorder-group.tsx
View File

@ -268,7 +268,7 @@ export class ReorderGroup {
onStart: this.onDragStart.bind(this), onStart: this.onDragStart.bind(this),
onMove: this.onDragMove.bind(this), onMove: this.onDragMove.bind(this),
onEnd: this.onDragEnd.bind(this), onEnd: this.onDragEnd.bind(this),
enabled: this.enabled, disabled: !this.enabled,
disableScroll: true, disableScroll: true,
gestureName: 'reorder', gestureName: 'reorder',
gesturePriority: 30, gesturePriority: 30,

2
packages/core/src/components/toggle/toggle.tsx
View File

@ -207,7 +207,7 @@ export class Toggle implements CheckboxInput {
render() { render() {
return [ return [
<ion-gesture {...this.gestureConfig} <ion-gesture {...this.gestureConfig}
enabled={!this.disabled} tabIndex={-1}> disabled={this.disabled} tabIndex={-1}>
<div class='toggle-icon'> <div class='toggle-icon'>
<div class='toggle-inner'/> <div class='toggle-inner'/>
</div> </div>