rc-input - npm Package Compare versions

Comparing version 1.3.11 to 1.4.0

es/BaseInput.js

@@ -0,3 +1,3 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
@@ -9,4 +9,5 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";
 var BaseInput = function BaseInput(props) {
-  var _inputElement$props, _inputElement$props2;
-  var inputElement = props.inputElement,
+  var _element$props, _element$props2;
+  var inputEl = props.inputElement,
+    children = props.children,
     prefixCls = props.prefixCls,
@@ -32,2 +33,3 @@ prefix = props.prefix,
     components = props.components;
+  var inputElement = children !== null && children !== void 0 ? children : inputEl;
   var AffixWrapperComponent = (components === null || components === void 0 ? void 0 : components.affixWrapper) || 'span';
@@ -44,30 +46,4 @@ var GroupWrapperComponent = (components === null || components === void 0 ? void 0 : components.groupWrapper) || 'span';
   };
-
-  // ================== Clear Icon ================== //
-  var getClearIcon = function getClearIcon() {
-    var _clsx;
-    if (!allowClear) {
-      return null;
-    }
-    var needClear = !disabled && !readOnly && value;
-    var clearIconCls = "".concat(prefixCls, "-clear-icon");
-    var iconNode = _typeof(allowClear) === 'object' && allowClear !== null && allowClear !== void 0 && allowClear.clearIcon ? allowClear.clearIcon : '✖';
-    return /*#__PURE__*/React.createElement("span", {
-      onClick: handleReset
-      // Do not trigger onBlur when clear input
-      // https://github.com/ant-design/ant-design/issues/31200
-      ,
-      onMouseDown: function onMouseDown(e) {
-        return e.preventDefault();
-      },
-      className: clsx(clearIconCls, (_clsx = {}, _defineProperty(_clsx, "".concat(clearIconCls, "-hidden"), !needClear), _defineProperty(_clsx, "".concat(clearIconCls, "-has-suffix"), !!suffix), _clsx)),
-      role: "button",
-      tabIndex: -1
-    }, iconNode);
-  };
   var element = /*#__PURE__*/cloneElement(inputElement, {
-    value: value,
-    hidden: hidden,
-    className: clsx((_inputElement$props = inputElement.props) === null || _inputElement$props === void 0 ? void 0 : _inputElement$props.className, !hasPrefixSuffix(props) && !hasAddon(props) && className) || null,
-    style: _objectSpread(_objectSpread({}, (_inputElement$props2 = inputElement.props) === null || _inputElement$props2 === void 0 ? void 0 : _inputElement$props2.style), !hasPrefixSuffix(props) && !hasAddon(props) ? style : {})
+    value: value
   });
@@ -78,12 +54,31 @@
     var _clsx2;
+    // ================== Clear Icon ================== //
+    var clearIcon = null;
+    if (allowClear) {
+      var _clsx;
+      var needClear = !disabled && !readOnly && value;
+      var clearIconCls = "".concat(prefixCls, "-clear-icon");
+      var iconNode = _typeof(allowClear) === 'object' && allowClear !== null && allowClear !== void 0 && allowClear.clearIcon ? allowClear.clearIcon : '✖';
+      clearIcon = /*#__PURE__*/React.createElement("span", {
+        onClick: handleReset
+        // Do not trigger onBlur when clear input
+        // https://github.com/ant-design/ant-design/issues/31200
+        ,
+        onMouseDown: function onMouseDown(e) {
+          return e.preventDefault();
+        },
+        className: clsx(clearIconCls, (_clsx = {}, _defineProperty(_clsx, "".concat(clearIconCls, "-hidden"), !needClear), _defineProperty(_clsx, "".concat(clearIconCls, "-has-suffix"), !!suffix), _clsx)),
+        role: "button",
+        tabIndex: -1
+      }, iconNode);
+    }
     var affixWrapperPrefixCls = "".concat(prefixCls, "-affix-wrapper");
