semantic-ui-react-numberinput
Version:
Numeric input control with step buttons for Semantic UI React
373 lines (294 loc) • 15.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactEventInjector = require("react-event-injector");
var _lodash = _interopRequireDefault(require("lodash"));
var _semanticUiReact = require("semantic-ui-react");
var _PropValidators = _interopRequireDefault(require("./validators/PropValidators"));
var _Validators = _interopRequireDefault(require("./validators/Validators"));
var _style = _interopRequireDefault(require("./style"));
var _NumberUtils = _interopRequireDefault(require("./utils/NumberUtils"));
var _ButtonUtils = _interopRequireDefault(require("./utils/ButtonUtils"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
// noinspection JSUnusedGlobalSymbols
var NumberInput =
/*#__PURE__*/
function (_React$Component) {
_inherits(NumberInput, _React$Component);
function NumberInput() {
var _getPrototypeOf2;
var _this;
_classCallCheck(this, NumberInput);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(NumberInput)).call.apply(_getPrototypeOf2, [this].concat(args)));
_defineProperty(_assertThisInitialized(_this), "timeoutIDMap", {
increment: 0,
decrement: 0
});
_defineProperty(_assertThisInitialized(_this), "decrementOrIncrementValue", function (event, buttonType) {
var hasDoubleClicksEnabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
var _this$props = _this.props,
doubleClickStepAmount = _this$props.doubleClickStepAmount,
stepAmount = _this$props.stepAmount;
if (event) {
event.stopPropagation();
}
if (_this.timeoutIDMap[buttonType]) {
window.clearTimeout(_this.timeoutIDMap[buttonType]);
_this.decrementOrIncrementValueByStepAmount(buttonType, doubleClickStepAmount);
} else if (hasDoubleClicksEnabled && doubleClickStepAmount > 0) {
_this.timeoutIDMap[buttonType] = window.setTimeout(function () {
_this.decrementOrIncrementValueByStepAmount(buttonType, stepAmount);
}, NumberInput.DOUBLE_CLICK_DELAY_IN_MILLIS);
} else {
_this.decrementOrIncrementValueByStepAmount(buttonType, stepAmount);
}
});
_defineProperty(_assertThisInitialized(_this), "decrementOrIncrementValueByStepAmount", function (buttonType, stepAmount) {
var _this$props2 = _this.props,
maxValue = _this$props2.maxValue,
minValue = _this$props2.minValue,
onChange = _this$props2.onChange,
precision = _this$props2.precision,
value = _this$props2.value,
valueType = _this$props2.valueType;
var currentValue = _NumberUtils.default.getParsedValue(value, valueType);
var newValue = buttonType === 'decrement' ? currentValue - stepAmount : currentValue + stepAmount;
if (newValue < minValue) {
newValue = minValue;
} else if (newValue > maxValue) {
newValue = maxValue;
}
if (_Validators.default.isValidValue(newValue, valueType)) {
onChange(_NumberUtils.default.getValueWithPrecisionAsString(newValue, valueType, precision));
}
_this.timeoutIDMap[buttonType] = 0;
});
_defineProperty(_assertThisInitialized(_this), "changeValue", function (_ref) {
var value = _ref.target.value;
var _this$props3 = _this.props,
allowEmptyValue = _this$props3.allowEmptyValue,
maxValue = _this$props3.maxValue,
minValue = _this$props3.minValue,
onChange = _this$props3.onChange,
precision = _this$props3.precision,
valueType = _this$props3.valueType;
var newValue = _NumberUtils.default.getParsedValue(value, valueType);
if (_Validators.default.isValidValue(newValue, valueType) && newValue >= minValue && newValue <= maxValue) {
onChange(_NumberUtils.default.getValueWithPrecisionAsString(newValue, valueType, precision, value));
} else if (allowEmptyValue && !value) {
onChange('');
}
});
_defineProperty(_assertThisInitialized(_this), "onInputBlur", function () {
var _this$props4 = _this.props,
defaultValue = _this$props4.defaultValue,
onChange = _this$props4.onChange,
precision = _this$props4.precision,
value = _this$props4.value,
valueType = _this$props4.valueType;
if (defaultValue !== undefined && defaultValue !== null && !value) {
onChange(_NumberUtils.default.getValueWithPrecisionAsString(defaultValue, valueType, precision));
}
});
_defineProperty(_assertThisInitialized(_this), "onKeyDown", function (event) {
var handled = false;
switch (event.key) {
case 'ArrowUp':
case '+':
if (event.ctrlKey) {
_lodash.default.times(2, function () {
return _this.decrementOrIncrementValue(null, 'increment');
});
} else {
_this.decrementOrIncrementValue(null, 'increment', false);
}
handled = true;
break;
case 'ArrowDown':
case '-':
if (event.ctrlKey) {
_lodash.default.times(2, function () {
return _this.decrementOrIncrementValue(null, 'decrement');
});
} else {
_this.decrementOrIncrementValue(null, 'decrement', false);
}
handled = true;
break;
case 'PageUp':
_lodash.default.times(2, function () {
return _this.decrementOrIncrementValue(null, 'increment');
});
handled = true;
break;
case 'PageDown':
_lodash.default.times(2, function () {
return _this.decrementOrIncrementValue(null, 'decrement');
});
handled = true;
break;
// no default
}
if (handled) {
event.stopPropagation();
event.preventDefault();
}
});
_defineProperty(_assertThisInitialized(_this), "onWheel", function (event) {
var allowMouseWheel = _this.props.allowMouseWheel;
if (allowMouseWheel) {
event.preventDefault();
_this.decrementOrIncrementValueByStepAmount('increment', event.deltaY);
}
});
_defineProperty(_assertThisInitialized(_this), "getInputComponent", function () {
var _this$props5 = _this.props,
buttonPlacement = _this$props5.buttonPlacement,
disabled = _this$props5.disabled,
maxLength = _this$props5.maxLength,
placeholder = _this$props5.placeholder,
showError = _this$props5.showError,
size = _this$props5.size,
value = _this$props5.value;
var inputStyle = _objectSpread({}, _style.default.common.input, {}, _style.default[buttonPlacement].input);
return _react.default.createElement("div", {
className: "ui input ".concat(size).concat(showError ? ' error' : '').concat(disabled ? ' disabled' : '')
}, _react.default.createElement(_reactEventInjector.ActiveListener, {
onWheel: _this.onWheel
}, _react.default.createElement("input", {
type: "text",
style: inputStyle,
maxLength: maxLength,
placeholder: placeholder,
value: value,
onChange: _this.changeValue,
onBlur: _this.onInputBlur,
onKeyDown: _this.onKeyDown
})));
});
_defineProperty(_assertThisInitialized(_this), "getButtonComponent", function (buttonType) {
var _this$props6 = _this.props,
buttonPlacement = _this$props6.buttonPlacement,
doubleClickStepAmount = _this$props6.doubleClickStepAmount,
disabled = _this$props6.disabled,
showTooltips = _this$props6.showTooltips,
size = _this$props6.size;
var buttonStyle = _objectSpread({}, _style.default[buttonPlacement].button.base, {}, _style.default[buttonPlacement].button[buttonType]);
var buttonComponent = _react.default.createElement(_semanticUiReact.Button, {
size: size,
style: buttonStyle,
type: "button",
icon: _ButtonUtils.default.getButtonIconName(buttonType, buttonPlacement),
onClick: function onClick(event) {
return _this.decrementOrIncrementValue(event, buttonType);
},
disabled: disabled || _ButtonUtils.default.isDisabledButton(buttonType, _this.props)
});
if (showTooltips && doubleClickStepAmount > 0) {
var tooltipText = "Double-click to ".concat(buttonType, " by ").concat(doubleClickStepAmount);
return _react.default.createElement(_semanticUiReact.Popup, {
content: tooltipText,
mouseEnterDelay: NumberInput.TOOLTIP_SHOW_DELAY_IN_MILLIS,
mouseLeaveDelay: NumberInput.TOOLTIP_HIDE_DELAY_IN_MILLIS,
on: "hover",
trigger: buttonComponent
});
}
return buttonComponent;
});
return _this;
}
_createClass(NumberInput, [{
key: "render",
value: function render() {
_PropValidators.default.validatePropsInDevelopmentMode(this.props);
var _this$props7 = this.props,
buttonPlacement = _this$props7.buttonPlacement,
className = _this$props7.className,
id = _this$props7.id;
if (buttonPlacement === 'leftAndRight') {
return _react.default.createElement("div", {
id: id,
className: className
}, _react.default.createElement("div", {
style: _style.default.leftAndRight.outerDiv
}, this.getButtonComponent('decrement'), this.getInputComponent(), this.getButtonComponent('increment')));
}
return _react.default.createElement("div", {
id: id,
className: className
}, _react.default.createElement("div", {
style: _style.default.right.outerDiv
}, this.getInputComponent(), _react.default.createElement("div", {
style: _style.default.right.button.div
}, this.getButtonComponent('increment'), this.getButtonComponent('decrement'))));
}
}]);
return NumberInput;
}(_react.default.Component);
exports.default = NumberInput;
_defineProperty(NumberInput, "DOUBLE_CLICK_DELAY_IN_MILLIS", 250);
_defineProperty(NumberInput, "TOOLTIP_SHOW_DELAY_IN_MILLIS", 500);
_defineProperty(NumberInput, "TOOLTIP_HIDE_DELAY_IN_MILLIS", 200);
_defineProperty(NumberInput, "propTypes", {
value: _propTypes.default.string.isRequired,
onChange: _propTypes.default.func.isRequired,
allowEmptyValue: _propTypes.default.bool,
allowMouseWheel: _propTypes.default.bool,
buttonPlacement: _propTypes.default.oneOf(['right', 'leftAndRight']),
className: _propTypes.default.string,
defaultValue: _propTypes.default.number,
disabled: _propTypes.default.bool,
doubleClickStepAmount: _propTypes.default.number,
id: _propTypes.default.string,
minValue: _propTypes.default.number,
maxValue: _propTypes.default.number,
maxLength: _propTypes.default.number,
placeholder: _propTypes.default.string,
precision: _propTypes.default.number,
showError: _propTypes.default.bool,
showTooltips: _propTypes.default.bool,
size: _propTypes.default.oneOf(['mini', 'small', 'large', 'big', 'huge', 'massive']),
stepAmount: _propTypes.default.number,
valueType: _propTypes.default.oneOf(['integer', 'decimal'])
});
_defineProperty(NumberInput, "defaultProps", {
allowEmptyValue: false,
allowMouseWheel: false,
buttonPlacement: 'leftAndRight',
className: undefined,
defaultValue: undefined,
disabled: false,
doubleClickStepAmount: 0,
id: undefined,
minValue: 0,
maxValue: 9999999999,
maxLength: 10,
placeholder: 'Enter a value',
precision: 2,
showError: false,
showTooltips: true,
size: 'small',
stepAmount: 1,
valueType: 'integer'
});
//# sourceMappingURL=NumberInput.js.map