Editable.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. "use strict";
  2. "use client";
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  4. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  5. Object.defineProperty(exports, "__esModule", {
  6. value: true
  7. });
  8. exports.default = void 0;
  9. var React = _interopRequireWildcard(require("react"));
  10. var _EnterOutlined = _interopRequireDefault(require("@ant-design/icons/EnterOutlined"));
  11. var _classnames = _interopRequireDefault(require("classnames"));
  12. var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
  13. var _reactNode = require("../_util/reactNode");
  14. var _TextArea = _interopRequireDefault(require("../input/TextArea"));
  15. var _style = _interopRequireDefault(require("./style"));
  16. const Editable = props => {
  17. const {
  18. prefixCls,
  19. 'aria-label': ariaLabel,
  20. className,
  21. style,
  22. direction,
  23. maxLength,
  24. autoSize = true,
  25. value,
  26. onSave,
  27. onCancel,
  28. onEnd,
  29. component,
  30. enterIcon = /*#__PURE__*/React.createElement(_EnterOutlined.default, null)
  31. } = props;
  32. const ref = React.useRef(null);
  33. const inComposition = React.useRef(false);
  34. const lastKeyCode = React.useRef(null);
  35. const [current, setCurrent] = React.useState(value);
  36. React.useEffect(() => {
  37. setCurrent(value);
  38. }, [value]);
  39. React.useEffect(() => {
  40. var _a;
  41. if ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.resizableTextArea) {
  42. const {
  43. textArea
  44. } = ref.current.resizableTextArea;
  45. textArea.focus();
  46. const {
  47. length
  48. } = textArea.value;
  49. textArea.setSelectionRange(length, length);
  50. }
  51. }, []);
  52. const onChange = ({
  53. target
  54. }) => {
  55. setCurrent(target.value.replace(/[\n\r]/g, ''));
  56. };
  57. const onCompositionStart = () => {
  58. inComposition.current = true;
  59. };
  60. const onCompositionEnd = () => {
  61. inComposition.current = false;
  62. };
  63. const onKeyDown = ({
  64. keyCode
  65. }) => {
  66. // We don't record keyCode when IME is using
  67. if (inComposition.current) return;
  68. lastKeyCode.current = keyCode;
  69. };
  70. const confirmChange = () => {
  71. onSave(current.trim());
  72. };
  73. const onKeyUp = ({
  74. keyCode,
  75. ctrlKey,
  76. altKey,
  77. metaKey,
  78. shiftKey
  79. }) => {
  80. // Check if it's a real key
  81. if (lastKeyCode.current !== keyCode || inComposition.current || ctrlKey || altKey || metaKey || shiftKey) {
  82. return;
  83. }
  84. if (keyCode === _KeyCode.default.ENTER) {
  85. confirmChange();
  86. onEnd === null || onEnd === void 0 ? void 0 : onEnd();
  87. } else if (keyCode === _KeyCode.default.ESC) {
  88. onCancel();
  89. }
  90. };
  91. const onBlur = () => {
  92. confirmChange();
  93. };
  94. const [wrapCSSVar, hashId, cssVarCls] = (0, _style.default)(prefixCls);
  95. const textAreaClassName = (0, _classnames.default)(prefixCls, `${prefixCls}-edit-content`, {
  96. [`${prefixCls}-rtl`]: direction === 'rtl',
  97. [`${prefixCls}-${component}`]: !!component
  98. }, className, hashId, cssVarCls);
  99. return wrapCSSVar(/*#__PURE__*/React.createElement("div", {
  100. className: textAreaClassName,
  101. style: style
  102. }, /*#__PURE__*/React.createElement(_TextArea.default, {
  103. ref: ref,
  104. maxLength: maxLength,
  105. value: current,
  106. onChange: onChange,
  107. onKeyDown: onKeyDown,
  108. onKeyUp: onKeyUp,
  109. onCompositionStart: onCompositionStart,
  110. onCompositionEnd: onCompositionEnd,
  111. onBlur: onBlur,
  112. "aria-label": ariaLabel,
  113. rows: 1,
  114. autoSize: autoSize
  115. }), enterIcon !== null ? (0, _reactNode.cloneElement)(enterIcon, {
  116. className: `${prefixCls}-edit-content-confirm`
  117. }) : null));
  118. };
  119. var _default = exports.default = Editable;