modo-mobile
Version:
A mobile UI toolkit, based on React
340 lines (298 loc) • 13 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
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 _react = require('react');
var React = _interopRequireWildcard(_react);
var _classnames3 = require('classnames');
var _classnames4 = _interopRequireDefault(_classnames3);
var _numberKeyboard = require('../number-keyboard');
var _numberKeyboard2 = _interopRequireDefault(_numberKeyboard);
var _icon = require('../icon');
var _icon2 = _interopRequireDefault(_icon);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function noop() {}
function normalizeValue(value) {
if (typeof value === 'undefined' || value === null) {
return '';
}
return value + '';
}
var InputItem = function (_React$Component) {
(0, _inherits3['default'])(InputItem, _React$Component);
function InputItem(props) {
(0, _classCallCheck3['default'])(this, InputItem);
var _this = (0, _possibleConstructorReturn3['default'])(this, (InputItem.__proto__ || Object.getPrototypeOf(InputItem)).call(this, props));
_this.onInputChange = function (e) {
var value = e.target.value;
var type = _this.props.type;
var newValue = value;
switch (type) {
case 'bankCard':
newValue = value.replace(/\D/g, '').replace(/(....)(?=.)/g, '$1 ');
break;
case 'phone':
newValue = value.replace(/\D/g, '').substring(0, 11);
var valueLen = newValue.length;
if (valueLen > 3 && valueLen < 8) {
newValue = newValue.substr(0, 3) + ' ' + newValue.substr(3);
} else if (valueLen >= 8) {
newValue = newValue.substr(0, 3) + ' ' + newValue.substr(3, 4) + ' ' + newValue.substr(7);
}
break;
case 'digit':
newValue = value.replace(/\D/g, '');
break;
case 'text':
case 'password':
default:
break;
}
_this.handleOnChange(newValue, newValue !== value);
};
_this.handleOnChange = function (value) {
var isMutated = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var onChange = _this.props.onChange;
_this.setState({ value: value });
if (onChange) {
isMutated ? setTimeout(function () {
return onChange(value);
}) : onChange(value);
}
};
_this.onInputBlur = function (e) {
var value = e.target.value;
_this.onBlur(value);
};
_this.onInputFocus = function (e) {
var value = e.target.value;
_this.onFocus(value);
};
_this.onFocus = function (value) {
if (_this.debounceTimeout) {
clearTimeout(_this.debounceTimeout);
_this.debounceTimeout = null;
}
_this.setState({
focus: true
});
if (_this.props.onFocus) {
_this.props.onFocus(value);
}
};
_this.onBlur = function (value) {
if (_this.inputRef) {
_this.debounceTimeout = window.setTimeout(function () {
if (document.activeElement !== _this.inputRef) {
_this.setState({
focus: false
});
}
}, 50);
}
if (_this.props.onBlur) {
_this.props.onBlur(value);
}
};
_this.onVirtualFocus = function () {
var _this$props = _this.props,
disabled = _this$props.disabled,
readOnly = _this$props.readOnly;
if (disabled || readOnly) {
return;
}
_this.setState({ focus: true }, function () {
_this.addBlurListener();
});
};
_this.onVirtualBlur = function () {
var value = _this.state.value;
_this.onBlur(value);
};
_this.onVirtualConfirm = function () {
var value = _this.state.value;
_this.onBlur(value);
var onVirtualKeyboardConfirm = _this.props.onVirtualKeyboardConfirm;
if (onVirtualKeyboardConfirm) onVirtualKeyboardConfirm(value);
};
_this.onVirtualEnter = function (num) {
var value = _this.state.value;
var maxLength = _this.props.maxLength;
if (maxLength) {
if (value.length < maxLength) {
_this.handleOnChange(value + num);
}
} else {
_this.handleOnChange(value + num);
}
};
_this.onVirtualDelete = function () {
var value = _this.state.value;
if (value === '') return;
_this.handleOnChange(value.substr(0, value.length - 1));
};
_this.addBlurListener = function () {
document.addEventListener('click', _this.doBlur, false);
};
_this.removeBlurListener = function () {
document.removeEventListener('click', _this.doBlur, false);
};
_this.doBlur = function (ev) {
var value = _this.state.value;
if (ev.target !== _this.inputRef) {
_this.onBlur(value);
}
};
_this.clearInput = function () {
_this.setState({
value: ''
});
if (_this.props.onChange) {
_this.props.onChange('');
}
_this.focus();
};
// this is instance method for user to use
_this.focus = function () {
_this.removeBlurListener();
if (_this.inputRef) {
_this.inputRef.focus();
}
setTimeout(function () {
_this.addBlurListener();
}, 50);
};
_this.state = {
placeholder: props.placeholder,
value: normalizeValue(props.value || props.defaultValue)
};
return _this;
}
(0, _createClass3['default'])(InputItem, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if ('value' in nextProps) {
this.setState({
value: nextProps.value
});
}
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
if (this.debounceTimeout) {
window.clearTimeout(this.debounceTimeout);
this.debounceTimeout = null;
}
}
}, {
key: 'render',
value: function render() {
var _classnames,
_this2 = this;
var _props = this.props,
prefixCls = _props.prefixCls,
title = _props.title,
extra = _props.extra,
type = _props.type,
name = _props.name,
align = _props.align,
clear = _props.clear,
error = _props.error,
brief = _props.brief,
placeholder = _props.placeholder,
readOnly = _props.readOnly,
disabled = _props.disabled,
maxLength = _props.maxLength,
className = _props.className;
var _state = this.state,
value = _state.value,
focus = _state.focus;
var inputType = 'text';
if (type === 'bankCard' || type === 'phone' || type === 'digit') {
inputType = 'tel';
} else {
inputType = type;
}
var wrapCls = (0, _classnames4['default'])('' + prefixCls, className, (_classnames = {}, (0, _defineProperty3['default'])(_classnames, prefixCls + '-disabled', disabled), (0, _defineProperty3['default'])(_classnames, prefixCls + '-' + align, align), (0, _defineProperty3['default'])(_classnames, prefixCls + '-focus', focus), (0, _defineProperty3['default'])(_classnames, prefixCls + '-has-clear', clear), (0, _defineProperty3['default'])(_classnames, prefixCls + '-has-error', error), (0, _defineProperty3['default'])(_classnames, prefixCls + '-virtual-show', focus && type === 'money'), _classnames));
var virtualCls = (0, _classnames4['default'])(prefixCls + '-virtual-value', (0, _defineProperty3['default'])({}, prefixCls + '-virtual-placeholder', !value));
return React.createElement(
'div',
{ className: wrapCls },
React.createElement(
'div',
{ className: prefixCls + '-container' },
React.createElement(
'div',
{ className: prefixCls + '-extra' },
extra
),
React.createElement(
'div',
{ className: prefixCls + '-title' },
title
),
React.createElement(
'div',
{ className: prefixCls + '-control' },
type === 'money' ? React.createElement(
React.Fragment,
null,
React.createElement(
'div',
{ ref: function ref(el) {
return _this2.inputRef = el;
}, className: prefixCls + '-virtual-input', onClick: this.onVirtualFocus },
React.createElement(
'span',
{ className: virtualCls },
focus || value ? value : placeholder
)
),
React.createElement(_numberKeyboard2['default'], { visible: focus, onHide: this.onVirtualBlur, onDelete: this.onVirtualDelete, onEnter: this.onVirtualEnter, onConfirm: this.onVirtualConfirm })
) : React.createElement('input', { className: prefixCls + '-input', ref: function ref(el) {
return _this2.inputRef = el;
}, type: inputType, value: normalizeValue(value), name: name, placeholder: placeholder, readOnly: readOnly, disabled: disabled, maxLength: maxLength, onChange: this.onInputChange, onFocus: this.onInputFocus, onBlur: this.onInputBlur, autoComplete: 'off' }),
clear && !readOnly && !disabled && focus && value && ('' + value).length > 0 ? React.createElement(
'div',
{ className: prefixCls + '-clear', onClick: this.clearInput },
React.createElement(_icon2['default'], { type: 'close-circle' })
) : null
)
),
brief || error ? React.createElement(
'div',
{ className: prefixCls + '-tip' },
error || brief
) : null
);
}
}]);
return InputItem;
}(React.Component);
exports['default'] = InputItem;
InputItem.defaultProps = {
prefixCls: 'm-input-item',
type: 'text',
align: 'left',
placeholder: '',
readOnly: false,
disabled: false,
clear: false,
onChange: noop,
onBlur: noop,
onFocus: noop,
onVirtualKeyboardConfirm: noop
};
module.exports = exports['default'];