shineout/es/EditableArea/EditableArea.js

Shein 前端组件库

import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from 'react';
import classnames from 'classnames';
import config from '../config';
import Textarea from '../Textarea';
import Input from '../Input';
import Popover from '../Popover';
import { editableAreaClass } from './styles';
import icons from '../icons';
import { focusElement, getParent } from '../utils/dom/element';
import { inputClass } from '../Input/styles';
import InputTitle from '../InputTitle';
import { inputTitleClass } from '../InputTitle/styles';
var DefaultProps = {
  bordered: false
};

var noop = function noop() {};

function formatShowValue(value) {
  if (!value && value !== 0) return '';
  var arr = String(value).split('\n');
  var len = arr.length;
  if (len > 1) return arr[0] + "...";
  return String(value);
}

var Editable =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(Editable, _React$PureComponent);

  function Editable(props) {
    var _this;

    _this = _React$PureComponent.call(this, props) || this;

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

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

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

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

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

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

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

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

    _this.state = {
      showTextarea: false
    };
    _this.bindContainer = _this.bindElement.bind(_assertThisInitialized(_assertThisInitialized(_this)), 'container');
    _this.bindInput = _this.bindElement.bind(_assertThisInitialized(_assertThisInitialized(_this)), 'input');
    _this.renderInput = _this.renderInput.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.renderPlace = _this.renderPlace.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.renderTextarea = _this.renderTextarea.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.onChange = _this.onChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.onBlur = _this.onBlur.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.autoFocus = _this.autoFocus.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.showPop = _this.updateShowTextarea.bind(_assertThisInitialized(_assertThisInitialized(_this)), true);
    _this.hidePop = _this.updateShowTextarea.bind(_assertThisInitialized(_assertThisInitialized(_this)), false);
    _this.handleClear = _this.onChange.bind(_assertThisInitialized(_assertThisInitialized(_this)), '');
    return _this;
  }

  var _proto = Editable.prototype;

  _proto.componentDidUpdate = function componentDidUpdate(_prevProps, prevState) {
    var showTextarea = this.state.showTextarea;

    if (prevState.showTextarea !== showTextarea && showTextarea) {
      this.autoFocus();
    }
  };

  _proto.onChange = function onChange(value) {
    var onChange = this.props.onChange;
    if (typeof onChange === 'function') onChange(value);
  };

  _proto.onBlur = function onBlur(e) {
    var _this$props = this.props,
        onBlur = _this$props.onBlur,
        forceChange = _this$props.forceChange;
    var target = e.target;
    this.hidePop();
    var newValue = target.value;

    if (this.getTrim()) {
      newValue = newValue.trim();
      target.value = newValue;
    }

    forceChange(newValue);
    if (typeof onBlur === 'function') onBlur(e);
  };

  _proto.getTrim = function getTrim() {
    var trim = this.props.trim;
    if (trim !== undefined) return trim;
    if (config.trim !== undefined) return config.trim;
    return false;
  };

  _proto.getErrorProps = function getErrorProps() {
    var p = {};
    if ('error' in this.props) p.error = this.props.error;
    return p;
  };

  _proto.updateShowTextarea = function updateShowTextarea(flag) {
    if (flag && this.input) {
      this.width = getParent(this.input, "." + editableAreaClass('input')).offsetWidth;
    }

    this.setState({
      showTextarea: flag
    });

    if (this.props.onShowTextareaChange) {
      this.props.onShowTextareaChange(flag);
    }
  };

  _proto.handleFocus = function handleFocus(e) {
    var onFocus = this.props.onFocus;
    if (typeof onFocus === 'function') onFocus(e);
  };

  _proto.bindElement = function bindElement(type, el) {
    this[type] = el;
  };

  _proto.autoFocus = function autoFocus() {
    if (!this.container) return;
    var target = this.container.querySelector("." + editableAreaClass('text-area') + " textarea.so-input-auto-size");
    if (target) focusElement.end(target);
  };

  _proto.renderTextarea = function renderTextarea() {
    var showTextarea = this.state.showTextarea;
    var _this$props2 = this.props,
        placeholder = _this$props2.placeholder,
        maxHeight = _this$props2.maxHeight,
        value = _this$props2.value,
        innerTitle = _this$props2.innerTitle,
        placeTitle = _this$props2.placeTitle,
        renderFooter = _this$props2.renderFooter;
    if (!showTextarea) return null;
    var addTitleProps = {
      innerTitle: innerTitle,
      placeTitle: placeTitle
    };
    return React.createElement("div", {
      ref: this.bindContainer
    }, React.createElement(Textarea, _extends({
      className: editableAreaClass('text-area'),
      autosize: true
    }, addTitleProps, {
      value: value,
      rows: 1,
      delay: 0,
      onChange: this.onChange,
      onBlur: this.onBlur,
      onFocus: this.handleFocus,
      placeholder: placeholder,
      maxHeight: maxHeight,
      renderFooter: renderFooter
    }, this.getErrorProps())));
  };

  _proto.renderResult = function renderResult() {
    var _this$props3 = this.props,
        placeholder = _this$props3.placeholder,
        disabled = _this$props3.disabled,
        value = _this$props3.value,
        renderResult = _this$props3.renderResult,
        placeTitle = _this$props3.placeTitle,
        innerTitle = _this$props3.innerTitle,
        error = _this$props3.error;
    var result = renderResult(value);
    return React.createElement("div", {
      tabIndex: disabled ? undefined : 0,
      className: classnames(editableAreaClass('input'), inputClass('_', error && 'invalid', disabled && 'disabled')),
      onFocus: this.showPop
    }, React.createElement(InputTitle, {
      placeTitle: placeTitle,
      innerTitle: innerTitle,
      open: !!value
    }, React.createElement("div", {
      className: classnames(inputClass('spare'), innerTitle && inputTitleClass('hidable', 'item')),
      ref: this.bindInput
    }, result || React.createElement("div", {
      className: inputClass('placeholder')
    }, placeholder || React.createElement("br", null)))));
  };

  _proto.renderInput = function renderInput() {
    var _this$props4 = this.props,
        placeholder = _this$props4.placeholder,
        disabled = _this$props4.disabled,
        value = _this$props4.value,
        innerTitle = _this$props4.innerTitle,
        placeTitle = _this$props4.placeTitle;
    return React.createElement(Input, _extends({
      innerTitle: innerTitle,
      placeTitle: placeTitle,
      forwardedRef: this.bindInput,
      placeholder: placeholder,
      value: formatShowValue(value),
      onChange: noop,
      className: editableAreaClass('input'),
      onFocus: this.showPop,
      disabled: disabled
    }, this.getErrorProps()));
  };

  _proto.renderPlace = function renderPlace() {
    var renderResult = this.props.renderResult;

    if (renderResult && typeof renderResult === 'function') {
      return this.renderResult();
    }

    return this.renderInput();
  };

  _proto.render = function render() {
    var showTextarea = this.state.showTextarea;
    var _this$props5 = this.props,
        width = _this$props5.width,
        style = _this$props5.style,
        className = _this$props5.className,
        bordered = _this$props5.bordered,
        clearable = _this$props5.clearable,
        getPopupContainer = _this$props5.getPopupContainer,
        value = _this$props5.value;
    var cls = classnames(className, editableAreaClass('_', !bordered && 'none-bordered'));
    var ms = Object.assign({
      width: width
    }, style);
    var popStyle = {
      width: this.width
    };
    return React.createElement("div", {
      className: cls,
      style: ms
    }, this.renderPlace(), React.createElement(Popover, {
      visible: showTextarea,
      showArrow: false,
      className: editableAreaClass('popover'),
      position: "cover",
      style: popStyle,
      getPopupContainer: getPopupContainer
    }, this.renderTextarea()), clearable && value ? React.createElement("div", {
      className: editableAreaClass('clear'),
      onClick: this.handleClear
    }, icons.CloseCircle) : null);
  };

  return Editable;
}(React.PureComponent);

_defineProperty(Editable, "defaultProps", DefaultProps);

export default Editable;