import BaseFoundation, { DefaultAdapter } from '../base/foundation'; export interface Marks { [key: number]: string; } export type tipFormatterBasicType = string | number | boolean | null; export interface SliderProps { defaultValue?: number | number[]; disabled?: boolean; showMarkLabel?: boolean; included?: boolean; marks?: Marks; max?: number; min?: number; range?: boolean; step?: number; tipFormatter?: (value: tipFormatterBasicType | tipFormatterBasicType[]) => any; value?: number | number[]; vertical?: boolean; onAfterChange?: (value: SliderProps['value']) => void; onChange?: (value: SliderProps['value']) => void; onMouseUp?: (e: any) => void; tooltipOnMark?: boolean; tooltipVisible?: boolean; style?: Record; showArrow?: boolean; className?: string; showBoundary?: boolean; railStyle?: Record; verticalReverse?: boolean; 'aria-label'?: string; 'aria-labelledby'?: string; 'aria-valuetext'?: string; getAriaValueText?: (value: number, index?: number) => string; handleDot?: { size?: string; color?: string; } | ({ size?: string; color?: string; }[]); } export interface SliderState { currentValue: number | number[]; min: number; max: number; focusPos: 'min' | 'max' | ''; onChange: (value: SliderProps['value']) => void; disabled: SliderProps['disabled']; chooseMovePos: 'min' | 'max' | ''; isDrag: boolean; clickValue: 0; showBoundary: boolean; isInRenderTree: boolean; firstDotFocusVisible: boolean; secondDotFocusVisible: boolean; } export interface SliderLengths { sliderX: number; sliderY: number; sliderWidth: number; sliderHeight: number; } export interface ScrollParentVal { scrollTop: number; scrollLeft: number; } export interface OverallVars { dragging: boolean[]; } export interface SliderAdapter extends DefaultAdapter { getSliderLengths: () => SliderLengths; getParentRect: () => DOMRect | void; getScrollParentVal: () => ScrollParentVal; isEventFromHandle: (e: any) => boolean; getOverallVars: () => OverallVars; updateDisabled: (disabled: SliderState['disabled']) => void; transNewPropsToState: (stateObj: Pick, callback?: () => void) => void; notifyChange: (callbackValue: number | number[]) => void; setDragging: (value: boolean[]) => void; updateCurrentValue: (value: SliderState['currentValue']) => void; setOverallVars: (key: string, value: any) => void; getMinHandleEl: () => HTMLSpanElement; getMaxHandleEl: () => HTMLSpanElement; onHandleDown: (e: any) => any; onHandleMove: (mousePos: number, isMin: boolean, stateChangeCallback?: () => void, clickTrack?: boolean, outPutValue?: number | number[]) => boolean | void; setEventDefault: (e: any) => void; setStateVal: (state: keyof SliderState, value: any) => void; onHandleEnter: (position: SliderState['focusPos']) => void; onHandleLeave: () => void; onHandleUpBefore: (e: any) => void; onHandleUpAfter: () => void; unSubscribeEventListener: () => void; checkAndUpdateIsInRenderTreeState: () => boolean; } export default class SliderFoundation extends BaseFoundation { private _dragOffset; constructor(adapter: SliderAdapter); init(): void; _checkCurrentValue(): void; /** * Untie event * @memberof SliderFoundation */ destroy(): void; /** * Calculate the percentage corresponding to the current value for style calculation * @{} * * @memberof SliderFoundation */ getMinAndMaxPercent: (value: number | number[]) => { min: number; max: number; }; /** * Check if value is out of range * @memberof SliderFoundation */ _checkValidity: (value: number, min?: number, max?: number) => number; /** * When render handle, the display and content of the tooltip are calculated according to the conditions * @visible: props passed in by the component * @formatter: tooltip content formatting function * @memberof SliderFoundation */ computeHandleVisibleVal: (visible: SliderProps['tooltipVisible'], formatter: SliderProps['tipFormatter'], range: SliderProps['range']) => { tipVisible: { min: boolean; max: boolean; }; tipChildren: any; }; /** * Calculate whether the value passed in is valid * * @memberof SliderFoundation */ valueFormatIsCorrect: (value: SliderProps['value']) => boolean; /** * Fix the mouse position to position the parent container relative to the position * * @memberof SliderFoundation */ handleMousePos: (clientX: number, clientY: number) => { x: number; y: number; }; /** * Provides the nearest scrollable parent node of the current node, which is used to calculate the scrollTop and scrollLeft attributes * * @memberof SliderFoundation */ getScrollParent: (element: HTMLElement) => Element; /** * Fixed the event location, beyond the maximum, minimum, left and right, etc. directly modified to the effective location * * @memberof SliderFoundation */ checkMeetMinMax: (position: number) => number; /** * Converting location information to value requires processing if step is not 1 (invalid move returns false) * * @memberof SliderFoundation */ transPosToValue: (mousePos: number, isMin: boolean) => any; /** * Convert value values into location information * * @memberof SliderFoundation */ transValueToPos: (value: SliderProps['value']) => number | number[]; /** * Determine whether the mark should be highlighted: valid interval and include = false * * @memberof SliderFoundation */ isMarkActive: (mark: number) => false | "unActive" | "active"; /** * onchange output conversion, default rounding without decimal, step less than 1 has decimal * * @memberof SliderFoundation */ outPutValue: (inputValue: SliderProps['value']) => number | number[]; handleDisabledChange: (disabled: SliderState['disabled']) => void; checkAndUpdateIsInRenderTreeState: () => boolean; calculateOutputValue: (position: number, isMin: boolean) => undefined | number | number[]; /** * * * @memberof SliderFoundation */ handleValueChange: (prevValue: SliderProps['value'], nextValue: SliderProps['value']) => void; onHandleDown: (e: any, handler: any) => boolean; onHandleMove: (e: any) => boolean; onHandleTouchStart: (e: any, handler: 'min' | 'max') => void; onHandleTouchMove: (e: any) => void; onHandleEnter: (pos: SliderState['focusPos']) => void; onHandleLeave: () => void; onHandleUp: (e: any) => boolean; _handleValueDecreaseWithKeyBoard: (step: number, handler: 'min' | 'max') => number | any[]; _handleValueIncreaseWithKeyBoard: (step: number, handler: 'min' | 'max') => any; _handleHomeKey: (handler: 'min' | 'max') => any; _handleEndKey: (handler: 'min' | 'max') => any; handleKeyDown: (event: any, handler: 'min' | 'max') => void; _noTooltip: () => boolean; onFocus: (e: any, handler: 'min' | 'max') => void; onBlur: (e: any, handler: 'min' | 'max') => void; handleWrapClick: (e: any) => void; /** * Move the slider to the current click position * * @memberof SliderFoundation */ setHandlePos: (position: number, isMin: boolean, clickTrack: boolean, outPutValue: number | number[]) => void; /** * Determine which slider should be moved currently * * @memberof SliderFoundation */ checkWhichHandle: (pagePos: number) => boolean; handleWrapperEnter: () => void; handleWrapperLeave: () => void; private _getHandleCenterPosition; }