feat: add disableKeyboardEvents (#852)

* feat: add disableKeyboardEvents

* feat: rename api

README.md

@@ -88,6 +88,7 @@ The following APIs are shared by Slider and Range.
 | included | boolean | `true` | If the value is `true`, it means a continuous value interval, otherwise, it is a independent value. |
 | reverse | boolean | `false` | If the value is `true`, it means the component is rendered reverse. |
 | disabled | boolean | `false` | If `true`, handles can't be moved. |
+| keyboard | boolean | `true` | Support using keyboard to move handlers. |
 | dots | boolean | `false` | When the `step` value is greater than 1, you can set the `dots` to  `true` if you want to render the slider with dots. |
 | onBeforeChange | Function | NOOP | `onBeforeChange` will be triggered when `ontouchstart` or `onmousedown` is triggered. |
 | onChange | Function | NOOP | `onChange` will be triggered while the value of Slider changing. |

docs/examples/handle.tsx

@@ -29,5 +29,9 @@ export default () => (
         tipFormatter={(value) => `${value}!`}
       />
     </div>
+    <div style={wrapperStyle}>
+      <p>Keyboard events disabled</p>
+      <Slider defaultValue={3} keyboard={false} />
+    </div>
   </div>
 );

src/Handles/Handle.tsx

@@ -42,6 +42,7 @@ const Handle = React.forwardRef((props: HandleProps, ref: React.Ref<HTMLDivEleme
     max,
     direction,
     disabled,
+    keyboard,
     range,
     tabIndex,
     ariaLabelForHandle,
@@ -59,7 +60,7 @@ const Handle = React.forwardRef((props: HandleProps, ref: React.Ref<HTMLDivEleme
 
   // =========================== Keyboard ===========================
   const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
-    if (!disabled) {
+    if (!disabled && keyboard) {
       let offset: number | 'min' | 'max' = null;
 
       // Change the value

src/Slider.tsx

@@ -38,6 +38,7 @@ export interface SliderProps<ValueType = number | number[]> {
 
   // Status
   disabled?: boolean;
+  keyboard?: boolean;
   autoFocus?: boolean;
   onFocus?: (e: React.FocusEvent<HTMLDivElement>) => void;
   onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void;
@@ -102,6 +103,7 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
 
     // Status
     disabled = false,
+    keyboard = true,
     autoFocus,
     onFocus,
     onBlur,
@@ -445,6 +447,7 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
       max: mergedMax,
       direction,
       disabled,
+      keyboard,
       step: mergedStep,
       included,
       includedStart,
@@ -460,6 +463,7 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
       mergedMax,
       direction,
       disabled,
+      keyboard,
       mergedStep,
       included,
       includedStart,

src/context.ts

@@ -8,6 +8,7 @@ export interface SliderContextProps {
   includedEnd: number;
   direction: Direction;
   disabled?: boolean;
+  keyboard?: boolean;
   included?: boolean;
   step: number | null;
   range?: boolean;
@@ -25,6 +26,7 @@ const SliderContext = React.createContext<SliderContextProps>({
   includedStart: 0,
   includedEnd: 0,
   tabIndex: 0,
+  keyboard: true,
 });
 
 export default SliderContext;

tests/Range.test.js

@@ -120,6 +120,19 @@ describe('Range', () => {
     expect(onAfterChange).toBeCalled();
   });
 
+  it('should not change value from keyboard events when disabled', () => {
+    const onAfterChange = jest.fn();
+    const { container } = render(
+      <Slider range keyboard={false} defaultValue={[20, 50]} onAfterChange={onAfterChange} />,
+    );
+
+    fireEvent.keyDown(container.getElementsByClassName('rc-slider-handle')[1], {
+      keyCode: keyCode.RIGHT,
+    });
+
+    expect(onAfterChange).not.toBeCalled();
+  });
+
   it('should render Multi-Range with value correctly', () => {
     const { container } = render(<Slider range count={3} value={[0, 25, 50, 75]} />);