gui-one-nutui-react-taro/dist/esm/textarea.taro-388d1f90.js

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

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React__default, { useState, useEffect } from 'react';
import { u as useConfig } from './configprovider.taro-6c7b3056.js';
import { c as cn } from './bem-893ad28d.js';
var defaultProps = {
  defaultValue: '',
  textAlign: 'left',
  limitshow: false,
  maxlength: '',
  rows: '',
  placeholder: '',
  readonly: false,
  disabled: false,
  autosize: false
};
var TextArea = function TextArea(props) {
  var _useConfig = useConfig(),
    locale = _useConfig.locale;
  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
    className = _defaultProps$props.className,
    defaultValue = _defaultProps$props.defaultValue,
    textAlign = _defaultProps$props.textAlign,
    limitshow = _defaultProps$props.limitshow,
    maxlength = _defaultProps$props.maxlength,
    rows = _defaultProps$props.rows,
    placeholder = _defaultProps$props.placeholder,
    readonly = _defaultProps$props.readonly,
    disabled = _defaultProps$props.disabled,
    autosize = _defaultProps$props.autosize,
    style = _defaultProps$props.style,
    onChange = _defaultProps$props.onChange,
    onBlur = _defaultProps$props.onBlur,
    onFocus = _defaultProps$props.onFocus;
  var textareaBem = cn('textarea');
  var _useState = useState(''),
    _useState2 = _slicedToArray(_useState, 2),
    inputValue = _useState2[0],
    SetInputValue = _useState2[1];
  useEffect(function () {
    if (defaultValue) {
      var initValue = defaultValue;
      if (maxlength && initValue.length > Number(maxlength)) {
        initValue = initValue.substring(0, Number(maxlength));
      }
      SetInputValue(initValue);
    }
  }, [defaultValue]);
  var textChange = function textChange(event) {
    var text = event.detail;
    if (maxlength && text.value.length > Number(maxlength)) {
      text.value = text.value.substring(0, Number(maxlength));
    }
    SetInputValue(text.value);
    onChange && onChange(text.value, event);
  };
  var textFocus = function textFocus(event) {
    if (disabled) return;
    if (readonly) return;
    onFocus && onFocus(event);
  };
  var textBlur = function textBlur(event) {
    if (disabled) return;
    if (readonly) return;
    var text = event.detail;
    onChange && onChange(text.value, event);
    onBlur && onBlur(event);
  };
  return React__default.createElement("div", {
    className: "".concat(textareaBem(), " ").concat(disabled ? textareaBem('disabled') : '', " ").concat(className || '')
  }, React__default.createElement("textarea", {
    className: textareaBem('textarea'),
    style: _objectSpread({
      textAlign: textAlign,
      resize: "".concat(autosize ? 'vertical' : 'none')
    }, style),
    disabled: disabled,
    readOnly: readonly,
    value: inputValue,
    onInput: function onInput(e) {
      textChange(e);
    },
    onChange: function onChange(e) {
      textChange(e);
    },
    onBlur: function onBlur(e) {
      textBlur(e);
    },
    onFocus: function onFocus(e) {
      textFocus(e);
    },
    rows: rows,
    maxLength: maxlength < 0 ? 0 : maxlength,
    placeholder: placeholder || locale.placeholder
  }), limitshow ? React__default.createElement("div", {
    className: textareaBem('limit')
  }, inputValue.length, "/", maxlength < 0 ? 0 : maxlength) : null);
};
TextArea.defaultProps = defaultProps;
TextArea.displayName = 'NutTextArea';
export { TextArea as T };