@antscorp/antsomi-ui 1.3.5-beta.235 → 1.3.5-beta.236

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.
Files changed (10) hide show
  1. package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js +1 -0
  2. package/es/components/molecules/TemplateSaveAs/components/ImageSlider/BigImage.d.ts +1 -0
  3. package/es/components/molecules/TemplateSaveAs/components/ImageSlider/BigImage.js +2 -2
  4. package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.d.ts +1 -0
  5. package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.js +3 -3
  6. package/es/components/molecules/TemplateSaveAs/components/ImageSlider/SmallImage.d.ts +1 -0
  7. package/es/components/molecules/TemplateSaveAs/components/ImageSlider/SmallImage.js +2 -2
  8. package/es/components/molecules/ThumbnailCard/ThumbnailCard.js +2 -2
  9. package/es/components/molecules/ThumbnailCard/types.d.ts +2 -1
  10. package/package.json +1 -1
package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js CHANGED
@@ -32,6 +32,7 @@ export const TemplateSaveAs = props => {
32
32
  const form = formProps || internalForm;
33
33
  const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
34
34
  const { label: imageReviewLabel } = imageReview, restImageReviewProps = __rest(imageReview, ["label"]);
35
+ console.log('🚀 ~ restImageReviewProps:', restImageReviewProps);
35
36
  const { isLoading, label: templateLabel, defaultNewTemplateName = `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`, selectPlaceholder = 'Please select an item', placeholder = 'Enter your media template name', validateName, onSearch, onNamePopupScroll, onScrollToBottom, } = templateNamesOptions || {};
36
37
  const { label: descriptionLabel, placeholder: descriptionPlaceholder } = descriptionOptions || {};
37
38
  const { saveNewText = 'Save as a new media template', saveExistText = 'Save as an existing media template', saveNewValue = 'save-new', saveExistValue = 'save-exist', } = saveOptions || {};
package/es/components/molecules/TemplateSaveAs/components/ImageSlider/BigImage.d.ts CHANGED
@@ -4,6 +4,7 @@ interface BigImageProps {
4
4
  showSkeleton?: boolean;
5
5
  isDefaultThumbnail?: boolean;
6
6
  isHideDefaultButton?: boolean;
7
+ imageFit?: React.CSSProperties['objectFit'];
7
8
  index: number;
8
9
  onClickDefaultButton?: (index: number) => void;
9
10
  }
package/es/components/molecules/TemplateSaveAs/components/ImageSlider/BigImage.js CHANGED
@@ -4,13 +4,13 @@ import { Button } from '@antscorp/antsomi-ui/es/components';
4
4
  import Icon from '@antscorp/icons';
5
5
  import { checkShowSkeletonBaseUrl, getUrlNoCache } from '@antscorp/antsomi-ui/es/utils';
6
6
  export const BigImage = React.memo(props => {
7
- const { url, isDefaultThumbnail, isHideDefaultButton, index, showSkeleton, onClickDefaultButton, } = props;
7
+ const { url, isDefaultThumbnail, isHideDefaultButton, index, showSkeleton, imageFit, onClickDefaultButton, } = props;
8
8
  const currentTime = useMemo(() => new Date(), []);
9
9
  const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
10
10
  const urlNoCache = getUrlNoCache(url, timeGenerated);
11
11
  const showSkeletonMemo = showSkeleton !== undefined ? showSkeleton : checkShowSkeletonBaseUrl(urlNoCache);
12
12
  return (React.createElement("div", { className: `image-container--big ${!showSkeletonMemo ? 'hide-skeleton' : ''}` },
13
- url ? (React.createElement(Image, { preview: false, width: "100%", height: "100%", src: urlNoCache })) : null,
13
+ url ? (React.createElement(Image, { preview: false, width: "100%", height: "100%", src: urlNoCache, style: { objectFit: imageFit } })) : null,
14
14
  isHideDefaultButton ? null : (React.createElement(Button, { className: "set-default-button", onClick: () => onClickDefaultButton && onClickDefaultButton(index) },
15
15
  isDefaultThumbnail ? React.createElement(Icon, { type: "icon-ants-check", style: { fontSize: '12px' } }) : null,
16
16
  isDefaultThumbnail ? 'Default thumbnail' : 'Set as default'))));
package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.d.ts CHANGED
@@ -11,6 +11,7 @@ export interface ImageSliderProps {
11
11
  imageWidth?: number;
12
12
  imageHeight?: number;
13
13
  infinity?: boolean;
14
+ thumbnailFit?: React.CSSProperties['objectFit'];
14
15
  /**
15
16
  * Default thumbnail - order of default thumbnail in thumbnails array
16
17
  */
package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.js CHANGED
@@ -12,7 +12,7 @@ const ButtonSlider = React.memo(({ direction, type, onClick }) => (React.createE
12
12
  : `change-preview-button change-preview-button--${direction}`, onClick: onClick },
13
13
  React.createElement(Icon, { type: `icon-ants-angle-${direction}` }))));
14
14
  export const ImageSlider = props => {
15
- const { thumbnails, isLoading, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, hideDefaultButton, imageWidth = 330, imageHeight = 230, infinity = true, defaultThumbnail, onSelectDefault, } = props;
15
+ const { thumbnails, isLoading, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, hideDefaultButton, imageWidth = 330, imageHeight = 230, infinity = true, defaultThumbnail, thumbnailFit, onSelectDefault, } = props;
16
16
  const sliderContainerRef = useRef(null);
17
17
  const thumbnailSelectedRef = useRef(null);
18
18
  const smallImageWidth = useMemo(() => imageWidth / slidesPerView - (10 * (slidesPerView - 1)) / slidesPerView, [imageWidth, slidesPerView]);
@@ -55,8 +55,8 @@ export const ImageSlider = props => {
55
55
  }
56
56
  }, [onSelectDefault]);
57
57
  return (React.createElement(ImageSliderStyled, { className: className || '', "$skeleton": skeleton, "$imageWidth": imageWidth, "$smallImageWidth": smallImageWidth, "$imageHeight": imageHeight, vertical: true, gap: 10 },
58
- React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef }, 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 || thumbnails.length <= 1, onClickDefaultButton: handleClickDefault }))))),
59
- hideThumbnailsList || thumbnails.length <= 1 ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef, style: { justifyContent: thumbnails.length < slidesPerView ? 'center' : 'flex-start' } }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(SmallImage, { key: `${url}_${index * 2}`, showSkeleton: skeleton, isSelected: index === selectedThumbnail, url: url, index: index, onClick: handleSelectThumbnail })))))),
58
+ React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef }, 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 || thumbnails.length <= 1, imageFit: thumbnailFit, onClickDefaultButton: handleClickDefault }))))),
59
+ hideThumbnailsList || thumbnails.length <= 1 ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef, style: { justifyContent: thumbnails.length < 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 })))))),
60
60
  previewNavigation && !isLoading ? (React.createElement(React.Fragment, null,
61
61
  React.createElement(ButtonSlider, { direction: "left", type: "preview", onClick: handlePrevThumbnail }),
62
62
  React.createElement(ButtonSlider, { direction: "right", type: "preview", onClick: handleNextThumbnail }))) : null,
