@kkcompany/app-ui 0.1.3 → 0.1.4

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 +62 -22
  2. package/dist/index.d.cts +6 -4
  3. package/dist/index.d.mts +2 -0
  4. package/dist/index.mjs +62 -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,12 @@ 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
+ const { scrollHeight, clientHeight } = containeRef.current || {};
109
+ const fontSize = Number.parseFloat(window.getComputedStyle(containeRef.current).fontSize);
110
+ const scrollable = scrollHeight > clientHeight * 1.3;
111
+ const fit = fontSize * 3 > scrollHeight;
112
+ setStatus((current) => current === "no-expand" && scrollable ? "collapsed" : current !== "no-expand" && fit ? "no-expand" : current);
99
113
  setExpandedHeight(containeRef.current?.scrollHeight);
100
114
  });
101
115
  }, []);
@@ -247,18 +261,24 @@ const videoItemStyle = {
247
261
  "@media (min-width: 601px)": { "--description-display": "none" }
248
262
  };
249
263
  const infoStyle = {
250
- marginBottom: "0.5em",
251
264
  display: "flex",
252
265
  alignItems: "center",
253
266
  justifyContent: "space-between",
254
- "> div:first-of-type": { flex: "0 0 calc( 100% * 3 / 7 - 0.5em)" },
267
+ "> div:first-of-type": {
268
+ flex: "0 auto",
269
+ minWidth: "0"
270
+ },
255
271
  "> a": {
256
- flex: "0 0 calc( 100% * 4 / 7 - 0.5em)",
257
- overflow: "hidden",
258
- textOverflow: "ellipsis",
259
- whiteSpace: "nowrap"
272
+ display: "flex",
273
+ flexDirection: "column",
274
+ alignSelf: "stretch",
275
+ justifyContent: "center",
276
+ marginLeft: "0.75em",
277
+ height: "auto",
278
+ flex: "1"
260
279
  },
261
280
  "@media (min-width: 601px)": {
281
+ "--description-line-clamp": 3,
262
282
  "> div:first-of-type": {
263
283
  flex: "0 auto",
264
284
  minWidth: "0",
@@ -271,21 +291,34 @@ const infoStyle = {
271
291
  }
272
292
  }
273
293
  };
294
+ const titleStyle = {
295
+ display: "-webkit-box",
296
+ WebkitBoxOrient: "vertical",
297
+ WebkitLineClamp: "var(--description-line-clamp, 2)",
298
+ overflow: "hidden",
299
+ textOverflow: "ellipsis"
300
+ };
274
301
  const descriptionStyle = {
302
+ marginTop: "0.5rem",
275
303
  display: "var(--description-display, -webkit-box)",
276
304
  overflow: "hidden",
277
305
  WebkitBoxOrient: "vertical",
278
- WebkitLineClamp: 2,
306
+ WebkitLineClamp: "var(--description-line-clamp, 2)",
279
307
  color: "#ccc",
280
308
  textOverflow: "ellipsis",
281
- fontSize: "14px"
309
+ fontSize: "14px",
310
+ "+ div": {
311
+ marginTop: "0.25rem",
312
+ fontSize: "14px",
313
+ color: "#ccc"
314
+ }
282
315
  };
283
316
  const desktopDescriptionStyle = {
284
317
  display: "var(--desktop-description-display, -webkit-box)",
285
- marginTop: "0.75rem",
318
+ margin: "0.75rem 0",
286
319
  WebkitLineClamp: 3
287
320
  };
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", {
321
+ 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
322
  css: [videoItemStyle, style],
290
323
  children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
291
324
  css: infoStyle,
@@ -300,10 +333,17 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
300
333
  children: thumbnailChildren
301
334
  }), /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)(slots.Link, {
302
335
  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
- })]
336
+ children: [
337
+ /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
338
+ css: titleStyle,
339
+ children: data.title || data.display_text
340
+ }),
341
+ /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
342
+ css: [descriptionStyle, desktopDescriptionStyle],
343
+ children: data.synopsis
344
+ }),
345
+ secondaryText ? /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: secondaryText }) : null
346
+ ]
307
347
  })]
308
348
  }), /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
309
349
  css: descriptionStyle,
package/dist/index.d.cts 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 { CSSObject } from "@emotion/react";
3
3
  import { ElementType, MouseEventHandler, ReactElement, ReactNode } from "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.d.mts 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.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,12 @@ 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
