ResizableTextArea.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');
  6. var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);
  7. var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
  8. var _defineProperty3 = _interopRequireDefault(_defineProperty2);
  9. var _extends2 = require('babel-runtime/helpers/extends');
  10. var _extends3 = _interopRequireDefault(_extends2);
  11. var _vcResizeObserver = require('../vc-resize-observer');
  12. var _vcResizeObserver2 = _interopRequireDefault(_vcResizeObserver);
  13. var _omit = require('omit.js');
  14. var _omit2 = _interopRequireDefault(_omit);
  15. var _classnames = require('classnames');
  16. var _classnames2 = _interopRequireDefault(_classnames);
  17. var _calculateNodeHeight = require('./calculateNodeHeight');
  18. var _calculateNodeHeight2 = _interopRequireDefault(_calculateNodeHeight);
  19. var _raf = require('../_util/raf');
  20. var _raf2 = _interopRequireDefault(_raf);
  21. var _warning = require('../_util/warning');
  22. var _warning2 = _interopRequireDefault(_warning);
  23. var _BaseMixin = require('../_util/BaseMixin');
  24. var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
  25. var _inputProps = require('./inputProps');
  26. var _inputProps2 = _interopRequireDefault(_inputProps);
  27. var _vueTypes = require('../_util/vue-types');
  28. var _vueTypes2 = _interopRequireDefault(_vueTypes);
  29. var _propsUtil = require('../_util/props-util');
  30. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  31. var RESIZE_STATUS_NONE = 0;
  32. var RESIZE_STATUS_RESIZING = 1;
  33. var RESIZE_STATUS_RESIZED = 2;
  34. var TextAreaProps = (0, _extends3['default'])({}, _inputProps2['default'], {
  35. autosize: _vueTypes2['default'].oneOfType([Object, Boolean]),
  36. autoSize: _vueTypes2['default'].oneOfType([Object, Boolean])
  37. });
  38. var ResizableTextArea = {
  39. name: 'ResizableTextArea',
  40. props: TextAreaProps,
  41. data: function data() {
  42. return {
  43. textareaStyles: {},
  44. resizeStatus: RESIZE_STATUS_NONE
  45. };
  46. },
  47. mixins: [_BaseMixin2['default']],
  48. mounted: function mounted() {
  49. var _this = this;
  50. this.$nextTick(function () {
  51. _this.resizeTextarea();
  52. });
  53. },
  54. beforeDestroy: function beforeDestroy() {
  55. _raf2['default'].cancel(this.nextFrameActionId);
  56. _raf2['default'].cancel(this.resizeFrameId);
  57. },
  58. watch: {
  59. value: function value() {
  60. var _this2 = this;
  61. this.$nextTick(function () {
  62. _this2.resizeTextarea();
  63. });
  64. }
  65. },
  66. methods: {
  67. handleResize: function handleResize(size) {
  68. var resizeStatus = this.$data.resizeStatus;
  69. var autoSize = this.$props.autoSize;
  70. if (resizeStatus !== RESIZE_STATUS_NONE) {
  71. return;
  72. }
  73. this.$emit('resize', size);
  74. if (autoSize) {
  75. this.resizeOnNextFrame();
  76. }
  77. },
  78. resizeOnNextFrame: function resizeOnNextFrame() {
  79. _raf2['default'].cancel(this.nextFrameActionId);
  80. this.nextFrameActionId = (0, _raf2['default'])(this.resizeTextarea);
  81. },
  82. resizeTextarea: function resizeTextarea() {
  83. var _this3 = this;
  84. var autoSize = this.$props.autoSize || this.$props.autosize;
  85. if (!autoSize || !this.$refs.textArea) {
  86. return;
  87. }
  88. var minRows = autoSize.minRows,
  89. maxRows = autoSize.maxRows;
  90. var textareaStyles = (0, _calculateNodeHeight2['default'])(this.$refs.textArea, false, minRows, maxRows);
  91. this.setState({ textareaStyles: textareaStyles, resizeStatus: RESIZE_STATUS_RESIZING }, function () {
  92. _raf2['default'].cancel(_this3.resizeFrameId);
  93. _this3.resizeFrameId = (0, _raf2['default'])(function () {
  94. _this3.setState({ resizeStatus: RESIZE_STATUS_RESIZED }, function () {
  95. _this3.resizeFrameId = (0, _raf2['default'])(function () {
  96. _this3.setState({ resizeStatus: RESIZE_STATUS_NONE });
  97. _this3.fixFirefoxAutoScroll();
  98. });
  99. });
  100. });
  101. });
  102. },
  103. // https://github.com/ant-design/ant-design/issues/21870
  104. fixFirefoxAutoScroll: function fixFirefoxAutoScroll() {
  105. try {
  106. if (document.activeElement === this.$refs.textArea) {
  107. var currentStart = this.$refs.textArea.selectionStart;
  108. var currentEnd = this.$refs.textArea.selectionEnd;
  109. this.$refs.textArea.setSelectionRange(currentStart, currentEnd);
  110. }
  111. } catch (e) {
  112. // Fix error in Chrome:
  113. // Failed to read the 'selectionStart' property from 'HTMLInputElement'
  114. // http://stackoverflow.com/q/21177489/3040605
  115. }
  116. },
  117. renderTextArea: function renderTextArea() {
  118. var h = this.$createElement;
  119. var props = (0, _propsUtil.getOptionProps)(this);
  120. var prefixCls = props.prefixCls,
  121. autoSize = props.autoSize,
  122. autosize = props.autosize,
  123. disabled = props.disabled;
  124. var _$data = this.$data,
  125. textareaStyles = _$data.textareaStyles,
  126. resizeStatus = _$data.resizeStatus;
  127. (0, _warning2['default'])(autosize === undefined, 'Input.TextArea', 'autosize is deprecated, please use autoSize instead.');
  128. var otherProps = (0, _omit2['default'])(props, ['prefixCls', 'autoSize', 'autosize', 'defaultValue', 'allowClear', 'type', 'lazy', 'value']);
  129. var cls = (0, _classnames2['default'])(prefixCls, (0, _defineProperty3['default'])({}, prefixCls + '-disabled', disabled));
  130. var domProps = {};
  131. // Fix https://github.com/ant-design/ant-design/issues/6776
  132. // Make sure it could be reset when using form.getFieldDecorator
  133. if ('value' in props) {
  134. domProps.value = props.value || '';
  135. }
  136. var style = (0, _extends3['default'])({}, textareaStyles, resizeStatus === RESIZE_STATUS_RESIZING ? { overflowX: 'hidden', overflowY: 'hidden' } : null);
  137. var textareaProps = {
  138. attrs: otherProps,
  139. domProps: domProps,
  140. style: style,
  141. 'class': cls,
  142. on: (0, _omit2['default'])((0, _propsUtil.getListeners)(this), 'pressEnter'),
  143. directives: [{
  144. name: 'ant-input'
  145. }]
  146. };
  147. return h(
  148. _vcResizeObserver2['default'],
  149. {
  150. on: {
  151. 'resize': this.handleResize
  152. },
  153. attrs: { disabled: !(autoSize || autosize) }
  154. },
  155. [h('textarea', (0, _babelHelperVueJsxMergeProps2['default'])([textareaProps, { ref: 'textArea' }]))]
  156. );
  157. }
  158. },
  159. render: function render() {
  160. return this.renderTextArea();
  161. }
  162. };
  163. exports['default'] = ResizableTextArea;