|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257 |
- 'use strict';
-
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
-
- var _extends2 = require('babel-runtime/helpers/extends');
-
- var _extends3 = _interopRequireDefault(_extends2);
-
- var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
-
- var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
-
- var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
-
- var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
-
- var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
-
- var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
-
- var _createClass2 = require('babel-runtime/helpers/createClass');
-
- var _createClass3 = _interopRequireDefault(_createClass2);
-
- var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
-
- var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
-
- var _inherits2 = require('babel-runtime/helpers/inherits');
-
- var _inherits3 = _interopRequireDefault(_inherits2);
-
- var _simpleAssign = require('simple-assign');
-
- var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
-
- var _react = require('react');
-
- var _react2 = _interopRequireDefault(_react);
-
- var _propTypes = require('prop-types');
-
- var _propTypes2 = _interopRequireDefault(_propTypes);
-
- var _reactEventListener = require('react-event-listener');
-
- var _reactEventListener2 = _interopRequireDefault(_reactEventListener);
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
- var rowsHeight = 24;
-
- function getStyles(props, context, state) {
- return {
- root: {
- position: 'relative' // because the shadow has position: 'absolute'
- },
- textarea: {
- height: state.height,
- width: '100%',
- resize: 'none',
- font: 'inherit',
- padding: 0,
- cursor: 'inherit'
- },
- shadow: {
- resize: 'none',
- // Overflow also needed to here to remove the extra row
- // added to textareas in Firefox.
- overflow: 'hidden',
- // Visibility needed to hide the extra text area on ipads
- visibility: 'hidden',
- position: 'absolute',
- height: 'auto'
- }
- };
- }
-
- var EnhancedTextarea = function (_Component) {
- (0, _inherits3.default)(EnhancedTextarea, _Component);
-
- function EnhancedTextarea() {
- var _ref;
-
- var _temp, _this, _ret;
-
- (0, _classCallCheck3.default)(this, EnhancedTextarea);
-
- for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
- args[_key] = arguments[_key];
- }
-
- return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = EnhancedTextarea.__proto__ || (0, _getPrototypeOf2.default)(EnhancedTextarea)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
- height: null
- }, _this.handleResize = function (event) {
- _this.syncHeightWithShadow(_this.props.value, event);
- }, _this.handleChange = function (event) {
- if (!_this.props.hasOwnProperty('value')) {
- _this.syncHeightWithShadow(event.target.value);
- }
-
- if (_this.props.hasOwnProperty('valueLink')) {
- _this.props.valueLink.requestChange(event.target.value);
- }
-
- if (_this.props.onChange) {
- _this.props.onChange(event);
- }
- }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
- }
-
- (0, _createClass3.default)(EnhancedTextarea, [{
- key: 'componentWillMount',
- value: function componentWillMount() {
- this.setState({
- height: this.props.rows * rowsHeight
- });
- }
- }, {
- key: 'componentDidMount',
- value: function componentDidMount() {
- this.syncHeightWithShadow(this.props.value);
- }
- }, {
- key: 'componentWillReceiveProps',
- value: function componentWillReceiveProps(nextProps) {
- if (nextProps.value !== this.props.value || nextProps.rowsMax !== this.props.rowsMax) {
- this.syncHeightWithShadow(nextProps.value, null, nextProps);
- }
- }
- }, {
- key: 'getInputNode',
- value: function getInputNode() {
- return this.refs.input;
- }
- }, {
- key: 'setValue',
- value: function setValue(value) {
- this.getInputNode().value = value;
- this.syncHeightWithShadow(value);
- }
- }, {
- key: 'syncHeightWithShadow',
- value: function syncHeightWithShadow(newValue, event, props) {
- var shadow = this.refs.shadow;
- var displayText = this.props.hintText && (newValue === '' || newValue === undefined || newValue === null) ? this.props.hintText : newValue;
-
- if (displayText !== undefined) {
- shadow.value = displayText;
- }
-
- var newHeight = shadow.scrollHeight;
-
- // Guarding for jsdom, where scrollHeight isn't present.
- // See https://github.com/tmpvar/jsdom/issues/1013
- if (newHeight === undefined) return;
-
- props = props || this.props;
-
- if (props.rowsMax >= props.rows) {
- newHeight = Math.min(props.rowsMax * rowsHeight, newHeight);
- }
-
- newHeight = Math.max(newHeight, rowsHeight);
-
- if (this.state.height !== newHeight) {
- var input = this.refs.input;
- var cursorPosition = input.selectionEnd;
- this.setState({
- height: newHeight
- }, function () {
- input.setSelectionRange(cursorPosition, cursorPosition);
- });
-
- if (props.onHeightChange) {
- props.onHeightChange(event, newHeight);
- }
- }
- }
- }, {
- key: 'render',
- value: function render() {
- var _props = this.props,
- onChange = _props.onChange,
- onHeightChange = _props.onHeightChange,
- rows = _props.rows,
- rowsMax = _props.rowsMax,
- shadowStyle = _props.shadowStyle,
- style = _props.style,
- hintText = _props.hintText,
- textareaStyle = _props.textareaStyle,
- valueLink = _props.valueLink,
- other = (0, _objectWithoutProperties3.default)(_props, ['onChange', 'onHeightChange', 'rows', 'rowsMax', 'shadowStyle', 'style', 'hintText', 'textareaStyle', 'valueLink']);
- var prepareStyles = this.context.muiTheme.prepareStyles;
-
- var styles = getStyles(this.props, this.context, this.state);
- var rootStyles = (0, _simpleAssign2.default)(styles.root, style);
- var textareaStyles = (0, _simpleAssign2.default)(styles.textarea, textareaStyle);
- var shadowStyles = (0, _simpleAssign2.default)({}, textareaStyles, styles.shadow, shadowStyle);
- var props = {};
-
- if (this.props.hasOwnProperty('valueLink')) {
- other.value = valueLink.value;
- props.valueLink = valueLink;
- }
-
- return _react2.default.createElement(
- 'div',
- { style: prepareStyles(rootStyles) },
- _react2.default.createElement(_reactEventListener2.default, { target: 'window', onResize: this.handleResize }),
- _react2.default.createElement('textarea', (0, _extends3.default)({
- ref: 'shadow',
- style: prepareStyles(shadowStyles),
- tabIndex: '-1',
- rows: this.props.rows,
- defaultValue: this.props.defaultValue,
- readOnly: true,
- value: this.props.value
- }, props)),
- _react2.default.createElement('textarea', (0, _extends3.default)({}, other, {
- ref: 'input',
- rows: this.props.rows,
- style: prepareStyles(textareaStyles),
- onChange: this.handleChange
- }))
- );
- }
- }]);
- return EnhancedTextarea;
- }(_react.Component);
-
- EnhancedTextarea.defaultProps = {
- rows: 1
- };
- EnhancedTextarea.contextTypes = {
- muiTheme: _propTypes2.default.object.isRequired
- };
- EnhancedTextarea.propTypes = process.env.NODE_ENV !== "production" ? {
- defaultValue: _propTypes2.default.any,
- disabled: _propTypes2.default.bool,
- hintText: _propTypes2.default.node,
- onChange: _propTypes2.default.func,
- onHeightChange: _propTypes2.default.func,
- rows: _propTypes2.default.number,
- rowsMax: _propTypes2.default.number,
- shadowStyle: _propTypes2.default.object,
- /**
- * Override the inline-styles of the root element.
- */
- style: _propTypes2.default.object,
- textareaStyle: _propTypes2.default.object,
- value: _propTypes2.default.string,
- valueLink: _propTypes2.default.object
- } : {};
- exports.default = EnhancedTextarea;
|