@sanity/desk-tool/lib/panes/list/ListPane.js

Tool for managing all sorts of content in a structured manner

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ListPane = ListPane;
var _react = _interopRequireDefault(require("react"));
var _ui = require("@sanity/ui");
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _icons = require("@sanity/icons");
var _components = require("../../components");
var _paneItem = require("../../components/paneItem");
var _deskTool = require("../../contexts/deskTool");
var _paneRouter = require("../../contexts/paneRouter");
var _templateObject;
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 Divider = _styledComponents.default.hr(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: var(--card-border-color);\n  height: 1px;\n  margin: 0;\n  border: none;\n"])));

/**
 * @internal
 */
function ListPane(props) {
  var childItemId = props.childItemId,
    index = props.index,
    isActive = props.isActive,
    isSelected = props.isSelected,
    pane = props.pane,
    paneKey = props.paneKey;
  var _useDeskTool = (0, _deskTool.useDeskTool)(),
    features = _useDeskTool.features;
  var _usePaneLayout = (0, _components.usePaneLayout)(),
    layoutCollapsed = _usePaneLayout.collapsed;
  var defaultLayout = pane.defaultLayout,
    displayOptions = pane.displayOptions,
    items = pane.items,
    menuItems = pane.menuItems,
    menuItemGroups = pane.menuItemGroups,
    title = pane.title;
  var paneShowIcons = displayOptions === null || displayOptions === void 0 ? void 0 : displayOptions.showIcons;
  var shouldShowIconForItem = item => {
    var _item$displayOptions;
    var itemShowIcon = (_item$displayOptions = item.displayOptions) === null || _item$displayOptions === void 0 ? void 0 : _item$displayOptions.showIcon;

    // Specific true/false on item should have precedence over list setting
    if (typeof itemShowIcon !== 'undefined') {
      return itemShowIcon !== false; // Boolean(item.icon)
    }

    // If no item setting is defined, defer to the pane settings
    return paneShowIcons !== false; // Boolean(item.icon)
  };

  return /*#__PURE__*/_react.default.createElement(_components.Pane, {
    currentMaxWidth: 350,
    "data-testid": "desk-tool-list-pane",
    id: paneKey,
    maxWidth: 640,
    minWidth: 320,
    selected: isSelected
  }, /*#__PURE__*/_react.default.createElement(_components.PaneHeader, {
    actions: /*#__PURE__*/_react.default.createElement(_components.PaneHeaderActions, {
      menuItems: menuItems,
      menuItemGroups: menuItemGroups
    }),
    backButton: features.backButton && index > 0 && /*#__PURE__*/_react.default.createElement(_ui.Button, {
      as: _paneRouter.BackLink,
      "data-as": "a",
      icon: _icons.ArrowLeftIcon,
      mode: "bleed"
    }),
    title: title
  }), /*#__PURE__*/_react.default.createElement(_components.PaneContent, {
    overflow: layoutCollapsed ? undefined : 'auto'
  }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
    padding: 2,
    space: 1
  }, items && items.map((item, itemIndex) => {
    if (item.type === 'divider') {
      return (
        /*#__PURE__*/
        // eslint-disable-next-line react/no-array-index-key
        _react.default.createElement(_ui.Box, {
          key: "divider-".concat(itemIndex),
          paddingY: 1
        }, /*#__PURE__*/_react.default.createElement(Divider, null))
      );
    }
    var pressed = !isActive && childItemId === item.id;
    var selected = isActive && childItemId === item.id;
    return /*#__PURE__*/_react.default.createElement(_paneItem.PaneItem, {
      icon: shouldShowIconForItem(item) ? item.icon : false,
      id: item.id,
      key: item.id,
      layout: defaultLayout,
      pressed: pressed,
      schemaType: item.schemaType,
      selected: selected,
      title: item.title,
      value:
      // If this is a document list item, pass on the ID and type,
      // otherwise leave it undefined to use the passed title and gang
      item._id && item.schemaType ? {
        _id: item._id,
        _type: item.schemaType.name,
        title: item.title
      } : undefined
    });
  }))));
}