@aliretail/react-materials-components/lib/Input/hoc.js

B 端物料组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.withComposition = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var React = _interopRequireWildcard(require("react"));

var _excluded = ["value", "InputComponent"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var Wrapper = /*#__PURE__*/function (_React$Component) {
  (0, _inheritsLoose2["default"])(Wrapper, _React$Component);

  function Wrapper() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = {
      isInCompositionInput: false,
      inputValue: ''
    };

    _this.handleChange = function (value, e) {
      var onChange = _this.props.onChange;
      var isInCompositionInput = _this.state.isInCompositionInput;

      _this.setState({
        inputValue: value
      });

      if (!isInCompositionInput) {
        if (typeof onChange === 'function') {
          onChange(value, e);
        }
      }
    };

    _this.handleCompositionStart = function (e) {
      var _this$props = _this.props,
          onCompositionStart = _this$props.onCompositionStart,
          value = _this$props.value;

      if (typeof onCompositionStart === 'function') {
        onCompositionStart(e);
      }

      var newState = {
        isInCompositionInput: true
      };

      if (typeof value !== 'undefined') {
        newState.inputValue = value;
      }

      _this.setState(newState);
    };

    _this.handleCompositionEnd = function (e) {
      var _this$props2 = _this.props,
          onCompositionEnd = _this$props2.onCompositionEnd,
          onChange = _this$props2.onChange;

      if (typeof onCompositionEnd === 'function') {
        onCompositionEnd(e);
      }

      _this.setState({
        isInCompositionInput: false
      });

      if (typeof onChange === 'function') {
        onChange(e.target.value, e);
      }
    };

    return _this;
  }

  var _proto = Wrapper.prototype;

  _proto.render = function render() {
    var _this$props3 = this.props,
        value = _this$props3.value,
        InputComponent = _this$props3.InputComponent,
        rest = (0, _objectWithoutPropertiesLoose2["default"])(_this$props3, _excluded);
    var _this$state = this.state,
        inputValue = _this$state.inputValue,
        isInCompositionInput = _this$state.isInCompositionInput;
    return /*#__PURE__*/React.createElement(InputComponent, (0, _extends2["default"])({}, rest, {
      onCompositionStart: this.handleCompositionStart,
      onCompositionEnd: this.handleCompositionEnd,
      onChange: this.handleChange,
      value: !('value' in this.props) || isInCompositionInput ? inputValue : value
    }));
  };

  return Wrapper;
}(React.Component);

var withComposition = function withComposition(InputComponent) {
  return function (props) {
    return /*#__PURE__*/React.createElement(Wrapper, (0, _extends2["default"])({}, props, {
      InputComponent: InputComponent
    }));
  };
};

exports.withComposition = withComposition;