From 2b5fe0c2bfc349294285a929581249b331e16fa2 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 20 Feb 2019 15:57:28 -0500 Subject: [PATCH] chore(range): revert neutral point (#17550) * Revert "fix(range): improved rtl support (#17479)" This reverts commit f832de5f4ac1e7db5a2a1c48ca7b85ad7ef671b5. revert range rtl support * Revert "feat(range): add neutral point (#17400)" This reverts commit 15acb4be37eef4d1c90229cf64fb836e249c225c. revert neutral point --- angular/src/directives/proxies.ts | 4 +- core/api.txt | 3 +- core/src/components.d.ts | 12 +-- core/src/components/range/range.tsx | 102 ++++-------------- core/src/components/range/readme.md | 45 +++----- .../components/range/test/basic/index.html | 6 -- core/src/components/range/usage/angular.md | 8 -- core/src/components/range/usage/javascript.md | 8 -- 8 files changed, 37 insertions(+), 151 deletions(-) diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index 1b01f51f2d..3c76469d93 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -586,7 +586,7 @@ export class IonRadioGroup { proxyInputs(IonRadioGroup, ['allowEmptySelection', 'name', 'value']); export declare interface IonRange extends StencilComponents<'IonRange'> {} -@Component({ selector: 'ion-range', changeDetection: 0, template: '', inputs: ['color', 'mode', 'neutralPoint', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'disabled', 'value'] }) +@Component({ selector: 'ion-range', changeDetection: 0, template: '', inputs: ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'disabled', 'value'] }) export class IonRange { ionChange!: EventEmitter; ionFocus!: EventEmitter; @@ -598,7 +598,7 @@ export class IonRange { proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']); } } -proxyInputs(IonRange, ['color', 'mode', 'neutralPoint', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'disabled', 'value']); +proxyInputs(IonRange, ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'disabled', 'value']); export declare interface IonRefresher extends StencilComponents<'IonRefresher'> {} @Component({ selector: 'ion-refresher', changeDetection: 0, template: '', inputs: ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled'] }) diff --git a/core/api.txt b/core/api.txt index dba34552d3..679d727fb6 100644 --- a/core/api.txt +++ b/core/api.txt @@ -800,11 +800,10 @@ ion-range,prop,max,number,100,false,false ion-range,prop,min,number,0,false,false ion-range,prop,mode,"ios" | "md",undefined,false,false ion-range,prop,name,string,'',false,false -ion-range,prop,neutralPoint,number,0,false,false ion-range,prop,pin,boolean,false,false,false ion-range,prop,snaps,boolean,false,false,false ion-range,prop,step,number,1,false,false -ion-range,prop,value,null | number | { lower: number; upper: number; },null,false,false +ion-range,prop,value,number | { lower: number; upper: number; },0,false,false ion-range,event,ionBlur,void,true ion-range,event,ionChange,RangeChangeEventDetail,true ion-range,event,ionFocus,void,true diff --git a/core/src/components.d.ts b/core/src/components.d.ts index baca746f3b..9119916d90 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -3309,10 +3309,6 @@ export namespace Components { */ 'name': string; /** - * The neutral point of the range slider. Default: value is `0` or the `min` when `neutralPoint < min` or `max` when `max < neutralPoint`. - */ - 'neutralPoint': number; - /** * If `true`, a pin with integer value is shown when the knob is pressed. */ 'pin': boolean; @@ -3327,7 +3323,7 @@ export namespace Components { /** * the value of the range. */ - 'value': RangeValue | null; + 'value': RangeValue; } interface IonRangeAttributes extends StencilHTMLAttributes { /** @@ -3363,10 +3359,6 @@ export namespace Components { */ 'name'?: string; /** - * The neutral point of the range slider. Default: value is `0` or the `min` when `neutralPoint < min` or `max` when `max < neutralPoint`. - */ - 'neutralPoint'?: number; - /** * Emitted when the range loses focus. */ 'onIonBlur'?: (event: CustomEvent) => void; @@ -3393,7 +3385,7 @@ export namespace Components { /** * the value of the range. */ - 'value'?: RangeValue | null; + 'value'?: RangeValue; } interface IonRefresherContent { diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx index 93ffb901d1..d84a8e095a 100644 --- a/core/src/components/range/range.tsx +++ b/core/src/components/range/range.tsx @@ -44,25 +44,6 @@ export class Range implements ComponentInterface { */ @Prop() mode!: Mode; - /** - * The neutral point of the range slider. - * Default: value is `0` or the `min` when `neutralPoint < min` or `max` when `max < neutralPoint`. - */ - @Prop() neutralPoint = 0; - protected neutralPointChanged() { - if (this.noUpdate) { - return; - } - const { min, max, neutralPoint } = this; - - if (max < neutralPoint) { - this.neutralPoint = max; - } - if (neutralPoint < min) { - this.neutralPoint = min; - } - } - /** * How long, in milliseconds, to wait to trigger the * `ionChange` event after each change in the range value. @@ -138,7 +119,7 @@ export class Range implements ComponentInterface { /** * the value of the range. */ - @Prop({ mutable: true }) value: RangeValue | null = null; + @Prop({ mutable: true }) value: RangeValue = 0; @Watch('value') protected valueChanged(value: RangeValue) { if (!this.noUpdate) { @@ -229,14 +210,14 @@ export class Range implements ComponentInterface { } private getValue(): RangeValue { - const value = this.value || this.neutralPoint || 0; + const value = this.value || 0; if (this.dualKnobs) { if (typeof value === 'object') { return value; } return { - lower: this.value === null ? this.neutralPoint : 0, - upper: this.value === null ? this.neutralPoint : value + lower: 0, + upper: value }; } else { if (typeof value === 'object') { @@ -380,69 +361,25 @@ export class Range implements ComponentInterface { } }; } - protected getActiveBarPosition() { - const { min, max, neutralPoint, ratioLower, ratioUpper } = this; - const neutralPointRatio = valueToRatio(neutralPoint, min, max); - - const isRTL = document.dir === 'rtl'; - const start = isRTL ? 'right' : 'left'; - const end = isRTL ? 'left' : 'right'; - const style: any = {}; - - // dual knob handling - style[start] = `${ratioLower * 100}%`; - style[end] = `${100 - ratioUpper * 100}%`; - - // single knob handling - if (!this.dualKnobs) { - if (this.ratioA < neutralPointRatio) { - style[end] = `${neutralPointRatio * 100}%`; - style[start] = `${this.ratioA * 100}%`; - } else { - style[end] = `${100 - this.ratioA * 100}%`; - style[start] = `${neutralPointRatio * 100}%`; - } - } - - return style; - } - - protected isTickActive(stepRatio: number) { - const { min, max, neutralPoint, ratioLower, ratioUpper } = this; - const neutralPointRatio = valueToRatio(neutralPoint, min, max); - - if (this.dualKnobs) { - return (stepRatio >= ratioLower && stepRatio <= ratioUpper); - } - - if (this.ratioA <= neutralPointRatio && stepRatio >= this.ratioA && stepRatio <= neutralPointRatio) { - return true; - } - - if (this.ratioA >= neutralPointRatio && stepRatio <= this.ratioA && stepRatio >= neutralPointRatio) { - return true; - } - - return false; - } render() { - const { min, max, neutralPoint, step } = this; - const barPosition = this.getActiveBarPosition(); + const { min, max, step, ratioLower, ratioUpper } = this; + + const barStart = `${ratioLower * 100}%`; + const barEnd = `${100 - ratioUpper * 100}%`; const isRTL = document.dir === 'rtl'; const start = isRTL ? 'right' : 'left'; const end = isRTL ? 'left' : 'right'; - const ticks: any[] = []; - + const ticks = []; if (this.snaps) { for (let value = min; value <= max; value += step) { const ratio = valueToRatio(value, min, max); const tick: any = { ratio, - active: this.isTickActive(ratio), + active: ratio >= ratioLower && ratio <= ratioUpper, }; tick[start] = `${ratio * 100}%`; @@ -453,6 +390,7 @@ export class Range implements ComponentInterface { const tickStyle = (tick: any) => { const style: any = {}; + style[start] = tick[start]; return style; @@ -461,8 +399,8 @@ export class Range implements ComponentInterface { const barStyle = () => { const style: any = {}; - style[start] = barPosition[start]; - style[end] = barPosition[end]; + style[start] = barStart; + style[end] = barEnd; return style; }; @@ -497,8 +435,7 @@ export class Range implements ComponentInterface { disabled: this.disabled, handleKeyboard: this.handleKeyboard, min, - max, - neutralPoint + max })} { this.dualKnobs && renderKnob({ @@ -510,8 +447,7 @@ export class Range implements ComponentInterface { disabled: this.disabled, handleKeyboard: this.handleKeyboard, min, - max, - neutralPoint + max })} , @@ -525,7 +461,6 @@ interface RangeKnob { ratio: number; min: number; max: number; - neutralPoint: number; disabled: boolean; pressed: boolean; pin: boolean; @@ -533,12 +468,13 @@ interface RangeKnob { handleKeyboard: (name: KnobName, isIncrease: boolean) => void; } -function renderKnob({ knob, value, ratio, min, max, neutralPoint, disabled, pressed, pin, handleKeyboard }: RangeKnob) { +function renderKnob({ knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard }: RangeKnob) { const isRTL = document.dir === 'rtl'; const start = isRTL ? 'right' : 'left'; const knobStyle = () => { const style: any = {}; + style[start] = `${ratio * 100}%`; return style; @@ -565,8 +501,7 @@ function renderKnob({ knob, value, ratio, min, max, neutralPoint, disabled, pres 'range-knob-b': knob === 'B', 'range-knob-pressed': pressed, 'range-knob-min': value === min, - 'range-knob-max': value === max, - 'range-knob-neutral': value === neutralPoint + 'range-knob-max': value === max }} style={knobStyle()} role="slider" @@ -575,7 +510,6 @@ function renderKnob({ knob, value, ratio, min, max, neutralPoint, disabled, pres aria-valuemax={max} aria-disabled={disabled ? 'true' : null} aria-valuenow={value} - aria-valueneutral={neutralPoint} > {pin && }