pds-dev-kit-web-test 0.1.10 → 0.2.0

package/dist/src/sub/DynamicLayout/sectionActionTypes.d.ts

@@ -1,10 +1,15 @@
 /// <reference types="react" />
+import type { BlockId, BlockNames } from './sections/CustomSection';
 export declare type TypeOfSectionAction = ActionMap<ActionHandlerPayload>[keyof ActionMap<ActionHandlerPayload>];
 declare type ActionHandlerPayload = {
     '@EXP_IFRAME/IFRAME_ON_LOADED': {
         event: React.SyntheticEvent<HTMLIFrameElement, Event>;
         multiPurposeUrl: string;
     };
+    '@TEMP_CUSTOM/BLOCK_CLICKED': {
+        blockName: BlockNames;
+        blockId: BlockId;
+    };
 };
 declare type ActionMap<M extends {
     [index: string]: any;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/BlockMatcher.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { BlockNames, ContentType, LayoutType, StyleType } from '../types';
+declare type BlockMatcherProps = {
+    type: BlockNames;
+    content: ContentType;
+    style: StyleType;
+    layout: LayoutType;
+    hoverStyle?: StyleType;
+};
+declare function BlockMatcher({ type, content, style, layout, hoverStyle }: BlockMatcherProps): JSX.Element;
+export default BlockMatcher;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/BlockMatcher.js

@@ -0,0 +1,65 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var blocks_1 = require("./blocks");
+var Button_1 = __importDefault(require("./blocks/Button"));
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function BlockMatcher(_a) {
+    var type = _a.type, content = _a.content, style = _a.style, layout = _a.layout, hoverStyle = _a.hoverStyle;
+    var value = content.data.value;
+    switch (type) {
+        case 'TEXT':
+            if ('text' in value) {
+                return (0, jsx_runtime_1.jsx)(blocks_1.Text, { style: style, text: value.text }, void 0);
+            }
+            return (0, jsx_runtime_1.jsx)("div", { children: "Error" }, void 0);
+        case 'BUTTON':
+            if ('text' in value) {
+                return (0, jsx_runtime_1.jsx)(Button_1.default, { text: value.text, style: style, hoverStyle: hoverStyle }, void 0);
+            }
+            return (0, jsx_runtime_1.jsx)("div", { children: "Error" }, void 0);
+        case 'IMAGE': {
+            if ('src' in value) {
+                return (0, jsx_runtime_1.jsx)(blocks_1.Image, { style: style, src: value.src }, void 0);
+            }
+            return (0, jsx_runtime_1.jsx)("div", { children: "Error" }, void 0);
+        }
+        case 'RICH_TEXT': {
+            if ('text' in value) {
+                return (0, jsx_runtime_1.jsx)(blocks_1.RichText, { style: style, text: value.text }, void 0);
+            }
+            return (0, jsx_runtime_1.jsx)("div", { children: "Error" }, void 0);
+        }
+        case 'INSTAGRAM': {
+            if ('accountId' in value) {
+                return (0, jsx_runtime_1.jsx)(blocks_1.Instagram, { style: style, accountId: value.accountId }, void 0);
+            }
+            return (0, jsx_runtime_1.jsx)("div", { children: "Error" }, void 0);
+        }
+        case 'TWITTER': {
+            if ('accountId' in value) {
+                return (0, jsx_runtime_1.jsx)(blocks_1.Twitter, { style: style, accountId: value.accountId }, void 0);
+            }
+            return (0, jsx_runtime_1.jsx)("div", { children: "Error" }, void 0);
+        }
+        case 'YOUTUBE': {
+            if ('startAt' in value) {
+                return ((0, jsx_runtime_1.jsx)(blocks_1.Youtube, { url: value.src, startAt: value.startAt, endAt: value.endAt, style: style }, void 0));
+            }
+            return (0, jsx_runtime_1.jsx)("div", { children: "Error" }, void 0);
+        }
+        case 'DIVIDER': {
+            if ('size' in value) {
+                return (0, jsx_runtime_1.jsx)(blocks_1.Divider, { size: value.size, style: style }, void 0);
+            }
+            return (0, jsx_runtime_1.jsx)("div", { children: "Error" }, void 0);
+        }
+        // eslint-disable-next-line no-fallthrough
+        default:
+            return (0, jsx_runtime_1.jsx)("div", { children: "Error" }, void 0);
+    }
+}
+exports.default = BlockMatcher;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/Button.d.ts

@@ -0,0 +1,8 @@
+import type React from 'react';
+declare type ButtonComponentProp = {
+    text: string;
+    style: React.CSSProperties;
+    hoverStyle?: React.CSSProperties;
+};
+declare function Button({ text, style, hoverStyle }: ButtonComponentProp): JSX.Element;
+export default Button;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/Button.js

@@ -0,0 +1,51 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importStar(require("styled-components"));
+function Button(_a) {
+    var text = _a.text, style = _a.style, hoverStyle = _a.hoverStyle;
+    return ((0, jsx_runtime_1.jsx)(S_Button, __assign({ hoverStyle: hoverStyle, compoStyle: style, type: "button" }, { children: text }), void 0));
+}
+var S_Button = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  all: unset;\n  height: 100%;\n  text-align: center;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    transition: all 0.15s ease-out;\n    ", ";\n  }\n"], ["\n  all: unset;\n  height: 100%;\n  text-align: center;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    transition: all 0.15s ease-out;\n    ", ";\n  }\n"])), function (_a) {
+    var compoStyle = _a.compoStyle;
+    return compoStyle && (0, styled_components_1.css)(__assign({}, compoStyle));
+}, function (_a) {
+    var hoverStyle = _a.hoverStyle;
+    return hoverStyle && (0, styled_components_1.css)(__assign({}, hoverStyle));
+});
+exports.default = Button;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/Divider.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+export declare type DividerProp = {
+    size: number;
+    style: React.CSSProperties;
+};
+declare function Divider({ style, size }: DividerProp): JSX.Element;
+export default Divider;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/Divider.js

