@sanity/default-layout
Version:
The default layout components for Sanity
122 lines (119 loc) • 7.11 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SearchResults = SearchResults;
var _ui = require("@sanity/ui");
var _draftUtils = require("part:@sanity/base/util/draft-utils");
var _react = _interopRequireWildcard(require("react"));
var _reactVirtual = require("react-virtual");
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _constants = require("../constants");
var _commandList = require("../contexts/commandList");
var _search = require("../contexts/search");
var _NoResults = require("./NoResults");
var _PointerOverlay = require("./PointerOverlay");
var _SearchError = require("./SearchError");
var _searchResultItem = require("./searchResultItem");
var _SortMenu = require("./SortMenu");
var _templateObject, _templateObject2, _templateObject3, _templateObject4; // @todo: remove the following line when part imports has been removed from this file
///<reference types="@sanity/types/parts" />
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var SearchResultsFlex = (0, _styledComponents.default)(_ui.Flex)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n height: 100%;\n"])));
var SearchResultsInnerFlex = (0, _styledComponents.default)(_ui.Flex)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n opacity: ", ";\n overflow: hidden;\n position: relative;\n transition: 300ms opacity;\n width: 100%;\n"])), _ref => {
var $loading = _ref.$loading;
return $loading ? 0.5 : 1;
});
var VirtualListBox = (0, _styledComponents.default)(_ui.Box)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n height: 100%;\n outline: none;\n overflow-x: hidden;\n overflow-y: auto;\n width: 100%;\n"])));
var VirtualListChildBox = (0, _styledComponents.default)(_ui.Box)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n height: ", ";\n position: relative;\n width: 100%;\n"])), _ref2 => {
var $height = _ref2.$height;
return "".concat($height, "px");
});
function SearchResults(_ref3) {
var onClose = _ref3.onClose,
setChildContainerRef = _ref3.setChildContainerRef,
setPointerOverlayRef = _ref3.setPointerOverlayRef,
small = _ref3.small;
var _useSearchState = (0, _search.useSearchState)(),
dispatch = _useSearchState.dispatch,
recentSearchesStore = _useSearchState.recentSearchesStore,
_useSearchState$state = _useSearchState.state,
debug = _useSearchState$state.debug,
terms = _useSearchState$state.terms,
result = _useSearchState$state.result;
var childParentRef = (0, _react.useRef)(null);
var _useVirtual = (0, _reactVirtual.useVirtual)({
estimateSize: (0, _react.useCallback)(() => _constants.VIRTUAL_LIST_ITEM_HEIGHT, []),
overscan: _constants.VIRTUAL_LIST_OVERSCAN,
parentRef: childParentRef,
size: result.hits.length
}),
scrollToIndex = _useVirtual.scrollToIndex,
totalSize = _useVirtual.totalSize,
virtualItems = _useVirtual.virtualItems;
var _useCommandList = (0, _commandList.useCommandList)(),
onChildClick = _useCommandList.onChildClick,
onChildMouseDown = _useCommandList.onChildMouseDown,
onChildMouseEnter = _useCommandList.onChildMouseEnter,
setVirtualListScrollToIndex = _useCommandList.setVirtualListScrollToIndex;
/**
* Send react-virtual's `scrollToIndex` function to shared CommandList context
*/
(0, _react.useEffect)(() => {
setVirtualListScrollToIndex(scrollToIndex);
}, [setVirtualListScrollToIndex, scrollToIndex]);
/**
* Add current search terms to recent searches, trigger child item click and close search
*/
var handleResultClick = (0, _react.useCallback)(() => {
// Add terms to Local Storage
if (recentSearchesStore) {
var updatedRecentSearches = recentSearchesStore.addSearchTerm(terms);
dispatch({
recentSearches: updatedRecentSearches,
type: 'RECENT_SEARCHES_SET'
});
}
onChildClick === null || onChildClick === void 0 ? void 0 : onChildClick();
onClose();
}, [dispatch, onChildClick, onClose, recentSearchesStore, terms]);
var hasSearchResults = !!result.hits.length;
return /*#__PURE__*/_react.default.createElement(SearchResultsFlex, {
direction: "column"
}, hasSearchResults && /*#__PURE__*/_react.default.createElement(_SortMenu.SortMenu, {
small: small
}), /*#__PURE__*/_react.default.createElement(SearchResultsInnerFlex, {
$loading: result.loading,
"aria-busy": result.loading,
flex: 1
}, result.error ? /*#__PURE__*/_react.default.createElement(_SearchError.SearchError, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hasSearchResults &&
/*#__PURE__*/
// (Has search results)
_react.default.createElement(VirtualListBox, {
"data-overflow": true,
ref: childParentRef,
tabIndex: -1
}, /*#__PURE__*/_react.default.createElement(_PointerOverlay.PointerOverlay, {
ref: setPointerOverlayRef
}), /*#__PURE__*/_react.default.createElement(VirtualListChildBox, {
$height: totalSize,
paddingBottom: 1,
ref: setChildContainerRef
}, virtualItems.map(virtualRow => {
var hit = result.hits[virtualRow.index];
return /*#__PURE__*/_react.default.createElement(_searchResultItem.SearchResultItem, {
data: hit,
debug: debug,
documentId: (0, _draftUtils.getPublishedId)(hit.hit._id) || '',
index: virtualRow.index,
key: hit.hit._id,
onClick: handleResultClick,
onMouseDown: onChildMouseDown,
onMouseEnter: onChildMouseEnter(virtualRow.index),
virtualRow: virtualRow
});
}))), !result.hits.length && result.loaded && /*#__PURE__*/_react.default.createElement(_NoResults.NoResults, null))));
}