@spaced-out/ui-design-system
Version:
Sense UI components library
344 lines (343 loc) • 12 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Input = exports.INPUT_TYPES = exports.EXPONENT_CHARACTER_LIST = void 0;
var React = _interopRequireWildcard(require("react"));
var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
var _classify = require("../../utils/classify");
var _qa = require("../../utils/qa");
var _ConditionalWrapper = require("../ConditionalWrapper");
var _Icon = require("../Icon");
var _Separator = require("../Separator");
var _Text = require("../Text");
var _InputModule = _interopRequireDefault(require("./Input.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const EXPONENT_CHARACTER_LIST = exports.EXPONENT_CHARACTER_LIST = ['E', 'e'];
const INPUT_TYPES = exports.INPUT_TYPES = Object.freeze({
text: 'text',
number: 'number',
password: 'password',
email: 'email',
tel: 'tel',
url: 'url',
date: 'date',
'datetime-local': 'datetime-local',
time: 'time',
week: 'week',
month: 'month',
color: 'color',
search: 'search'
});
const Input_ = (props, ref) => {
const {
value,
type,
onChange,
onFocus,
onBlur,
onIconRightClick,
onContainerClick,
name,
disabled,
placeholder,
error,
locked,
errorText,
label,
helperText,
rightSlot,
classNames,
size = 'medium',
iconLeftName = '',
iconLeftType = 'regular',
iconRightName = '',
iconRightType = 'regular',
required,
readOnly,
boxRef,
onKeyDown,
disallowExponents,
hideNumberSpinner,
hidePasswordToggleIcon,
disableWheelPropagation = false,
testId,
prefix,
...inputProps
} = props;
const [showPassword, setShowPassword] = React.useState(false);
const inputRef = /*#__PURE__*/React.createRef();
React.useImperativeHandle(ref, () => inputRef.current);
const controlledInputFilled = value !== '';
React.useEffect(() => {
const inputElement = inputRef.current;
if (!inputElement || type !== INPUT_TYPES.number || !disableWheelPropagation) {
return;
}
const handleWheelEvent = e => {
if (disableWheelPropagation) {
e.stopPropagation();
}
};
inputElement.addEventListener('wheel', handleWheelEvent, {
passive: false
});
return () => {
inputElement.removeEventListener('wheel', handleWheelEvent);
};
}, [type, disableWheelPropagation]);
const handleRightIconClick = e => {
if (locked || disabled) {
return;
}
if (type === 'password') {
setShowPassword(!showPassword);
}
onIconRightClick?.(e);
};
const handleKeyDown = e => {
if (type === INPUT_TYPES.number && disallowExponents) {
if (EXPONENT_CHARACTER_LIST.includes(e.key)) {
e.preventDefault();
}
}
onKeyDown?.(e);
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
"data-testid": (0, _qa.generateTestId)({
base: testId,
slot: 'root'
}),
className: (0, _classify.classify)(_InputModule.default.wrapper, {
[_InputModule.default.filled]: controlledInputFilled ?? false,
[_InputModule.default.withError]: error ?? false
}, classNames?.wrapper),
children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
"data-testid": (0, _qa.generateTestId)({
base: testId,
slot: 'label'
}),
className: _InputModule.default.info,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: _InputModule.default.infoContent,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.FormLabelSmall, {
color: "secondary",
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'labelText'
}),
children: label ?? ''
}), "\xA0", required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.FormLabelSmall, {
color: "danger",
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'requiredIndicator'
}),
children: '*'
})]
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
"data-testid": (0, _qa.generateTestId)({
base: testId,
slot: 'box'
}),
className: (0, _classify.classify)(_InputModule.default.box, {
[_InputModule.default.inputDisabled]: disabled ?? false,
[_InputModule.default.medium]: size === 'medium',
[_InputModule.default.small]: size === 'small',
[_InputModule.default.locked]: locked,
[_InputModule.default.color]: type === 'color',
[_InputModule.default.hideNumberSpinner]: hideNumberSpinner
}, classNames?.box),
onClick: !(disabled || locked) ? onContainerClick : undefined,
ref: boxRef,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ConditionalWrapper.ConditionalWrapper, {
condition: !!rightSlot,
wrapper: children => /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
className: _InputModule.default.rightSlotContainer,
"data-testid": (0, _qa.generateTestId)({
base: testId,
slot: 'rightSlotContainer'
}),
children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Separator.Separator, {
classNames: {
wrapper: (0, _classify.classify)(_InputModule.default.inputRightSlotSeparator, {
[_InputModule.default.small]: size === 'small'
})
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _classify.classify)(_InputModule.default.rightSlotContent, classNames?.rightSlotContent),
"data-testid": (0, _qa.generateTestId)({
base: testId,
slot: 'rightSlotContainer'
}),
onClick: e => {
e.preventDefault();
},
children: rightSlot
})]
}),
children: [iconLeftName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'iconLeft'
}),
className: (0, _classify.classify)(classNames?.iconLeft),
name: iconLeftName,
color: disabled ? 'disabled' : 'secondary',
size: "small",
type: iconLeftType
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.ConditionalWrapper, {
condition: !(0, _isEmpty.default)(prefix),
wrapper: children => /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
className: _InputModule.default.prefixContainer,
"data-testid": (0, _qa.generateTestId)({
base: testId,
slot: 'prefixContainer'
}),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: (0, _classify.classify)(_InputModule.default.prefixText, classNames?.prefixText),
"data-testid": (0, _qa.generateTestId)({
base: testId,
slot: 'prefixText'
}),
children: prefix
}), children]
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
...inputProps,
"data-testid": (0, _qa.generateTestId)({
base: testId,
slot: 'input'
}),
disabled: locked || disabled,
name: name,
ref: inputRef,
placeholder: placeholder,
value: value,
onChange: onChange,
onFocus: onFocus,
onBlur: onBlur,
type: showPassword ? 'text' : type,
readOnly: readOnly,
onKeyDown: handleKeyDown
})
}), type === 'color' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
"data-testid": (0, _qa.generateTestId)({
base: testId,
slot: 'colorText'
}),
className: (0, _classify.classify)(_InputModule.default.colorText, _InputModule.default[size], {
[_InputModule.default.hasValue]: value
}),
children: value ? value : placeholder
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(RightInputIcon, {
testId: testId,
isEmail: type === 'email',
isPassword: type === 'password',
showPassword: showPassword,
showPasswordToggleIcon: !hidePasswordToggleIcon,
isLocked: locked,
isDisabled: disabled,
onClick: handleRightIconClick,
iconRightName: iconRightName,
iconRightType: iconRightType,
className: classNames?.iconRight
})]
})
}), (Boolean(helperText) || error) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
"data-testid": (0, _qa.generateTestId)({
base: testId,
slot: 'helperText'
}),
className: _InputModule.default.info,
children: error && errorText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
color: "danger",
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'errorText'
}),
children: errorText
}) : typeof helperText === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
color: disabled ? 'disabled' : 'secondary',
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'helperText'
}),
children: helperText
}) : helperText
})]
});
};
const RightInputIcon = _ref => {
let {
testId,
isEmail,
isPassword,
showPassword,
showPasswordToggleIcon,
isLocked,
isDisabled,
iconRightName,
iconRightType,
...rightIconProps
} = _ref;
if (isLocked) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'iconRight'
}),
name: "lock",
color: isDisabled ? 'disabled' : 'secondary',
size: "small",
...rightIconProps
});
}
if (isEmail) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'iconRight'
}),
name: "at",
color: isDisabled ? 'disabled' : 'secondary',
size: "small",
type: iconRightType,
...rightIconProps
});
}
if (isPassword && showPasswordToggleIcon) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'iconRight'
}),
name: showPassword ? 'eye-slash' : 'eye',
color: isDisabled ? 'disabled' : 'secondary',
size: "small",
type: iconRightType,
...rightIconProps,
className: (0, _classify.classify)(_InputModule.default.rightClickableIcon, {
[_InputModule.default.disabled]: isDisabled || isLocked
})
});
}
if (iconRightName) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'iconRight'
}),
name: iconRightName || '',
color: isDisabled ? 'disabled' : 'secondary',
size: "small",
type: iconRightType,
...rightIconProps
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
};
const Input = exports.Input = /*#__PURE__*/React.forwardRef(Input_);