octicon-mirror(24/)
javascript/ionic-framework
octicon-rss(16/)
1
0
octicon-repo-forked(16/)Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 22:44:13 +08:00
octicon-code(16/) Code octicon-issue-opened(16/) Issues octicon-package(16/) Packages octicon-project(16/) Projects octicon-tag(16/) Releases octicon-book(16/) Wiki octicon-pulse(16/) Activity

chore(range): revert neutral point (#17550)

Browse Source 
* Revert "fix(range): improved rtl support (#17479)"

This reverts commit f832de5f4a.

revert range rtl support

* Revert "feat(range): add neutral point (#17400)"

This reverts commit 15acb4be37.

revert neutral point
This commit is contained in:
octicon-git-branch(16/)
octicon-tag(16/)
Liam DeBeasi
2019-02-20 15:57:28 -05:00
committed by GitHub
gitea-unlock(16/)
parent 9665e610e1
commit cf607329a3
octicon-diff(16/tw-mr-1) 8 changed files with 37 additions and 151 deletions
gitea-whitespace(16/)
gitea-split(16/)
octicon-kebab-horizontal(16/)
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>) => void;
@@ -3393,7 +3385,7 @@ export namespace Components {
/**
* the value of the range.
*/
'value'?: RangeValue | null;
'value'?: RangeValue;
}
interface IonRefresherContent {

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

@@ -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
})}
</div>,
<slot name="end"></slot>
@@ -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 && <div class="range-pin" role="presentation">{Math.round(value)}</div>}
<div class="range-knob" role="presentation" />

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

@@ -43,17 +43,9 @@ left or right of the range.
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</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-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</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>
```
@@ -84,17 +76,9 @@ left or right of the range.
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</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-range dual-knobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</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>
```
@@ -102,21 +86,20 @@ left or right of the range.
## Properties
| 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` |
| `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` |
| `dualKnobs` | `dual-knobs` | Show two knobs. | `boolean` | `false` |
| `max` | `max` | Maximum integer value of the range. | `number` | `100` |
| `min` | `min` | Minimum integer value of the range. | `number` | `0` |
| `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` | `''` |
| `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` |
| `pin` | `pin` | If `true`, a pin with integer value is shown when the knob is pressed. | `boolean` | `false` |
| `snaps` | `snaps` | If `true`, the knob snaps to tick marks evenly spaced based on the step property value. | `boolean` | `false` |
| `step` | `step` | Specifies the value granularity. | `number` | `1` |
| `value` | `value` | the value of the range. | `null \| number \| { lower: number; upper: number; }` | `null` |
| 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` |
| `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` |
| `dualKnobs` | `dual-knobs` | Show two knobs. | `boolean` | `false` |
| `max` | `max` | Maximum integer value of the range. | `number` | `100` |
| `min` | `min` | Minimum integer value of the range. | `number` | `0` |
| `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` | `''` |
| `pin` | `pin` | If `true`, a pin with integer value is shown when the knob is pressed. | `boolean` | `false` |
| `snaps` | `snaps` | If `true`, the knob snaps to tick marks evenly spaced based on the step property value. | `boolean` | `false` |
| `step` | `step` | Specifies the value granularity. | `number` | `1` |
| `value` | `value` | the value of the range. | `number \| { lower: number; upper: number; }` | `0` |
## Events

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

@@ -101,12 +101,6 @@
<ion-item>
<ion-range dual-knobs="true" id="multiKnob"></ion-range>
</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-range id="debounce" debounce="5000"></ion-range>
</ion-item>

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

@@ -22,17 +22,9 @@
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</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-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</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>
```

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

@@ -22,16 +22,8 @@
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</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-range dual-knobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</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>
```