@txdfe/at
Version:
一个设计体系组件库
262 lines (258 loc) • 13.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _util = require("../util");
var _base = _interopRequireDefault(require("./base"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
function _get() { return _get = "undefined" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) { var p = _superPropBase(e, t); if (p) { var n = Object.getOwnPropertyDescriptor(p, t); return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value; } }, _get.apply(null, arguments); }
function _superPropBase(t, o) { for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t));); return t; }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
// safari in mac
var isMacSafari = typeof navigator !== 'undefined' && navigator && navigator.userAgent ? navigator.userAgent.match(/^((?!chrome|android|windows).)*safari/i) : false;
var hiddenStyle = {
visibility: 'hidden',
position: 'absolute',
zIndex: '-1000',
top: '-1000px',
overflowY: 'hidden',
left: 0,
right: 0
};
/**
* Input.TextArea
* @order 2
*/
var TextArea = exports["default"] = /*#__PURE__*/function (_Base) {
function TextArea(props) {
var _this;
_classCallCheck(this, TextArea);
_this = _callSuper(this, TextArea, [props]);
_defineProperty(_this, "_resizeTextArea", function (value) {
if (_this.nextFrameActionId) {
(0, _util.clearNextFrameAction)(_this.nextFrameActionId);
}
_this.nextFrameActionId = (0, _util.onNextFrame)(function () {
var height = _this._getHeight(value);
var maxHeight = _this.state.maxHeight ? _this.state.maxHeight : Infinity;
_this.setState({
height: _this._getHeight(value),
overflowY: height <= maxHeight ? 'hidden' : undefined
});
});
});
var _value;
if ('value' in props) {
_value = props.value;
} else {
_value = props.defaultValue;
}
_this.state = {
value: typeof _value === 'undefined' ? '' : _value
};
return _this;
}
_inherits(TextArea, _Base);
return _createClass(TextArea, [{
key: "componentDidMount",
value: function componentDidMount() {
var autoHeight = this.props.autoHeight;
if (autoHeight) {
if (_typeof(autoHeight) === 'object') {
/* eslint-disable react/no-did-mount-set-state */
this.setState(this._getMinMaxHeight(autoHeight, this.state.value));
} else {
this.setState({
height: this._getHeight(this.state.value),
overflowY: 'hidden'
});
}
}
}
}, {
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
if (_superPropGet(TextArea, "UNSAFE_componentWillReceiveProps", this, 1)) {
_superPropGet(TextArea, "UNSAFE_componentWillReceiveProps", this, 3)([nextProps]);
}
if (this.props.autoHeight && this.props.value !== nextProps.value) {
this._resizeTextArea(nextProps.value);
}
}
}, {
key: "_getMinMaxHeight",
value: function _getMinMaxHeight(_ref, value) {
var minRows = _ref.minRows,
maxRows = _ref.maxRows;
/* eslint-disable-next-line */
var node = _reactDom["default"].findDOMNode(this.helpRef);
node.setAttribute('rows', minRows);
var minHeight = node.clientHeight;
node.setAttribute('rows', maxRows);
var maxHeight = node.clientHeight;
node.setAttribute('rows', '1');
var height = this._getHeight(value);
return {
minHeight: minHeight,
maxHeight: maxHeight,
height: height,
overflowY: height <= maxHeight ? 'hidden' : undefined
};
}
}, {
key: "_getHeight",
value: function _getHeight(value) {
/* eslint-disable-next-line */
var node = _reactDom["default"].findDOMNode(this.helpRef);
if (!node) {
return 0;
}
node.value = value;
return node.scrollHeight;
}
}, {
key: "ieHack",
value: function ieHack(value) {
// Fix: textarea dit not support maxLength in ie9
/* istanbul ignore if */
if (_util.env.ieVersion === 9 && this.props.maxLength) {
var maxLength = parseInt(this.props.maxLength);
var len = this.getValueLength(value, true);
if (len > maxLength && this.props.cutString) {
value = value.replace(/\n/g, '\n\n');
value = value.substr(0, maxLength);
value = value.replace(/\n\n/g, '\n');
}
}
this.props.autoHeight && this._resizeTextArea(value);
return value;
}
/**
* value.length !== maxLength in ie/safari(mac) while value has `Enter`
* about maxLength compute: `Enter` was considered to be one char(\n) in chrome , but two chars(\r\n) in ie/safari(mac).
* so while value has `Enter`, we should let display length + 1
*/
}, {
key: "getValueLength",
value: function getValueLength(value) {
var _this$props = this.props,
maxLength = _this$props.maxLength,
cutString = _this$props.cutString;
var nv = "".concat(value);
var strLen = this.props.getValueLength(nv);
if (typeof strLen !== 'number') {
strLen = nv.length;
}
/* istanbul ignore if */
if (_util.env.ieVersion || isMacSafari) {
strLen = strLen + nv.split('\n').length - 1;
if (strLen > maxLength && cutString) {
strLen = maxLength;
}
}
return strLen;
}
}, {
key: "saveTextAreaRef",
value: function saveTextAreaRef(textArea) {
this.inputRef = textArea;
}
}, {
key: "saveHelpRef",
value: function saveHelpRef(ref) {
this.helpRef = ref;
}
}, {
key: "render",
value: function render() {
var _this$props2 = this.props,
rows = _this$props2.rows,
style = _this$props2.style,
className = _this$props2.className,
autoHeight = _this$props2.autoHeight,
prefix = _this$props2.prefix,
rtl = _this$props2.rtl,
hasBorder = _this$props2.hasBorder,
gray = _this$props2.gray;
var cls = (0, _classnames["default"])(this.getClass(), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefix, "input-textarea"), true), "".concat(prefix, "noborder"), !hasBorder), className, !!className), "".concat(prefix, "gray"), gray));
var props = this.getProps();
// custom data attributes are assigned to the top parent node
// data-类自定义数据属性分配到顶层node节点
var dataProps = _util.obj.pickAttrsWith(this.props, 'data-');
// Custom props are transparently transmitted to the core input node by default
// 自定义属性默认透传到核心node节点：input
var others = _util.obj.pickOthers(_extends({}, dataProps, TextArea.propTypes), this.props);
var textareStyle = _objectSpread(_objectSpread({}, props.style), {}, {
height: this.state.height,
minHeight: this.state.minHeight,
maxHeight: this.state.maxHeight,
overflowY: this.state.overflowY
});
var wrapStyle = autoHeight ? _objectSpread(_objectSpread({}, style), {}, {
position: 'relative'
}) : style;
return /*#__PURE__*/_react["default"].createElement("span", _extends({
className: cls,
style: wrapStyle,
dir: rtl ? 'rtl' : undefined
}, dataProps), /*#__PURE__*/_react["default"].createElement("textarea", _extends({}, others, props, {
"data-real": true,
rows: rows,
style: textareStyle,
ref: this.saveRef.bind(this),
onKeyDown: this.onKeyDown.bind(this)
})), autoHeight ? /*#__PURE__*/_react["default"].createElement("textarea", {
"data-fake": true,
ref: this.saveHelpRef.bind(this),
style: _objectSpread(_objectSpread({}, props.style), hiddenStyle),
rows: "1"
}) : null, this.renderControl());
}
}]);
}(_base["default"]);
_defineProperty(TextArea, "propTypes", _objectSpread(_objectSpread({}, _base["default"].propTypes), {}, {
/**
* 是否有边框
*/
hasBorder: _propTypes["default"].bool,
/**
* 状态
* @enumdesc 错误
*/
state: _propTypes["default"].oneOf(['error']),
/**
* 自动高度 true / {minRows: 2, maxRows: 4}
*/
autoHeight: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].object]),
/**
* 多行文本框高度 <br />(不要直接用height设置多行文本框的高度, ie9 10会有兼容性问题)
*/
rows: _propTypes["default"].number
}));
_defineProperty(TextArea, "defaultProps", _objectSpread(_objectSpread({}, _base["default"].defaultProps), {}, {
hasBorder: true,
rows: 4,
autoHeight: false
}));