Slider.d.ts 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. import * as React from 'react';
  2. import type { HandlesProps } from './Handles';
  3. import type { MarkObj } from './Marks';
  4. import type { AriaValueFormat, SliderClassNames, SliderStyles } from './interface';
  5. /**
  6. * New:
  7. * - click mark to update range value
  8. * - handleRender
  9. * - Fix handle with count not correct
  10. * - Fix pushable not work in some case
  11. * - No more FindDOMNode
  12. * - Move all position related style into inline style
  13. * - Key: up is plus, down is minus
  14. * - fix Key with step = null not align with marks
  15. * - Change range should not trigger onChange
  16. * - keyboard support pushable
  17. */
  18. export type RangeConfig = {
  19. editable?: boolean;
  20. draggableTrack?: boolean;
  21. /** Set min count when `editable` */
  22. minCount?: number;
  23. /** Set max count when `editable` */
  24. maxCount?: number;
  25. };
  26. export interface SliderProps<ValueType = number | number[]> {
  27. prefixCls?: string;
  28. className?: string;
  29. style?: React.CSSProperties;
  30. classNames?: SliderClassNames;
  31. styles?: SliderStyles;
  32. id?: string;
  33. disabled?: boolean;
  34. keyboard?: boolean;
  35. autoFocus?: boolean;
  36. onFocus?: (e: React.FocusEvent<HTMLDivElement>) => void;
  37. onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void;
  38. range?: boolean | RangeConfig;
  39. /** @deprecated Use `range.minCount` or `range.maxCount` to handle this */
  40. count?: number;
  41. min?: number;
  42. max?: number;
  43. step?: number | null;
  44. value?: ValueType;
  45. defaultValue?: ValueType;
  46. onChange?: (value: ValueType) => void;
  47. /** @deprecated It's always better to use `onChange` instead */
  48. onBeforeChange?: (value: ValueType) => void;
  49. /** @deprecated Use `onChangeComplete` instead */
  50. onAfterChange?: (value: ValueType) => void;
  51. onChangeComplete?: (value: ValueType) => void;
  52. allowCross?: boolean;
  53. pushable?: boolean | number;
  54. reverse?: boolean;
  55. vertical?: boolean;
  56. included?: boolean;
  57. startPoint?: number;
  58. /** @deprecated Please use `styles.track` instead */
  59. trackStyle?: React.CSSProperties | React.CSSProperties[];
  60. /** @deprecated Please use `styles.handle` instead */
  61. handleStyle?: React.CSSProperties | React.CSSProperties[];
  62. /** @deprecated Please use `styles.rail` instead */
  63. railStyle?: React.CSSProperties;
  64. dotStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
  65. activeDotStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
  66. marks?: Record<string | number, React.ReactNode | MarkObj>;
  67. dots?: boolean;
  68. handleRender?: HandlesProps['handleRender'];
  69. activeHandleRender?: HandlesProps['handleRender'];
  70. track?: boolean;
  71. tabIndex?: number | number[];
  72. ariaLabelForHandle?: string | string[];
  73. ariaLabelledByForHandle?: string | string[];
  74. ariaRequired?: boolean;
  75. ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[];
  76. }
  77. export interface SliderRef {
  78. focus: () => void;
  79. blur: () => void;
  80. }
  81. declare const Slider: React.ForwardRefExoticComponent<SliderProps<number | number[]> & React.RefAttributes<SliderRef>>;
  82. export default Slider;