react-extjs 0.0.1

package/src/components/Slider.tsx

@@ -0,0 +1,353 @@
+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 SliderProps {
+  value?: number;
+  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;
+  onChange?: (value: number) => void;
+  onChangeComplete?: (value: number) => void;
+  /** 可选 tip：提供此函数时，拖动滑块会浮出跟随 thumb 的提示气泡（对齐 Ext.slider.Tip）。
+   *  参数为 (value, maxValue)，返回 HTML 字符串（内部用 dangerouslySetInnerHTML 渲染，如 'Page <b>1</b> of <b>25</b>'）。 */
+  getTipText?: (value: number, maxValue: number) => string;
+}
+
+export interface SliderHandle {
+  getValue: () => number;
+  setValue: (v: number, animate?: boolean) => void;
+}
+
+const HALF_THUMB = 7;
+
+/**
+ * 复刻 Ext.slider.SingleSlider（Ext 3.2.1）。
+ * 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，否则 ratio 偏差 7px 破坏像素保真。
+ */
+export const Slider = forwardRef<SliderHandle, SliderProps>(function Slider(
+  {
+    value,
+    defaultValue = 0,
+    minValue = 0,
+    maxValue = 100,
+    increment = 0,
+    keyIncrement = 1,
+    decimalPrecision = 0,
+    vertical = false,
+    width,
+    height,
+    clickToChange = true,
+    disabled = false,
+    cls = '',
+    style,
+    onChange,
+    onChangeComplete,
+    getTipText,
+  },
+  ref,
+) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const innerRef = useRef<HTMLDivElement>(null);
+  const thumbRef = useRef<HTMLDivElement>(null);
+  const dragRef = useRef(false);
+  const latestValueRef = useRef(defaultValue);
+
+  const isControlled = value !== undefined;
+  const [internal, setInternal] = useState(defaultValue);
+  // 拖动期间用本地 dragValue 驱动渲染，使受控模式下 thumb 也能实时跟随鼠标（对齐 Ext 非受控滑块）。
+  const [dragValue, setDragValue] = useState<number | null>(null);
+  const current = dragValue !== null ? dragValue : isControlled ? (value as number) : internal;
+
+  const [innerSize, setInnerSize] = useState(0);
+  const [hover, setHover] = useState(false);
+  const [dragging, setDragging] = useState(false);
+  // 拖动 tip（对齐 Ext.slider.Tip：dragstart 显示、drag 更新、dragend 隐藏）。
+  const [tipText, setTipText] = useState('');
+  const [tipPos, setTipPos] = useState<{ left: number; top: number } | null>(null);
+
+  // 测量 inner 实际尺寸（受显式 width/height = dim-14 影响）。
+  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 setValue = useCallback(
+    (v: number, fireChange = true) => {
+      const nv = normalize(v);
+      latestValueRef.current = nv;
+      if (!isControlled) setInternal(nv);
+      if (fireChange) onChange?.(nv);
+    },
+    [normalize, isControlled, onChange],
+  );
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getValue: () => latestValueRef.current,
+      setValue: (v: number) => setValue(v),
+    }),
+    [setValue],
+  );
+
+  const thumbPos = ratio > 0 ? (current - minValue) * ratio - HALF_THUMB : 0;
+
+  const onKeyDown = useCallback(
+    (e: ReactKeyboardEvent) => {
+      if (disabled) return;
+      let v: number | null = null;
+      switch (e.key) {
+        case 'ArrowUp':
+        case 'ArrowRight':
+          e.preventDefault();
+          v = e.ctrlKey ? maxValue : current + keyIncrement;
+          break;
+        case 'ArrowDown':
+        case 'ArrowLeft':
+          e.preventDefault();
+          v = e.ctrlKey ? minValue : current - keyIncrement;
+          break;
+        case 'Home':
+          e.preventDefault();
+          v = minValue;
+          break;
+        case 'End':
+          e.preventDefault();
+          v = maxValue;
+          break;
+        case 'PageUp':
+          e.preventDefault();
+          v = current + keyIncrement * 10;
+          break;
+        case 'PageDown':
+          e.preventDefault();
+          v = current - keyIncrement * 10;
+          break;
+        default:
+          return;
+      }
+      setValue(v);
+      onChangeComplete?.(normalize(v));
+    },
+    [disabled, current, keyIncrement, maxValue, minValue, setValue, onChangeComplete, 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 onMouseDown = useCallback(
+    (e: ReactMouseEvent) => {
+      if (disabled || ratio === 0) return;
+      const target = e.target as HTMLElement;
+      const onThumb = thumbRef.current != null && thumbRef.current.contains(target);
+
+      // 拖拽 thumb：thumb 中心跟随鼠标（对齐 Ext DragTracker 行为）。
+      if (onThumb) {
+        e.preventDefault();
+        dragRef.current = true;
+        setDragging(true);
+        // 跟随 thumb 的 tip：dragstart 立即显示并更新位置/文案。
+        const updateTip = () => {
+          if (!getTipText || !thumbRef.current) return;
+          const r = thumbRef.current.getBoundingClientRect();
+          setTipText(getTipText(latestValueRef.current, maxValue));
+          setTipPos({ left: r.left + r.width / 2, top: r.top - 10 });
+        };
+        updateTip();
+        const move = (ev: MouseEvent) => {
+          if (!dragRef.current) return;
+          const pos = posFromEvent(ev.clientX, ev.clientY);
+          const nv = normalize(minValue + pos / ratio);
+          // 受控模式下实时更新渲染与 tip，并持续提交 onChange（对齐 Ext 滑块拖动实时变更），
+          // 松手再提交 onChangeComplete。
+          setDragValue(nv);
+          latestValueRef.current = nv;
+          onChange?.(nv);
+          updateTip();
+        };
+        const up = () => {
+          dragRef.current = false;
+          setDragging(false);
+          // 松手提交最终值：非受控模式下把值固化到 internal（对齐 Ext 拖动结束 setValue 提交），
+          // 否则 setDragValue(null) 后 current 回落到 stale 的 internal，thumb 回弹。
+          // fireChange=false：拖动过程已在 move 中持续 onChange，避免重复触发；onChangeComplete 单独上报。
+          setValue(latestValueRef.current, false);
+          setDragValue(null);
+          setTipPos(null);
+          window.removeEventListener('mousemove', move);
+          window.removeEventListener('mouseup', up);
+          onChangeComplete?.(latestValueRef.current);
+        };
+        window.addEventListener('mousemove', move);
+        window.addEventListener('mouseup', up);
+        return;
+      }
+
+      // 点击轨道跳转（clickToChange）。
+      if (clickToChange) {
+        const pos = posFromEvent(e.clientX, e.clientY);
+        const nv = normalize(minValue + pos / ratio);
+        setValue(nv);
+        onChangeComplete?.(nv);
+      }
+    },
+    [disabled, ratio, clickToChange, posFromEvent, setValue, minValue, onChangeComplete, normalize],
+  );
+
+  const rootClass = [
+    'x-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 = {
+    // Ext 渲染 Slider 时 width/height 配置语义为 border-box（含两端的 7px padding），
+    // 不设置则整元素会多出 7px padding，且与 golden 截图尺寸差 7px 破坏像素保真。
+    boxSizing: 'border-box',
+    ...(vertical
+      ? height != null
+        ? { height }
+        : {}
+      : width != null
+        ? { width }
+        : {}),
+    ...style,
+  };
+  const innerStyle: CSSProperties = vertical
+    ? innerDim != null
+      ? { height: innerDim }
+      : {}
+    : innerDim != null
+      ? { width: innerDim }
+      : {};
+
+  const thumbStyle: CSSProperties = vertical
+    ? { bottom: `${thumbPos}px` }
+    : { left: `${thumbPos}px` };
+  const thumbClass = [
+    'x-slider-thumb',
+    hover ? 'x-slider-thumb-over' : '',
+    dragging ? 'x-slider-thumb-drag' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <>
+      <div
+        ref={rootRef}
+        className={rootClass}
+        style={rootStyle}
+        data-value={current}
+        tabIndex={disabled ? -1 : 0}
+        onMouseDown={onMouseDown}
+        onKeyDown={onKeyDown}
+      >
+        <div className="x-slider-end">
+          <div className="x-slider-inner" ref={innerRef} style={innerStyle}>
+            <a className="x-slider-focus" href="#" tabIndex={-1} />
+            <div
+              ref={thumbRef}
+              className={thumbClass}
+              style={thumbStyle}
+              onMouseEnter={() => setHover(true)}
+              onMouseLeave={() => setHover(false)}
+            />
+          </div>
+        </div>
+      </div>
+      {/* Slider Tip：复用原始 Ext 3.2.1 .x-tip 结构类（ext-all.css），portal 到 body 避免被 toolbar 裁剪。 */}
+      {tipPos && getTipText && createPortal(
+        <div
+          className="x-tip"
+          style={{
+            position: 'fixed',
+            left: tipPos.left,
+            top: tipPos.top,
+            // 对齐 Ext.slider.Tip：alignTo(thumb.el,'b-t?',[0,-10]) —— tip 底边贴 thumb 顶边、
+            // 上移 10px 且水平居中。translate(-50%,-100%) 使 tip 中心对准 thumb 中心、整体位于其上方，
+            // 箭头（x-tip-anchor-bottom）自然指向下方的 thumb。
+            transform: 'translate(-50%, -100%)',
+            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,
+      )}
+    </>
+  );
+});

package/src/components/SliderField.tsx

@@ -0,0 +1,206 @@
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+} from 'react';
+import { Slider, type SliderHandle } from './Slider';
+
+/**
+ * 保真 Ext.form.SliderField（Ext JS 3.2.1）。
+ *
+ * 来源 src/widgets/form/SliderField.js。把 Ext.Slider 封装为表单字段：
+ * 渲染为 div.x-form-field-wrap（actionMode:'wrap' 时 FormLayout 即包裹此元素），
+ * 内含 input[type=hidden]（承载字段值，对齐 this.el）与 Slider 本体（对齐 this.slider）。
+ *
+ * 与原版逐项对齐：
+ * - initComponent 把 vertical/minValue/maxValue/decimalPrecision/keyIncrement/increment/
+ *   clickToChange 透传给内部 Slider；useTips(默认 true) 启用滑块 tip，tipText 自定义文案。
+ * - onChange（slider 'change'）→ setValue(v, undefined, true)（silent），即只更新字段隐藏值、
+ *   不再回写 slider（避免回环）；这里等价：SliderField 持有值并单向驱动 Slider，Slider 的
+ *   change 回调再回填 SliderField 的值，不回写 Slider 本身。
+ * - getValue → slider.getValue()；setValue(v, animate) → 先写 slider 再回填隐藏值。
+ * - setMinValue/setMaxValue/disable/enable 全部委托内部 Slider（对齐原版同名方法）。
+ *
+ * 注意：本复刻以受控/非受控 value 作为字段真值（hidden input 仅用于提交与 DOM 保真），
+ * 组件本身即为「字段」，配合 FormField（标签包裹）或独立使用，与 SpinnerField 一致。
+ */
+export interface SliderFieldProps {
+  /** 字段 id（落到 hidden input 与 wrap 上，供 label htmlFor 关联）。 */
+  id?: string;
+  /** 表单提交字段名（落到 hidden input.name）。 */
+  name?: string;
+  /** 受控值（数字）。提供时作为唯一来源（受控模式）。 */
+  value?: number;
+  /** 非受控初始值，默认 0。 */
+  defaultValue?: number;
+  minValue?: number;
+  maxValue?: number;
+  /** 吸附步长，0 表示不吸附（默认 0）。 */
+  increment?: number;
+  keyIncrement?: number;
+  decimalPrecision?: number;
+  vertical?: boolean;
+  /** 水平滑块宽度 / 垂直滑块高度（直接透传给内部 Slider）。 */
+  width?: number;
+  height?: number;
+  clickToChange?: boolean;
+  disabled?: boolean;
+  /** 对齐 Ext useTips：是否使用滑过提示气泡，默认 true。 */
+  useTips?: boolean;
+  /** 自定义 tip 文案函数（对齐 Ext tipText），参数为当前值，返回字符串；为空用默认 String(value)。 */
+  tipText?: (value: number) => string;
+  cls?: string;
+  style?: CSSProperties;
+  /** 值变化回调（拖动/点击/键盘过程中持续触发，对齐 Ext 'change'）。 */
+  onChange?: (value: number) => void;
+  /** 交互结束（松手/键盘完成）回调（对齐 Ext 'changecomplete'）。 */
+  onChangeComplete?: (value: number) => void;
+}
+
+/** 命令式句柄：对齐 Ext.form.SliderField 的 getValue / setValue / setMinValue / setMaxValue / focus。 */
+export interface SliderFieldHandle {
+  getValue: () => number;
+  setValue: (v: number, animate?: boolean) => void;
+  setMinValue: (v: number) => void;
+  setMaxValue: (v: number) => void;
+  focus: () => void;
+}
+
+export const SliderField = forwardRef<SliderFieldHandle, SliderFieldProps>(function SliderField(
+  {
+    id,
+    name,
+    value,
+    defaultValue = 0,
+    minValue = 0,
+    maxValue = 100,
+    increment = 0,
+    keyIncrement = 1,
+    decimalPrecision = 0,
+    vertical = false,
+    width,
+    height,
+    clickToChange = true,
+    disabled = false,
+    useTips = true,
+    tipText,
+    cls = '',
+    style,
+    onChange,
+    onChangeComplete,
+  },
+  ref,
+) {
+  const isControlled = value !== undefined;
+  const [internal, setInternal] = useState(defaultValue);
+  const current = isControlled ? (value as number) : internal;
+
+  // 持有 min/max 于内部状态，使 setMinValue/setMaxValue 句柄能运行时修改（对齐 Ext 同名方法）。
+  const [min, setMin] = useState(minValue);
+  const [max, setMax] = useState(maxValue);
+
+  const sliderRef = useRef<SliderHandle>(null);
+  const hiddenRef = useRef<HTMLInputElement>(null);
+
+  // 同步隐藏字段值（对齐 Ext setValue → superclass.setValue 写 this.el）。
+  const syncHidden = useCallback((v: number) => {
+    if (hiddenRef.current) hiddenRef.current.value = String(v);
+  }, []);
+
+  const onSliderChange = useCallback(
+    (v: number) => {
+      if (!isControlled) setInternal(v);
+      syncHidden(v);
+      onChange?.(v);
+    },
+    [isControlled, syncHidden, onChange],
+  );
+
+  const onSliderChangeComplete = useCallback(
+    (v: number) => {
+      onChangeComplete?.(v);
+    },
+    [onChangeComplete],
+  );
+
+  // 对齐 useTips + tipText：提供 getTipText 给内部 Slider 即启用 tip。
+  const getTipText = useMemo(() => {
+    if (!useTips) return undefined;
+    return tipText ? (v: number) => tipText(v) : (v: number) => String(v);
+  }, [useTips, tipText]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getValue: () => (sliderRef.current ? sliderRef.current.getValue() : current),
+      setValue: (v: number, animate?: boolean) => {
+        if (!isControlled) setInternal(v);
+        syncHidden(v);
+        sliderRef.current?.setValue(v, animate);
+        onChange?.(v);
+      },
+      setMinValue: (v: number) => {
+        setMin(v);
+        // 边界上移后钳制当前值（对齐 Ext setMinValue 的 thumbs[i].value 修正）。
+        if (current < v) {
+          if (!isControlled) setInternal(v);
+          syncHidden(v);
+          sliderRef.current?.setValue(v);
+          onChange?.(v);
+        }
+      },
+      setMaxValue: (v: number) => {
+        setMax(v);
+        if (current > v) {
+          if (!isControlled) setInternal(v);
+          syncHidden(v);
+          sliderRef.current?.setValue(v);
+          onChange?.(v);
+        }
+      },
+      focus: () => {
+        const el = hiddenRef.current?.parentElement?.querySelector<HTMLElement>('.x-slider');
+        el?.focus();
+      },
+    }),
+    [current, isControlled, syncHidden, onChange],
+  );
+
+  const wrapClass = ['x-form-field-wrap', cls].filter(Boolean).join(' ');
+
+  return (
+    <div className={wrapClass} id={id ? `wrap-${id}` : undefined} style={style}>
+      <input
+        ref={hiddenRef}
+        type="hidden"
+        id={id}
+        name={name}
+        className="x-form-field"
+        value={String(current)}
+      />
+      <Slider
+        ref={sliderRef}
+        value={current}
+        minValue={min}
+        maxValue={max}
+        increment={increment}
+        keyIncrement={keyIncrement}
+        decimalPrecision={decimalPrecision}
+        vertical={vertical}
+        width={width}
+        height={height}
+        clickToChange={clickToChange}
+        disabled={disabled}
+        getTipText={getTipText}
+        onChange={onSliderChange}
+        onChangeComplete={onSliderChangeComplete}
+      />
+    </div>
+  );
+});
+
+SliderField.displayName = 'SliderField';