@@ -0,0 +1,29 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+function Divider(_a) {
+    var style = _a.style, size = _a.size;
+    return (0, jsx_runtime_1.jsx)(S_Divider, { style: __assign(__assign({}, style), { height: size + "px" }) }, void 0);
+}
+var S_Divider = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 100%;\n"], ["\n  position: relative;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 100%;\n"])));
+exports.default = Divider;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/Image.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+declare type ImgProps = {
+    src: string;
+    style: React.CSSProperties;
+};
+declare function Image({ src, style }: ImgProps): JSX.Element;
+export default Image;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/Image.js

@@ -0,0 +1,18 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+function Image(_a) {
+    var src = _a.src, style = _a.style;
+    return (0, jsx_runtime_1.jsx)(S_Img, { src: src, style: style }, void 0);
+}
+var S_Img = styled_components_1.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n"], ["\n  height: 100%;\n  width: 100%;\n"])));
+exports.default = Image;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/Instagram.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+declare type InstagramProps = {
+    accountId: string;
+    style: React.CSSProperties;
+};
+declare function Instagram({ accountId, style }: InstagramProps): JSX.Element;
+export default Instagram;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/Instagram.js

@@ -0,0 +1,19 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+function Instagram(_a) {
+    var accountId = _a.accountId, style = _a.style;
+    return (0, jsx_runtime_1.jsxs)("div", __assign({ style: style }, { children: ["Instagram accountId: ", accountId] }), void 0);
+}
+exports.default = Instagram;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/RichText.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+export declare type RichTextComponentProp = {
+    text: string;
+    style: React.CSSProperties;
+};
+declare function RichText({ text, style }: RichTextComponentProp): JSX.Element;
+export default RichText;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/RichText.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ComponentBlocks_1 = require("../../../../../DynamicLayout/components/ComponentBlocks");
+function RichText(_a) {
+    var text = _a.text, style = _a.style;
+    return (0, jsx_runtime_1.jsx)(ComponentBlocks_1.RichText, { text: text, style: style }, void 0);
+}
+exports.default = RichText;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/Text.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+export declare type TextComponentProp = {
+    text: string;
+    style: React.CSSProperties;
+};
+declare function Text({ text, style }: TextComponentProp): JSX.Element;
+export default Text;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/Text.js

@@ -0,0 +1,29 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+function Text(_a) {
+    var text = _a.text, style = _a.style;
+    return (0, jsx_runtime_1.jsx)(S_Text, __assign({ style: style }, { children: text }), void 0);
+}
+var S_Text = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n"], ["\n  height: 100%;\n  width: 100%;\n"])));
+exports.default = Text;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/Twitter.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+declare type TwitterProps = {
+    accountId: string;
+    style: React.CSSProperties;
+};
+declare function Twitter({ accountId, style }: TwitterProps): JSX.Element;
+export default Twitter;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/Twitter.js

