112 lines
4.4 KiB
JavaScript
112 lines
4.4 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { View, TextInput, StyleSheet, TouchableOpacity, Platform } from 'react-native';
|
|
import inputStyles from './styles';
|
|
import variables from '../../common/styles/variables';
|
|
import { Icon } from '../Icon';
|
|
const styles = StyleSheet.create(inputStyles);
|
|
export class Input extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.delayIsEditing = null;
|
|
this.handleChange = (value) => {
|
|
this.props.onChange && this.props.onChange(value);
|
|
};
|
|
this.handleBlur = (e) => {
|
|
if (this.props.onBlur) {
|
|
this.props.onBlur(e);
|
|
}
|
|
};
|
|
this.handleFocus = (e) => {
|
|
if (this.props.onFocus) {
|
|
this.props.onFocus(e);
|
|
}
|
|
};
|
|
this.delayTaskMemoize = (duration) => {
|
|
let timeoutId;
|
|
return {
|
|
cancel() {
|
|
clearTimeout(timeoutId);
|
|
},
|
|
delay(task) {
|
|
clearTimeout(timeoutId);
|
|
timeoutId = setTimeout(() => {
|
|
task();
|
|
}, duration || 0);
|
|
}
|
|
};
|
|
};
|
|
this.renderiOS = () => {
|
|
const tmpProps = this.modProps(this.props);
|
|
return (React.createElement(View, { style: [styles.container, this.props.style, { flexDirection: 'column', justifyContent: 'center' }] },
|
|
React.createElement(TextInput, Object.assign({}, tmpProps, { style: [styles.inputStyle, this.props.inputStyle], onChange: () => { return; }, onChangeText: this.handleChange, onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this) }))));
|
|
};
|
|
this.renderAndroidAndWeb = () => {
|
|
const androidClearButtonMode = this.props.clearButtonMode && this.props.clearButtonMode !== 'never';
|
|
const showDelIcon = androidClearButtonMode && this.props.value && this.state.isEditing;
|
|
const tmpProps = this.modProps(this.props);
|
|
return (React.createElement(View, { style: [styles.container, this.props.style, { flexDirection: 'row', alignItems: 'center' }] },
|
|
React.createElement(TextInput, Object.assign({}, tmpProps, { clearButtonMode: 'never', style: [styles.inputStyle, { flex: 1 }, this.props.inputStyle], onChange: () => { return; }, onChangeText: this.handleChange, onFocus: (e) => {
|
|
this.handleFocus(e);
|
|
this.delayIsEditing.cancel();
|
|
this.setState({
|
|
isEditing: true
|
|
});
|
|
}, onBlur: (e) => {
|
|
this.handleBlur(e);
|
|
this.delayIsEditing.delay(() => {
|
|
this.setState({
|
|
isEditing: false
|
|
});
|
|
});
|
|
}, underlineColorAndroid: 'transparent' })),
|
|
showDelIcon ?
|
|
React.createElement(TouchableOpacity, { onPress: () => {
|
|
// console.log('press delete icon')
|
|
this.handleChange('');
|
|
} },
|
|
React.createElement(Icon, { source: require(`../../common/images/icons/times-circle.png`), size: 15, tintColor: variables.mtdGrayLighter })) : null));
|
|
};
|
|
this.state = {
|
|
isEditing: false
|
|
};
|
|
this.delayIsEditing = this.delayTaskMemoize(3000);
|
|
}
|
|
componentWillUnmount() {
|
|
this.delayIsEditing.cancel();
|
|
}
|
|
modProps(props) {
|
|
const tmpProps = {
|
|
...props
|
|
};
|
|
if (Platform.OS === 'web') {
|
|
// web 平台不支持该属性
|
|
delete tmpProps.textAlign;
|
|
}
|
|
delete tmpProps.style;
|
|
delete tmpProps.inputStyle;
|
|
return tmpProps;
|
|
}
|
|
render() {
|
|
if (Platform.OS === 'ios') {
|
|
return this.renderiOS();
|
|
}
|
|
else {
|
|
return this.renderAndroidAndWeb();
|
|
}
|
|
}
|
|
}
|
|
Input.displayName = 'Input';
|
|
Input.defaultProps = {
|
|
onChange: null,
|
|
textAlign: 'left',
|
|
placeholder: '请输入',
|
|
placeholderTextColor: variables.mtdGrayLighter,
|
|
autoFocus: false,
|
|
autoCorrect: true,
|
|
keyboardType: 'default',
|
|
maxLength: null,
|
|
editable: true,
|
|
clearButtonMode: 'while-editing',
|
|
value: ''
|
|
};
|
|
//# sourceMappingURL=index.js.map
|