-    var affixWrapperCls = clsx(affixWrapperPrefixCls, (_clsx2 = {}, _defineProperty(_clsx2, "".concat(affixWrapperPrefixCls, "-disabled"), disabled), _defineProperty(_clsx2, "".concat(affixWrapperPrefixCls, "-focused"), focused), _defineProperty(_clsx2, "".concat(affixWrapperPrefixCls, "-readonly"), readOnly), _defineProperty(_clsx2, "".concat(affixWrapperPrefixCls, "-input-with-clear-btn"), suffix && allowClear && value), _clsx2), !hasAddon(props) && className, classes === null || classes === void 0 ? void 0 : classes.affixWrapper, classNames === null || classNames === void 0 ? void 0 : classNames.affixWrapper);
+    var affixWrapperCls = clsx(affixWrapperPrefixCls, (_clsx2 = {}, _defineProperty(_clsx2, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_clsx2, "".concat(affixWrapperPrefixCls, "-disabled"), disabled), _defineProperty(_clsx2, "".concat(affixWrapperPrefixCls, "-focused"), focused), _defineProperty(_clsx2, "".concat(affixWrapperPrefixCls, "-readonly"), readOnly), _defineProperty(_clsx2, "".concat(affixWrapperPrefixCls, "-input-with-clear-btn"), suffix && allowClear && value), _clsx2), classes === null || classes === void 0 ? void 0 : classes.affixWrapper, classNames === null || classNames === void 0 ? void 0 : classNames.affixWrapper);
     var suffixNode = (suffix || allowClear) && /*#__PURE__*/React.createElement("span", {
       className: clsx("".concat(prefixCls, "-suffix"), classNames === null || classNames === void 0 ? void 0 : classNames.suffix),
       style: styles === null || styles === void 0 ? void 0 : styles.suffix
-    }, getClearIcon(), suffix);
+    }, clearIcon, suffix);
     element = /*#__PURE__*/React.createElement(AffixWrapperComponent, _extends({
       className: affixWrapperCls,
-      style: _objectSpread(_objectSpread({}, !hasAddon(props) ? style : undefined), styles === null || styles === void 0 ? void 0 : styles.affixWrapper),
-      hidden: !hasAddon(props) && hidden,
+      style: styles === null || styles === void 0 ? void 0 : styles.affixWrapper,
       onClick: onInputClick
@@ -95,6 +90,3 @@ }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.affixWrapper, {
       style: styles === null || styles === void 0 ? void 0 : styles.prefix
-    }, prefix), /*#__PURE__*/cloneElement(inputElement, {
-      value: value,
-      hidden: null
-    }), suffixNode);
+    }, prefix), element, suffixNode);
   }
@@ -106,11 +98,9 @@
     var addonCls = "".concat(wrapperCls, "-addon");
-    var mergedWrapperClassName = clsx("".concat(prefixCls, "-wrapper"), wrapperCls, classes === null || classes === void 0 ? void 0 : classes.wrapper);
-    var mergedGroupClassName = clsx("".concat(prefixCls, "-group-wrapper"), className, classes === null || classes === void 0 ? void 0 : classes.group);
+    var mergedWrapperClassName = clsx("".concat(prefixCls, "-wrapper"), wrapperCls, classes === null || classes === void 0 ? void 0 : classes.wrapper, classNames === null || classNames === void 0 ? void 0 : classNames.wrapper);
+    var mergedGroupClassName = clsx("".concat(prefixCls, "-group-wrapper"), classes === null || classes === void 0 ? void 0 : classes.group, classNames === null || classNames === void 0 ? void 0 : classNames.groupWrapper);
 
     // Need another wrapper for changing display:table to display:inline-block
     // and put style prop in wrapper
-    return /*#__PURE__*/React.createElement(GroupWrapperComponent, {
-      className: mergedGroupClassName,
-      style: style,
-      hidden: hidden
+    element = /*#__PURE__*/React.createElement(GroupWrapperComponent, {
+      className: mergedGroupClassName
     }, /*#__PURE__*/React.createElement(WrapperComponent, {
@@ -120,10 +110,14 @@ className: mergedWrapperClassName
       className: addonCls
-    }, addonBefore), /*#__PURE__*/cloneElement(element, {
-      hidden: null
-    }), addonAfter && /*#__PURE__*/React.createElement(GroupAddonComponent, {
+    }, addonBefore), element, addonAfter && /*#__PURE__*/React.createElement(GroupAddonComponent, {
       className: addonCls
     }, addonAfter)));
   }
