@ant-design/react-native/lib/input-item/index.js

基于蚂蚁金服移动设计规范的 React Native 组件库

"use strict";"use client";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 _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _icon=_interopRequireDefault(require("../icon"));var _style=require("../style");var _Input=_interopRequireDefault(require("./Input"));var _index=_interopRequireDefault(require("./style/index"));function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=(0,_getPrototypeOf2.default)(derived);return(0,_possibleConstructorReturn2.default)(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],(0,_getPrototypeOf2.default)(_this).constructor):derived.apply(_this,args));}var __rest=void 0&&(void 0).__rest||function(s,e){var t={};for(var p in s){if(Object.prototype.hasOwnProperty.call(s,p)&&e.indexOf(p)<0)t[p]=s[p];}if(s!=null&&typeof Object.getOwnPropertySymbols==="function")for(var i=0,p=Object.getOwnPropertySymbols(s);i<p.length;i++){if(e.indexOf(p[i])<0&&Object.prototype.propertyIsEnumerable.call(s,p[i]))t[p[i]]=s[p[i]];}return t;};var noop=function noop(){};function normalizeValue(value){if(typeof value==='undefined'||value===null){return'';}return value;}var InputItem=function(_React$Component){function InputItem(){var _this2;(0,_classCallCheck2.default)(this,InputItem);_this2=_callSuper(this,InputItem,arguments);_this2.state={focus:false};_this2.onChange=function(text){var _this2$props=_this2.props,onChange=_this2$props.onChange,type=_this2$props.type;var maxLength=_this2.props.maxLength;switch(type){case'bankCard':text=text.replace(/\D/g,'');if(maxLength>0){text=text.substring(0,maxLength);}text=text.replace(/\D/g,'').replace(/(....)(?=.)/g,'$1 ');break;case'phone':text=text.replace(/\D/g,'').substring(0,11);var valueLen=text.length;if(valueLen>3&&valueLen<8){text="".concat(text.substr(0,3)," ").concat(text.substr(3));}else if(valueLen>=8){text="".concat(text.substr(0,3)," ").concat(text.substr(3,4)," ").concat(text.substr(7));}break;case'password':break;default:break;}if(onChange){onChange(text);}};_this2.onInputBlur=function(){_this2.setState({focus:false},function(){if(_this2.props.onBlur){_this2.props.onBlur(_this2.props.value);}});};_this2.onInputFocus=function(){_this2.setState({focus:true},function(){if(_this2.props.onFocus){_this2.props.onFocus(_this2.props.value);}});};_this2.onInputClear=function(){if(_this2.inputRef){_this2.inputRef.clear();}_this2.onChange('');};_this2.focus=function(){if(_this2.inputRef){_this2.inputRef.focus();}};return _this2;}(0,_inherits2.default)(InputItem,_React$Component);return(0,_createClass2.default)(InputItem,[{key:"render",value:function render(){var _this3=this;var android=_reactNative.Platform.OS==='android';var _a=this.props,type=_a.type,editable=_a.editable,clear=_a.clear,children=_a.children,error=_a.error,extra=_a.extra,labelNumber=_a.labelNumber,last=_a.last,onExtraClick=_a.onExtraClick,onErrorClick=_a.onErrorClick,styles=_a.styles,disabled=_a.disabled,restProps=__rest(_a,["type","editable","clear","children","error","extra","labelNumber","last","onExtraClick","onErrorClick","styles","disabled"]);var focus=this.state.focus;var value=restProps.value,defaultValue=restProps.defaultValue,style=restProps.style;var valueProps;if('value'in this.props){valueProps={value:normalizeValue(value)};}else{valueProps={defaultValue:defaultValue};}return _react.default.createElement(_style.WithTheme,{styles:styles,themeStyles:_index.default},function(s,theme){var containerStyle={borderBottomWidth:last?0:_reactNative.StyleSheet.hairlineWidth};var textStyle={width:theme.font_size_heading*labelNumber*1.05};var extraStyle={width:typeof extra==='string'&&extra.length>0?extra.length*theme.font_size_heading:0};var keyboardTypeArray=['default','email-address','numeric','phone-pad','ascii-capable','numbers-and-punctuation','url','number-pad','name-phone-pad','decimal-pad','twitter','web-search'];var keyboardType='default';if(type==='number'){keyboardType='numeric';}else if(type==='bankCard'){keyboardType='number-pad';}else if(type==='phone'){keyboardType='phone-pad';}else if(type&&keyboardTypeArray.indexOf(type)>-1){keyboardType=type;}var disabledStyle=disabled?s.inputDisabled:{};return _react.default.createElement(_reactNative.View,{style:[s.container,containerStyle]},children?typeof children==='string'?_react.default.createElement(_reactNative.Text,{style:[s.text,textStyle]},children):_react.default.createElement(_reactNative.View,{style:textStyle},children):null,_react.default.createElement(_Input.default,(0,_extends2.default)({editable:!disabled&&editable,clearButtonMode:clear?'while-editing':'never',underlineColorAndroid:"transparent",ref:function ref(el){return _this3.inputRef=el;}},restProps,valueProps,{style:[{height:!android?theme.list_item_height_sm:theme.list_item_height},s.input,error?s.inputErrorColor:null,disabledStyle,style],keyboardType:keyboardType,onChange:function onChange(event){return _this3.onChange(event.nativeEvent.text);},secureTextEntry:type==='password',onBlur:_this3.onInputBlur,onFocus:_this3.onInputFocus})),editable&&clear&&value&&focus&&android?_react.default.createElement(_reactNative.TouchableOpacity,{style:[s.clear],onPress:_this3.onInputClear,hitSlop:{top:5,left:5,bottom:5,right:5}},_react.default.createElement(_icon.default,{name:"close",color:'white',size:'xxs'})):null,extra?_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onExtraClick},_react.default.createElement(_reactNative.View,null,typeof extra==='string'?_react.default.createElement(_reactNative.Text,{style:[s.extra,extraStyle]},extra):extra)):null,error&&_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onErrorClick},_react.default.createElement(_reactNative.View,{style:[s.errorIcon]},_react.default.createElement(_icon.default,{name:"info-circle",style:{color:theme.brand_error}}))));});}}]);}(_react.default.Component);InputItem.defaultProps={type:'text',editable:true,clear:false,onChange:noop,onBlur:noop,onFocus:noop,extra:'',onExtraClick:noop,error:false,onErrorClick:noop,labelNumber:4,labelPosition:'left',textAlign:'left',last:false};var _default=InputItem;exports.default=_default;