@antscorp/antsomi-ui 1.3.4 → 1.3.5-beta.2

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuCell/index.js

@@ -0,0 +1,110 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { useRef, useState } from 'react';
+import { isEmpty } from 'lodash';
+// Components
+import { Icon } from '@antscorp/antsomi-ui/es/components';
+// Styled
+import { ActionButton, ActionButtonLabel, AddContainer, AddLabel, CellContainer, CellImage, CircleBorder, Image, LayerVideoContainer, Link, ThumbnailBox, Video, VideoAction, } from './styled';
+// Utils
+import { tryCatchWrapper } from '@antscorp/antsomi-ui/es/utils';
+// Translations
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+const PATH = 'src/app/modules/Dashboard/containers/RichMenu/containers/Design/components/Workspace/components/RichMenuCell';
+export const RichMenuCell = props => {
+    const { cell, context, layerActive = 'all', cellActiveIdx, isSingleMode, isPreview, isActionLink = false, onClick, } = props;
+    const [videoState, setVideoState] = useState({
+        status: 'idle',
+    });
+    const { areaStyles, action } = cell;
+    // Translations
+    const { t } = i18nInstance;
+    const videoRef = useRef(null);
+    const handleVideoPlay = e => {
+        try {
+            e.stopPropagation();
+            if (videoRef.current) {
+                setVideoState(prev => (Object.assign(Object.assign({}, prev), { status: 'playing' })));
+                videoRef.current.play();
+            }
+        }
+        catch (err) {
+            // eslint-disable-next-line no-console
+            console.log('err', err);
+        }
+    };
+    const handleVideoStop = e => {
+        try {
+            e.stopPropagation();
+            if (videoRef.current) {
+                setVideoState(prev => (Object.assign(Object.assign({}, prev), { status: 'idle' })));
+                videoRef.current.pause();
+            }
+        }
+        catch (err) {
+            // eslint-disable-next-line no-console
+            console.log('err', err);
+        }
+    };
+    const renderCellContent = (isShow, cellInfo) => {
+        if (!isShow ||
+            (layerActive === 'video' && +context === cellActiveIdx && (action === null || action === void 0 ? void 0 : action.type) === 'video'))
+            return null;
+        const { image, active } = cellInfo;
+        const { imageUrl, imageStyles } = image;
+        const { objectPosition, objectFit } = imageStyles, restImageStyles = __rest(imageStyles, ["objectPosition", "objectFit"]);
+        const isBlank = isEmpty(imageUrl);
+        if (isBlank)
+            return (React.createElement(AddContainer, null,
+                React.createElement(Icon, { type: "icon-ants-plus-circle", size: 20, style: { color: 'rgba(0, 95, 184, 1)' } }),
+                React.createElement(AddLabel, null, t(translations.cellAction).toString())));
+        return (React.createElement(CellImage, { active: active && !isPreview, src: imageUrl, imagePosition: objectPosition, imageSize: objectFit, style: restImageStyles }));
+    };
+    const renderVideoLayer = (action, cell) => {
+        if (!action ||
+            action.type !== 'video' ||
+            (layerActive === 'image' && +context === cellActiveIdx))
+            return null;
+        const { previewImage, isAddLabel, videoUrl } = action;
+        const { active } = cell;
+        if (!previewImage && !videoUrl)
+            return null;
+        return (React.createElement(LayerVideoContainer, { active: active && !isPreview && videoState.status === 'idle' },
+            !isPreview && videoUrl && (React.createElement(Video, { ref: videoRef, style: { width: '100%', height: '100%', objectFit: 'cover' }, onEnded: () => {
+                    setVideoState(prev => (Object.assign(Object.assign({}, prev), { status: 'idle' })));
+                }, onClick: handleVideoStop, onLoadedData: () => {
+                    setVideoState(prev => (Object.assign(Object.assign({}, prev), { status: 'idle' })));
+                } },
+                React.createElement("source", { src: videoUrl, type: "video/mp4" }))),
+            previewImage && (videoState.status === 'idle' || isPreview) && (React.createElement(ThumbnailBox, null,
+                React.createElement(Image, { src: previewImage, alt: "thumbnail" }))),
+            (videoState.status === 'idle' || isPreview) && videoUrl && (React.createElement(VideoAction, { className: "video-capture-action-ignore" },
+                React.createElement(ActionButton, { id: "video-capture-action-play", onClick: handleVideoPlay },
+                    React.createElement(Icon, { type: "icon-ants-play-circle", size: 24, style: { width: 26, color: '#fff' } }),
+                    isAddLabel && React.createElement(ActionButtonLabel, null, "Play")),
+                isAddLabel && action.label && (React.createElement(Link, Object.assign({ id: "video-capture-action-external" }, (isActionLink
+                    ? { href: action.externalUrl, target: '_blank', rel: 'noreferrer' }
+                    : {})),
+                    React.createElement("div", { style: { width: 26 } },
+                        React.createElement(CircleBorder, null,
+                            React.createElement(Icon, { type: "icon-ants-redo", size: 14, style: { color: '#fff', height: '17px' } }))),
+                    React.createElement(ActionButtonLabel, null, action.label)))))));
+    };
+    return (React.createElement(CellContainer, { key: context, style: !isSingleMode ? areaStyles : {}, onClick: e => {
+            e.stopPropagation();
+            tryCatchWrapper(onClick, PATH)(context);
+        } },
+        renderCellContent(!isSingleMode, cell),
+        renderVideoLayer(action, cell)));
+};

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuCell/styled.d.ts

