@geneui/components
Version:
The Gene UI components library designed for BI tools
591 lines (587 loc) • 33.7 kB
JavaScript
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
import { c as classnames } from '../index-031ff73c.js';
import PropTypes from 'prop-types';
import { i as inputConfig, s as screenTypes } from '../configs-00612ce0.js';
import { n as noop, s as stopEvent } from '../index-a0e4e333.js';
import useDeviceType from '../hooks/useDeviceType.js';
import { u as useEllipsisDetection } from '../useEllipsisDetection-4d997d5d.js';
import Icon from '../Icon/index.js';
import SuggestionList from '../SuggestionList/index.js';
import { T as Tooltip } from '../index-6d7e99cd.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../dateValidation-67caec66.js';
import '../_commonjsHelpers-24198af3.js';
import 'react-dom';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';
import '../hooks/useKeyDown.js';
import '../hooks/useClickOutside.js';
import '../config-1053d64d.js';
import '../Scrollbar/index.js';
import '../callAfterDelay-7272faca.js';
import '../tslib.es6-f211516f.js';
import '../GeneUIProvider/index.js';
var css_248z = "[data-gene-ui-version=\"2.16.5\"] .input-holder{--input-message-padding-side:2rem;--input-element-padding-side:0.5rem;--input-element-height:3.6rem;--textarea-height:21.5rem;--number-actions-holder-padding:0 0.5rem;--swap-label-color:inherit;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;max-width:100%;position:relative;transition:opacity .3s;-webkit-user-select:none;user-select:none}[data-gene-ui-version=\"2.16.5\"] .input-holder.disabled{opacity:.5}[data-gene-ui-version=\"2.16.5\"] .input-holder.read-only{cursor:inherit;-webkit-user-select:text;user-select:text}[data-gene-ui-version=\"2.16.5\"] .input-holder:not(.f-content-size){width:100%}[data-gene-ui-version=\"2.16.5\"] .input-holder.s-big{--input-element-height:4.2rem;--textarea-height:52rem}[data-gene-ui-version=\"2.16.5\"] .input-holder.s-small{--input-element-height:3.2rem;--textarea-height:14.8rem}[data-gene-ui-version=\"2.16.5\"] .input-holder.id-start .validation-icon{margin-inline-end:-.5rem}[data-gene-ui-version=\"2.16.5\"] .input-holder.id-end{--direction:row-reverse}[data-gene-ui-version=\"2.16.5\"] .input-holder.id-end .validation-icon{margin-inline-start:-.5rem}[data-gene-ui-version=\"2.16.5\"] .input-holder.cr-smooth-radius{--input-element-border-radius:0.4rem;--textarea-border-radius:0.4rem}[data-gene-ui-version=\"2.16.5\"] .input-holder .end-add-on{align-items:center;border-radius:0 var(--input-element-border-radius,4.2rem) var(--input-element-border-radius,4.2rem) 0;display:flex;font:600 1.4rem/1.5 var(--font-family);height:var(--input-element-height);justify-content:center;margin:1px 0;margin-inline-end:calc(var(--input-structure-padding, 1.5rem)*-1 + 1px);margin-inline-start:var(--input-structure-padding,1.5rem);padding:0 var(--input-structure-padding,1.5rem);transition:background .3s,border-color .3s,opacity .3s}[data-gene-ui-version=\"2.16.5\"] .input-holder.a-outline{--input-element-border-color:rgba(var(--background-sc-rgb),0.2)}[data-gene-ui-version=\"2.16.5\"] .input-holder.a-outline:not(.t-textarea) .end-add-on{background:rgba(var(--background-sc-rgb),.03);border-inline-start:1px solid var(--input-element-border-color,#0000);height:calc(var(--input-element-height) - .2rem)}[data-gene-ui-version=\"2.16.5\"] .input-holder.a-outline.read-only{--input-element-border-color:rgba(var(--background-sc-rgb),0.05)}[data-gene-ui-version=\"2.16.5\"] .input-holder.a-outline.filled:not(:focus-within){--input-element-border-color:rgba(var(--background-sc-rgb),0.3)}[data-gene-ui-version=\"2.16.5\"] .input-holder.a-outline:not(.read-only):focus-within{--input-element-border-color:var(--hero);--swap-label-color:var(--hero)}[data-gene-ui-version=\"2.16.5\"] .input-holder.a-minimal{--input-element-background:rgba(var(--background-sc-rgb),0.02)}[data-gene-ui-version=\"2.16.5\"] .input-holder.a-minimal.read-only{--input-element-background:rgba(var(--background-sc-rgb),0.01)}[data-gene-ui-version=\"2.16.5\"] .input-holder.a-minimal.filled:not(:focus-within),[data-gene-ui-version=\"2.16.5\"] .input-holder.a-minimal:not(.read-only):focus-within{--input-element-background:rgba(var(--background-sc-rgb),0.03)}[data-gene-ui-version=\"2.16.5\"] .input-holder.a-minimal.s-small{--input-message-padding-side:0.7rem;--input-element-background:rgba(var(--background-sc-rgb),0.03);--input-element-padding-side:0.3rem;--number-actions-holder-padding:0;--input-structure-padding:0.4rem}[data-gene-ui-version=\"2.16.5\"] .input-holder.a-minimal.s-small.read-only{--input-element-background:rgba(var(--background-sc-rgb),0.01)}[data-gene-ui-version=\"2.16.5\"] .input-holder.a-minimal.s-small.filled:not(:focus-within){--input-element-background:rgba(var(--background-sc-rgb),0.03)}[data-gene-ui-version=\"2.16.5\"] .input-holder.a-minimal.s-small:not(.read-only):focus-within{--input-element-background:#0000;--input-element-border-color:var(--hero);--swap-label-color:var(--hero)}[data-gene-ui-version=\"2.16.5\"] .input-holder.a-light:not(.read-only):focus-within{--input-element-background:rgba(var(--background-sc-rgb),0.05)}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .input-holder.a-light:hover{--input-element-background:rgba(var(--background-sc-rgb),0.05)}}[data-gene-ui-version=\"2.16.5\"] .input-holder.a-light.popover-opened{--input-element-background:rgba(var(--background-sc-rgb),0.05)}[data-gene-ui-version=\"2.16.5\"] .input-holder.error-color,[data-gene-ui-version=\"2.16.5\"] .input-holder.success-color{--input-element-background:#0000!important}[data-gene-ui-version=\"2.16.5\"] .input-holder.error-color{--input-element-border-color:var(--danger)!important}[data-gene-ui-version=\"2.16.5\"] .input-holder.error-color:not(.read-only):focus-within{--swap-label-color:var(--danger)!important}[data-gene-ui-version=\"2.16.5\"] .input-holder.success-color{--input-element-border-color:var(--confirm)!important}[data-gene-ui-version=\"2.16.5\"] .input-holder.success-color:not(.read-only):focus-within{--swap-label-color:var(--confirm)!important}[data-gene-ui-version=\"2.16.5\"] .input-holder.t-textarea .end-add-on{align-self:flex-end}[data-gene-ui-version=\"2.16.5\"] .input-structure{align-items:center;display:flex;flex-direction:var(--direction,row);padding:0 var(--input-structure-padding,1.5rem);position:relative;width:100%}[data-gene-ui-version=\"2.16.5\"] .input-structure>*{flex-shrink:0}[data-gene-ui-version=\"2.16.5\"] .input-structure>:not(label){position:relative;z-index:1}[data-gene-ui-version=\"2.16.5\"] .input-holder.a-minimal.s-small .input-structure>:not(label){margin:0 .3rem}[data-gene-ui-version=\"2.16.5\"] .input-structure>:not(label).bc-icon-clear{border-radius:100%;transition:background .4s,color .4s}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .input-structure>:not(label).bc-icon-clear:hover{background:rgba(var(--background-sc-rgb),.03);color:var(--hero)}}[data-gene-ui-version=\"2.16.5\"] .input-structure>label{cursor:inherit;display:block;flex:auto;overflow:hidden}[data-gene-ui-version=\"2.16.5\"] .input-structure .icon{align-items:center;display:flex;justify-content:center;transition:color .3s,background .3s;z-index:10}[data-gene-ui-version=\"2.16.5\"] .input-structure .icon-holder{order:-1;z-index:2}[data-gene-ui-version=\"2.16.5\"] .input-structure .icon-holder-disabled{pointer-events:none}[data-gene-ui-version=\"2.16.5\"] .input-element-back{background:var(--input-element-background,var(--background));border:1px solid var(--input-element-border-color,#0000);border-radius:var(--input-element-border-radius,4.2rem);bottom:0;height:100%;left:0;position:absolute;right:0;top:0;transition:background .3s,border-color .3s,opacity .3s;width:100%}[data-gene-ui-version=\"2.16.5\"] .t-textarea .input-element-back{border-radius:var(--textarea-border-radius,1rem)}[data-gene-ui-version=\"2.16.5\"] .read-only .input-element-back:empty{opacity:0}[data-gene-ui-version=\"2.16.5\"] .fit-content-hack{height:0;opacity:0;overflow:hidden;pointer-events:none}[data-gene-ui-version=\"2.16.5\"] .input-element-relative{position:relative;width:100%;z-index:1}[data-gene-ui-version=\"2.16.5\"] .input-element{color:rgba(var(--background-sc-rgb),.75);font:600 1.4rem var(--font-family);height:var(--input-element-height);overflow:hidden;padding:0 var(--input-element-padding-side);position:relative;resize:none;text-overflow:ellipsis;transition:opacity .15s;white-space:nowrap;width:100%}[data-gene-ui-version=\"2.16.5\"] .input-element:-webkit-autofill{-webkit-text-fill-color:var(--background-sc);-webkit-background-clip:text;background-clip:text}[data-gene-ui-version=\"2.16.5\"] .input-element:-webkit-autofill::selection{-webkit-text-fill-color:var(--hero)}[data-gene-ui-version=\"2.16.5\"] .input-element.hide{opacity:0}[data-gene-ui-version=\"2.16.5\"] .input-element::input-placeholder{color:rgba(var(--background-sc-rgb),.375);font-size:1.4rem;font-weight:600;transition:color .15s}[data-gene-ui-version=\"2.16.5\"] .input-element:placeholder{color:rgba(var(--background-sc-rgb),.375);font-size:1.4rem;font-weight:600;transition:color .15s}[data-gene-ui-version=\"2.16.5\"] .input-element::placeholder{color:rgba(var(--background-sc-rgb),.375);font-size:1.4rem;font-weight:600;transition:color .15s}[data-gene-ui-version=\"2.16.5\"] .input-element:input-placeholder{color:rgba(var(--background-sc-rgb),.375);font-size:1.4rem;font-weight:600;transition:color .15s}[data-gene-ui-version=\"2.16.5\"] .input-element.read-only:not(.textarea-element){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-gene-ui-version=\"2.16.5\"] .textarea-element,[data-gene-ui-version=\"2.16.5\"] textarea.input-element{border:1px solid #0000;cursor:auto;height:var(--textarea-height);overflow:auto;padding:1rem var(--input-element-padding-side);padding-right:70px!important;text-overflow:unset;white-space:normal}[data-gene-ui-version=\"2.16.5\"] .textarea-element.read-only,[data-gene-ui-version=\"2.16.5\"] textarea.input-element.read-only{height:auto}[data-gene-ui-version=\"2.16.5\"] .textarea-element::-webkit-scrollbar,[data-gene-ui-version=\"2.16.5\"] textarea.input-element::-webkit-scrollbar{height:1.6rem;width:1.6rem}[data-gene-ui-version=\"2.16.5\"] .textarea-element::-webkit-scrollbar-thumb,[data-gene-ui-version=\"2.16.5\"] textarea.input-element::-webkit-scrollbar-thumb{background:rgba(var(--background-sc-rgb),.05);border:.4rem solid var(--background);border-radius:1.6rem}[data-gene-ui-version=\"2.16.5\"] div.input-element{align-items:center;display:flex;justify-content:flex-start}[data-gene-ui-version=\"2.16.5\"] div.input-element:not([readonly]).placeholder{color:rgba(var(--background-sc-rgb),.375)}[data-gene-ui-version=\"2.16.5\"] div.input-element:not([readonly]).placeholder:focus{color:rgba(var(--background-sc-rgb),0)}[data-gene-ui-version=\"2.16.5\"] .input-element[readonly]{cursor:inherit}[data-gene-ui-version=\"2.16.5\"] .input-element[readonly]::selection{background:#0000;color:inherit}[data-gene-ui-version=\"2.16.5\"] .input-element[type=date],[data-gene-ui-version=\"2.16.5\"] .input-element[type=datetime-local],[data-gene-ui-version=\"2.16.5\"] .input-element[type=time]{line-height:var(--input-element-height)}[data-gene-ui-version=\"2.16.5\"] .input-fake-placeholder{align-items:center;color:rgba(var(--background-sc-rgb),.375);display:flex;font:600 1.4rem/1.8rem var(--font-family);height:100%;left:0;padding:0 var(--input-element-padding-side);pointer-events:none;position:absolute;top:0;transition:opacity .15s;-webkit-user-select:none;user-select:none;width:100%}[data-gene-ui-version=\"2.16.5\"] .input-fake-placeholder.hide{opacity:0}[data-gene-ui-version=\"2.16.5\"] .input-swap-label{display:flex;font:600 1rem/1.8rem var(--font-family);left:0;max-width:100%;padding:0 var(--input-message-padding-side);position:absolute;top:-.9rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:5}[data-gene-ui-version=\"2.16.5\"] .input-swap-label .icon{font-size:1.8rem;transition:none}[data-gene-ui-version=\"2.16.5\"] .input-swap{max-width:100%;overflow:hidden}[data-gene-ui-version=\"2.16.5\"] .input-swap-animate{align-items:center;background:var(--background);box-shadow:inset 0 -.8rem 0 var(--input-element-background);color:var(--swap-label-color);display:flex;max-width:100%;padding:0 .4rem;transition:transform .3s,opacity .3s .1s,color .3s}[data-gene-ui-version=\"2.16.5\"] .input-swap-animate>*+*{margin-inline-start:.5rem}[data-gene-ui-version=\"2.16.5\"] .input-swap-animate.hide{opacity:0;transform:translateY(100%)}[data-gene-ui-version=\"2.16.5\"] .number-actions-holder{padding:var(--number-actions-holder-padding)}[data-gene-ui-version=\"2.16.5\"] .number-actions-holder>ul{background:var(--background);border:1px solid rgba(var(--background-sc-rgb),.1);border-radius:.7rem;color:inherit;font-size:1rem;width:1.5rem}[data-gene-ui-version=\"2.16.5\"] .number-actions-holder>ul>li{cursor:pointer;transition:color .3s,background .3s,opacity .3s}[data-gene-ui-version=\"2.16.5\"] .number-actions-holder>ul>li:first-child{border-radius:.7rem .7rem 0 0}[data-gene-ui-version=\"2.16.5\"] .number-actions-holder>ul>li:last-child{border-radius:0 0 .7rem .7rem}[data-gene-ui-version=\"2.16.5\"] .number-actions-holder>ul>li.disabled{opacity:.5;pointer-events:none}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .number-actions-holder>ul>li:hover{background:rgba(var(--background-sc-rgb),.03);color:var(--hero)}}[data-gene-ui-version=\"2.16.5\"] .information-message{cursor:default;font:600 1.2rem/1.42 var(--font-family);margin:.6rem 0 0;padding:0 var(--input-message-padding-side);width:100%}[data-gene-ui-version=\"2.16.5\"] .information-message:empty{display:none}[data-gene-ui-version=\"2.16.5\"] .input-description{cursor:default;font:600 1.4rem/2rem var(--font-family);margin:1rem 0 0;max-width:100%;opacity:.7}[data-gene-ui-version=\"2.16.5\"] .input-structure~.input-description{padding:0 1rem}[data-gene-ui-version=\"2.16.5\"] .input-title{align-items:center;cursor:default;display:flex;font:600 1.4rem/2rem var(--font-family);margin:0 0 .4rem;max-width:100%;opacity:.5;padding:0 var(--input-message-padding-side)}[data-gene-ui-version=\"2.16.5\"] .input-title>*+*{margin-inline-start:.5rem}";
styleInject(css_248z);
function replaceBetween(start, end, initial, what) {
return initial.substring(0, start) + what + initial.substring(end);
}
function createCustomInputEvent(ref) {
let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
const event = new Event('input', {
bubbles: true
});
ref.value = String(value);
ref.dispatchEvent(event);
return event;
}
const ExtendedInput = /*#__PURE__*/forwardRef((props, ref) => {
var _textareaRef$current;
const {
max,
min,
icon,
type,
step,
value,
label,
onBlur,
onFocus,
onClear,
isValid,
onClick,
canClear,
disabled,
onChange,
required,
readOnly,
className,
errorText,
inputSize,
maxLength,
isDropdown,
appearance,
screenType,
placeholder,
flexibility,
description,
onIconClick,
withInfoIcon,
colorOnValid,
defaultValue,
cornerRadius,
showErrorIcon,
clickableIcon,
infoIconTitle,
writeProtected,
showNumberIcon,
itemsDirection,
showIconOnValid,
labelAppearance,
colorBorderOnError,
showRemainingLength,
showErrorWithTooltip,
showClickableTooltipOnError,
startAdornment,
tooltipText,
endAdornment,
suggestionData,
...restProps
} = props;
const {
isMobile
} = useDeviceType(screenType);
const inputRef = useRef();
const textareaRef = useRef();
const iconRef = useRef();
const [localValue, setLocalValue] = useState(defaultValue);
const [focused, setFocused] = useState(false);
const [isBlurInitiatorIcon, setIsBlurInitiatorIcon] = useState(false);
const isControlled = 'value' in props && typeof value !== 'undefined';
// non strict equality is needed for covering 'undefined' case also
const inputValue = isControlled ? value != null ? value : '' : localValue;
const [isTextTruncated, setIsTextTruncated] = useState(false);
const isTruncated = useEllipsisDetection(inputRef, [inputValue]);
useEffect(() => setIsTextTruncated(isTruncated), [isTruncated]);
useEffect(() => {
isControlled && value && value !== inputValue && setLocalValue(value);
}, [value, isControlled, inputValue]);
const hasError = !isValid;
const showTooltip = tooltipText && isValid ? tooltipText : showErrorWithTooltip && hasError && errorText ? errorText : '';
const handleChange = e => {
const {
value
} = e.target;
!isControlled && setLocalValue(value);
onChange(e);
};
const handleFocus = useCallback(e => {
if (isDropdown && (writeProtected || isMobile)) {
var _inputRef$current;
stopEvent(e, true);
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
} else {
setFocused(true);
onFocus(e);
}
}, [onFocus, isTextTruncated, isMobile, value]);
const handleIconClick = useCallback(e => {
// We will remove this later, when get report who use this
if (clickableIcon) {
onClick(e);
onIconClick(e, isBlurInitiatorIcon);
if (isBlurInitiatorIcon) {
iconRef.current.blur();
setIsBlurInitiatorIcon(false);
}
}
}, [clickableIcon, onClick, onIconClick, isBlurInitiatorIcon]);
const handleBlur = useCallback(e => {
setFocused(false);
setIsBlurInitiatorIcon(iconRef.current === e.relatedTarget);
onBlur(e);
}, [onBlur]);
const handleDropdownIconClick = useCallback(e => {
if (isDropdown) {
onClick(e);
if (!readOnly) {
focused ? inputRef.current.blur() : inputRef.current.focus();
}
}
}, [isDropdown, onClick, focused, inputRef.current]);
const handleStepUp = e => {
const number = Math.floor(inputValue) + step;
const nextValue = number < min ? min : number > max ? max : number;
const event = createCustomInputEvent(inputRef.current, nextValue);
handleChange(event);
};
const handleStepDown = e => {
const number = Math.ceil(inputValue) - step;
const nextValue = number < min ? min : number > max ? max : number;
const event = createCustomInputEvent(inputRef.current, nextValue);
handleChange(event);
};
const handleClear = () => {
const event = createCustomInputEvent(type === 'textarea' ? textareaRef.current : inputRef.current);
handleChange(event);
onClear(event);
};
const handleRef = val => {
if (ref) {
ref.current = val;
}
if (type !== 'textarea') {
inputRef.current = val;
} else {
textareaRef.current = val;
}
};
const fieldStep = type === 'number' ? {
step
} : {};
const numberedValue = Number(inputValue);
const inputLabel = label || placeholder;
const asterisk = required ? '* ' : '';
const inputPlaceholder = !readOnly && placeholder ? "".concat(asterisk).concat(placeholder) : '';
const hasFakePlaceholder = type === 'date' || type === 'time' || type === 'datetime-local';
const sharedProps = {
onClick,
required,
ref: handleRef,
onBlur: handleBlur,
onFocus: handleFocus,
onChange: handleChange,
disabled,
maxLength,
placeholder: inputPlaceholder,
readOnly: readOnly || writeProtected,
className: classnames('input-element', {
'read-only': readOnly,
placeholder: !inputValue,
'write-protected': writeProtected,
'textarea-element': type === 'textarea',
hide: !inputValue && hasFakePlaceholder
}),
...restProps
};
const onChangeSuggestionData = useCallback(_ref => {
let {
from,
to,
data
} = _ref;
const {
value
} = data;
const input = textareaRef.current;
const lastValue = input.value;
input.value = replaceBetween(from, to, inputValue, value);
const event = new Event('input', {
bubbles: true
});
const tracker = input._valueTracker;
tracker && tracker.setValue(lastValue);
input.dispatchEvent(event);
}, [inputValue]);
const onAddPlaceholder = useCallback(_ref2 => {
let {
from,
to,
data
} = _ref2;
const {
value
} = data;
textareaRef.current.value = replaceBetween(from, to, inputValue, value);
}, [inputValue]);
const maxMinValidator = useCallback((num, type) => disabled || (num === null || num === void 0 ? void 0 : num.toString().length) && (Math.ceil(num) === 0 || Math.ceil(num)) && (type === 'max' ? numberedValue >= num : numberedValue <= num), [max, min, numberedValue]);
return /*#__PURE__*/React__default.createElement(Tooltip, {
position: "bottom",
title: showTooltip,
isVisible: !!showTooltip
}, /*#__PURE__*/React__default.createElement("div", {
className: classnames('input-holder', "a-".concat(appearance), "s-".concat(inputSize), "id-".concat(itemsDirection), "f-".concat(flexibility), "cr-".concat(cornerRadius), "t-".concat(type), className, {
disabled,
'read-only': readOnly,
'error-color': hasError && colorBorderOnError,
'success-color': isValid && colorOnValid,
filled: inputValue
})
}, type === 'textarea' && !readOnly && !isDropdown && !isMobile && suggestionData && Array.isArray(suggestionData) && /*#__PURE__*/React__default.createElement(SuggestionList, {
elemRef: textareaRef,
onChange: onChangeSuggestionData,
onHover: onAddPlaceholder,
data: suggestionData
}), labelAppearance === inputConfig.labelAppearance[1] && /*#__PURE__*/React__default.createElement("div", {
className: "input-title ellipsis-text"
}, /*#__PURE__*/React__default.createElement(Tooltip, {
position: "auto",
title: "".concat(asterisk, " ").concat(inputLabel)
}, /*#__PURE__*/React__default.createElement("span", {
className: "ellipsis-text"
}, asterisk, " ", inputLabel)), withInfoIcon && /*#__PURE__*/React__default.createElement(Tooltip, {
position: "auto",
title: infoIconTitle
}, /*#__PURE__*/React__default.createElement(Icon, {
type: "bc-icon-info"
}))), /*#__PURE__*/React__default.createElement("div", {
className: "input-structure"
}, startAdornment, icon && /*#__PURE__*/React__default.createElement("span", {
ref: iconRef,
tabIndex: "0",
className: classnames('icon-holder', {
'icon-holder-disabled': disabled
})
}, /*#__PURE__*/React__default.createElement(Icon, {
type: icon,
onClick: handleIconClick,
onMouseDown: handleDropdownIconClick
})), /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement("div", {
className: "input-element-relative"
}, readOnly || isDropdown && isMobile ? /*#__PURE__*/React__default.createElement("div", sharedProps, /*#__PURE__*/React__default.createElement("div", {
className: type === 'textarea' ? 'textarea-element-content' : 'ellipsis-text'
}, typeof inputValue === 'number' ? inputValue : inputValue || inputPlaceholder)) : type !== 'textarea' ? /*#__PURE__*/React__default.createElement("input", _extends({}, sharedProps, fieldStep, {
max: max,
min: min,
type: type,
size: flexibility === 'content-size' ? 1 : null,
value: inputValue
})) : /*#__PURE__*/React__default.createElement("textarea", _extends({}, sharedProps, {
value: (_textareaRef$current = textareaRef.current) !== null && _textareaRef$current !== void 0 && _textareaRef$current.isSuggestionListOpen ? textareaRef.current.value : inputValue
})), hasFakePlaceholder && /*#__PURE__*/React__default.createElement("div", {
className: classnames('input-fake-placeholder', {
hide: inputValue
})
}, inputPlaceholder && /*#__PURE__*/React__default.createElement("div", {
className: "ellipsis-text"
}, inputPlaceholder))), flexibility === 'content-size' && /*#__PURE__*/React__default.createElement("div", {
className: "fit-content-hack"
}, /*#__PURE__*/React__default.createElement("div", {
className: "input-element"
}, asterisk, " ", placeholder.length > "".concat(inputValue).length ? placeholder : inputValue)), /*#__PURE__*/React__default.createElement("div", {
className: "input-element-back"
}, labelAppearance === inputConfig.labelAppearance[2] && /*#__PURE__*/React__default.createElement("div", {
className: "input-swap-label"
}, /*#__PURE__*/React__default.createElement("div", {
className: "input-swap"
}, /*#__PURE__*/React__default.createElement("div", {
className: classnames('input-swap-animate ellipsis-text', {
hide: !inputValue && inputValue !== 0
})
}, /*#__PURE__*/React__default.createElement("span", {
className: "ellipsis-text"
}, asterisk, " ", inputLabel), withInfoIcon && /*#__PURE__*/React__default.createElement(Tooltip, {
position: "auto",
title: infoIconTitle
}, /*#__PURE__*/React__default.createElement(Icon, {
type: "bc-icon-info"
}))))))), canClear && !!inputValue && !readOnly && /*#__PURE__*/React__default.createElement(Icon, {
type: "bc-icon-clear",
disabled: disabled,
onClick: handleClear,
className: "cursor-pointer"
}), isDropdown && /*#__PURE__*/React__default.createElement(Icon, {
type: "bc-icon-arrow-down",
onMouseDown: handleDropdownIconClick
}), type === 'number' && showNumberIcon && !readOnly && /*#__PURE__*/React__default.createElement("div", {
className: "number-actions-holder"
}, /*#__PURE__*/React__default.createElement("ul", null, /*#__PURE__*/React__default.createElement("li", {
className: classnames('number-action', 'bc-icon-input-number-up', {
disabled: maxMinValidator(max, 'max')
}),
onClick: handleStepUp
}), /*#__PURE__*/React__default.createElement("li", {
className: classnames('number-action', 'bc-icon-input-number-down', {
disabled: maxMinValidator(min, 'min')
}),
onClick: handleStepDown
}))), hasError && showErrorIcon && /*#__PURE__*/React__default.createElement(Icon, {
className: "validation-icon pointer-events-none color-danger",
type: "bc-icon-error-info"
}), isValid && showIconOnValid && /*#__PURE__*/React__default.createElement(Icon, {
className: "validation-icon pointer-events-none color-confirm",
type: "bc-icon-validated"
}), showRemainingLength && !!maxLength && /*#__PURE__*/React__default.createElement("div", {
className: "end-add-on"
}, maxLength - "".concat(inputValue).length), endAdornment), !showErrorWithTooltip && hasError && errorText && /*#__PURE__*/React__default.createElement("div", {
className: "information-message color-danger"
}, errorText), description && /*#__PURE__*/React__default.createElement("div", {
className: "input-description"
}, description)));
});
ExtendedInput.propTypes = {
/**
* Additional className
*/
className: PropTypes.string,
/**
* Control ExtendedInput disabled state with this prop
*/
disabled: PropTypes.bool,
/**
* Borders will be colored on when "isValid" and this props are set to "true"
*/
colorBorderOnError: PropTypes.bool,
/**
* Shows an icon to clear ExtendedInput's value when set to "true"
*/
showClearIcon: PropTypes.bool,
/**
* Use this props in combo with "icon" prop. This will fire on icon click when set to "true"
*/
clickableIcon: PropTypes.bool,
/**
* Shows an error icon when "isValid" is set to "false" and this prop is set to "true"
*/
showErrorIcon: PropTypes.bool,
/**
* Shows an "Icon" for number inputs, when "type" is set to "number" and this prop is et to "true"
*/
showNumberIcon: PropTypes.bool,
/**
*.
*/
showClickableTooltipOnError: PropTypes.bool,
/**
* ExtendedInput borders are colored when "isValid" and this props are set to "true"
*/
colorOnValid: PropTypes.bool,
/**
* ExtendedInput will display an icon when "isValid" and this props are set to "true"
*/
showIconOnValid: PropTypes.bool,
/**
* Shows the "errorText" value in "Tooltip" when set to "true"
*/
showErrorWithTooltip: PropTypes.bool,
/**
* Control ExtendedInput validation. For more info see "ValidatableNumberInput", "ValidatableTextInput"(integrated ExtendedInputs with "Form" organism).
*/
isValid: PropTypes.bool,
/**
* Use this prop to specify error message. This will be displayed when "isValid" is set to "false"
*/
errorText: PropTypes.string,
/**
* Use this prop to specify tooltip message.
*/
tooltipText: PropTypes.string,
/**
* Specify increment or decrement value, when arrow up or down are clicked
*/
step: PropTypes.number,
/**
* Valid values are same as "Icon" type
*/
icon: PropTypes.string,
/**
* ExtendedInput placeholder
*/
placeholder: PropTypes.string,
/**
* Control items direction
*/
itemsDirection: PropTypes.oneOf(inputConfig.itemsDirection),
/**
* Use this prop to control ExtendedInput state. Note that when you specify this prop, the ExtendedInput will not functionate itself
*/
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* ExtendedInput type
*/
type: PropTypes.oneOf(inputConfig.type).isRequired,
/**
* ExtendedInput appearance
*/
appearance: PropTypes.oneOf(inputConfig.appearance),
/**
* ExtendedInput size
*/
inputSize: PropTypes.oneOf(inputConfig.size),
/**
* ExtendedInput corner radius
*/
cornerRadius: PropTypes.oneOf(inputConfig.cornerRadius),
/**
* Will make ExtendedInput readonly when set to "true"
*/
readOnly: PropTypes.bool,
/**
* How to display inscription in relation to it's parent in ExtendedInput
*/
flexibility: PropTypes.oneOf(inputConfig.flexibility),
/**
* This prop will only applied once as defaultState for "value" when ExtendedInput mounts.
* Note that specifying this prop is not mean controlling it.
*/
defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* Shows an "Icon" to remove ExtendedInput's value
*/
canClear: PropTypes.bool,
/**
* Fires an event on clear "Icon" click((element: Element) => void)
*/
onClear: PropTypes.func,
/**
* Fires an event on ExtendedInput change((event: Event) => void)
*/
onChange: PropTypes.func,
/**
* Specify a label for ExtendedInput
*/
label: PropTypes.string,
/**
* Specify a "label" appearance
*/
labelAppearance: PropTypes.oneOf(inputConfig.labelAppearance),
/**
* Will add an additional description field
*/
description: PropTypes.node,
/**
* Property is needed for "Dropdown" organism usage
*/
isDropdown: PropTypes.bool,
/**
* Fires an event on ExtendInput <input /> click((event: Event => void))
*/
onClick: PropTypes.func,
/**
* Typing will be blocked when set to "true". Note design is different from "readonly" prop's design
*/
writeProtected: PropTypes.bool,
/**
* Input field maximum value
*/
max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* Input field minimum value
*/
min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* Callback fires when input is focused
*/
onFocus: PropTypes.func,
/**
* Callback fires when input loose focus
*/
onBlur: PropTypes.func,
/**
* Callback fires when clicked the icon </br>
* as a first parameter passed native event </br>
* as a second parameter passed is blur function </br>
* initiated by icon click
*/
onIconClick: PropTypes.func,
/**
* Define is input required or no.
*/
required: PropTypes.bool,
/**
* The switch between mobile and desktop version
*/
screenType: PropTypes.oneOf(screenTypes),
/**
* Define is need input info icon required.
*/
withInfoIcon: PropTypes.bool,
/**
* ExtendedInput info icon title.
*/
infoIconTitle: PropTypes.string,
/**
* Max Length of input Value
*/
maxLength: PropTypes.number,
/**
* Show Remaining Length of input value, works only with maxLength
*/
showRemainingLength: PropTypes.bool,
/**
* Decoration that can be added to the inner input field at the start
*/
startAdornment: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.number, PropTypes.node]),
/**
* Decoration that can be added to the inner input field at the end
*/
endAdornment: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.number, PropTypes.node])
};
ExtendedInput.defaultProps = {
step: 1,
placeholder: '',
itemsDirection: inputConfig.itemsDirection[0],
type: inputConfig.type[0],
appearance: inputConfig.appearance[0],
inputSize: inputConfig.size[1],
cornerRadius: inputConfig.cornerRadius[0],
clickableIcon: false,
readOnly: false,
flexibility: inputConfig.flexibility[0],
colorBorderOnError: true,
showErrorIcon: false,
showNumberIcon: true,
showClickableTooltipOnError: true,
showErrorWithTooltip: false,
colorOnValid: false,
showIconOnValid: false,
canClear: false,
isValid: true,
onChange: noop,
onClick: noop,
onClear: noop,
onFocus: noop,
onBlur: noop,
onIconClick: noop,
withInfoIcon: false,
infoIconTitle: '',
label: '',
labelAppearance: inputConfig.labelAppearance[0],
description: '',
isDropdown: false,
writeProtected: false,
defaultValue: '',
screenType: screenTypes[0]
};
export { ExtendedInput as default };