@antscorp/antsomi-ui 1.3.5-beta.262 → 1.3.5-beta.264
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -273,6 +273,9 @@ export const ImageEditor = React.forwardRef((props, ref) => {
|
|
|
273
273
|
isPaintRef.current = false;
|
|
274
274
|
if (drawAction !== DrawAction.Select)
|
|
275
275
|
dispatch({ type: 'SAVE_HISTORY' });
|
|
276
|
+
// NOTE: Guard check showSelection is falsy =>don't run code below
|
|
277
|
+
if (!showSelection)
|
|
278
|
+
return;
|
|
276
279
|
if (selectionPosition.visible) {
|
|
277
280
|
setSelectionPosition(prev => (Object.assign(Object.assign({}, prev), { visible: false })));
|
|
278
281
|
const shapes = ((_a = stageRef.current) === null || _a === void 0 ? void 0 : _a.find('.shape')) || [];
|
|
@@ -9,6 +9,7 @@ import { SmallImage } from './SmallImage';
|
|
|
9
9
|
import { BigImage } from './BigImage';
|
|
10
10
|
import { useDropFile } from '@antscorp/antsomi-ui/es/hooks';
|
|
11
11
|
import { checkShowSkeletonBaseUrl, getUrlNoCache } from '@antscorp/antsomi-ui/es/utils';
|
|
12
|
+
import { isNil } from 'lodash';
|
|
12
13
|
// Image size limit to 10MB
|
|
13
14
|
const SIZE_LIMIT = 10 * 1024 * 1024;
|
|
14
15
|
const ButtonSlider = React.memo(({ direction, type, onClick }) => (React.createElement("div", { className: type === 'slider'
|
|
@@ -78,6 +79,7 @@ export const ImageSlider = props => {
|
|
|
78
79
|
return (Object.assign(Object.assign({}, prev), { [selectedThumbnail]: (_a = imageResizeRef.current) === null || _a === void 0 ? void 0 : _a.getCurrentState() }));
|
|
79
80
|
});
|
|
80
81
|
setEditingThumbnail(undefined);
|
|
82
|
+
handleSelectThumbnail(selectedThumbnail);
|
|
81
83
|
};
|
|
82
84
|
const fileRef = useRef(null);
|
|
83
85
|
const onImportImageClick = useCallback(() => {
|
|
@@ -126,7 +128,7 @@ export const ImageSlider = props => {
|
|
|
126
128
|
? skeleton
|
|
127
129
|
: checkShowSkeletonBaseUrl(getUrlNoCache(thumbnails[currentEditing], timeGenerated));
|
|
128
130
|
return (React.createElement(ImageSliderStyled, { className: className || '', "$skeleton": skeleton, "$imageWidth": imageWidth, "$smallImageWidth": smallImageWidth, "$imageHeight": imageHeight, vertical: true, gap: 10 },
|
|
129
|
-
|
|
131
|
+
React.createElement(Flex, { vertical: true, style: { zIndex: 25, display: !isNil(currentEditing) ? 'flex' : 'none' }, className: `edit-thumbnail-container ${!isNil(currentEditing) ? 'is-editing' : ''}` },
|
|
130
132
|
React.createElement(ImageResizeComponent, Object.assign({}, imageResizeProps)),
|
|
131
133
|
typeof uploadThumbnail !== 'number' ? null : (React.createElement(Flex, { className: `image-upload-zone ${!showSkeletonMemo ? 'hide-skeleton' : ''}` },
|
|
132
134
|
React.createElement(Icon, { type: "icon-ants-upload-fill", style: { fontSize: '40px' } }),
|
|
@@ -140,10 +142,13 @@ export const ImageSlider = props => {
|
|
|
140
142
|
React.createElement(Button, { onClick: () => {
|
|
141
143
|
setEditingThumbnail(undefined);
|
|
142
144
|
setUploadThumbnail(undefined);
|
|
143
|
-
} }, "Cancel")))
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
145
|
+
} }, "Cancel"))),
|
|
146
|
+
React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef, style: { display: !isNil(currentEditing) ? 'none' : 'flex' } }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(BigImage, { key: `image-big_${url}_${index * 2}`, url: url, index: index, showSkeleton: skeleton, isDefaultThumbnail: defaultThumbnailInternal === index, isHideDefaultButton: hideDefaultButton || hideThumbnailsList || thumbnailsQuantity <= 1, imageFit: thumbnailFit, onClickDefaultButton: handleClickDefault, onClickEdit: () => setEditingThumbnail(selectedThumbnail),
|
|
147
|
+
// onClickEdit={index => setEditingThumbnail(index)}
|
|
148
|
+
onClickUpload: () => {
|
|
149
|
+
setEditingThumbnail(selectedThumbnail);
|
|
150
|
+
setUploadThumbnail(selectedThumbnail);
|
|
151
|
+
} }))))),
|
|
147
152
|
hideThumbnailsList || thumbnailsQuantity <= 1 ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef, style: { justifyContent: thumbnailsQuantity < slidesPerView ? 'center' : 'flex-start' } }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(SmallImage, { imageFit: thumbnailFit, key: `${url}_${index * 2}`, showSkeleton: skeleton, isSelected: index === selectedThumbnail, url: url, index: index, onClick: handleSelectThumbnail })))))),
|
|
148
153
|
previewNavigation && !isLoading ? (React.createElement(React.Fragment, null,
|
|
149
154
|
React.createElement(ButtonSlider, { direction: "left", type: "preview", onClick: handlePrevThumbnail }),
|
|
@@ -10,8 +10,9 @@ export const TemplateSaveAsStyled = styled(Flex) `
|
|
|
10
10
|
|
|
11
11
|
position: relative;
|
|
12
12
|
|
|
13
|
-
&:has(canvas),
|
|
14
|
-
&:has(.image-upload-zone) {
|
|
13
|
+
/* &:has(canvas),
|
|
14
|
+
&:has(.image-upload-zone) { */
|
|
15
|
+
&:has(.is-editing) {
|
|
15
16
|
&:after {
|
|
16
17
|
content: '';
|
|
17
18
|
position: absolute;
|