chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
179 lines (175 loc) • 6.5 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _Input = _interopRequireDefault(require("../../react-chayns-input/component/Input"));
var _Formatter = _interopRequireDefault(require("../utils/Formatter"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* @component
*/
/**
* A text input that automatically formats its input with a formatter. Since
* this component is based on the `Input`-component, it takes any of the
* `Input`-components props, which are not listed here.
*
* This component only works as an uncontrolled component, meaning that it does
* not take a `value`-prop.
*/
class FormattedInput extends _react.Component {
constructor(props) {
var _this;
super(props);
_this = this;
this.lastSend = null;
this.handleInputChange = function (value) {
const {
formatter
} = _this;
const {
value: oldValue
} = _this.state;
if (!(formatter instanceof _Formatter.default)) {
return;
}
const {
selectionStart,
selectionEnd
} = _this.input;
const selection = {
start: selectionStart,
end: selectionEnd
};
const validationInfo = formatter.validate(value, selection);
const newValue = validationInfo.valid ? value : oldValue;
if (!validationInfo.valid) {
_this.selection = validationInfo.selection || null;
}
_this.setState({
value: newValue
});
if (validationInfo.valid) {
const parsedValue = formatter.parse(newValue);
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
_this.handleChangeEvent(parsedValue, ...args);
}
};
this.handleChangeEvent = function (value) {
const {
onChange
} = _this.props;
if (onChange && value !== _this.lastSend) {
_this.lastSend = value;
for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
args[_key2 - 1] = arguments[_key2];
}
onChange(value, ...args);
}
};
this.handleChange = function (value) {
const {
formatter
} = _this;
if (!(formatter instanceof _Formatter.default)) {
return;
}
const parsedValue = formatter.parse(value);
_this.setState({
value: formatter.format(parsedValue)
});
for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
args[_key3 - 1] = arguments[_key3];
}
_this.handleChangeEvent(parsedValue, ...args);
};
this.handleEnter = function (value) {
const {
onEnter
} = _this.props;
if (onEnter) {
const {
formatter
} = _this;
if (!(formatter instanceof _Formatter.default)) {
return;
}
const parsedValue = formatter.parse(value);
for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
args[_key4 - 1] = arguments[_key4];
}
onEnter(parsedValue, ...args);
}
};
this.formatter = props.initialFormatter;
this.lastSend = props.defaultValue;
this.state = {
value: this.formatter.format(props.defaultValue) || ''
};
this.handleChange = this.handleChange.bind(this);
this.handleChangeEvent = this.handleChangeEvent.bind(this);
}
componentDidUpdate() {
if (this.selection && this.input) {
this.input.setSelectionRange(this.selection.start, this.selection.start);
}
this.selection = null;
}
render() {
const {
value
} = this.state;
const {
defaultValue,
initialFormatter,
inputRef,
...props
} = this.props;
if (!(initialFormatter instanceof _Formatter.default)) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, props, {
inputRef: ref => {
this.input = ref;
if (inputRef) {
inputRef(ref);
}
},
value: value,
onChange: this.handleInputChange,
onBlur: this.handleChange,
onEnter: this.handleEnter
}));
}
}
exports.default = FormattedInput;
FormattedInput.propTypes = {
/**
* An instance of a formatter that will be used to format the value of the
* input.
*/
initialFormatter: _propTypes.default.instanceOf(_Formatter.default).isRequired,
/**
* The function that will be called on change.
*/
onChange: _propTypes.default.func,
onEnter: _propTypes.default.func,
inputRef: _propTypes.default.func,
/**
* The initial value of the input.
*/
defaultValue: _propTypes.default.any // eslint-disable-line react/forbid-prop-types
};
FormattedInput.defaultProps = {
onChange: null,
onEnter: null,
defaultValue: null,
inputRef: null
};
FormattedInput.displayName = 'FormattedInput';
//# sourceMappingURL=FormattedInput.js.map