sc-react-ions
Version:
An open source set of React components that implement Ambassador's Design and UX patterns.
270 lines (232 loc) • 8.52 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _bind = require('classnames/bind');
var _bind2 = _interopRequireDefault(_bind);
var _style = require('./style.scss');
var _style2 = _interopRequireDefault(_style);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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; }
/**
* The Input component.
*/
var Input = function (_React$Component) {
_inherits(Input, _React$Component);
function Input(props) {
_classCallCheck(this, Input);
var _this = _possibleConstructorReturn(this, (Input.__proto__ || Object.getPrototypeOf(Input)).call(this, props));
_initialiseProps.call(_this);
return _this;
}
return Input;
}(_react2.default.Component);
Input.defaultProps = {
disabled: false,
value: '',
valueType: 'string'
};
Input.propTypes = {
/**
* A class name to be used for local styles or integrations (required to support styled-components)
*/
className: _propTypes2.default.string,
/**
* Whether the input is disabled.
*/
disabled: _propTypes2.default.bool,
/**
* Disallow the user from editing the input.
*/
readOnly: _propTypes2.default.bool,
/**
* Text shown above the input.
*/
label: _propTypes2.default.string,
/**
* Value of the input.
*/
value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
/**
* Type of the value.
*/
valueType: _propTypes2.default.oneOf(['string', 'number']),
/**
* Optional placeholder text.
*/
placeholder: _propTypes2.default.string,
/**
* Name of the input.
*/
name: _propTypes2.default.string,
/**
* Name of the input.
*/
prefix: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),
/**
* Optional prefix to add to the input.
*/
suffix: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),
/**
* Optional suffix to add to the input.
*/
optClass: _propTypes2.default.string,
/**
* A callback function to be called when the input changes.
*/
changeCallback: _propTypes2.default.func,
/**
* A callback function to be called when the input is focused.
*/
focusCallback: _propTypes2.default.func,
/**
* A callback function to be called when the input is blurred.
*/
blurCallback: _propTypes2.default.func,
/**
* A callback function to be called when the input is clicked.
*/
onClick: _propTypes2.default.func,
/**
* A callback function to be called when the onkeyup event is fired.
*/
onKeyUp: _propTypes2.default.func,
/**
* A callback function to be called when the onkeypress event is fired.
*/
onKeyPress: _propTypes2.default.func,
/**
* A callback function to be called when the onkeydown event is fired.
*/
onKeyDown: _propTypes2.default.func,
/**
* A helper will render inline style='width: <value>'.
*/
width: _propTypes2.default.string,
/**
* A fallback value for when the value is null.
*/
nullValue: _propTypes2.default.string,
/**
* A string to be used as the ID.
*/
id: _propTypes2.default.string
};
var _initialiseProps = function _initialiseProps() {
var _this2 = this;
this._getValue = function (props) {
return props.value === null && typeof props.nullValue !== 'undefined' ? props.nullValue : props.value;
};
this.componentWillMount = function () {
_this2.setState({ value: _this2._getValue(_this2.props) });
};
this.componentDidMount = function () {
_this2.handleInlineStyles();
};
this.componentWillReceiveProps = function (nextProps) {
if (nextProps.value !== _this2.props.value) {
_this2.setState({ value: _this2._getValue(nextProps) });
}
};
this.componentDidUpdate = function (prevProps) {
if (prevProps.suffix !== _this2.props.suffix || prevProps.prefix !== _this2.props.prefix) {
_this2.handleInlineStyles();
}
};
this.handleInlineStyles = function () {
var inputStyles = {};
if (_this2.props.prefix) {
// Add 24 to accommodate for left and right padding of prefix (16+8)
inputStyles.paddingLeft = _this2._prefix.getBoundingClientRect().width + 24;
}
if (_this2.props.suffix) {
// Add 24 to accommodate for left and right padding of prefix (8+16)
inputStyles.paddingRight = _this2._suffix.getBoundingClientRect().width + 24;
}
_this2.setState({ inputStyles: inputStyles });
};
this.handleChange = function (event) {
event.persist();
var value = _this2.props.valueType === 'number' && event.target.value !== '' && !isNaN(event.target.value) ? parseFloat(event.target.value) : event.target.value;
_this2.setState({ value: event.target.value }, function () {
_this2.props.changeCallback && _this2.props.changeCallback({ target: { name: _this2.props.name, value: value } });
});
};
this.handleFocus = function (event) {
_this2.props.focusCallback && _this2.props.focusCallback(event);
};
this.handleBlur = function (event) {
_this2.props.blurCallback && _this2.props.blurCallback(event);
};
this.focus = function () {
_this2._input.focus();
};
this.render = function () {
var _props = _this2.props,
prefix = _props.prefix,
suffix = _props.suffix,
label = _props.label,
optClass = _props.optClass,
className = _props.className,
width = _props.width,
disabled = _props.disabled;
var cx = _bind2.default.bind(_style2.default);
var disabledClass = disabled ? _style2.default['input-disabled'] : null;
var widthStyle = width ? { width: width } : null;
var prefixClass = prefix ? _style2.default['prefix'] : null;
var suffixClass = suffix ? _style2.default['suffix'] : null;
var inputClass = cx(_style2.default['input-component'], className, optClass, disabledClass, prefixClass, suffixClass);
var inputContainerClass = _style2.default['input-container'];
return _react2.default.createElement(
'div',
{ className: inputClass },
label && _react2.default.createElement(
'label',
null,
label
),
_react2.default.createElement(
'div',
{ className: inputContainerClass, style: widthStyle },
prefix && _react2.default.createElement(
'div',
{ ref: function ref(c) {
return _this2._prefix = c;
}, className: prefixClass },
prefix
),
_react2.default.createElement('input', {
id: _this2.props.id,
ref: function ref(c) {
return _this2._input = c;
},
value: _this2.state.value,
onFocus: _this2.handleFocus,
onChange: _this2.handleChange,
onClick: _this2.props.onClick,
onBlur: _this2.handleBlur,
disabled: _this2.props.disabled,
readOnly: _this2.props.readOnly,
placeholder: _this2.props.placeholder,
style: _this2.state.inputStyles,
onKeyUp: _this2.props.onKeyUp,
onKeyPress: _this2.props.onKeyPress,
onKeyDown: _this2.props.onKeyDown }),
suffix && _react2.default.createElement(
'div',
{ ref: function ref(c) {
return _this2._suffix = c;
}, className: suffixClass },
suffix
)
)
);
};
};
exports.default = Input;