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

feat(range): add neutral point (#17400)

Browse Source 
* feat(Range): add neutral point

* feat(Range): generate proxies and api

* fix(): check positive case in neutralPointChanged

* fix(Range): neutralPoint to min if neutralPoint < min

* fix(Range): active bar style

* fix(Range): tick styling
This commit is contained in:
Bengt Weiße
2019-02-12 23:17:23 +01:00
committed by Liam DeBeasi
parent 39fbc32348
commit 15acb4be37
8 changed files with 149 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
angular/src/directives/proxies.ts
View File

@ -586,7 +586,7 @@ export class IonRadioGroup {
proxyInputs(IonRadioGroup, ['allowEmptySelection', 'name', 'value']); proxyInputs(IonRadioGroup, ['allowEmptySelection', 'name', 'value']);
export declare interface IonRange extends StencilComponents<'IonRange'> {} export declare interface IonRange extends StencilComponents<'IonRange'> {}
@Component({ selector: 'ion-range', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'disabled', 'value'] }) @Component({ selector: 'ion-range', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'neutralPoint', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'disabled', 'value'] })
export class IonRange { export class IonRange {
ionChange!: EventEmitter<CustomEvent>; ionChange!: EventEmitter<CustomEvent>;
ionFocus!: EventEmitter<CustomEvent>; ionFocus!: EventEmitter<CustomEvent>;
@ -598,7 +598,7 @@ export class IonRange {
proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']); proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']);
} }
} }
proxyInputs(IonRange, ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'disabled', 'value']); proxyInputs(IonRange, ['color', 'mode', 'neutralPoint', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'disabled', 'value']);
export declare interface IonRefresher extends StencilComponents<'IonRefresher'> {} export declare interface IonRefresher extends StencilComponents<'IonRefresher'> {}
@Component({ selector: 'ion-refresher', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled'] }) @Component({ selector: 'ion-refresher', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled'] })

3
core/api.txt
View File

@ -800,10 +800,11 @@ ion-range,prop,max,number,100,false,false
ion-range,prop,min,number,0,false,false ion-range,prop,min,number,0,false,false
ion-range,prop,mode,"ios" | "md",undefined,false,false ion-range,prop,mode,"ios" | "md",undefined,false,false
ion-range,prop,name,string,'',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,pin,boolean,false,false,false
ion-range,prop,snaps,boolean,false,false,false ion-range,prop,snaps,boolean,false,false,false
ion-range,prop,step,number,1,false,false ion-range,prop,step,number,1,false,false
ion-range,prop,value,number | { lower: number; upper: number; },0,false,false ion-range,prop,value,null | number | { lower: number; upper: number; },null,false,false
ion-range,event,ionBlur,void,true ion-range,event,ionBlur,void,true
ion-range,event,ionChange,RangeChangeEventDetail,true ion-range,event,ionChange,RangeChangeEventDetail,true
ion-range,event,ionFocus,void,true ion-range,event,ionFocus,void,true

12
core/src/components.d.ts vendored
View File