@@ -0,0 +1,30 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ComponentBlocks_1 = require("../../../../../DynamicLayout/components/ComponentBlocks");
+var styled_components_1 = __importDefault(require("styled-components"));
+function Twitter(_a) {
+    var accountId = _a.accountId, style = _a.style;
+    return ((0, jsx_runtime_1.jsx)(S_TwitterWrapper, __assign({ style: style }, { children: (0, jsx_runtime_1.jsx)(ComponentBlocks_1.TwitterTimeline, { width: 200, height: 400, userId: accountId, fallback: (0, jsx_runtime_1.jsxs)("div", { children: ["loading @", accountId, " feed"] }, void 0) }, void 0) }), void 0));
+}
+var S_TwitterWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  //NOTE: editmode;\n  height: 100%;\n  pointer-events: none;\n  width: 100%;\n"], ["\n  //NOTE: editmode;\n  height: 100%;\n  pointer-events: none;\n  width: 100%;\n"])));
+exports.default = Twitter;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/Youtube.d.ts

@@ -0,0 +1,9 @@
+import type React from 'react';
+export declare type YoutubeProps = {
+    url: string;
+    startAt: number;
+    endAt: number;
+    style: React.CSSProperties;
+};
+declare function Youtube({ url, startAt, endAt, style }: YoutubeProps): JSX.Element;
+export default Youtube;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/Youtube.js

@@ -0,0 +1,38 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+function Youtube(_a) {
+    var url = _a.url, startAt = _a.startAt, endAt = _a.endAt, style = _a.style;
+    var id = YoutubeLinkParser.getId(url);
+    var src = YoutubeLinkParser.getEmbedUrl(url, startAt, endAt);
+    return (0, jsx_runtime_1.jsx)(S_Iframe, { title: id, src: src, style: style }, void 0);
+}
+var S_Iframe = styled_components_1.default.iframe(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  pointer-events: none;\n  width: 100%;\n"], ["\n  height: 100%;\n  pointer-events: none;\n  width: 100%;\n"])));
+exports.default = Youtube;
+var YoutubeLinkParser = /** @class */ (function () {
+    function YoutubeLinkParser() {
+    }
+    YoutubeLinkParser.getId = function (src) {
+        var _a;
+        var embedUrl = src.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/);
+        var shareUrl = src.match(/youtu.be\/(.{11})/);
+        var shortsUrl = src.match(/youtube\.com\/shorts\/(.{11})/);
+        return (_a = (embedUrl || shareUrl || shortsUrl)) === null || _a === void 0 ? void 0 : _a.pop();
+    };
+    YoutubeLinkParser.getThumbnailUrl = function (src) {
+        return "https://img.youtube.com/vi/" + YoutubeLinkParser.getId(src) + "/0.jpg";
+    };
+    YoutubeLinkParser.getEmbedUrl = function (src, start, end) {
+        return "https://www.youtube.com/embed/" + YoutubeLinkParser.getId(src) + "?start=" + start + "&end=" + end;
+    };
+    return YoutubeLinkParser;
+}());
+var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Text } from './Text';
+export { default as Image } from './Image';
+export { default as RichText } from './RichText';
+export { default as Button } from './Button';
+export { default as Instagram } from './Instagram';
+export { default as Twitter } from './Twitter';
+export { default as Divider } from './Divider';
+export { default as Youtube } from './Youtube';

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Youtube = exports.Divider = exports.Twitter = exports.Instagram = exports.Button = exports.RichText = exports.Image = exports.Text = void 0;
+var Text_1 = require("./Text");
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return __importDefault(Text_1).default; } });
+var Image_1 = require("./Image");
+Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return __importDefault(Image_1).default; } });
+var RichText_1 = require("./RichText");
+Object.defineProperty(exports, "RichText", { enumerable: true, get: function () { return __importDefault(RichText_1).default; } });
+var Button_1 = require("./Button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
+var Instagram_1 = require("./Instagram");
+Object.defineProperty(exports, "Instagram", { enumerable: true, get: function () { return __importDefault(Instagram_1).default; } });
+var Twitter_1 = require("./Twitter");
+Object.defineProperty(exports, "Twitter", { enumerable: true, get: function () { return __importDefault(Twitter_1).default; } });
+var Divider_1 = require("./Divider");
+Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return __importDefault(Divider_1).default; } });
+var Youtube_1 = require("./Youtube");
+Object.defineProperty(exports, "Youtube", { enumerable: true, get: function () { return __importDefault(Youtube_1).default; } });

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/index.d.ts

