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

feat(range): add support for customizing pin format (#22972)

Browse Source
This commit is contained in:
Victor Berchet
2021-07-09 07:57:52 -07:00
committed by GitHub
parent 1c9435c3f5
commit 8f2c4f73db
13 changed files with 164 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,8 @@ import { Color, Gesture, GestureDetail, KnobName, RangeChangeEventDetail, RangeV
import { clamp, debounceEvent, getAriaLabel, inheritAttributes, renderHiddenInput } from '../../utils/helpers';
import { createColorClasses, hostContext } from '../../utils/theme';
import { PinFormatter } from './range-interface';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*
@ -102,6 +104,12 @@ export class Range implements ComponentInterface {
*/
@Prop() pin = false;
/**
* A callback used to format the pin text.
* By default the pin text is set to `Math.round(value)`.
*/
@Prop() pinFormatter: PinFormatter = (value: number): number => Math.round(value);
/**
* If `true`, the knob snaps to tick marks evenly spaced based
* on the step property value.
@ -409,7 +417,7 @@ export class Range implements ComponentInterface {
}
render() {
const { min, max, step, el, handleKeyboard, pressedKnob, disabled, pin, ratioLower, ratioUpper, inheritedAttributes, rangeId } = this;
const { min, max, step, el, handleKeyboard, pressedKnob, disabled, pin, ratioLower, ratioUpper, inheritedAttributes, rangeId, pinFormatter } = this;
/**
* Look for external label, ion-label, or aria-labelledby.
@ -500,6 +508,7 @@ export class Range implements ComponentInterface {
value: this.valA,
ratio: this.ratioA,
pin,
pinFormatter,
disabled,
handleKeyboard,
min,
@ -513,6 +522,7 @@ export class Range implements ComponentInterface {
value: this.valB,
ratio: this.ratioB,
pin,
pinFormatter,
disabled,
handleKeyboard,
min,
@ -535,12 +545,13 @@ interface RangeKnob {
disabled: boolean;
pressed: boolean;
pin: boolean;
pinFormatter: PinFormatter;
labelText?: string | null;
handleKeyboard: (name: KnobName, isIncrease: boolean) => void;
}
const renderKnob = (isRTL: boolean, { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, labelText }: RangeKnob) => {
const renderKnob = (isRTL: boolean, { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, labelText, pinFormatter }: RangeKnob) => {
const start = isRTL ? 'right' : 'left';
const knobStyle = () => {
@ -583,7 +594,7 @@ const renderKnob = (isRTL: boolean, { knob, value, ratio, min, max, disabled, pr
aria-disabled={disabled ? 'true' : null}
aria-valuenow={value}
>
{pin && <div class="range-pin" role="presentation" part="pin">{Math.round(value)}</div>}
{pin && <div class="range-pin" role="presentation" part="pin">{pinFormatter(value)}</div>}
<div class="range-knob" role="presentation" part="knob" />
</div>
);