@uiw/react-input - npm Package Compare versions

Comparing version 4.3.1 to 4.4.0

lib/cjs/index.d.ts

@@ -11,10 +11,3 @@ import React from 'react';
 }
-export default class Input<T> extends React.Component<InputProps<T>> {
-    static defaultProps: InputProps<{}>;
-    private addonRef;
-    private inputRef;
-    componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: InputProps<T>): void;
-    computedInputPadding(): void;
-    render(): JSX.Element;
-}
+declare const _default: React.ForwardRefExoticComponent<InputProps<{}> & React.RefAttributes<HTMLInputElement>>;
+export default _default;

lib/cjs/index.js

 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -16,14 +18,4 @@
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _react = _interopRequireDefault(require("react"));
-
 var _classnames2 = _interopRequireDefault(require("classnames"));
@@ -33,88 +25,59 @@
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function InternalInput() {
+  var _classnames;
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var ref = arguments.length > 1 ? arguments[1] : undefined;
+  var _props$prefixCls = props.prefixCls,
+      prefixCls = _props$prefixCls === void 0 ? 'w-input' : _props$prefixCls,
+      className = props.className,
+      style = props.style,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'default' : _props$size,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'text' : _props$type,
+      _props$preIcon = props.preIcon,
+      preIcon = _props$preIcon === void 0 ? null : _props$preIcon,
+      addonAfter = props.addonAfter,
+      otherProps = (0, _objectWithoutProperties2.default)(props, ["prefixCls", "className", "style", "size", "type", "preIcon", "addonAfter"]);
 
-var Input = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(Input, _React$Component);
+  var inputRef = /*#__PURE__*/_react.default.createRef();
 
-  var _super = _createSuper(Input);
+  var addonRef = /*#__PURE__*/_react.default.createRef();
 
-  function Input() {
-    var _this;
+  (0, _react.useImperativeHandle)(ref, function () {
+    return inputRef.current;
+  });
+  var cls = (0, _classnames2.default)(prefixCls, className, (_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-").concat(size), size), (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-addon"), addonAfter), (0, _defineProperty2.default)(_classnames, "disabled", props.disabled), _classnames));
+  (0, _react.useEffect)(function () {
+    computedInputPadding();
+  });
 
-    (0, _classCallCheck2.default)(this, Input);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+  function computedInputPadding() {
+    if (addonRef.current && inputRef.current) {
+      var input = window && window.getComputedStyle(addonRef.current, null);
+      inputRef.current.style.paddingRight = "".concat(addonRef.current.clientWidth + parseInt(input.right, 10) * 2, "px");
     }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.addonRef = /*#__PURE__*/_react.default.createRef();
-    _this.inputRef = /*#__PURE__*/_react.default.createRef();
-    return _this;
   }
 
-  (0, _createClass2.default)(Input, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.computedInputPadding();
-    }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (nextProps !== this.props) {
-        this.computedInputPadding();
-      }
-    }
-  }, {
-    key: "computedInputPadding",
-    value: function computedInputPadding() {
-      if (this.addonRef.current && this.inputRef.current) {
-        var input = window.getComputedStyle(this.addonRef.current, null);
-        this.inputRef.current.style.paddingRight = "".concat(this.addonRef.current.clientWidth + parseInt(input.right, 10) * 2, "px");
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _classnames;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: cls,
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_reactIcon.default, {
+    type: preIcon
+  }), /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
+    ref: inputRef,
+    type: type
+  }, otherProps, {
+    className: (0, _classnames2.default)("".concat(prefixCls, "-inner"))
+  })), addonAfter && /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(prefixCls, "-addon-after"),
+    ref: addonRef
+  }, addonAfter));
+}
 
