@mskcc/carbon-react/lib/components/Slider/Slider.d.ts

Carbon react components for the MSKCC DSM

/**
 * MSKCC DSM 2021, 2023
 */
import React, { KeyboardEventHandler, PureComponent } from 'react';
import PropTypes, { ReactNodeLike } from 'prop-types';
type ExcludedAttributes = 'onChange' | 'onBlur';
export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
    /**
     * The `ariaLabel` for the `<input>`.
     */
    ariaLabelInput?: string;
    /**
     * The child nodes.
     */
    children?: ReactNodeLike;
    /**
     * The CSS class name for the slider.
     */
    className?: string;
    /**
     * `true` to disable this slider.
     */
    disabled?: boolean;
    /**
     * The callback to format the label associated with the minimum/maximum value.
     */
    formatLabel?: (value: number, label: string | undefined) => string;
    /**
     * `true` to hide the number input box.
     */
    hideTextInput?: boolean;
    /**
     * The ID of the `<input>`.
     */
    id?: string;
    /**
     * The `type` attribute of the `<input>`.
     */
    inputType?: string;
    /**
     * `Specify whether the Slider is currently invalid
     */
    invalid?: boolean;
    /**
     * Provide the text that is displayed when the Slider is in an invalid state
     */
    invalidText?: React.ReactNode;
    /**
     * The label for the slider.
     */
    labelText?: ReactNodeLike;
    /**
     * @deprecated
     * `true` to use the light version.
     */
    light?: boolean;
    /**
     * The maximum value.
     */
    max: number;
    /**
     * The label associated with the maximum value.
     */
    maxLabel?: string;
    /**
     * The minimum value.
     */
    min: number;
    /**
     * The label associated with the minimum value.
     */
    minLabel?: string;
    /**
     * The `name` attribute of the `<input>`.
     */
    name?: string;
    /**
     * Provide an optional function to be called when the input element
     * loses focus
     */
    onBlur?: (data: {
        value: string;
    }) => void;
    /**
     * The callback to get notified of change in value.
     * `({ value}) => void`
    //  * @param {{ value }}
     */
    onChange?: (data: {
        value: SliderProps['value'];
    }) => void;
    /**
     * Provide an optional function to be called when a key is pressed in the number input
     */
    onInputKeyUp?: KeyboardEventHandler<HTMLInputElement>;
    /**
     * The callback to get notified of value on handle release.
     */
    onRelease?: (data: {
        value: SliderProps['value'];
    }) => void;
    /**
     * Whether the slider should be read-only
     */
    readOnly?: boolean;
    /**
     * `true` to specify if the control is required.
     */
    required?: boolean;
    /**
     * A value determining how much the value should increase/decrease by moving the thumb by mouse. If a value other than 1 is provided and the input is *not* hidden, the new step requirement should be added to a visible label. Values outside of the `step` increment will be considered invalid.
     */
    step?: number;
    /**
     * A value determining how much the value should increase/decrease by Shift+arrow keys,
     * which will be `(max - min) / stepMultiplier`.
     */
    stepMultiplier?: number;
    /**
     * The value.
     */
    value: number;
    /**
     * Specify whether the control is currently in warning state
     */
    warn?: boolean;
    /**
     * Provide the text that is displayed when the control is in warning state
     */
    warnText?: React.ReactNode;
}
interface CalcValueProps {
    clientX?: number;
    value?: number;
    useRawValue?: boolean;
}
export default class Slider extends PureComponent<SliderProps> {
    static propTypes: {
        /**
         * The `ariaLabel` for the `<input>`.
         */
        ariaLabelInput: PropTypes.Requireable<string>;
        /**
         * The child nodes.
         */
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
         * The CSS class name for the slider.
         */
        className: PropTypes.Requireable<string>;
        /**
         * `true` to disable this slider.
         */
        disabled: PropTypes.Requireable<boolean>;
        /**
         * The callback to format the label associated with the minimum/maximum value.
         */
        formatLabel: PropTypes.Requireable<(...args: any[]) => any>;
        /**
         * `true` to hide the number input box.
         */
        hideTextInput: PropTypes.Requireable<boolean>;
        /**
         * The ID of the `<input>`.
         */
        id: PropTypes.Requireable<string>;
        /**
         * The `type` attribute of the `<input>`.
         */
        inputType: PropTypes.Requireable<string>;
        /**
         * `Specify whether the Slider is currently invalid
         */
        invalid: PropTypes.Requireable<boolean>;
        /**
         * Provide the text that is displayed when the Slider is in an invalid state
         */
        invalidText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
         * The label for the slider.
         */
        labelText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
         * `true` to use the light version.
         */
        light: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
        /**
         * The maximum value.
         */
        max: PropTypes.Validator<number>;
        /**
         * The label associated with the maximum value.
         */
        maxLabel: PropTypes.Requireable<string>;
        /**
         * The minimum value.
         */
        min: PropTypes.Validator<number>;
        /**
         * The label associated with the minimum value.
         */
        minLabel: PropTypes.Requireable<string>;
        /**
         * The `name` attribute of the `<input>`.
         */
        name: PropTypes.Requireable<string>;
        /**
         * Provide an optional function to be called when the input element
         * loses focus
         */
        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
        /**
         * The callback to get notified of change in value.
         */
        onChange: PropTypes.Requireable<(...args: any[]) => any>;
        /**
         * Provide an optional function to be called when a key is pressed in the number input
         */
        onInputKeyUp: PropTypes.Requireable<(...args: any[]) => any>;
        /**
         * The callback to get notified of value on handle release.
         */
        onRelease: PropTypes.Requireable<(...args: any[]) => any>;
        /**
         * Whether the slider should be read-only
         */
        readOnly: PropTypes.Requireable<boolean>;
        /**
         * `true` to specify if the control is required.
         */
        required: PropTypes.Requireable<boolean>;
        /**
         * A value determining how much the value should increase/decrease by moving the thumb by mouse. If a value other than 1 is provided and the input is *not* hidden, the new step requirement should be added to a visible label. Values outside of the `step` increment will be considered invalid.
         */
        step: PropTypes.Requireable<number>;
        /**
         * A value determining how much the value should increase/decrease by Shift+arrow keys,
         * which will be `(max - min) / stepMultiplier`.
         */
        stepMultiplier: PropTypes.Requireable<number>;
        /**
         * The value.
         */
        value: PropTypes.Validator<number>;
        /**
         * `Specify whether the Slider is in a warn state
         */
        warn: PropTypes.Requireable<boolean>;
        /**
         * Provide the text that is displayed when the Slider is in an warn state
         */
        warnText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
    };
    static defaultProps: {
        hideTextInput: boolean;
        step: number;
        stepMultiplier: number;
        disabled: boolean;
        minLabel: string;
        maxLabel: string;
        inputType: string;
        readOnly: boolean;
    };
    static contextType: React.Context<any>;
    state: {
        value: number;
        left: number;
        needsOnRelease: boolean;
        isValid: boolean;
    };
    thumbRef: React.RefObject<HTMLDivElement>;
    filledTrackRef: React.RefObject<HTMLDivElement>;
    element: HTMLDivElement | null;
    inputId: string;
    track: HTMLDivElement | null | undefined;
    constructor(props: any);
    /**
     * Sets up initial slider position and value in response to component mount.
     */
    componentDidMount(): void;
    /**
     * Handles firing of `onChange` and `onRelease` callbacks to parent in
     * response to state changes.
     *
     * @param {*} prevProps prevProps
     * @param {*} prevState The previous Slider state, used to see if callbacks
     * should be called.
     */
    componentDidUpdate(prevProps: any, prevState: any): void;
    /**
     * Synonymous to ECMA2017+ `Math.clamp`.
     *
     * @param {number} val
     * @param {number} min
     * @param {number} max
     *
     * @returns `val` if `max>=val>=min`; `min` if `val<min`; `max` if `val>max`.
     */
    clamp(val: any, min: any, max: any): number;
    /**
     * Sets up "drag" event handlers and calls `this.onDrag` in case dragging
     * started on somewhere other than the thumb without a corresponding "move"
     * event.
     *
     * @param {Event} evt The event.
     */
    onDragStart: (evt: any) => void;
    /**
     * Unregisters "drag" and "drag stop" event handlers and calls sets the flag
     * indicating that the `onRelease` callback should be called.
     */
    onDragStop: () => void;
    /**
     * Handles a "drag" event by recalculating the value/thumb and setting state
     * accordingly.
     *
     * @param {Event} evt The event.
     */
    _onDrag: (evt: any) => void;
    /**
     * Throttles calls to `this._onDrag` by limiting events to being processed at
     * most once every `EVENT_THROTTLE` milliseconds.
     */
    onDrag: any;
    /**
     * Handles a `keydown` event by recalculating the value/thumb and setting
     * state accordingly.
     *
     * @param {Event} evt The event.
     */
    onKeyDown: (evt: any) => void;
    /**
     * Provides the two-way binding for the input field of the Slider. It also
     * Handles a change to the input field by recalculating the value/thumb and
     * setting state accordingly.
     *
     * @param {Event} evt The event.
     */
    onChange: (evt: any) => void;
    /**
     * Checks for validity of input value after clicking out of the input. It also
     * Handles state change to isValid state.
     *
     * @param {Event} evt The event.
     */
    onBlur: (evt: React.FocusEvent<HTMLInputElement>) => void;
    /**
     * Calculates a new Slider `value` and `left` (thumb offset) given a `clientX`,
     * `value`, or neither of those.
     * - If `clientX` is specified, it will be used in
     *   conjunction with the Slider's bounding rectangle to calculate the new
     *   values.
     * - If `clientX` is not specified and `value` is, it will be used to
     *   calculate new values as though it were the current value of the Slider.
     * - If neither `clientX` nor `value` are specified, `this.props.value` will
     *   be used to calculate the new values as though it were the current value
     *   of the Slider.
     *
     * @param {object} params
     * @param {number} [params.clientX] Optional clientX value expected to be from
     *   an event fired by one of the Slider's `DRAG_EVENT_TYPES` events.
     * @param {number} [params.value] Optional value use during calculations if
     *   clientX is not provided.
     * @param {boolean} [params.useRawValue=false] `true` to use the given value as-is.
     */
    calcValue: ({ clientX, value, useRawValue }: CalcValueProps) => {
        value: number | undefined;
        left: number;
    };
    static getDerivedStateFromProps(props: any, state: any): {
        isValid: boolean;
    } | null;
    render(): JSX.Element;
}
export {};