@ -3309,6 +3309,10 @@ export namespace Components {
*/ */
'name': string; '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. * If `true`, a pin with integer value is shown when the knob is pressed.
*/ */
'pin': boolean; 'pin': boolean;
@ -3323,7 +3327,7 @@ export namespace Components {
/** /**
* the value of the range. * the value of the range.
*/ */
'value': RangeValue; 'value': RangeValue | null;
} }
interface IonRangeAttributes extends StencilHTMLAttributes { interface IonRangeAttributes extends StencilHTMLAttributes {
/** /**
@ -3359,6 +3363,10 @@ export namespace Components {
*/ */
'name'?: string; '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. * Emitted when the range loses focus.
*/ */
'onIonBlur'?: (event: CustomEvent<void>) => void; 'onIonBlur'?: (event: CustomEvent<void>) => void;
@ -3385,7 +3393,7 @@ export namespace Components {
/** /**
* the value of the range. * the value of the range.
*/ */
'value'?: RangeValue; 'value'?: RangeValue | null;
} }
interface IonRefresherContent { interface IonRefresherContent {

99
core/src/components/range/range.tsx
View File

@ -44,6 +44,25 @@ export class Range implements ComponentInterface {
*/ */
@Prop() mode!: Mode; @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 * How long, in milliseconds, to wait to trigger the
* `ionChange` event after each change in the range value. * `ionChange` event after each change in the range value.
@ -119,7 +138,7 @@ export class Range implements ComponentInterface {
/** /**
* the value of the range. * the value of the range.
*/ */
@Prop({ mutable: true }) value: RangeValue = 0; @Prop({ mutable: true }) value: RangeValue | null = null;
@Watch('value') @Watch('value')
protected valueChanged(value: RangeValue) { protected valueChanged(value: RangeValue) {
if (!this.noUpdate) { if (!this.noUpdate) {
@ -210,14 +229,14 @@ export class Range implements ComponentInterface {
} }
private getValue(): RangeValue { private getValue(): RangeValue {
const value = this.value || 0; const value = this.value || this.neutralPoint || 0;
if (this.dualKnobs) { if (this.dualKnobs) {
if (typeof value === 'object') { if (typeof value === 'object') {
return value; return value;
} }
return { return {
lower: 0, lower: this.value === null ? this.neutralPoint : 0,
upper: value upper: this.value === null ? this.neutralPoint : value
}; };
} else { } else {
if (typeof value === 'object') { if (typeof value === 'object') {
@ -361,25 +380,67 @@ export class Range implements ComponentInterface {
} }
}; };
} }
protected getActiveBarPosition() {
const { min, max, neutralPoint, ratioLower, ratioUpper } = this;
const neutralPointRatio = valueToRatio(neutralPoint, min, max);
// dual knob handling
let left = `${ratioLower * 100}%`;
let right = `${100 - ratioUpper * 100}%`;
// single knob handling
if (!this.dualKnobs) {
if (this.ratioA < neutralPointRatio) {
right = `${neutralPointRatio * 100}%`;
left = `${this.ratioA * 100}%`;
} else {
right = `${100 - this.ratioA * 100}%`;
left = `${neutralPointRatio * 100}%`;
}
}
return {
left,
right
};
}
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() { render() {
const { min, max, step, ratioLower, ratioUpper } = this; const { min, max, neutralPoint, step } = this;
const barPosition = this.getActiveBarPosition();
const barStart = `${ratioLower * 100}%`;
const barEnd = `${100 - ratioUpper * 100}%`;
const isRTL = document.dir === 'rtl'; const isRTL = document.dir === 'rtl';
const start = isRTL ? 'right' : 'left'; const start = isRTL ? 'right' : 'left';
const end = isRTL ? 'left' : 'right'; const end = isRTL ? 'left' : 'right';
const ticks = []; const ticks: any[] = [];
if (this.snaps) { if (this.snaps) {
for (let value = min; value <= max; value += step) { for (let value = min; value <= max; value += step) {
const ratio = valueToRatio(value, min, max); const ratio = valueToRatio(value, min, max);
const tick: any = { const tick: any = {
ratio, ratio,
active: ratio >= ratioLower && ratio <= ratioUpper, active: this.isTickActive(ratio),
}; };
tick[start] = `${ratio * 100}%`; tick[start] = `${ratio * 100}%`;
@ -390,7 +451,6 @@ export class Range implements ComponentInterface {
const tickStyle = (tick: any) => { const tickStyle = (tick: any) => {
const style: any = {}; const style: any = {};
style[start] = tick[start]; style[start] = tick[start];
return style; return style;
@ -399,8 +459,8 @@ export class Range implements ComponentInterface {
const barStyle = () => { const barStyle = () => {
const style: any = {}; const style: any = {};
style[start] = barStart; style[start] = barPosition[start];
style[end] = barEnd; style[end] = barPosition[end];
return style; return style;
}; };
@ -435,7 +495,8 @@ export class Range implements ComponentInterface {
disabled: this.disabled, disabled: this.disabled,
handleKeyboard: this.handleKeyboard, handleKeyboard: this.handleKeyboard,
min, min,
max max,
neutralPoint
})} })}
{ this.dualKnobs && renderKnob({ { this.dualKnobs && renderKnob({
@ -447,7 +508,8 @@ export class Range implements ComponentInterface {
disabled: this.disabled, disabled: this.disabled,
handleKeyboard: this.handleKeyboard, handleKeyboard: this.handleKeyboard,
min, min,
max max,
neutralPoint
})} })}
</div>, </div>,
<slot name="end"></slot> <slot name="end"></slot>
@ -461,6 +523,7 @@ interface RangeKnob {
ratio: number; ratio: number;
min: number; min: number;
max: number; max: number;
neutralPoint: number;
disabled: boolean; disabled: boolean;
pressed: boolean; pressed: boolean;
pin: boolean; pin: boolean;
@ -468,7 +531,7 @@ interface RangeKnob {
handleKeyboard: (name: KnobName, isIncrease: boolean) => void; handleKeyboard: (name: KnobName, isIncrease: boolean) => void;
} }
function renderKnob({ knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard }: RangeKnob) { function renderKnob({ knob, value, ratio, min, max, neutralPoint, disabled, pressed, pin, handleKeyboard }: RangeKnob) {
const isRTL = document.dir === 'rtl'; const isRTL = document.dir === 'rtl';
const start = isRTL ? 'right' : 'left'; const start = isRTL ? 'right' : 'left';
@ -501,7 +564,8 @@ function renderKnob({ knob, value, ratio, min, max, disabled, pressed, pin, hand
'range-knob-b': knob === 'B', 'range-knob-b': knob === 'B',
'range-knob-pressed': pressed, 'range-knob-pressed': pressed,
'range-knob-min': value === min, 'range-knob-min': value === min,
'range-knob-max': value === max 'range-knob-max': value === max,
'range-knob-neutral': value === neutralPoint
}} }}
style={knobStyle()} style={knobStyle()}
role="slider" role="slider"
@ -510,6 +574,7 @@ function renderKnob({ knob, value, ratio, min, max, disabled, pressed, pin, hand
aria-valuemax={max} aria-valuemax={max}
aria-disabled={disabled ? 'true' : null} aria-disabled={disabled ? 'true' : null}
aria-valuenow={value} aria-valuenow={value}
aria-valueneutral={neutralPoint}
> >
{pin && <div class="range-pin" role="presentation">{Math.round(value)}</div>} {pin && <div class="range-pin" role="presentation">{Math.round(value)}</div>}
<div class="range-knob" role="presentation" /> <div class="range-knob" role="presentation" />

45
core/src/components/range/readme.md
View File

@ -43,9 +43,17 @@ left or right of the range.
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range> <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</ion-item> </ion-item>
<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" neutralPoint="1500" color="secondary"></ion-range>
</ion-item>
<ion-item> <ion-item>
<ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range> <ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item> </ion-item>
<ion-item>
<ion-range dual-knobs="true" neutralPoint="30" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item>
</ion-list> </ion-list>
``` ```
@ -76,9 +84,17 @@ left or right of the range.
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range> <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</ion-item> </ion-item>
<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" neutralPoint="1500" color="secondary"></ion-range>
</ion-item>
<ion-item> <ion-item>
<ion-range dual-knobs="true" min="21" max="72" step="3" snaps="true"></ion-range> <ion-range dual-knobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item> </ion-item>
<ion-item>
<ion-range dual-knobs="true" neutralPoint="30" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item>
</ion-list> </ion-list>
``` ```
@ -86,20 +102,21 @@ left or right of the range.
## Properties ## Properties
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| ----------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ----------- | | -------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ----------- |
| `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` | `undefined` | | `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` | `undefined` |
| `debounce` | `debounce` | How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. | `number` | `0` | | `debounce` | `debounce` | How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. | `number` | `0` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the range. | `boolean` | `false` | | `disabled` | `disabled` | If `true`, the user cannot interact with the range. | `boolean` | `false` |
| `dualKnobs` | `dual-knobs` | Show two knobs. | `boolean` | `false` | | `dualKnobs` | `dual-knobs` | Show two knobs. | `boolean` | `false` |
| `max` | `max` | Maximum integer value of the range. | `number` | `100` | | `max` | `max` | Maximum integer value of the range. | `number` | `100` |
| `min` | `min` | Minimum integer value of the range. | `number` | `0` | | `min` | `min` | Minimum integer value of the range. | `number` | `0` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `''` | | `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `''` |
| `pin` | `pin` | If `true`, a pin with integer value is shown when the knob is pressed. | `boolean` | `false` | | `neutralPoint` | `neutral-point` | The neutral point of the range slider. Default: value is `0` or the `min` when `neutralPoint < min` or `max` when `max < neutralPoint`. | `number` | `0` |
| `snaps` | `snaps` | If `true`, the knob snaps to tick marks evenly spaced based on the step property value. | `boolean` | `false` | | `pin` | `pin` | If `true`, a pin with integer value is shown when the knob is pressed. | `boolean` | `false` |
| `step` | `step` | Specifies the value granularity. | `number` | `1` | | `snaps` | `snaps` | If `true`, the knob snaps to tick marks evenly spaced based on the step property value. | `boolean` | `false` |
| `value` | `value` | the value of the range. | `number \| { lower: number; upper: number; }` | `0` | | `step` | `step` | Specifies the value granularity. | `number` | `1` |
| `value` | `value` | the value of the range. | `null \| number \| { lower: number; upper: number; }` | `null` |
## Events ## Events

6
core/src/components/range/test/basic/index.html
View File

@ -101,6 +101,12 @@
<ion-item> <ion-item>
<ion-range dual-knobs="true" id="multiKnob"></ion-range> <ion-range dual-knobs="true" id="multiKnob"></ion-range>
</ion-item> </ion-item>
<ion-item>
<ion-range value="1300" min="1000" max="2000" step="100" snaps="true" neutral-point="1500" color="secondary"></ion-range>
</ion-item>
<ion-item>
<ion-range dual-knobs="true" neutral-point="30" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item>
<ion-item> <ion-item>
<ion-range id="debounce" debounce="5000"></ion-range> <ion-range id="debounce" debounce="5000"></ion-range>
</ion-item> </ion-item>

8
core/src/components/range/usage/angular.md
View File

@ -22,9 +22,17 @@
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range> <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</ion-item> </ion-item>
<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" neutralPoint="1500" color="secondary"></ion-range>
</ion-item>
<ion-item> <ion-item>
<ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range> <ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item> </ion-item>
<ion-item>
<ion-range dual-knobs="true" neutralPoint="30" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item>
</ion-list> </ion-list>
``` ```

8
core/src/components/range/usage/javascript.md
View File

@ -22,8 +22,16 @@
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range> <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</ion-item> </ion-item>
<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" neutralPoint="1500" color="secondary"></ion-range>
</ion-item>
<ion-item> <ion-item>
<ion-range dual-knobs="true" min="21" max="72" step="3" snaps="true"></ion-range> <ion-range dual-knobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item> </ion-item>
<ion-item>
<ion-range dual-knobs="true" neutralPoint="30" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item>
</ion-list> </ion-list>
``` ```