react-extjs 0.0.1

package/src/components/MultiSlider.tsx

@@ -0,0 +1,369 @@
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type MouseEvent as ReactMouseEvent,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+export interface MultiSliderProps {
+  /** 受控多值（每个元素对应一个 thumb）。提供时完全由该 prop 决定（对齐 Ext 受控模式）。 */
+  values?: number[];
+  /** 非受控初值（对齐 Ext value 初始数组）。 */
+  defaultValue?: number[];
+  minValue?: number;
+  maxValue?: number;
+  /** 吸附步长，0 表示不吸附（默认 0）。 */
+  increment?: number;
+  /** 键盘方向键每次步进（默认 1）。 */
+  keyIncrement?: number;
+  decimalPrecision?: number;
+  vertical?: boolean;
+  /** 水平滑块宽度 / 垂直滑块高度（对应 Ext 配置项的 content 尺寸）。 */
+  width?: number;
+  height?: number;
+  clickToChange?: boolean;
+  disabled?: boolean;
+  cls?: string;
+  style?: CSSProperties;
+  /** 值变化（拖拽/点击/键盘）时实时回调，参数始终为按 thumb 顺序排列的数组。 */
+  onValuesChange?: (values: number[]) => void;
+  /** 交互结束（鼠标松开 / 按键完成）时回调（对齐 Ext changecomplete）。 */
+  onValuesChangeComplete?: (values: number[]) => void;
+  /** 可选 tip：提供时拖动 thumb 会浮出跟随的提示气泡（对齐 Ext.slider.Tip）。
+   *  参数为 (index, value, maxValue)，返回 HTML 字符串（内部 dangerouslySetInnerHTML 渲染）。 */
+  getTipText?: (index: number, value: number, maxValue: number) => string;
+}
+
+export interface MultiSliderHandle {
+  getValues: () => number[];
+  setValues: (v: number[], animate?: boolean) => void;
+  /** 设置某个 thumb 的值（对齐 Ext MultiSlider.setValue(index, value)）。 */
+  setValue: (index: number, v: number, animate?: boolean) => void;
+}
+
+const HALF_THUMB = 7;
+
+/**
+ * 复刻 Ext.slider.MultiSlider（Ext 3.2.1 多滑块 / 区间滑块）。
+ * 与 Ext 一致：每个 thumb 独立持有值，values 数组按 thumb 顺序排列（默认不约束交叉，可通过业务层排序实现区间）。
+ *
+ * DOM：.x-slider.{x-slider-horz|x-slider-vert} > .x-slider-end > .x-slider-inner > (.x-slider-focus + 多个 .x-slider-thumb)
+ * 定位公式对齐 Ext：
+ *   ratio = innerSize / (maxValue - minValue)
+ *   horizontal: thumb.left  = (value - min) * ratio - HALF_THUMB
+ *   vertical:   thumb.bottom = (value - min) * ratio - HALF_THUMB
+ * Ext 在 onResize 把 inner 显式设为 dim - 14（两端各 7px padding），React 同样给 inner 设 width/height = dim - 14。
+ */
+export const MultiSlider = forwardRef<MultiSliderHandle, MultiSliderProps>(function MultiSlider(
+  {
+    values,
+    defaultValue = [0, 100],
+    minValue = 0,
+    maxValue = 100,
+    increment = 0,
+    keyIncrement = 1,
+    decimalPrecision = 0,
+    vertical = false,
+    width,
+    height,
+    clickToChange = true,
+    disabled = false,
+    cls = '',
+    style,
+    onValuesChange,
+    onValuesChangeComplete,
+    getTipText,
+  },
+  ref,
+) {
+  const innerRef = useRef<HTMLDivElement>(null);
+  const thumbRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const dragRef = useRef<number | null>(null); // 正在拖拽的 thumb 索引
+  const latestValuesRef = useRef<number[]>(defaultValue);
+
+  const isControlled = values !== undefined;
+  const init = isControlled ? (values as number[]) : defaultValue;
+  const [internal, setInternal] = useState<number[]>(init);
+  // 拖动期间用本地 dragValues 驱动渲染，使受控模式下 thumb 也能实时跟随鼠标。
+  const [dragValues, setDragValues] = useState<number[] | null>(null);
+  const current: number[] = dragValues !== null ? dragValues : isControlled ? (values as number[]) : internal;
+
+  const [innerSize, setInnerSize] = useState(0);
+  const [hover, setHover] = useState<number | null>(null);
+  const [dragging, setDragging] = useState<number | null>(null);
+  const [tipText, setTipText] = useState('');
+  const [tipPos, setTipPos] = useState<{ left: number; top: number } | null>(null);
+
+  useLayoutEffect(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    const measure = () => setInnerSize(vertical ? el.offsetHeight : el.offsetWidth);
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [vertical]);
+
+  const ratio = innerSize > 0 ? innerSize / (maxValue - minValue || 1) : 0;
+
+  const normalize = useCallback(
+    (v: number) => {
+      let nv = v;
+      if (increment > 0) {
+        nv = Math.round((nv - minValue) / increment) * increment + minValue;
+      }
+      const p = Math.pow(10, decimalPrecision);
+      nv = Math.round(nv * p) / p;
+      if (nv < minValue) nv = minValue;
+      if (nv > maxValue) nv = maxValue;
+      return nv;
+    },
+    [increment, minValue, maxValue, decimalPrecision],
+  );
+
+  const commit = useCallback(
+    (next: number[], fireChange = true) => {
+      latestValuesRef.current = next;
+      if (!isControlled) setInternal(next);
+      if (fireChange) onValuesChange?.(next);
+    },
+    [isControlled, onValuesChange],
+  );
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getValues: () => latestValuesRef.current,
+      setValues: (v: number[]) => commit(v.map(normalize)),
+      setValue: (index: number, v: number) => {
+        const next = latestValuesRef.current.slice();
+        next[index] = normalize(v);
+        commit(next);
+      },
+    }),
+    [commit, normalize],
+  );
+
+  const posFromEvent = useCallback(
+    (clientX: number, clientY: number) => {
+      const rect = innerRef.current!.getBoundingClientRect();
+      return vertical ? rect.height - (clientY - rect.top) : clientX - rect.left;
+    },
+    [vertical],
+  );
+
+  const startDrag = useCallback(
+    (index: number) => {
+      if (disabled || ratio === 0) return;
+      dragRef.current = index;
+      setDragging(index);
+      const updateTip = () => {
+        if (!getTipText || !thumbRefs.current[index]) return;
+        const r = thumbRefs.current[index]!.getBoundingClientRect();
+        setTipText(getTipText(index, latestValuesRef.current[index], maxValue));
+        setTipPos({ left: r.left + r.width / 2, top: r.top - 10 });
+      };
+      updateTip();
+      const move = (ev: MouseEvent) => {
+        if (dragRef.current !== index) return;
+        const pos = posFromEvent(ev.clientX, ev.clientY);
+        const nv = normalize(minValue + pos / ratio);
+        const next = latestValuesRef.current.slice();
+        next[index] = nv;
+        setDragValues(next);
+        latestValuesRef.current = next;
+        onValuesChange?.(next);
+        updateTip();
+      };
+      const up = () => {
+        dragRef.current = null;
+        setDragging(null);
+        // 非受控模式下把最终值固化进 internal，否则 dragValues 清空后 current 回退到初值（对齐 Ext 拖拽持久化）。
+        commit(latestValuesRef.current);
+        setDragValues(null);
+        setTipPos(null);
+        window.removeEventListener('mousemove', move);
+        window.removeEventListener('mouseup', up);
+        onValuesChangeComplete?.(latestValuesRef.current);
+      };
+      window.addEventListener('mousemove', move);
+      window.addEventListener('mouseup', up);
+    },
+    [disabled, ratio, getTipText, maxValue, posFromEvent, normalize, minValue, onValuesChange, onValuesChangeComplete],
+  );
+
+  const onThumbMouseDown = useCallback(
+    (e: ReactMouseEvent, index: number) => {
+      if (disabled) return;
+      e.preventDefault();
+      startDrag(index);
+    },
+    [disabled, startDrag],
+  );
+
+  const onKeyDown = useCallback(
+    (e: ReactKeyboardEvent, index: number) => {
+      if (disabled) return;
+      const cur = latestValuesRef.current[index];
+      let v: number | null = null;
+      switch (e.key) {
+        case 'ArrowUp':
+        case 'ArrowRight':
+          e.preventDefault();
+          v = e.ctrlKey ? maxValue : cur + keyIncrement;
+          break;
+        case 'ArrowDown':
+        case 'ArrowLeft':
+          e.preventDefault();
+          v = e.ctrlKey ? minValue : cur - keyIncrement;
+          break;
+        case 'Home':
+          e.preventDefault();
+          v = minValue;
+          break;
+        case 'End':
+          e.preventDefault();
+          v = maxValue;
+          break;
+        case 'PageUp':
+          e.preventDefault();
+          v = cur + keyIncrement * 10;
+          break;
+        case 'PageDown':
+          e.preventDefault();
+          v = cur - keyIncrement * 10;
+          break;
+        default:
+          return;
+      }
+      const next = latestValuesRef.current.slice();
+      next[index] = normalize(v);
+      commit(next);
+      onValuesChangeComplete?.(next);
+    },
+    [disabled, maxValue, keyIncrement, minValue, normalize, commit, onValuesChangeComplete],
+  );
+
+  const onTrackMouseDown = useCallback(
+    (e: ReactMouseEvent) => {
+      if (disabled || ratio === 0) return;
+      const target = e.target as HTMLElement;
+      // 命中某个 thumb 时交由 thumb 的 mousedown 处理（避免重复触发）。
+      if (thumbRefs.current.some((t) => t != null && t.contains(target))) return;
+      if (!clickToChange) return;
+      const pos = posFromEvent(e.clientX, e.clientY);
+      const clicked = minValue + pos / ratio;
+      // 点击轨道：移动「最近」的那个 thumb（对齐 Ext MultiSlider 行为）。
+      let nearest = 0;
+      let best = Infinity;
+      current.forEach((val, i) => {
+        const d = Math.abs(val - clicked);
+        if (d < best) {
+          best = d;
+          nearest = i;
+        }
+      });
+      const next = current.slice();
+      next[nearest] = normalize(clicked);
+      commit(next);
+      onValuesChangeComplete?.(next);
+    },
+    [disabled, ratio, clickToChange, posFromEvent, minValue, current, normalize, commit, onValuesChangeComplete],
+  );
+
+  const rootClass = [
+    'x-slider',
+    'x-multi-slider',
+    vertical ? 'x-slider-vert' : 'x-slider-horz',
+    disabled ? 'x-slider-disabled' : '',
+    cls,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const dim = vertical ? height : width;
+  const innerDim = dim != null ? dim - 14 : undefined;
+  const rootStyle: CSSProperties = {
+    boxSizing: 'border-box',
+    ...(vertical ? (height != null ? { height } : {}) : width != null ? { width } : {}),
+    ...style,
+  };
+  const innerStyle: CSSProperties = vertical
+    ? innerDim != null
+      ? { height: innerDim }
+      : {}
+    : innerDim != null
+      ? { width: innerDim }
+      : {};
+
+  return (
+    <>
+      <div
+        className={rootClass}
+        style={rootStyle}
+        data-values={current.join(',')}
+        tabIndex={disabled ? -1 : 0}
+        onMouseDown={onTrackMouseDown}
+      >
+        <div className="x-slider-end">
+          <div className="x-slider-inner" ref={innerRef} style={innerStyle}>
+            <a className="x-slider-focus" href="#" tabIndex={-1} />
+            {current.map((val, i) => {
+              const thumbPos = ratio > 0 ? (val - minValue) * ratio - HALF_THUMB : 0;
+              const thumbStyle: CSSProperties = vertical
+                ? { bottom: `${thumbPos}px` }
+                : { left: `${thumbPos}px` };
+              const thumbClass = [
+                'x-slider-thumb',
+                hover === i ? 'x-slider-thumb-over' : '',
+                dragging === i ? 'x-slider-thumb-drag' : '',
+              ]
+                .filter(Boolean)
+                .join(' ');
+              return (
+                <div
+                  key={i}
+                  ref={(el) => {
+                    thumbRefs.current[i] = el;
+                  }}
+                  className={thumbClass}
+                  style={thumbStyle}
+                  tabIndex={disabled ? -1 : 0}
+                  onMouseDown={(e) => onThumbMouseDown(e, i)}
+                  onMouseEnter={() => setHover(i)}
+                  onMouseLeave={() => setHover((h) => (h === i ? null : h))}
+                  onKeyDown={(e) => onKeyDown(e, i)}
+                />
+              );
+            })}
+          </div>
+        </div>
+      </div>
+      {tipPos && getTipText && createPortal(
+        <div
+          className="x-tip"
+          style={{ position: 'fixed', left: tipPos.left, top: tipPos.top, visibility: 'visible', zIndex: 20001 }}
+        >
+          <div className="x-tip-tl"><div className="x-tip-tr"><div className="x-tip-tc" /></div></div>
+          <div className="x-tip-bwrap">
+            <div className="x-tip-ml"><div className="x-tip-mr"><div className="x-tip-mc">
+              <div className="x-tip-body" dangerouslySetInnerHTML={{ __html: tipText }} />
+            </div></div></div>
+          </div>
+          <div className="x-tip-bl"><div className="x-tip-br"><div className="x-tip-bc" /></div></div>
+          <div
+            className="x-tip-anchor x-tip-anchor-bottom"
+            style={{ left: '50%', marginLeft: -4, bottom: -9 }}
+          />
+        </div>,
+        document.body,
+      )}
+    </>
+  );
+});