+ const { scrollHeight, clientHeight } = containeRef.current || {};
109
+ const fontSize = Number.parseFloat(window.getComputedStyle(containeRef.current).fontSize);
110
+ const scrollable = scrollHeight > clientHeight * 1.3;
111
+ const fit = fontSize * 3 > scrollHeight;
112
+ setStatus((current) => current === "no-expand" && scrollable ? "collapsed" : current !== "no-expand" && fit ? "no-expand" : current);
99
113
  setExpandedHeight(containeRef.current?.scrollHeight);
100
114
  });
101
115
  }, []);
@@ -247,18 +261,24 @@ const videoItemStyle = {
247
261
  "@media (min-width: 601px)": { "--description-display": "none" }
248
262
  };
249
263
  const infoStyle = {
250
- marginBottom: "0.5em",
251
264
  display: "flex",
252
265
  alignItems: "center",
253
266
  justifyContent: "space-between",
254
- "> div:first-of-type": { flex: "0 0 calc( 100% * 3 / 7 - 0.5em)" },
267
+ "> div:first-of-type": {
268
+ flex: "0 auto",
269
+ minWidth: "0"
270
+ },
255
271
  "> a": {
256
- flex: "0 0 calc( 100% * 4 / 7 - 0.5em)",
257
- overflow: "hidden",
258
- textOverflow: "ellipsis",
259
- whiteSpace: "nowrap"
272
+ display: "flex",
273
+ flexDirection: "column",
274
+ alignSelf: "stretch",
275
+ justifyContent: "center",
276
+ marginLeft: "0.75em",
277
+ height: "auto",
278
+ flex: "1"
260
279
  },
261
280
  "@media (min-width: 601px)": {
281
+ "--description-line-clamp": 3,
262
282
  "> div:first-of-type": {
263
283
  flex: "0 auto",
264
284
  minWidth: "0",
@@ -271,21 +291,34 @@ const infoStyle = {
271
291
  }
272
292
  }
273
293
  };
294
+ const titleStyle = {
295
+ display: "-webkit-box",
296
+ WebkitBoxOrient: "vertical",
297
+ WebkitLineClamp: "var(--description-line-clamp, 2)",
298
+ overflow: "hidden",
299
+ textOverflow: "ellipsis"
300
+ };
274
301
  const descriptionStyle = {
302
+ marginTop: "0.5rem",
275
303
  display: "var(--description-display, -webkit-box)",
276
304
  overflow: "hidden",
277
305
  WebkitBoxOrient: "vertical",
278
- WebkitLineClamp: 2,
306
+ WebkitLineClamp: "var(--description-line-clamp, 2)",
279
307
  color: "#ccc",
280
308
  textOverflow: "ellipsis",
281
- fontSize: "14px"
309
+ fontSize: "14px",
310
+ "+ div": {
311
+ marginTop: "0.25rem",
312
+ fontSize: "14px",
313
+ color: "#ccc"
314
+ }
282
315
  };
283
316
  const desktopDescriptionStyle = {
284
317
  display: "var(--desktop-description-display, -webkit-box)",
285
- marginTop: "0.75rem",
318
+ margin: "0.75rem 0",
286
319
  WebkitLineClamp: 3
287
320
  };
288
- const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, progress, topTags = [], bottomTags = [], slots = { Link: "a" }, onClickThumbnail, thumbnailChildren }) => /* @__PURE__ */ jsxs("div", {
321
+ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, secondaryText, progress, topTags = [], bottomTags = [], slots = { Link: "a" }, onClickThumbnail, thumbnailChildren }) => /* @__PURE__ */ jsxs("div", {
289
322
  css: [videoItemStyle, style],
290
323
  children: [/* @__PURE__ */ jsxs("div", {
291
324
  css: infoStyle,
@@ -300,10 +333,17 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
300
333
  children: thumbnailChildren
301
334
  }), /* @__PURE__ */ jsxs(slots.Link, {
302
335
  href,
303
- children: [data.title || data.display_text, /* @__PURE__ */ jsx("div", {
304
- css: [descriptionStyle, desktopDescriptionStyle],
305
- children: data.synopsis
306
- })]
336
+ children: [
337
+ /* @__PURE__ */ jsx("div", {
338
+ css: titleStyle,
339
+ children: data.title || data.display_text
340
+ }),
341
+ /* @__PURE__ */ jsx("div", {
342
+ css: [descriptionStyle, desktopDescriptionStyle],
343
+ children: data.synopsis
344
+ }),
345
+ secondaryText ? /* @__PURE__ */ jsx("div", { children: secondaryText }) : null
346
+ ]
307
347
  })]
308
348
  }), /* @__PURE__ */ jsx("div", {
309
349
  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.4",
4
4
  "module": "dist/index.mjs",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.mts",