UNPKG

@atlaskit/editor-plugin-media

Version:

Media plugin for @atlaskit/editor-core

65 lines (62 loc) 2.44 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.MediaSingleNodeSelector = exports.MediaCardWrapper = void 0; var _react = _interopRequireDefault(require("react")); var _react2 = require("@emotion/react"); var _ui = require("@atlaskit/editor-common/ui"); /** * @jsxRuntime classic * @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports var MediaSingleNodeSelector = exports.MediaSingleNodeSelector = 'media-single-node'; var absoluteDivStyles = (0, _react2.css)({ position: 'absolute', width: '100%', height: '100%' }); var forcedDimensionsStyles = (0, _react2.css)({ width: '100%', position: 'relative' }); var pointerCursorStyle = (0, _react2.css)({ cursor: 'pointer' }); var MediaCardWrapper = exports.MediaCardWrapper = function MediaCardWrapper(_ref) { var dimensions = _ref.dimensions, children = _ref.children, selected = _ref.selected, _ref$borderWidth = _ref.borderWidth, borderWidth = _ref$borderWidth === void 0 ? 0 : _ref$borderWidth, onContextMenu = _ref.onContextMenu; var calculatedBorderWidth = selected && borderWidth > 0 ? borderWidth + 1 : borderWidth; var borderRadius = "".concat(calculatedBorderWidth + 8, "px"); return (0, _react2.jsx)("div", { "data-testid": "media-card-wrapper" // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 , className: "media-card-wrapper", css: pointerCursorStyle, style: { borderColor: "var(--custom-palette-color)", borderWidth: "".concat(calculatedBorderWidth, "px"), // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 borderStyle: 'solid', // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 borderRadius: borderRadius } }, (0, _react2.jsx)("div", { css: forcedDimensionsStyles, style: { paddingBottom: "".concat(dimensions.height / dimensions.width * 100, "%") }, onContextMenuCapture: onContextMenu }, borderWidth > 0 && (0, _react2.jsx)(_ui.MediaBorderGapFiller, { borderColor: "var(--custom-palette-color)" }), (0, _react2.jsx)("div", { css: absoluteDivStyles }, children))); };