chore: add internal hooks (#1014)

* chore: add internal hooks * chore: fix lint
react-component · Jul 24, 2024 · b18b653 · b18b653
1 parent 06ddced
commit b18b653
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 35 deletions.
diff --git a/docs/examples/editable.tsx b/docs/examples/editable.tsx
@@ -1,7 +1,8 @@
 /* eslint react/no-multi-comp: 0, no-console: 0 */
-import Slider from 'rc-slider';
+import Slider, { UnstableContext } from 'rc-slider';
 import React from 'react';
 import '../../assets/index.less';
+import type { UnstableContextProps } from '../../src/context';
 
 const style: React.CSSProperties = {
   width: 400,
@@ -11,43 +12,55 @@ const style: React.CSSProperties = {
 export default () => {
   const [value, setValue] = React.useState([0, 50, 80]);
 
+  const onDragStart: UnstableContextProps['onDragStart'] = (info) => {
+    const { rawValues } = info;
+    console.log('Start:', rawValues);
+  };
+
+  const onDragChange: UnstableContextProps['onDragChange'] = (info) => {
+    const { rawValues } = info;
+    console.log('Move:', rawValues);
+  };
+
   return (
     <div>
       <div style={style}>
-        <Slider
-          // range
-          range={{
-            editable: true,
-            minCount: 1,
-            maxCount: 4,
-          }}
-          // track={false}
-          min={0}
-          max={100}
-          value={value}
-          // defaultValue={null}
-          onChange={(nextValue) => {
-            console.error('Change:', nextValue);
-            setValue(nextValue as any);
-          }}
-          onChangeComplete={(nextValue) => {
-            console.log('Complete', nextValue);
-          }}
-          // handleRender={(ori, handleProps) => {
-          //   if (handleProps.index === 0) {
-          //     console.log('handleRender', ori, handleProps);
-          //   }
-          //   return ori;
-          // }}
-          styles={{
-            rail: {
-              background: `linear-gradient(to right, blue, red)`,
-            },
-            track: {
-              background: 'orange',
-            },
-          }}
-        />
+        <UnstableContext.Provider value={{ onDragStart, onDragChange }}>
+          <Slider
+            // range
+            range={{
+              editable: true,
+              minCount: 1,
+              maxCount: 4,
+            }}
+            // track={false}
+            min={0}
+            max={100}
+            value={value}
+            // defaultValue={null}
+            onChange={(nextValue) => {
+              console.error('Change:', nextValue);
+              setValue(nextValue as any);
+            }}
+            onChangeComplete={(nextValue) => {
+              console.log('Complete', nextValue);
+            }}
+            // handleRender={(ori, handleProps) => {
+            //   if (handleProps.index === 0) {
+            //     console.log('handleRender', ori, handleProps);
+            //   }
+            //   return ori;
+            // }}
+            styles={{
+              rail: {
+                background: `linear-gradient(to right, blue, red)`,
+              },
+              track: {
+                background: 'orange',
+              },
+            }}
+          />
+        </UnstableContext.Provider>
       </div>
 
       <p>Here is a word that drag should not select it</p>

diff --git a/src/context.ts b/src/context.ts
@@ -34,3 +34,20 @@ const SliderContext = React.createContext<SliderContextProps>({
 });
 
 export default SliderContext;
+
+export interface UnstableContextProps {
+  onDragStart?: (info: {
+    rawValues: number[];
+    draggingIndex: number;
+    draggingValue: number;
+  }) => void;
+  onDragChange?: (info: {
+    rawValues: number[];
+    deleteIndex: number;
+    draggingIndex: number;
+    draggingValue: number;
+  }) => void;
+}
+
+/** @private NOT PROMISE AVAILABLE. DO NOT USE IN PRODUCTION. */
+export const UnstableContext = React.createContext<UnstableContextProps>({});
diff --git a/src/hooks/useDrag.ts b/src/hooks/useDrag.ts
@@ -1,5 +1,6 @@
 import { useEvent } from 'rc-util';
 import * as React from 'react';
+import { UnstableContext } from '../context';
 import type { Direction, OnStartMove } from '../interface';
 import type { OffsetValues } from './useOffset';
 
@@ -40,6 +41,8 @@ function useDrag(
   const mouseMoveEventRef = React.useRef<(event: MouseEvent) => void>(null);
   const mouseUpEventRef = React.useRef<(event: MouseEvent) => void>(null);
 
+  const { onDragStart, onDragChange } = React.useContext(UnstableContext);
+
   React.useLayoutEffect(() => {
     if (draggingIndex === -1) {
       setCacheValues(rawValues);
@@ -69,6 +72,15 @@ function useDrag(
       changeValues = nextValues.filter((_, i) => i !== draggingIndex);
     }
     triggerChange(changeValues);
+
+    if (onDragChange) {
+      onDragChange({
+        rawValues: nextValues,
+        deleteIndex: deleteMark ? draggingIndex : -1,
+        draggingIndex,
+        draggingValue: nextValue,
+      });
+    }
   };
 
   const updateCacheValue = useEvent(
@@ -123,6 +135,15 @@ function useDrag(
     // We declare it here since closure can't get outer latest value
     let deleteMark = false;
 
+    // Internal trigger event
+    if (onDragStart) {
+      onDragStart({
+        rawValues: initialValues,
+        draggingIndex: valueIndex,
+        draggingValue: originValue,
+      });
+    }
+
     // Moving
     const onMouseMove = (event: MouseEvent | TouchEvent) => {
       event.preventDefault();

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,5 +1,6 @@
 import type { SliderProps, SliderRef } from './Slider';
 import Slider from './Slider';
+export { UnstableContext } from './context';
 
 export type { SliderProps, SliderRef };