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

package/cjs/components/layout/Layout.js

@@ -154,23 +154,29 @@ 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 handleScroll = function handleScroll() {
+        if (contentRef.current) {
+          var scrollTop = contentRef.current.scrollTop;
+          setIsScrollActive(scrollTop > 10);
+        }
+      };
+      var checkScroll = function checkScroll() {
         if (contentRef.current) {
           var _contentRef$current = contentRef.current,
-            scrollTop = _contentRef$current.scrollTop,
             scrollHeight = _contentRef$current.scrollHeight,
             clientHeight = _contentRef$current.clientHeight;
-          setIsScrollActive(scrollTop > 10);
-          if (scrollHeight <= clientHeight) {
-            setIsScrollActive(false);
-          }
+          setHasScroll(scrollHeight > clientHeight);
         }
       };
       var element = contentRef.current;
       if (element) {
         element.addEventListener("scroll", handleScroll);
-        handleScroll();
+        checkScroll();
       }
       return function () {
         if (element) {
@@ -181,7 +187,7 @@ var EliceLayout = Object.assign(function (_ref14) {
     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",
@@ -217,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/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,23 +145,29 @@ 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 handleScroll = function handleScroll() {
+        if (contentRef.current) {
+          var scrollTop = contentRef.current.scrollTop;
+          setIsScrollActive(scrollTop > 10);
+        }
+      };
+      var checkScroll = function checkScroll() {
         if (contentRef.current) {
           var _contentRef$current = contentRef.current,
-            scrollTop = _contentRef$current.scrollTop,
             scrollHeight = _contentRef$current.scrollHeight,
             clientHeight = _contentRef$current.clientHeight;
-          setIsScrollActive(scrollTop > 10);
-          if (scrollHeight <= clientHeight) {
-            setIsScrollActive(false);
-          }
+          setHasScroll(scrollHeight > clientHeight);
         }
       };
       var element = contentRef.current;
       if (element) {
         element.addEventListener("scroll", handleScroll);
-        handleScroll();
+        checkScroll();
       }
       return function () {
         if (element) {
@@ -172,7 +178,7 @@ var EliceLayout = Object.assign(function (_ref14) {
     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",
@@ -208,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/package.json

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