feat: add activeHandleRender (#981)

* docs: update demo * feat: add activeHandleRender * chore: tmp unlock * 10.6.0-0 * chore: reorder to avoid break change * 10.6.0-1 * chore: fix logic * 10.6.0-2 * 10.6.0-3 * chore: opt drag * 10.6.0-4 * fix: blur miss * chore: cleanup * test: coverage
react-component · Apr 19, 2024 · a93831d · a93831d
1 parent ac66c54
commit a93831d
Show file tree

Hide file tree

Showing 8 changed files with 175 additions and 57 deletions.
diff --git a/docs/examples/multiple.tsx b/docs/examples/multiple.tsx
@@ -12,22 +12,38 @@ function log(value) {
   console.log(value);
 }
 
-export default () => (
-  <div>
-    <div style={style}>
-      <Slider
-        range
-        defaultValue={[0, 10, 30]}
-        onChange={log}
-        styles={{
-          tracks: {
-            background: `linear-gradient(to right, blue, red)`,
-          },
-          track: {
-            background: 'transparent',
-          },
-        }}
-      />
+const NodeWrapper = ({ children }: { children: React.ReactElement }) => {
+  return <div>{React.cloneElement(children, {}, <div>TOOLTIP</div>)}</div>;
+};
+
+export default () => {
+  const [value, setValue] = React.useState([0, 5, 8]);
+
+  return (
+    <div>
+      <div style={style}>
+        <Slider
+          range
+          // defaultValue={[0, 10, 30]}
+          // onChange={log}
+          min={0}
+          max={10}
+          value={value}
+          onChange={(nextValue) => {
+            // console.log('>>>', nextValue);
+            setValue(nextValue as any);
+          }}
+          activeHandleRender={(node) => <NodeWrapper>{node}</NodeWrapper>}
+          styles={{
+            tracks: {
+              background: `linear-gradient(to right, blue, red)`,
+            },
+            track: {
+              background: 'transparent',
+            },
+          }}
+        />
+      </div>
     </div>
-  </div>
-);
+  );
+};
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-slider",
-  "version": "10.5.0",
+  "version": "10.6.0-4",
   "description": "Slider UI component for React",
   "keywords": [
     "react",
@@ -35,7 +35,7 @@
     "docs:deploy": "gh-pages -d .doc",
     "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
     "now-build": "npm run docs:build",
-    "prepublishOnly": "npm run compile && np --yolo --no-publish",
+    "prepublishOnly": "npm run compile && np --yolo --no-publish --any-branch",
     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
     "start": "dumi dev",
     "test": "rc-test"

diff --git a/src/Handles/Handle.tsx b/src/Handles/Handle.tsx
@@ -12,18 +12,23 @@ interface RenderProps {
   dragging: boolean;
 }
 
-export interface HandleProps {
+export interface HandleProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onFocus' | 'onMouseEnter'> {
   prefixCls: string;
   style?: React.CSSProperties;
   value: number;
   valueIndex: number;
   dragging: boolean;
   onStartMove: OnStartMove;
   onOffsetChange: (value: number | 'min' | 'max', valueIndex: number) => void;
-  onFocus?: (e: React.FocusEvent<HTMLDivElement>) => void;
-  onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void;
-  render?: (origin: React.ReactElement<HandleProps>, props: RenderProps) => React.ReactElement;
+  onFocus: (e: React.FocusEvent<HTMLDivElement>, index: number) => void;
+  onMouseEnter: (e: React.MouseEvent<HTMLDivElement>, index: number) => void;
+  render?: (
+    origin: React.ReactElement<React.HTMLAttributes<HTMLDivElement>>,
+    props: RenderProps,
+  ) => React.ReactElement;
   onChangeComplete?: () => void;
+  mock?: boolean;
 }
 
 const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
@@ -37,6 +42,8 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
     dragging,
     onOffsetChange,
     onChangeComplete,
+    onFocus,
+    onMouseEnter,
     ...restProps
   } = props;
   const {
@@ -63,6 +70,14 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
     }
   };
 
