@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
226 lines (224 loc) • 10.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.InputSize = void 0;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = require("styled-components");
var _element = require("../../hooks/element");
var _AreaContextProvider = require("../area-provider/AreaContextProvider");
var _Icon = _interopRequireDefault(require("../icon/Icon"));
var _Input = require("./Input.styles");
var _contentCard = require("../../types/contentCard");
var _resize = require("../../hooks/resize");
var _Tooltip = _interopRequireDefault(require("../tooltip/Tooltip"));
var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
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); }
let InputSize = exports.InputSize = /*#__PURE__*/function (InputSize) {
InputSize["Small"] = "small";
InputSize["Medium"] = "medium";
return InputSize;
}({});
const Input = /*#__PURE__*/(0, _react.forwardRef)(({
leftElement,
inputMode,
isDisabled,
onBlur,
onChange,
onFocus,
onKeyDown,
onPaste,
placeholder,
color,
rightElement,
shouldShowOnlyBottomBorder,
shouldRemainPlaceholder = false,
shouldShowClearIcon = false,
shouldShowCenteredContent = false,
size = InputSize.Medium,
type = 'text',
value,
disabledHint,
shouldUseAutoFocus = false,
isInvalid = false,
shouldPreventPlaceholderAnimation = false,
id,
shouldShowTransparentBackground = false,
autoComplete,
shouldEnableKeyboardHighlighting
}, ref) => {
var _rightElement$props;
const [hasValue, setHasValue] = (0, _react.useState)(typeof value === 'string' && value !== '');
const [placeholderWidth, setPlaceholderWidth] = (0, _react.useState)(0);
const areaProvider = (0, _react.useContext)(_AreaContextProvider.AreaContext);
const theme = (0, _styledComponents.useTheme)();
const inputRef = (0, _react.useRef)(null);
const placeholderRef = (0, _react.useRef)(null);
(0, _resize.useCursorRepaint)(inputRef);
const placeholderSize = (0, _element.useElementSize)(placeholderRef);
(0, _react.useEffect)(() => {
if (placeholderSize && shouldShowOnlyBottomBorder) {
setPlaceholderWidth(placeholderSize.width + 5);
}
}, [placeholderSize, shouldShowOnlyBottomBorder]);
const handleClearIconClick = (0, _react.useCallback)(() => {
if (inputRef.current) {
inputRef.current.value = '';
setHasValue(false);
if (typeof onChange === 'function') {
onChange({
target: inputRef.current
});
}
}
}, [onChange]);
const handleClearIconKeyDown = (0, _react.useCallback)(event => {
if (event.key === 'Enter' || event.key === ' ') {
var _inputRef$current;
event.preventDefault();
handleClearIconClick();
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
}
}, [handleClearIconClick]);
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
const shouldShowBorder = (rightElement === null || rightElement === void 0 || (_rightElement$props = rightElement.props) === null || _rightElement$props === void 0 || (_rightElement$props = _rightElement$props.style) === null || _rightElement$props === void 0 ? void 0 : _rightElement$props.backgroundColor) === undefined;
const handleInputFieldChange = (0, _react.useCallback)(event => {
setHasValue(event.target.value !== '');
if (typeof onChange === 'function') {
onChange(event);
}
}, [onChange]);
(0, _react.useImperativeHandle)(ref, () => ({
focus: () => {
var _inputRef$current2;
return (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
},
blur: () => {
var _inputRef$current3;
return (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.blur();
}
}), []);
(0, _react.useEffect)(() => {
if (typeof value === 'string') {
setHasValue(value !== '');
}
}, [value]);
let backgroundColor;
let internalColor;
if (shouldShowTransparentBackground) {
backgroundColor = 'transparent';
} else if (areaProvider.contentCardType && [_contentCard.ContentCardType.Error, _contentCard.ContentCardType.Success, _contentCard.ContentCardType.Warning].includes(areaProvider.contentCardType)) {
backgroundColor = 'white';
internalColor = '#555';
} else if (areaProvider.shouldChangeColor) {
backgroundColor = theme['000'];
}
const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting && !isDisabled);
const borderColor = color === null || color === void 0 ? void 0 : color.border;
const placeholderColor = color === null || color === void 0 ? void 0 : color.placeholder;
const labelPosition = (0, _react.useMemo)(() => {
if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {
return shouldShowOnlyBottomBorder ? {
right: 3,
top: -1.5
} : {
bottom: size === InputSize.Small ? -4 : -10,
right: -6
};
}
return {
left: -1,
top: -1.5
};
}, [hasValue, shouldPreventPlaceholderAnimation, shouldRemainPlaceholder, shouldShowOnlyBottomBorder, size]);
const inputElement = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Input.StyledInput, {
className: "beta-chayns-input",
$isDisabled: isDisabled
}, /*#__PURE__*/_react.default.createElement(_Input.StyledInputContentWrapper, {
$shouldShowTransparentBackground: shouldShowTransparentBackground,
$backgroundColor: backgroundColor,
$isInvalid: isInvalid,
$shouldRoundRightCorners: shouldShowBorder,
$shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
$size: size,
$borderColor: borderColor,
$shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
}, leftElement && /*#__PURE__*/_react.default.createElement(_Input.StyledInputIconWrapper, null, leftElement), /*#__PURE__*/_react.default.createElement(_Input.StyledInputContent, {
$shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder
}, /*#__PURE__*/_react.default.createElement(_Input.StyledInputField, {
$color: internalColor,
$placeholderWidth: placeholderWidth,
id: id,
disabled: isDisabled,
onBlur: onBlur,
onChange: handleInputFieldChange,
onFocus: onFocus,
onKeyDown: onKeyDown,
onClick: event => {
event.preventDefault();
event.stopPropagation();
},
onPaste: onPaste,
ref: inputRef,
type: type,
value: value,
autoFocus: shouldUseAutoFocus,
inputMode: inputMode,
autoComplete: autoComplete,
$isInvalid: isInvalid,
$shouldShowCenteredContent: shouldShowCenteredContent
}), /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputLabelWrapper, {
animate: shouldPreventPlaceholderAnimation ? {
opacity: hasValue ? 0 : 1
} : {
fontSize: hasValue && !shouldShowOnlyBottomBorder && !shouldRemainPlaceholder ? '9px' : `${Number(theme.fontSize)}px`
},
initial: false,
layout: true,
ref: placeholderRef,
style: {
...labelPosition
},
transition: {
type: 'tween',
duration: shouldPreventPlaceholderAnimation ? 0 : 0.1
}
}, /*#__PURE__*/_react.default.createElement(_Input.StyledInputLabel, {
$color: placeholderColor,
$isInvalid: isInvalid
}, placeholder))), shouldShowClearIcon && /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputClearIcon, {
$shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
$size: size,
$shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
animate: {
opacity: hasValue ? 1 : 0
},
initial: false,
onClick: handleClearIconClick,
onKeyDown: handleClearIconKeyDown,
tabIndex: shouldShowKeyboardHighlighting && hasValue && !isDisabled ? 0 : -1,
role: shouldShowKeyboardHighlighting ? 'button' : undefined,
"aria-hidden": !hasValue,
transition: {
type: 'tween'
}
}, /*#__PURE__*/_react.default.createElement(_Icon.default, {
icons: ['fa fa-times'],
color: isInvalid ? theme.wrong : undefined
})), rightElement && shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, {
$isInline: true
}, rightElement)), rightElement && !shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, null, rightElement)), [isDisabled, shouldShowTransparentBackground, backgroundColor, isInvalid, shouldShowBorder, shouldShowOnlyBottomBorder, size, leftElement, internalColor, placeholderWidth, id, onBlur, handleInputFieldChange, onFocus, onKeyDown, onPaste, type, value, shouldUseAutoFocus, inputMode, autoComplete, shouldShowCenteredContent, shouldPreventPlaceholderAnimation, hasValue, shouldRemainPlaceholder, theme.fontSize, theme.wrong, labelPosition, borderColor, placeholderColor, placeholder, shouldShowClearIcon, handleClearIconClick, handleClearIconKeyDown, rightElement, shouldEnableKeyboardHighlighting, shouldShowKeyboardHighlighting]);
if (isDisabled && typeof disabledHint === 'string') {
return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
item: {
text: disabledHint
},
shouldUseFullWidth: true
}, inputElement);
}
return inputElement;
});
Input.displayName = 'Input';
var _default = exports.default = Input;
//# sourceMappingURL=Input.js.map