@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
173 lines (171 loc) • 7.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");
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,
rightElement,
shouldShowOnlyBottomBorder,
shouldRemainPlaceholder = false,
shouldShowClearIcon = false,
shouldShowCenteredContent = false,
size = InputSize.Medium,
type = 'text',
value,
shouldUseAutoFocus = false,
isInvalid = false,
shouldPreventPlaceholderAnimation = false,
id
}, 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);
const placeholderSize = (0, _element.useElementSize)(placeholderRef);
(0, _react.useEffect)(() => {
if (placeholderSize && shouldShowOnlyBottomBorder) {
setPlaceholderWidth(placeholderSize.width + 5);
}
}, [placeholderSize, shouldShowOnlyBottomBorder]);
const shouldChangeColor = (0, _react.useMemo)(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
const handleClearIconClick = (0, _react.useCallback)(() => {
if (inputRef.current) {
inputRef.current.value = '';
setHasValue(false);
if (typeof onChange === 'function') {
onChange({
target: inputRef.current
});
}
}
}, [onChange]);
// 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$current;
return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
},
blur: () => {
var _inputRef$current2;
return (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
}
}), []);
(0, _react.useEffect)(() => {
if (typeof value === 'string') {
setHasValue(value !== '');
}
}, [value]);
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
};
}, [hasValue, shouldPreventPlaceholderAnimation, shouldRemainPlaceholder, shouldShowOnlyBottomBorder, size]);
return /*#__PURE__*/_react.default.createElement(_Input.StyledInput, {
className: "beta-chayns-input",
$isDisabled: isDisabled
}, /*#__PURE__*/_react.default.createElement(_Input.StyledInputContentWrapper, {
$shouldChangeColor: shouldChangeColor,
$isInvalid: isInvalid,
$shouldRoundRightCorners: shouldShowBorder,
$shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
$size: size
}, leftElement && /*#__PURE__*/_react.default.createElement(_Input.StyledInputIconWrapper, null, leftElement), /*#__PURE__*/_react.default.createElement(_Input.StyledInputContent, {
$shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder
}, /*#__PURE__*/_react.default.createElement(_Input.StyledInputField, {
$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,
$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, {
$isInvalid: isInvalid
}, placeholder))), shouldShowClearIcon && /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputClearIcon, {
$shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
$size: size,
animate: {
opacity: hasValue ? 1 : 0
},
initial: false,
onClick: handleClearIconClick,
transition: {
type: 'tween'
}
}, /*#__PURE__*/_react.default.createElement(_Icon.default, {
icons: ['fa fa-times'],
color: isInvalid ? theme.wrong : undefined
})), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, null, rightElement));
});
Input.displayName = 'Input';
var _default = exports.default = Input;
//# sourceMappingURL=Input.js.map