2016-06-03 23:29:21 +03:00
'use strict' ;
Object . defineProperty ( exports , "__esModule" , {
value : true
} ) ;
exports . Input = exports . inputFactory = undefined ;
var _extends = Object . assign || function ( target ) { for ( var i = 1 ; i < arguments . length ; i ++ ) { var source = arguments [ i ] ; for ( var key in source ) { if ( Object . prototype . hasOwnProperty . call ( source , key ) ) { target [ key ] = source [ key ] ; } } } return target ; } ;
2016-10-08 13:51:21 +03:00
var _typeof = typeof Symbol === "function" && typeof Symbol . iterator === "symbol" ? function ( obj ) { return typeof obj ; } : function ( obj ) { return obj && typeof Symbol === "function" && obj . constructor === Symbol && obj !== Symbol . prototype ? "symbol" : typeof obj ; } ;
2016-07-10 17:57:03 +03:00
2016-06-03 23:29:21 +03:00
var _createClass = function ( ) { function defineProperties ( target , props ) { for ( var i = 0 ; i < props . length ; i ++ ) { var descriptor = props [ i ] ; descriptor . enumerable = descriptor . enumerable || false ; descriptor . configurable = true ; if ( "value" in descriptor ) descriptor . writable = true ; Object . defineProperty ( target , descriptor . key , descriptor ) ; } } return function ( Constructor , protoProps , staticProps ) { if ( protoProps ) defineProperties ( Constructor . prototype , protoProps ) ; if ( staticProps ) defineProperties ( Constructor , staticProps ) ; return Constructor ; } ; } ( ) ;
var _react = require ( 'react' ) ;
var _react2 = _interopRequireDefault ( _react ) ;
var _classnames4 = require ( 'classnames' ) ;
var _classnames5 = _interopRequireDefault ( _classnames4 ) ;
var _reactCssThemr = require ( 'react-css-themr' ) ;
var _identifiers = require ( '../identifiers.js' ) ;
var _FontIcon = require ( '../font_icon/FontIcon.js' ) ;
var _FontIcon2 = _interopRequireDefault ( _FontIcon ) ;
function _interopRequireDefault ( obj ) { return obj && obj . _ _esModule ? obj : { default : obj } ; }
function _defineProperty ( obj , key , value ) { if ( key in obj ) { Object . defineProperty ( obj , key , { value : value , enumerable : true , configurable : true , writable : true } ) ; } else { obj [ key ] = value ; } return obj ; }
function _objectWithoutProperties ( obj , keys ) { var target = { } ; for ( var i in obj ) { if ( keys . indexOf ( i ) >= 0 ) continue ; if ( ! Object . prototype . hasOwnProperty . call ( obj , i ) ) continue ; target [ i ] = obj [ i ] ; } return target ; }
function _classCallCheck ( instance , Constructor ) { if ( ! ( instance instanceof Constructor ) ) { throw new TypeError ( "Cannot call a class as a function" ) ; } }
function _possibleConstructorReturn ( self , call ) { if ( ! self ) { throw new ReferenceError ( "this hasn't been initialised - super() hasn't been called" ) ; } return call && ( typeof call === "object" || typeof call === "function" ) ? call : self ; }
function _inherits ( subClass , superClass ) { if ( typeof superClass !== "function" && superClass !== null ) { throw new TypeError ( "Super expression must either be null or a function, not " + typeof superClass ) ; } subClass . prototype = Object . create ( superClass && superClass . prototype , { constructor : { value : subClass , enumerable : false , writable : true , configurable : true } } ) ; if ( superClass ) Object . setPrototypeOf ? Object . setPrototypeOf ( subClass , superClass ) : subClass . _ _proto _ _ = superClass ; }
var factory = function factory ( FontIcon ) {
var Input = function ( _React$Component ) {
_inherits ( Input , _React$Component ) ;
function Input ( ) {
2016-10-08 13:51:21 +03:00
var _ref ;
2016-06-03 23:29:21 +03:00
var _temp , _this , _ret ;
_classCallCheck ( this , Input ) ;
for ( var _len = arguments . length , args = Array ( _len ) , _key = 0 ; _key < _len ; _key ++ ) {
args [ _key ] = arguments [ _key ] ;
}
2016-10-08 13:51:21 +03:00
return _ret = ( _temp = ( _this = _possibleConstructorReturn ( this , ( _ref = Input . _ _proto _ _ || Object . getPrototypeOf ( Input ) ) . call . apply ( _ref , [ this ] . concat ( args ) ) ) , _this ) , _this . handleChange = function ( event ) {
2016-08-04 23:18:11 +03:00
var _this$props = _this . props ;
var onChange = _this$props . onChange ;
var multiline = _this$props . multiline ;
var maxLength = _this$props . maxLength ;
var valueFromEvent = event . target . value ;
// Trim value to maxLength if that exists (only on multiline inputs).
// Note that this is still required even tho we have the onKeyPress filter
// because the user could paste smt in the textarea.
var haveToTrim = multiline && maxLength && event . target . value . length > maxLength ;
var value = haveToTrim ? valueFromEvent . substr ( 0 , maxLength ) : valueFromEvent ;
// propagate to to store and therefore to the input
if ( onChange ) onChange ( value , event ) ;
2016-07-04 23:03:57 +03:00
} , _this . handleAutoresize = function ( ) {
var element = _this . refs . input ;
2016-10-22 18:35:55 +03:00
var rows = _this . props . rows ;
2016-07-04 23:03:57 +03:00
2016-10-22 18:35:55 +03:00
if ( typeof rows === 'number' && ! isNaN ( rows ) ) {
element . style . height = null ;
} else {
// compute the height difference between inner height and outer height
var style = getComputedStyle ( element , null ) ;
var heightOffset = style . boxSizing === 'content-box' ? - ( parseFloat ( style . paddingTop ) + parseFloat ( style . paddingBottom ) ) : parseFloat ( style . borderTopWidth ) + parseFloat ( style . borderBottomWidth ) ;
// resize the input to its content size
element . style . height = 'auto' ;
element . style . height = element . scrollHeight + heightOffset + 'px' ;
}
2016-08-06 22:18:44 +03:00
} , _this . handleKeyPress = function ( event ) {
2016-08-04 23:18:11 +03:00
// prevent insertion of more characters if we're a multiline input
// and maxLength exists
var _this$props2 = _this . props ;
var multiline = _this$props2 . multiline ;
var maxLength = _this$props2 . maxLength ;
var onKeyPress = _this$props2 . onKeyPress ;
if ( multiline && maxLength ) {
// check if smt is selected, in which case the newly added charcter would
// replace the selected characters, so the length of value doesn't actually
// increase.
var isReplacing = event . target . selectionEnd - event . target . selectionStart ;
var value = event . target . value ;
if ( ! isReplacing && value . length === maxLength ) {
event . preventDefault ( ) ;
event . stopPropagation ( ) ;
return ;
}
}
if ( onKeyPress ) onKeyPress ( event ) ;
2016-06-03 23:29:21 +03:00
} , _temp ) , _possibleConstructorReturn ( _this , _ret ) ;
}
_createClass ( Input , [ {
2016-07-04 23:03:57 +03:00
key : 'componentDidMount' ,
value : function componentDidMount ( ) {
2016-07-26 01:56:19 +03:00
if ( this . props . multiline ) {
window . addEventListener ( 'resize' , this . handleAutoresize ) ;
2016-08-04 23:18:11 +03:00
this . handleAutoresize ( ) ;
2016-07-26 01:56:19 +03:00
}
2016-07-04 23:03:57 +03:00
}
} , {
key : 'componentWillReceiveProps' ,
value : function componentWillReceiveProps ( nextProps ) {
if ( ! this . props . multiline && nextProps . multiline ) {
window . addEventListener ( 'resize' , this . handleAutoresize ) ;
} else if ( this . props . multiline && ! nextProps . multiline ) {
window . removeEventListener ( 'resize' , this . handleAutoresize ) ;
}
}
2016-08-04 23:18:11 +03:00
} , {
key : 'componentDidUpdate' ,
value : function componentDidUpdate ( ) {
// resize the textarea, if nessesary
if ( this . props . multiline ) this . handleAutoresize ( ) ;
}
2016-07-04 23:03:57 +03:00
} , {
key : 'componentWillUnmount' ,
value : function componentWillUnmount ( ) {
2016-08-04 23:18:11 +03:00
if ( this . props . multiline ) window . removeEventListener ( 'resize' , this . handleAutoresize ) ;
2016-07-04 23:03:57 +03:00
}
} , {
2016-06-03 23:29:21 +03:00
key : 'blur' ,
value : function blur ( ) {
this . refs . input . blur ( ) ;
}
} , {
key : 'focus' ,
value : function focus ( ) {
this . refs . input . focus ( ) ;
}
} , {
key : 'render' ,
value : function render ( ) {
var _classnames2 ;
var _props = this . props ;
var children = _props . children ;
var disabled = _props . disabled ;
var error = _props . error ;
var floating = _props . floating ;
var hint = _props . hint ;
var icon = _props . icon ;
2016-06-08 01:08:37 +03:00
var name = _props . name ;
2016-06-03 23:29:21 +03:00
var labelText = _props . label ;
var maxLength = _props . maxLength ;
var multiline = _props . multiline ;
var required = _props . required ;
var theme = _props . theme ;
var type = _props . type ;
var value = _props . value ;
2016-08-04 23:18:11 +03:00
var onKeyPress = _props . onKeyPress ;
2016-10-22 18:35:55 +03:00
var _props$rows = _props . rows ;
var rows = _props$rows === undefined ? 1 : _props$rows ;
2016-06-03 23:29:21 +03:00
2016-10-22 18:35:55 +03:00
var others = _objectWithoutProperties ( _props , [ 'children' , 'disabled' , 'error' , 'floating' , 'hint' , 'icon' , 'name' , 'label' , 'maxLength' , 'multiline' , 'required' , 'theme' , 'type' , 'value' , 'onKeyPress' , 'rows' ] ) ;
2016-06-03 23:29:21 +03:00
var length = maxLength && value ? value . length : 0 ;
var labelClassName = ( 0 , _classnames5 . default ) ( theme . label , _defineProperty ( { } , theme . fixed , ! floating ) ) ;
var className = ( 0 , _classnames5 . default ) ( theme . input , ( _classnames2 = { } , _defineProperty ( _classnames2 , theme . disabled , disabled ) , _defineProperty ( _classnames2 , theme . errored , error ) , _defineProperty ( _classnames2 , theme . hidden , type === 'hidden' ) , _defineProperty ( _classnames2 , theme . withIcon , icon ) , _classnames2 ) , this . props . className ) ;
2016-07-10 17:57:03 +03:00
var valuePresent = value !== null && value !== undefined && value !== '' && ! ( ( typeof value === 'undefined' ? 'undefined' : _typeof ( value ) ) === Number && isNaN ( value ) ) ;
2016-06-03 23:29:21 +03:00
2016-08-04 23:18:11 +03:00
var inputElementProps = _extends ( { } , others , {
2016-06-03 23:29:21 +03:00
className : ( 0 , _classnames5 . default ) ( theme . inputElement , _defineProperty ( { } , theme . filled , valuePresent ) ) ,
onChange : this . handleChange ,
ref : 'input' ,
role : 'input' ,
2016-06-08 01:08:37 +03:00
name : name ,
2016-06-03 23:29:21 +03:00
disabled : disabled ,
required : required ,
type : type ,
2016-08-04 23:18:11 +03:00
value : value
} ) ;
if ( ! multiline ) {
inputElementProps . maxLength = maxLength ;
inputElementProps . onKeyPress = onKeyPress ;
} else {
2016-10-22 18:35:55 +03:00
inputElementProps . rows = rows ;
2016-08-06 22:18:44 +03:00
inputElementProps . onKeyPress = this . handleKeyPress ;
2016-08-04 23:18:11 +03:00
}
2016-06-03 23:29:21 +03:00
return _react2 . default . createElement (
'div' ,
{ 'data-react-toolbox' : 'input' , className : className } ,
2016-08-06 22:18:44 +03:00
_react2 . default . createElement ( multiline ? 'textarea' : 'input' , inputElementProps ) ,
2016-06-03 23:29:21 +03:00
icon ? _react2 . default . createElement ( FontIcon , { className : theme . icon , value : icon } ) : null ,
_react2 . default . createElement ( 'span' , { className : theme . bar } ) ,
labelText ? _react2 . default . createElement (
'label' ,
{ className : labelClassName } ,
labelText ,
required ? _react2 . default . createElement (
'span' ,
{ className : theme . required } ,
' * '
) : null
) : null ,
hint ? _react2 . default . createElement (
'span' ,
2016-10-22 18:35:55 +03:00
{ hidden : labelText , className : theme . hint } ,
2016-06-03 23:29:21 +03:00
hint
) : null ,
error ? _react2 . default . createElement (
'span' ,
{ className : theme . error } ,
error
) : null ,
maxLength ? _react2 . default . createElement (
'span' ,
{ className : theme . counter } ,
length ,
'/' ,
maxLength
) : null ,
children
) ;
}
} ] ) ;
return Input ;
} ( _react2 . default . Component ) ;
Input . propTypes = {
children : _react2 . default . PropTypes . any ,
className : _react2 . default . PropTypes . string ,
disabled : _react2 . default . PropTypes . bool ,
error : _react2 . default . PropTypes . string ,
floating : _react2 . default . PropTypes . bool ,
hint : _react2 . default . PropTypes . string ,
icon : _react2 . default . PropTypes . oneOfType ( [ _react2 . default . PropTypes . string , _react2 . default . PropTypes . element ] ) ,
label : _react2 . default . PropTypes . string ,
maxLength : _react2 . default . PropTypes . number ,
multiline : _react2 . default . PropTypes . bool ,
2016-06-19 22:39:29 +03:00
name : _react2 . default . PropTypes . string ,
2016-06-03 23:29:21 +03:00
onBlur : _react2 . default . PropTypes . func ,
onChange : _react2 . default . PropTypes . func ,
onFocus : _react2 . default . PropTypes . func ,
onKeyPress : _react2 . default . PropTypes . func ,
required : _react2 . default . PropTypes . bool ,
2016-10-22 18:35:55 +03:00
rows : _react2 . default . PropTypes . number ,
2016-06-03 23:29:21 +03:00
theme : _react2 . default . PropTypes . shape ( {
bar : _react2 . default . PropTypes . string ,
counter : _react2 . default . PropTypes . string ,
disabled : _react2 . default . PropTypes . string ,
error : _react2 . default . PropTypes . string ,
errored : _react2 . default . PropTypes . string ,
hidden : _react2 . default . PropTypes . string ,
hint : _react2 . default . PropTypes . string ,
icon : _react2 . default . PropTypes . string ,
input : _react2 . default . PropTypes . string ,
inputElement : _react2 . default . PropTypes . string ,
required : _react2 . default . PropTypes . string ,
withIcon : _react2 . default . PropTypes . string
} ) ,
type : _react2 . default . PropTypes . string ,
value : _react2 . default . PropTypes . any
} ;
Input . defaultProps = {
className : '' ,
hint : '' ,
disabled : false ,
floating : true ,
multiline : false ,
required : false ,
type : 'text'
} ;
return Input ;
} ;
var Input = factory ( _FontIcon2 . default ) ;
2016-08-02 22:51:13 +03:00
exports . default = ( 0 , _reactCssThemr . themr ) ( _identifiers . INPUT , null , { withRef : true } ) ( Input ) ;
2016-06-03 23:29:21 +03:00
exports . inputFactory = factory ;
exports . Input = Input ;