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

B 端物料组件库

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
var _excluded = ["value", "InputComponent"];
import * as React from 'react';

var Wrapper = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(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 = _objectWithoutPropertiesLoose(_this$props3, _excluded);

    var _this$state = this.state,
        inputValue = _this$state.inputValue,
        isInCompositionInput = _this$state.isInCompositionInput;
    return /*#__PURE__*/React.createElement(InputComponent, _extends({}, rest, {
      onCompositionStart: this.handleCompositionStart,
      onCompositionEnd: this.handleCompositionEnd,
      onChange: this.handleChange,
      value: !('value' in this.props) || isInCompositionInput ? inputValue : value
    }));
  };

  return Wrapper;
}(React.Component);

export var withComposition = function withComposition(InputComponent) {
  return function (props) {
    return /*#__PURE__*/React.createElement(Wrapper, _extends({}, props, {
      InputComponent: InputComponent
    }));
  };
};