@atlaskit/editor-plugin-media-editing
Version:
MediaEditing plugin for @atlaskit/editor-core
216 lines (215 loc) • 11.1 kB
JavaScript
/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ImageEditor = void 0;
require("./index.compiled.css");
var React = _interopRequireWildcard(require("react"));
var _runtime = require("@compiled/react/runtime");
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _new = _interopRequireDefault(require("@atlaskit/button/new"));
var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
var _messages = require("@atlaskit/editor-common/messages");
var _checkMark = _interopRequireDefault(require("@atlaskit/icon/core/check-mark"));
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
var _compiled = require("@atlaskit/primitives/compiled");
var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
var _Cropper = require("./Cropper");
var _FlipHorizontalIcon = require("./icons/FlipHorizontalIcon");
var _FlipVerticalIcon = require("./icons/FlipVerticalIcon");
var _RatioIcon = require("./icons/RatioIcon");
var _RotateIcon = require("./icons/RotateIcon");
var _useImageEditor2 = require("./useImageEditor");
var _excluded = ["triggerRef"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var imageWrapper = null;
var cropper = null;
var modalFooter = null;
var ratioBtn = null;
var ratioSelect = null;
var loadingImageStyle = null;
var dropdownItemGroup = null;
var btnGroupStyle = {
box: "_zulpu2gc _1e0c1txw"
};
var aspectRatioLabelMap = {
original: 'aspectRatioSelectionOriginal',
custom: 'aspectRatioSelectionCustom',
square: 'aspectRatioSelectionSquare',
circle: 'aspectRatioSelectionCircle',
landscape: 'aspectRatioSelectionLandscape',
portrait: 'aspectRatioSelectionPortrait',
wide: 'aspectRatioSelectionWide'
};
var ImageEditor = exports.ImageEditor = function ImageEditor(_ref) {
var imageUrl = _ref.imageUrl,
isOpen = _ref.isOpen,
_ref$isSaving = _ref.isSaving,
isSaving = _ref$isSaving === void 0 ? false : _ref$isSaving,
onClose = _ref.onClose,
onSave = _ref.onSave,
errorReporter = _ref.errorReporter;
var _useImageEditor = (0, _useImageEditor2.useImageEditor)(),
cropperRef = _useImageEditor.cropperRef,
doneButtonRef = _useImageEditor.doneButtonRef,
isImageReady = _useImageEditor.isImageReady,
setIsImageReady = _useImageEditor.setIsImageReady,
currentAspectRatio = _useImageEditor.currentAspectRatio,
aspectRatioSelection = _useImageEditor.aspectRatioSelection,
flipHorizontal = _useImageEditor.flipHorizontal,
flipVertical = _useImageEditor.flipVertical,
handleSave = _useImageEditor.handleSave,
setSelectionArea = _useImageEditor.setSelectionArea,
formatMessage = _useImageEditor.formatMessage,
rotateRight = _useImageEditor.rotateRight;
return /*#__PURE__*/React.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(_modalDialog.default, {
onClose: isSaving ? function () {} : onClose,
height: 800,
width: "x-large",
testId: "image-editor-modal",
label: "Image editor modal"
}, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/React.createElement("div", {
className: (0, _runtime.ax)(["_1reo15vq _18m915vq _4t3i1osq _1bsb1osq _1e0c1txw _2lx21bp4 _1bah1h6o _4cvr1h6o"])
}, !isImageReady && /*#__PURE__*/React.createElement("div", {
className: (0, _runtime.ax)(["_1e0c1txw _1bah1h6o _4cvr1h6o _kqswstnw"])
}, /*#__PURE__*/React.createElement(_spinner.default, {
size: "large",
testId: "spinner",
interactionName: "load",
label: "Loading"
})), imageUrl && /*#__PURE__*/React.createElement(_Cropper.Cropper, {
ref: cropperRef,
src: imageUrl,
alt: "Crop me",
crossOrigin: "anonymous",
initialCoverage: 1,
aspectRatio: currentAspectRatio,
isCircle: aspectRatioSelection === 'circle',
onImageReady: setIsImageReady,
className: (0, _runtime.ax)(["_p12f1osq _1bsb1osq _4t3i1osq"])
}))), /*#__PURE__*/React.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/React.createElement("div", {
className: (0, _runtime.ax)(["_1e0c1txw _1bah1yb4 _4cvr1h6o _1bsb1osq"])
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_dropdownMenu.default, {
appearance: "default"
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
trigger: function trigger(_ref2) {
var triggerRef = _ref2.triggerRef,
props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
return /*#__PURE__*/React.createElement(_new.default, {
ref: triggerRef,
appearance: "subtle",
isDisabled: !isImageReady || isSaving,
isSelected: props.isSelected,
onClick: props.onClick,
onFocus: props.onFocus,
onBlur: props.onBlur,
"aria-expanded": props['aria-expanded'],
"aria-haspopup": props['aria-haspopup'],
"aria-controls": props['aria-controls'],
testId: props.testId
}, /*#__PURE__*/React.createElement("div", {
className: (0, _runtime.ax)(["_zulpu2gc _1e0c1txw _4cvr1h6o"])
}, /*#__PURE__*/React.createElement(_RatioIcon.RatioIcon, {
label: "change aspect ratio button",
isDisabled: !isImageReady || isSaving
}), aspectRatioSelection && formatMessage(_messages.mediaEditingMessages[aspectRatioLabelMap[aspectRatioSelection]]), /*#__PURE__*/React.createElement(_chevronDown.default, {
label: "",
size: "small"
})));
}
}, /*#__PURE__*/React.createElement("div", {
className: (0, _runtime.ax)(["_1ul9uuw1"])
}, /*#__PURE__*/React.createElement(_dropdownMenu.DropdownItemGroup, null, ['original', 'custom'].map(function (item) {
return /*#__PURE__*/React.createElement(_dropdownMenu.DropdownItem, {
key: item
// eslint-disable-next-line @atlassian/perf-linting/detect-unnecessary-rerenders, @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onClick: function onClick() {
setSelectionArea(item);
}
}, /*#__PURE__*/React.createElement("div", {
className: (0, _runtime.ax)(["_1e0c1txw _1bah1yb4 _4cvr1h6o"])
}, formatMessage(_messages.mediaEditingMessages[aspectRatioLabelMap[item]]), aspectRatioSelection === item && /*#__PURE__*/React.createElement(_checkMark.default, {
label: "selected"
})));
})), /*#__PURE__*/React.createElement(_dropdownMenu.DropdownItemGroup, {
hasSeparator: true
}, ['square', 'circle', 'landscape', 'portrait', 'wide'].map(function (item) {
return /*#__PURE__*/React.createElement(_dropdownMenu.DropdownItem, {
key: item
// eslint-disable-next-line @atlassian/perf-linting/detect-unnecessary-rerenders, @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onClick: function onClick() {
setSelectionArea(item);
}
}, /*#__PURE__*/React.createElement("div", {
className: (0, _runtime.ax)(["_1e0c1txw _1bah1yb4 _4cvr1h6o"])
}, formatMessage(_messages.mediaEditingMessages["".concat(item, "Button")]), aspectRatioSelection === item && /*#__PURE__*/React.createElement(_checkMark.default, {
label: "selected"
})));
})))), /*#__PURE__*/React.createElement(_new.default
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
var _cropperRef$current;
return _regenerator.default.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
rotateRight();
_context.next = 3;
return setSelectionArea('custom');
case 3:
(_cropperRef$current = cropperRef.current) === null || _cropperRef$current === void 0 || _cropperRef$current.fitStencilToImage();
case 4:
case "end":
return _context.stop();
}
}, _callee);
})),
isDisabled: !isImageReady || isSaving,
testId: "image-editor-rotate-right-btn",
appearance: "subtle"
}, /*#__PURE__*/React.createElement(_RotateIcon.RotateIcon, {
label: "rotate right button",
isDisabled: !isImageReady || isSaving
})), /*#__PURE__*/React.createElement(_new.default, {
onClick: flipVertical,
isDisabled: !isImageReady || isSaving,
testId: "image-editor-flip-vertical-btn",
appearance: "subtle"
}, /*#__PURE__*/React.createElement(_FlipVerticalIcon.FlipVerticalIcon, {
label: "flip vertical button",
isDisabled: !isImageReady || isSaving
})), /*#__PURE__*/React.createElement(_new.default, {
onClick: flipHorizontal,
isDisabled: !isImageReady || isSaving,
testId: "image-editor-flip-horizontal-btn",
appearance: "subtle"
}, /*#__PURE__*/React.createElement(_FlipHorizontalIcon.FlipHorizontalIcon, {
label: "flip horizontal button",
isDisabled: !isImageReady || isSaving
}))), /*#__PURE__*/React.createElement(_compiled.Box, {
xcss: btnGroupStyle.box
}, /*#__PURE__*/React.createElement(_new.default, {
appearance: "subtle",
onClick: onClose,
isDisabled: isSaving
}, formatMessage(_messages.mediaEditingMessages.cancelButton)), /*#__PURE__*/React.createElement(_new.default, {
appearance: "primary"
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onClick: function onClick() {
return handleSave(onSave, onClose, errorReporter);
},
isDisabled: !isImageReady || isSaving,
isLoading: isSaving,
ref: doneButtonRef
}, isSaving ? formatMessage(_messages.mediaEditingMessages.savingButton) : formatMessage(_messages.mediaEditingMessages.doneButton)))))));
};