@onesy/ui-react
Version:
UI for React
1,055 lines (1,032 loc) • 53.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _IconMaterialDoneW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialDoneW100"));
var _IconMaterialCloseW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloseW100"));
var _IconMaterialTuneW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialTuneW100"));
var _IconMaterialCropW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCropW100"));
var _IconMaterialAspectRatioW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialAspectRatioW100"));
var _IconMaterialHighQualityW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialHighQualityW100"));
var _IconMaterialClearAllW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialClearAllW100"));
var _IconMaterialDownloadW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialDownloadW100"));
var _IconMaterialCloudW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloudW100"));
var _IconMaterialWaterDropW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialWaterDropW100"));
var _IconMaterialFlakyW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialFlakyW100"));
var _IconMaterialWbSunnyW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialWbSunnyW100"));
var _IconMaterialTonalityW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialTonalityW100"));
var _IconMaterialNightlightW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialNightlightW100"));
var _Type = _interopRequireDefault(require("../Type"));
var _Surface = _interopRequireDefault(require("../Surface"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Expand = _interopRequireDefault(require("../Expand"));
var _Divider = _interopRequireDefault(require("../Divider"));
var _Slider = _interopRequireDefault(require("../Slider"));
var _NumericTextField = _interopRequireDefault(require("../NumericTextField"));
var _ImageCrop = _interopRequireDefault(require("../ImageCrop"));
var _Chip = _interopRequireDefault(require("../Chip"));
var _Line = _interopRequireDefault(require("../Line"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "tonal", "color", "image", "name", "type", "openDefault", "openedOptionDefault", "valueDefault", "value", "valueCopyDefault", "valueCopy", "onChange", "onChangeCopy", "onlyFilters", "filters", "meta", "filtersOption", "cropOption", "resizeOption", "qualityOption", "downloadOption", "resizeAspectRatio", "renderOption", "renderOptionClear", "renderSave", "renderCancel", "renderSlider", "renderDownload", "renderInput", "IconBrightness", "IconContrast", "IconSaturation", "IconFade", "IconInvert", "IconOldPhoto", "IconSave", "IconCancel", "IconClear", "IconCrop", "IconFilters", "IconResize", "IconQuality", "IconDownload", "ChipProps", "SliderProps", "TooltipProps", "ImageCropProps", "IconButtonProps", "className", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const useStyle = (0, _styleReact.style)(theme => ({
root: {},
option: {
width: '100%',
padding: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(3, 'px')}`
},
options: {
width: '100%',
overflowX: 'auto',
padding: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(3, 'px')}`
},
canvas: {
width: '100%',
height: 'auto',
zIndex: '1'
},
inputs: {
width: '100%'
},
divider: {
'&.onesy-Divider-root': {
margin: '0px'
}
},
imageWrapper: {
position: 'relative',
height: '400px',
width: '100%',
'&::before': {
content: '""',
position: 'absolute',
inset: '0',
width: '100%',
height: '100%',
background: 'currentColor',
zIndex: '0',
opacity: '0.94'
}
},
canvasWrapper: {
position: 'relative',
lineHeight: '0'
},
image: {
width: '100%',
height: 'auto'
},
imageCopy: {
width: '100%',
height: 'auto'
},
imageCrop: {
position: 'absolute',
inset: '0',
width: '100% !important',
height: '100% !important'
},
meta: {
width: '100%',
padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(3, 'px')}`
},
optionInput: {
'& .onesy-TextField-input-wrapper': {
padding: '0px',
height: 'auto'
},
'& .onesy-TextField-input': {
textAlign: 'center'
}
},
filters: {
width: '100%',
overflowX: 'auto',
'& > *': {
flex: '0 0 auto'
}
},
action: {
width: '100%',
paddingTop: theme.methods.space.value(2, 'px')
},
slider: {
width: '100%'
}
}), {
name: 'onesy-ImageEdit'
});
const ImageEdit = props_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9, _theme$elements0, _theme$elements1, _ref, _ref2;
const theme = (0, _styleReact.useOnesyTheme)();
const l = theme.l;
const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyImageEdit) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
const Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
const Surface = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Surface) || _Surface.default;
const IconButton = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.IconButton) || _IconButton.default;
const Tooltip = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Tooltip) || _Tooltip.default;
const Expand = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Expand) || _Expand.default;
const Divider = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Divider) || _Divider.default;
const Slider = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.Slider) || _Slider.default;
const NumericTextField = (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.NumericTextField) || _NumericTextField.default;
const ImageCrop = (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.ImageCrop) || _ImageCrop.default;
const Chip = (theme === null || theme === void 0 || (_theme$elements1 = theme.elements) === null || _theme$elements1 === void 0 ? void 0 : _theme$elements1.Chip) || _Chip.default;
const {
ref,
tonal = true,
color = 'primary',
image,
name = 'onesy-image.jpg',
type = 'image/jpeg',
openDefault,
openedOptionDefault,
valueDefault,
value: value_,
valueCopyDefault,
valueCopy: valueCopy_,
onChange: onChange_,
onChangeCopy: onChangeCopy_,
onlyFilters,
filters: filters_,
meta = true,
filtersOption = true,
cropOption = true,
resizeOption = true,
qualityOption = true,
downloadOption = true,
resizeAspectRatio = true,
renderOption,
renderOptionClear,
renderSave,
renderCancel,
renderSlider,
renderDownload,
renderInput,
IconBrightness = _IconMaterialWbSunnyW.default,
IconContrast = _IconMaterialFlakyW.default,
IconSaturation = _IconMaterialWaterDropW.default,
IconFade = _IconMaterialCloudW.default,
IconInvert = _IconMaterialTonalityW.default,
IconOldPhoto = _IconMaterialNightlightW.default,
IconSave = _IconMaterialDoneW.default,
IconCancel = _IconMaterialCloseW.default,
IconClear = _IconMaterialClearAllW.default,
IconCrop = _IconMaterialCropW.default,
IconFilters = _IconMaterialTuneW.default,
IconResize = _IconMaterialAspectRatioW.default,
IconQuality = _IconMaterialHighQualityW.default,
IconDownload = _IconMaterialDownloadW.default,
ChipProps: ChipProps_,
SliderProps: SliderProps_,
TooltipProps: TooltipProps_,
ImageCropProps: ImageCropProps_,
IconButtonProps: IconButtonProps_,
className,
children
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const [init, setInit] = _react.default.useState(false);
const [value, setValue] = _react.default.useState(valueDefault !== undefined ? valueDefault : value_);
const [valueCopy, setValueCopy] = _react.default.useState(valueCopyDefault !== undefined ? valueCopyDefault : valueCopy_);
const [open, setOpen] = _react.default.useState(openDefault);
const [openedOption, setOpenedOption] = _react.default.useState(openedOptionDefault);
const [quality, setQuality] = _react.default.useState(100);
const [filterValues, setFilterValues] = _react.default.useState({});
const [filterValuesCopy, setFilterValuesCopy] = _react.default.useState({});
const [filter, setFilter] = _react.default.useState();
const [resize, setResize] = _react.default.useState();
const [selection, setSelection] = _react.default.useState();
const [aspectRatio, setAspectRatio] = _react.default.useState();
const [aspectRatioCustom, setAspectRatioCustom] = _react.default.useState([1, 1]);
const [size, setSize] = _react.default.useState('');
const {
classes
} = useStyle();
const refs = {
root: _react.default.useRef(null),
option: _react.default.useRef(null),
value: _react.default.useRef(null),
valueCopy: _react.default.useRef(null),
canvasMain: _react.default.useRef(null),
open: _react.default.useRef(null),
resizeAspectRatio: _react.default.useRef(null),
filterValues: _react.default.useRef(null),
filterValuesCopy: _react.default.useRef(null)
};
refs.value.current = value;
refs.valueCopy.current = valueCopy;
refs.open.current = open;
refs.resizeAspectRatio.current = resizeAspectRatio;
refs.filterValues.current = filterValues;
refs.filterValuesCopy.current = filterValuesCopy;
const updateSize = (valueNew = refs.canvasMain.current) => {
const uri = valueNew.toDataURL(type);
// Update size
setSize((0, _utils.to)((0, _utils.to)(uri, 'byte-size'), 'size-format'));
};
_react.default.useEffect(() => {
var _refs$root$current;
const method = event => {
if (['Escape'].includes(event.key) || ['s', 'S'].includes(event.key) && event.metaKey || ['f', 'F'].includes(event.key) && event.metaKey && event.shiftKey || ['c', 'C'].includes(event.key) && event.metaKey && event.shiftKey || ['d', 'D'].includes(event.key) && (event.metaKey || event.shiftKey) || ['r', 'R'].includes(event.key) && (event.metaKey || event.shiftKey) || ['q', 'Q'].includes(event.key) && event.metaKey && event.shiftKey) {
event.preventDefault();
}
switch (event.key) {
case 's':
case 'S':
if (refs.open.current && event.metaKey) onSave();
return;
case 'f':
case 'F':
if (event.metaKey && event.shiftKey) openOption('filters');
return;
case 'c':
case 'C':
if (event.metaKey && event.shiftKey) openOption('crop');
return;
case 'd':
case 'D':
if (event.metaKey && event.shiftKey) onDownload();
return;
case 'r':
case 'R':
if (event.metaKey && !event.shiftKey) onReset();
if (event.metaKey && event.shiftKey) openOption('resize');
return;
case 'q':
case 'Q':
if (event.metaKey && event.shiftKey) openOption('quality');
return;
case 'Escape':
if (refs.open.current) onCancel();
return;
default:
break;
}
};
if (!refs.value.current) {
if (image instanceof HTMLCanvasElement) onChange(image);else if ((0, _utils.is)('string', image)) makeImage(image);
}
const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
rootDocument.addEventListener('keydown', method);
setInit(true);
return () => {
// Clean up
rootDocument.removeEventListener('keydown', method);
};
}, []);
_react.default.useEffect(() => {
if (image instanceof HTMLCanvasElement) onChange(image);else if ((0, _utils.is)('string', image)) makeImage(image);
}, [image]);
_react.default.useEffect(() => {
const valueToUse = !open ? refs.value.current : refs.valueCopy.current;
if (valueToUse) {
var _refs$canvasMain$curr;
refs.canvasMain.current.width = valueToUse.width;
refs.canvasMain.current.height = valueToUse.height;
(_refs$canvasMain$curr = refs.canvasMain.current) === null || _refs$canvasMain$curr === void 0 || _refs$canvasMain$curr.getContext('2d').drawImage(valueToUse, 0, 0, valueToUse.width, valueToUse.height);
updateSize();
}
}, [value, valueCopy, open]);
_react.default.useEffect(() => {
if (init) {
if (value_ !== value) onChange(value_);
}
}, [value_]);
_react.default.useEffect(() => {
if (init) {
if (valueCopy_ !== valueCopy) onChangeCopy(valueCopy_);
}
}, [valueCopy_]);
const applyAllFilters = canvas => {
let valueCopy__ = refs.valueCopy.current;
// Update filters
Object.keys(refs.filterValuesCopy.current).forEach(item => {
const filterValue_ = filters.find(item_ => item_.value === item);
if (filterValue_) {
const {
method: method_0
} = filterValue_;
if ((0, _utils.is)('function', method_0) && refs.filterValuesCopy.current[item] !== undefined) valueCopy__ = method_0(refs.filterValuesCopy.current[item], canvas, valueCopy__);
}
});
};
const applyAllFiltersDebounced = (0, _utils.debounce)(applyAllFilters, 140);
_react.default.useEffect(() => {
applyAllFiltersDebounced(refs.canvasMain.current);
}, [filterValuesCopy]);
const makeImage = async (valueNew_0 = refs.value.current) => {
var _refs$root$current2;
const img = await (0, _utils2.image)(valueNew_0);
const rootDocument_0 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.ownerDocument) || window.document : undefined;
const canvas_0 = rootDocument_0.createElement('canvas');
canvas_0.width = img.width;
canvas_0.height = img.height;
canvas_0.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
// Image
onChange(canvas_0);
// Image copy
const copy = rootDocument_0.createElement('canvas');
copy.width = canvas_0.width;
copy.height = canvas_0.height;
copy.getContext('2d').drawImage(canvas_0, 0, 0, canvas_0.width, canvas_0.height);
onChangeCopy(copy);
};
const updateResize = (0, _utils.debounce)(async (width, height) => {
var _refs$root$current3;
const rootDocument_1 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current3 = refs.root.current) === null || _refs$root$current3 === void 0 ? void 0 : _refs$root$current3.ownerDocument) || window.document : undefined;
// Update value copy
const canvas_1 = rootDocument_1.createElement('canvas');
if (width > 1 && height > 1) {
canvas_1.width = width;
canvas_1.height = height;
canvas_1.getContext('2d').drawImage(refs.value.current, 0, 0, width, height);
// Value copy
onChangeCopy(canvas_1);
// Update the canvas value
refs.canvasMain.current.width = width;
refs.canvasMain.current.height = height;
refs.canvasMain.current.getContext('2d').drawImage(value, 0, 0, width, height);
// Update size
updateSize();
}
}, 140);
const onFilterSliderChange = (valueNew_1, valueFilter) => {
setFilterValuesCopy(values_ => _objectSpread(_objectSpread({}, values_), {}, {
[valueFilter]: valueNew_1
}));
};
const onChangeFilter = valueNew_2 => {
// If moving to another filter or closing current one
// clean up previous one filter for mainCanvas
if (filter === valueNew_2) setFilter('');else setFilter(valueNew_2);
};
const onChangeAspectRatioCustom = (valueNew_, left_ = true) => {
const valueNew_3 = !valueNew_ ? 1 : valueNew_;
let left = (aspectRatioCustom === null || aspectRatioCustom === void 0 ? void 0 : aspectRatioCustom[0]) || 1;
let right = (aspectRatioCustom === null || aspectRatioCustom === void 0 ? void 0 : aspectRatioCustom[1]) || 1;
left_ ? left = valueNew_3 : right = valueNew_3;
setAspectRatioCustom([left, right]);
onChangeAspectRatio(left / right);
};
const onChangeAspectRatio = valueNew_4 => {
if (aspectRatio === valueNew_4) setAspectRatio('');else setAspectRatio(valueNew_4);
};
const onChangeResize = async (valueNew_5, width_ = true) => {
let width_0;
let height_0;
if (!refs.resizeAspectRatio.current) {
if (width_) {
width_0 = +valueNew_5;
height_0 = resize === null || resize === void 0 ? void 0 : resize[1];
} else {
width_0 = resize === null || resize === void 0 ? void 0 : resize[0];
height_0 = +valueNew_5;
}
} else {
const aspectRatio_ = (value === null || value === void 0 ? void 0 : value.width) / (value === null || value === void 0 ? void 0 : value.height);
if (width_) {
width_0 = +valueNew_5;
height_0 = valueNew_5 / aspectRatio_;
} else {
height_0 = +valueNew_5;
width_0 = height_0 * aspectRatio_;
}
}
width_0 = (0, _utils.clamp)(width_0, 0);
height_0 = (0, _utils.clamp)(height_0, 0);
setResize([width_0, height_0]);
await updateResize(width_0, height_0);
};
const updateQuality = (0, _utils.debounce)(async valueNew_6 => {
var _refs$root$current4, _refs$canvasMain$curr2;
const rootDocument_2 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current4 = refs.root.current) === null || _refs$root$current4 === void 0 ? void 0 : _refs$root$current4.ownerDocument) || window.document : undefined;
// Update copy value
const uri_0 = value.toDataURL('image/jpeg', valueNew_6 / 100);
const img_0 = await (0, _utils2.image)(uri_0);
const canvas_2 = rootDocument_2.createElement('canvas');
canvas_2.width = img_0.width;
canvas_2.height = img_0.height;
canvas_2.getContext('2d').drawImage(img_0, 0, 0, img_0.width, img_0.height);
onChangeCopy(canvas_2);
// Update the canvas value
refs.canvasMain.current.width = canvas_2.width;
refs.canvasMain.current.height = canvas_2.height;
(_refs$canvasMain$curr2 = refs.canvasMain.current) === null || _refs$canvasMain$curr2 === void 0 || _refs$canvasMain$curr2.getContext('2d').drawImage(canvas_2, 0, 0, canvas_2.width, canvas_2.height);
// Update size
updateSize();
}, 40);
const onChangeQuality = async valueNew_7 => {
setQuality(valueNew_7);
await updateQuality(valueNew_7);
};
const onChange = valueNew_8 => {
// Update inner or controlled
if (!props.hasOwnProperty('value')) setValue(valueNew_8);
if ((0, _utils.is)('function', onChange_)) onChange_(valueNew_8);
};
const onChangeCopy = valueNew_9 => {
// Update inner or controlled
if (!props.hasOwnProperty('valueCopy')) setValueCopy(valueNew_9);
if ((0, _utils.is)('function', onChangeCopy_)) onChangeCopy_(valueNew_9);
};
const onReset = (imageReset = true, valueCopyReset = true, resizeReset = true) => {
var _refs$root$current5;
const rootDocument_3 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current5 = refs.root.current) === null || _refs$root$current5 === void 0 ? void 0 : _refs$root$current5.ownerDocument) || window.document : undefined;
setOpen(false);
setQuality(100);
setAspectRatio('');
setAspectRatioCustom([1, 1]);
setSelection('');
setFilter('');
setFilterValuesCopy(_objectSpread({}, filterValues));
if (resizeReset) setResize([value === null || value === void 0 ? void 0 : value.width, value === null || value === void 0 ? void 0 : value.height]);
if (valueCopyReset) {
const canvas_3 = rootDocument_3.createElement('canvas');
canvas_3.width = refs.value.current.width;
canvas_3.height = refs.value.current.height;
canvas_3.getContext('2d').drawImage(refs.value.current, 0, 0, refs.value.current.width, refs.value.current.height);
onChangeCopy(canvas_3);
}
if (imageReset) {
setFilterValues({});
setFilterValuesCopy({});
makeImage(image);
}
};
const openOption = valueNew_10 => {
setOpenedOption(valueNew_10);
if (open && openedOption === valueNew_10) {
setOpen(false);
onReset(false);
} else if (!open) setOpen(true);
};
const onSave = () => {
var _refs$root$current6, _refs$canvasMain$curr3;
const rootDocument_4 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current6 = refs.root.current) === null || _refs$root$current6 === void 0 ? void 0 : _refs$root$current6.ownerDocument) || window.document : undefined;
// Make value copy into value
let canvas_4 = rootDocument_4.createElement('canvas');
canvas_4.width = refs.valueCopy.current.width;
canvas_4.height = refs.valueCopy.current.height;
canvas_4.getContext('2d').drawImage(refs.valueCopy.current, 0, 0, refs.valueCopy.current.width, refs.valueCopy.current.height);
// Update crop
if (openedOption === 'crop' && selection) {
// Crop the canvas
canvas_4.width = selection.width;
canvas_4.height = selection.height;
canvas_4 = (0, _utils.canvasCrop)(refs.valueCopy.current, selection.left, selection.top, selection.width, selection.height);
}
// Update filters
setFilterValues(_objectSpread({}, filterValuesCopy));
applyAllFilters(canvas_4);
// Update the main canvas value
refs.canvasMain.current.width = canvas_4.width;
refs.canvasMain.current.height = canvas_4.height;
(_refs$canvasMain$curr3 = refs.canvasMain.current) === null || _refs$canvasMain$curr3 === void 0 || _refs$canvasMain$curr3.getContext('2d').drawImage(canvas_4, 0, 0, canvas_4.width, canvas_4.height);
// Update value
onChange(canvas_4);
const canvasCopy = rootDocument_4.createElement('canvas');
canvasCopy.width = canvas_4.width;
canvasCopy.height = canvas_4.height;
canvasCopy.getContext('2d').drawImage(canvas_4, 0, 0, canvasCopy.width, canvasCopy.height);
// Update value copy
onChangeCopy(canvasCopy);
// Reset
onReset(false, false, false);
};
const onDownload = () => {
// Download the image from canvas datauri
// of the image type and quality, name
const uri_1 = refs.value.current.toDataURL(type);
(0, _utils.download)(name, uri_1, type);
};
const onCancel = () => {
var _refs$root$current7, _refs$value$current, _refs$value$current2, _refs$canvasMain$curr4;
const rootDocument_5 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current7 = refs.root.current) === null || _refs$root$current7 === void 0 ? void 0 : _refs$root$current7.ownerDocument) || window.document : undefined;
// Reset to unopen
onReset(false);
// Make value copy into value
const canvas_5 = rootDocument_5.createElement('canvas');
canvas_5.width = refs.value.current.width;
canvas_5.height = refs.value.current.height;
canvas_5.getContext('2d').drawImage(refs.value.current, 0, 0, refs.value.current.width, refs.value.current.height);
onChangeCopy(canvas_5);
// Update the main canvas value
refs.canvasMain.current.width = (_refs$value$current = refs.value.current) === null || _refs$value$current === void 0 ? void 0 : _refs$value$current.width;
refs.canvasMain.current.height = (_refs$value$current2 = refs.value.current) === null || _refs$value$current2 === void 0 ? void 0 : _refs$value$current2.height;
(_refs$canvasMain$curr4 = refs.canvasMain.current) === null || _refs$canvasMain$curr4 === void 0 || _refs$canvasMain$curr4.getContext('2d').drawImage(refs.value.current, 0, 0, refs.value.current.width, refs.value.current.height);
};
let filters = _react.default.useMemo(() => [{
label: l('Brightness'),
Icon: IconBrightness,
value: 'brightness',
method: _utils2.canvasBrightness,
renderIconButton: (value__, selected_, onChangeFilter_) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
name: l('Brightness')
}, TooltipProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
version: "outlined",
selected: selected_,
onClick: () => onChangeFilter_(value__)
}, IconButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBrightness, {})
}))
}), value__),
renderSlider: (value___0, filterValuesCopy_, onFilterSliderChange_) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread({
valueDefault: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value___0]) || 0,
value: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value___0]) || 0,
min: -100,
max: 100,
precision: 1,
marks: [{
value: -100,
label: '-100'
}, {
value: 0,
label: '0'
}, {
value: 100,
label: '100'
}],
labels: true,
tooltip: true,
onChange: valueNew_11 => {
if ((0, _utils.is)('function', onFilterSliderChange_)) onFilterSliderChange_(valueNew_11, value___0);
}
}, SliderProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
}), value___0)
}, {
label: l('Contrast'),
Icon: IconContrast,
value: 'contrast',
method: _utils2.canvasContrast,
renderIconButton: (value___1, selected__0, onChangeFilter__0) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
name: l('Contrast')
}, TooltipProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
version: "outlined",
selected: selected__0,
onClick: () => onChangeFilter__0(value___1)
}, IconButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContrast, {})
}))
}), value___1),
renderSlider: (value___2, filterValuesCopy__0, onFilterSliderChange__0) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread({
valueDefault: (filterValuesCopy__0 === null || filterValuesCopy__0 === void 0 ? void 0 : filterValuesCopy__0[value___2]) || 0,
value: (filterValuesCopy__0 === null || filterValuesCopy__0 === void 0 ? void 0 : filterValuesCopy__0[value___2]) || 0,
min: -100,
max: 100,
precision: 1,
marks: [{
value: -100,
label: '-100'
}, {
value: 0,
label: '0'
}, {
value: 100,
label: '100'
}],
labels: true,
tooltip: true,
onChange: valueNew_12 => {
if ((0, _utils.is)('function', onFilterSliderChange__0)) onFilterSliderChange__0(valueNew_12, value___2);
}
}, SliderProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
}), value___2)
}, {
label: l('Saturation'),
Icon: IconSaturation,
value: 'saturation',
method: _utils2.canvasSaturation,
renderIconButton: (value___3, selected__1, onChangeFilter__1) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
name: l('Saturation')
}, TooltipProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
version: "outlined",
selected: selected__1,
onClick: () => onChangeFilter__1(value___3)
}, IconButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconSaturation, {})
}))
}), value___3),
renderSlider: (value___4, filterValuesCopy__1, onFilterSliderChange__1) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread({
valueDefault: (filterValuesCopy__1 === null || filterValuesCopy__1 === void 0 ? void 0 : filterValuesCopy__1[value___4]) || 0,
value: (filterValuesCopy__1 === null || filterValuesCopy__1 === void 0 ? void 0 : filterValuesCopy__1[value___4]) || 0,
min: -100,
max: 100,
precision: 1,
marks: [{
value: -100,
label: '-100'
}, {
value: 0,
label: '0'
}, {
value: 100,
label: '100'
}],
labels: true,
tooltip: true,
onChange: valueNew_13 => {
if ((0, _utils.is)('function', onFilterSliderChange__1)) onFilterSliderChange__1(valueNew_13, value___4);
}
}, SliderProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
}), value___4)
}, {
label: l('Fade'),
Icon: IconFade,
value: 'fade',
method: _utils2.canvasFade,
renderIconButton: (value___5, selected__2, onChangeFilter__2) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
name: l('Fade')
}, TooltipProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
version: "outlined",
selected: selected__2,
onClick: () => onChangeFilter__2(value___5)
}, IconButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconFade, {})
}))
}), value___5),
renderSlider: (value___6, filterValuesCopy__2, onFilterSliderChange__2) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread({
valueDefault: (filterValuesCopy__2 === null || filterValuesCopy__2 === void 0 ? void 0 : filterValuesCopy__2[value___6]) || 0,
value: (filterValuesCopy__2 === null || filterValuesCopy__2 === void 0 ? void 0 : filterValuesCopy__2[value___6]) || 0,
min: 0,
max: 100,
precision: 1,
marks: [{
value: 0,
label: '0'
}, {
value: 100,
label: '100'
}],
labels: true,
tooltip: true,
onChange: valueNew_14 => {
if ((0, _utils.is)('function', onFilterSliderChange__2)) onFilterSliderChange__2(valueNew_14, value___6);
}
}, SliderProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
}), value___6)
}, {
label: l('Invert'),
Icon: IconInvert,
value: 'invert',
method: _utils2.canvasInvert,
renderIconButton: (value___7, selected__3, onChangeFilter__3) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
name: l('Invert')
}, TooltipProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
version: "outlined",
selected: selected__3,
onClick: () => onChangeFilter__3(value___7)
}, IconButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconInvert, {})
}))
}), value___7),
renderSlider: (value___8, filterValuesCopy__3, onFilterSliderChange__3) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread({
valueDefault: (filterValuesCopy__3 === null || filterValuesCopy__3 === void 0 ? void 0 : filterValuesCopy__3[value___8]) || 0,
value: (filterValuesCopy__3 === null || filterValuesCopy__3 === void 0 ? void 0 : filterValuesCopy__3[value___8]) || 0,
min: 0,
max: 1,
precision: 1,
marks: [{
value: 0,
label: 'Not inverted'
}, {
value: 1,
label: 'Inverted'
}],
labels: true,
tooltip: true,
onChange: valueNew_15 => {
if ((0, _utils.is)('function', onFilterSliderChange__3)) onFilterSliderChange__3(valueNew_15, value___8);
}
}, SliderProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
}), value___8)
}, {
label: l('Old photo'),
Icon: IconOldPhoto,
value: 'old_photo',
method: _utils2.canvasOldPhoto,
renderIconButton: (value___9, selected__4, onChangeFilter__4) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
name: l('Old photo')
}, TooltipProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
version: "outlined",
selected: selected__4,
onClick: () => onChangeFilter__4(value___9)
}, IconButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconOldPhoto, {})
}))
}), value___9),
renderSlider: (value___10, filterValuesCopy__4, onFilterSliderChange__4) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread({
valueDefault: (filterValuesCopy__4 === null || filterValuesCopy__4 === void 0 ? void 0 : filterValuesCopy__4[value___10]) || 0,
value: (filterValuesCopy__4 === null || filterValuesCopy__4 === void 0 ? void 0 : filterValuesCopy__4[value___10]) || 0,
min: -40,
max: 40,
precision: 1,
marks: [{
value: -40,
label: '-40'
}, {
value: 0,
label: 'No filter'
}, {
value: 40,
label: '40'
}],
labels: true,
tooltip: true,
onChange: valueNew_16 => {
if ((0, _utils.is)('function', onFilterSliderChange__4)) onFilterSliderChange__4(valueNew_16, value___10);
}
}, SliderProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
}), value___10)
}, ...(filters_ || [])], [filters_]);
// Only filters
if ((0, _utils.is)('array', onlyFilters)) filters = filters.filter(item_0 => onlyFilters.includes(item_0.value));
const ImageCropProps = _objectSpread({
gridLines: true
}, ImageCropProps_);
const TooltipProps = _objectSpread({
position: 'bottom',
interactive: false
}, TooltipProps_);
const IconButtonProps = _objectSpread({
tonal,
color: 'inherit'
}, IconButtonProps_);
const SliderProps = _objectSpread({
tonal: false,
color: 'default'
}, SliderProps_);
const ChipProps = _objectSpread({
size: 'small'
}, ChipProps_);
const chips = [{
label: '1:1',
value: 1 / 1
}, {
label: '4:3',
value: 4 / 3
}, {
label: '16:9',
value: 16 / 9
}];
const options = [filtersOption && {
label: l('Filters'),
value: 'filters',
Icon: IconFilters
}, cropOption && {
label: l('Crop'),
value: 'crop',
Icon: IconCrop
}, resizeOption && {
label: l('Resize'),
value: 'resize',
Icon: IconResize
}, qualityOption && {
label: l('Quality'),
value: 'quality',
Icon: IconQuality
}].filter(Boolean);
const MetaTypeProps = {
version: 'b3'
};
const filterValue = filters.find(item__0 => item__0.value === filter);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
ref: item_1 => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item_1);else if (ref !== null && ref !== void 0 && ref.current) ref.current = item_1;
}
refs.root.current = item_1;
},
tonal: tonal,
color: color,
gap: 0,
direction: "column",
Component: Surface,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-root', `onesy-ImageEdit-size-${size}`], className, classes.root])
}, other), {}, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 0,
direction: "column",
align: "center",
justify: "center",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-image-wrapper'], classes.imageWrapper]),
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-canvas-wrapper'], classes.canvasWrapper]),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("canvas", {
ref: refs.canvasMain,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-canvas', 'onesy-ImageEdit-canvas-main'], classes.canvas, classes.canvas_main])
}), open && openedOption === 'crop' && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageCrop, _objectSpread(_objectSpread({
image: valueCopy,
aspectRatio: aspectRatio ? aspectRatio : undefined,
onSelectorChange: selector => setSelection(selector)
}, ImageCropProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-image-crop'], ImageCropProps.className, classes.imageCrop]),
style: {
width: valueCopy === null || valueCopy === void 0 ? void 0 : valueCopy.width,
height: valueCopy === null || valueCopy === void 0 ? void 0 : valueCopy.height
}
}))]
})
}), (filtersOption || cropOption || resizeOption || qualityOption) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Expand, {
in: !!open,
parent: refs.root.current,
style: {
width: '100%'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 0,
ref: refs.option,
direction: "column",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-option'], classes.option]),
children: [openedOption === 'filters' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Expand, {
in: !!filterValue,
parent: refs.option.current,
style: {
width: '100%'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
style: {
paddingInline: theme.methods.space.value(5, 'px'),
paddingBottom: theme.methods.space.value(5, 'px')
},
children: (0, _utils.is)('function', filterValue === null || filterValue === void 0 ? void 0 : filterValue.renderSlider) && (filterValue === null || filterValue === void 0 ? void 0 : filterValue.renderSlider(filterValue.value, refs.filterValuesCopy.current, onFilterSliderChange))
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 1,
direction: "row",
align: "center",
justify: "flex-start",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-filters'], classes.filters]),
children: filters.map(item_2 => (0, _utils.is)('function', item_2.renderIconButton) && item_2.renderIconButton(item_2.value, item_2.value === filter, onChangeFilter))
})]
}), openedOption === 'crop' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1,
direction: "row",
align: "center",
justify: "center",
style: {
width: '100%'
},
children: [chips.map((item_3, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Chip, _objectSpread(_objectSpread({
selected: aspectRatio === item_3.value,
onClick: () => onChangeAspectRatio(item_3.value)
}, ChipProps), {}, {
children: item_3.label
}), index)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 0,
direction: "row",
align: "center",
justify: "center",
children: [(0, _utils.is)('function', renderInput) ? renderInput(value, valueCopy, aspectRatioCustom, onChangeAspectRatioCustom, 'left') : /*#__PURE__*/(0, _jsxRuntime.jsx)(NumericTextField, {
tonal: tonal,
color: "default",
version: "text",
size: "small",
min: 1,
value: aspectRatioCustom === null || aspectRatioCustom === void 0 ? void 0 : aspectRatioCustom[0],
onChange: valueNew_17 => onChangeAspectRatioCustom(+valueNew_17),
increment: false,
decrement: false,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-option-input'], classes.optionInput]),
style: {
width: 24
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
children: ":"
}), (0, _utils.is)('function', renderInput) ? renderInput(value, valueCopy, aspectRatioCustom, onChangeAspectRatioCustom, 'right') : /*#__PURE__*/(0, _jsxRuntime.jsx)(NumericTextField, {
tonal: tonal,
color: "default",
version: "text",
size: "small",
min: 1,
value: aspectRatioCustom === null || aspectRatioCustom === void 0 ? void 0 : aspectRatioCustom[1],
onChange: valueNew_18 => onChangeAspectRatioCustom(+valueNew_18, false),
increment: false,
decrement: false,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-option-input'], classes.optionInput]),
style: {
width: 24
}
})]
})]
}), openedOption === 'resize' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
direction: "row",
align: "center",
justify: "center",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-inputs'], classes.inputs]),
children: [(0, _utils.is)('function', renderInput) ? renderInput(value, valueCopy, resize, onChangeResize, 'width') : /*#__PURE__*/(0, _jsxRuntime.jsx)(NumericTextField, {
tonal: tonal,
name: l('Width'),
color: "default",
version: "text",
size: "small",
min: 1,
max: value === null || value === void 0 ? void 0 : value.width,
valueDefault: value === null || value === void 0 ? void 0 : value.width,
value: resize === null || resize === void 0 ? void 0 : resize[0],
onChange: valueNew_19 => onChangeResize(valueNew_19)
}), (0, _utils.is)('function', renderInput) ? renderInput(value, valueCopy, resize, onChangeResize, 'height') : /*#__PURE__*/(0, _jsxRuntime.jsx)(NumericTextField, {
tonal: tonal,
name: l('Height'),
color: "default",
version: "text",
size: "small",
min: 1,
max: value === null || value === void 0 ? void 0 : value.height,
valueDefault: value === null || value === void 0 ? void 0 : value.height,
value: resize === null || resize === void 0 ? void 0 : resize[1],
onChange: valueNew_20 => onChangeResize(valueNew_20, false)
})]
}), openedOption === 'quality' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 3,
direction: "row",
align: "center",
style: {
width: '100%'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread({
valueDefault: quality,
value: quality,
min: 1,
max: 100,
precision: 1,
marks: [{
value: 1
}, {
value: 50
}, {
value: 100
}],
tooltip: true,
onChange: onChangeQuality
}, SliderProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(NumericTextField, {
tonal: tonal,
color: "default",
version: "text",
size: "small",
min: 1,
max: 100,
value: quality,
increment: false,
decrement: false,
onChange: valueNew_21 => onChangeQuality(+valueNew_21),
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-option-input'], classes.optionInput]),
style: {
width: 34
}
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1,
direction: "row",
align: "center",
justify: "center",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-action'], classes.action]),
children: [(0, _utils.is)('function', renderSave) ? renderSave(onSave) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
name: l('Save')
}, TooltipProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
version: "outlined",
onClick: onSave
}, IconButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconSave, {})
}))
})), (0, _utils.is)('function', renderCancel) ? renderCancel(onSave) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
name: l('Cancel')
}, TooltipProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
version: "outlined",
onClick: onCancel
}, IconButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconCancel, {})
}))
}))]
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {
color: "inherit",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-divider'], classes.di