You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							148 lines
						
					
					
						
							4.9 KiB
						
					
					
				
			
		
		
	
	
							148 lines
						
					
					
						
							4.9 KiB
						
					
					
				"use strict";
 | 
						|
 | 
						|
Object.defineProperty(exports, "__esModule", {
 | 
						|
  value: true
 | 
						|
});
 | 
						|
exports.default = exports.ActionHeader = void 0;
 | 
						|
 | 
						|
var _designSystem = require("@adminjs/design-system");
 | 
						|
 | 
						|
var _react = _interopRequireDefault(require("react"));
 | 
						|
 | 
						|
var _reactRouter = require("react-router");
 | 
						|
 | 
						|
var _allowOverride = _interopRequireDefault(require("../../../hoc/allow-override"));
 | 
						|
 | 
						|
var _hooks = require("../../../hooks");
 | 
						|
 | 
						|
var _action = require("../../../interfaces/action");
 | 
						|
 | 
						|
var _utils = require("../../../utils");
 | 
						|
 | 
						|
var _breadcrumbs = _interopRequireDefault(require("../breadcrumbs"));
 | 
						|
 | 
						|
var _actionsToButtonGroup = require("./actions-to-button-group");
 | 
						|
 | 
						|
var _styledBackButton = require("./styled-back-button");
 | 
						|
 | 
						|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 | 
						|
 | 
						|
/* eslint-disable jsx-a11y/anchor-is-valid */
 | 
						|
 | 
						|
/**
 | 
						|
 * Header of an action. It renders Action name with buttons for all the actions.
 | 
						|
 *
 | 
						|
 * ### Usage
 | 
						|
 *
 | 
						|
 * ```
 | 
						|
 * import { ActionHeader } from 'adminjs'
 | 
						|
 * ```
 | 
						|
 *
 | 
						|
 * @component
 | 
						|
 * @subcategory Application
 | 
						|
 */
 | 
						|
const ActionHeader = props => {
 | 
						|
  const {
 | 
						|
    resource,
 | 
						|
    toggleFilter,
 | 
						|
    actionPerformed,
 | 
						|
    record,
 | 
						|
    action,
 | 
						|
    tag,
 | 
						|
    omitActions
 | 
						|
  } = props;
 | 
						|
  const {
 | 
						|
    translateButton
 | 
						|
  } = (0, _hooks.useTranslation)();
 | 
						|
  const navigate = (0, _reactRouter.useNavigate)();
 | 
						|
  const actionResponseHandler = (0, _hooks.useActionResponseHandler)(actionPerformed);
 | 
						|
 | 
						|
  if (action.hideActionHeader) {
 | 
						|
    return null;
 | 
						|
  }
 | 
						|
 | 
						|
  const resourceId = resource.id;
 | 
						|
  const params = {
 | 
						|
    resourceId,
 | 
						|
    recordId: record === null || record === void 0 ? void 0 : record.id
 | 
						|
  };
 | 
						|
 | 
						|
  const handleActionClick = (event, sourceAction) => (0, _action.buildActionClickHandler)({
 | 
						|
    action: sourceAction,
 | 
						|
    params,
 | 
						|
    actionResponseHandler,
 | 
						|
    navigate
 | 
						|
  })(event);
 | 
						|
 | 
						|
  const actionButtons = (0, _actionsToButtonGroup.actionsToButtonGroup)({
 | 
						|
    actions: record ? record.recordActions.filter(ra => !action || action.name !== ra.name) // only new action should be seen in regular "Big" actions place
 | 
						|
    : resource.resourceActions.filter(ra => ra.name === 'new' && (!action || action.name !== ra.name)),
 | 
						|
    params,
 | 
						|
    handleClick: handleActionClick
 | 
						|
  });
 | 
						|
 | 
						|
  if (toggleFilter) {
 | 
						|
    actionButtons.push({
 | 
						|
      label: translateButton('filter', resource.id),
 | 
						|
      onClick: toggleFilter,
 | 
						|
      icon: 'SettingsAdjust',
 | 
						|
      'data-css': (0, _utils.getResourceElementCss)(resource.id, 'filter-button')
 | 
						|
    });
 | 
						|
  } // list and new actions are special and are are always
 | 
						|
 | 
						|
 | 
						|
  const customResourceButtons = (0, _actionsToButtonGroup.actionsToButtonGroup)({
 | 
						|
    actions: action.showResourceActions ? resource.resourceActions.filter(ra => !['list', 'new'].includes(ra.name)) : [],
 | 
						|
    params: {
 | 
						|
      resourceId
 | 
						|
    },
 | 
						|
    handleClick: handleActionClick
 | 
						|
  });
 | 
						|
  const title = action ? action.label : resource.name; // styled which differs if action header is in the drawer or not
 | 
						|
 | 
						|
  const cssIsRootFlex = !action.showInDrawer;
 | 
						|
  const cssHeaderMT = action.showInDrawer ? '' : 'lg';
 | 
						|
  const cssActionsMB = action.showInDrawer ? 'xl' : 'default';
 | 
						|
  const CssHComponent = action.showInDrawer ? _designSystem.H3 : _designSystem.H2;
 | 
						|
  const contentTag = (0, _utils.getActionElementCss)(resourceId, action.name, 'action-header');
 | 
						|
  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
 | 
						|
    className: (0, _designSystem.cssClass)('ActionHeader'),
 | 
						|
    "data-css": contentTag
 | 
						|
  }, action.showInDrawer ? '' : /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
 | 
						|
    flex: true,
 | 
						|
    flexDirection: "row",
 | 
						|
    px: ['default', 0]
 | 
						|
  }, /*#__PURE__*/_react.default.createElement(_breadcrumbs.default, {
 | 
						|
    resource: resource,
 | 
						|
    actionName: action.name,
 | 
						|
    record: record
 | 
						|
  }), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
 | 
						|
    flexShrink: 0
 | 
						|
  }, /*#__PURE__*/_react.default.createElement(_designSystem.ButtonGroup, {
 | 
						|
    size: "sm",
 | 
						|
    rounded: true,
 | 
						|
    buttons: customResourceButtons
 | 
						|
  }))), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
 | 
						|
    display: ['block', cssIsRootFlex ? 'flex' : 'block']
 | 
						|
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
 | 
						|
    mt: cssHeaderMT,
 | 
						|
    flexGrow: 1,
 | 
						|
    px: ['default', 0]
 | 
						|
  }, /*#__PURE__*/_react.default.createElement(CssHComponent, {
 | 
						|
    mb: "lg"
 | 
						|
  }, action.showInDrawer ? /*#__PURE__*/_react.default.createElement(_styledBackButton.StyledBackButton, {
 | 
						|
    showInDrawer: action.showInDrawer
 | 
						|
  }) : '', title, tag ? /*#__PURE__*/_react.default.createElement(_designSystem.Badge, {
 | 
						|
    variant: "primary",
 | 
						|
    ml: "default"
 | 
						|
  }, tag) : '')), omitActions ? '' : /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
 | 
						|
    mt: "xl",
 | 
						|
    mb: cssActionsMB,
 | 
						|
    flexShrink: 0
 | 
						|
  }, /*#__PURE__*/_react.default.createElement(_designSystem.ButtonGroup, {
 | 
						|
    buttons: actionButtons
 | 
						|
  }))));
 | 
						|
};
 | 
						|
 | 
						|
const OverridableActionHeader = (0, _allowOverride.default)(ActionHeader, 'ActionHeader');
 | 
						|
exports.ActionHeader = exports.default = OverridableActionHeader; |