package/src/components/SpinnerField.tsx

@@ -0,0 +1,141 @@
+import React, { useRef, useState } from 'react';
+
+const BLANK_GIF =
+  'data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
+
+// 字段（wrap）总宽 = Ext 的 width 配置。border-box 下输入框 width 即外宽，
+// 故 input 外宽 = wrap 宽 - trigger 宽度(17)；trigger 以绝对定位钉在右边缘，
+// 中间 splitter 用 right:2 居中于 trigger。golden 实测 wrap=194 / input=177 吻合。
+const TRIGGER_OFFSET = 17;
+
+export interface SpinnerFieldProps {
+  value?: number | string;
+  minValue?: number;
+  maxValue?: number;
+  incrementValue?: number;
+  defaultValue?: number | string;
+  /** 字段（wrap）总宽，等同 Ext 的 width 配置。默认 194。 */
+  width?: number;
+  id?: string;
+  name?: string;
+  testId?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+function clamp(v: number, min?: number, max?: number): number {
+  if (typeof min === 'number') v = Math.max(min, v);
+  if (typeof max === 'number') v = Math.min(max, v);
+  return v;
+}
+
+export const SpinnerField: React.FC<SpinnerFieldProps> = ({
+  value,
+  minValue,
+  maxValue,
+  incrementValue = 1,
+  defaultValue,
+  width = 194,
+  id,
+  name,
+  testId,
+  className,
+  style,
+}) => {
+  const initial =
+    value !== undefined ? Number(value) : defaultValue !== undefined ? Number(defaultValue) : 0;
+  const [val, setVal] = useState<number>(clamp(initial, minValue, maxValue));
+  const triggerRef = useRef<HTMLImageElement>(null);
+  const dragRef = useRef<{ up: boolean; btn: number } | null>(null);
+
+  const wrapWidth = width;
+  const inputWidth = wrapWidth - TRIGGER_OFFSET;
+
+  const applyClickClass = (up: boolean) => {
+    const el = triggerRef.current;
+    if (!el) return;
+    el.classList.remove('x-form-spinner-clickup', 'x-form-spinner-clickdown');
+    el.classList.add(up ? 'x-form-spinner-clickup' : 'x-form-spinner-clickdown');
+  };
+
+  const clearClickClass = () => {
+    const el = triggerRef.current;
+    if (el) el.classList.remove('x-form-spinner-clickup', 'x-form-spinner-clickdown');
+    dragRef.current = null;
+  };
+
+  const spin = (e: React.MouseEvent) => {
+    const el = e.currentTarget as HTMLElement;
+    const rect = el.getBoundingClientRect();
+    const middle = rect.top + rect.height / 2;
+    const up = e.clientY < middle;
+    applyClickClass(up);
+    const next = clamp(val + (up ? 1 : -1) * incrementValue, minValue, maxValue);
+    setVal(next);
+    dragRef.current = { up, btn: e.button };
+  };
+
+  const onDown = (e: React.MouseEvent) => {
+    spin(e);
+    const move = () => {};
+    const up = () => {
+      clearClickClass();
+      window.removeEventListener('mouseup', up);
+    };
+    window.addEventListener('mouseup', up);
+    void move;
+  };
+
+  const rootCls = ['x-form-field-wrap', 'x-form-field-trigger-wrap', className]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div
+      className={rootCls}
+      data-testid={testId}
+      id={id}
+      style={{ width: wrapWidth, ...style }}
+    >
+      <input
+        type="text"
+        autoComplete="off"
+        name={name}
+        className="x-form-text x-form-field x-form-num-field"
+        style={{ width: inputWidth }}
+        value={val}
+        readOnly
+        onChange={() => {}}
+      />
+      <img
+        ref={triggerRef}
+        src={BLANK_GIF}
+        className="x-form-trigger x-form-spinner-trigger x-unselectable"
+        onMouseDown={onDown}
+      />
+      <div
+        className="x-form-spinner-splitter"
+        style={{
+          width: '13px',
+          height: '2px',
+          right: '2px',
+          top: '10px',
+          visibility: 'visible',
+        }}
+        onMouseDown={onDown}
+      >
+        <div
+          className=" x-form-spinner-proxy"
+          style={{
+            width: '14px',
+            height: '1px',
+            position: 'relative',
+            left: '0px',
+            top: '-10px',
+            visibility: 'hidden',
+          }}
+        />
+      </div>
+    </div>
+  );
+};