rn-material-ui-textfield/lib/module/components/field/index.js

Material UI textfield

var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _propTypes=_interopRequireDefault(require("prop-types"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _deprecatedReactNativePropTypes=require("deprecated-react-native-prop-types");var _line=_interopRequireDefault(require("../line"));var _label=_interopRequireDefault(require("../label"));var _affix=_interopRequireDefault(require("../affix"));var _helper=_interopRequireDefault(require("../helper"));var _counter=_interopRequireDefault(require("../counter"));var _styles=_interopRequireDefault(require("./styles"));var _jsxFileName="/Users/gabriel/Workspace/rn-material-ui-textfield/src/components/field/index.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}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){(0,_defineProperty2.default)(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;}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2.default)(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2.default)(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2.default)(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function startAnimation(animation,options,callback){_reactNative.Animated.timing(animation,options).start(callback);}function labelStateFromProps(props,state){var placeholder=props.placeholder,defaultValue=props.defaultValue;var value=state.value,receivedFocus=state.receivedFocus;return!!(placeholder||value||!receivedFocus&&defaultValue);}function errorStateFromProps(props,state){var error=props.error;return!!error;}var TextField=function(_PureComponent){(0,_inherits2.default)(TextField,_PureComponent);var _super=_createSuper(TextField);(0,_createClass2.default)(TextField,null,[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(_ref,state){var error=_ref.error,value=_ref.value;var newState={};if(error&&error!==state.error){newState.error=error;}if(value!==undefined&&value!==state.value){newState.value=value;}return newState;}}]);function TextField(props){var _this$props$inputRef;var _this;(0,_classCallCheck2.default)(this,TextField);_this=_super.call(this,props);_this.onBlur=_this.onBlur.bind((0,_assertThisInitialized2.default)(_this));_this.onFocus=_this.onFocus.bind((0,_assertThisInitialized2.default)(_this));_this.onPress=_this.focus.bind((0,_assertThisInitialized2.default)(_this));_this.onChange=_this.onChange.bind((0,_assertThisInitialized2.default)(_this));_this.onChangeText=_this.onChangeText.bind((0,_assertThisInitialized2.default)(_this));_this.onContentSizeChange=_this.onContentSizeChange.bind((0,_assertThisInitialized2.default)(_this));_this.onFocusAnimationEnd=_this.onFocusAnimationEnd.bind((0,_assertThisInitialized2.default)(_this));_this.createGetter('contentInset');_this.createGetter('labelOffset');_this.inputRef=(_this$props$inputRef=_this.props.inputRef)!==null&&_this$props$inputRef!==void 0?_this$props$inputRef:_react.default.createRef();_this.mounted=false;_this.focused=false;var _this$props=_this.props,value=_this$props.value,error=_this$props.error,fontSize=_this$props.fontSize;var labelState=labelStateFromProps(_this.props,{value:value})?1:0;var focusState=errorStateFromProps(_this.props)?-1:0;_this.state={value:value,error:error,focusAnimation:new _reactNative.Animated.Value(focusState),labelAnimation:new _reactNative.Animated.Value(labelState),receivedFocus:false,height:fontSize*1.5};return _this;}(0,_createClass2.default)(TextField,[{key:"createGetter",value:function createGetter(name){var _this2=this;this[name]=function(){var value=_this2.props[name];var defaultValue=_this2.constructor[name];return _objectSpread(_objectSpread({},defaultValue),value);};}},{key:"componentDidMount",value:function componentDidMount(){this.mounted=true;}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.mounted=false;}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var errorState=errorStateFromProps(this.props);var prevErrorState=errorStateFromProps(prevProps);if(errorState^prevErrorState){this.startFocusAnimation();}var labelState=labelStateFromProps(this.props,this.state);var prevLabelState=labelStateFromProps(prevProps,prevState);if(labelState^prevLabelState){this.startLabelAnimation();}}},{key:"startFocusAnimation",value:function startFocusAnimation(){var focusAnimation=this.state.focusAnimation;var duration=this.props.animationDuration;var options={toValue:this.focusState(),duration:duration,useNativeDriver:false};startAnimation(focusAnimation,options,this.onFocusAnimationEnd);}},{key:"startLabelAnimation",value:function startLabelAnimation(){var labelAnimation=this.state.labelAnimation;var duration=this.props.animationDuration;var options={toValue:this.labelState(),useNativeDriver:true,duration:duration};startAnimation(labelAnimation,options);}},{key:"setNativeProps",value:function setNativeProps(props){var input=this.inputRef.current;input.setNativeProps(props);}},{key:"focusState",value:function focusState(){if(errorStateFromProps(this.props)){return-1;}return this.focused?1:0;}},{key:"labelState",value:function labelState(){if(labelStateFromProps(this.props,this.state)){return 1;}return this.focused?1:0;}},{key:"focus",value:function focus(){var _this$props2=this.props,disabled=_this$props2.disabled,editable=_this$props2.editable;var input=this.inputRef.current;if(!disabled&&editable){input.focus();}}},{key:"blur",value:function blur(){var input=this.inputRef.current;input.blur();}},{key:"clear",value:function clear(){var input=this.inputRef.current;input.clear();this.onChangeText('');}},{key:"value",value:function value(){var defaultValue=this.props.defaultValue;var value=this.isDefaultVisible()?defaultValue:this.state.value;if(value==null){return'';}return typeof value==='string'?value:String(value);}},{key:"setValue",value:function setValue(value){this.setState({value:value});}},{key:"isFocused",value:function isFocused(){var input=this.inputRef.current;return input.isFocused();}},{key:"isRestricted",value:function isRestricted(){var limit=this.props.characterRestriction;var _this$value=this.value(),count=_this$value.length;return limit<count;}},{key:"isErrored",value:function isErrored(){return errorStateFromProps(this.props);}},{key:"isDefaultVisible",value:function isDefaultVisible(){var _this$state=this.state,value=_this$state.value,receivedFocus=_this$state.receivedFocus;var defaultValue=this.props.defaultValue;return!receivedFocus&&value==null&&defaultValue!=null;}},{key:"isPlaceholderVisible",value:function isPlaceholderVisible(){var placeholder=this.props.placeholder;return placeholder&&!this.focused&&!this.value();}},{key:"isLabelActive",value:function isLabelActive(){return this.labelState()===1;}},{key:"onFocus",value:function onFocus(event){var _this$props3=this.props,onFocus=_this$props3.onFocus,clearTextOnFocus=_this$props3.clearTextOnFocus;var receivedFocus=this.state.receivedFocus;if(typeof onFocus==='function'){onFocus(event);}if(clearTextOnFocus){this.clear();}this.focused=true;this.startFocusAnimation();this.startLabelAnimation();if(!receivedFocus){this.setState({receivedFocus:true,value:this.value()});}}},{key:"onBlur",value:function onBlur(event){var onBlur=this.props.onBlur;if(typeof onBlur==='function'){onBlur(event);}this.focused=false;this.startFocusAnimation();this.startLabelAnimation();}},{key:"onChange",value:function onChange(event){var onChange=this.props.onChange;if(typeof onChange==='function'){onChange(event);}}},{key:"onChangeText",value:function onChangeText(text){var _this$props4=this.props,onChangeText=_this$props4.onChangeText,formatText=_this$props4.formatText;if(typeof formatText==='function'){text=formatText(text);}this.setState({value:text});if(typeof onChangeText==='function'){onChangeText(text);}}},{key:"onContentSizeChange",value:function onContentSizeChange(event){var _this$props5=this.props,onContentSizeChange=_this$props5.onContentSizeChange,fontSize=_this$props5.fontSize;var height=event.nativeEvent.contentSize.height;if(typeof onContentSizeChange==='function'){onContentSizeChange(event);}this.setState({height:Math.max(fontSize*1.5,Math.ceil(height)+_reactNative.Platform.select({ios:4,android:1}))});}},{key:"onFocusAnimationEnd",value:function onFocusAnimationEnd(){var error=this.props.error;var retainedError=this.state.error;if(this.mounted&&!error&&retainedError){this.setState({error:null});}}},{key:"inputHeight",value:function inputHeight(){var computedHeight=this.state.height;var _this$props6=this.props,multiline=_this$props6.multiline,fontSize=_this$props6.fontSize,_this$props6$height=_this$props6.height,height=_this$props6$height===void 0?computedHeight:_this$props6$height;return multiline?height:fontSize*1.5;}},{key:"inputContainerHeight",value:function inputContainerHeight(){var _this$props7=this.props,labelFontSize=_this$props7.labelFontSize,multiline=_this$props7.multiline;var contentInset=this.contentInset();if(_reactNative.Platform.OS==='web'&&multiline){return'auto';}return contentInset.top+labelFontSize+contentInset.label+this.inputHeight()+contentInset.input;}},{key:"inputProps",value:function inputProps(){var store={};for(var key in _deprecatedReactNativePropTypes.TextInputPropTypes){if(key==='defaultValue'){continue;}if(key in this.props){store[key]=this.props[key];}}return store;}},{key:"inputStyle",value:function inputStyle(){var _this$props8=this.props,fontSize=_this$props8.fontSize,baseColor=_this$props8.baseColor,textColor=_this$props8.textColor,disabled=_this$props8.disabled,multiline=_this$props8.multiline;var color=disabled||this.isDefaultVisible()?baseColor:textColor;var style={fontSize:fontSize,color:color,height:this.inputHeight()};if(multiline){var lineHeight=fontSize*1.5;var offset=_reactNative.Platform.OS==='ios'?2:0;style.height+=lineHeight;style.transform=[{translateY:lineHeight+offset}];}return style;}},{key:"renderLabel",value:function renderLabel(props){var offset=this.labelOffset();var _this$props9=this.props,label=_this$props9.label,fontSize=_this$props9.fontSize,labelFontSize=_this$props9.labelFontSize,labelTextStyle=_this$props9.labelTextStyle;return _react.default.createElement(_label.default,(0,_extends2.default)({},props,{fontSize:fontSize,activeFontSize:labelFontSize,offset:offset,label:label,style:labelTextStyle,__source:{fileName:_jsxFileName,lineNumber:497,columnNumber:7}}));}},{key:"renderLine",value:function renderLine(props){return _react.default.createElement(_line.default,(0,_extends2.default)({},props,{__source:{fileName:_jsxFileName,lineNumber:509,columnNumber:12}}));}},{key:"renderAccessory",value:function renderAccessory(prop){var renderAccessory=this.props[prop];return typeof renderAccessory==='function'?renderAccessory():null;}},{key:"renderAffix",value:function renderAffix(type){var labelAnimation=this.state.labelAnimation;var _this$props10=this.props,affix=_this$props10[type],fontSize=_this$props10.fontSize,color=_this$props10.baseColor,style=_this$props10.affixTextStyle;if(affix==null){return null;}var props={type:type,style:style,color:color,fontSize:fontSize,labelAnimation:labelAnimation};return _react.default.createElement(_affix.default,(0,_extends2.default)({},props,{__source:{fileName:_jsxFileName,lineNumber:539,columnNumber:12}}),affix);}},{key:"renderHelper",value:function renderHelper(){var _this$state2=this.state,focusAnimation=_this$state2.focusAnimation,error=_this$state2.error;var _this$props11=this.props,title=_this$props11.title,disabled=_this$props11.disabled,baseColor=_this$props11.baseColor,errorColor=_this$props11.errorColor,style=_this$props11.titleTextStyle,limit=_this$props11.characterRestriction;var _this$value2=this.value(),count=_this$value2.length;var contentInset=this.contentInset();var containerStyle={paddingLeft:contentInset.left,paddingRight:contentInset.right,minHeight:contentInset.bottom};var styleProps={style:style,baseColor:baseColor,errorColor:errorColor};var counterProps=_objectSpread(_objectSpread({},styleProps),{},{limit:limit,count:count});var helperProps=_objectSpread(_objectSpread({},styleProps),{},{title:title,error:error,disabled:disabled,focusAnimation:focusAnimation});return _react.default.createElement(_reactNative.View,{style:[_styles.default.helperContainer,containerStyle],__source:{fileName:_jsxFileName,lineNumber:584,columnNumber:7}},_react.default.createElement(_helper.default,(0,_extends2.default)({},helperProps,{__source:{fileName:_jsxFileName,lineNumber:585,columnNumber:9}})),_react.default.createElement(_counter.default,(0,_extends2.default)({},counterProps,{__source:{fileName:_jsxFileName,lineNumber:586,columnNumber:9}})));}},{key:"renderInput",value:function renderInput(){var _this$props12=this.props,disabled=_this$props12.disabled,editable=_this$props12.editable,tintColor=_this$props12.tintColor,inputStyleOverrides=_this$props12.style;var props=this.inputProps();var inputStyle=this.inputStyle();return _react.default.createElement(_reactNative.TextInput,(0,_extends2.default)({selectionColor:tintColor},props,{style:[_styles.default.input,inputStyle,inputStyleOverrides],editable:!disabled&&editable,onChange:this.onChange,onChangeText:this.onChangeText,onContentSizeChange:this.onContentSizeChange,onFocus:this.onFocus,onBlur:this.onBlur,value:this.value(),ref:this.inputRef,__source:{fileName:_jsxFileName,lineNumber:603,columnNumber:7}}));}},{key:"render",value:function render(){var _this$state3=this.state,labelAnimation=_this$state3.labelAnimation,focusAnimation=_this$state3.focusAnimation;var _this$props13=this.props,editable=_this$props13.editable,disabled=_this$props13.disabled,lineType=_this$props13.lineType,disabledLineType=_this$props13.disabledLineType,lineWidth=_this$props13.lineWidth,activeLineWidth=_this$props13.activeLineWidth,disabledLineWidth=_this$props13.disabledLineWidth,tintColor=_this$props13.tintColor,baseColor=_this$props13.baseColor,errorColor=_this$props13.errorColor,containerStyle=_this$props13.containerStyle,inputContainerStyleOverrides=_this$props13.inputContainerStyle;var restricted=this.isRestricted();var contentInset=this.contentInset();var inputContainerStyle={paddingTop:contentInset.top,paddingRight:contentInset.right,paddingBottom:contentInset.input,paddingLeft:contentInset.left,height:this.inputContainerHeight()};var containerProps={style:containerStyle,onStartShouldSetResponder:function onStartShouldSetResponder(){return true;},onResponderRelease:this.onPress,pointerEvents:!disabled?'auto':'none'};var inputContainerProps={style:[this.constructor.inputContainerStyle,inputContainerStyle,inputContainerStyleOverrides]};var styleProps={disabled:disabled,restricted:restricted,baseColor:baseColor,tintColor:tintColor,errorColor:errorColor,contentInset:contentInset,focusAnimation:focusAnimation,labelAnimation:labelAnimation};var lineProps=_objectSpread(_objectSpread({},styleProps),{},{lineWidth:lineWidth,activeLineWidth:activeLineWidth,disabledLineWidth:disabledLineWidth,lineType:lineType,disabledLineType:disabledLineType});return _react.default.createElement(_reactNative.View,(0,_extends2.default)({},containerProps,{__source:{fileName:_jsxFileName,lineNumber:687,columnNumber:7}}),_react.default.createElement(_reactNative.Animated.View,(0,_extends2.default)({},inputContainerProps,{__source:{fileName:_jsxFileName,lineNumber:688,columnNumber:9}}),this.renderLine(lineProps),this.renderAccessory('renderLeftAccessory'),_react.default.createElement(_reactNative.View,{style:_styles.default.stack,pointerEvents:editable?'auto':'none',__source:{fileName:_jsxFileName,lineNumber:691,columnNumber:11}},this.renderLabel(styleProps),_react.default.createElement(_reactNative.View,{style:_styles.default.row,__source:{fileName:_jsxFileName,lineNumber:693,columnNumber:13}},this.renderAffix('prefix'),this.renderInput(),this.renderAffix('suffix'))),this.renderAccessory('renderRightAccessory')),this.renderHelper());}}]);return TextField;}(_react.PureComponent);exports.default=TextField;(0,_defineProperty2.default)(TextField,"defaultProps",{underlineColorAndroid:'transparent',disableFullscreenUI:true,autoCapitalize:'sentences',editable:true,animationDuration:225,fontSize:16,labelFontSize:12,tintColor:'rgb(0, 145, 234)',textColor:'rgba(0, 0, 0, .87)',baseColor:'rgba(0, 0, 0, .38)',errorColor:'rgb(213, 0, 0)',lineWidth:_reactNative.StyleSheet.hairlineWidth,activeLineWidth:2,disabledLineWidth:1,lineType:'solid',disabledLineType:'dotted',disabled:false});(0,_defineProperty2.default)(TextField,"propTypes",_objectSpread(_objectSpread({},_deprecatedReactNativePropTypes.TextInputPropTypes),{},{animationDuration:_propTypes.default.number,fontSize:_propTypes.default.number,labelFontSize:_propTypes.default.number,contentInset:_propTypes.default.shape({top:_propTypes.default.number,label:_propTypes.default.number,input:_propTypes.default.number,left:_propTypes.default.number,right:_propTypes.default.number,bottom:_propTypes.default.number}),labelOffset:_label.default.propTypes.offset,labelTextStyle:_deprecatedReactNativePropTypes.TextPropTypes.style,titleTextStyle:_deprecatedReactNativePropTypes.TextPropTypes.style,affixTextStyle:_deprecatedReactNativePropTypes.TextPropTypes.style,tintColor:_propTypes.default.string,textColor:_propTypes.default.string,baseColor:_propTypes.default.string,label:_propTypes.default.string,title:_propTypes.default.string,characterRestriction:_propTypes.default.number,error:_propTypes.default.string,errorColor:_propTypes.default.string,lineWidth:_propTypes.default.number,activeLineWidth:_propTypes.default.number,disabledLineWidth:_propTypes.default.number,lineType:_line.default.propTypes.lineType,disabledLineType:_line.default.propTypes.lineType,disabled:_propTypes.default.bool,formatText:_propTypes.default.func,renderLeftAccessory:_propTypes.default.func,renderRightAccessory:_propTypes.default.func,prefix:_propTypes.default.string,suffix:_propTypes.default.string,containerStyle:_deprecatedReactNativePropTypes.ViewPropTypes.style,inputContainerStyle:_deprecatedReactNativePropTypes.ViewPropTypes.style}));(0,_defineProperty2.default)(TextField,"inputContainerStyle",_styles.default.inputContainer);(0,_defineProperty2.default)(TextField,"contentInset",{top:16,label:4,input:8,left:0,right:0,bottom:8});(0,_defineProperty2.default)(TextField,"labelOffset",{x0:0,y0:0,x1:0,y1:0});
//# sourceMappingURL=index.js.map