@easyv/react-components 0.0.12 → 0.0.14

package/dist/Input/index.js

@@ -1,6 +1,6 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["bordered", "className", "enableEmpty", "value", "autoSelect", "onBlur", "onFocus", "onChange", "onPressEnter", "onBlurChange"],
-  _excluded2 = ["bordered", "className", "onSearch"];
+var _excluded = ["value", "defaultValue", "enableEmpty", "autoSelect", "changeOnBlur", "onPressEnter", "onFocus", "onBlur", "onChange"],
+  _excluded2 = ["onSearch"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -16,97 +16,88 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { Input } from '@arco-design/web-react';
-import classNames from 'classnames';
 import { SearchCircleOutlined } from '@easyv/react-icons';
 import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 var XInput = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _props$bordered = props.bordered,
-    bordered = _props$bordered === void 0 ? true : _props$bordered,
-    className = props.className,
+  var _halfControlledProps;
+  var value = props.value,
+    defaultValue = props.defaultValue,
     enableEmpty = props.enableEmpty,
-    value = props.value,
     autoSelect = props.autoSelect,
-    onBlur = props.onBlur,
+    changeOnBlur = props.changeOnBlur,
+    onPressEnter = props.onPressEnter,
     onFocus = props.onFocus,
+    onBlur = props.onBlur,
     onChange = props.onChange,
-    onPressEnter = props.onPressEnter,
-    onBlurChange = props.onBlurChange,
     restProps = _objectWithoutProperties(props, _excluded);
-  var isHalfControlled = onBlurChange !== undefined;
-  var isControlled = ('value' in props);
-  var _useState = useState('value' in props ? props.value : undefined),
+
+  // 用于 changeOnBlur 为 true 的模式，组件内存储，在失焦的时候，提交这个值
+  var _useState = useState('value' in props ? value : defaultValue),
     _useState2 = _slicedToArray(_useState, 2),
     localValue = _useState2[0],
     setLocalValue = _useState2[1];
+
+  // 为了让 onBlur 函数不要每次值更新都生成新的函数引用，这里用 ref 缓存 localValue 值，这样 onBlur 函数可以不依赖 localValue 的更新，直接在需要的时候读取 ref 的值
   var refValue = useRef(localValue);
   refValue.current = localValue;
   useEffect(function () {
-    if (isHalfControlled && props.value !== localValue) {
-      setLocalValue(props.value);
+    // 只在 changeOnBlur 为 true 的时候 value 变化才更新，防止 changeOnBlur 为 false 时不需要这个值，更新过于频繁
+    if (changeOnBlur && value !== localValue) {
+      setLocalValue(value);
     }
-  }, [props.value, isHalfControlled]);
+  }, [value, changeOnBlur]);
 
-  // 回车失去焦点
+  // 修改组件库的默认行为：按回车失去焦点
   var handlePressEnter = useCallback(function (e) {
     e.currentTarget.blur();
     onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter(e);
   }, [onPressEnter]);
 
-  // 聚焦自动选中
+  // 根据配置决定是否需要聚焦自动选中输入框文本
   var handleFocus = useCallback(function (e) {
     if (autoSelect) {
       e.currentTarget.select();
     }
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
   }, [onFocus]);
