@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
569 lines (568 loc) • 20.3 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SubmitButton = InputSubmitButton;
exports.inputDefaultProps = exports.default = void 0;
var _parse = _interopRequireDefault(require("core-js-pure/stable/json/parse.js"));
var _react = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _useCombinedRef = _interopRequireDefault(require("../../shared/helpers/useCombinedRef.js"));
var _useMountEffect = _interopRequireDefault(require("../../shared/helpers/useMountEffect.js"));
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _extendPropsWithContext = require("../../shared/helpers/extendPropsWithContext.js");
var _filterValidProps = require("../../shared/helpers/filterValidProps.js");
var _useId = _interopRequireDefault(require("../../shared/helpers/useId.js"));
var _Suffix = _interopRequireDefault(require("../../shared/helpers/Suffix.js"));
var _componentHelper = require("../../shared/component-helper.js");
var _AlignmentHelper2 = _interopRequireDefault(require("../../shared/AlignmentHelper.js"));
var _SpacingUtils = require("../space/SpacingUtils.js");
var _SkeletonHelper = require("../skeleton/SkeletonHelper.js");
var _Button = _interopRequireDefault(require("../button/Button.js"));
var _FormLabel = _interopRequireDefault(require("../form-label/FormLabel.js"));
var _FormStatus = _interopRequireDefault(require("../form-status/FormStatus.js"));
var _IconPrimary = _interopRequireDefault(require("../icon-primary/IconPrimary.js"));
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _jsxRuntime = require("react/jsx-runtime");
var _AlignmentHelper;
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); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const inputDefaultProps = exports.inputDefaultProps = {
type: 'text',
size: null,
value: 'initval',
id: null,
label: null,
labelDirection: 'vertical',
labelSrOnly: null,
status: null,
globalStatus: null,
statusState: 'error',
statusProps: null,
statusNoAnimation: null,
inputState: null,
autocomplete: 'off',
placeholder: null,
showClearButton: null,
keepPlaceholder: null,
suffix: null,
align: null,
selectAll: null,
stretch: null,
disabled: null,
skeleton: null,
inputClassName: null,
inputAttributes: null,
inputElement: null,
ref: null,
icon: null,
iconSize: null,
iconPosition: 'left',
readOnly: false,
innerElement: null,
submitElement: null,
submitButtonTitle: null,
clearButtonTitle: null,
submitButtonVariant: 'secondary',
submitButtonIcon: 'loupe',
submitButtonStatus: null,
className: null,
children: null,
onChange: null,
onKeyDown: null,
onSubmit: null,
onFocus: null,
onBlur: null,
onSubmitFocus: null,
onSubmitBlur: null,
onClear: null
};
function hasValue(value) {
return (typeof value === 'string' || typeof value === 'number') && String(value).length > 0 || false;
}
function getValue(props) {
const value = (0, _componentHelper.processChildren)(props);
if (value === '' || hasValue(value)) {
return value;
}
return props.value;
}
function InputComponent({
ref,
...restProps
}) {
var _formElement$useId;
const context = (0, _react.useContext)(_Context.default);
const inputRef = (0, _react.useRef)(null);
const combinedRef = (0, _useCombinedRef.default)(ref, inputRef);
const formElement = context === null || context === void 0 ? void 0 : context.formElement;
const _id = (0, _useId.default)(restProps.id || (formElement === null || formElement === void 0 || (_formElement$useId = formElement.useId) === null || _formElement$useId === void 0 ? void 0 : _formElement$useId.call(formElement)));
const selectAllTimeoutRef = (0, _react.useRef)(undefined);
const initialValue = (0, _react.useMemo)(() => {
const v = getValue(restProps);
if (v !== 'initval' && hasValue(v)) {
return v;
}
return null;
}, []);
const [value, setValue] = (0, _react.useState)(initialValue);
const [inputState, setInputState] = (0, _react.useState)(restProps.inputState || 'virgin');
const prevValuePropRef = (0, _react.useRef)(restProps.value);
const props = (0, _extendPropsWithContext.extendPropsWithContext)({
...inputDefaultProps,
...(0, _componentHelper.removeUndefinedProps)({
...restProps
})
}, inputDefaultProps, {
skeleton: context === null || context === void 0 ? void 0 : context.skeleton
}, context.getTranslation(restProps).Input, (0, _filterValidProps.pickFormElementProps)(context === null || context === void 0 ? void 0 : context.formElement), context.Input);
const propValue = getValue(restProps);
if (propValue !== 'initval' && propValue !== value && propValue !== prevValuePropRef.current) {
setValue(propValue);
}
prevValuePropRef.current = restProps.value;
if (restProps.inputState && restProps.inputState !== inputState) {
setInputState(restProps.inputState);
}
const updateInputValue = (0, _react.useCallback)(() => {
if (inputRef.current && !restProps.inputElement) {
const hasVal = hasValue(value);
const newValue = hasVal ? String(value) : '';
if (inputRef.current.value !== newValue) {
inputRef.current.value = newValue;
}
}
}, [value, restProps.inputElement]);
(0, _react.useEffect)(() => {
updateInputValue();
});
(0, _useMountEffect.default)(() => {
if (restProps.showClearButton && restProps.iconPosition === 'right') {
(0, _componentHelper.warn)('You cannot have a clear button and iconPosition="right"');
}
return () => {
clearTimeout(selectAllTimeoutRef.current);
};
});
const onFocusHandler = (0, _react.useCallback)(event => {
const {
value: eventValue
} = event.target;
setInputState('focus');
(0, _componentHelper.dispatchCustomElementEvent)(props, 'onFocus', {
value: eventValue,
event
});
if (props.selectAll && inputRef.current) {
clearTimeout(selectAllTimeoutRef.current);
selectAllTimeoutRef.current = setTimeout(() => {
try {
inputRef.current.select();
} catch (e) {
(0, _componentHelper.warn)(e);
}
}, 1);
}
}, [props.selectAll, props.onFocus]);
const onBlurHandler = (0, _react.useCallback)(event => {
const {
value: eventValue
} = event.target;
const result = (0, _componentHelper.dispatchCustomElementEvent)(props, 'onBlur', {
value: eventValue,
event
});
if (result !== false) {
setInputState(hasValue(eventValue) && eventValue !== String(prevValuePropRef.current) ? 'dirty' : 'initial');
}
}, [props.onBlur]);
const onChangeHandler = (0, _react.useCallback)(event => {
const {
value: eventValue
} = event.target;
const result = (0, _componentHelper.dispatchCustomElementEvent)(props, 'onChange', {
value: eventValue,
event
});
if (result === false) {
updateInputValue();
return;
}
if (typeof result === 'string') {
setValue(result);
} else {
setValue(eventValue);
}
}, [props.onChange, updateInputValue]);
const onKeyDownHandler = (0, _react.useCallback)(event => {
const eventValue = event.target.value;
(0, _componentHelper.dispatchCustomElementEvent)(props, 'onKeyDown', {
value: eventValue,
event
});
if (event.key === 'Enter') {
(0, _componentHelper.dispatchCustomElementEvent)(props, 'onSubmit', {
value: eventValue,
event
});
}
}, [props.onKeyDown, props.onSubmit]);
const clearValueHandler = (0, _react.useCallback)(event => {
const previousValue = value;
const clearedValue = '';
setValue(clearedValue);
(0, _componentHelper.dispatchCustomElementEvent)(props, 'onChange', {
value: clearedValue,
event
});
(0, _componentHelper.dispatchCustomElementEvent)(props, 'onClear', {
value: clearedValue,
previousValue,
event
});
inputRef.current.focus({
preventScroll: true
});
}, [value, props.onChange, props.onClear]);
const {
type,
size,
label,
labelDirection,
labelSrOnly,
status,
globalStatus,
statusState,
statusProps,
statusNoAnimation,
disabled,
skeleton,
placeholder,
showClearButton,
keepPlaceholder,
_omitInputShellClass,
suffix,
align,
inputClassName,
submitButtonTitle,
clearButtonTitle,
submitButtonVariant,
submitButtonIcon,
submitButtonStatus,
submitElement,
innerElement,
autocomplete,
readOnly,
stretch,
inputAttributes,
icon,
iconPosition,
iconSize,
className,
id: _id_unused,
children,
value: _value,
selectAll,
inputElement: _inputElement,
ref: _ref,
inputState: _inputState,
onSubmit,
onClear,
...inputSubmitButtonAttributes
} = props;
const {
onSubmitBlur,
onSubmitFocus,
...attributes
} = inputSubmitButtonAttributes;
let usedInputState = inputState;
if (disabled || skeleton) {
usedInputState = 'disabled';
}
const sizeIsNumber = parseFloat(size) > 0;
const id = _id;
const showStatus = (0, _componentHelper.getStatusState)(status);
const hasSubmitButton = submitElement || submitElement !== false && type === 'search';
const hasVal = hasValue(value);
const usedIconSize = size === 'large' && (iconSize === 'default' || !iconSize) ? 'medium' : iconSize;
const mainParams = (0, _SpacingUtils.applySpacing)(props, {
className: (0, _clsx.default)("dnb-input dnb-input__border--tokens dnb-form-component", className, icon && `dnb-input--icon-position-${iconPosition} dnb-input--has-icon` + (usedIconSize ? ` dnb-input--icon-size-${usedIconSize}` : ""), type && `dnb-input--${type}`, size && !sizeIsNumber && `dnb-input--${size}`, hasSubmitButton && 'dnb-input--has-submit-element', innerElement && 'dnb-input--has-inner-element', showClearButton && 'dnb-input--has-clear-button', align && `dnb-input__align--${align}`, status && `dnb-input__status--${statusState}`, disabled && 'dnb-input--disabled', labelDirection && `dnb-input--${labelDirection}`, stretch && `dnb-input--stretch`, keepPlaceholder && 'dnb-input--keep-placeholder'),
'data-input-state': usedInputState,
'data-has-content': hasVal ? 'true' : 'false'
});
const innerParams = {
className: 'dnb-input__inner'
};
let {
inputElement: InputElement
} = props;
const usedInputAttributes = inputAttributes ? typeof inputAttributes === 'string' ? (0, _parse.default)(inputAttributes) : inputAttributes : {};
const inputParams = {
className: (0, _clsx.default)('dnb-input__input', inputClassName),
autoComplete: autocomplete,
type,
id,
disabled: disabled,
name: id,
'aria-placeholder': placeholder ? (0, _componentHelper.convertJsxToString)(placeholder) : undefined,
...attributes,
...usedInputAttributes,
onChange: onChangeHandler,
onKeyDown: onKeyDownHandler,
onFocus: onFocusHandler,
onBlur: onBlurHandler
};
if (inputParams['role'] && inputParams['role'] !== 'textbox' && inputParams['role'] !== 'searchbox') {
delete inputParams['aria-placeholder'];
}
if (sizeIsNumber) {
inputParams.size = size;
}
if (showStatus || suffix || hasSubmitButton) {
inputParams['aria-describedby'] = (0, _componentHelper.combineDescribedBy)(inputParams, hasSubmitButton && !submitElement ? id + '-submit-button' : null, showStatus ? id + '-status' : null, suffix ? id + '-suffix' : null);
}
if (readOnly) {
inputParams['aria-readonly'] = inputParams.readOnly = true;
}
const shellParams = {
className: (0, _clsx.default)((0, _SkeletonHelper.createSkeletonClass)('shape', skeleton, context), !_omitInputShellClass && "dnb-input__shell dnb-input__border")
};
(0, _SkeletonHelper.skeletonDOMAttributes)(inputParams, skeleton, context);
(0, _componentHelper.validateDOMAttributes)(restProps, inputParams);
(0, _componentHelper.validateDOMAttributes)(null, shellParams);
if (InputElement && typeof InputElement === 'function') {
InputElement = InputElement({
...inputParams,
value
}, inputRef);
} else if (!InputElement && _inputElement) {
InputElement = _inputElement;
}
return (0, _jsxRuntime.jsxs)("span", {
...mainParams,
children: [label && (0, _jsxRuntime.jsx)(_FormLabel.default, {
id: id + '-label',
forId: id,
text: label,
labelDirection: labelDirection,
srOnly: labelSrOnly,
disabled: disabled,
skeleton: skeleton
}), (0, _jsxRuntime.jsxs)("span", {
...innerParams,
children: [_AlignmentHelper || (_AlignmentHelper = (0, _jsxRuntime.jsx)(_AlignmentHelper2.default, {})), (0, _jsxRuntime.jsx)(_FormStatus.default, {
show: showStatus,
id: id + '-form-status',
globalStatus: globalStatus,
label: label,
text: status,
state: statusState,
textId: id + '-status',
noAnimation: statusNoAnimation,
skeleton: skeleton,
...statusProps
}), (0, _jsxRuntime.jsxs)("span", {
className: "dnb-input__row",
children: [(0, _jsxRuntime.jsxs)("span", {
...shellParams,
children: [InputElement || (0, _jsxRuntime.jsx)("input", {
ref: combinedRef,
...inputParams
}), innerElement && (0, _jsxRuntime.jsx)("span", {
className: "dnb-input__inner__element dnb-p",
children: innerElement
}), icon && (0, _jsxRuntime.jsx)(InputIcon, {
className: "dnb-input__icon",
icon: icon,
size: usedIconSize
}), !hasVal && placeholder && (0, _jsxRuntime.jsx)("span", {
id: id + '-placeholder',
className: 'dnb-input__placeholder' + (align ? ` dnb-input__align--${align}` : ""),
role: "presentation",
"aria-hidden": true,
children: placeholder
}), showClearButton && iconPosition !== 'right' && (0, _jsxRuntime.jsx)("span", {
className: "dnb-input--clear dnb-input__submit-element",
children: (0, _jsxRuntime.jsx)(InputSubmitButton, {
"aria-hidden": !hasVal,
attributes: {
className: 'dnb-input__clear-button'
},
id: id + '-clear-button',
type: "button",
variant: "tertiary",
"aria-controls": id,
"aria-label": clearButtonTitle,
tooltip: hasVal && clearButtonTitle,
icon: "close",
iconSize: size === 'small' ? 'small' : undefined,
skeleton: skeleton,
disabled: disabled || !hasVal,
onClick: clearValueHandler
})
})]
}), hasSubmitButton && (0, _jsxRuntime.jsx)("span", {
className: "dnb-input__submit-element",
children: submitElement ? submitElement : (0, _jsxRuntime.jsx)(InputSubmitButton, {
...inputSubmitButtonAttributes,
id: id + '-submit-button',
value: hasVal ? value : '',
icon: submitButtonIcon,
status: submitButtonStatus || status ? statusState : null,
statusState: statusState,
iconSize: size === 'medium' || size === 'large' ? 'medium' : 'default',
title: submitButtonTitle,
variant: submitButtonVariant,
disabled: disabled,
skeleton: skeleton,
size: size,
onSubmit: onSubmit,
...statusProps
})
}), suffix && (0, _jsxRuntime.jsx)(_Suffix.default, {
className: "dnb-input__suffix",
id: id + '-suffix',
context: props,
children: suffix
})]
})]
})]
});
}
const inputSubmitButtonDefaultProps = {
id: null,
value: null,
title: null,
disabled: false,
skeleton: false,
variant: 'secondary',
icon: 'loupe',
iconSize: null,
status: null,
statusState: 'error',
statusProps: null,
className: null,
onSubmit: null,
onSubmitFocus: null,
onSubmitBlur: null
};
function InputSubmitButton({
ref,
...ownProps
}) {
const context = (0, _react.useContext)(_Context.default);
const buttonRef = (0, _react.useRef)(null);
const combinedButtonRef = (0, _useCombinedRef.default)(ref, buttonRef);
const [focusState, setFocusState] = (0, _react.useState)('virgin');
const props = {
...inputSubmitButtonDefaultProps,
...(0, _componentHelper.removeUndefinedProps)({
...ownProps
})
};
const onSubmitFocusHandler = (0, _react.useCallback)(event => {
const submitValue = props.value;
setFocusState('focus');
(0, _componentHelper.dispatchCustomElementEvent)(props, 'onSubmitFocus', {
value: submitValue,
event
});
}, [props.value, props.onSubmitFocus]);
const onSubmitBlurHandler = (0, _react.useCallback)(event => {
const submitValue = props.value;
setFocusState('dirty');
(0, _componentHelper.dispatchCustomElementEvent)(props, 'onSubmitBlur', {
value: submitValue,
event
});
}, [props.value, props.onSubmitBlur]);
const onSubmitHandler = (0, _react.useCallback)(event => {
const submitValue = props.value;
(0, _componentHelper.dispatchCustomElementEvent)(props, 'onSubmit', {
value: submitValue,
event
});
}, [props.value, props.onSubmit]);
const {
id,
title,
disabled,
skeleton,
variant,
icon,
iconSize,
status,
statusState,
statusProps,
className,
onSubmitBlur: _onSubmitBlur,
onSubmitFocus: _onSubmitFocus,
...rest
} = props;
const params = {
id,
type: 'submit',
'aria-label': title,
disabled,
...rest
};
(0, _SkeletonHelper.skeletonDOMAttributes)(params, skeleton, context);
(0, _componentHelper.validateDOMAttributes)(ownProps, params);
return (0, _jsxRuntime.jsx)("span", {
className: "dnb-input__submit-button",
"data-input-state": focusState,
children: (0, _jsxRuntime.jsx)(_Button.default, {
className: (0, _clsx.default)("dnb-input__submit-button__button dnb-button--input-button", className),
variant: variant,
icon: icon,
iconSize: iconSize,
status: status,
statusState: statusState,
onClick: onSubmitHandler,
onFocus: onSubmitFocusHandler,
onBlur: onSubmitBlurHandler,
ref: combinedButtonRef,
...params,
...statusProps
})
});
}
const InputIcon = _react.default.memo(props => (0, _jsxRuntime.jsx)(_IconPrimary.default, {
...props
}), ({
icon: prev
}, {
icon: next
}) => {
if (typeof prev === 'string' && typeof next === 'string') {
return prev === next;
}
const isProgressIndicator = icon => {
if (!_react.default.isValidElement(icon)) {
return false;
}
const type = icon.type;
return (type === null || type === void 0 ? void 0 : type.displayName) === 'ProgressIndicator';
};
if (isProgressIndicator(prev) && isProgressIndicator(next)) {
return typeof prev === typeof next;
}
return false;
});
InputIcon.displayName = 'InputIcon';
const MemoizedInputComponent = _react.default.memo(InputComponent);
const Input = Object.assign(function Input(props) {
return (0, _jsxRuntime.jsx)(MemoizedInputComponent, {
...props
});
}, {
getValue,
hasValue
});
(0, _withComponentMarkers.default)(Input, {
_formElement: true,
_supportsSpacingProps: true
});
var _default = exports.default = Input;
//# sourceMappingURL=Input.js.map