-  return element;
+
+  // `className` and `style` are always on the root element
+  return /*#__PURE__*/React.cloneElement(element, {
+    className: clsx((_element$props = element.props) === null || _element$props === void 0 ? void 0 : _element$props.className, className) || null,
+    style: _objectSpread(_objectSpread({}, (_element$props2 = element.props) === null || _element$props2 === void 0 ? void 0 : _element$props2.style), style),
+    hidden: hidden
+  });
 };
 export default BaseInput;

es/Input.js

@@ -196,3 +196,2 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
     className: clsx(className, outOfRangeCls),
-    inputElement: getInputElement(),
     handleReset: handleReset,
@@ -207,4 +206,4 @@ value: formatValue,
     styles: styles
-  }));
+  }), getInputElement());
 });
 export default Input;

es/interface.d.ts

@@ -19,2 +19,4 @@ import type { CSSProperties, InputHTMLAttributes, KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';
         suffix?: string;
+        groupWrapper?: string;
+        wrapper?: string;
     };
@@ -34,3 +36,4 @@ styles?: {
     value?: ValueType;
-    inputElement: ReactElement;
+    /** @deprecated Use `children` instead */
+    inputElement?: ReactElement;
     prefixCls?: string;
@@ -54,2 +57,3 @@ className?: string;
     };
+    children: ReactElement;
 }
@@ -56,0 +60,0 @@ export type ShowCountFormatter = (args: {

lib/BaseInput.js

@@ -9,4 +9,4 @@ "use strict";
 exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -20,4 +20,5 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var BaseInput = function BaseInput(props) {
-  var _inputElement$props, _inputElement$props2;
-  var inputElement = props.inputElement,
+  var _element$props, _element$props2;
+  var inputEl = props.inputElement,
+    children = props.children,
     prefixCls = props.prefixCls,
@@ -43,2 +44,3 @@ prefix = props.prefix,
     components = props.components;
+  var inputElement = children !== null && children !== void 0 ? children : inputEl;
   var AffixWrapperComponent = (components === null || components === void 0 ? void 0 : components.affixWrapper) || 'span';
@@ -55,30 +57,4 @@ var GroupWrapperComponent = (components === null || components === void 0 ? void 0 : components.groupWrapper) || 'span';
   };
-
-  // ================== Clear Icon ================== //
-  var getClearIcon = function getClearIcon() {
-    var _clsx;
-    if (!allowClear) {
-      return null;
-    }
-    var needClear = !disabled && !readOnly && value;
-    var clearIconCls = "".concat(prefixCls, "-clear-icon");
-    var iconNode = (0, _typeof2.default)(allowClear) === 'object' && allowClear !== null && allowClear !== void 0 && allowClear.clearIcon ? allowClear.clearIcon : '✖';
-    return /*#__PURE__*/_react.default.createElement("span", {
-      onClick: handleReset
-      // Do not trigger onBlur when clear input
-      // https://github.com/ant-design/ant-design/issues/31200
-      ,
-      onMouseDown: function onMouseDown(e) {
-        return e.preventDefault();
-      },
-      className: (0, _classnames.default)(clearIconCls, (_clsx = {}, (0, _defineProperty2.default)(_clsx, "".concat(clearIconCls, "-hidden"), !needClear), (0, _defineProperty2.default)(_clsx, "".concat(clearIconCls, "-has-suffix"), !!suffix), _clsx)),
-      role: "button",
-      tabIndex: -1
-    }, iconNode);
-  };
   var element = /*#__PURE__*/(0, _react.cloneElement)(inputElement, {
-    value: value,
-    hidden: hidden,
-    className: (0, _classnames.default)((_inputElement$props = inputElement.props) === null || _inputElement$props === void 0 ? void 0 : _inputElement$props.className, !(0, _commonUtils.hasPrefixSuffix)(props) && !(0, _commonUtils.hasAddon)(props) && className) || null,
-    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (_inputElement$props2 = inputElement.props) === null || _inputElement$props2 === void 0 ? void 0 : _inputElement$props2.style), !(0, _commonUtils.hasPrefixSuffix)(props) && !(0, _commonUtils.hasAddon)(props) ? style : {})
+    value: value
   });
