UNPKG

@nutui/nutui-react

Version:

京东风格的轻量级移动端 React 组件库,支持一套代码生成 H5 和小程序

131 lines (130 loc) 6.06 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "TextArea", { enumerable: true, get: function() { return TextArea; } }); var _interop_require_default = require("@swc/helpers/_/_interop_require_default"); var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard"); var _define_property = require("@swc/helpers/_/_define_property"); var _object_spread = require("@swc/helpers/_/_object_spread"); var _object_spread_props = require("@swc/helpers/_/_object_spread_props"); var _object_without_properties = require("@swc/helpers/_/_object_without_properties"); var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array"); var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react")); var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames")); var _configprovider = require("../configprovider"); var _typings = require("../../utils/typings"); var _usepropsvalue = require("../../hooks/use-props-value"); var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), { defaultValue: '', showCount: false, rows: 2, maxLength: 140, placeholder: '', readOnly: false, disabled: false, autoSize: false, plain: false, status: 'default' }); var TextArea = function TextArea(props) { var locale = (0, _configprovider.useConfig)().locale; var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, value = _ref.value, defaultValue = _ref.defaultValue, showCount = _ref.showCount, maxLength = _ref.maxLength, rows = _ref.rows, placeholder = _ref.placeholder, readOnly = _ref.readOnly, disabled = _ref.disabled, autoSize = _ref.autoSize, style = _ref.style, plain = _ref.plain, status = _ref.status, onChange = _ref.onChange, onBlur = _ref.onBlur, onFocus = _ref.onFocus, rest = (0, _object_without_properties._)(_ref, [ "className", "value", "defaultValue", "showCount", "maxLength", "rows", "placeholder", "readOnly", "disabled", "autoSize", "style", "plain", "status", "onChange", "onBlur", "onFocus" ]); var classPrefix = 'nut-textarea'; var textareaRef = (0, _react.useRef)(null); var compositionRef = (0, _react.useRef)(false); var rtl = (0, _configprovider.useRtl)(); var format = function format(value) { if (maxLength !== -1 && value.length > maxLength) { return value.substring(0, maxLength); } return value; }; var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({ value: value, defaultValue: defaultValue, finalValue: format(defaultValue), onChange: onChange }), 2), inputValue = _usePropsValue[0], setInputValue = _usePropsValue[1]; (0, _react.useEffect)(function() { if (autoSize) setContentHeight(); }, [ autoSize, defaultValue, inputValue ]); var setContentHeight = function setContentHeight() { var textarea = textareaRef.current; if (textarea) { textarea.style.height = 'auto'; var height = textarea === null || textarea === void 0 ? void 0 : textarea.scrollHeight; if (height) { textarea.style.height = "".concat(height, "px"); } } }; var handleChange = function handleChange(event) { var text = event.target; var value = compositionRef.current ? text.value : format(text.value); setInputValue(value); }; var isDisabled = function isDisabled() { return disabled || readOnly; }; var handleFocus = function handleFocus(event) { if (isDisabled()) return; onFocus === null || onFocus === void 0 ? void 0 : onFocus(event); }; var handleBlur = function handleBlur(event) { if (isDisabled()) return; onBlur === null || onBlur === void 0 ? void 0 : onBlur(event); }; var _obj; return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("div", { className: (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-disabled"), disabled), (0, _define_property._)(_obj, "".concat(classPrefix, "-readonly"), readOnly), (0, _define_property._)(_obj, "".concat(classPrefix, "-rtl"), rtl), (0, _define_property._)(_obj, "".concat(classPrefix, "-plain"), plain), (0, _define_property._)(_obj, "".concat(classPrefix, "-container"), !plain), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(status), status), _obj), className) }, /*#__PURE__*/ _react.default.createElement("textarea", (0, _object_spread_props._)((0, _object_spread._)({}, rest), { ref: textareaRef, className: (0, _classnames.default)("".concat(classPrefix, "-textarea"), (0, _define_property._)({}, "".concat(classPrefix, "-textarea-disabled"), disabled)), style: style, disabled: disabled, readOnly: readOnly, value: inputValue, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onCompositionEnd: function onCompositionEnd() { compositionRef.current = false; }, onCompositionStart: function onCompositionStart() { compositionRef.current = true; }, rows: rows, maxLength: maxLength === -1 ? undefined : maxLength, placeholder: placeholder !== undefined ? placeholder : locale.placeholder })), showCount && /*#__PURE__*/ _react.default.createElement("div", { className: (0, _classnames.default)("".concat(classPrefix, "-limit"), (0, _define_property._)({}, "".concat(classPrefix, "-limit-disabled"), disabled)) }, inputValue.length, "/", maxLength < 0 ? 0 : maxLength))); }; TextArea.displayName = 'NutTextArea';