@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
93 lines (92 loc) • 4.58 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _element = require("../../../hooks/element");
var _uuid = require("../../../hooks/uuid");
var _searchBox = require("../../../utils/searchBox");
var _FilterButtons = _interopRequireDefault(require("../../filter-buttons/FilterButtons"));
var _SearchBoxBody = require("./SearchBoxBody.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); }
const SearchBoxBody = /*#__PURE__*/(0, _react.forwardRef)(({
filterButtons,
coordinates,
selectedGroups,
width,
browser,
height,
children,
onGroupSelect,
shouldHideFilterButtons
}, ref) => {
const [hasScrolled, setHasScrolled] = (0, _react.useState)(false);
const [currentGroupName, setCurrentGroupName] = (0, _react.useState)('');
const headRef = (0, _react.useRef)(null);
const headSize = (0, _element.useElementSize)(headRef);
const uuid = (0, _uuid.useUuid)();
const headHeight = (0, _react.useMemo)(() => headSize !== null && headSize !== void 0 && headSize.height ? headSize.height + 15 : 0, [headSize === null || headSize === void 0 ? void 0 : headSize.height]);
(0, _react.useEffect)(() => {
const element = document.getElementById(`searchbox-content__${uuid}`);
if (element && ((selectedGroups === null || selectedGroups === void 0 ? void 0 : selectedGroups.length) === 1 && selectedGroups[0] === 'all' || (selectedGroups === null || selectedGroups === void 0 ? void 0 : selectedGroups.length) !== 1)) {
setCurrentGroupName((0, _searchBox.getCurrentGroupName)(element));
} else {
setCurrentGroupName('');
}
}, [uuid, children, selectedGroups]);
const handleScroll = (0, _react.useCallback)(event => {
const {
scrollTop
} = event.target;
setHasScrolled(scrollTop > 1);
if ((selectedGroups === null || selectedGroups === void 0 ? void 0 : selectedGroups.length) === 1 && selectedGroups[0] === 'all' || (selectedGroups === null || selectedGroups === void 0 ? void 0 : selectedGroups.length) !== 1) {
setCurrentGroupName((0, _searchBox.getCurrentGroupName)(event.target));
}
}, [selectedGroups]);
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_SearchBoxBody.StyledMotionSearchBoxBody, {
ref: ref,
$width: width,
style: {
left: coordinates.x,
top: coordinates.y
},
initial: {
height: 0,
opacity: 0
},
exit: {
height: 0,
opacity: 0
},
animate: {
height: 'fit-content',
opacity: 1
},
transition: {
duration: 0.2,
type: 'tween'
}
}, filterButtons && (filterButtons === null || filterButtons === void 0 ? void 0 : filterButtons.length) > 1 && /*#__PURE__*/_react.default.createElement(_SearchBoxBody.StyledSearchBoxBodyHead, {
ref: headRef,
$hasScrolled: hasScrolled,
$hasGroupName: !!currentGroupName
}, !shouldHideFilterButtons && /*#__PURE__*/_react.default.createElement(_FilterButtons.default, {
items: filterButtons,
size: 0,
onSelect: onGroupSelect,
selectedItemIds: selectedGroups
}), /*#__PURE__*/_react.default.createElement(_SearchBoxBody.StyledSearchBoxBodyHeadGroupName, null, currentGroupName.replace('_', ''))), /*#__PURE__*/_react.default.createElement(_SearchBoxBody.StyledSearchBoxBodyContent, {
$height: height,
$headHeight: headHeight,
key: "content",
id: `searchbox-content__${uuid}`,
$browser: browser,
tabIndex: 0,
onScroll: handleScroll
}, children)), [browser, children, coordinates.x, coordinates.y, currentGroupName, filterButtons, handleScroll, hasScrolled, headHeight, height, onGroupSelect, ref, selectedGroups, shouldHideFilterButtons, uuid, width]);
});
SearchBoxBody.displayName = 'SearchBoxBody';
var _default = exports.default = SearchBoxBody;
//# sourceMappingURL=SearchBoxBody.js.map