cosmo-ui
Version:
Common React components
71 lines • 3.58 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var react_redux_1 = require("react-redux");
var _1 = require(".");
var reducers_1 = require("../reducers");
var selectors_1 = require("../selectors");
var actions_1 = require("../actions");
var styles = require('../../src/styles/components/forms.scss');
/**
* NOTE: you can't really have a number input in React
* because of the error message of changing a controlled
* component to an uncontrolled component. This happens because
* undefined is not a valid starting value for a field
* Instead it is much easier to use a string text field (which uses
* the empty string as a valid starting input) and then to parse
* the string as an int. This also gets round the problem that
* e is a valid number in html
*/
var NumberInputComponent = (function (_super) {
tslib_1.__extends(NumberInputComponent, _super);
function NumberInputComponent() {
return _super !== null && _super.apply(this, arguments) || this;
}
NumberInputComponent.prototype.renderField = function () {
var _a = this.props, name = _a.name, disabled = _a.disabled, placeholder = _a.placeholder;
return (React.createElement("input", { ref: this.setFieldRef, name: name, id: name + "Field", className: this.classNames(), placeholder: placeholder, type: "text", value: this.getValueFromState(), disabled: disabled, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }));
};
NumberInputComponent.prototype.getValueFromEvent = function (e) {
var val = e.currentTarget.value;
// handy trick to parse as either int or float
var parsed = val * 1;
if (Number.isNaN(parsed)) {
// the user could have added an invalid char
// at the end of a sequence of valid chars - so we need
// to go back and check the last know value
var oldValue = this.getValueFromState();
// if the last known value weas the empty string then
// we should convert it to undefined so it doesn't violate
// type rules in the state tree
return oldValue || undefined;
}
return parsed;
};
NumberInputComponent.prototype.getValueFromState = function () {
var _a = this.props, value = _a.value, onChange = _a.onChange, field = _a.field;
// the value we get from the state will be an int or float
var res = value && onChange ? value : field.value;
// the value we give to the input field must be a string
return res ? res.toString() : '';
};
return NumberInputComponent;
}(_1.BaseFormField));
var mapStateToProps = function (state, ownProps) { return (tslib_1.__assign({}, ownProps, { field: selectors_1.mapStateToField(state[reducers_1.FORM_REDUCER_KEY], ownProps) })); };
var mapDispatchToProps = {
setFormField: actions_1.setFormField,
};
var ConnectedNumberInput = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(NumberInputComponent);
var NumberInput = (function (_super) {
tslib_1.__extends(NumberInput, _super);
function NumberInput() {
return _super !== null && _super.apply(this, arguments) || this;
}
NumberInput.prototype.render = function () {
return (React.createElement(ConnectedNumberInput, tslib_1.__assign({}, this.props, { formName: this.formName })));
};
return NumberInput;
}(_1.FormFieldWrapper));
exports.NumberInput = NumberInput;
//# sourceMappingURL=number-input.js.map