@sheinx/base 3.8.0-beta.5 → 3.8.0-beta.8

package/esm/input/simple-input.js

@@ -9,14 +9,14 @@ 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 { useInput, useKeyEvent, usePersistFn, util } from '@sheinx/hooks';
 import classNames from 'classnames';
-import React, { useContext } from 'react';
+import React, { useContext, useRef } from 'react';
 import Icons from "../icons";
 import { useConfig } from "../config";
 import { FormFieldContext } from "../form/form-field-context";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Input = function Input(props) {
-  var _jssStyle$input;
+  var _jssStyle$input, _inputElProps$value;
   var jssStyle = props.jssStyle,
     className = props.className,
     style = props.style,
@@ -34,20 +34,41 @@ var Input = function Input(props) {
     addEnd = props.addEnd,
     hasSuffix = props.hasSuffix,
     rest = _objectWithoutProperties(props, _excluded);
+  var _useRef = useRef({
+      needTriggerEnter: false
+    }),
+    context = _useRef.current;
   var inputStyle = jssStyle === null || jssStyle === void 0 || (_jssStyle$input = jssStyle.input) === null || _jssStyle$input === void 0 ? void 0 : _jssStyle$input.call(jssStyle);
   var config = useConfig();
   var _useContext = useContext(FormFieldContext),
     fieldId = _useContext.fieldId;
+  var showClearFromProp = props.showClear && !props.disabled;
   var _useInput = useInput(_objectSpread(_objectSpread({}, rest), {}, {
-      onFocusedChange: onFocusedChange
+      onFocusedChange: onFocusedChange,
+      // 由于form的原生submit事件是在keydown中触发的，submit校验后触发scrollToError会导致当前焦点的input立即失焦，导致input的回车事件无法触发
+      // 所以这里在onKeyDown时机记录下needTriggerEnter标志，在onBlur时机判断是否需要触发onEnterPress
+      onKeyDown: function onKeyDown(e) {
+        var _props$onKeyDown;
+        if (e.key === 'Enter') {
+          context.needTriggerEnter = true;
+        }
+        (_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 || _props$onKeyDown.call(props, e);
+      },
+      onBlur: function onBlur(e) {
+        var _props$onBlur;
+        if (context.needTriggerEnter) {
+          context.needTriggerEnter = false;
+          _onEnterPress === null || _onEnterPress === void 0 || _onEnterPress(e.target.value || '', e);
+        }
+        (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, e);
+      }
     })),
     getRootProps = _useInput.getRootProps,
     getClearProps = _useInput.getClearProps,
     getInputProps = _useInput.getInputProps,
-    showClear = _useInput.showClear,
+    showClearFromClearable = _useInput.showClear,
     focused = _useInput.focused,
     disabled = _useInput.disabled;
-  var rootClass = classNames(className, inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.rootClass, inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapper, !!focused && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperFocus), !!disabled && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperDisabled), status === 'error' && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperError), size === 'small' && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperSmall), size === 'large' && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperLarge), !!underline && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperUnderline), !border && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperNoBorder), hasSuffix && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.password));
   var keyHandler = useKeyEvent({
     onEnterPress: function onEnterPress(e) {
       _onEnterPress === null || _onEnterPress === void 0 || _onEnterPress(e.target.value || '', e);
@@ -55,6 +76,10 @@ var Input = function Input(props) {
   });
   var onKeyUp = usePersistFn(function (e) {
     var _props$onKeyUp;
+    if (e.key === 'Enter') {
+      context.needTriggerEnter = false;
+    }
+    ;
     (_props$onKeyUp = props.onKeyUp) === null || _props$onKeyUp === void 0 || _props$onKeyUp.call(props, e);
     keyHandler(e);
   });
@@ -71,6 +96,7 @@ var Input = function Input(props) {
   if (typeof renderInput === 'function') {
     inputEl = renderInput(inputEl);
   }
+  var rootClass = classNames(className, inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.rootClass, inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapper, !!focused && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperFocus), !!disabled && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperDisabled), status === 'error' && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperError), size === 'small' && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperSmall), size === 'large' && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperLarge), !!underline && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperUnderline), !border && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperNoBorder), hasSuffix && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.password), showClearFromProp && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperShowClear), showClearFromProp && ((_inputElProps$value = inputElProps.value) === null || _inputElProps$value === void 0 ? void 0 : _inputElProps$value.length) > 0 && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperHasValue));
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread(_objectSpread({
     id: fieldId
   }, util.getDataAttribute(_defineProperty({}, 'input-border', 'true'))), getRootProps({
@@ -79,7 +105,7 @@ var Input = function Input(props) {
   })), {}, {
     children: [/*#__PURE__*/_jsxs("div", {
       className: classNames(inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperInnerTitleTop, inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperInnerTitleBottom, inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperPaddingBox, inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.content),
-      children: [prefix, inputEl, showClear && /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+      children: [prefix, inputEl, (showClearFromProp || showClearFromClearable) && /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
         className: inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.clearWrapper
       }, getClearProps()), {}, {
         children: /*#__PURE__*/_jsx("span", {

package/esm/input/use-input-common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-input-common.d.ts","sourceRoot":"","sources":["use-input-common.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAOvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAWhD,QAAA,MAAM,cAAc;;;;;;;;;;gCA6G8B,OAAO;;;;;;;gBAQnB,gBAAgB,CAAC,gBAAgB,CAAC;CAsBvE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"use-input-common.d.ts","sourceRoot":"","sources":["use-input-common.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAOvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAWhD,QAAA,MAAM,cAAc;;;;;;;;;;gCAkI8B,OAAO;;;;;;;gBAQnB,gBAAgB,CAAC,gBAAgB,CAAC;CAsBvE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/esm/input/use-input-common.js

@@ -1,5 +1,5 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["forwardRef", "forwardedRef", "htmlName", "value", "onChange", "defaultValue", "beforeChange", "clearable", "clearToUndefined", "style", "suffix", "info", "innerTitle", "placeTitle", "width", "delay", "onBlur", "tip", "error", "popover", "popoverProps", "status", "disabled", "size"];
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; }
@@ -30,7 +30,7 @@ var defaultInfo = function defaultInfo(num, msg) {
   return new Error(text);
 };
 var useInputCommon = function useInputCommon(props0) {
-  var _ref, _props$jssStyle, _props$jssStyle$input;
+  var _ref, _props$jssStyle, _props$jssStyle$input, _infoState$error;
   var config = useConfig();
   var props = useWithFormConfig(props0);
   var forwardRef = props.forwardRef,
@@ -59,7 +59,7 @@ var useInputCommon = function useInputCommon(props0) {
     size = props.size,
     rest = _objectWithoutProperties(props, _excluded);
   var delay = (_ref = delayProps !== null && delayProps !== void 0 ? delayProps : config.delay) !== null && _ref !== void 0 ? _ref : 0;
-  var inputStyle = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 || (_props$jssStyle$input = _props$jssStyle.input) === null || _props$jssStyle$input === void 0 ? void 0 : _props$jssStyle$input.call(_props$jssStyle);
+  var inputClasses = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 || (_props$jssStyle$input = _props$jssStyle.input) === null || _props$jssStyle$input === void 0 ? void 0 : _props$jssStyle$input.call(_props$jssStyle);
   var rootRef = React.useRef(null);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -101,27 +101,50 @@ var useInputCommon = function useInputCommon(props0) {
     value: inputAbleProps.value,
     onChange: inputAbleProps.onChange
   });
-  var getInfo = function getInfo() {
+  var getInfoState = function getInfoState() {
     var notNumber = typeof info !== 'number';
-    if (typeof info !== 'function' && notNumber) return null;
-    var textInfo = notNumber ? info : defaultInfo.bind(null, info);
-    var res = textInfo(inputAbleProps.value);
-    // empty
-    if (!res) return null;
-    var isError = res instanceof Error;
-    var text = isError ? res.message : res;
+    if (typeof info !== 'function' && _typeof(info) !== 'object' && notNumber) return null;
+    var infoContent;
+    if (_typeof(info) === 'object') {
+      infoContent = info.content;
+    } else {
+      infoContent = info;
+    }
+    var notContentNumber = typeof infoContent !== 'number';
+    var textInfo = notContentNumber ? infoContent : defaultInfo.bind(null, infoContent);
+    var error = textInfo(inputAbleProps.value);
+    if (!error) return null;
+    var isError = error instanceof Error;
+    var text = isError ? error.message : error;
     if (!isError && !focused) return null;
-    return /*#__PURE__*/_jsx("div", {
+    return {
+      text: text,
+      error: error
+    };
+  };
+  var infoState = useMemo(getInfoState, [info, inputAbleProps.value, focused]);
+  var infoPopoverProps = {
+    popover: props.popover || (_typeof(info) === 'object' ? info.position : 'bottom-right'),
+    popoverProps: Object.assign({
       style: {
-        minWidth: 'auto'
+        width: 'auto',
+        fontSize: 12
       },
-      className: classNames(inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.info, !!isError && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.infoError)),
-      dir: config.direction,
-      children: text
-    }, 'info');
+      adjust: true
+    }, props.popoverProps),
+    error: infoState !== null && infoState !== void 0 && infoState.error && (infoState === null || infoState === void 0 ? void 0 : infoState.error) instanceof Error ? infoState === null || infoState === void 0 || (_infoState$error = infoState.error) === null || _infoState$error === void 0 ? void 0 : _infoState$error.message : undefined,
+    tip: /*#__PURE__*/_jsx("div", {
+      className: inputClasses === null || inputClasses === void 0 ? void 0 : inputClasses.info,
+      children: infoState === null || infoState === void 0 ? void 0 : infoState.text
+    })
   };
+  var infoPopoverNode = useTip(_objectSpread(_objectSpread({}, infoPopoverProps), {}, {
+    focused: focused,
+    rootRef: rootRef,
+    jssStyle: props.jssStyle
+  }));
   var mergeSuffix = /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [suffix, getInfo(), tipNode]
+    children: [suffix, (infoState === null || infoState === void 0 ? void 0 : infoState.text) && infoPopoverNode, tipNode]
   });
   var onFocusedChange = usePersistFn(function (focused) {
     setFocused(!!focused);
@@ -137,7 +160,7 @@ var useInputCommon = function useInputCommon(props0) {
   });
   return _objectSpread(_objectSpread(_objectSpread({}, rest), {}, {
     value: inputAbleProps.value,
-    className: classNames(props.className, innerTitle && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.wrapperInnerTitle)),
+    className: classNames(props.className, innerTitle && (inputClasses === null || inputClasses === void 0 ? void 0 : inputClasses.wrapperInnerTitle)),
     onChange: inputAbleProps.onChange,
     onBlur: handleBlur
   }, clearProps), {}, {

package/esm/textarea/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;;AA6NhD,wBAAoC"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;;AA8NhD,wBAAoC"}

package/esm/textarea/textarea.js

@@ -156,7 +156,8 @@ var Textarea = function Textarea(props0) {
       style: {
         width: 'auto',
         fontSize: 12
-      }
+      },
+      adjust: true
     }, resetProps.popoverProps),
     error: infoState !== null && infoState !== void 0 && infoState.error && (infoState === null || infoState === void 0 ? void 0 : infoState.error) instanceof Error ? infoState === null || infoState === void 0 || (_infoState$error = infoState.error) === null || _infoState$error === void 0 ? void 0 : _infoState$error.message : undefined,
     tip: /*#__PURE__*/_jsx("div", {

package/esm/transfer/transfer-list.js

@@ -147,7 +147,7 @@ var TransferList = function TransferList(props) {
       className: styles.inputWrapper,
       children: /*#__PURE__*/_jsx(Input, {
         className: styles.input,
-        clearable: true,
+        showClear: true,
         jssStyle: jssStyle,
         value: filterText,
         suffix: Icons.transfer.Search,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sheinx/base",
-  "version": "3.8.0-beta.5",
+  "version": "3.8.0-beta.8",
   "description": "",
   "keywords": [],
   "license": "MIT",
@@ -10,7 +10,7 @@
   "module": "./esm/index.js",
   "typings": "./cjs/index.d.ts",
   "dependencies": {
-    "@sheinx/hooks": "3.8.0-beta.5",
+    "@sheinx/hooks": "3.8.0-beta.8",
     "immer": "^10.0.0",
     "classnames": "^2.0.0",
     "@shined/reactive": "^0.1.3-alpha.0"