@easyv/react-components 0.0.12 → 0.0.13

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"],
+  _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,87 @@ 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 value = props.value,
+    defaultValue = props.defaultValue,
     enableEmpty = props.enableEmpty,
-    value = props.value,
     autoSelect = props.autoSelect,
-    onBlur = props.onBlur,
-    onFocus = props.onFocus,
-    onChange = props.onChange,
+    changeOnBlur = props.changeOnBlur,
     onPressEnter = props.onPressEnter,
-    onBlurChange = props.onBlurChange,
+    onFocus = props.onFocus,
     restProps = _objectWithoutProperties(props, _excluded);
-  var isHalfControlled = onBlurChange !== undefined;
-  var isControlled = ('value' in props);
-  var _useState = useState('value' in props ? props.value : undefined),
+  var onBlur = restProps.onBlur,
+    onChange = restProps.onChange;
+
+  // 用于 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]);
+  }, [value, onBlur]);
   var halfControlledProps = {
     value: localValue,
     onChange: handleChange,
     onBlur: handleBlur
   };
-  return /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsx(Input, _objectSpread({
     ref: ref,
-    className: classNames(className, {
-      'arco-input-borderless': !bordered
-    }),
     onPressEnter: handlePressEnter,
     onFocus: handleFocus
-  }, isHalfControlled ? halfControlledProps : isControlled ? {
-    value: value,
-    onBlur: onBlur,
-    onChange: onChange
-  } : {
-    onBlur: onBlur,
-    onChange: onChange
-  }), restProps));
+  }, changeOnBlur ? halfControlledProps : 'value' in props ? _objectSpread({
+    value: value
+  }, restProps) : _objectSpread({
+    defaultValue: defaultValue
+  }, 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/package.json

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