@kkcompany/app-ui 0.1.16 → 0.1.17
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.
- package/dist/index.cjs +65 -19
- package/dist/index.d.cts +17 -1
- package/dist/index.d.mts +18 -2
- package/dist/index.mjs +65 -20
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,55 @@
|
|
|
1
|
-
let __emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
|
|
2
1
|
let react = require("react");
|
|
2
|
+
let __emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
|
|
3
|
+
|
|
4
|
+
//#region src/HiddenToggle.tsx
|
|
5
|
+
const toggleStyle = {
|
|
6
|
+
"-webkit-tap-highlight-color": "transparent",
|
|
7
|
+
userSelect: "none",
|
|
8
|
+
"> span": {
|
|
9
|
+
margin: "0 0.5em",
|
|
10
|
+
transition: "opacity 0.2s ease"
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
const statusStyle = {};
|
|
14
|
+
const HiddenToggle = ({ defaultEnabled = false, children, onChange, ...rest }) => {
|
|
15
|
+
const [tapCount, setTapCount] = (0, react.useState)(() => defaultEnabled ? 7 : 0);
|
|
16
|
+
const resetTimer = (0, react.useRef)();
|
|
17
|
+
const onClick = (event) => {
|
|
18
|
+
clearTimeout(resetTimer.current);
|
|
19
|
+
setTapCount((current) => current + 1);
|
|
20
|
+
if (tapCount + 1 >= 7) onChange?.(event, { enabled: true });
|
|
21
|
+
else resetTimer.current = setTimeout(() => setTapCount(0), 7e3);
|
|
22
|
+
};
|
|
23
|
+
const onOptOut = (event) => {
|
|
24
|
+
event.stopPropagation();
|
|
25
|
+
setTapCount(0);
|
|
26
|
+
onChange?.(event, { enabled: false });
|
|
27
|
+
};
|
|
28
|
+
return /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
|
|
29
|
+
css: toggleStyle,
|
|
30
|
+
onClick,
|
|
31
|
+
...rest,
|
|
32
|
+
children: [
|
|
33
|
+
children,
|
|
34
|
+
tapCount >= 4 && tapCount < 7 && /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("span", {
|
|
35
|
+
style: { opacity: tapCount / 7 },
|
|
36
|
+
children: [7 - tapCount, " more tap(s) for feature toggle"]
|
|
37
|
+
}),
|
|
38
|
+
tapCount >= 7 && /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("span", {
|
|
39
|
+
css: statusStyle,
|
|
40
|
+
children: "feature toggle"
|
|
41
|
+
}),
|
|
42
|
+
tapCount >= 7 && /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("button", {
|
|
43
|
+
type: "button",
|
|
44
|
+
onClick: onOptOut,
|
|
45
|
+
children: "exit"
|
|
46
|
+
})
|
|
47
|
+
]
|
|
48
|
+
});
|
|
49
|
+
};
|
|
50
|
+
var HiddenToggle_default = HiddenToggle;
|
|
3
51
|
|
|
52
|
+
//#endregion
|
|
4
53
|
//#region src/Icon.tsx
|
|
5
54
|
/** @jsxImportSource @emotion/react */
|
|
6
55
|
const iconStyle = {
|
|
@@ -28,14 +77,18 @@ var see_more_default = "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdp
|
|
|
28
77
|
//#endregion
|
|
29
78
|
//#region src/SeeMore.tsx
|
|
30
79
|
const containerStyle = {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
80
|
+
"@media (max-width: 600px)": { textAlign: "center" },
|
|
81
|
+
"> div": {
|
|
82
|
+
position: "relative",
|
|
83
|
+
maxHeight: "2.7em",
|
|
84
|
+
overflow: "hidden",
|
|
85
|
+
display: "-webkit-box",
|
|
86
|
+
WebkitBoxOrient: "vertical",
|
|
87
|
+
textOverflow: "ellipsis",
|
|
88
|
+
textAlign: "left",
|
|
89
|
+
transition: "max-height 0.2s ease-out"
|
|
90
|
+
},
|
|
91
|
+
"> button": {
|
|
39
92
|
marginTop: "0.75em",
|
|
40
93
|
padding: "0",
|
|
41
94
|
color: "inherit",
|
|
@@ -45,10 +98,6 @@ const containerStyle = {
|
|
|
45
98
|
border: "none",
|
|
46
99
|
cursor: "pointer",
|
|
47
100
|
transition: "color 0.2s ease-out",
|
|
48
|
-
"@media (max-width: 600px)": {
|
|
49
|
-
width: "100%",
|
|
50
|
-
textAlign: "center"
|
|
51
|
-
},
|
|
52
101
|
"&:hover": { color: "#fff" },
|
|
53
102
|
"&:disabled": {
|
|
54
103
|
opacity: "0",
|
|
@@ -119,14 +168,10 @@ const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
|
|
|
119
168
|
}, []);
|
|
120
169
|
const toggle = () => setStatus((current) => current === "collapsed" ? "expanded" : "collapsing");
|
|
121
170
|
return /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
|
|
171
|
+
css: [containerStyle, { div: addonStyles[status] }],
|
|
122
172
|
...rest,
|
|
123
173
|
children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
|
|
124
|
-
css: [
|
|
125
|
-
expandedHeight && { "--see-more-max-height": `${expandedHeight}px` },
|
|
126
|
-
containerStyle,
|
|
127
|
-
addonStyles[status],
|
|
128
|
-
style
|
|
129
|
-
],
|
|
174
|
+
css: [expandedHeight && { "--see-more-max-height": `${expandedHeight}px` }, style],
|
|
130
175
|
ref: containeRef,
|
|
131
176
|
onTransitionEnd: () => setStatus((current) => current === "collapsing" ? "collapsed" : current),
|
|
132
177
|
children: [children, /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { css: maskStyle })]
|
|
@@ -409,6 +454,7 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
|
|
|
409
454
|
var VideoItem_default = VideoItem;
|
|
410
455
|
|
|
411
456
|
//#endregion
|
|
457
|
+
exports.HiddenToggle = HiddenToggle_default;
|
|
412
458
|
exports.Icon = Icon_default;
|
|
413
459
|
exports.SeeMore = SeeMore_default;
|
|
414
460
|
exports.VideoItem = VideoItem_default;
|
package/dist/index.d.cts
CHANGED
|
@@ -3,6 +3,22 @@ import { CSSObject } from "@emotion/react";
|
|
|
3
3
|
import { ElementType, MouseEventHandler, ReactElement, ReactNode } from "react";
|
|
4
4
|
import Link from "next/link";
|
|
5
5
|
|
|
6
|
+
//#region src/HiddenToggle.d.ts
|
|
7
|
+
/** @jsxImportSource @emotion/react */
|
|
8
|
+
/** biome-ignore-all lint/a11y/useKeyWithClickEvents: <explanation> */
|
|
9
|
+
/** biome-ignore-all lint/a11y/noStaticElementInteractions: <explanation> */
|
|
10
|
+
declare const HiddenToggle: ({
|
|
11
|
+
defaultEnabled,
|
|
12
|
+
children,
|
|
13
|
+
onChange,
|
|
14
|
+
...rest
|
|
15
|
+
}: {
|
|
16
|
+
[x: string]: any;
|
|
17
|
+
defaultEnabled?: boolean;
|
|
18
|
+
children: any;
|
|
19
|
+
onChange: any;
|
|
20
|
+
}) => _emotion_react_jsx_runtime0.JSX.Element;
|
|
21
|
+
//#endregion
|
|
6
22
|
//#region src/Icon.d.ts
|
|
7
23
|
declare const Icon: ({
|
|
8
24
|
style,
|
|
@@ -92,4 +108,4 @@ declare const VideoThumbnail: ({
|
|
|
92
108
|
onClick?: MouseEventHandler<HTMLAnchorElement>;
|
|
93
109
|
}) => _emotion_react_jsx_runtime0.JSX.Element;
|
|
94
110
|
//#endregion
|
|
95
|
-
export { Icon, SeeMore, VideoItem, VideoThumbnail };
|
|
111
|
+
export { HiddenToggle, Icon, SeeMore, VideoItem, VideoThumbnail };
|
package/dist/index.d.mts
CHANGED
|
@@ -1,8 +1,24 @@
|
|
|
1
|
-
import * as _emotion_react_jsx_runtime0 from "@emotion/react/jsx-runtime";
|
|
2
1
|
import { ElementType, MouseEventHandler, ReactElement, ReactNode } from "react";
|
|
2
|
+
import * as _emotion_react_jsx_runtime0 from "@emotion/react/jsx-runtime";
|
|
3
3
|
import { CSSObject } from "@emotion/react";
|
|
4
4
|
import Link from "next/link";
|
|
5
5
|
|
|
6
|
+
//#region src/HiddenToggle.d.ts
|
|
7
|
+
/** @jsxImportSource @emotion/react */
|
|
8
|
+
/** biome-ignore-all lint/a11y/useKeyWithClickEvents: <explanation> */
|
|
9
|
+
/** biome-ignore-all lint/a11y/noStaticElementInteractions: <explanation> */
|
|
10
|
+
declare const HiddenToggle: ({
|
|
11
|
+
defaultEnabled,
|
|
12
|
+
children,
|
|
13
|
+
onChange,
|
|
14
|
+
...rest
|
|
15
|
+
}: {
|
|
16
|
+
[x: string]: any;
|
|
17
|
+
defaultEnabled?: boolean;
|
|
18
|
+
children: any;
|
|
19
|
+
onChange: any;
|
|
20
|
+
}) => _emotion_react_jsx_runtime0.JSX.Element;
|
|
21
|
+
//#endregion
|
|
6
22
|
//#region src/Icon.d.ts
|
|
7
23
|
declare const Icon: ({
|
|
8
24
|
style,
|
|
@@ -92,4 +108,4 @@ declare const VideoThumbnail: ({
|
|
|
92
108
|
onClick?: MouseEventHandler<HTMLAnchorElement>;
|
|
93
109
|
}) => _emotion_react_jsx_runtime0.JSX.Element;
|
|
94
110
|
//#endregion
|
|
95
|
-
export { Icon, SeeMore, VideoItem, VideoThumbnail };
|
|
111
|
+
export { HiddenToggle, Icon, SeeMore, VideoItem, VideoThumbnail };
|
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,55 @@
|
|
|
1
|
-
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
|
|
2
1
|
import { useEffect, useRef, useState } from "react";
|
|
2
|
+
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
|
|
3
|
+
|
|
4
|
+
//#region src/HiddenToggle.tsx
|
|
5
|
+
const toggleStyle = {
|
|
6
|
+
"-webkit-tap-highlight-color": "transparent",
|
|
7
|
+
userSelect: "none",
|
|
8
|
+
"> span": {
|
|
9
|
+
margin: "0 0.5em",
|
|
10
|
+
transition: "opacity 0.2s ease"
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
const statusStyle = {};
|
|
14
|
+
const HiddenToggle = ({ defaultEnabled = false, children, onChange, ...rest }) => {
|
|
15
|
+
const [tapCount, setTapCount] = useState(() => defaultEnabled ? 7 : 0);
|
|
16
|
+
const resetTimer = useRef();
|
|
17
|
+
const onClick = (event) => {
|
|
18
|
+
clearTimeout(resetTimer.current);
|
|
19
|
+
setTapCount((current) => current + 1);
|
|
20
|
+
if (tapCount + 1 >= 7) onChange?.(event, { enabled: true });
|
|
21
|
+
else resetTimer.current = setTimeout(() => setTapCount(0), 7e3);
|
|
22
|
+
};
|
|
23
|
+
const onOptOut = (event) => {
|
|
24
|
+
event.stopPropagation();
|
|
25
|
+
setTapCount(0);
|
|
26
|
+
onChange?.(event, { enabled: false });
|
|
27
|
+
};
|
|
28
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
29
|
+
css: toggleStyle,
|
|
30
|
+
onClick,
|
|
31
|
+
...rest,
|
|
32
|
+
children: [
|
|
33
|
+
children,
|
|
34
|
+
tapCount >= 4 && tapCount < 7 && /* @__PURE__ */ jsxs("span", {
|
|
35
|
+
style: { opacity: tapCount / 7 },
|
|
36
|
+
children: [7 - tapCount, " more tap(s) for feature toggle"]
|
|
37
|
+
}),
|
|
38
|
+
tapCount >= 7 && /* @__PURE__ */ jsx("span", {
|
|
39
|
+
css: statusStyle,
|
|
40
|
+
children: "feature toggle"
|
|
41
|
+
}),
|
|
42
|
+
tapCount >= 7 && /* @__PURE__ */ jsx("button", {
|
|
43
|
+
type: "button",
|
|
44
|
+
onClick: onOptOut,
|
|
45
|
+
children: "exit"
|
|
46
|
+
})
|
|
47
|
+
]
|
|
48
|
+
});
|
|
49
|
+
};
|
|
50
|
+
var HiddenToggle_default = HiddenToggle;
|
|
3
51
|
|
|
52
|
+
//#endregion
|
|
4
53
|
//#region src/Icon.tsx
|
|
5
54
|
/** @jsxImportSource @emotion/react */
|
|
6
55
|
const iconStyle = {
|
|
@@ -28,14 +77,18 @@ var see_more_default = "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdp
|
|
|
28
77
|
//#endregion
|
|
29
78
|
//#region src/SeeMore.tsx
|
|
30
79
|
const containerStyle = {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
80
|
+
"@media (max-width: 600px)": { textAlign: "center" },
|
|
81
|
+
"> div": {
|
|
82
|
+
position: "relative",
|
|
83
|
+
maxHeight: "2.7em",
|
|
84
|
+
overflow: "hidden",
|
|
85
|
+
display: "-webkit-box",
|
|
86
|
+
WebkitBoxOrient: "vertical",
|
|
87
|
+
textOverflow: "ellipsis",
|
|
88
|
+
textAlign: "left",
|
|
89
|
+
transition: "max-height 0.2s ease-out"
|
|
90
|
+
},
|
|
91
|
+
"> button": {
|
|
39
92
|
marginTop: "0.75em",
|
|
40
93
|
padding: "0",
|
|
41
94
|
color: "inherit",
|
|
@@ -45,10 +98,6 @@ const containerStyle = {
|
|
|
45
98
|
border: "none",
|
|
46
99
|
cursor: "pointer",
|
|
47
100
|
transition: "color 0.2s ease-out",
|
|
48
|
-
"@media (max-width: 600px)": {
|
|
49
|
-
width: "100%",
|
|
50
|
-
textAlign: "center"
|
|
51
|
-
},
|
|
52
101
|
"&:hover": { color: "#fff" },
|
|
53
102
|
"&:disabled": {
|
|
54
103
|
opacity: "0",
|
|
@@ -119,14 +168,10 @@ const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
|
|
|
119
168
|
}, []);
|
|
120
169
|
const toggle = () => setStatus((current) => current === "collapsed" ? "expanded" : "collapsing");
|
|
121
170
|
return /* @__PURE__ */ jsxs("div", {
|
|
171
|
+
css: [containerStyle, { div: addonStyles[status] }],
|
|
122
172
|
...rest,
|
|
123
173
|
children: [/* @__PURE__ */ jsxs("div", {
|
|
124
|
-
css: [
|
|
125
|
-
expandedHeight && { "--see-more-max-height": `${expandedHeight}px` },
|
|
126
|
-
containerStyle,
|
|
127
|
-
addonStyles[status],
|
|
128
|
-
style
|
|
129
|
-
],
|
|
174
|
+
css: [expandedHeight && { "--see-more-max-height": `${expandedHeight}px` }, style],
|
|
130
175
|
ref: containeRef,
|
|
131
176
|
onTransitionEnd: () => setStatus((current) => current === "collapsing" ? "collapsed" : current),
|
|
132
177
|
children: [children, /* @__PURE__ */ jsx("div", { css: maskStyle })]
|
|
@@ -409,4 +454,4 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
|
|
|
409
454
|
var VideoItem_default = VideoItem;
|
|
410
455
|
|
|
411
456
|
//#endregion
|
|
412
|
-
export { Icon_default as Icon, SeeMore_default as SeeMore, VideoItem_default as VideoItem, VideoThumbnail_default as VideoThumbnail };
|
|
457
|
+
export { HiddenToggle_default as HiddenToggle, Icon_default as Icon, SeeMore_default as SeeMore, VideoItem_default as VideoItem, VideoThumbnail_default as VideoThumbnail };
|