Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 
 
 

257 wiersze
8.1 KiB

  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _extends2 = require('babel-runtime/helpers/extends');
  6. var _extends3 = _interopRequireDefault(_extends2);
  7. var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
  8. var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
  9. var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
  10. var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
  11. var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
  12. var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
  13. var _createClass2 = require('babel-runtime/helpers/createClass');
  14. var _createClass3 = _interopRequireDefault(_createClass2);
  15. var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
  16. var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
  17. var _inherits2 = require('babel-runtime/helpers/inherits');
  18. var _inherits3 = _interopRequireDefault(_inherits2);
  19. var _simpleAssign = require('simple-assign');
  20. var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
  21. var _react = require('react');
  22. var _react2 = _interopRequireDefault(_react);
  23. var _propTypes = require('prop-types');
  24. var _propTypes2 = _interopRequireDefault(_propTypes);
  25. var _reactEventListener = require('react-event-listener');
  26. var _reactEventListener2 = _interopRequireDefault(_reactEventListener);
  27. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  28. var rowsHeight = 24;
  29. function getStyles(props, context, state) {
  30. return {
  31. root: {
  32. position: 'relative' // because the shadow has position: 'absolute'
  33. },
  34. textarea: {
  35. height: state.height,
  36. width: '100%',
  37. resize: 'none',
  38. font: 'inherit',
  39. padding: 0,
  40. cursor: 'inherit'
  41. },
  42. shadow: {
  43. resize: 'none',
  44. // Overflow also needed to here to remove the extra row
  45. // added to textareas in Firefox.
  46. overflow: 'hidden',
  47. // Visibility needed to hide the extra text area on ipads
  48. visibility: 'hidden',
  49. position: 'absolute',
  50. height: 'auto'
  51. }
  52. };
  53. }
  54. var EnhancedTextarea = function (_Component) {
  55. (0, _inherits3.default)(EnhancedTextarea, _Component);
  56. function EnhancedTextarea() {
  57. var _ref;
  58. var _temp, _this, _ret;
  59. (0, _classCallCheck3.default)(this, EnhancedTextarea);
  60. for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
  61. args[_key] = arguments[_key];
  62. }
  63. return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = EnhancedTextarea.__proto__ || (0, _getPrototypeOf2.default)(EnhancedTextarea)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
  64. height: null
  65. }, _this.handleResize = function (event) {
  66. _this.syncHeightWithShadow(_this.props.value, event);
  67. }, _this.handleChange = function (event) {
  68. if (!_this.props.hasOwnProperty('value')) {
  69. _this.syncHeightWithShadow(event.target.value);
  70. }
  71. if (_this.props.hasOwnProperty('valueLink')) {
  72. _this.props.valueLink.requestChange(event.target.value);
  73. }
  74. if (_this.props.onChange) {
  75. _this.props.onChange(event);
  76. }
  77. }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  78. }
  79. (0, _createClass3.default)(EnhancedTextarea, [{
  80. key: 'componentWillMount',
  81. value: function componentWillMount() {
  82. this.setState({
  83. height: this.props.rows * rowsHeight
  84. });
  85. }
  86. }, {
  87. key: 'componentDidMount',
  88. value: function componentDidMount() {
  89. this.syncHeightWithShadow(this.props.value);
  90. }
  91. }, {
  92. key: 'componentWillReceiveProps',
  93. value: function componentWillReceiveProps(nextProps) {
  94. if (nextProps.value !== this.props.value || nextProps.rowsMax !== this.props.rowsMax) {
  95. this.syncHeightWithShadow(nextProps.value, null, nextProps);
  96. }
  97. }
  98. }, {
  99. key: 'getInputNode',
  100. value: function getInputNode() {
  101. return this.refs.input;
  102. }
  103. }, {
  104. key: 'setValue',
  105. value: function setValue(value) {
  106. this.getInputNode().value = value;
  107. this.syncHeightWithShadow(value);
  108. }
  109. }, {
  110. key: 'syncHeightWithShadow',
  111. value: function syncHeightWithShadow(newValue, event, props) {
  112. var shadow = this.refs.shadow;
  113. var displayText = this.props.hintText && (newValue === '' || newValue === undefined || newValue === null) ? this.props.hintText : newValue;
  114. if (displayText !== undefined) {
  115. shadow.value = displayText;
  116. }
  117. var newHeight = shadow.scrollHeight;
  118. // Guarding for jsdom, where scrollHeight isn't present.
  119. // See https://github.com/tmpvar/jsdom/issues/1013
  120. if (newHeight === undefined) return;
  121. props = props || this.props;
  122. if (props.rowsMax >= props.rows) {
  123. newHeight = Math.min(props.rowsMax * rowsHeight, newHeight);
  124. }
  125. newHeight = Math.max(newHeight, rowsHeight);
  126. if (this.state.height !== newHeight) {
  127. var input = this.refs.input;
  128. var cursorPosition = input.selectionEnd;
  129. this.setState({
  130. height: newHeight
  131. }, function () {
  132. input.setSelectionRange(cursorPosition, cursorPosition);
  133. });
  134. if (props.onHeightChange) {
  135. props.onHeightChange(event, newHeight);
  136. }
  137. }
  138. }
  139. }, {
  140. key: 'render',
  141. value: function render() {
  142. var _props = this.props,
  143. onChange = _props.onChange,
  144. onHeightChange = _props.onHeightChange,
  145. rows = _props.rows,
  146. rowsMax = _props.rowsMax,
  147. shadowStyle = _props.shadowStyle,
  148. style = _props.style,
  149. hintText = _props.hintText,
  150. textareaStyle = _props.textareaStyle,
  151. valueLink = _props.valueLink,
  152. other = (0, _objectWithoutProperties3.default)(_props, ['onChange', 'onHeightChange', 'rows', 'rowsMax', 'shadowStyle', 'style', 'hintText', 'textareaStyle', 'valueLink']);
  153. var prepareStyles = this.context.muiTheme.prepareStyles;
  154. var styles = getStyles(this.props, this.context, this.state);
  155. var rootStyles = (0, _simpleAssign2.default)(styles.root, style);
  156. var textareaStyles = (0, _simpleAssign2.default)(styles.textarea, textareaStyle);
  157. var shadowStyles = (0, _simpleAssign2.default)({}, textareaStyles, styles.shadow, shadowStyle);
  158. var props = {};
  159. if (this.props.hasOwnProperty('valueLink')) {
  160. other.value = valueLink.value;
  161. props.valueLink = valueLink;
  162. }
  163. return _react2.default.createElement(
  164. 'div',
  165. { style: prepareStyles(rootStyles) },
  166. _react2.default.createElement(_reactEventListener2.default, { target: 'window', onResize: this.handleResize }),
  167. _react2.default.createElement('textarea', (0, _extends3.default)({
  168. ref: 'shadow',
  169. style: prepareStyles(shadowStyles),
  170. tabIndex: '-1',
  171. rows: this.props.rows,
  172. defaultValue: this.props.defaultValue,
  173. readOnly: true,
  174. value: this.props.value
  175. }, props)),
  176. _react2.default.createElement('textarea', (0, _extends3.default)({}, other, {
  177. ref: 'input',
  178. rows: this.props.rows,
  179. style: prepareStyles(textareaStyles),
  180. onChange: this.handleChange
  181. }))
  182. );
  183. }
  184. }]);
  185. return EnhancedTextarea;
  186. }(_react.Component);
  187. EnhancedTextarea.defaultProps = {
  188. rows: 1
  189. };
  190. EnhancedTextarea.contextTypes = {
  191. muiTheme: _propTypes2.default.object.isRequired
  192. };
  193. EnhancedTextarea.propTypes = process.env.NODE_ENV !== "production" ? {
  194. defaultValue: _propTypes2.default.any,
  195. disabled: _propTypes2.default.bool,
  196. hintText: _propTypes2.default.node,
  197. onChange: _propTypes2.default.func,
  198. onHeightChange: _propTypes2.default.func,
  199. rows: _propTypes2.default.number,
  200. rowsMax: _propTypes2.default.number,
  201. shadowStyle: _propTypes2.default.object,
  202. /**
  203. * Override the inline-styles of the root element.
  204. */
  205. style: _propTypes2.default.object,
  206. textareaStyle: _propTypes2.default.object,
  207. value: _propTypes2.default.string,
  208. valueLink: _propTypes2.default.object
  209. } : {};
  210. exports.default = EnhancedTextarea;