@elicecontents/content-ui 1.0.2-alpha.0 → 1.0.2-alpha.2

package/cjs/components/layout/Layout.js

@@ -154,44 +154,44 @@ var EliceLayout = Object.assign(function (_ref14) {
     }
     var isScrollActive = context.isScrollActive,
       setIsScrollActive = context.setIsScrollActive;
+    var _React$useState3 = React__default.default.useState(false),
+      _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
+      hasScroll = _React$useState4[0],
+      setHasScroll = _React$useState4[1];
     React__default.default.useEffect(function () {
-      var isInsideIframe = window.self !== window.top;
       var handleScroll = function handleScroll() {
-        if (isInsideIframe) {
-          setIsScrollActive(document.documentElement.scrollTop > 10);
-        } else if (contentRef.current) {
+        if (contentRef.current) {
           var scrollTop = contentRef.current.scrollTop;
           setIsScrollActive(scrollTop > 10);
         }
       };
-      if (isInsideIframe) {
-        window.addEventListener("scroll", handleScroll);
-        window.parent.postMessage({
-          type: "scrollUpdate",
-          scrollTop: document.documentElement.scrollTop
-        }, "*");
-      } else {
+      var checkScroll = function checkScroll() {
         if (contentRef.current) {
-          contentRef.current.addEventListener("scroll", handleScroll);
+          var _contentRef$current = contentRef.current,
+            scrollHeight = _contentRef$current.scrollHeight,
+            clientHeight = _contentRef$current.clientHeight;
+          setHasScroll(scrollHeight > clientHeight);
         }
+      };
+      var element = contentRef.current;
+      if (element) {
+        element.addEventListener("scroll", handleScroll);
+        checkScroll();
       }
       return function () {
-        if (isInsideIframe) {
-          window.removeEventListener("scroll", handleScroll);
-        } else {
-          if (contentRef.current) {
-            contentRef.current.removeEventListener("scroll", handleScroll);
-          }
+        if (element) {
+          element.removeEventListener("scroll", handleScroll);
         }
       };
-    }, []);
+    }, [contentRef]);
     return jsxRuntime.jsxs(_ContentContainer, {
       ref: contentRef,
       theme: theme,
-      children: [children, !isScrollActive && jsxRuntime.jsx(ScrollMoreButton, {
+      children: [children, hasScroll && !isScrollActive && jsxRuntime.jsx(ScrollMoreButton, {
         children: jsxRuntime.jsx(ScrollMoreIcon.default, {
           size: 32,
-          color: "white"
+          color: "white",
+          bgOpacity: 0.5
         })
       })]
     });
@@ -223,10 +223,7 @@ var EliceLayout = Object.assign(function (_ref14) {
     return jsxRuntime.jsx(_Content, {
       alignment: alignment,
       justifyContent: justifyContent,
-      children: jsxRuntime.jsx(material.Typography, {
-        variant: "body1",
-        children: children
-      })
+      children: children
     });
   },
   FooterContainer: function FooterContainer(_ref19) {

package/cjs/icons/ScrollMoreIcon.d.ts

@@ -2,6 +2,8 @@ import { IconProps } from "./_types";
 interface ScrollMoreIconProps extends IconProps {
     bgColor?: string;
     arrowColor?: string;
+    bgOpacity?: number;
+    arrowOpacity?: number;
 }
-declare const ScrollMoreIcon: ({ size, bgColor, arrowColor, ...other }: ScrollMoreIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const ScrollMoreIcon: ({ size, bgColor, arrowColor, bgOpacity, arrowOpacity, ...other }: ScrollMoreIconProps) => import("react/jsx-runtime").JSX.Element;
 export default ScrollMoreIcon;

package/cjs/icons/ScrollMoreIcon.js

@@ -12,7 +12,11 @@ var ScrollMoreIcon = function ScrollMoreIcon(_a) {
     bgColor = _a$bgColor === void 0 ? "#7D89C2" : _a$bgColor,
     _a$arrowColor = _a.arrowColor,
     arrowColor = _a$arrowColor === void 0 ? "white" : _a$arrowColor,
-    other = tslib.__rest(_a, ["size", "bgColor", "arrowColor"]);
+    _a$bgOpacity = _a.bgOpacity,
+    bgOpacity = _a$bgOpacity === void 0 ? 1 : _a$bgOpacity,
+    _a$arrowOpacity = _a.arrowOpacity,
+    arrowOpacity = _a$arrowOpacity === void 0 ? 1 : _a$arrowOpacity,
+    other = tslib.__rest(_a, ["size", "bgColor", "arrowColor", "bgOpacity", "arrowOpacity"]);
   return jsxRuntime.jsxs("svg", Object.assign({
     width: size,
     height: size,
@@ -24,10 +28,12 @@ var ScrollMoreIcon = function ScrollMoreIcon(_a) {
       width: "36",
       height: "36",
       rx: "16",
-      fill: bgColor
+      fill: bgColor,
+      opacity: bgOpacity
     }), jsxRuntime.jsx("path", {
       d: "M17.1914 22.4336L12.6914 17.9336C12.375 17.6172 12.2695 17.125 12.4453 16.7031C12.6211 16.2812 13.043 16 13.5 16H22.5C22.957 16 23.3438 16.2812 23.5195 16.7031C23.6953 17.125 23.5898 17.6172 23.2734 17.9336L18.7734 22.4336C18.3516 22.8906 17.6133 22.8906 17.1914 22.4336Z",
-      fill: arrowColor
+      fill: arrowColor,
+      opacity: arrowOpacity
     })]
   }));
 };

package/es/components/index.js

@@ -1,14 +1,14 @@
-export { default as EliceChat } from './chat/Chat.js';
-export { default as EliceAnswerFeedback } from './answer-feedback/AnswerFeedback.js';
 export { default as EliceAIFeedback } from './AI-feedback/AIFeedback.js';
 export { default as EliceBadge } from './badge/Badge.js';
 export { default as EliceButton } from './button/Button.js';
+export { default as EliceChat } from './chat/Chat.js';
 export { default as EliceDialog } from './dialog/Dialog.js';
 export { default as EliceDottedPagination } from './dotted-pagination/DottedPagination.js';
 export { default as EliceLayout } from './layout/Layout.js';
 export { default as EliceQuestion } from './question/Question.js';
 export { default as EliceSelection } from './selection/Selection.js';
 export { default as EliceIconButton } from './icon-button/IconButton.js';
+export { default as EliceAnswerFeedback } from './answer-feedback/AnswerFeedback.js';
 export { default as EliceTable } from './table/Table.js';
 export { default as EliceTextarea } from './textarea/Textarea.js';
 export { default as EliceTooltip } from './tooltip/Tooltip.js';

package/es/components/layout/Layout.js

@@ -2,7 +2,7 @@ import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBab
 import _styled from '@emotion/styled/base';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
-import { Stack, Button, Typography, useTheme } from '@mui/material';
+import { Stack, Button, useTheme } from '@mui/material';
 import useAIDTMediaQuery from '../../hooks/useAIDTMediaQuery.js';
 import ScrollMoreIcon from '../../icons/ScrollMoreIcon.js';
 import LayoutPagination from './layout-pagination/LayoutPagination.js';
@@ -145,44 +145,44 @@ var EliceLayout = Object.assign(function (_ref14) {
     }
     var isScrollActive = context.isScrollActive,
       setIsScrollActive = context.setIsScrollActive;
+    var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      hasScroll = _React$useState4[0],
+      setHasScroll = _React$useState4[1];
     React.useEffect(function () {
-      var isInsideIframe = window.self !== window.top;
       var handleScroll = function handleScroll() {
-        if (isInsideIframe) {
-          setIsScrollActive(document.documentElement.scrollTop > 10);
-        } else if (contentRef.current) {
+        if (contentRef.current) {
           var scrollTop = contentRef.current.scrollTop;
           setIsScrollActive(scrollTop > 10);
         }
       };
-      if (isInsideIframe) {
-        window.addEventListener("scroll", handleScroll);
-        window.parent.postMessage({
-          type: "scrollUpdate",
-          scrollTop: document.documentElement.scrollTop
-        }, "*");
-      } else {
+      var checkScroll = function checkScroll() {
         if (contentRef.current) {
-          contentRef.current.addEventListener("scroll", handleScroll);
+          var _contentRef$current = contentRef.current,
+            scrollHeight = _contentRef$current.scrollHeight,
+            clientHeight = _contentRef$current.clientHeight;
+          setHasScroll(scrollHeight > clientHeight);
         }
+      };
+      var element = contentRef.current;
+      if (element) {
+        element.addEventListener("scroll", handleScroll);
+        checkScroll();
       }
       return function () {
-        if (isInsideIframe) {
-          window.removeEventListener("scroll", handleScroll);
-        } else {
-          if (contentRef.current) {
-            contentRef.current.removeEventListener("scroll", handleScroll);
-          }
+        if (element) {
+          element.removeEventListener("scroll", handleScroll);
         }
       };
-    }, []);
+    }, [contentRef]);
     return jsxs(_ContentContainer, {
       ref: contentRef,
       theme: theme,
-      children: [children, !isScrollActive && jsx(ScrollMoreButton, {
+      children: [children, hasScroll && !isScrollActive && jsx(ScrollMoreButton, {
         children: jsx(ScrollMoreIcon, {
           size: 32,
-          color: "white"
+          color: "white",
+          bgOpacity: 0.5
         })
       })]
     });
@@ -214,10 +214,7 @@ var EliceLayout = Object.assign(function (_ref14) {
     return jsx(_Content, {
       alignment: alignment,
       justifyContent: justifyContent,
-      children: jsx(Typography, {
-        variant: "body1",
-        children: children
-      })
+      children: children
     });
   },
   FooterContainer: function FooterContainer(_ref19) {

package/es/icons/ScrollMoreIcon.d.ts

@@ -2,6 +2,8 @@ import { IconProps } from "./_types";
 interface ScrollMoreIconProps extends IconProps {
     bgColor?: string;
     arrowColor?: string;
+    bgOpacity?: number;
+    arrowOpacity?: number;
 }
-declare const ScrollMoreIcon: ({ size, bgColor, arrowColor, ...other }: ScrollMoreIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const ScrollMoreIcon: ({ size, bgColor, arrowColor, bgOpacity, arrowOpacity, ...other }: ScrollMoreIconProps) => import("react/jsx-runtime").JSX.Element;
 export default ScrollMoreIcon;

package/es/icons/ScrollMoreIcon.js

@@ -8,7 +8,11 @@ var ScrollMoreIcon = function ScrollMoreIcon(_a) {
     bgColor = _a$bgColor === void 0 ? "#7D89C2" : _a$bgColor,
     _a$arrowColor = _a.arrowColor,
     arrowColor = _a$arrowColor === void 0 ? "white" : _a$arrowColor,
-    other = __rest(_a, ["size", "bgColor", "arrowColor"]);
+    _a$bgOpacity = _a.bgOpacity,
+    bgOpacity = _a$bgOpacity === void 0 ? 1 : _a$bgOpacity,
+    _a$arrowOpacity = _a.arrowOpacity,
+    arrowOpacity = _a$arrowOpacity === void 0 ? 1 : _a$arrowOpacity,
+    other = __rest(_a, ["size", "bgColor", "arrowColor", "bgOpacity", "arrowOpacity"]);
   return jsxs("svg", Object.assign({
     width: size,
     height: size,
@@ -20,10 +24,12 @@ var ScrollMoreIcon = function ScrollMoreIcon(_a) {
       width: "36",
       height: "36",
       rx: "16",
-      fill: bgColor
+      fill: bgColor,
+      opacity: bgOpacity
     }), jsx("path", {
       d: "M17.1914 22.4336L12.6914 17.9336C12.375 17.6172 12.2695 17.125 12.4453 16.7031C12.6211 16.2812 13.043 16 13.5 16H22.5C22.957 16 23.3438 16.2812 23.5195 16.7031C23.6953 17.125 23.5898 17.6172 23.2734 17.9336L18.7734 22.4336C18.3516 22.8906 17.6133 22.8906 17.1914 22.4336Z",
-      fill: arrowColor
+      fill: arrowColor,
+      opacity: arrowOpacity
     })]
   }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elicecontents/content-ui",
-  "version": "1.0.2-alpha.0",
+  "version": "1.0.2-alpha.2",
   "description": "A set of UI components for creating content of Elice",
   "author": "Elice <contact@elice.io>",
   "license": "UNLICENSED",