You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
144 lines
4.2 KiB
144 lines
4.2 KiB
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
import _createSuper from "@babel/runtime/helpers/createSuper";
|
|
import * as React from 'react';
|
|
import classNames from 'classnames';
|
|
import KeyCode from "rc-util/es/KeyCode";
|
|
import EnterOutlined from '@ant-design/icons/EnterOutlined';
|
|
import TextArea from '../input/TextArea';
|
|
|
|
var Editable = /*#__PURE__*/function (_React$Component) {
|
|
_inherits(Editable, _React$Component);
|
|
|
|
var _super = _createSuper(Editable);
|
|
|
|
function Editable() {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Editable);
|
|
|
|
_this = _super.apply(this, arguments);
|
|
_this.inComposition = false;
|
|
_this.state = {
|
|
current: ''
|
|
};
|
|
|
|
_this.onChange = function (_ref) {
|
|
var value = _ref.target.value;
|
|
|
|
_this.setState({
|
|
current: value.replace(/[\n\r]/g, '')
|
|
});
|
|
};
|
|
|
|
_this.onCompositionStart = function () {
|
|
_this.inComposition = true;
|
|
};
|
|
|
|
_this.onCompositionEnd = function () {
|
|
_this.inComposition = false;
|
|
};
|
|
|
|
_this.onKeyDown = function (_ref2) {
|
|
var keyCode = _ref2.keyCode;
|
|
// We don't record keyCode when IME is using
|
|
if (_this.inComposition) return;
|
|
_this.lastKeyCode = keyCode;
|
|
};
|
|
|
|
_this.onKeyUp = function (_ref3) {
|
|
var keyCode = _ref3.keyCode,
|
|
ctrlKey = _ref3.ctrlKey,
|
|
altKey = _ref3.altKey,
|
|
metaKey = _ref3.metaKey,
|
|
shiftKey = _ref3.shiftKey;
|
|
var onCancel = _this.props.onCancel; // Check if it's a real key
|
|
|
|
if (_this.lastKeyCode === keyCode && !_this.inComposition && !ctrlKey && !altKey && !metaKey && !shiftKey) {
|
|
if (keyCode === KeyCode.ENTER) {
|
|
_this.confirmChange();
|
|
} else if (keyCode === KeyCode.ESC) {
|
|
onCancel();
|
|
}
|
|
}
|
|
};
|
|
|
|
_this.onBlur = function () {
|
|
_this.confirmChange();
|
|
};
|
|
|
|
_this.confirmChange = function () {
|
|
var current = _this.state.current;
|
|
var onSave = _this.props.onSave;
|
|
onSave(current.trim());
|
|
};
|
|
|
|
_this.setTextarea = function (textarea) {
|
|
_this.textarea = textarea;
|
|
};
|
|
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Editable, [{
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (this.textarea && this.textarea.resizableTextArea) {
|
|
var textArea = this.textarea.resizableTextArea.textArea;
|
|
textArea.focus();
|
|
var length = textArea.value.length;
|
|
textArea.setSelectionRange(length, length);
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var current = this.state.current;
|
|
var _this$props = this.props,
|
|
prefixCls = _this$props.prefixCls,
|
|
ariaLabel = _this$props['aria-label'],
|
|
className = _this$props.className,
|
|
style = _this$props.style,
|
|
direction = _this$props.direction;
|
|
var textAreaClassName = classNames(prefixCls, className, "".concat(prefixCls, "-edit-content"), _defineProperty({}, "".concat(prefixCls, "-rtl"), direction === 'rtl'));
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
className: textAreaClassName,
|
|
style: style
|
|
}, /*#__PURE__*/React.createElement(TextArea, {
|
|
ref: this.setTextarea,
|
|
value: current,
|
|
onChange: this.onChange,
|
|
onKeyDown: this.onKeyDown,
|
|
onKeyUp: this.onKeyUp,
|
|
onCompositionStart: this.onCompositionStart,
|
|
onCompositionEnd: this.onCompositionEnd,
|
|
onBlur: this.onBlur,
|
|
"aria-label": ariaLabel,
|
|
autoSize: true
|
|
}), /*#__PURE__*/React.createElement(EnterOutlined, {
|
|
className: "".concat(prefixCls, "-edit-content-confirm")
|
|
}));
|
|
}
|
|
}], [{
|
|
key: "getDerivedStateFromProps",
|
|
value: function getDerivedStateFromProps(nextProps, prevState) {
|
|
var prevValue = prevState.prevValue;
|
|
var value = nextProps.value;
|
|
var newState = {
|
|
prevValue: value
|
|
};
|
|
|
|
if (prevValue !== value) {
|
|
newState.current = value;
|
|
}
|
|
|
|
return newState;
|
|
}
|
|
}]);
|
|
|
|
return Editable;
|
|
}(React.Component);
|
|
|
|
export default Editable; |