@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
162 lines (161 loc) • 6.59 kB
TypeScript
import type { ElementType, HTMLProps, ReactNode, RefObject } from 'react';
import type { SuffixChildren } from '../../shared/helpers/Suffix';
import type { FormElementProps } from '../../shared/helpers/filterValidProps';
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: ElementType;
[key: string]: unknown;
}>;
export type SliderProps = {
/**
* Prepends the Form Label component. If no ID is provided, a random ID is created.
*/
label?: ReactNode;
/**
* Use `labelDirection="horizontal"` to change the label layout direction. Defaults to `vertical`.
*/
labelDirection?: FormElementProps['labelDirection'];
/**
* 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 [configuration](/uilib/components/global-status/properties/#configuration-object) 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. Can be a negative number as well. Defaults to `0`.
*/
min?: number;
/**
* The maximum value. Defaults to `100`.
*/
max?: number;
/**
* The `value` of the slider as a number or an array. 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;
/**
* Will extend the return object with a `number` property (from `onChange` event). You can use all the options from the [NumberFormat](/uilib/components/number-format/properties) component. It also will use that formatted number in the increase/decrease buttons. If it has to represent a currency, then use e.g. `numberFormat={{ currency: true, decimals: 0 }}`.
*/
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.
*/
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 `numberFormat` property 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?: ReactNode;
};
export type SliderAllProps = SliderProps & SpacingProps & Omit<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: 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: RefObject<HTMLElement>;
setShouldAnimate: (state: boolean) => void;
animationTimeout: RefObject<NodeJS.Timeout>;
};