+  const onInternalFocus = (e: React.FocusEvent<HTMLDivElement>) => {
+    onFocus?.(e, valueIndex);
+  };
+
+  const onInternalMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
+    onMouseEnter(e, valueIndex);
+  };
+
   // =========================== Keyboard ===========================
   const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
     if (!disabled && keyboard) {
@@ -131,13 +146,36 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
   const positionStyle = getDirectionStyle(direction, value, min, max);
 
   // ============================ Render ============================
+  let divProps: React.HtmlHTMLAttributes<HTMLDivElement> = {};
+
+  if (valueIndex !== null) {
+    divProps = {
+      tabIndex: disabled ? null : getIndex(tabIndex, valueIndex),
+      role: 'slider',
+      'aria-valuemin': min,
+      'aria-valuemax': max,
+      'aria-valuenow': value,
+      'aria-disabled': disabled,
+      'aria-label': getIndex(ariaLabelForHandle, valueIndex),
+      'aria-labelledby': getIndex(ariaLabelledByForHandle, valueIndex),
+      'aria-valuetext': getIndex(ariaValueTextFormatterForHandle, valueIndex)?.(value),
+      'aria-orientation': direction === 'ltr' || direction === 'rtl' ? 'horizontal' : 'vertical',
+      onMouseDown: onInternalStartMove,
+      onTouchStart: onInternalStartMove,
+      onFocus: onInternalFocus,
+      onMouseEnter: onInternalMouseEnter,
+      onKeyDown,
+      onKeyUp: handleKeyUp,
+    };
+  }
+
   let handleNode = (
     <div
       ref={ref}
       className={cls(
         handlePrefixCls,
         {
-          [`${handlePrefixCls}-${valueIndex + 1}`]: range,
+          [`${handlePrefixCls}-${valueIndex + 1}`]: valueIndex !== null && range,
           [`${handlePrefixCls}-dragging`]: dragging,
         },
         classNames.handle,
@@ -147,20 +185,7 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
         ...style,
         ...styles.handle,
       }}
-      onMouseDown={onInternalStartMove}
-      onTouchStart={onInternalStartMove}
-      onKeyDown={onKeyDown}
-      onKeyUp={handleKeyUp}
-      tabIndex={disabled ? null : getIndex(tabIndex, valueIndex)}
-      role="slider"
-      aria-valuemin={min}
-      aria-valuemax={max}
-      aria-valuenow={value}
-      aria-disabled={disabled}
-      aria-label={getIndex(ariaLabelForHandle, valueIndex)}
-      aria-labelledby={getIndex(ariaLabelledByForHandle, valueIndex)}
-      aria-valuetext={getIndex(ariaValueTextFormatterForHandle, valueIndex)?.(value)}
-      aria-orientation={direction === 'ltr' || direction === 'rtl' ? 'horizontal' : 'vertical'}
+      {...divProps}
       {...restProps}
     />
   );

diff --git a/src/Handles/index.tsx b/src/Handles/index.tsx
@@ -13,6 +13,12 @@ export interface HandlesProps {
   onFocus?: (e: React.FocusEvent<HTMLDivElement>) => void;
   onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void;
   handleRender?: HandleProps['render'];
+  /**
+   * When config `activeHandleRender`,
+   * it will render another hidden handle for active usage.
+   * This is useful for accessibility or tooltip usage.
+   */
+  activeHandleRender?: HandleProps['render'];
   draggingIndex: number;
   onChangeComplete?: () => void;
 }
@@ -29,7 +35,9 @@ const Handles = React.forwardRef<HandlesRef, HandlesProps>((props, ref) => {
     onOffsetChange,
     values,
     handleRender,
+    activeHandleRender,
     draggingIndex,
+    onFocus,
     ...restProps
   } = props;
   const handlesRef = React.useRef<Record<number, HTMLDivElement>>({});
@@ -40,6 +48,30 @@ const Handles = React.forwardRef<HandlesRef, HandlesProps>((props, ref) => {
     },
   }));
 
+  // =========================== Active ===========================
+  const [activeIndex, setActiveIndex] = React.useState<number>(-1);
+
+  const onHandleFocus = (e: React.FocusEvent<HTMLDivElement>, index: number) => {
+    setActiveIndex(index);
+    onFocus?.(e);
+  };
+
+  const onHandleMouseEnter = (e: React.MouseEvent<HTMLDivElement>, index: number) => {
+    setActiveIndex(index);
+  };
+
+  // =========================== Render ===========================
+  // Handle Props
+  const handleProps = {
+    prefixCls,
+    onStartMove,
+    onOffsetChange,
+    render: handleRender,
+    onFocus: onHandleFocus,
+    onMouseEnter: onHandleMouseEnter,
+    ...restProps,
+  };
+
   return (
     <>
       {values.map<React.ReactNode>((value, index) => (
@@ -52,17 +84,27 @@ const Handles = React.forwardRef<HandlesRef, HandlesProps>((props, ref) => {
             }
           }}
           dragging={draggingIndex === index}
-          prefixCls={prefixCls}
           style={getIndex(style, index)}
           key={index}
           value={value}
           valueIndex={index}
-          onStartMove={onStartMove}
-          onOffsetChange={onOffsetChange}
-          render={handleRender}
-          {...restProps}
+          {...handleProps}
         />
       ))}
