@kkcompany/app-ui 0.1.3 → 0.1.5

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 (5) hide show
  1. package/dist/index.cjs +63 -22
  2. package/dist/index.d.cts +2 -0
  3. package/dist/index.d.mts +6 -4
  4. package/dist/index.mjs +63 -22
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -66,19 +66,31 @@ const maskStyle = {
66
66
  height: "100%",
67
67
  width: "100%",
68
68
  background: "linear-gradient(180deg, rgba(26, 26, 26, 0.00) 0%, #1a1a1a 100%)",
69
- "@media (min-width: 601px)": { display: "none" }
69
+ opacity: 0,
70
+ transition: "opacity 0.2s ease-out"
70
71
  };
71
72
  const addonStyles = {
72
73
  "no-expand": { WebkitLineClamp: "var(--see-more-collapsed-lines, 2)" },
73
- collapsed: { WebkitLineClamp: "var(--see-more-collapsed-lines, 2)" },
74
+ collapsed: {
75
+ WebkitLineClamp: "var(--see-more-collapsed-lines, 2)",
76
+ "@media (max-width: 600px)": { "div:last-of-type": { opacity: 1 } }
77
+ },
74
78
  expanded: {
75
79
  maxHeight: "var(--see-more-max-height, 15em)",
76
- "+ button > span": { transform: "rotateX(180deg)" },
77
- "div:last-of-type": { display: "none" }
80
+ "+ button > span": { transform: "rotateX(180deg)" }
78
81
  }
79
82
  };
80
83
  const onResize = (container, handler) => {
81
- const observer = new ResizeObserver(handler);
84
+ let scheduled = 0;
85
+ const observer = new ResizeObserver((entries) => {
86
+ if (scheduled) return;
87
+ scheduled = window.requestAnimationFrame(() => {
88
+ handler(entries);
89
+ setTimeout(() => {
90
+ scheduled = 0;
91
+ }, 60);
92
+ });
93
+ });
82
94
  observer.observe(container);
83
95
  return () => observer.disconnect();
84
96
  };
@@ -92,10 +104,13 @@ const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
92
104
  const containeRef = (0, react.useRef)();
93
105
  (0, react.useEffect)(() => {
94
106
  if (!containeRef.current) return;
95
- const wrapHieght = Number.parseInt(getComputedStyle(containeRef.current).fontSize, 10) * 3 || 36;
96
107
  return onResize(containeRef.current, () => {
97
- const scrollable = containeRef.current?.scrollHeight > wrapHieght;
98
- setStatus((current) => current === "no-expand" && scrollable ? "collapsed" : current !== "no-expand" && !scrollable ? "no-expand" : current);
108
+ if (!containeRef.current) return;
109
+ const { scrollHeight, clientHeight } = containeRef.current;
110
+ const fontSize = Number.parseFloat(window.getComputedStyle(containeRef.current).fontSize);
111
+ const scrollable = scrollHeight > clientHeight * 1.3;
112
+ const fit = fontSize * 3 > scrollHeight;
113
+ setStatus((current) => current === "no-expand" && scrollable ? "collapsed" : current !== "no-expand" && fit ? "no-expand" : current);
99
114
  setExpandedHeight(containeRef.current?.scrollHeight);
100
115
  });
101
116
  }, []);
@@ -247,18 +262,24 @@ const videoItemStyle = {
247
262
  "@media (min-width: 601px)": { "--description-display": "none" }
248
263
  };
