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; |