-  var handleChange = useCallback(function (value, e) {
+
+  // changeOnBlur 为 true 模式下，修改的值存本地
+  var handleChange = useCallback(function (value) {
     setLocalValue(value);
-    onChange === null || onChange === void 0 ? void 0 : onChange(value, e);
   }, [onChange]);
+
+  // changeOnBlur 为 true 模式下，失去焦点的时候才提交值的修改
   var handleBlur = useCallback(function (e) {
-    if (refValue.current !== undefined && refValue.current !== props.value) {
+    if (refValue.current !== undefined && refValue.current !== value) {
       if (enableEmpty || refValue.current !== '') {
-        var _props$onBlurChange;
-        (_props$onBlurChange = props.onBlurChange) === null || _props$onBlurChange === void 0 ? void 0 : _props$onBlurChange.call(props, refValue.current);
+        onChange === null || onChange === void 0 ? void 0 : onChange(refValue.current, e);
       } else {
-        setLocalValue(props.value);
+        setLocalValue(value);
       }
     }
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-  }, [props.value, props.onBlurChange, onBlur]);
-  var halfControlledProps = {
-    value: localValue,
-    onChange: handleChange,
-    onBlur: handleBlur
-  };
+  }, [value, onBlur]);
+  var halfControlledProps = (_halfControlledProps = {}, _defineProperty(_halfControlledProps, 'value' in props ? 'value' : 'defaultValue', localValue), _defineProperty(_halfControlledProps, "onChange", handleChange), _defineProperty(_halfControlledProps, "onBlur", handleBlur), _halfControlledProps);
   return /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({
     ref: ref,
-    className: classNames(className, {
-      'arco-input-borderless': !bordered
-    }),
     onPressEnter: handlePressEnter,
     onFocus: handleFocus
-  }, isHalfControlled ? halfControlledProps : isControlled ? {
+  }, changeOnBlur ? halfControlledProps : 'value' in props ? {
     value: value,
     onBlur: onBlur,
     onChange: onChange
   } : {
+    defaultValue: defaultValue,
     onBlur: onBlur,
     onChange: onChange
   }), restProps));
 });
 var InputSearch = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _ref$bordered = _ref.bordered,