249
264
  const infoStyle = {
250
- marginBottom: "0.5em",
251
265
  display: "flex",
252
266
  alignItems: "center",
253
267
  justifyContent: "space-between",
254
- "> div:first-of-type": { flex: "0 0 calc( 100% * 3 / 7 - 0.5em)" },
268
+ "> div:first-of-type": {
269
+ flex: "0 auto",
270
+ minWidth: "0"
271
+ },
255
272
  "> a": {
256
- flex: "0 0 calc( 100% * 4 / 7 - 0.5em)",
257
- overflow: "hidden",
258
- textOverflow: "ellipsis",
259
- whiteSpace: "nowrap"
273
+ display: "flex",
274
+ flexDirection: "column",
275
+ alignSelf: "stretch",
276
+ justifyContent: "center",
277
+ marginLeft: "0.75em",
278
+ height: "auto",
279
+ flex: "1"
260
280
  },
261
281
  "@media (min-width: 601px)": {
282
+ "--description-line-clamp": 3,
262
283
  "> div:first-of-type": {
263
284
  flex: "0 auto",
264
285
  minWidth: "0",
@@ -271,21 +292,34 @@ const infoStyle = {
271
292
  }
272
293
  }
273
294
  };
295
+ const titleStyle = {
296
+ display: "-webkit-box",
297
+ WebkitBoxOrient: "vertical",
298
+ WebkitLineClamp: "var(--description-line-clamp, 2)",
299
+ overflow: "hidden",
300
+ textOverflow: "ellipsis"
301
+ };
274
302
  const descriptionStyle = {
303
+ marginTop: "0.5rem",
275
304
  display: "var(--description-display, -webkit-box)",
276
305
  overflow: "hidden",
277
306
  WebkitBoxOrient: "vertical",
278
- WebkitLineClamp: 2,
307
+ WebkitLineClamp: "var(--description-line-clamp, 2)",
279
308
  color: "#ccc",
280
309
  textOverflow: "ellipsis",
281
- fontSize: "14px"
310
+ fontSize: "14px",
311
+ "+ div": {
312
+ marginTop: "0.25rem",
313
+ fontSize: "14px",
314
+ color: "#ccc"
315
+ }
282
316
  };
283
317
  const desktopDescriptionStyle = {
284
318
  display: "var(--desktop-description-display, -webkit-box)",
285
- marginTop: "0.75rem",
319
+ margin: "0.75rem 0",
286
320
  WebkitLineClamp: 3
287
321
  };
288
- const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, progress, topTags = [], bottomTags = [], slots = { Link: "a" }, onClickThumbnail, thumbnailChildren }) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
322
+ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, secondaryText, progress, topTags = [], bottomTags = [], slots = { Link: "a" }, onClickThumbnail, thumbnailChildren }) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
289
323
  css: [videoItemStyle, style],
290
324
  children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
291
325
  css: infoStyle,
@@ -300,10 +334,17 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
300
334
  children: thumbnailChildren
301
335
  }), /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)(slots.Link, {
302
336
  href,
303
- children: [data.title || data.display_text, /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
304
- css: [descriptionStyle, desktopDescriptionStyle],
305
- children: data.synopsis
306
- })]
337
+ children: [
338
+ /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
339
+ css: titleStyle,
340
+ children: data.title || data.display_text
341
+ }),
342
+ /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
343
+ css: [descriptionStyle, desktopDescriptionStyle],
344
+ children: data.synopsis
345
+ }),
346
+ secondaryText ? /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: secondaryText }) : null
347
+ ]
307
348
  })]
308
349
  }), /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
309
350
  css: descriptionStyle,
