@pushwoosh/dumb-components 1.1.84 → 1.1.86

package/ExternalImagePreview/styles.js

@@ -12,7 +12,7 @@ export const RootBox = styled.div.withConfig({
 export const ImgPreview = styled.img.withConfig({
   displayName: "ImgPreview",
   componentId: "sc-irvho3-1"
-})(["width:", ";height:", ";border-radius:", ";opacity:", ";z-index:1;"], ({
+})(["width:", ";height:", ";border-radius:", ";opacity:", ";"], ({
   width
 }) => toCssValue(width), ({
   height
@@ -22,7 +22,7 @@ export const ImgPreview = styled.img.withConfig({
 export const PlaceholderWrapper = styled.div.withConfig({
   displayName: "PlaceholderWrapper",
   componentId: "sc-irvho3-2"
-})(["width:", ";height:", ";display:flex;align-items:center;justify-content:center;border-radius:", ";position:absolute;top:0;left:0;z-index:2;background:", ";"], ({
+})(["width:", ";height:", ";display:flex;align-items:center;justify-content:center;border-radius:", ";position:absolute;top:0;left:0;background:", ";"], ({
   width
 }) => toCssValue(width), ({
   height

package/RichmediaPreview/RichmediaPreview.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { RichmediaPreviewProps } from './types';
+export declare function RichmediaPreview(props: RichmediaPreviewProps): ReactElement;

package/RichmediaPreview/RichmediaPreview.js

@@ -0,0 +1,48 @@
+import React, { useRef, useEffect } from 'react';
+import { Color } from '@pushwoosh/kit-constants';
+import { Spinner } from '../Spinner';
+import { useRichmediaHtml } from './hooks';
+import { RichMediaPreviewContainer, RichMediaPreviewIframe } from './styles';
+export function RichmediaPreview(props) {
+  const {
+    name,
+    params,
+    content = '',
+    defaultLanguage = 'en',
+    baseUrl = '',
+    width = 304,
+    height = 480,
+    isLoading,
+    language
+  } = props;
+  const $ref = useRef(null);
+  const richmediaHtml = useRichmediaHtml({
+    content,
+    params,
+    language,
+    defaultLanguage,
+    baseUrl
+  });
+  useEffect(() => {
+    var _$ref$current;
+    if (!($ref !== null && $ref !== void 0 && (_$ref$current = $ref.current) !== null && _$ref$current !== void 0 && (_$ref$current = _$ref$current.contentWindow) !== null && _$ref$current !== void 0 && _$ref$current.document)) {
+      return;
+    }
+    $ref.current.contentWindow.document.open('text/html', 'replace');
+    $ref.current.contentWindow.document.write(richmediaHtml);
+    $ref.current.contentWindow.document.close();
+  }, [$ref, richmediaHtml]);
+  return React.createElement(RichMediaPreviewContainer, {
+    width: width,
+    height: height,
+    "$isLoading": isLoading,
+    "$placeItems": "center"
+  }, isLoading ? React.createElement(Spinner, {
+    size: "medium",
+    color: Color.LOCKED
+  }) : React.createElement(RichMediaPreviewIframe, {
+    ref: $ref,
+    title: name,
+    sandbox: "allow-same-origin allow-scripts"
+  }));
+}

package/RichmediaPreview/components/Template/Template.d.ts

@@ -0,0 +1,13 @@
+import type { ObjectItem } from '../../types';
+export declare class Template {
+    private baseUrl;
+    private vars;
+    private params;
+    private template?;
+    private replacers?;
+    constructor(html: string, vars: ObjectItem, params: ObjectItem, baseUrl: string);
+    injectBaseUrl(str: string): string;
+    getParamValue(varName: string): any;
+    parseHtml(html: string): void;
+    run(): any;
+}

package/RichmediaPreview/components/Template/Template.js

@@ -0,0 +1,42 @@
+import { getName, getVarPlaceholder, reStr } from '../../helpers';
+export class Template {
+  baseUrl;
+  vars;
+  params;
+  template;
+  replacers;
+  constructor(html, vars, params, baseUrl) {
+    this.baseUrl = baseUrl;
+    this.vars = vars;
+    this.params = params;
+    this.parseHtml(html);
+  }
+  injectBaseUrl(str) {
+    return str.replace(/<head[^>]*>/i, founded => `${founded}<base href="${this.baseUrl}" />`);
+  }
+  getParamValue(varName) {
+    return this.params && Object.prototype.hasOwnProperty.call(this.params, varName) ? this.params[varName] : this.vars[varName].defaults;
+  }
+  parseHtml(html) {
+    const replacers = [];
+    const replacePlaceholders = (full, cb, getReplacer) => full.replace(new RegExp(reStr, 'g'), fullPlaceholderText => {
+      const varName = getName(fullPlaceholderText);
+      const placeholder = getVarPlaceholder(varName);
+      if (cb) {
+        cb(varName);
+      }
+      replacers.push({
+        placeholder,
+        replacer: getReplacer ? getReplacer(varName) : () => this.getParamValue(varName)
+      });
+      return placeholder;
+    });
+    let template = html.replace(/<head[^>]*>([\s\S]*)<\/head[^>]*>/im, full => this.injectBaseUrl(replacePlaceholders(full)));
+    template = replacePlaceholders(template, undefined, varName => this.getParamValue(varName));
+    this.template = template;
+    this.replacers = replacers;
+  }
+  run() {
+    return this.replacers.reduce((src, rep) => src.replace(rep.placeholder, rep.replacer), this.template);
+  }
+}

package/RichmediaPreview/components/Template/index.d.ts

@@ -0,0 +1 @@
+export { Template } from './Template';

package/RichmediaPreview/components/Template/index.js

@@ -0,0 +1 @@
+export { Template } from './Template';

package/RichmediaPreview/helpers.d.ts

@@ -0,0 +1,5 @@
+import type { ObjectItem } from './types';
+export declare const reStr = "\\{\\{([^}]+)\\}\\}";
+export declare function getName(placeholder: string): string;
+export declare function getVarPlaceholder(varName: string): string;
+export declare function findAllVars(text: string): ObjectItem;

package/RichmediaPreview/helpers.js

@@ -0,0 +1,38 @@
+export const reStr = '\\{\\{([^}]+)\\}\\}';
+const reGetName = /{{([^|]+)|/; // regex for get param name
+export function getName(placeholder) {
+  const f = placeholder.match(reGetName) || [];
+  return f[1];
+}
+export function getVarPlaceholder(varName) {
+  return `<|<${varName}>|>`;
+}
+export function findAllVars(text) {
+  const re = new RegExp(reStr, 'g');
+  const vars = {};
+  let i = 0;
+  let founded = re.exec(text);
+  while (founded) {
+    i += 1;
+    const [title, type, defaultsRaw] = founded[1].split('|');
+    let defaults = defaultsRaw;
+    const name = title;
+    const className = `var-${i}`;
+    if (!defaults) {
+      if (type === 'color') {
+        defaults = 'F00';
+      } else {
+        defaults = title;
+      }
+    }
+    vars[name] = {
+      name,
+      type,
+      title,
+      defaults,
+      className
+    };
+    founded = re.exec(text);
+  }
+  return vars;
+}

package/RichmediaPreview/hooks.d.ts

@@ -0,0 +1,2 @@
+import type { BuildRichmediaHtmlArgs } from './types';
+export declare function useRichmediaHtml({ content, params, language, defaultLanguage, baseUrl, }: BuildRichmediaHtmlArgs): string;

package/RichmediaPreview/hooks.js

@@ -0,0 +1,53 @@
+import { useMemo } from 'react';
+import { Template } from './components/Template';
+import { findAllVars } from './helpers';
+function normalizeParams(params, language, defaultLanguage = 'en') {
+  let jsonParams = params;
+  if (typeof jsonParams === 'string') {
+    try {
+      jsonParams = JSON.parse(jsonParams);
+    } catch {
+      return {};
+    }
+  }
+  if (!jsonParams || Array.isArray(jsonParams) || typeof jsonParams !== 'object') {
+    return {};
+  }
+  let formattedParams = Object.values(jsonParams).length ? language && jsonParams[language] || jsonParams[defaultLanguage || 'en'] || Object.values(jsonParams)[0] : {};
+  if (!formattedParams || Array.isArray(formattedParams)) {
+    formattedParams = {};
+  }
+  return formattedParams;
+}
+function buildRichmediaHtml({
+  content,
+  params,
+  language,
+  defaultLanguage = 'en',
+  baseUrl = ''
+}) {
+  if (!content) {
+    return '';
+  }
+  const formattedParams = normalizeParams(params, language, defaultLanguage);
+  const vars = findAllVars(content);
+  const template = new Template(content, vars, formattedParams, `${window.location.protocol}//${window.location.host}${baseUrl}/`);
+  return template.run();
+}
+export function useRichmediaHtml({
+  content,
+  params,
+  language,
+  defaultLanguage,
+  baseUrl
+}) {
+  return useMemo(() => {
+    return buildRichmediaHtml({
+      content,
+      params,
+      language,
+      defaultLanguage,
+      baseUrl
+    });
+  }, [content, params, language, defaultLanguage, baseUrl]);
+}

package/RichmediaPreview/index.d.ts

@@ -0,0 +1,2 @@
+export { RichmediaPreview } from './RichmediaPreview';
+export { useRichmediaHtml } from './hooks';

package/RichmediaPreview/index.js

@@ -0,0 +1,2 @@
+export { RichmediaPreview } from './RichmediaPreview';
+export { useRichmediaHtml } from './hooks';

package/RichmediaPreview/styles.d.ts

@@ -0,0 +1,61 @@
+export declare const RichMediaPreviewContainer: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $bgColor?: string | undefined;
+    $border?: string | ({
+        top?: string | undefined;
+        right?: string | undefined;
+        bottom?: string | undefined;
+        left?: string | undefined;
+    } | {
+        horizontal: string;
+        top?: string | undefined;
+        bottom?: string | undefined;
+    } | {
+        vertical: string;
+        right?: string | undefined;
+        left?: string | undefined;
+    }) | undefined;
+    $borderRadius?: (string | number) | undefined;
+    $boxShadow?: string | undefined;
+    $gap?: (string | number) | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $padding?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    width: string | number;
+    height: string | number;
+    $isLoading?: boolean;
+}, "$gridAutoFlow">;
+export declare const RichMediaPreviewIframe: import("styled-components").StyledComponent<"iframe", any, {}, never>;

package/RichmediaPreview/styles.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Vertical, toCssValue } from '@pushwoosh/kit-helpers';
+export const RichMediaPreviewContainer = styled(Vertical).withConfig({
+  displayName: "RichMediaPreviewContainer",
+  componentId: "sc-1ci6l2b-0"
+})(["position:relative;border:1px solid #ddd;width:", ";height:", ";border-radius:", ";background-color:", ";margin:0 auto;overflow:hidden;"], ({
+  width
+}) => toCssValue(width), ({
+  height
+}) => toCssValue(height), ShapeRadius.SECTION, ({
+  $isLoading
+}) => $isLoading ? Color.FROZEN : Color.CLEAR);
+export const RichMediaPreviewIframe = styled.iframe.withConfig({
+  displayName: "RichMediaPreviewIframe",
+  componentId: "sc-1ci6l2b-1"
+})(["position:absolute;left:-50%;top:-50%;width:200%;height:200%;transform:scale(0.51);"]);

package/RichmediaPreview/types.d.ts

@@ -0,0 +1,20 @@
+export type ObjectItem = {
+    [key: string]: any;
+};
+export type Replacer = {
+    placeholder: string;
+    replacer: any;
+};
+export type BuildRichmediaHtmlArgs = {
+    params: any;
+    content: string;
+    language?: string;
+    defaultLanguage?: string;
+    baseUrl?: string;
+};
+export type RichmediaPreviewProps = BuildRichmediaHtmlArgs & {
+    name: string;
+    width?: string | number;
+    height?: string | number;
+    isLoading: boolean;
+};

package/RichmediaPreview/types.js

@@ -0,0 +1 @@
+export {};

package/index.d.ts

@@ -38,6 +38,7 @@ export { NumberPicker } from './NumberPicker';
 export { CodeEditor } from './CodeEditor';
 export { EnhancedInput, SearchInput } from './EnhancedInput';
 export { Chip } from './Chip';
+export { RichmediaPreview, useRichmediaHtml } from './RichmediaPreview';
 export { RichMessageEditor, RichMessageViewer, type DynamicContent, } from './RichMessageEditor';
 export { FrequencyCappingEdit, FrequencyCappingReadonly, type LocalCapping, } from './FrequencyCapping';
 export { SendRateEdit, SendRateReadonly, type SendRateBase, type SendRateEditProps, type SendRateReadonlyProps, } from './SendRate';

package/index.js

@@ -38,6 +38,7 @@ export { NumberPicker } from './NumberPicker';
 export { CodeEditor } from './CodeEditor';
 export { EnhancedInput, SearchInput } from './EnhancedInput';
 export { Chip } from './Chip';
+export { RichmediaPreview, useRichmediaHtml } from './RichmediaPreview';
 export { RichMessageEditor, RichMessageViewer } from './RichMessageEditor';
 export { FrequencyCappingEdit, FrequencyCappingReadonly } from './FrequencyCapping';
 export { SendRateEdit, SendRateReadonly } from './SendRate';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.84",
+  "version": "1.1.86",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",