-      var _this$props = this.props,
-          prefixCls = _this$props.prefixCls,
-          className = _this$props.className,
-          style = _this$props.style,
-          size = _this$props.size,
-          type = _this$props.type,
-          preIcon = _this$props.preIcon,
-          addonAfter = _this$props.addonAfter,
-          props = (0, _objectWithoutProperties2.default)(_this$props, ["prefixCls", "className", "style", "size", "type", "preIcon", "addonAfter"]);
-      var cls = (0, _classnames2.default)(prefixCls, className, (_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-").concat(size), size), (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-addon"), addonAfter), (0, _defineProperty2.default)(_classnames, "disabled", this.props.disabled), _classnames));
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: cls,
-        style: style
-      }, /*#__PURE__*/_react.default.createElement(_reactIcon.default, {
-        type: preIcon
-      }), /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
-        ref: this.inputRef,
-        type: type
-      }, props, {
-        className: (0, _classnames2.default)("".concat(prefixCls, "-inner"))
-      })), addonAfter && /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(prefixCls, "-addon-after"),
-        ref: this.addonRef
-      }, addonAfter));
-    }
-  }]);
-  return Input;
-}(_react.default.Component);
+var _default = /*#__PURE__*/_react.default.forwardRef(InternalInput);
 
-exports.default = Input;
-Input.defaultProps = {
-  prefixCls: 'w-input',
-  preIcon: null,
-  type: 'text',
-  size: 'default'
-};
+exports.default = _default;
 module.exports = exports.default; 
 //# sourceMappingURL=index.js.map

lib/esm/index.d.ts

@@ -11,10 +11,3 @@ import React from 'react';
 }
-export default class Input<T> extends React.Component<InputProps<T>> {
-    static defaultProps: InputProps<{}>;
-    private addonRef;
-    private inputRef;
-    componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: InputProps<T>): void;
-    computedInputPadding(): void;
-    render(): JSX.Element;
-}
+declare const _default: React.ForwardRefExoticComponent<InputProps<{}> & React.RefAttributes<HTMLInputElement>>;
+export default _default;

lib/esm/index.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-import React from 'react';
+import React, { useEffect, useImperativeHandle } from 'react';
 import classnames from 'classnames';
@@ -19,85 +9,55 @@ import Icon from '@uiw/react-icon';
 
-var Input = /*#__PURE__*/function (_React$Component) {
-  _inherits(Input, _React$Component);
+function InternalInput() {
+  var _classnames;
 
-  var _super = _createSuper(Input);
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var ref = arguments.length > 1 ? arguments[1] : undefined;
 
-  function Input() {
-    var _this;
+  var _props$prefixCls = props.prefixCls,
+      prefixCls = _props$prefixCls === void 0 ? 'w-input' : _props$prefixCls,
+      className = props.className,
+      style = props.style,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'default' : _props$size,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'text' : _props$type,
+      _props$preIcon = props.preIcon,
+      preIcon = _props$preIcon === void 0 ? null : _props$preIcon,
+      addonAfter = props.addonAfter,
+      otherProps = _objectWithoutProperties(props, ["prefixCls", "className", "style", "size", "type", "preIcon", "addonAfter"]);
 
-    _classCallCheck(this, Input);
+  var inputRef = /*#__PURE__*/React.createRef();
+  var addonRef = /*#__PURE__*/React.createRef();
+  useImperativeHandle(ref, function () {
+    return inputRef.current;
+  });
+  var cls = classnames(prefixCls, className, (_classnames = {}, _defineProperty(_classnames, "".concat(prefixCls, "-").concat(size), size), _defineProperty(_classnames, "".concat(prefixCls, "-addon"), addonAfter), _defineProperty(_classnames, "disabled", props.disabled), _classnames));
+  useEffect(function () {
+    computedInputPadding();
+  });
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+  function computedInputPadding() {
+    if (addonRef.current && inputRef.current) {
+      var input = window && window.getComputedStyle(addonRef.current, null);
+      inputRef.current.style.paddingRight = "".concat(addonRef.current.clientWidth + parseInt(input.right, 10) * 2, "px");
     }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.addonRef = /*#__PURE__*/React.createRef();
-    _this.inputRef = /*#__PURE__*/React.createRef();
-    return _this;
   }
 
-  _createClass(Input, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.computedInputPadding();
-    }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (nextProps !== this.props) {
-        this.computedInputPadding();
-      }
-    }
-  }, {
-    key: "computedInputPadding",
-    value: function computedInputPadding() {
-      if (this.addonRef.current && this.inputRef.current) {
-        var input = window.getComputedStyle(this.addonRef.current, null);
-        this.inputRef.current.style.paddingRight = "".concat(this.addonRef.current.clientWidth + parseInt(input.right, 10) * 2, "px");
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _classnames;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls,
+    style: style
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: preIcon
+  }), /*#__PURE__*/React.createElement("input", _extends({
+    ref: inputRef,
+    type: type
+  }, otherProps, {
+    className: classnames("".concat(prefixCls, "-inner"))
+  })), addonAfter && /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-addon-after"),
+    ref: addonRef
+  }, addonAfter));
+}
 