-    bordered = _ref$bordered === void 0 ? true : _ref$bordered,
-    className = _ref.className,
-    onSearch = _ref.onSearch,
+  var onSearch = _ref.onSearch,
     restProps = _objectWithoutProperties(_ref, _excluded2);
   return /*#__PURE__*/_jsx(Input, _objectSpread({
     ref: ref,
-    className: classNames(className, {
-      'arco-input-borderless': !bordered
-    }),
     prefix: /*#__PURE__*/_jsx(SearchCircleOutlined, {}),
     onChange: onSearch,
     onPressEnter: function onPressEnter(e) {

package/dist/Input/interface.d.ts

@@ -2,9 +2,8 @@ import type { InputProps } from '@arco-design/web-react';
 import type { InputSearchProps, RefInputType } from '@arco-design/web-react/es/Input';
 interface XInputProps extends InputProps {
     enableEmpty?: boolean;
-    bordered?: boolean;
     autoSelect?: boolean;
-    onBlurChange?: (value: string) => void;
+    changeOnBlur?: boolean;
 }
 interface XInputSearchProps extends InputSearchProps {
     bordered?: boolean;

package/dist/InputNumber/PointDrag.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface PointDragProps {
+    children: React.ReactNode;
+    onMoveStart?: () => void;
+    onMove?: ({ movementX }: {
+        movementX: number;
+    }) => void;
+    onMoveEnd?: ({ movementX }: {
+        movementX: number;
+    }) => void;
+}
+export declare function PointerDrag({ children, onMoveStart, onMove, onMoveEnd, }: PointDragProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/InputNumber/PointDrag.js

@@ -0,0 +1,107 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { Fragment, cloneElement, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function PointerDrag(_ref) {
+  var children = _ref.children,
+    onMoveStart = _ref.onMoveStart,
+    onMove = _ref.onMove,
+    onMoveEnd = _ref.onMoveEnd;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    dragging = _useState2[0],
+    setDrag = _useState2[1];
+  var _useState3 = useState({
+      x: 0,
+      y: 0
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    position = _useState4[0],
+    setPosition = _useState4[1];
+  var windowSize = useMemo(function () {
+    return {
+      width: document.body.clientWidth,
+      height: document.body.clientHeight
+    };
+  }, []);
+  var moveDistance = useRef(0);
+  var onMouseDown = function onMouseDown(e) {
+    e.target.requestPointerLock();
+    setPosition({
+      x: e.clientX,
+      y: e.clientY
+    });
+    setDrag(true);
+    moveDistance.current = 0;
+    onMoveStart === null || onMoveStart === void 0 ? void 0 : onMoveStart();
+  };
+  var _onMouseMove = function onMouseMove(e) {
+    if (dragging) {
+      setPosition(function (prev) {
+        var nextX = prev.x + e.movementX;
+        nextX = nextX + 10 * windowSize.width % windowSize.width;
+        return {
+          x: nextX,
+          y: prev.y
+        };
+      });
+      // 记录移动距离
+      moveDistance.current = moveDistance.current + e.movementX;
+      onMove === null || onMove === void 0 ? void 0 : onMove({
+        movementX: moveDistance.current
+      });
+    } else if (Math.abs(e.movementX) >= 1 && e.buttons) {
+      onMouseDown(e);
+    }
+  };
+  var onMouseUp = function onMouseUp() {
+    if (dragging) {
+      document.exitPointerLock();
+      setDrag(false);
+      onMoveEnd === null || onMoveEnd === void 0 ? void 0 : onMoveEnd({
+        movementX: moveDistance.current
+      });
+    }
+  };
+  var arrow = /*#__PURE__*/_jsx("svg", {
+    width: 46,
+    height: 15,
+    style: {
+      position: 'fixed',
+      left: position.x,
+      top: position.y,
+      width: 46,
+      height: 15,
+      zIndex: 1,
+      transform: 'translate(-50%, -50%)'
+    },
+    children: /*#__PURE__*/_jsxs("g", {
+      transform: "translate(2 3)",
+      children: [/*#__PURE__*/_jsx("path", {
+        fillRule: "evenodd",
+        d: "M 15 4.5L 15 2L 11.5 5.5L 15 9L 15 6.5L 31 6.5L 31 9L 34.5 5.5L 31 2L 31 4.5Z",
+        stroke: "#fafafa",
+        style: {
+          strokeWidth: 2
+        }
+      }), /*#__PURE__*/_jsx("path", {
+        fillRule: "evenodd",
+        d: "M 15 4.5L 15 2L 11.5 5.5L 15 9L 15 6.5L 31 6.5L 31 9L 34.5 5.5L 31 2L 31 4.5Z"
+      })]
+    })
+  });
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [children && /*#__PURE__*/cloneElement(children, {
+      onMouseMove: function onMouseMove(e) {
+        e.persist();
+        _onMouseMove(e);
+      },
+      onMouseUp: onMouseUp
+    }), dragging && arrow]
+  });
+}

package/dist/InputNumber/index.d.ts

@@ -1,4 +1,6 @@
-import { InputNumber } from '@arco-design/web-react';
+/// <reference types="react" />
+import { InputNumberProps } from './interface';
 import './index.less';
+declare const InputNumber: import("react").ForwardRefExoticComponent<InputNumberProps & import("react").RefAttributes<unknown>>;
 export default InputNumber;
 export type * from './interface';

package/dist/InputNumber/index.js

@@ -1,3 +1,185 @@
-import { InputNumber } from '@arco-design/web-react';
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["min", "max", "step", "precision", "value", "defaultValue", "prefix", "suffix", "hideControl", "onChange"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { DownOutlined, UpOutlined } from '@easyv/react-icons';
+import Input from "../Input";
+import { getSafeValue, evaluateExpression } from "./util";
+import { PointerDrag } from "./PointDrag";
 import "./index.less";
+import classNames from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var valueRegx = /^[0-9().+\-*/]+$/;
+var InputNumber = /*#__PURE__*/forwardRef(function (props, ref) {
+  var min = props.min,
+    max = props.max,
+    _props$step = props.step,
+    step = _props$step === void 0 ? 1 : _props$step,
+    precision = props.precision,
+    value = props.value,
+    defaultValue = props.defaultValue,
+    prefix = props.prefix,
+    suffix = props.suffix,
+    hideControl = props.hideControl,
+    onChange = props.onChange,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var getPropsValue = function getPropsValue() {
+    if ('value' in props) {
+      return value === undefined ? value : value.toString();
+    } else {
+      return defaultValue === undefined ? defaultValue : defaultValue.toString();
+    }
+  };
+  var _useState = useState(getPropsValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    localValue = _useState2[0],
+    setLocalValue = _useState2[1];
+
+  // 给拖拽滑动改变数值使用
+  var dragRef = useRef(false);
+  var originValue = useRef();
+  useEffect(function () {
+    // 拖拽过程中禁止更新
+    if (!dragRef.current && value !== localValue) {
+      setLocalValue(getPropsValue());
+    }
+  }, [value]);
+
+  // 只允许输入数字和(.+-*/)
+  var handleChange = useCallback(function (value) {
+    if (value === '' || valueRegx.test(value)) {
+      setLocalValue(value);
+    }
+  }, []);
+  var handleBlur = function handleBlur() {
+    if (localValue !== undefined) {
+      var result = evaluateExpression(localValue);
+      if (isNaN(result)) {
+        setLocalValue(getPropsValue());
+        return;
+      }
+      result = getSafeValue(result, {
+        min: min,
+        max: max,
+        precision: precision
+      });
+      setLocalValue(result.toString());
+      if (result !== value) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(result);
+      }
+    }
+  };
+  var handleMoveStart = function handleMoveStart() {
+    dragRef.current = true;
+    var initValue = getPropsValue();
+    originValue.current = initValue === undefined ? undefined : isNaN(Number(initValue)) ? undefined : Number(initValue);
+  };
+  var handlePointMove = function handlePointMove(_ref) {
+    var movementX = _ref.movementX;
+    var initNumberValue = originValue.current;
+    if (initNumberValue === undefined) {
+      initNumberValue = 0;
+    }
+    var result = initNumberValue + Math.floor(movementX / 2) * step;
+    result = getSafeValue(result, {
+      min: min,
+      max: max,
+      precision: precision
+    });
+    setLocalValue(result.toString());
+    if (result !== originValue.current) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(result);
+    }
+  };
+  var handlePointMoveEnd = function handlePointMoveEnd() {
+    dragRef.current = false;
+  };
+  var handleCountUp = function handleCountUp() {
+    if (props.disabled) {
+      return;
+    }
+    var result = localValue === undefined ? 0 : isNaN(Number(localValue)) ? 0 : Number(localValue);
+    result += step;
+    result = getSafeValue(result, {
+      min: min,
+      max: max,
+      precision: precision
+    });
+    setLocalValue(result.toString());
+    if (result !== value) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(result);
+    }
+  };
+  var handleCountDown = function handleCountDown() {
+    if (props.disabled) {
+      return;
+    }
+    var result = localValue === undefined ? 0 : isNaN(Number(localValue)) ? 0 : Number(localValue);
+    result -= step;
+    result = getSafeValue(result, {
+      min: min,
+      max: max,
+      precision: precision
+    });
+    setLocalValue(result.toString());
+    if (result !== value) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(result);
+    }
+  };
+  return /*#__PURE__*/_jsx(Input, _objectSpread({
+    autoSelect: true,
+    ref: ref,
+    className: "arco-input-number",
+    onChange: handleChange,
+    onBlur: handleBlur,
+    value: localValue,
+    prefix: !props.disabled && !props.readOnly ? /*#__PURE__*/_jsx(PointerDrag, {
+      onMoveStart: handleMoveStart,
+      onMove: handlePointMove,
+      onMoveEnd: handlePointMoveEnd,
+      children: /*#__PURE__*/_jsx("span", {
+        className: "arco-input-number-prefix-inner",
+        children: prefix
+      })
+    }) : /*#__PURE__*/_jsx("span", {
+      className: "arco-input-number-prefix-inner",
+      children: prefix
+    }),
+    suffix: /*#__PURE__*/_jsxs("div", {
+      className: "arco-input-number-suffix-inner",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "arco-input-number-suffix-icon",
+        children: suffix
+      }), !hideControl && !props.disabled && !props.readOnly && /*#__PURE__*/_jsxs("div", {
+        className: "arco-input-number-step",
+        children: [/*#__PURE__*/_jsx("span", {
+          className: classNames('arco-input-number-handle-up', {
+            'arco-input-number-handle-disabled': localValue !== undefined && max !== undefined && +localValue >= max
+          }),
+          onClick: handleCountUp,
+          children: /*#__PURE__*/_jsx(UpOutlined, {})
+        }), /*#__PURE__*/_jsx("span", {
+          className: classNames('arco-input-number-handle-down', {
+            'arco-input-number-handle-disabled': localValue !== undefined && min !== undefined && +localValue <= min
+          }),
+          onClick: handleCountDown,
+          children: /*#__PURE__*/_jsx(DownOutlined, {})
+        })]
+      })]
+    })
+  }, restProps));
+});
 export default InputNumber;

package/dist/InputNumber/index.less

@@ -0,0 +1,93 @@
+.arco-input-number {
+  &.arco-input-group-wrapper {
+    --input-height: 30px;
+    --input-step-top: 4px;
+
+    &.arco-input-group-wrapper-mini {
+      --input-height: 22px;
+      --input-step-top: 1px;
+    }
+
+    &.arco-input-group-wrapper-small {
+      --input-height: 26px;
+      --input-step-top: 2px;
+    }
+
+    &.arco-input-group-wrapper-large {
+      --input-height: 34px;
+      --input-step-top: 8px;
+    }
+
+    .arco-input-inner-wrapper {
+      padding-left: 0;
+
+      .arco-input {
+        padding-left: 0;
+      }
+    }
+
+    .arco-input-inner-wrapper-focus {
+      .arco-input-number-step {
+        background-color: var(--color-fill-1);
+      }
+
+      .arco-input-number-suffix-icon {
+        display: none;
+      }
+    }
+
+    .arco-input-number-prefix-inner {
+      cursor: ew-resize;
+      display: flex;
+      align-items: center;
+      min-height: var(--input-height);
+      padding-left: 12px;
+      padding-right: 12px;
+
+      &:empty {
+        padding-left: 6px;
+        padding-right: 6px;
+      }
+    }
+
+    .arco-input-number-step {
+      position: absolute;
+      right: 6px;
+      top: var(--input-step-top);
+      display: flex;
+      flex-direction: column;
+      width: 18px;
+      text-align: center;
+      font-size: 12px;
+      opacity: 0;
+
+      .arco-input-number-handle-up,
+      .arco-input-number-handle-down {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: calc((var(--input-height) - var(--input-step-top) * 2) / 2);
+        cursor: pointer;
+
+        &.arco-input-number-handle-disabled {
+          cursor: not-allowed;
+        }
+
+        &:not(.arco-input-number-handle-disabled):hover {
+          background-color: var(--color-fill-2);
+        }
+      }
+    }
+
+    &:hover {
+      .arco-input-number-step {
+        opacity: 1;
+        transition: all opacity 0.3s;
+      }
+
+      .arco-input-number-suffix-icon {
+        display: none;
+      }
+    }
+  }
+}

package/dist/InputNumber/interface.d.ts

@@ -1 +1,6 @@
-export type { InputNumberProps } from '@arco-design/web-react';
+import type { InputNumberProps } from '@arco-design/web-react';
+interface XInputNumberProps extends Omit<InputNumberProps, 'value' | 'defaultValue' | 'onKeyDown' | 'formatter' | 'parser' | 'strictMode' | 'mode' | 'icons'> {
+    value?: number;
+    defaultValue?: number;
+}
+export { XInputNumberProps as InputNumberProps };

package/dist/InputNumber/util.d.ts

@@ -0,0 +1,8 @@
+export declare function evaluateExpression(exporssion: string): number;
+interface SafeOptions {
+    min?: number;
+    max?: number;
+    precision?: number;
+}
+export declare function getSafeValue(value: number, { min, max, precision }: SafeOptions): number;
+export {};

package/dist/InputNumber/util.js

@@ -0,0 +1,31 @@
+export function evaluateExpression(exporssion) {
+  try {
+    // eslint-disable-next-line no-eval
+    return +eval(exporssion);
+  } catch (e) {
+    return NaN;
+  }
+}
+export function getSafeValue(value, _ref) {
+  var min = _ref.min,
+    max = _ref.max,
+    precision = _ref.precision;
+  // 处理精度问题，如0.1 + 0.2 !== 0.3，不过这是比较简单的处理方式，还是会有异常情况，如需准确，需要引入第三方库
+  var result = parseFloat(value.toFixed(12));
+  if (min !== undefined && result < min) {
+    result = min;
+  }
+  if (max !== undefined && result > max) {
+    result = max;
+  }
+
+  // if (step !== undefined) {
+  //   result = Math.round(result / step) * step;
+  // }
+
+  result = parseFloat(result.toFixed(12));
+  if (precision !== undefined) {
+    result = Number(result.toFixed(precision));
+  }
+  return result;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/react-components",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "a react component library base on arco design",
   "license": "MIT",
   "module": "dist/index.js",