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

fix(range): use latest ion-gesture

Browse Source
This commit is contained in:
Manuel Mtz-Almeida
2017-09-18 20:00:33 +02:00
parent e3d3bc40d2
commit 4669a7aa37
2 changed files with 23 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/core/src/components/range/range-knob.tsx
View File

@ -60,11 +60,11 @@ export class RangeKnob {
render() { render() {
if (this.pin) { if (this.pin) {
return [ return [
<div class="range-pin" role="presentation">{this.val}</div>, <div class='range-pin' role='presentation'>{this.val}</div>,
<div class="range-knob" role="presentation" /> <div class='range-knob' role='presentation' />
]; ];
} }
return <div class="range-knob" role="presentation" />; return <div class='range-knob' role='presentation' />;
} }
} }

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

@ -45,8 +45,7 @@ export class Range implements BaseInputComponent {
@Prop() color: string; @Prop() color: string;
@Prop() mode: string; @Prop() mode: string;
@Prop({ state: true }) @Prop({ mutable: true }) value: any;
value: any;
@Prop() disabled: boolean = false; @Prop() disabled: boolean = false;
@Prop() min: number = 0; @Prop() min: number = 0;
@ -225,14 +224,9 @@ export class Range implements BaseInputComponent {
upper: Math.max(this._valA, this._valB) upper: Math.max(this._valA, this._valB)
}; };
console.debug(
`range, updateKnob: ${ratio}, lower: ${this.value.lower}, upper: ${this
.value.upper}`
);
} else { } else {
// single knob only has one value // single knob only has one value
value = this._valA; value = this._valA;
console.debug(`range, updateKnob: ${ratio}, value: ${this.value}`);
} }
// Update input value // Update input value
@ -280,17 +274,13 @@ export class Range implements BaseInputComponent {
this.updateBar(); this.updateBar();
} }
canStart() { onDragStart(detail: GestureDetail) {
const el = this.rangeEl.querySelector('.range-slider');
this._rect = el.getBoundingClientRect();
return !this.disabled;
}
onDown(detail: GestureDetail) {
if (this.disabled) return false; if (this.disabled) return false;
this.fireFocus(); this.fireFocus();
const current = { x: detail.currentX, y: detail.currentY }; const current = { x: detail.currentX, y: detail.currentY };
const el = this.rangeEl.querySelector('.range-slider');
this._rect = el.getBoundingClientRect();
const rect = this._rect; const rect = this._rect;
// figure out which knob they started closer to // figure out which knob they started closer to
@ -307,7 +297,7 @@ export class Range implements BaseInputComponent {
return true; return true;
} }
onUp(detail: GestureDetail) { onDragEnd(detail: GestureDetail) {
if (this.disabled) { if (this.disabled) {
return; return;
} }
@ -339,43 +329,43 @@ export class Range implements BaseInputComponent {
render() { render() {
return [ return [
<slot name="range-start" />, <slot name='range-start' />,
<ion-gesture <ion-gesture
props={{ props={{
disableScroll: true, disableScroll: true,
canStart: this.canStart.bind(this), onStart: this.onDragStart.bind(this),
onDown: this.onDown.bind(this),
onMove: this.onDragMove.bind(this), onMove: this.onDragMove.bind(this),
onUp: this.onUp.bind(this), onEnd: this.onDragEnd.bind(this),
enabled: !this.disabled,
gestureName: 'range', gestureName: 'range',
gesturePriority: 30, gesturePriority: 30,
type: 'press,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
style={{ left: t.left }} style={{ left: t.left }}
role="presentation" role='presentation'
class={{ 'range-tick': true, 'range-tick-active': t.active }} class={{ 'range-tick': true, 'range-tick-active': t.active }}
/> />
)} )}
<div class="range-bar" role="presentation" /> <div class='range-bar' role='presentation' />
<div <div
class="range-bar range-bar-active" class='range-bar range-bar-active'
style={{ style={{
left: this._barL, left: this._barL,
right: this._barR right: this._barR
}} }}
role="presentation" role='presentation'
/> />
<ion-range-knob <ion-range-knob
class="range-knob-handle" class='range-knob-handle'
knob="knobA" knob='knobA'
pressed={this._pressedA} pressed={this._pressedA}
ratio={this._ratioA} ratio={this._ratioA}
val={this._valA} val={this._valA}
@ -386,8 +376,8 @@ export class Range implements BaseInputComponent {
{this.dualKnobs {this.dualKnobs
? <ion-range-knob ? <ion-range-knob
class="range-knob-handle" class='range-knob-handle'
knob="knobB" knob='knobB'
pressed={this._pressedB} pressed={this._pressedB}
ratio={this._ratioB} ratio={this._ratioB}
val={this._valB} val={this._valB}
@ -398,7 +388,7 @@ export class Range implements BaseInputComponent {
: null} : null}
</div> </div>
</ion-gesture>, </ion-gesture>,
<slot name="range-end" /> <slot name='range-end' />
]; ];
} }
} }