@bigbinary/neetoui
Version:
neetoUI drives the experience at all neeto products
240 lines (236 loc) • 10.9 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _extends from '@babel/runtime/helpers/extends';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default, { forwardRef, useState } from 'react';
import classnames from 'classnames';
import { u as useId } from './useId-Jj9hXm-g.js';
import 'react-router-dom';
import '@bigbinary/neeto-hotkeys';
import './overlayManager.js';
import { h as hyphenize } from './index-Dxaw6gl9.js';
import 'qs';
import { replace } from 'ramda';
import Label from './Label.js';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import '@bigbinary/neeto-cist';
import './en-CIkXIYyl.js';
import '@babel/runtime/helpers/toConsumableArray';
import 'dayjs';
import 'dayjs/plugin/localeData';
import 'dayjs/plugin/utc';
import 'dayjs/plugin/weekday';
import 'dayjs/plugin/weekOfYear';
import '@bigbinary/neeto-icons';
import './Button.js';
import './Spinner.js';
import './Tooltip.js';
import '@tippyjs/react';
import 'tippy.js';
import './Popover.js';
import './Typography.js';
var toFixed = function toFixed(numStr, precision) {
var num = Number(numStr);
if (Number.isNaN(num)) return numStr;
return num.toFixed(precision);
};
var isValidNumberString = function isValidNumberString(numStr) {
if (typeof numStr !== "string") return false;
return !Number.isNaN(Number(numStr.trim()));
};
var formatWithPrecision = function formatWithPrecision(value, precision) {
if (precision < 0 || !value) return value;
var str = value.toString();
if (isValidNumberString(str)) return toFixed(str, precision);
return str;
};
var enforceDecimalPrecision = function enforceDecimalPrecision(value, precision) {
if (precision < 0 || !value) return value;
var valueStr = value.toString();
if (precision === 0) return valueStr.split(".")[0];
var regex = new RegExp("^\\d*\\.?\\d{0,".concat(precision, "}$"));
if (regex.test(valueStr)) return value;
var parts = valueStr.split(".");
if (parts.length === 1) return parts[0];
var _parts = _slicedToArray(parts, 2),
integerPart = _parts[0],
decimalPart = _parts[1];
return "".concat(integerPart, ".").concat(decimalPart.substring(0, precision));
};
var formatWithRejectCharsRegex = function formatWithRejectCharsRegex(value, rejectCharsRegex) {
if (!rejectCharsRegex) return value;
var globalRegex = new RegExp(rejectCharsRegex, "g");
return replace(globalRegex, "", value);
};
var getTrimmedValue = function getTrimmedValue(value, disableTrimOnBlur) {
if (disableTrimOnBlur || typeof value !== "string") return value;
return value.trim();
};
var preserveCursor = function preserveCursor(e, updateValueFn) {
var input = e.target;
var prevCursor = input.selectionStart;
var prevValue = input.value;
updateValueFn();
var lengthDiff = input.value.length - prevValue.length;
var newCursor = Math.max(0, prevCursor + lengthDiff);
requestAnimationFrame(function () {
if (document.activeElement !== input) return;
input.setSelectionRange(newCursor, newCursor);
});
};
var _excluded = ["size", "type", "label", "dataCy", "error", "suffix", "prefix", "disabled", "helpText", "className", "nakedInput", "contentSize", "required", "maxLength", "unlimitedChars", "labelProps", "rejectCharsRegex", "onBlur", "disableTrimOnBlur", "precision"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var SIZES = {
small: "small",
medium: "medium",
large: "large"
};
var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
var _ref2, _formatWithPrecision;
var _ref$size = _ref.size,
size = _ref$size === void 0 ? SIZES.medium : _ref$size,
_ref$type = _ref.type,
type = _ref$type === void 0 ? "text" : _ref$type,
_ref$label = _ref.label,
label = _ref$label === void 0 ? "" : _ref$label,
_ref$dataCy = _ref.dataCy,
dataCy = _ref$dataCy === void 0 ? "" : _ref$dataCy,
_ref$error = _ref.error,
error = _ref$error === void 0 ? "" : _ref$error,
_ref$suffix = _ref.suffix,
suffix = _ref$suffix === void 0 ? null : _ref$suffix,
_ref$prefix = _ref.prefix,
prefix = _ref$prefix === void 0 ? null : _ref$prefix,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
_ref$helpText = _ref.helpText,
helpText = _ref$helpText === void 0 ? "" : _ref$helpText,
_ref$className = _ref.className,
className = _ref$className === void 0 ? "" : _ref$className,
_ref$nakedInput = _ref.nakedInput,
nakedInput = _ref$nakedInput === void 0 ? false : _ref$nakedInput,
_ref$contentSize = _ref.contentSize,
contentSize = _ref$contentSize === void 0 ? null : _ref$contentSize,
_ref$required = _ref.required,
required = _ref$required === void 0 ? false : _ref$required,
maxLength = _ref.maxLength,
_ref$unlimitedChars = _ref.unlimitedChars,
unlimitedChars = _ref$unlimitedChars === void 0 ? false : _ref$unlimitedChars,
labelProps = _ref.labelProps,
rejectCharsRegex = _ref.rejectCharsRegex,
onBlur = _ref.onBlur,
_ref$disableTrimOnBlu = _ref.disableTrimOnBlur,
disableTrimOnBlur = _ref$disableTrimOnBlu === void 0 ? false : _ref$disableTrimOnBlu,
_ref$precision = _ref.precision,
precision = _ref$precision === void 0 ? -1 : _ref$precision,
otherProps = _objectWithoutProperties(_ref, _excluded);
var _useState = useState(otherProps.value),
_useState2 = _slicedToArray(_useState, 2),
valueInternal = _useState2[0],
setValueInternal = _useState2[1];
var id = useId(otherProps.id);
var errorId = "error_".concat(id);
var helpTextId = "helpText_".concat(id);
var value = (_ref2 = (_formatWithPrecision = formatWithPrecision(otherProps.value, precision)) !== null && _formatWithPrecision !== void 0 ? _formatWithPrecision : valueInternal) !== null && _ref2 !== void 0 ? _ref2 : "";
var valueLength = (value === null || value === void 0 ? void 0 : value.toString().length) || 0;
var isCharacterLimitVisible = valueLength >= maxLength * 0.85;
var maxLengthError = unlimitedChars && valueLength > maxLength;
var onChange = function onChange(e) {
var _otherProps$onChange;
if (!otherProps.onChange || !otherProps.value) {
setValueInternal(e.target.value);
}
(_otherProps$onChange = otherProps.onChange) === null || _otherProps$onChange === void 0 || _otherProps$onChange.call(otherProps, e);
};
var isMaxLengthPresent = !!maxLength || maxLength === 0;
var handleChange = function handleChange(e) {
if (type === "file") {
onChange(e);
return;
}
var formattedValue = formatWithRejectCharsRegex(e.target.value, rejectCharsRegex);
formattedValue = enforceDecimalPrecision(formattedValue, precision);
if (formattedValue !== e.target.value) {
preserveCursor(e, function () {
return e.target.value = formattedValue;
});
}
onChange(e);
};
var handleOnBlur = function handleOnBlur(e) {
if (type === "file") {
onBlur === null || onBlur === void 0 || onBlur(e);
return;
}
var trimmedValue = getTrimmedValue(value, disableTrimOnBlur);
var formattedValue = formatWithPrecision(trimmedValue, precision);
if (formattedValue !== value) {
e.target.value = formattedValue;
handleChange(e);
}
onBlur === null || onBlur === void 0 || onBlur(e);
};
var handleOnWheel = function handleOnWheel(e) {
if (type === "number") e.target.blur();
};
var dataCyLabel = typeof label === "string" ? hyphenize(label) : hyphenize(dataCy);
return /*#__PURE__*/React__default.createElement("div", {
className: classnames(["neeto-ui-input__wrapper", className])
}, /*#__PURE__*/React__default.createElement("div", {
className: "neeto-ui-input__label-wrapper"
}, label && /*#__PURE__*/React__default.createElement(Label, _extends({
required: required,
"data-cy": "".concat(dataCyLabel, "-input-label"),
htmlFor: id
}, labelProps), label), isCharacterLimitVisible && /*#__PURE__*/React__default.createElement("p", {
className: classnames("neeto-ui-input__max-length", {
"neeto-ui-input__max-length--error": maxLengthError
})
}, valueLength, "/", maxLength)), /*#__PURE__*/React__default.createElement("div", {
"data-cy": "".concat(dataCyLabel, "-input"),
className: classnames("neeto-ui-input", {
"neeto-ui-input--naked": !!nakedInput,
"neeto-ui-input--error": !!error,
"neeto-ui-input--disabled": !!disabled,
"neeto-ui-input--small": size === "small",
"neeto-ui-input--medium": size === "medium",
"neeto-ui-input--large": size === "large"
})
}, prefix && /*#__PURE__*/React__default.createElement("div", {
className: "neeto-ui-input__prefix"
}, prefix), /*#__PURE__*/React__default.createElement("input", _extends({
"aria-invalid": !!error,
"data-cy": "".concat(dataCyLabel, "-input-field"),
size: contentSize,
"aria-describedby": classnames(_defineProperty(_defineProperty({}, errorId, !!error), helpTextId, helpText))
}, _objectSpread(_objectSpread(_objectSpread({
disabled: disabled,
id: id,
ref: ref,
required: required,
type: type
}, isMaxLengthPresent && !unlimitedChars && {
maxLength: maxLength
}), otherProps), {}, {
value: value
}), {
onBlur: handleOnBlur,
onChange: handleChange,
onWheel: handleOnWheel
})), suffix && /*#__PURE__*/React__default.createElement("div", {
className: "neeto-ui-input__suffix"
}, suffix)), !!error && /*#__PURE__*/React__default.createElement("p", {
className: "neeto-ui-input__error",
"data-cy": "".concat(dataCyLabel, "-input-error"),
id: errorId
}, error), helpText && /*#__PURE__*/React__default.createElement("p", {
className: "neeto-ui-input__help-text",
"data-cy": "".concat(dataCyLabel, "-input-help"),
id: helpTextId
}, helpText));
});
Input.displayName = "Input";
export { Input as default };
//# sourceMappingURL=Input.js.map