backpack-ui
Version:
Lonely Planet's Components
322 lines (244 loc) • 8.18 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require("babel-runtime/helpers/extends");
var _extends3 = _interopRequireDefault(_extends2);
var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
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 _react2 = _interopRequireDefault(_react);
var _propTypes = require("prop-types");
var _propTypes2 = _interopRequireDefault(_propTypes);
var _radium = require("radium");
var _radium2 = _interopRequireDefault(_radium);
var _styles = require("./styles");
var _styles2 = _interopRequireDefault(_styles);
var _icon = require("../icon");
var _icon2 = _interopRequireDefault(_icon);
var _createQAHook = require("../../utils/createQAHook");
var _createQAHook2 = _interopRequireDefault(_createQAHook);
var _validReactAttributes = require("../../utils/validReactAttributes");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Component that replicates the HTML5 number input
*
* @usage
* <NumberInput
* id="guests"
* min={0}
* max={10}
* value={2}
* />
*/
var NumberInput = function (_React$Component) {
(0, _inherits3.default)(NumberInput, _React$Component);
function NumberInput(props) {
(0, _classCallCheck3.default)(this, NumberInput);
var _this = (0, _possibleConstructorReturn3.default)(this, (NumberInput.__proto__ || (0, _getPrototypeOf2.default)(NumberInput)).call(this, props));
_this.state = {
value: props.value
};
_this.setValue = _this.setValue.bind(_this);
_this.handleKeyDown = _this.handleKeyDown.bind(_this);
_this.handleChange = _this.handleChange.bind(_this);
_this.increment = _this.increment.bind(_this);
_this.decrement = _this.decrement.bind(_this);
return _this;
}
(0, _createClass3.default)(NumberInput, [{
key: "setValue",
value: function setValue() {
return this.state.value ? parseInt(this.state.value, 10) : 0;
}
}, {
key: "handleKeyDown",
value: function handleKeyDown(event) {
var whitelistKeyCodes = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, // 0 - 9
37, 39, // left arrow, right arrow
8, 9, 46, // backspace, tab, delete
91, 93, // command
13, 17, 16, 18, // enter, ctrl, shift, alt
27];
if (whitelistKeyCodes.indexOf(event.keyCode) === -1) {
event.preventDefault();
}
if (event.keyCode === 38) {
this.increment();
}
if (event.keyCode === 40) {
this.decrement();
}
}
}, {
key: "handleChange",
value: function handleChange(event) {
var value = void 0;
if (event.target.value) {
value = parseInt(event.target.value, 10);
} else {
value = "";
}
this.setState({
value: value
});
}
}, {
key: "increment",
value: function increment(event) {
var value = this.setValue();
if (!value) {
this.setState({
value: this.props.min
});
}
if (value !== this.props.max && this.state.value < this.props.max) {
this.setState({
value: value + 1
});
}
if (this.state.value < this.props.min) {
this.setState({
value: this.props.min
});
}
if (event) {
event.preventDefault();
}
}
}, {
key: "decrement",
value: function decrement(event) {
var value = this.setValue();
if (!value) {
this.setState({
value: this.props.min
});
}
if (value !== this.props.min && this.state.value > this.props.min) {
this.setState({
value: value - 1
});
}
if (this.state.value > this.props.max) {
this.setState({
value: this.props.max
});
}
if (event) {
event.preventDefault();
}
}
}, {
key: "render",
value: function render() {
var _props = this.props,
id = _props.id,
name = _props.name,
min = _props.min,
max = _props.max,
placeholder = _props.placeholder,
required = _props.required,
size = _props.size,
theme = _props.theme,
fill = _props.fill;
var style = [_styles2.default.base];
style.push(_styles2.default.element.input.base);
if (size) {
style.push(_styles2.default.size[size]);
style.push(_styles2.default.element.input.size[size]);
}
if (theme) {
style.push(_styles2.default.theme[theme]);
style.push(_styles2.default.element.input.theme[theme]);
}
if (fill) {
style.push(_styles2.default.fill);
}
var props = {
style: style,
type: "text",
id: id,
name: name || id
};
props.placeholder = placeholder || null;
props.required = required || null;
props.min = min || null;
props.max = max || null;
var sanitizedProps = (0, _validReactAttributes.validReactAttributes)(props);
return _react2.default.createElement(
"div",
{
className: "NumberInput",
style: _styles2.default.element.numberInput.container.base
},
_react2.default.createElement("input", (0, _extends3.default)({}, sanitizedProps, {
"data-testid": (0, _createQAHook2.default)(this.state.value, "number", "input"),
value: this.state.value,
onChange: this.handleChange,
onKeyDown: this.handleKeyDown
})),
_react2.default.createElement(
"button",
{
style: [_styles2.default.element.numberInput.button.base, _styles2.default.element.numberInput.button.size[size], _styles2.default.element.numberInput.button.plus.size[size]],
"data-testid": (0, _createQAHook2.default)("increment", "plus", "btn"),
onClick: this.increment,
type: "button",
key: "plus"
},
_react2.default.createElement(_icon2.default.Plus, null)
),
_react2.default.createElement(
"button",
{
style: [_styles2.default.element.numberInput.button.base, _styles2.default.element.numberInput.button.size[size], _styles2.default.element.numberInput.button.minus],
"data-testid": (0, _createQAHook2.default)("decrement", "minus", "btn"),
onClick: this.decrement,
type: "button",
key: "minus"
},
_react2.default.createElement(_icon2.default.Minus, null)
)
);
}
}]);
return NumberInput;
}(_react2.default.Component);
NumberInput.propTypes = {
id: _propTypes2.default.string.isRequired,
name: _propTypes2.default.string,
value: _propTypes2.default.number,
min: _propTypes2.default.number,
max: _propTypes2.default.number,
placeholder: _propTypes2.default.string,
required: _propTypes2.default.bool,
size: _propTypes2.default.oneOf(["tiny", "small", "medium", "large", "huge"]),
theme: _propTypes2.default.oneOf(["base", "light", "dark", "inputGroup"]),
/**
* Fills the width of the parent
*/
fill: _propTypes2.default.bool
};
NumberInput.defaultProps = {
id: "",
name: "",
value: null,
min: 0,
max: 100,
placeholder: "",
required: false,
size: "medium",
theme: "base",
fill: false
};
NumberInput.styles = _styles2.default;
exports.default = (0, _radium2.default)(NumberInput);