@@ -89,12 +65,31 @@
     var _clsx2;
+    // ================== Clear Icon ================== //
+    var clearIcon = null;
+    if (allowClear) {
+      var _clsx;
+      var needClear = !disabled && !readOnly && value;
+      var clearIconCls = "".concat(prefixCls, "-clear-icon");
+      var iconNode = (0, _typeof2.default)(allowClear) === 'object' && allowClear !== null && allowClear !== void 0 && allowClear.clearIcon ? allowClear.clearIcon : '✖';
+      clearIcon = /*#__PURE__*/_react.default.createElement("span", {
+        onClick: handleReset
+        // Do not trigger onBlur when clear input
+        // https://github.com/ant-design/ant-design/issues/31200
+        ,
+        onMouseDown: function onMouseDown(e) {
+          return e.preventDefault();
+        },
+        className: (0, _classnames.default)(clearIconCls, (_clsx = {}, (0, _defineProperty2.default)(_clsx, "".concat(clearIconCls, "-hidden"), !needClear), (0, _defineProperty2.default)(_clsx, "".concat(clearIconCls, "-has-suffix"), !!suffix), _clsx)),
+        role: "button",
+        tabIndex: -1
+      }, iconNode);
+    }
     var affixWrapperPrefixCls = "".concat(prefixCls, "-affix-wrapper");
-    var affixWrapperCls = (0, _classnames.default)(affixWrapperPrefixCls, (_clsx2 = {}, (0, _defineProperty2.default)(_clsx2, "".concat(affixWrapperPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_clsx2, "".concat(affixWrapperPrefixCls, "-focused"), focused), (0, _defineProperty2.default)(_clsx2, "".concat(affixWrapperPrefixCls, "-readonly"), readOnly), (0, _defineProperty2.default)(_clsx2, "".concat(affixWrapperPrefixCls, "-input-with-clear-btn"), suffix && allowClear && value), _clsx2), !(0, _commonUtils.hasAddon)(props) && className, classes === null || classes === void 0 ? void 0 : classes.affixWrapper, classNames === null || classNames === void 0 ? void 0 : classNames.affixWrapper);
+    var affixWrapperCls = (0, _classnames.default)(affixWrapperPrefixCls, (_clsx2 = {}, (0, _defineProperty2.default)(_clsx2, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_clsx2, "".concat(affixWrapperPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_clsx2, "".concat(affixWrapperPrefixCls, "-focused"), focused), (0, _defineProperty2.default)(_clsx2, "".concat(affixWrapperPrefixCls, "-readonly"), readOnly), (0, _defineProperty2.default)(_clsx2, "".concat(affixWrapperPrefixCls, "-input-with-clear-btn"), suffix && allowClear && value), _clsx2), classes === null || classes === void 0 ? void 0 : classes.affixWrapper, classNames === null || classNames === void 0 ? void 0 : classNames.affixWrapper);
     var suffixNode = (suffix || allowClear) && /*#__PURE__*/_react.default.createElement("span", {
       className: (0, _classnames.default)("".concat(prefixCls, "-suffix"), classNames === null || classNames === void 0 ? void 0 : classNames.suffix),
       style: styles === null || styles === void 0 ? void 0 : styles.suffix
-    }, getClearIcon(), suffix);
+    }, clearIcon, suffix);
     element = /*#__PURE__*/_react.default.createElement(AffixWrapperComponent, (0, _extends2.default)({
       className: affixWrapperCls,
-      style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, !(0, _commonUtils.hasAddon)(props) ? style : undefined), styles === null || styles === void 0 ? void 0 : styles.affixWrapper),
-      hidden: !(0, _commonUtils.hasAddon)(props) && hidden,
+      style: styles === null || styles === void 0 ? void 0 : styles.affixWrapper,
       onClick: onInputClick
@@ -106,6 +101,3 @@ }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.affixWrapper, {
       style: styles === null || styles === void 0 ? void 0 : styles.prefix
-    }, prefix), /*#__PURE__*/(0, _react.cloneElement)(inputElement, {
-      value: value,
-      hidden: null
-    }), suffixNode);
+    }, prefix), element, suffixNode);
   }
