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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/cjs/components/layout/Layout.js +18 -24
  2. package/cjs/icons/ScrollMoreIcon.d.ts +3 -1
  3. package/cjs/icons/ScrollMoreIcon.js +9 -3
  4. package/es/components/index.js +2 -2
  5. package/es/components/layout/Layout.js +18 -24
  6. package/es/icons/ScrollMoreIcon.d.ts +3 -1
  7. package/es/icons/ScrollMoreIcon.js +9 -3
  8. package/package.json +1 -1
package/cjs/components/layout/Layout.js CHANGED
@@ -155,43 +155,37 @@ var EliceLayout = Object.assign(function (_ref14) {
155
155
  var isScrollActive = context.isScrollActive,
156
156
  setIsScrollActive = context.setIsScrollActive;
157
157
  React__default.default.useEffect(function () {
158
- var isInsideIframe = window.self !== window.top;
159
158
  var handleScroll = function handleScroll() {
160
- if (isInsideIframe) {
161
- setIsScrollActive(document.documentElement.scrollTop > 10);
162
- } else if (contentRef.current) {
163
- var scrollTop = contentRef.current.scrollTop;
159
+ if (contentRef.current) {
160
+ var _contentRef$current = contentRef.current,
161
+ scrollTop = _contentRef$current.scrollTop,
162
+ scrollHeight = _contentRef$current.scrollHeight,
163
+ clientHeight = _contentRef$current.clientHeight;
164
164
  setIsScrollActive(scrollTop > 10);
165
+ if (scrollHeight <= clientHeight) {
166
+ setIsScrollActive(false);
167
+ }
165
168
  }
166
169
  };
167
- if (isInsideIframe) {
168
- window.addEventListener("scroll", handleScroll);
169
- window.parent.postMessage({
170
- type: "scrollUpdate",
171
- scrollTop: document.documentElement.scrollTop
172
- }, "*");
173
- } else {
174
- if (contentRef.current) {
175
- contentRef.current.addEventListener("scroll", handleScroll);
176
- }
170
+ var element = contentRef.current;
171
+ if (element) {
172
+ element.addEventListener("scroll", handleScroll);
173
+ handleScroll();
177
174
  }
178
175
  return function () {
179
- if (isInsideIframe) {
180
- window.removeEventListener("scroll", handleScroll);
181
- } else {
182
- if (contentRef.current) {
183
- contentRef.current.removeEventListener("scroll", handleScroll);
184
- }
176
+ if (element) {
177
+ element.removeEventListener("scroll", handleScroll);
185
178
  }
186
179
  };
187
- }, []);
180
+ }, [contentRef]);
188
181
  return jsxRuntime.jsxs(_ContentContainer, {
189
182
  ref: contentRef,
190
183
  theme: theme,
191
- children: [children, !isScrollActive && jsxRuntime.jsx(ScrollMoreButton, {
184
+ children: [children, isScrollActive && jsxRuntime.jsx(ScrollMoreButton, {
192
185
  children: jsxRuntime.jsx(ScrollMoreIcon.default, {
193
186
  size: 32,
194
- color: "white"
187
+ color: "white",
188
+ bgOpacity: 0.5
195
189
  })
196
190
  })]
197
191
  });
package/cjs/icons/ScrollMoreIcon.d.ts CHANGED
@@ -2,6 +2,8 @@ import { IconProps } from "./_types";
2
2
  interface ScrollMoreIconProps extends IconProps {
3
3
  bgColor?: string;
4
4
  arrowColor?: string;
5
+ bgOpacity?: number;
6
+ arrowOpacity?: number;
5
7
  }
6
- declare const ScrollMoreIcon: ({ size, bgColor, arrowColor, ...other }: ScrollMoreIconProps) => import("react/jsx-runtime").JSX.Element;
8
+ declare const ScrollMoreIcon: ({ size, bgColor, arrowColor, bgOpacity, arrowOpacity, ...other }: ScrollMoreIconProps) => import("react/jsx-runtime").JSX.Element;
7
9
  export default ScrollMoreIcon;
package/cjs/icons/ScrollMoreIcon.js CHANGED
@@ -12,7 +12,11 @@ var ScrollMoreIcon = function ScrollMoreIcon(_a) {
12
12
  bgColor = _a$bgColor === void 0 ? "#7D89C2" : _a$bgColor,
13
13
  _a$arrowColor = _a.arrowColor,
14
14
  arrowColor = _a$arrowColor === void 0 ? "white" : _a$arrowColor,
15
- other = tslib.__rest(_a, ["size", "bgColor", "arrowColor"]);
15
+ _a$bgOpacity = _a.bgOpacity,
16
+ bgOpacity = _a$bgOpacity === void 0 ? 1 : _a$bgOpacity,
17
+ _a$arrowOpacity = _a.arrowOpacity,
18
+ arrowOpacity = _a$arrowOpacity === void 0 ? 1 : _a$arrowOpacity,
19
+ other = tslib.__rest(_a, ["size", "bgColor", "arrowColor", "bgOpacity", "arrowOpacity"]);
16
20
  return jsxRuntime.jsxs("svg", Object.assign({
17
21
  width: size,
18
22
  height: size,
@@ -24,10 +28,12 @@ var ScrollMoreIcon = function ScrollMoreIcon(_a) {
24
28
  width: "36",
25
29
  height: "36",
26
30
  rx: "16",
27
- fill: bgColor
31
+ fill: bgColor,
32
+ opacity: bgOpacity
28
33
  }), jsxRuntime.jsx("path", {
29
34
  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",
30
- fill: arrowColor
35
+ fill: arrowColor,
36
+ opacity: arrowOpacity
31
37
  })]
32
38
  }));
33
39
  };
package/es/components/index.js CHANGED
@@ -1,14 +1,14 @@
1
- export { default as EliceChat } from './chat/Chat.js';
2
- export { default as EliceAnswerFeedback } from './answer-feedback/AnswerFeedback.js';
3
1
  export { default as EliceAIFeedback } from './AI-feedback/AIFeedback.js';
4
2
  export { default as EliceBadge } from './badge/Badge.js';
5
3
  export { default as EliceButton } from './button/Button.js';
4
+ export { default as EliceChat } from './chat/Chat.js';
6
5
  export { default as EliceDialog } from './dialog/Dialog.js';
7
6
  export { default as EliceDottedPagination } from './dotted-pagination/DottedPagination.js';
8
7
  export { default as EliceLayout } from './layout/Layout.js';
9
8
  export { default as EliceQuestion } from './question/Question.js';
10
9
  export { default as EliceSelection } from './selection/Selection.js';
11
10
  export { default as EliceIconButton } from './icon-button/IconButton.js';
11
+ export { default as EliceAnswerFeedback } from './answer-feedback/AnswerFeedback.js';
12
12
  export { default as EliceTable } from './table/Table.js';
13
13
  export { default as EliceTextarea } from './textarea/Textarea.js';
14
14
  export { default as EliceTooltip } from './tooltip/Tooltip.js';
package/es/components/layout/Layout.js CHANGED
@@ -146,43 +146,37 @@ var EliceLayout = Object.assign(function (_ref14) {
146
146
  var isScrollActive = context.isScrollActive,
147
147
  setIsScrollActive = context.setIsScrollActive;
148
148
  React.useEffect(function () {
149
- var isInsideIframe = window.self !== window.top;
150
149
  var handleScroll = function handleScroll() {
151
- if (isInsideIframe) {
152
- setIsScrollActive(document.documentElement.scrollTop > 10);
153
- } else if (contentRef.current) {
154
- var scrollTop = contentRef.current.scrollTop;
150
+ if (contentRef.current) {
151
+ var _contentRef$current = contentRef.current,
152
+ scrollTop = _contentRef$current.scrollTop,
153
+ scrollHeight = _contentRef$current.scrollHeight,
154
+ clientHeight = _contentRef$current.clientHeight;
155
155
  setIsScrollActive(scrollTop > 10);
156
+ if (scrollHeight <= clientHeight) {
157
+ setIsScrollActive(false);
158
+ }
156
159
  }
157
160
  };
158
- if (isInsideIframe) {
159
- window.addEventListener("scroll", handleScroll);
160
- window.parent.postMessage({
161
- type: "scrollUpdate",
162
- scrollTop: document.documentElement.scrollTop
163
- }, "*");
164
- } else {
165
- if (contentRef.current) {
166
- contentRef.current.addEventListener("scroll", handleScroll);
167
- }
161
+ var element = contentRef.current;
162
+ if (element) {
163
+ element.addEventListener("scroll", handleScroll);
164
+ handleScroll();
168
165
  }
169
166
  return function () {
170
- if (isInsideIframe) {
171
- window.removeEventListener("scroll", handleScroll);
172
- } else {
173
- if (contentRef.current) {
174
- contentRef.current.removeEventListener("scroll", handleScroll);
175
- }
167
+ if (element) {
168
+ element.removeEventListener("scroll", handleScroll);
176
169
  }
177
170
  };
178
- }, []);
171
+ }, [contentRef]);
179
172
  return jsxs(_ContentContainer, {
180
173
  ref: contentRef,
181
174
  theme: theme,
182
- children: [children, !isScrollActive && jsx(ScrollMoreButton, {
175
+ children: [children, isScrollActive && jsx(ScrollMoreButton, {
183
176
  children: jsx(ScrollMoreIcon, {
184
177
  size: 32,
185
- color: "white"
178
+ color: "white",
179
+ bgOpacity: 0.5
186
180
  })
187
181
  })]
188
182
  });
package/es/icons/ScrollMoreIcon.d.ts CHANGED
@@ -2,6 +2,8 @@ import { IconProps } from "./_types";
2
2
  interface ScrollMoreIconProps extends IconProps {
3
3
  bgColor?: string;
4
4
  arrowColor?: string;
5
+ bgOpacity?: number;
6
+ arrowOpacity?: number;
5
7
  }
6
- declare const ScrollMoreIcon: ({ size, bgColor, arrowColor, ...other }: ScrollMoreIconProps) => import("react/jsx-runtime").JSX.Element;
8
+ declare const ScrollMoreIcon: ({ size, bgColor, arrowColor, bgOpacity, arrowOpacity, ...other }: ScrollMoreIconProps) => import("react/jsx-runtime").JSX.Element;
7
9
  export default ScrollMoreIcon;
package/es/icons/ScrollMoreIcon.js CHANGED
@@ -8,7 +8,11 @@ var ScrollMoreIcon = function ScrollMoreIcon(_a) {
8
8
  bgColor = _a$bgColor === void 0 ? "#7D89C2" : _a$bgColor,
9
9
  _a$arrowColor = _a.arrowColor,
10
10
  arrowColor = _a$arrowColor === void 0 ? "white" : _a$arrowColor,
11
- other = __rest(_a, ["size", "bgColor", "arrowColor"]);
11
+ _a$bgOpacity = _a.bgOpacity,
12
+ bgOpacity = _a$bgOpacity === void 0 ? 1 : _a$bgOpacity,
13
+ _a$arrowOpacity = _a.arrowOpacity,
14
+ arrowOpacity = _a$arrowOpacity === void 0 ? 1 : _a$arrowOpacity,
15
+ other = __rest(_a, ["size", "bgColor", "arrowColor", "bgOpacity", "arrowOpacity"]);
12
16
  return jsxs("svg", Object.assign({
13
17
  width: size,
14
18
  height: size,
@@ -20,10 +24,12 @@ var ScrollMoreIcon = function ScrollMoreIcon(_a) {
20
24
  width: "36",
21
25
  height: "36",
22
26
  rx: "16",
23
- fill: bgColor
27
+ fill: bgColor,
28
+ opacity: bgOpacity
24
29
  }), jsx("path", {
25
30
  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",
26
- fill: arrowColor
31
+ fill: arrowColor,
32
+ opacity: arrowOpacity
27
33
  })]
28
34
  }));
29
35
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elicecontents/content-ui",
3
- "version": "1.0.2-alpha.0",
3
+ "version": "1.0.2-alpha.1",
4
4
  "description": "A set of UI components for creating content of Elice",
5
5
  "author": "Elice <contact@elice.io>",
6
6
  "license": "UNLICENSED",