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
			| 
								 
											3 years ago
										 
									 | 
							
								"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;
							 |