@teamix/typography/lib/Editable.js

文本的基本格式

"use strict";

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

exports.__esModule = true;
exports["default"] = void 0;

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

var _classnames = _interopRequireDefault(require("classnames"));

var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));

var _components = require("@alicloudfe/components");

var _icons = require("@ant-design/icons");

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 TextArea = _components.Input.TextArea;

var Editable = function Editable(_ref) {
  var _classNames;

  var prefixCls = _ref.prefixCls,
      ariaLabel = _ref['aria-label'],
      className = _ref.className,
      style = _ref.style,
      direction = _ref.direction,
      maxLength = _ref.maxLength,
      _ref$autoHeight = _ref.autoHeight,
      autoHeight = _ref$autoHeight === void 0 ? true : _ref$autoHeight,
      value = _ref.value,
      onSave = _ref.onSave,
      onCancel = _ref.onCancel,
      onEnd = _ref.onEnd;
  var ref = React.useRef();
  var inComposition = React.useRef(false);
  var lastKeyCode = React.useRef();

  var _React$useState = React.useState(value),
      current = _React$useState[0],
      setCurrent = _React$useState[1];

  React.useEffect(function () {
    setCurrent(value);
  }, [value]);
  React.useEffect(function () {
    var _ref$current;

    var textAreaRef = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getInputNode();

    if (ref.current && textAreaRef) {
      textAreaRef.focus();
      var length = textAreaRef.value.length;
      textAreaRef.setSelectionRange(length, length);
    }
  }, []);

  var _onChange = function onChange(_ref2) {
    var target = _ref2.target;
    setCurrent(target.value.replace(/[\n\r]/g, ''));
  };

  var onCompositionStart = function onCompositionStart() {
    inComposition.current = true;
  };

  var onCompositionEnd = function onCompositionEnd() {
    inComposition.current = false;
  };

  var onKeyDown = function onKeyDown(e) {
    var keyCode = e.keyCode; // We don't record keyCode when IME is using

    if (inComposition.current) return;
    lastKeyCode.current = keyCode;
    e.preventDefault();
  };

  var confirmChange = function confirmChange() {
    onSave(current.trim());
  };

  var onKeyUp = function onKeyUp(_ref3) {
    var keyCode = _ref3.keyCode,
        ctrlKey = _ref3.ctrlKey,
        altKey = _ref3.altKey,
        metaKey = _ref3.metaKey,
        shiftKey = _ref3.shiftKey;

    // Check if it's a real key
    if (lastKeyCode.current === keyCode && !inComposition.current && !ctrlKey && !altKey && !metaKey && !shiftKey) {
      if (keyCode === _KeyCode["default"].ENTER) {
        confirmChange();
        onEnd === null || onEnd === void 0 ? void 0 : onEnd();
      } else if (keyCode === _KeyCode["default"].ESC) {
        onCancel();
      }
    }
  };

  var onBlur = function onBlur() {
    confirmChange();
  };

  var textAreaClassName = (0, _classnames["default"])(prefixCls, prefixCls + "-edit-content", (_classNames = {}, _classNames[prefixCls + "-rtl"] = direction === 'rtl', _classNames), className);
  return /*#__PURE__*/React.createElement("div", {
    className: textAreaClassName,
    style: style
  }, /*#__PURE__*/React.createElement(TextArea, {
    style: {
      width: '100%'
    },
    ref: ref,
    maxLength: maxLength,
    value: current,
    onChange: function onChange(_, e) {
      return _onChange(e);
    },
    onKeyDown: onKeyDown,
    onKeyUp: onKeyUp,
    onCompositionStart: onCompositionStart,
    onCompositionEnd: onCompositionEnd,
    onBlur: onBlur,
    "aria-label": ariaLabel,
    autoHeight: autoHeight
  }), /*#__PURE__*/React.createElement(_icons.EnterOutlined, {
    className: prefixCls + "-edit-content-confirm"
  }));
};

var _default = Editable;
exports["default"] = _default;