@@ -0,0 +1,20 @@
+export declare const CellContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AddContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AddLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const CellImage: import("styled-components").StyledComponent<"div", any, {
+    active?: boolean | undefined;
+    src: string;
+    imagePosition: string;
+    imageSize: string;
+}, never>;
+export declare const LayerVideoContainer: import("styled-components").StyledComponent<"div", any, {
+    active?: boolean | undefined;
+}, never>;
+export declare const Video: import("styled-components").StyledComponent<"video", any, {}, never>;
+export declare const VideoAction: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ActionButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ThumbnailBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Image: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const Link: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ActionButtonLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const CircleBorder: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuCell/styled.js

@@ -0,0 +1,135 @@
+// Libraries
+import styled, { css } from 'styled-components';
+export const CellContainer = styled.div `
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+`;
+export const AddContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 100%;
+  height: 100%;
+  padding: 8px 0px;
+  overflow: hidden;
+`;
+export const AddLabel = styled.span `
+  width: 100%;
+  padding: 0px 6px;
+
+  font-size: 10px;
+  font-weight: 400;
+  color: #000000;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+  overflow: hidden;
+`;
+export const CellImage = styled.div `
+  min-height: 100%;
+  background-image: url(${({ src }) => src});
+  background-size: ${({ imageSize }) => imageSize};
+  background-position: ${({ imagePosition }) => imagePosition};
+
+  ${props => props.active &&
+    css `
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-color: rgba(0, 95, 184, 0.5);
+        display: block;
+      }
+    `}
+`;
+export const LayerVideoContainer = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  overflow: hidden;
+
+  ${props => props.active &&
+    css `
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-color: rgba(0, 95, 184, 0.5);
+        display: block;
+        z-index: 9999;
+      }
+    `}
+`;
+export const Video = styled.video ``;
+export const VideoAction = styled.div `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 10px;
+  z-index: 99999;
+  transform: translate(-50%, -50%);
+`;
+export const ActionButton = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: auto;
+`;
+export const ThumbnailBox = styled.div `
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9999;
+`;
+export const Image = styled.img `
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+export const Link = styled.a `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  height: auto;
+`;
+export const ActionButtonLabel = styled.span `
+  font-size: 14px;
+  color: #fff;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  line-height: 18px;
+  height: 18px;
+  max-width: 300px;
+`;
+export const CircleBorder = styled.div `
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 1.5px solid #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 3px;
+`;

package/es/components/molecules/RichMenu/RichMenuBlock/constants.d.ts

@@ -0,0 +1,2 @@
+import { RichMenu } from '@antscorp/antsomi-ui/es/types';
+export declare const SAMPLE_RICHMENU: RichMenu;