@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
224 lines (223 loc) • 9.24 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("motion/react");
var _react2 = _interopRequireWildcard(require("react"));
var _Icon = _interopRequireDefault(require("../icon/Icon"));
var _Input = _interopRequireWildcard(require("../input/Input"));
var _SearchInput = require("./SearchInput.styles");
var _styledComponents = require("styled-components");
var _element = require("../../hooks/element");
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); }
const SearchInput = /*#__PURE__*/(0, _react2.forwardRef)(({
iconColor,
isActive,
onActiveChange,
onChange,
onKeyDown,
placeholder,
shouldUseAbsolutePositioning = false,
size = _Input.InputSize.Medium,
value,
shouldEnableKeyboardHighlighting,
width: widthValue
}, ref) => {
const [isSearchInputActive, setIsSearchInputActive] = (0, _react2.useState)(isActive ?? (typeof value === 'string' && value.trim() !== ''));
const inputRef = (0, _react2.useRef)(null);
const pseudoRef = (0, _react2.useRef)(null);
const iconTriggerRef = (0, _react2.useRef)(null);
const parentWidth = (0, _element.useElementSize)(pseudoRef);
const theme = (0, _styledComponents.useTheme)();
const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting);
const handleBackIconClick = (0, _react2.useCallback)(() => setIsSearchInputActive(false), []);
const handleSearchIconClick = (0, _react2.useCallback)(() => setIsSearchInputActive(true), []);
const handleIconTriggerClick = (0, _react2.useCallback)(() => {
if (isSearchInputActive) {
handleBackIconClick();
return;
}
handleSearchIconClick();
}, [handleBackIconClick, handleSearchIconClick, isSearchInputActive]);
const handleIconTriggerKeyDown = (0, _react2.useCallback)(event => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
handleIconTriggerClick();
}
}, [handleIconTriggerClick]);
const handleInputKeyDown = (0, _react2.useCallback)(event => {
if (event.key === 'Escape') {
var _iconTriggerRef$curre;
event.preventDefault();
setIsSearchInputActive(false);
(_iconTriggerRef$curre = iconTriggerRef.current) === null || _iconTriggerRef$curre === void 0 || _iconTriggerRef$curre.focus();
}
if (typeof onKeyDown === 'function') {
onKeyDown(event);
}
}, [onActiveChange, onKeyDown]);
(0, _react2.useEffect)(() => {
if (typeof onActiveChange === 'function') {
onActiveChange(isSearchInputActive);
}
}, [isSearchInputActive, onActiveChange]);
(0, _react2.useEffect)(() => {
if (isSearchInputActive) {
var _inputRef$current;
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
}
}, [isSearchInputActive]);
(0, _react2.useEffect)(() => {
if (typeof isActive === 'boolean') {
setIsSearchInputActive(isActive);
}
}, [isActive]);
(0, _react2.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();
}
}), []);
const width = (0, _react2.useMemo)(() => widthValue ?? (parentWidth === null || parentWidth === void 0 ? void 0 : parentWidth.width), [parentWidth === null || parentWidth === void 0 ? void 0 : parentWidth.width, widthValue]);
return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledSearchInput, {
className: "beta-chayns-search-input",
$size: size,
$shouldUseAbsolutePositioning: shouldUseAbsolutePositioning
}, shouldUseAbsolutePositioning ? /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
initial: false
}, isSearchInputActive && /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputContentWrapper, {
$shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
$shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
animate: {
opacity: 1,
width
},
exit: {
opacity: 0,
width: 0
},
initial: {
opacity: 0,
width: 0
},
key: "searchInputContentWrapper",
transition: {
duration: 0.25,
type: 'tween'
}
}, /*#__PURE__*/_react2.default.createElement(_Input.default, {
onChange: onChange,
onKeyDown: handleInputKeyDown,
placeholder: placeholder,
ref: inputRef,
shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
shouldShowClearIcon: true,
size: size,
value: value
})), /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledSearchInputIconTrigger, {
ref: iconTriggerRef,
id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon',
tabIndex: 0,
onClick: handleIconTriggerClick,
onKeyDown: handleIconTriggerKeyDown,
$shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
}, /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapperContent, {
animate: {
opacity: 1
},
exit: {
opacity: 0,
position: 'absolute'
},
initial: {
opacity: 0
},
key: isSearchInputActive ? 'backIcon' : 'searchIcon',
transition: {
duration: 0.3
},
$shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
}, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
key: "icon",
color: iconColor,
tabIndex: -1,
icons: isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']
})))) : /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
initial: false
}, /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledSearchInputIconTrigger, {
ref: iconTriggerRef,
id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon',
tabIndex: 0,
onClick: handleIconTriggerClick,
onKeyDown: handleIconTriggerKeyDown,
$shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
}, /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapperContent, {
animate: {
opacity: 1
},
exit: {
opacity: 0,
position: 'absolute'
},
initial: {
opacity: 0
},
key: isSearchInputActive ? 'backIcon' : 'searchIcon',
transition: {
duration: 0.3
},
$shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
}, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
key: "icon",
color: iconColor,
tabIndex: -1,
icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search']
}))))), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
initial: false
}, isSearchInputActive && /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputContentWrapper, {
$shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
$shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
animate: {
opacity: 1,
width: '100%'
},
exit: {
opacity: 0,
width: 0
},
initial: {
opacity: 0,
width: 0
},
key: "searchInputContentWrapper",
transition: {
duration: 0.3
}
}, /*#__PURE__*/_react2.default.createElement(_Input.default, {
key: "input",
leftElement: /*#__PURE__*/_react2.default.createElement(_Icon.default, {
color: theme.text,
icons: ['far fa-search']
}),
onChange: onChange,
onKeyDown: handleInputKeyDown,
placeholder: placeholder,
ref: inputRef,
shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
shouldShowClearIcon: true,
size: size,
value: value
}))))), /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledSearchInputPseudoElement, {
ref: pseudoRef
}));
});
SearchInput.displayName = 'SearchInput';
var _default = exports.default = SearchInput;
//# sourceMappingURL=SearchInput.js.map