package/es/components/molecules/TemplateSaveAs/components/ImageSlider/SmallImage.d.ts CHANGED
@@ -4,6 +4,7 @@ interface SmallImageProps {
4
4
  isSelected?: boolean;
5
5
  index: number;
6
6
  showSkeleton?: boolean;
7
+ imageFit?: React.CSSProperties['objectFit'];
7
8
  onClick?: (index: number) => void;
8
9
  }
9
10
  export declare const SmallImage: React.FC<SmallImageProps>;
package/es/components/molecules/TemplateSaveAs/components/ImageSlider/SmallImage.js CHANGED
@@ -2,12 +2,12 @@ import React, { useMemo } from 'react';
2
2
  import { Image } from 'antd';
3
3
  import { checkShowSkeletonBaseUrl, getUrlNoCache } from '@antscorp/antsomi-ui/es/utils';
4
4
  export const SmallImage = React.memo(props => {
5
- const { url, isSelected, index, onClick, showSkeleton } = props;
5
+ const { url, isSelected, index, imageFit, showSkeleton, onClick } = props;
6
6
  const currentTime = useMemo(() => new Date(), []);
7
7
  const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
8
8
  const urlNoCache = getUrlNoCache(url, timeGenerated);
9
9
  const showSkeletonMemo = showSkeleton !== undefined ? showSkeleton : checkShowSkeletonBaseUrl(urlNoCache);
10
- return (React.createElement("div", { className: `image-container--small ${isSelected ? 'image-container--selected' : ''} ${!showSkeletonMemo ? 'hide-skeleton' : ''}`, onClick: () => onClick && onClick(index) }, url ? (React.createElement(Image, { preview: false, width: "100%", height: "100%",
10
+ return (React.createElement("div", { className: `image-container--small ${isSelected ? 'image-container--selected' : ''} ${!showSkeletonMemo ? 'hide-skeleton' : ''}`, onClick: () => onClick && onClick(index) }, url ? (React.createElement(Image, { preview: false, width: "100%", height: "100%", style: { objectFit: imageFit },
11
11
  // src={imageUrl}
12
12
  // src={url}
13
13
  src: urlNoCache })) : null));
package/es/components/molecules/ThumbnailCard/ThumbnailCard.js CHANGED
@@ -32,7 +32,7 @@ import { getUrlNoCache, checkShowSkeletonBaseUrl } from '@antscorp/antsomi-ui/es
32
32
  const cacheValue = new Date().getTime();
33
33
  export const ThumbnailCard = memo(props => {
34
34
  const [modal, contextHolder] = Modal.useModal();
35
- const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, removable = true, actionAvailable = true, showSkeleton, loading = false, removeModalProps, editBtnProps, previewBtnProps, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "removable", "actionAvailable", "showSkeleton", "loading", "removeModalProps", "editBtnProps", "previewBtnProps", "onClickWrapper"]);
35
+ const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, thumbnailFit, removable = true, actionAvailable = true, showSkeleton, loading = false, removeModalProps, editBtnProps, previewBtnProps, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "thumbnailFit", "removable", "actionAvailable", "showSkeleton", "loading", "removeModalProps", "editBtnProps", "previewBtnProps", "onClickWrapper"]);
36
36
  const _a = removeModalProps || {}, { onOk } = _a, restOfRemoveTemplateModalProps = __rest(_a, ["onOk"]);
37
37
  const _b = editBtnProps || {}, { text: editText = 'Use template', onClick: onClickEdit } = _b, restOfEditBtnProps = __rest(_b, ["text", "onClick"]);
38
38
  const _c = previewBtnProps || {}, { text: previewText = 'Preview', onClick: onClickPreview } = _c, restOfPreviewBtnProps = __rest(_c, ["text", "onClick"]);
@@ -60,7 +60,7 @@ export const ThumbnailCard = memo(props => {
60
60
  };
61
61
  return (React.createElement(Flex, Object.assign({ gap: 10, vertical: true }, restOfProps, { style: Object.assign({ width }, restOfProps.style) }),
62
62
  React.createElement(ThumbnailCardWrapper, { "$showSkeleton": showSkeletonMemo, style: { height, cursor: actionAvailable ? 'default' : 'pointer' }, onClick: handleWrapperClick },
63
- React.createElement("div", { className: "screen" }, thumbnail && React.createElement("img", { src: getUrlNoCache(thumbnail, cacheValue), alt: "" })),
63
+ React.createElement("div", { className: "screen" }, thumbnail && (React.createElement("img", { src: getUrlNoCache(thumbnail, cacheValue), alt: "", style: { objectFit: thumbnailFit } }))),
64
64
  actionAvailable && !loading && (React.createElement(React.Fragment, null,
65
65
  React.createElement(Flex, { className: "center-action", align: "center", gap: 10, vertical: true },
66
66
  React.createElement(Button, Object.assign({ type: "primary", className: "animate__animated animate__fadeIn" }, restOfEditBtnProps, { onClick: e => {
package/es/components/molecules/ThumbnailCard/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ModalFuncProps, ButtonProps } from 'antd';
2
- import { HTMLAttributes } from 'react';
2
+ import React, { HTMLAttributes } from 'react';
3
3
  export type TThumbnailCardId = string | number;
4
4
  export type TRemoveModalProps = Omit<ModalFuncProps, 'onOk'> & {
5
5
  onOk?: (id: TThumbnailCardId) => void;
@@ -21,5 +21,6 @@ export interface ThumbnailCardProps extends Omit<HTMLAttributes<HTMLDivElement>,
21
21
  previewBtnProps?: TThumbnailButton;
22
22
  actionAvailable?: boolean;
23
23
  removeModalProps?: TRemoveModalProps;
24
+ thumbnailFit?: React.CSSProperties['objectFit'];
24
25
  onClickWrapper?: (id: TThumbnailCardId) => void;
25
26
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antscorp/antsomi-ui",
3
- "version": "1.3.5-beta.235",
3
+ "version": "1.3.5-beta.236",
4
4
  "description": "An enterprise-class UI design language and React UI library.",
5
5
  "sideEffects": [
6
6
  "dist/*",