oneframe-react
Version:
Oneframe React ## Components, Hooks, Helper Functions & State Management
79 lines (78 loc) • 4.22 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const lodash_1 = require("lodash");
const react_number_format_1 = __importDefault(require("react-number-format"));
const prop_types_1 = __importDefault(require("prop-types"));
const NumberInputComponent = (props) => {
const { inputRef, className, onChange } = props, inputFormatOther = __rest(props, ["inputRef", "className", "onChange"]);
if (props.returnValue === 'formattedValue' && (props.prefix || props.suffix)) {
console.warn('If you use suffix or prefix, for returnValue props, you must choose one of the following;' +
'\n\n"floatValue (integer value)", "value (string value)"' +
'\n\notherwise you will enter an infinite loop');
}
return react_1.useMemo(() => {
return (react_1.default.createElement(react_number_format_1.default, Object.assign({ getInputRef: inputRef, className: `${className} oneframe-form-number-input-format` }, lodash_1.omit(inputFormatOther, 'returnValue'), { isAllowed: values => {
return !(props.returnValue === 'floatValue' && values.value.length === 16);
}, isNumericString: true, onValueChange: values => {
onChange({
target: {
value: props.returnValue ? values[props.returnValue] : values.value,
},
});
} })));
}, [className, inputFormatOther, props, onChange, inputRef]);
};
NumberInputComponent.propTypes = {
inputRef: prop_types_1.default.func,
onChange: prop_types_1.default.func,
thousandSeparator: prop_types_1.default.oneOfType([prop_types_1.default.bool, prop_types_1.default.oneOf([',', '.', ' '])]),
decimalSeparator: prop_types_1.default.oneOf([',', '.']),
decimalScale: prop_types_1.default.number,
fixedDecimalScale: prop_types_1.default.bool,
allowNegative: prop_types_1.default.bool,
allowEmptyFormatting: prop_types_1.default.bool,
prefix: prop_types_1.default.string,
suffix: prop_types_1.default.string,
format: prop_types_1.default.string,
mask: prop_types_1.default.string,
type: prop_types_1.default.oneOf(['text', 'tel', 'password']),
returnValue: prop_types_1.default.oneOf(['floatValue', 'formattedValue', 'value']),
displayType: prop_types_1.default.oneOf(['text', 'input', undefined]),
removeFormatting: prop_types_1.default.func,
};
exports.default = react_1.default.memo(NumberInputComponent, (p, n) => lodash_1.isEqual(p.onChange, n.onChange) &&
lodash_1.isEqual(p.thousandSeparator, n.thousandSeparator) &&
lodash_1.isEqual(p.decimalSeparator, n.decimalSeparator) &&
lodash_1.isEqual(p.decimalScale, n.decimalScale) &&
lodash_1.isEqual(p.fixedDecimalScale, n.fixedDecimalScale) &&
lodash_1.isEqual(p.allowNegative, n.allowNegative) &&
lodash_1.isEqual(p.allowEmptyFormatting, n.allowEmptyFormatting) &&
lodash_1.isEqual(p.mask, n.mask) &&
lodash_1.isEqual(p.returnValue, n.returnValue) &&
lodash_1.isEqual(p.removeFormatting, n.removeFormatting) &&
lodash_1.isEqual(p.format, n.format) &&
lodash_1.isEqual(p.suffix, n.suffix) &&
lodash_1.isEqual(p.prefix, n.prefix) &&
lodash_1.isEqual(p.type, n.type));