shineout/es/DatePicker/Text.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, { PureComponent } from 'react';
import classnames from 'classnames';
import { inputClass } from '../Input/styles';
import { getParent, focusElement } from '../utils/dom/element';
import utils from './utils';
import { datepickerClass } from './styles';
import { getLocale } from '../locale';
var target = null;
document.addEventListener('mousedown', function (e) {
  // eslint-disable-next-line prefer-destructuring
  target = e.target;
}, true);
var DefaultValue = {
  value: ''
};

var Text =
/*#__PURE__*/
function (_PureComponent) {
  _inheritsLoose(Text, _PureComponent);

  function Text(props) {
    var _this;

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

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

    _this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.handleInput = _this.handleInput.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.handleSpanClick = _this.handleSpanClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.bindElement = _this.bindElement.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    return _this;
  }

  var _proto = Text.prototype;

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (prevProps.focus !== this.props.focus && this.props.focus && this.element && (this.props.focusElement === this.element || !this.props.focusElement)) {
      focusElement.end(this.element);
    }
  };

  _proto.getOptions = function getOptions() {
    var timeZone = this.props.timeZone;
    return {
      timeZone: timeZone,
      weekStartsOn: getLocale('startOfWeek')
    };
  };

  _proto.bindElement = function bindElement(el) {
    var onTextSpanRef = this.props.onTextSpanRef;
    this.element = el;
    if (onTextSpanRef) onTextSpanRef(el);
  };

  _proto.handleBlur = function handleBlur(e) {
    var _this$props = this.props,
        format = _this$props.format,
        index = _this$props.index,
        onChange = _this$props.onChange,
        value = _this$props.value;
    var txt = e.target.innerText;
    if (getParent(target, "." + datepickerClass('picker'))) return;
    if (txt === value) return;

    if (txt.trim().length === 0) {
      onChange(undefined, index, e);
    } else {
      if (typeof format !== 'string') {
        console.error('formatResult should be string when inputable is true');
      }

      var newValue = typeof format === 'string' ? utils.toDateWithFormat(txt, format, undefined, this.getOptions()) : undefined; // if translate fail, clear

      if (!newValue) {
        // @ts-ignore
        this.element.innerText = null;
      }

      onChange(newValue, index, e);
    }
  };

  _proto.handleFocus = function handleFocus(e) {
    var onTextSpanRef = this.props.onTextSpanRef;
    if (onTextSpanRef) onTextSpanRef(e.target);
  };

  _proto.handleSpanClick = function handleSpanClick() {
    var onTextSpanRef = this.props.onTextSpanRef;
    if (onTextSpanRef && this.element) onTextSpanRef(this.element);
  };

  _proto.handleInput = function handleInput(e) {
    if (e.keyCode === 13) {
      e.preventDefault();
      e.stopPropagation();
      this.element.blur();
      this.handleBlur(e); // must wait for handleBlur to finish executing

      Promise.resolve().then(function () {
        document.dispatchEvent(new Event('mousedown', {
          bubbles: true
        }));
      });
    }
  };

  _proto.render = function render() {
    var _this$props2 = this.props,
        className = _this$props2.className,
        inputable = _this$props2.inputable,
        value = _this$props2.value,
        placeholder = _this$props2.placeholder,
        disabled = _this$props2.disabled,
        focus = _this$props2.focus;
    var showInput = inputable && !disabled && focus;
    var hideStyle = {
      display: 'none'
    };
    return React.createElement(React.Fragment, null, inputable ? React.createElement("span", {
      style: !showInput ? hideStyle : undefined,
      ref: this.bindElement,
      key: "edit",
      contentEditable: inputable,
      onBlur: this.handleBlur,
      onFocus: this.handleFocus,
      onKeyDown: this.handleInput,
      className: className,
      dangerouslySetInnerHTML: {
        __html: value
      }
    }) : null, React.createElement("span", {
      style: showInput ? hideStyle : undefined,
      key: "placeholder",
      onClick: this.handleSpanClick,
      className: classnames(!value && inputClass('placeholder'), className)
    }, value || placeholder));
  };

  return Text;
}(PureComponent);

_defineProperty(Text, "defaultProps", DefaultValue);

export default Text;