package/dist/index.d.cts CHANGED
@@ -40,6 +40,7 @@ declare const VideoItem: ({
40
40
  thumbnailHref,
41
41
  imageUrl,
42
42
  data,
43
+ secondaryText,
43
44
  progress,
44
45
  topTags,
45
46
  bottomTags,
@@ -52,6 +53,7 @@ declare const VideoItem: ({
52
53
  thumbnailHref?: string;
53
54
  imageUrl?: string;
54
55
  data?: VideoDetail;
56
+ secondaryText?: string;
55
57
  progress?: number;
56
58
  topTags?: string[];
57
59
  bottomTags?: string[];
package/dist/index.d.mts CHANGED
@@ -1,4 +1,4 @@
1
- import * as _emotion_react_jsx_runtime1 from "@emotion/react/jsx-runtime";
1
+ import * as _emotion_react_jsx_runtime0 from "@emotion/react/jsx-runtime";
2
2
  import { ElementType, MouseEventHandler, ReactElement, ReactNode } from "react";
3
3
  import { CSSObject } from "@emotion/react";
4
4
  import Link from "next/link";
@@ -10,7 +10,7 @@ declare const Icon: ({
10
10
  }: {
11
11
  style?: {};
12
12
  src: any;
13
- }) => _emotion_react_jsx_runtime1.JSX.Element;
13
+ }) => _emotion_react_jsx_runtime0.JSX.Element;
14
14
  //#endregion
15
15
  //#region src/SeeMore.d.ts
16
16
  declare const defaultMessages: {
@@ -26,7 +26,7 @@ declare const SeeMore: ({
26
26
  style?: CSSObject;
27
27
  messages?: typeof defaultMessages;
28
28
  children?: ReactNode;
29
- }) => _emotion_react_jsx_runtime1.JSX.Element;
29
+ }) => _emotion_react_jsx_runtime0.JSX.Element;
30
30
  //#endregion
31
31
  //#region src/VideoItem.d.ts
32
32
  type VideoDetail = {
@@ -40,6 +40,7 @@ declare const VideoItem: ({
40
40
  thumbnailHref,
41
41
  imageUrl,
42
42
  data,
43
+ secondaryText,
43
44
  progress,
44
45
  topTags,
45
46
  bottomTags,
@@ -52,6 +53,7 @@ declare const VideoItem: ({
52
53
  thumbnailHref?: string;
53
54
  imageUrl?: string;
54
55
  data?: VideoDetail;
56
+ secondaryText?: string;
55
57
  progress?: number;
56
58
  topTags?: string[];
57
59
  bottomTags?: string[];
@@ -86,6 +88,6 @@ declare const VideoThumbnail: ({
86
88
  Image?: ElementType;
87
89
  };
88
90
  onClick?: MouseEventHandler<HTMLAnchorElement>;
89
- }) => _emotion_react_jsx_runtime1.JSX.Element;
91
+ }) => _emotion_react_jsx_runtime0.JSX.Element;
90
92
  //#endregion
91
93
  export { Icon, SeeMore, VideoItem, VideoThumbnail };
package/dist/index.mjs CHANGED
@@ -66,19 +66,31 @@ const maskStyle = {
66
66
  height: "100%",
67
67
  width: "100%",
68
68
  background: "linear-gradient(180deg, rgba(26, 26, 26, 0.00) 0%, #1a1a1a 100%)",
69
- "@media (min-width: 601px)": { display: "none" }
69
+ opacity: 0,
70
+ transition: "opacity 0.2s ease-out"
70
71
  };
71
72
  const addonStyles = {
72
73
  "no-expand": { WebkitLineClamp: "var(--see-more-collapsed-lines, 2)" },
73
- collapsed: { WebkitLineClamp: "var(--see-more-collapsed-lines, 2)" },
74
+ collapsed: {
75
+ WebkitLineClamp: "var(--see-more-collapsed-lines, 2)",
76
+ "@media (max-width: 600px)": { "div:last-of-type": { opacity: 1 } }
77
+ },
74
78
  expanded: {
75
79
  maxHeight: "var(--see-more-max-height, 15em)",
76
- "+ button > span": { transform: "rotateX(180deg)" },
77
- "div:last-of-type": { display: "none" }
80
+ "+ button > span": { transform: "rotateX(180deg)" }
78
81
  }
79
82
  };
80
83
  const onResize = (container, handler) => {
81
- const observer = new ResizeObserver(handler);
84
+ let scheduled = 0;
85
+ const observer = new ResizeObserver((entries) => {
86
+ if (scheduled) return;
87
+ scheduled = window.requestAnimationFrame(() => {
88
+ handler(entries);
89
+ setTimeout(() => {
90
+ scheduled = 0;
91
+ }, 60);
92
+ });
93
+ });
82
94
  observer.observe(container);
83
95
  return () => observer.disconnect();
84
96
  };
@@ -92,10 +104,13 @@ const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
92
104
  const containeRef = useRef();
93
105
  useEffect(() => {
94
106
  if (!containeRef.current) return;
95
- const wrapHieght = Number.parseInt(getComputedStyle(containeRef.current).fontSize, 10) * 3 || 36;
96
107
  return onResize(containeRef.current, () => {
97
- const scrollable = containeRef.current?.scrollHeight > wrapHieght;
98
- setStatus((current) => current === "no-expand" && scrollable ? "collapsed" : current !== "no-expand" && !scrollable ? "no-expand" : current);
108
+ if (!containeRef.current) return;
109
+ const { scrollHeight, clientHeight } = containeRef.current;
110
+ const fontSize = Number.parseFloat(window.getComputedStyle(containeRef.current).fontSize);
111
+ const scrollable = scrollHeight > clientHeight * 1.3;
112
+ const fit = fontSize * 3 > scrollHeight;
113
+ setStatus((current) => current === "no-expand" && scrollable ? "collapsed" : current !== "no-expand" && fit ? "no-expand" : current);
99
114
  setExpandedHeight(containeRef.current?.scrollHeight);
100
115
  });
101
116
  }, []);
@@ -247,18 +262,24 @@ const videoItemStyle = {
247
262
  "@media (min-width: 601px)": { "--description-display": "none" }
248
263
  };
249
264
  const infoStyle = {
250
- marginBottom: "0.5em",
251
265
  display: "flex",
252
266
  alignItems: "center",
253
267
  justifyContent: "space-between",
254
- "> div:first-of-type": { flex: "0 0 calc( 100% * 3 / 7 - 0.5em)" },
268
+ "> div:first-of-type": {
269
+ flex: "0 auto",
270
+ minWidth: "0"
271
+ },
255
272
  "> a": {
256
- flex: "0 0 calc( 100% * 4 / 7 - 0.5em)",
257
- overflow: "hidden",
258
- textOverflow: "ellipsis",
259
- whiteSpace: "nowrap"
273
+ display: "flex",
274
+ flexDirection: "column",
275
+ alignSelf: "stretch",
276
+ justifyContent: "center",
277
+ marginLeft: "0.75em",
278
+ height: "auto",
279
+ flex: "1"
260
280
  },
261
281
  "@media (min-width: 601px)": {
282
+ "--description-line-clamp": 3,
262
283
  "> div:first-of-type": {
263
284
  flex: "0 auto",
264
285
  minWidth: "0",
@@ -271,21 +292,34 @@ const infoStyle = {
271
292
  }
272
293
  }
273
294
  };
295
+ const titleStyle = {
296
+ display: "-webkit-box",
297
+ WebkitBoxOrient: "vertical",
298
+ WebkitLineClamp: "var(--description-line-clamp, 2)",
299
+ overflow: "hidden",
300
+ textOverflow: "ellipsis"
301
+ };
274
302
  const descriptionStyle = {
303
+ marginTop: "0.5rem",
275
304
  display: "var(--description-display, -webkit-box)",
276
305
  overflow: "hidden",
277
306
  WebkitBoxOrient: "vertical",
278
- WebkitLineClamp: 2,
307
+ WebkitLineClamp: "var(--description-line-clamp, 2)",
279
308
  color: "#ccc",
280
309
  textOverflow: "ellipsis",
281
- fontSize: "14px"
310
+ fontSize: "14px",
311
+ "+ div": {
312
+ marginTop: "0.25rem",
313
+ fontSize: "14px",
314
+ color: "#ccc"
315
+ }
282
316
  };
283
317
  const desktopDescriptionStyle = {
284
318
  display: "var(--desktop-description-display, -webkit-box)",
285
- marginTop: "0.75rem",
319
+ margin: "0.75rem 0",
286
320
  WebkitLineClamp: 3
287
321
  };
288
- const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, progress, topTags = [], bottomTags = [], slots = { Link: "a" }, onClickThumbnail, thumbnailChildren }) => /* @__PURE__ */ jsxs("div", {
322
+ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, secondaryText, progress, topTags = [], bottomTags = [], slots = { Link: "a" }, onClickThumbnail, thumbnailChildren }) => /* @__PURE__ */ jsxs("div", {
289
323
  css: [videoItemStyle, style],
290
324
  children: [/* @__PURE__ */ jsxs("div", {
291
325
  css: infoStyle,
@@ -300,10 +334,17 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
300
334
  children: thumbnailChildren
301
335
  }), /* @__PURE__ */ jsxs(slots.Link, {
302
336
  href,
303
- children: [data.title || data.display_text, /* @__PURE__ */ jsx("div", {
304
- css: [descriptionStyle, desktopDescriptionStyle],
305
- children: data.synopsis
306
- })]
337
+ children: [
338
+ /* @__PURE__ */ jsx("div", {
339
+ css: titleStyle,
340
+ children: data.title || data.display_text
341
+ }),
342
+ /* @__PURE__ */ jsx("div", {
343
+ css: [descriptionStyle, desktopDescriptionStyle],
344
+ children: data.synopsis
345
+ }),
346
+ secondaryText ? /* @__PURE__ */ jsx("div", { children: secondaryText }) : null
347
+ ]
307
348
  })]
308
349
  }), /* @__PURE__ */ jsx("div", {
309
350
  css: descriptionStyle,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kkcompany/app-ui",
3
- "version": "0.1.3",
3
+ "version": "0.1.5",
4
4
  "module": "dist/index.mjs",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.mts",