-      var _this$props = this.props,
-          prefixCls = _this$props.prefixCls,
-          className = _this$props.className,
-          style = _this$props.style,
-          size = _this$props.size,
-          type = _this$props.type,
-          preIcon = _this$props.preIcon,
-          addonAfter = _this$props.addonAfter,
-          props = _objectWithoutProperties(_this$props, ["prefixCls", "className", "style", "size", "type", "preIcon", "addonAfter"]);
-
-      var cls = classnames(prefixCls, className, (_classnames = {}, _defineProperty(_classnames, "".concat(prefixCls, "-").concat(size), size), _defineProperty(_classnames, "".concat(prefixCls, "-addon"), addonAfter), _defineProperty(_classnames, "disabled", this.props.disabled), _classnames));
-      return /*#__PURE__*/React.createElement("div", {
-        className: cls,
-        style: style
-      }, /*#__PURE__*/React.createElement(Icon, {
-        type: preIcon
-      }), /*#__PURE__*/React.createElement("input", _extends({
-        ref: this.inputRef,
-        type: type
-      }, props, {
-        className: classnames("".concat(prefixCls, "-inner"))
-      })), addonAfter && /*#__PURE__*/React.createElement("span", {
-        className: "".concat(prefixCls, "-addon-after"),
-        ref: this.addonRef
-      }, addonAfter));
-    }
-  }]);
-
-  return Input;
-}(React.Component);
-
-Input.defaultProps = {
-  prefixCls: 'w-input',
-  preIcon: null,
-  type: 'text',
-  size: 'default'
-};
-export { Input as default }; 
+export default /*#__PURE__*/React.forwardRef(InternalInput); 
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@uiw/react-input",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "description": "Input component",
@@ -46,4 +46,4 @@ "author": "Kenny Wong <[e-mail]>",
   "dependencies": {
-    "@uiw/react-icon": "^4.3.1",
-    "@uiw/utils": "^4.3.1",
+    "@uiw/react-icon": "^4.4.0",
+    "@uiw/utils": "^4.4.0",
     "classnames": "2.2.6"
@@ -59,3 +59,3 @@ },
   },
-  "gitHead": "f469dd7fc4c211873d65efcc065e2d0de2c64fed"
+  "gitHead": "efc1f4d8d93eb92af00649e92dd922b3074b0cab"
 }

README.md

@@ -244,3 +244,2 @@ Input 输入框
   onClick() {
-    console.log('this.state.btnIcon:',this.state.btnIcon);
     this.setState({
@@ -255,2 +254,7 @@ btnIcon: this.state.btnIcon === 'lock' ? 'unlock' : 'lock',
           <Input
+            ref={(instance) => {
+              if (instance) {
+                console.log('instance:', instance);
+              }
+            }}
             preIcon="like-o"
@@ -257,0 +261,0 @@ type={this.state.btnIcon === 'lock' ? 'password' : 'text'}

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

Improved metrics

Number of lines in readme file

316

increased by1.28%

Worsened metrics

Total package byte prevSize

35213

decreased by-9.78%

Lines of code

297

decreased by-22.45%

Dependency changes

• Updated@uiw/react-icon@^4.4.0

• Updated@uiw/utils@^4.4.0