@atlaskit/editor-plugin-media-editing
Version:
MediaEditing plugin for @atlaskit/editor-core
207 lines • 9.51 kB
JavaScript
/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["triggerRef"];
import "./index.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import Button from '@atlaskit/button/new';
import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
import { mediaEditingMessages } from '@atlaskit/editor-common/messages';
import CheckMarkIcon from '@atlaskit/icon/core/check-mark';
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
import Modal, { ModalBody, ModalFooter, ModalTransition } from '@atlaskit/modal-dialog';
import { Box } from '@atlaskit/primitives/compiled';
import Spinner from '@atlaskit/spinner';
import { Cropper } from './Cropper';
import { FlipHorizontalIcon } from './icons/FlipHorizontalIcon';
import { FlipVerticalIcon } from './icons/FlipVerticalIcon';
import { RatioIcon } from './icons/RatioIcon';
import { RotateIcon } from './icons/RotateIcon';
import { useImageEditor } from './useImageEditor';
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'
};
export var 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 = 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(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(Modal, {
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(ModalBody, null, /*#__PURE__*/React.createElement("div", {
className: ax(["_1reo15vq _18m915vq _4t3i1osq _1bsb1osq _1e0c1txw _2lx21bp4 _1bah1h6o _4cvr1h6o"])
}, !isImageReady && /*#__PURE__*/React.createElement("div", {
className: ax(["_1e0c1txw _1bah1h6o _4cvr1h6o _kqswstnw"])
}, /*#__PURE__*/React.createElement(Spinner, {
size: "large",
testId: "spinner",
interactionName: "load",
label: "Loading"
})), imageUrl && /*#__PURE__*/React.createElement(Cropper, {
ref: cropperRef,
src: imageUrl,
alt: "Crop me",
crossOrigin: "anonymous",
initialCoverage: 1,
aspectRatio: currentAspectRatio,
isCircle: aspectRatioSelection === 'circle',
onImageReady: setIsImageReady,
className: ax(["_p12f1osq _1bsb1osq _4t3i1osq"])
}))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement("div", {
className: ax(["_1e0c1txw _1bah1yb4 _4cvr1h6o _1bsb1osq"])
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DropdownMenu, {
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 = _objectWithoutProperties(_ref2, _excluded);
return /*#__PURE__*/React.createElement(Button, {
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: ax(["_zulpu2gc _1e0c1txw _4cvr1h6o"])
}, /*#__PURE__*/React.createElement(RatioIcon, {
label: "change aspect ratio button",
isDisabled: !isImageReady || isSaving
}), aspectRatioSelection && formatMessage(mediaEditingMessages[aspectRatioLabelMap[aspectRatioSelection]]), /*#__PURE__*/React.createElement(ChevronDownIcon, {
label: "",
size: "small"
})));
}
}, /*#__PURE__*/React.createElement("div", {
className: ax(["_1ul9uuw1"])
}, /*#__PURE__*/React.createElement(DropdownItemGroup, null, ['original', 'custom'].map(function (item) {
return /*#__PURE__*/React.createElement(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: ax(["_1e0c1txw _1bah1yb4 _4cvr1h6o"])
}, formatMessage(mediaEditingMessages[aspectRatioLabelMap[item]]), aspectRatioSelection === item && /*#__PURE__*/React.createElement(CheckMarkIcon, {
label: "selected"
})));
})), /*#__PURE__*/React.createElement(DropdownItemGroup, {
hasSeparator: true
}, ['square', 'circle', 'landscape', 'portrait', 'wide'].map(function (item) {
return /*#__PURE__*/React.createElement(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: ax(["_1e0c1txw _1bah1yb4 _4cvr1h6o"])
}, formatMessage(mediaEditingMessages["".concat(item, "Button")]), aspectRatioSelection === item && /*#__PURE__*/React.createElement(CheckMarkIcon, {
label: "selected"
})));
})))), /*#__PURE__*/React.createElement(Button
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var _cropperRef$current;
return _regeneratorRuntime.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, {
label: "rotate right button",
isDisabled: !isImageReady || isSaving
})), /*#__PURE__*/React.createElement(Button, {
onClick: flipVertical,
isDisabled: !isImageReady || isSaving,
testId: "image-editor-flip-vertical-btn",
appearance: "subtle"
}, /*#__PURE__*/React.createElement(FlipVerticalIcon, {
label: "flip vertical button",
isDisabled: !isImageReady || isSaving
})), /*#__PURE__*/React.createElement(Button, {
onClick: flipHorizontal,
isDisabled: !isImageReady || isSaving,
testId: "image-editor-flip-horizontal-btn",
appearance: "subtle"
}, /*#__PURE__*/React.createElement(FlipHorizontalIcon, {
label: "flip horizontal button",
isDisabled: !isImageReady || isSaving
}))), /*#__PURE__*/React.createElement(Box, {
xcss: btnGroupStyle.box
}, /*#__PURE__*/React.createElement(Button, {
appearance: "subtle",
onClick: onClose,
isDisabled: isSaving
}, formatMessage(mediaEditingMessages.cancelButton)), /*#__PURE__*/React.createElement(Button, {
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(mediaEditingMessages.savingButton) : formatMessage(mediaEditingMessages.doneButton)))))));
};