Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update 4.0.x #18156

Merged
merged 63 commits into from
Apr 26, 2019
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
63 commits
Select commit Hold shift + click to select a range
175de96
docs(breaking): add breaking changes and copy editing (#17214)
brandyscarney Jan 23, 2019
a8c2697
fix(build): modify rollup.config.js to work with Windows (#17231)
tja4472 Jan 23, 2019
1848b73
fix(reorder): capture click event (#17244)
manucorporat Jan 24, 2019
497f80b
fix(grid): add flex to ion-grid to allow it to properly render in an …
trazek Jan 25, 2019
563502c
docs(alert): correct alert-controller link path (#17294)
camwiegert Jan 28, 2019
74dd333
docs(loading): correct loading-controller link path (#17295)
camwiegert Jan 28, 2019
27dc5ad
fix(range): chrome bug with will-change
manucorporat Jan 28, 2019
a7dfe25
docs(segment) add example for default Value
ElianCordoba Jan 26, 2019
46ad6c3
docs(ng): update angular test readme
adamdbradley Jan 22, 2019
31f7141
docs(): update links
mhartington Jan 30, 2019
4ecf674
docs(react): fix typo
lpmi-13 Jan 24, 2019
8cf06b3
docs(): rebuild docs
mhartington Jan 30, 2019
6af320c
docs(): rebuilding
mhartington Jan 30, 2019
f2d2297
docs(): update incorrect links
mhartington Jan 30, 2019
b1efed2
fix(searchbar): hide search icon when focused with cancel button (#17…
abennouna Jan 30, 2019
0603e77
fix(react): duplicate events being fired in ionic/react (#17321)
jthoms1 Jan 30, 2019
7964edd
docs(modal): fix typo with returning header (#17333)
seiyria Feb 1, 2019
fc9b3de
test(searchbar): update searchbar tests to take focused ss (#17318)
brandyscarney Feb 1, 2019
b4962e7
Merge branch 'master' into update-pwa-check
liamdebeasi Feb 1, 2019
2f11e8a
Merge branch 'master' into add-mobileweb-platform
liamdebeasi Feb 1, 2019
8c46ff2
Merge pull request #17356 from ionic-team/add-mobileweb-platform
liamdebeasi Feb 4, 2019
9e0b027
Merge branch 'master' into update-pwa-check
liamdebeasi Feb 4, 2019
9941911
Merge pull request #17355 from ionic-team/update-pwa-check
liamdebeasi Feb 4, 2019
661d45c
Merge branch 'master' into add-mobileweb-platform
liamdebeasi Feb 1, 2019
1c04529
Merge pull request #17356 from ionic-team/add-mobileweb-platform
liamdebeasi Feb 4, 2019
321844a
Merge branch 'master' into update-pwa-check
liamdebeasi Feb 4, 2019
d2c3043
Merge pull request #17355 from ionic-team/update-pwa-check
liamdebeasi Feb 4, 2019
2fdd5c4
docs(rtl): Fix small typo in item docs (#17365)
Ivan-Perez Feb 4, 2019
098477e
docs(datetime): fix typo (#17360)
chrisgriffith Feb 4, 2019
4984230
docs(loading): remove dismissOnPageChange, add ionLoadingDidDismiss (…
liamdebeasi Feb 4, 2019
5c20cd1
docs(loading): update example to show proper usage
liamdebeasi Feb 4, 2019
0a76418
docs(rtl): Fix small typo in item docs (#17365)
Ivan-Perez Feb 4, 2019
3216960
docs(loading): update example to show proper usage
liamdebeasi Feb 4, 2019
4d4ff8c
test(platform): Add Platform tests (#17354)
liamdebeasi Feb 5, 2019
7610407
fix(menu): fix content shadow when revealed in iOS (#17383)
abennouna Feb 5, 2019
e1178f9
fix(popover): originate animation from right in RTL/MD (#17381)
abennouna Feb 5, 2019
9ba1574
fix(popover): apply fixed position to keep backdrop in viewport (#17352)
brandyscarney Feb 5, 2019
acff559
4.0.1
brandyscarney Feb 6, 2019
2ee23d3
fix(tab-bar): add translucent tab-bar styles back (#17376)
liamdebeasi Feb 6, 2019
86dc44d
docs(datetime): usage typos and clean up (#17415)
rtpHarry Feb 7, 2019
26fe673
docs(reorder): Update incomplete reorder docs (#17417)
liamdebeasi Feb 7, 2019
8c33203
chore(github): update issue template
brandyscarney Feb 7, 2019
75677ce
docs(loading): update breaking doc to show new loading usage (#17431)
liamdebeasi Feb 7, 2019
a621a30
docs(loading): add missing async to new loading example (#17432)
liamdebeasi Feb 7, 2019
a44f3e1
chore(react): release of ionic react 0.0.4 (#17442)
jthoms1 Feb 8, 2019
e14da9f
chore(github): update issue templates (#17433)
brandyscarney Feb 11, 2019
743d6cd
fix(searchbar): allow setting of toolbar color and searchbar color (#…
liamdebeasi Feb 12, 2019
6fb3a26
docs(popover): add missing comma in example (#17401)
Feb 12, 2019
f9b2aa3
fix(range): implement RTL (from PR 17157) (#17384)
abennouna Feb 12, 2019
aee1ed0
docs(): Add documentation for slots (#17441)
liamdebeasi Feb 12, 2019
9f58da1
docs(avatar): update angular usage for img src (#16884)
jaydeepk3 Feb 12, 2019
a5ccf44
fix(config): update types for scrollPadding, inputBlurring and hideCa…
fermedina Feb 12, 2019
37682c5
feat(range): add neutral point (#17400)
KillerCodeMonkey Feb 12, 2019
625c81f
fix(range): improved rtl support (#17479)
KillerCodeMonkey Feb 13, 2019
7286785
fix(select): Account for when options are not loaded immediately (#17…
liamdebeasi Feb 13, 2019
f7ed37a
fix(item-sliding): Sliding no longer breaks after removing an item (#…
liamdebeasi Feb 14, 2019
95edf35
fix(datetime): default to current date when no value given (#17443)
liamdebeasi Feb 14, 2019
55274d8
docs(process): update process documentation
brandyscarney Feb 19, 2019
1b2b57d
fix(button): show proper shade for activated button on ios (#17508)
liamdebeasi Feb 20, 2019
fcde955
4.0.2
brandyscarney Feb 20, 2019
3fcd43f
chore(range): revert neutral point (#17550)
liamdebeasi Feb 20, 2019
ab3d15b
sync in 4.0.1 and 4.0.2
liamdebeasi Apr 26, 2019
34cb33c
docs(): Add documentation for slots (#17441)
liamdebeasi Feb 12, 2019
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat(range): add neutral point (#17400)
* 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
  • Loading branch information
KillerCodeMonkey authored and liamdebeasi committed Apr 26, 2019
commit 37682c57c3ac265fe8c317918789f2c0845e0684
4 changes: 2 additions & 2 deletions angular/src/directives/proxies.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: '<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 {
ionChange!: EventEmitter<CustomEvent>;
ionFocus!: EventEmitter<CustomEvent>;
Expand All @@ -598,7 +598,7 @@ export class IonRange {
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'> {}
@Component({ selector: 'ion-refresher', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled'] })
Expand Down
3 changes: 2 additions & 1 deletion core/api.txt
Original file line number Diff line number Diff line change
Expand Up @@ -800,10 +800,11 @@ 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,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,ionChange,RangeChangeEventDetail,true
ion-range,event,ionFocus,void,true
Expand Down
12 changes: 10 additions & 2 deletions core/src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3309,6 +3309,10 @@ 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;
Expand All @@ -3323,7 +3327,7 @@ export namespace Components {
/**
* the value of the range.
*/
'value': RangeValue;
'value': RangeValue | null;
}
interface IonRangeAttributes extends StencilHTMLAttributes {
/**
Expand Down Expand Up @@ -3359,6 +3363,10 @@ 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;
Expand All @@ -3385,7 +3393,7 @@ export namespace Components {
/**
* the value of the range.
*/
'value'?: RangeValue;
'value'?: RangeValue | null;
}

interface IonRefresherContent {
Expand Down
99 changes: 82 additions & 17 deletions core/src/components/range/range.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,25 @@ 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.
Expand Down Expand Up @@ -119,7 +138,7 @@ export class Range implements ComponentInterface {
/**
* the value of the range.
*/
@Prop({ mutable: true }) value: RangeValue = 0;
@Prop({ mutable: true }) value: RangeValue | null = null;
@Watch('value')
protected valueChanged(value: RangeValue) {
if (!this.noUpdate) {
Expand Down Expand Up @@ -210,14 +229,14 @@ export class Range implements ComponentInterface {
}

private getValue(): RangeValue {
const value = this.value || 0;
const value = this.value || this.neutralPoint || 0;
if (this.dualKnobs) {
if (typeof value === 'object') {
return value;
}
return {
lower: 0,
upper: value
lower: this.value === null ? this.neutralPoint : 0,
upper: this.value === null ? this.neutralPoint : value
};
} else {
if (typeof value === 'object') {
Expand Down Expand Up @@ -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}%`;
}
}

render() {
const { min, max, step, ratioLower, ratioUpper } = this;
return {
left,
right
};
}

const barStart = `${ratioLower * 100}%`;
const barEnd = `${100 - ratioUpper * 100}%`;
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 isRTL = document.dir === 'rtl';
const start = isRTL ? 'right' : 'left';
const end = isRTL ? 'left' : 'right';

const ticks = [];
const ticks: any[] = [];

if (this.snaps) {
for (let value = min; value <= max; value += step) {
const ratio = valueToRatio(value, min, max);

const tick: any = {
ratio,
active: ratio >= ratioLower && ratio <= ratioUpper,
active: this.isTickActive(ratio),
};

tick[start] = `${ratio * 100}%`;
Expand All @@ -390,7 +451,6 @@ export class Range implements ComponentInterface {

const tickStyle = (tick: any) => {
const style: any = {};

style[start] = tick[start];

return style;
Expand All @@ -399,8 +459,8 @@ export class Range implements ComponentInterface {
const barStyle = () => {
const style: any = {};

style[start] = barStart;
style[end] = barEnd;
style[start] = barPosition[start];
style[end] = barPosition[end];

return style;
};
Expand Down Expand Up @@ -435,7 +495,8 @@ export class Range implements ComponentInterface {
disabled: this.disabled,
handleKeyboard: this.handleKeyboard,
min,
max
max,
neutralPoint
})}

{ this.dualKnobs && renderKnob({
Expand All @@ -447,7 +508,8 @@ export class Range implements ComponentInterface {
disabled: this.disabled,
handleKeyboard: this.handleKeyboard,
min,
max
max,
neutralPoint
})}
</div>,
<slot name="end"></slot>
Expand All @@ -461,14 +523,15 @@ interface RangeKnob {
ratio: number;
min: number;
max: number;
neutralPoint: number;
disabled: boolean;
pressed: boolean;
pin: boolean;

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 start = isRTL ? 'right' : 'left';

Expand Down Expand Up @@ -501,7 +564,8 @@ function renderKnob({ knob, value, ratio, min, max, disabled, pressed, pin, hand
'range-knob-b': knob === 'B',
'range-knob-pressed': pressed,
'range-knob-min': value === min,
'range-knob-max': value === max
'range-knob-max': value === max,
'range-knob-neutral': value === neutralPoint
}}
style={knobStyle()}
role="slider"
Expand All @@ -510,6 +574,7 @@ function renderKnob({ knob, value, ratio, min, max, disabled, pressed, pin, hand
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" />
Expand Down
Loading