@easyv/react-components 0.3.6 → 0.3.7

package/dist/Input/index.js

@@ -1,6 +1,7 @@
 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 = ["value", "defaultValue", "enableEmpty", "autoSelect", "changeOnBlur", "bordered", "className", "onPressEnter", "onFocus", "onBlur", "onChange"],
-  _excluded2 = ["onSearch"];
+  _excluded2 = ["onSearch"],
+  _excluded3 = ["value", "defaultValue", "changeOnBlur", "bordered", "className", "onPressEnter", "onFocus", "onBlur", "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; }
@@ -17,8 +18,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { Input } from '@arco-design/web-react';
 import { SearchCircleOutlined } from '@easyv/react-icons';
-import "./index.less";
 import classNames from 'classnames';
+import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 var XInput = /*#__PURE__*/forwardRef(function (props, ref) {
   var _halfControlledProps;
@@ -109,8 +110,77 @@ var InputSearch = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onChange: onSearch
   }, restProps));
 });
+var InputTextArea = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _halfControlledProps2;
+  var value = props.value,
+    defaultValue = props.defaultValue,
+    changeOnBlur = props.changeOnBlur,
+    _props$bordered2 = props.bordered,
+    bordered = _props$bordered2 === void 0 ? true : _props$bordered2,
+    className = props.className,
+    onPressEnter = props.onPressEnter,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    onChange = props.onChange,
+    restProps = _objectWithoutProperties(props, _excluded3);
+
+  // 用于 changeOnBlur 为 true 的模式，组件内存储，在失焦的时候，提交这个值
+  var _useState3 = useState('value' in props ? value : defaultValue),
+    _useState4 = _slicedToArray(_useState3, 2),
+    localValue = _useState4[0],
+    setLocalValue = _useState4[1];
+
+  // 为了让 onBlur 函数不要每次值更新都生成新的函数引用，这里用 ref 缓存 localValue 值，这样 onBlur 函数可以不依赖 localValue 的更新，直接在需要的时候读取 ref 的值
+  var refValue = useRef(localValue);
+  refValue.current = localValue;
+  useEffect(function () {
+    // 只在 changeOnBlur 为 true 的时候 value 变化才更新，防止 changeOnBlur 为 false 时不需要这个值，更新过于频繁
+    if (changeOnBlur && value !== localValue) {
+      setLocalValue(value);
+    }
+  }, [value, changeOnBlur]);
+
+  // 修改组件库的默认行为：按回车失去焦点
+  var handlePressEnter = useCallback(function (e) {
+    e.currentTarget.blur();
+    onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter(e);
+  }, [onPressEnter]);
+
+  // changeOnBlur 为 true 模式下，修改的值存本地
+  var handleChange = useCallback(function (value) {
+    setLocalValue(value);
+  }, [onChange]);
+
+  // changeOnBlur 为 true 模式下，失去焦点的时候才提交值的修改
+  var handleBlur = useCallback(function (e) {
+    if (refValue.current !== undefined && refValue.current !== value) {
+      if (refValue.current !== '') {
+        onChange === null || onChange === void 0 ? void 0 : onChange(refValue.current, e);
+      } else {
+        setLocalValue(value);
+      }
+    }
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+  }, [value, onBlur]);
+  var halfControlledProps = (_halfControlledProps2 = {}, _defineProperty(_halfControlledProps2, 'value' in props ? 'value' : 'defaultValue', localValue), _defineProperty(_halfControlledProps2, "onChange", handleChange), _defineProperty(_halfControlledProps2, "onBlur", handleBlur), _halfControlledProps2);
+  return /*#__PURE__*/_jsx(Input.TextArea, _objectSpread(_objectSpread({
+    ref: ref,
+    onPressEnter: handlePressEnter,
+    className: classNames({
+      'arco-textarea-borderless': !bordered
+    }, className)
+  }, changeOnBlur ? halfControlledProps : 'value' in props ? {
+    value: value,
+    onBlur: onBlur,
+    onChange: onChange
+  } : {
+    defaultValue: defaultValue,
+    onBlur: onBlur,
+    onChange: onChange
+  }), restProps));
+});
 export default XInput;
 XInput.Search = InputSearch;
-XInput.TextArea = Input.TextArea;
+XInput.TextArea = InputTextArea;
 XInput.Password = Input.Password;
 XInput.Group = Input.Group;

package/dist/Input/index.less

@@ -89,3 +89,10 @@
 input.arco-input {
   line-height: 1.5;
 }
+
+.arco-textarea {
+  &.arco-textarea-borderless {
+    border: none;
+    box-shadow: none;
+  }
+}

package/dist/Input/interface.d.ts

@@ -1,16 +1,19 @@
 import type { InputProps } from '@arco-design/web-react';
-import type { InputSearchProps, RefInputType } from '@arco-design/web-react/es/Input';
-interface XInputProps extends InputProps {
+import type { InputSearchProps, RefInputType, RefTextAreaType, TextAreaProps } from '@arco-design/web-react/es/Input';
+interface BaseInputProps {
+    /** 显示边框 */
+    bordered?: boolean;
+    /**  是否失去焦点时，触发 onChange 事件 */
+    changeOnBlur?: boolean;
+}
+interface XInputProps extends InputProps, BaseInputProps {
     /**  是否允许文本为空 */
     enableEmpty?: boolean;
     /**  是否聚焦后自动选中输入框的文本 */
     autoSelect?: boolean;
-    /**  是否失去焦点时，触发 onChange 事件 */
-    changeOnBlur?: boolean;
-    /** 显示边框 */
-    bordered?: boolean;
 }
-interface XInputSearchProps extends InputSearchProps {
-    bordered?: boolean;
+interface XInputSearchProps extends InputSearchProps, BaseInputProps {
+}
+interface XTextAreaProps extends TextAreaProps, BaseInputProps {
 }
-export type { XInputProps as InputProps, XInputSearchProps as InputSearchProps, RefInputType, };
+export type { XInputProps as InputProps, XInputSearchProps as InputSearchProps, RefInputType, RefTextAreaType, XTextAreaProps as TextAreaProps, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/react-components",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "a react component library base on arco design",
   "license": "MIT",
   "sideEffects": [