@@ -0,0 +1 @@
+export { default as BlockMatcher } from './BlockMatcher';

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockMatcher = void 0;
+var BlockMatcher_1 = require("./BlockMatcher");
+Object.defineProperty(exports, "BlockMatcher", { enumerable: true, get: function () { return __importDefault(BlockMatcher_1).default; } });

package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { ISection } from '../../../DynamicLayout/types';
+declare function CustomSection({ ...props }: ISection): JSX.Element;
+export declare function generateLayout(number: number): {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    i: string;
+}[];
+export default CustomSection;

package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js

@@ -0,0 +1,83 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateLayout = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_grid_layout_1 = require("react-grid-layout");
+var components_1 = require("../../../DynamicLayout/components");
+var dynamicLayoutContext_1 = require("../../../DynamicLayout/dynamicLayoutContext");
+var styled_components_1 = __importDefault(require("styled-components"));
+var BlockMatcher_1 = require("./BlockMatcher");
+var ResponsiveGridLayout = (0, react_grid_layout_1.WidthProvider)(react_grid_layout_1.Responsive);
+function CustomSection(_a) {
+    var _b;
+    var props = __rest(_a, []);
+    var blocks = props.componentBlocks;
+    // NOTE: fix no optional
+    var layout = (_b = blocks === null || blocks === void 0 ? void 0 : blocks.map(function (each) { return each.gridItemData; })) !== null && _b !== void 0 ? _b : [];
+    var _c = (0, react_1.useState)('lg'), breakpoint = _c[0], setBreakpoint = _c[1];
+    var onDeviceChange = function () {
+        setBreakpoint(function (prev) { return (prev === 'sm' ? 'lg' : 'sm'); });
+    };
+    var sectionActionHandler = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).sectionActionHandler;
+    var onClickGridItem = function (i, name) {
+        if (sectionActionHandler) {
+            sectionActionHandler({
+                type: '@TEMP_CUSTOM/BLOCK_CLICKED',
+                payload: { blockId: i, blockName: name }
+            });
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ "x-dlayout-section-type": "Custom" }, { children: (0, jsx_runtime_1.jsx)(components_1.Section, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)(S_Styles, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: onDeviceChange }, { children: "toggle device" }), void 0), (0, jsx_runtime_1.jsx)(ResponsiveGridLayout, __assign({ className: "'layout' " + breakpoint, layouts: { sm: layout, lg: layout }, breakpoint: breakpoint, 
+                        // onBreakpointChange={onDeviceChange}
+                        // breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
+                        cols: { lg: 24, sm: 8 }, resizeHandles: ['se'], allowOverlap: true, onResize: function () { return ({}); }, rowHeight: 50, autoSize: true }, { children: blocks === null || blocks === void 0 ? void 0 : blocks.map(function (each) { return ((0, jsx_runtime_1.jsx)(S_GridItem, __assign({ onClick: function () { return onClickGridItem(each.gridItemData.i, each.type); } }, { children: (0, jsx_runtime_1.jsx)(BlockMatcher_1.BlockMatcher, { type: each.type, content: each.content, style: each.style, hoverStyle: each.hoverStyle, layout: each.layout }, void 0) }), each.gridItemData.i)); }) }), void 0)] }, void 0) }), void 0) }), void 0));
+}
+var S_Styles = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  * {\n    box-sizing: border-box;\n  }\n\n  .react-grid-layout {\n    position: relative;\n    transition: height 200ms ease;\n  }\n\n  .lg {\n    min-height: 1000px;\n  }\n\n  .react-grid-item {\n    overflow: visible;\n    transition: all 200ms ease;\n    transition-property: left, top;\n  }\n\n  .react-grid-item img {\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .react-grid-item.cssTransforms {\n    /* transition-property: transform; */\n  }\n\n  .react-grid-item.resizing {\n    will-change: width, height;\n    z-index: 1;\n  }\n\n  .react-grid-item.react-draggable-dragging {\n    transition: none;\n    visibility: hidden;\n    will-change: transform;\n    z-index: 3;\n  }\n\n  .react-grid-item.react-grid-placeholder {\n    background: rgb(216, 229, 255);\n    opacity: 0.2;\n    transition-duration: 100ms;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    -o-user-select: none;\n    user-select: none;\n    z-index: 99;\n  }\n\n  .react-grid-item.react-draggable-dragging {\n    transition: none;\n    will-change: transform;\n    z-index: 3;\n  }\n\n  .react-grid-item.react-grid-placeholder {\n    box-shadow: 0 0 0 2px inset rgb(81, 255, 0);\n    transition-duration: 100ms;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    -o-user-select: none;\n    user-select: none;\n    z-index: 2;\n  }\n\n  .react-grid-item > .react-resizable-handle {\n    height: 20px;\n    position: absolute;\n    width: 20px;\n  }\n\n  .react-grid-item.dropping {\n    visibility: hidden;\n  }\n\n  .react-grid-item > .react-resizable-handle::after {\n    border-bottom: 2px solid rgba(0, 0, 0, 0.4);\n    border-right: 2px solid rgba(0, 0, 0, 0.4);\n    bottom: 3px;\n    content: '';\n    height: 5px;\n    position: absolute;\n    right: 3px;\n    width: 5px;\n  }\n\n  .react-resizable-hide > .react-resizable-handle {\n    display: none;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-sw {\n    bottom: -6px;\n    cursor: sw-resize;\n    left: -6px;\n    transform: rotate(90deg);\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-sw::after {\n    background: #fff;\n    border: 2px solid #027aff;\n    content: '';\n    height: 5px;\n    width: 5px;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-se {\n    bottom: -6px;\n    cursor: se-resize;\n    right: -6px;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-se::after {\n    background: #fff;\n    border: 2px solid #027aff;\n    content: '';\n    height: 5px;\n    width: 5px;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-nw {\n    cursor: nw-resize;\n    left: -6px;\n    top: -6px;\n    transform: rotate(180deg);\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-nw::after {\n    background: #fff;\n    border: 2px solid #027aff;\n    content: '';\n    height: 5px;\n    width: 5px;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-ne {\n    cursor: ne-resize;\n    right: -6px;\n    top: -6px;\n    transform: rotate(270deg);\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-ne::after {\n    background: #fff;\n    border: 2px solid #027aff;\n    content: '';\n    height: 5px;\n    width: 5px;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-w {\n    cursor: ew-resize;\n    left: -11px;\n    margin-top: -10px;\n    top: 50%;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n    cursor: ew-resize;\n    margin-top: -10px;\n    right: -6px;\n    top: 50%;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-w::after {\n    background: #fff;\n    border: 2px solid #027aff;\n    content: '';\n    height: 5px;\n    width: 5px;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-e::after {\n    background: #fff;\n    border: 2px solid #027aff;\n    content: '';\n    height: 5px;\n    width: 5px;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n    bottom: -6px;\n    cursor: s-resize;\n    left: 50%;\n    margin-left: -12px;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-n {\n    cursor: n-resize;\n    left: 50%;\n    margin-left: -12px;\n    top: -11px;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-n::after {\n    background: #fff;\n    border: 2px solid #027aff;\n    content: '';\n    height: 5px;\n    width: 5px;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-s::after {\n    background: #fff;\n    border: 2px solid #027aff;\n    content: '';\n    height: 5px;\n    width: 5px;\n  }\n"], ["\n  * {\n    box-sizing: border-box;\n  }\n\n  .react-grid-layout {\n    position: relative;\n    transition: height 200ms ease;\n  }\n\n  .lg {\n    min-height: 1000px;\n  }\n\n  .react-grid-item {\n    overflow: visible;\n    transition: all 200ms ease;\n    transition-property: left, top;\n  }\n\n  .react-grid-item img {\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .react-grid-item.cssTransforms {\n    /* transition-property: transform; */\n  }\n\n  .react-grid-item.resizing {\n    will-change: width, height;\n    z-index: 1;\n  }\n\n  .react-grid-item.react-draggable-dragging {\n    transition: none;\n    visibility: hidden;\n    will-change: transform;\n    z-index: 3;\n  }\n\n  .react-grid-item.react-grid-placeholder {\n    background: rgb(216, 229, 255);\n    opacity: 0.2;\n    transition-duration: 100ms;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    -o-user-select: none;\n    user-select: none;\n    z-index: 99;\n  }\n\n  .react-grid-item.react-draggable-dragging {\n    transition: none;\n    will-change: transform;\n    z-index: 3;\n  }\n\n  .react-grid-item.react-grid-placeholder {\n    box-shadow: 0 0 0 2px inset rgb(81, 255, 0);\n    transition-duration: 100ms;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    -o-user-select: none;\n    user-select: none;\n    z-index: 2;\n  }\n\n  .react-grid-item > .react-resizable-handle {\n    height: 20px;\n    position: absolute;\n    width: 20px;\n  }\n\n  .react-grid-item.dropping {\n    visibility: hidden;\n  }\n\n  .react-grid-item > .react-resizable-handle::after {\n    border-bottom: 2px solid rgba(0, 0, 0, 0.4);\n    border-right: 2px solid rgba(0, 0, 0, 0.4);\n    bottom: 3px;\n    content: '';\n    height: 5px;\n    position: absolute;\n    right: 3px;\n    width: 5px;\n  }\n\n  .react-resizable-hide > .react-resizable-handle {\n    display: none;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-sw {\n    bottom: -6px;\n    cursor: sw-resize;\n    left: -6px;\n    transform: rotate(90deg);\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-sw::after {\n    background: #fff;\n    border: 2px solid #027aff;\n    content: '';\n    height: 5px;\n    width: 5px;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-se {\n    bottom: -6px;\n    cursor: se-resize;\n    right: -6px;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-se::after {\n    background: #fff;\n    border: 2px solid #027aff;\n    content: '';\n    height: 5px;\n    width: 5px;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-nw {\n    cursor: nw-resize;\n    left: -6px;\n    top: -6px;\n    transform: rotate(180deg);\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-nw::after {\n    background: #fff;\n    border: 2px solid #027aff;\n    content: '';\n    height: 5px;\n    width: 5px;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-ne {\n    cursor: ne-resize;\n    right: -6px;\n    top: -6px;\n    transform: rotate(270deg);\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-ne::after {\n    background: #fff;\n    border: 2px solid #027aff;\n    content: '';\n    height: 5px;\n    width: 5px;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-w {\n    cursor: ew-resize;\n    left: -11px;\n    margin-top: -10px;\n    top: 50%;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n    cursor: ew-resize;\n    margin-top: -10px;\n    right: -6px;\n    top: 50%;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-w::after {\n    background: #fff;\n    border: 2px solid #027aff;\n    content: '';\n    height: 5px;\n    width: 5px;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-e::after {\n    background: #fff;\n    border: 2px solid #027aff;\n    content: '';\n    height: 5px;\n    width: 5px;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n    bottom: -6px;\n    cursor: s-resize;\n    left: 50%;\n    margin-left: -12px;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-n {\n    cursor: n-resize;\n    left: 50%;\n    margin-left: -12px;\n    top: -11px;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-n::after {\n    background: #fff;\n    border: 2px solid #027aff;\n    content: '';\n    height: 5px;\n    width: 5px;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-s::after {\n    background: #fff;\n    border: 2px solid #027aff;\n    content: '';\n    height: 5px;\n    width: 5px;\n  }\n"])));
+var S_SectionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_GridItem = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  & > .react-resizable-handle-se {\n    bottom: 0;\n    cursor: se-resize;\n    position: absolute;\n    right: 0;\n  }\n"], ["\n  & > .react-resizable-handle-se {\n    bottom: 0;\n    cursor: se-resize;\n    position: absolute;\n    right: 0;\n  }\n"])));
+function generateLayout(number) {
+    return Array.from(Array(number).keys()).map(function (i) {
+        var y = Math.ceil(Math.random() * 4) + 1;
+        return {
+            x: Math.round(Math.random() * 5) * 2,
+            y: Math.floor(i / 6) * y,
+            w: 2,
+            h: y,
+            i: i.toString()
+            // static: Math.random() < 0.05
+        };
+    });
+}
+exports.generateLayout = generateLayout;
+exports.default = CustomSection;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/sub/DynamicLayout/sections/CustomSection/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CustomSection } from './CustomSection';
+export type { BlockNames, BlockId } from './types';

package/dist/src/sub/DynamicLayout/sections/CustomSection/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomSection = void 0;
+var CustomSection_1 = require("./CustomSection");
+Object.defineProperty(exports, "CustomSection", { enumerable: true, get: function () { return __importDefault(CustomSection_1).default; } });