@sanity/default-layout
Version:
The default layout components for Sanity
117 lines (116 loc) • 6.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.RecentSearches = RecentSearches;
var _ui = require("@sanity/ui");
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _search = require("../contexts/search");
var _Instructions = require("./Instructions");
var _PointerOverlay = require("./PointerOverlay");
var _RecentSearchItem = require("./RecentSearchItem");
var _templateObject, _templateObject2;
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) } })); }
// Max character count of selected document types (combined) by breakpoint
var MAX_COMBINED_TYPE_COUNT_SMALL = 20;
var MAX_COMBINED_TYPE_COUNT_LARGE = 40;
var RecentSearchesBox = (0, _styledComponents.default)(_ui.Box)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n"])));
var RecentSearchesInnerBox = (0, _styledComponents.default)(_ui.Box)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n"])));
function RecentSearches(_ref) {
var setChildContainerRef = _ref.setChildContainerRef,
setPointerOverlayRef = _ref.setPointerOverlayRef,
showFiltersOnClick = _ref.showFiltersOnClick,
onClear = _ref.onClear;
var _useSearchState = (0, _search.useSearchState)(),
dispatch = _useSearchState.dispatch,
recentSearchesStore = _useSearchState.recentSearchesStore,
recentSearches = _useSearchState.state.recentSearches;
var mediaIndex = (0, _ui.useMediaIndex)();
var maxVisibleTypePillChars = (0, _react.useMemo)(() => {
return mediaIndex < 2 ? MAX_COMBINED_TYPE_COUNT_SMALL : MAX_COMBINED_TYPE_COUNT_LARGE;
}, [mediaIndex]);
var handleClearRecentSearchesClick = (0, _react.useCallback)(() => {
// Remove terms from Local Storage
if (recentSearchesStore) {
var updatedRecentSearches = recentSearchesStore.removeSearchTerms();
dispatch({
recentSearches: updatedRecentSearches,
type: 'RECENT_SEARCHES_SET'
});
}
onClear === null || onClear === void 0 ? void 0 : onClear();
}, [dispatch, recentSearchesStore, onClear]);
var handleRecentSearchClick = (0, _react.useCallback)(searchTerms => {
// Optionally show filters panel if search terms are present
if (showFiltersOnClick && searchTerms.types.length) {
dispatch({
type: 'FILTERS_SHOW'
});
}
dispatch({
type: 'TERMS_SET',
terms: searchTerms
});
// Add to Local Storage
if (recentSearchesStore) {
var updatedRecentSearches = recentSearchesStore === null || recentSearchesStore === void 0 ? void 0 : recentSearchesStore.addSearchTerm(searchTerms);
dispatch({
recentSearches: updatedRecentSearches,
type: 'RECENT_SEARCHES_SET'
});
}
}, [dispatch, recentSearchesStore, showFiltersOnClick]);
var handleRecentSearchDelete = (0, _react.useCallback)(index => event => {
event.stopPropagation();
// Remove from Local Storage
if (recentSearchesStore) {
var updatedRecentSearches = recentSearchesStore === null || recentSearchesStore === void 0 ? void 0 : recentSearchesStore.removeSearchTermAtIndex(index);
dispatch({
recentSearches: updatedRecentSearches,
type: 'RECENT_SEARCHES_SET'
});
}
}, [dispatch, recentSearchesStore]);
return /*#__PURE__*/_react.default.createElement(RecentSearchesBox, {
flex: 1
}, recentSearches.length ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.Box, {
paddingBottom: 2,
paddingTop: 4,
paddingX: 3
}, /*#__PURE__*/_react.default.createElement(_ui.Label, {
muted: true,
size: 1
}, "Recent searches")), /*#__PURE__*/_react.default.createElement(RecentSearchesInnerBox, null, /*#__PURE__*/_react.default.createElement(_PointerOverlay.PointerOverlay, {
ref: setPointerOverlayRef
}), /*#__PURE__*/_react.default.createElement(_ui.Stack, {
paddingX: 1,
paddingTop: 1,
ref: setChildContainerRef,
space: 1
}, recentSearches === null || recentSearches === void 0 ? void 0 : recentSearches.map((recentSearch, index) => /*#__PURE__*/_react.default.createElement(_RecentSearchItem.RecentSearchItem, {
"data-index": index,
index: index,
key: recentSearch.__recent.timestamp,
maxVisibleTypePillChars: maxVisibleTypePillChars,
onClick: handleRecentSearchClick,
onDelete: handleRecentSearchDelete(index),
value: recentSearch
})))), /*#__PURE__*/_react.default.createElement(_ui.Box, {
padding: 1
}, /*#__PURE__*/_react.default.createElement(_ui.Button, {
justify: "flex-start",
fontSize: 1,
mode: "bleed",
onClick: handleClearRecentSearchesClick,
paddingX: 2,
paddingY: 3,
tone: "default"
}, /*#__PURE__*/_react.default.createElement(_ui.Text, {
muted: true,
size: 1
}, "Clear recent searches")))) : /*#__PURE__*/_react.default.createElement(_Instructions.Instructions, null));
}