@atlaskit/editor-plugin-media-editing
Version:
MediaEditing plugin for @atlaskit/editor-core
187 lines • 7.99 kB
JavaScript
/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./index.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
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';
const imageWrapper = null;
const cropper = null;
const modalFooter = null;
const ratioBtn = null;
const ratioSelect = null;
const loadingImageStyle = null;
const dropdownItemGroup = null;
const btnGroupStyle = {
box: "_zulpu2gc _1e0c1txw"
};
const aspectRatioLabelMap = {
original: 'aspectRatioSelectionOriginal',
custom: 'aspectRatioSelectionCustom',
square: 'aspectRatioSelectionSquare',
circle: 'aspectRatioSelectionCircle',
landscape: 'aspectRatioSelectionLandscape',
portrait: 'aspectRatioSelectionPortrait',
wide: 'aspectRatioSelectionWide'
};
export const ImageEditor = ({
imageUrl,
isOpen,
isSaving = false,
onClose,
onSave,
errorReporter
}) => {
const {
cropperRef,
doneButtonRef,
isImageReady,
setIsImageReady,
currentAspectRatio,
aspectRatioSelection,
flipHorizontal,
flipVertical,
handleSave,
setSelectionArea,
formatMessage,
rotateRight
} = useImageEditor();
return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(Modal, {
onClose: isSaving ? () => {} : 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: ({
triggerRef,
...props
}) => /*#__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(item => /*#__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: () => {
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(item => /*#__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: () => {
setSelectionArea(item);
}
}, /*#__PURE__*/React.createElement("div", {
className: ax(["_1e0c1txw _1bah1yb4 _4cvr1h6o"])
}, formatMessage(mediaEditingMessages[`${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: async () => {
var _cropperRef$current;
rotateRight();
await setSelectionArea('custom');
(_cropperRef$current = cropperRef.current) === null || _cropperRef$current === void 0 ? void 0 : _cropperRef$current.fitStencilToImage();
},
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: () => handleSave(onSave, onClose, errorReporter),
isDisabled: !isImageReady || isSaving,
isLoading: isSaving,
ref: doneButtonRef
}, isSaving ? formatMessage(mediaEditingMessages.savingButton) : formatMessage(mediaEditingMessages.doneButton)))))));
};