@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
109 lines (108 loc) • 6.04 kB
TypeScript
import type React from 'react';
import type { SuffixChildren } from '../../shared/helpers/Suffix';
import type { NumberFormatOptionParams } from '../number-format/NumberUtils';
import type { SpacingProps } from '../../shared/types';
import type { SkeletonShow } from '../Skeleton';
import type { GlobalStatusConfigObject } from '../GlobalStatus';
export type SliderValue = number | Array<number>;
export type SliderNumberFormat = NumberFormatOptionParams | ((value: number) => unknown);
export type SliderOnChangeParams = {
value: SliderValue;
rawValue: number;
number?: string | null;
event?: Event;
};
export type SliderExtensions = Record<string, {
instance: React.ElementType;
[key: string]: unknown;
}>;
export type SliderProps = {
/** prepends the Form Label component. If no ID is provided, a random ID is created. */
label?: React.ReactNode;
/** use `labelDirection="horizontal"` to change the label layout direction. Defaults to `vertical`. */
labelDirection?: 'vertical' | 'horizontal';
/** use `true` to make the label only readable by screen readers. */
labelSrOnly?: boolean;
/** text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. */
status?: string | boolean;
/** defines the state of the status. Currently, there are two statuses `[error, information]`. Defaults to `error`. */
statusState?: 'error' | 'information';
/** use an object to define additional FormStatus properties. */
statusProps?: Record<string, unknown>;
statusNoAnimation?: boolean;
/** the `statusId` used for the target [GlobalStatus](/uilib/components/global-status). */
globalStatus?: GlobalStatusConfigObject;
/** text describing the content of the Slider more than the label. You can also send in a React component, so it gets wrapped inside the Slider component. */
suffix?: SuffixChildren;
/** give the slider thumb button a title for accessibility reasons. Defaults to `null`. */
thumbTitle?: string;
/** give the add button a title for accessibility reasons. Defaults to `Increase (%s)`. */
addTitle?: string;
/** give the subtract button a title for accessibility reasons. Defaults to `Decrease (%s)`. */
subtractTitle?: string;
/** the minimum value. Defaults to `0`. */
min?: number;
/** the maximum value. Defaults to `100`. */
max?: number;
/** the `value` of the slider as a number. If an array with numbers is provided, each number will represent a thumb button (the `+` and `-` button will be hidden on multiple thumbs). */
value?: SliderValue;
/** the steps the slider takes on changing the value. Defaults to `null`. */
step?: number;
/** makes it possible to display overlays with other functionality such as a marker on the slider marking a given value. */
extensions?: SliderExtensions;
/** show the slider vertically. Defaults to `false`. */
vertical?: boolean;
/** show the slider reversed. Defaults to `false`. */
reverse?: boolean;
/** if set to `true`, then the slider will be 100% in `width`. */
stretch?: boolean;
/** provide a function callback or use the options from the [NumberFormat](/uilib/components/number-format/properties) component. It will show a formatted number in the Tooltip (`tooltip={true}`) and enhance the screen reader UX. It will also extend the `onChange` event return object with a formatted `number` property. */
numberFormat?: SliderNumberFormat;
/** use `true` to show a tooltip on `mouseOver`, `touchStart` and `focus`, showing the current number (if `numberFormat` is given) or the raw value. Defaults to `null`. */
tooltip?: boolean;
/** use `true` to always show the tooltip, in addition to the `tooltip` property. */
alwaysShowTooltip?: boolean;
/** removes the helper buttons. Defaults to `false`. */
hideButtons?: boolean;
/** use either `omit`, `push` or `swap`. This property only works for two (range) or more thumb buttons, while `omit` will stop the thumb from swapping, `push` will push its nearest thumb along. Defaults to `swap`. */
multiThumbBehavior?: 'swap' | 'omit' | 'push';
/** if set to `true`, an overlaying skeleton with animation will be shown. */
skeleton?: SkeletonShow;
id?: string;
disabled?: boolean;
className?: string;
/** Will be called on state changes made by the user. The callback `value` and `rawValue` is a number `{ value, rawValue, event }`. But if the prop `numberFormat` is given, then it will return an additional `number` with the given format `{ value, number, rawValue, event }`. */
onChange?: (props: SliderOnChangeParams) => void;
/** Will be called once the user starts dragging. Returns `{ event }`. */
onDragStart?: (props: {
event: MouseEvent | TouchEvent;
}) => void;
/** Will be called once the user stops dragging. Returns `{ event }`. */
onDragEnd?: (props: {
event: MouseEvent | TouchEvent;
}) => void;
children?: React.ReactNode;
};
export type SliderAllProps = SliderProps & SpacingProps & Omit<React.HTMLProps<HTMLElement>, keyof SliderProps>;
export type SliderThumbState = 'initial' | 'normal' | 'activated' | 'released';
export type SliderContextValue = {
isMulti: boolean;
isReverse: boolean;
isVertical: boolean;
shouldAnimate: boolean;
thumbState: SliderThumbState;
thumbIndex: React.RefObject<number>;
showStatus: boolean;
showButtons: boolean;
attributes: unknown;
allProps: SliderProps;
value: SliderValue;
values: Array<number>;
setValue: (value: SliderValue) => void;
setThumbState: (thumbState: SliderThumbState) => void;
setThumbIndex: (thumbIndex: number) => void;
emitChange: (emitEvent: MouseEvent | TouchEvent, value: number) => void;
trackRef: React.RefObject<HTMLElement>;
setShouldAnimate: (state: boolean) => void;
animationTimeout: React.RefObject<NodeJS.Timeout>;
};