| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172 |
- "use strict";
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.default = void 0;
- var _vue = require("vue");
- var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
- var _vcResizeObserver = _interopRequireDefault(require("../vc-resize-observer"));
- var _classNames = _interopRequireDefault(require("../_util/classNames"));
- var _raf = _interopRequireDefault(require("../_util/raf"));
- var _warning = _interopRequireDefault(require("../_util/warning"));
- var _omit = _interopRequireDefault(require("../_util/omit"));
- var _inputProps = require("./inputProps");
- var _calculateNodeHeight = _interopRequireDefault(require("./calculateNodeHeight"));
- var _BaseInput = _interopRequireDefault(require("../_util/BaseInput"));
- const RESIZE_START = 0;
- const RESIZE_MEASURING = 1;
- const RESIZE_STABLE = 2;
- const ResizableTextArea = (0, _vue.defineComponent)({
- compatConfig: {
- MODE: 3
- },
- name: 'ResizableTextArea',
- inheritAttrs: false,
- props: (0, _inputProps.textAreaProps)(),
- setup(props, _ref) {
- let {
- attrs,
- emit,
- expose
- } = _ref;
- let nextFrameActionId;
- let resizeFrameId;
- const textAreaRef = (0, _vue.ref)();
- const textareaStyles = (0, _vue.ref)({});
- const resizeStatus = (0, _vue.ref)(RESIZE_STABLE);
- (0, _vue.onBeforeUnmount)(() => {
- _raf.default.cancel(nextFrameActionId);
- _raf.default.cancel(resizeFrameId);
- });
- // https://github.com/ant-design/ant-design/issues/21870
- const fixFirefoxAutoScroll = () => {
- try {
- if (textAreaRef.value && document.activeElement === textAreaRef.value.input) {
- const currentStart = textAreaRef.value.getSelectionStart();
- const currentEnd = textAreaRef.value.getSelectionEnd();
- const scrollTop = textAreaRef.value.getScrollTop();
- textAreaRef.value.setSelectionRange(currentStart, currentEnd);
- textAreaRef.value.setScrollTop(scrollTop);
- }
- } catch (e) {
- // Fix error in Chrome:
- // Failed to read the 'selectionStart' property from 'HTMLInputElement'
- // http://stackoverflow.com/q/21177489/3040605
- }
- };
- const minRows = (0, _vue.ref)();
- const maxRows = (0, _vue.ref)();
- (0, _vue.watchEffect)(() => {
- const autoSize = props.autoSize || props.autosize;
- if (autoSize) {
- minRows.value = autoSize.minRows;
- maxRows.value = autoSize.maxRows;
- } else {
- minRows.value = undefined;
- maxRows.value = undefined;
- }
- });
- const needAutoSize = (0, _vue.computed)(() => !!(props.autoSize || props.autosize));
- const startResize = () => {
- resizeStatus.value = RESIZE_START;
- };
- (0, _vue.watch)([() => props.value, minRows, maxRows, needAutoSize], () => {
- if (needAutoSize.value) {
- startResize();
- }
- }, {
- immediate: true
- });
- const autoSizeStyle = (0, _vue.ref)();
- (0, _vue.watch)([resizeStatus, textAreaRef], () => {
- if (!textAreaRef.value) return;
- if (resizeStatus.value === RESIZE_START) {
- resizeStatus.value = RESIZE_MEASURING;
- } else if (resizeStatus.value === RESIZE_MEASURING) {
- const textareaStyles = (0, _calculateNodeHeight.default)(textAreaRef.value.input, false, minRows.value, maxRows.value);
- resizeStatus.value = RESIZE_STABLE;
- autoSizeStyle.value = textareaStyles;
- } else {
- fixFirefoxAutoScroll();
- }
- }, {
- immediate: true,
- flush: 'post'
- });
- const instance = (0, _vue.getCurrentInstance)();
- const resizeRafRef = (0, _vue.ref)();
- const cleanRaf = () => {
- _raf.default.cancel(resizeRafRef.value);
- };
- const onInternalResize = size => {
- if (resizeStatus.value === RESIZE_STABLE) {
- emit('resize', size);
- if (needAutoSize.value) {
- cleanRaf();
- resizeRafRef.value = (0, _raf.default)(() => {
- startResize();
- });
- }
- }
- };
- (0, _vue.onBeforeUnmount)(() => {
- cleanRaf();
- });
- const resizeTextarea = () => {
- startResize();
- };
- expose({
- resizeTextarea,
- textArea: (0, _vue.computed)(() => {
- var _a;
- return (_a = textAreaRef.value) === null || _a === void 0 ? void 0 : _a.input;
- }),
- instance
- });
- (0, _warning.default)(props.autosize === undefined, 'Input.TextArea', 'autosize is deprecated, please use autoSize instead.');
- const renderTextArea = () => {
- const {
- prefixCls,
- disabled
- } = props;
- const otherProps = (0, _omit.default)(props, ['prefixCls', 'onPressEnter', 'autoSize', 'autosize', 'defaultValue', 'allowClear', 'type', 'maxlength', 'valueModifiers']);
- const cls = (0, _classNames.default)(prefixCls, attrs.class, {
- [`${prefixCls}-disabled`]: disabled
- });
- const mergedAutoSizeStyle = needAutoSize.value ? autoSizeStyle.value : null;
- const style = [attrs.style, textareaStyles.value, mergedAutoSizeStyle];
- const textareaProps = (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, otherProps), attrs), {
- style,
- class: cls
- });
- if (resizeStatus.value === RESIZE_START || resizeStatus.value === RESIZE_MEASURING) {
- style.push({
- overflowX: 'hidden',
- overflowY: 'hidden'
- });
- }
- if (!textareaProps.autofocus) {
- delete textareaProps.autofocus;
- }
- if (textareaProps.rows === 0) {
- delete textareaProps.rows;
- }
- return (0, _vue.createVNode)(_vcResizeObserver.default, {
- "onResize": onInternalResize,
- "disabled": !needAutoSize.value
- }, {
- default: () => [(0, _vue.createVNode)(_BaseInput.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, textareaProps), {}, {
- "ref": textAreaRef,
- "tag": "textarea"
- }), null)]
- });
- };
- return () => {
- return renderTextArea();
- };
- }
- });
- var _default = exports.default = ResizableTextArea;
|