@sanity/default-layout
Version:
The default layout components for Sanity
125 lines (124 loc) • 6.03 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SortMenu = SortMenu;
var _autoId = require("@reach/auto-id");
var _icons = require("@sanity/icons");
var _ui = require("@sanity/ui");
var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _constants = require("../constants");
var _search = require("../contexts/search");
var _types = require("../types");
var _templateObject, _templateObject2;
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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var MENU_ORDERINGS = [_types.ORDER_RELEVANCE, {
type: 'divider'
}, _types.ORDER_CREATED_ASC, _types.ORDER_CREATED_DESC, {
type: 'divider'
}, _types.ORDER_UPDATED_ASC, _types.ORDER_UPDATED_DESC];
var IconWrapperBox = (0, _styledComponents.default)(_ui.Box)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n visibility: ", ";\n"])), _ref => {
var $visible = _ref.$visible;
return $visible ? 'visible' : 'hidden';
});
var SortMenuContentFlex = (0, _styledComponents.default)(_ui.Flex)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n box-sizing: border-box;\n height: ", "px;\n"])), _ref2 => {
var $small = _ref2.$small;
return $small ? _constants.SUBHEADER_HEIGHT_SMALL : _constants.SUBHEADER_HEIGHT_LARGE;
});
function isSearchDivider(item) {
return item.type === 'divider';
}
function CustomMenuItem(_ref3) {
var ordering = _ref3.ordering;
var _useSearchState = (0, _search.useSearchState)(),
dispatch = _useSearchState.dispatch,
currentOrdering = _useSearchState.state.ordering;
var handleClick = (0, _react.useCallback)(() => {
dispatch({
ordering,
type: 'SEARCH_ORDERING_SET'
});
}, [dispatch, ordering]);
var isSelected = (0, _react.useMemo)(() => (0, _isEqual.default)(currentOrdering, ordering), [currentOrdering, ordering]);
return /*#__PURE__*/_react.default.createElement(_ui.MenuItem, {
onClick: handleClick,
padding: 3,
selected: isSelected,
tone: "default"
}, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
align: "center",
justify: "space-between",
gap: 4
}, /*#__PURE__*/_react.default.createElement(_ui.Inline, {
space: 1
}, /*#__PURE__*/_react.default.createElement(_ui.Text, {
size: 1,
weight: "medium"
}, ordering.title)), /*#__PURE__*/_react.default.createElement(IconWrapperBox, {
$visible: isSelected
}, /*#__PURE__*/_react.default.createElement(_ui.Text, {
size: 1
}, /*#__PURE__*/_react.default.createElement(_icons.CheckmarkIcon, null)))));
}
function SortMenu(_ref4) {
var small = _ref4.small;
var _useSearchState2 = (0, _search.useSearchState)(),
ordering = _useSearchState2.state.ordering;
var menuButtonId = (0, _autoId.useId)();
var currentMenuItem = MENU_ORDERINGS.find(item => (0, _isEqual.default)(ordering, item) && !isSearchDivider(item));
if (!currentMenuItem) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_ui.Card, {
borderBottom: true
}, /*#__PURE__*/_react.default.createElement(SortMenuContentFlex, {
$small: small,
align: "center",
flex: 1,
marginLeft: small ? 0 : 1,
padding: 1
}, /*#__PURE__*/_react.default.createElement(_ui.MenuButton, {
button: /*#__PURE__*/_react.default.createElement(_ui.Button, {
mode: "bleed",
padding: 3
}, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
align: "center",
gap: 1,
justify: "space-between"
}, /*#__PURE__*/_react.default.createElement(_ui.Box, {
marginRight: 1
}, /*#__PURE__*/_react.default.createElement(_ui.Text, {
size: 1
}, /*#__PURE__*/_react.default.createElement(_icons.SortIcon, null))), /*#__PURE__*/_react.default.createElement(_ui.Inline, {
space: 2
}, /*#__PURE__*/_react.default.createElement(_ui.Text, {
size: 1,
weight: "medium"
}, currentMenuItem.title)))),
id: menuButtonId || '',
menu: /*#__PURE__*/_react.default.createElement(_ui.Menu, null, MENU_ORDERINGS.map((item, index) => {
if (isSearchDivider(item)) {
// eslint-disable-next-line react/no-array-index-key
return /*#__PURE__*/_react.default.createElement(_ui.MenuDivider, {
key: index
});
}
return /*#__PURE__*/_react.default.createElement(CustomMenuItem
// eslint-disable-next-line react/no-array-index-key
, {
key: index,
ordering: item
});
})),
placement: "bottom-start",
popover: {
portal: true,
radius: 2
}
})));
}