@@ -117,11 +109,9 @@
     var addonCls = "".concat(wrapperCls, "-addon");
-    var mergedWrapperClassName = (0, _classnames.default)("".concat(prefixCls, "-wrapper"), wrapperCls, classes === null || classes === void 0 ? void 0 : classes.wrapper);
-    var mergedGroupClassName = (0, _classnames.default)("".concat(prefixCls, "-group-wrapper"), className, classes === null || classes === void 0 ? void 0 : classes.group);
+    var mergedWrapperClassName = (0, _classnames.default)("".concat(prefixCls, "-wrapper"), wrapperCls, classes === null || classes === void 0 ? void 0 : classes.wrapper, classNames === null || classNames === void 0 ? void 0 : classNames.wrapper);
+    var mergedGroupClassName = (0, _classnames.default)("".concat(prefixCls, "-group-wrapper"), classes === null || classes === void 0 ? void 0 : classes.group, classNames === null || classNames === void 0 ? void 0 : classNames.groupWrapper);
 
     // Need another wrapper for changing display:table to display:inline-block
     // and put style prop in wrapper
-    return /*#__PURE__*/_react.default.createElement(GroupWrapperComponent, {
-      className: mergedGroupClassName,
-      style: style,
-      hidden: hidden
+    element = /*#__PURE__*/_react.default.createElement(GroupWrapperComponent, {
+      className: mergedGroupClassName
     }, /*#__PURE__*/_react.default.createElement(WrapperComponent, {
@@ -131,10 +121,14 @@ className: mergedWrapperClassName
       className: addonCls
-    }, addonBefore), /*#__PURE__*/(0, _react.cloneElement)(element, {
-      hidden: null
-    }), addonAfter && /*#__PURE__*/_react.default.createElement(GroupAddonComponent, {
+    }, addonBefore), element, addonAfter && /*#__PURE__*/_react.default.createElement(GroupAddonComponent, {
       className: addonCls
     }, addonAfter)));
   }
-  return element;
+
+  // `className` and `style` are always on the root element
+  return /*#__PURE__*/_react.default.cloneElement(element, {
+    className: (0, _classnames.default)((_element$props = element.props) === null || _element$props === void 0 ? void 0 : _element$props.className, className) || null,
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (_element$props2 = element.props) === null || _element$props2 === void 0 ? void 0 : _element$props2.style), style),
+    hidden: hidden
+  });
 };
 var _default = exports.default = BaseInput;

lib/Input.js

@@ -206,3 +206,2 @@ "use strict";
     className: (0, _classnames.default)(className, outOfRangeCls),
-    inputElement: getInputElement(),
     handleReset: handleReset,
@@ -217,4 +216,4 @@ value: formatValue,
     styles: styles
-  }));
+  }), getInputElement());
 });
 var _default = exports.default = Input;

lib/interface.d.ts

@@ -19,2 +19,4 @@ import type { CSSProperties, InputHTMLAttributes, KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';
         suffix?: string;
+        groupWrapper?: string;
+        wrapper?: string;
     };
@@ -34,3 +36,4 @@ styles?: {
     value?: ValueType;
-    inputElement: ReactElement;
+    /** @deprecated Use `children` instead */
+    inputElement?: ReactElement;
     prefixCls?: string;
@@ -54,2 +57,3 @@ className?: string;
     };
+    children: ReactElement;
 }
@@ -56,0 +60,0 @@ export type ShowCountFormatter = (args: {

package.json

 {
   "name": "rc-input",
-  "version": "1.3.11",
+  "version": "1.4.0",
   "description": "React input component",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

67821

decreased by-0.05%

Lines of code

1205

decreased by-0.58%

No dependency changes