shineout/es/TreeSelect/Input.js

Shein 前端组件库

import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { Component, isValidElement, cloneElement } from 'react';
import { focusElement, preventPasteFile } from '../utils/dom/element';
import { treeSelectClass } from './styles';
var DefaultValue = {
  text: '',
  updatAble: false
};

var FilterInput =
/*#__PURE__*/
function (_Component) {
  _inheritsLoose(FilterInput, _Component);

  function FilterInput(props) {
    var _this;

    _this = _Component.call(this, props) || this;

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "editElement", void 0);

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "blurTimer", void 0);

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleBlur", void 0);

    _this.bindElement = _this.bindElement.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.handleInput = _this.handleInput.bind(_assertThisInitialized(_assertThisInitialized(_this))); // for mutiple select

    _this.props.setInputReset(_this.reset.bind(_assertThisInitialized(_assertThisInitialized(_this))));

    return _this;
  }

  var _proto = FilterInput.prototype;

  _proto.componentDidMount = function componentDidMount() {
    if (this.props.focus) {
      this.focus();
    }
  };

  _proto.shouldComponentUpdate = function shouldComponentUpdate() {
    return this.props.updatAble;
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (this.props.focus === prevProps.focus || !this.props.focus) return;
    this.focus();
  };

  _proto.reset = function reset() {
    if (this.editElement) this.editElement.innerText = '';
    if (this.blurTimer) clearTimeout(this.blurTimer);
  };

  _proto.focus = function focus() {
    var _this2 = this;

    requestAnimationFrame(function () {
      focusElement.select(_this2.editElement);
    });
  };

  _proto.bindElement = function bindElement(el) {
    this.editElement = el;
  };

  _proto.handleInput = function handleInput(e) {
    this.props.onFilter(e.target.innerText.replace('\feff ', '').trim());
  };

  _proto.render = function render() {
    var _this$props = this.props,
        text = _this$props.text,
        focus = _this$props.focus,
        multiple = _this$props.multiple;
    var value = typeof text === 'string' ? text.replace(/<\/?[^>]*>/g, '') : text;

    if (isValidElement(value)) {
      return cloneElement(value, {
        className: treeSelectClass('input'),
        ref: this.bindElement,
        key: 'input',
        onInput: this.handleInput,
        contentEditable: focus
      });
    }

    return React.createElement("span", {
      key: "input",
      className: treeSelectClass('input', !multiple && 'full'),
      ref: this.bindElement,
      contentEditable: focus,
      onPaste: preventPasteFile,
      onInput: this.handleInput,
      onBlur: this.handleBlur,
      dangerouslySetInnerHTML: {
        __html: value
      }
    });
  };

  return FilterInput;
}(Component);

_defineProperty(FilterInput, "defaultProps", DefaultValue);

export default FilterInput;