@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
179 lines (178 loc) • 7.54 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useContext, useMemo, useCallback, useEffect, useRef } from 'react';
import classnames from 'classnames';
import { Input, Textarea } from '../../../../components';
import InputMasked from '../../../../components/InputMasked';
import DataContext from '../../DataContext/Context';
import FieldBlockContext from '../../FieldBlock/FieldBlockContext';
import FieldBlock from '../../FieldBlock';
import { useFieldProps } from '../../hooks';
import { pickSpacingProps } from '../../../../components/flex/utils';
import { toCapitalized } from '../../../../shared/component-helper';
function StringComponent(props) {
var _props$width, _props$innerRef, _dataContext$props2, _value$toString;
const dataContext = useContext(DataContext);
const fieldBlockContext = useContext(FieldBlockContext);
const schema = useMemo(() => {
var _props$schema;
return (_props$schema = props.schema) !== null && _props$schema !== void 0 ? _props$schema : {
type: 'string',
minLength: props.minLength,
maxLength: props.maxLength,
pattern: props.pattern
};
}, [props.schema, props.minLength, props.maxLength, props.pattern]);
const fromInput = useCallback(event => {
var _event, _event$cleanedValue, _event2, _event3;
if (typeof event === 'string') {
event = {
value: event
};
}
if (((_event = event) === null || _event === void 0 ? void 0 : _event.value) === '') {
return props.emptyValue;
}
return (_event$cleanedValue = (_event2 = event) === null || _event2 === void 0 ? void 0 : _event2.cleanedValue) !== null && _event$cleanedValue !== void 0 ? _event$cleanedValue : (_event3 = event) === null || _event3 === void 0 ? void 0 : _event3.value;
}, [props.emptyValue]);
const toEvent = useCallback((value, type) => {
if (props.trim && type === 'onBlur') {
const spaces = '[\\s ]';
if (new RegExp(`^${spaces}|${spaces}$`).test(value)) {
value = value.replace(new RegExp(`^${spaces}+|${spaces}+$`, 'g'), '');
handleChange(value);
}
}
return value;
}, [props.trim]);
const transform = props.transformValue;
const transformValue = useCallback(value => {
if (props.capitalize) {
value = toCapitalized(String(value || ''));
}
return (transform === null || transform === void 0 ? void 0 : transform(value)) || value;
}, [props.capitalize, transform]);
const ref = useRef();
const preparedProps = _objectSpread(_objectSpread({}, props), {}, {
schema,
fromInput,
toEvent,
transformValue,
width: (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : fieldBlockContext !== null && fieldBlockContext !== void 0 && fieldBlockContext.composition ? 'stretch' : 'large',
innerRef: (_props$innerRef = props.innerRef) !== null && _props$innerRef !== void 0 ? _props$innerRef : ref
});
const {
id,
name,
className,
innerRef,
inputClassName,
placeholder,
value,
hasError,
disabled,
multiline,
mask,
leftIcon,
rightIcon,
width,
htmlAttributes,
submitElement,
type,
clear,
align,
size,
selectall,
keepPlaceholder,
rows,
autoresizeMaxRows = 6,
autoresize = true,
characterCounter,
autoComplete,
inputMode,
autoCorrect,
spellCheck,
autoFocus,
autoCapitalize,
handleFocus,
handleBlur,
handleChange,
setDisplayValue,
onKeyDown
} = useFieldProps(preparedProps);
useEffect(() => {
var _innerRef$current;
setDisplayValue((_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.value);
}, [innerRef, setDisplayValue, value]);
const transformInstantly = useCallback(value => props.capitalize ? toCapitalized(value) : value, [props.capitalize]);
const {
handleSubmit
} = dataContext !== null && dataContext !== void 0 ? dataContext : {};
const handleKeyDown = useCallback(({
event
}) => {
var _dataContext$props;
if (!multiline && dataContext !== null && dataContext !== void 0 && (_dataContext$props = dataContext.props) !== null && _dataContext$props !== void 0 && _dataContext$props.isolate && event.key === 'Enter') {
var _event$preventDefault;
handleSubmit();
(_event$preventDefault = event.preventDefault) === null || _event$preventDefault === void 0 ? void 0 : _event$preventDefault.call(event);
}
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
}, [handleSubmit, dataContext === null || dataContext === void 0 ? void 0 : (_dataContext$props2 = dataContext.props) === null || _dataContext$props2 === void 0 ? void 0 : _dataContext$props2.isolate, multiline, onKeyDown]);
const cn = classnames('dnb-forms-field-string__input', inputClassName);
const sharedProps = _objectSpread(_objectSpread({
id,
name,
autoComplete,
autoCorrect,
spellCheck,
autoFocus,
autoCapitalize,
inputMode,
className: cn,
placeholder,
on_focus: handleFocus,
on_blur: handleBlur,
on_change: handleChange,
on_key_down: handleKeyDown,
disabled
}, htmlAttributes), {}, {
stretch: Boolean(width),
inner_ref: innerRef,
status: hasError ? 'error' : undefined,
value: transformInstantly((_value$toString = value === null || value === void 0 ? void 0 : value.toString()) !== null && _value$toString !== void 0 ? _value$toString : '')
});
const textareaProps = {
keepPlaceholder,
rows,
autoresize_max_rows: autoresizeMaxRows,
autoresize,
characterCounter
};
const inputProps = {
type,
clear,
size,
align,
selectall,
icon: leftIcon !== null && leftIcon !== void 0 ? leftIcon : rightIcon,
icon_position: rightIcon && !leftIcon ? 'right' : undefined,
submit_element: submitElement,
keep_placeholder: keepPlaceholder
};
const fieldBlockProps = _objectSpread({
forId: id,
className: classnames('dnb-forms-field-string', className),
width: width === 'stretch' || fieldBlockContext !== null && fieldBlockContext !== void 0 && fieldBlockContext.composition ? width : undefined,
contentWidth: width !== false ? width : undefined
}, pickSpacingProps(props));
return React.createElement(FieldBlock, fieldBlockProps, multiline ? React.createElement(Textarea, _extends({}, sharedProps, textareaProps)) : mask ? React.createElement(InputMasked, _extends({}, sharedProps, inputProps, {
mask: mask
})) : React.createElement(Input, _extends({}, sharedProps, inputProps)));
}
StringComponent._supportsSpacingProps = true;
export default StringComponent;
//# sourceMappingURL=String.js.map