+
+      {activeHandleRender && (
+        <Handle
+          key="a11y"
+          {...handleProps}
+          value={values[activeIndex]}
+          valueIndex={null}
+          dragging={draggingIndex !== -1}
+          render={activeHandleRender}
+          style={{ pointerEvents: 'none' }}
+          tabIndex={null}
+          aria-hidden
+        />
+      )}
     </>
   );
 });

diff --git a/src/Slider.tsx b/src/Slider.tsx
@@ -93,6 +93,7 @@ export interface SliderProps<ValueType = number | number[]> {
 
   // Components
   handleRender?: HandlesProps['handleRender'];
+  activeHandleRender?: HandlesProps['handleRender'];
 
   // Accessibility
   tabIndex?: number | number[];
@@ -158,6 +159,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
 
     // Components
     handleRender,
+    activeHandleRender,
 
     // Accessibility
     tabIndex = 0,
@@ -289,12 +291,13 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
   };
 
   const finishChange = () => {
-    onAfterChange?.(getTriggerValue(rawValuesRef.current));
+    const finishValue = getTriggerValue(rawValuesRef.current);
+    onAfterChange?.(finishValue);
     warning(
       !onAfterChange,
       '[rc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.',
     );
-    onChangeComplete?.(getTriggerValue(rawValuesRef.current));
+    onChangeComplete?.(finishValue);
   };
 
   const [draggingIndex, draggingValue, cacheValues, onStartDrag] = useDrag(
@@ -335,6 +338,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
       onBeforeChange?.(getTriggerValue(cloneNextValues));
       triggerChange(cloneNextValues);
       if (e) {
+        handlesRef.current.focus(valueIndex);
         onStartDrag(e, valueIndex, cloneNextValues);
       }
     }
@@ -543,6 +547,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
           onFocus={onFocus}
           onBlur={onBlur}
           handleRender={handleRender}
+          activeHandleRender={activeHandleRender}
           onChangeComplete={finishChange}
         />
 

diff --git a/src/hooks/useDrag.ts b/src/hooks/useDrag.ts
@@ -1,3 +1,4 @@
+import { useEvent } from 'rc-util';
 import * as React from 'react';
 import type { Direction, OnStartMove } from '../interface';
 import type { OffsetValues } from './useOffset';
@@ -18,7 +19,12 @@ function useDrag(
   triggerChange: (values: number[]) => void,
   finishChange: () => void,
   offsetValues: OffsetValues,
-): [number, number, number[], OnStartMove] {
+): [
+  draggingIndex: number,
+  draggingValue: number,
+  returnValues: number[],
+  onStartMove: OnStartMove,
+] {
   const [draggingValue, setDraggingValue] = React.useState(null);
   const [draggingIndex, setDraggingIndex] = React.useState(-1);
   const [cacheValues, setCacheValues] = React.useState(rawValues);
@@ -27,7 +33,7 @@ function useDrag(
   const mouseMoveEventRef = React.useRef<(event: MouseEvent) => void>(null);
   const mouseUpEventRef = React.useRef<(event: MouseEvent) => void>(null);
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     if (draggingIndex === -1) {
       setCacheValues(rawValues);
     }
@@ -55,7 +61,7 @@ function useDrag(
     }
   };
 
-  const updateCacheValue = (valueIndex: number, offsetPercent: number) => {
+  const updateCacheValue = useEvent((valueIndex: number, offsetPercent: number) => {
     // Basic point offset
 
     if (valueIndex === -1) {
@@ -87,11 +93,7 @@ function useDrag(
 
       flushValues(next.values, next.value);
     }
-  };
-
-  // Resolve closure
-  const updateCacheValueRef = React.useRef(updateCacheValue);
-  updateCacheValueRef.current = updateCacheValue;
+  });
 
   const onStartMove: OnStartMove = (e, valueIndex, startValues?: number[]) => {
     e.stopPropagation();
@@ -133,7 +135,7 @@ function useDrag(
         default:
           offSetPercent = offsetX / width;
       }
-      updateCacheValueRef.current(valueIndex, offSetPercent);
+      updateCacheValue(valueIndex, offSetPercent);
     };
 
     // End

diff --git a/tests/Range.test.js b/tests/Range.test.js
@@ -511,12 +511,12 @@ describe('Range', () => {
       expect(handleFocus).toBeCalled();
     });
 
-    it('blur', () => {
+    it('blur()', () => {
       const handleBlur = jest.fn();
       const { container } = render(<Slider range min={0} max={20} onBlur={handleBlur} />);
       container.getElementsByClassName('rc-slider-handle')[0].focus();
       container.getElementsByClassName('rc-slider-handle')[0].blur();
-      expect(handleBlur).toBeCalled();
+      expect(handleBlur).toHaveBeenCalled();
     });
   });