@tipp/ui 0.1.21 → 0.1.22
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/atoms/ellipsis-tooltip.cjs +129 -0
- package/dist/atoms/ellipsis-tooltip.cjs.map +1 -0
- package/dist/atoms/ellipsis-tooltip.d.cts +11 -0
- package/dist/atoms/ellipsis-tooltip.d.ts +11 -0
- package/dist/atoms/ellipsis-tooltip.js +10 -0
- package/dist/atoms/ellipsis-tooltip.js.map +1 -0
- package/dist/atoms/index.cjs +44 -0
- package/dist/atoms/index.cjs.map +1 -1
- package/dist/atoms/index.d.cts +1 -0
- package/dist/atoms/index.d.ts +1 -0
- package/dist/atoms/index.js +14 -10
- package/dist/chunk-2A2IJOVV.js +60 -0
- package/dist/chunk-2A2IJOVV.js.map +1 -0
- package/dist/chunk-2JZ3UQAX.js +48 -0
- package/dist/chunk-2JZ3UQAX.js.map +1 -0
- package/dist/chunk-2TGD62PR.js +59 -0
- package/dist/chunk-2TGD62PR.js.map +1 -0
- package/dist/chunk-3427FUJN.js +46 -0
- package/dist/chunk-3427FUJN.js.map +1 -0
- package/dist/chunk-34P2PUMC.js +60 -0
- package/dist/chunk-34P2PUMC.js.map +1 -0
- package/dist/chunk-3I5CDBFN.js +104 -0
- package/dist/chunk-3I5CDBFN.js.map +1 -0
- package/dist/chunk-3KIARYD6.js +47 -0
- package/dist/chunk-3KIARYD6.js.map +1 -0
- package/dist/chunk-4IKPNQV5.js +58 -0
- package/dist/chunk-4IKPNQV5.js.map +1 -0
- package/dist/chunk-4RIBUNMS.js +49 -0
- package/dist/chunk-4RIBUNMS.js.map +1 -0
- package/dist/chunk-4ZQHR3JI.js +47 -0
- package/dist/chunk-4ZQHR3JI.js.map +1 -0
- package/dist/chunk-6BXAZV7N.js +63 -0
- package/dist/chunk-6BXAZV7N.js.map +1 -0
- package/dist/chunk-6GHADQAU.js +59 -0
- package/dist/chunk-6GHADQAU.js.map +1 -0
- package/dist/chunk-6SGXBZAF.js +62 -0
- package/dist/chunk-6SGXBZAF.js.map +1 -0
- package/dist/chunk-6ZEM4FBF.js +64 -0
- package/dist/chunk-6ZEM4FBF.js.map +1 -0
- package/dist/chunk-754LMJ5L.js +48 -0
- package/dist/chunk-754LMJ5L.js.map +1 -0
- package/dist/chunk-7VCJMEPY.js +60 -0
- package/dist/chunk-7VCJMEPY.js.map +1 -0
- package/dist/chunk-AD4LGJER.js +60 -0
- package/dist/chunk-AD4LGJER.js.map +1 -0
- package/dist/chunk-AS6NXGBN.js +59 -0
- package/dist/chunk-AS6NXGBN.js.map +1 -0
- package/dist/chunk-BH2MBAAY.js +59 -0
- package/dist/chunk-BH2MBAAY.js.map +1 -0
- package/dist/chunk-C5QSBSVB.js +59 -0
- package/dist/chunk-C5QSBSVB.js.map +1 -0
- package/dist/chunk-C7BS7VPF.js +46 -0
- package/dist/chunk-C7BS7VPF.js.map +1 -0
- package/dist/chunk-CC3GT7LT.js +53 -0
- package/dist/chunk-CC3GT7LT.js.map +1 -0
- package/dist/chunk-CHHLIPDN.js +23 -0
- package/dist/chunk-CHHLIPDN.js.map +1 -0
- package/dist/chunk-CMPIGFPT.js +60 -0
- package/dist/chunk-CMPIGFPT.js.map +1 -0
- package/dist/chunk-CODQBUIC.js +59 -0
- package/dist/chunk-CODQBUIC.js.map +1 -0
- package/dist/chunk-CVOLVQKD.js +60 -0
- package/dist/chunk-CVOLVQKD.js.map +1 -0
- package/dist/chunk-CXFAL52D.js +60 -0
- package/dist/chunk-CXFAL52D.js.map +1 -0
- package/dist/chunk-E6EPYWFL.js +53 -0
- package/dist/chunk-E6EPYWFL.js.map +1 -0
- package/dist/chunk-EJWIO6NJ.js +104 -0
- package/dist/chunk-EJWIO6NJ.js.map +1 -0
- package/dist/chunk-EM57H7XC.js +48 -0
- package/dist/chunk-EM57H7XC.js.map +1 -0
- package/dist/chunk-FHXW7BLD.js +61 -0
- package/dist/chunk-FHXW7BLD.js.map +1 -0
- package/dist/chunk-FVSPOU5C.js +48 -0
- package/dist/chunk-FVSPOU5C.js.map +1 -0
- package/dist/chunk-GOKKEO23.js +53 -0
- package/dist/chunk-GOKKEO23.js.map +1 -0
- package/dist/chunk-HRQSHRGQ.js +59 -0
- package/dist/chunk-HRQSHRGQ.js.map +1 -0
- package/dist/chunk-HVMWNAXK.js +60 -0
- package/dist/chunk-HVMWNAXK.js.map +1 -0
- package/dist/chunk-I6D4HPRN.js +60 -0
- package/dist/chunk-I6D4HPRN.js.map +1 -0
- package/dist/chunk-I7YPDRXO.js +62 -0
- package/dist/chunk-I7YPDRXO.js.map +1 -0
- package/dist/chunk-JJ5IIAB2.js +119 -0
- package/dist/chunk-JJ5IIAB2.js.map +1 -0
- package/dist/chunk-KFAG5R3H.js +64 -0
- package/dist/chunk-KFAG5R3H.js.map +1 -0
- package/dist/chunk-KGN7AVRJ.js +45 -0
- package/dist/chunk-KGN7AVRJ.js.map +1 -0
- package/dist/chunk-KXJM7U4I.js +47 -0
- package/dist/chunk-KXJM7U4I.js.map +1 -0
- package/dist/chunk-LA6FLXGE.js +47 -0
- package/dist/chunk-LA6FLXGE.js.map +1 -0
- package/dist/chunk-MASTHXWN.js +1 -0
- package/dist/chunk-MASTHXWN.js.map +1 -0
- package/dist/chunk-NFGNQEVV.js +46 -0
- package/dist/chunk-NFGNQEVV.js.map +1 -0
- package/dist/chunk-O4GMX5TL.js +55 -0
- package/dist/chunk-O4GMX5TL.js.map +1 -0
- package/dist/chunk-OJ5XUBZN.js +46 -0
- package/dist/chunk-OJ5XUBZN.js.map +1 -0
- package/dist/chunk-PLG3AXHM.js +59 -0
- package/dist/chunk-PLG3AXHM.js.map +1 -0
- package/dist/chunk-PQBRLX37.js +48 -0
- package/dist/chunk-PQBRLX37.js.map +1 -0
- package/dist/chunk-QIKFIRGO.js +59 -0
- package/dist/chunk-QIKFIRGO.js.map +1 -0
- package/dist/chunk-RAJAKQXU.js +59 -0
- package/dist/chunk-RAJAKQXU.js.map +1 -0
- package/dist/chunk-RNB2T5NJ.js +48 -0
- package/dist/chunk-RNB2T5NJ.js.map +1 -0
- package/dist/chunk-TBXRPM4O.js +59 -0
- package/dist/chunk-TBXRPM4O.js.map +1 -0
- package/dist/chunk-TJGELI4L.js +53 -0
- package/dist/chunk-TJGELI4L.js.map +1 -0
- package/dist/chunk-TVJ4Z7MD.js +46 -0
- package/dist/chunk-TVJ4Z7MD.js.map +1 -0
- package/dist/chunk-UCEASXHW.js +47 -0
- package/dist/chunk-UCEASXHW.js.map +1 -0
- package/dist/chunk-UGSJR77F.js +48 -0
- package/dist/chunk-UGSJR77F.js.map +1 -0
- package/dist/chunk-UQPA2QGC.js +45 -0
- package/dist/chunk-UQPA2QGC.js.map +1 -0
- package/dist/chunk-V2AYMNSS.js +46 -0
- package/dist/chunk-V2AYMNSS.js.map +1 -0
- package/dist/chunk-VC2TT56B.js +46 -0
- package/dist/chunk-VC2TT56B.js.map +1 -0
- package/dist/chunk-VCOQG6JF.js +119 -0
- package/dist/chunk-VCOQG6JF.js.map +1 -0
- package/dist/chunk-VOR32EFU.js +59 -0
- package/dist/chunk-VOR32EFU.js.map +1 -0
- package/dist/chunk-W6Z2XJJ2.js +45 -0
- package/dist/chunk-W6Z2XJJ2.js.map +1 -0
- package/dist/chunk-WG7AQQRT.js +59 -0
- package/dist/chunk-WG7AQQRT.js.map +1 -0
- package/dist/chunk-WZZEI2W4.js +59 -0
- package/dist/chunk-WZZEI2W4.js.map +1 -0
- package/dist/chunk-XDCANCKF.js +59 -0
- package/dist/chunk-XDCANCKF.js.map +1 -0
- package/dist/chunk-XZN2SS2K.js +119 -0
- package/dist/chunk-XZN2SS2K.js.map +1 -0
- package/dist/chunk-YGS4JU4E.js +60 -0
- package/dist/chunk-YGS4JU4E.js.map +1 -0
- package/dist/chunk-YKEXHUPR.js +48 -0
- package/dist/chunk-YKEXHUPR.js.map +1 -0
- package/dist/index.cjs +79 -35
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +20 -16
- package/dist/molecules/expand-table/index.cjs +37 -33
- package/dist/molecules/expand-table/index.cjs.map +1 -1
- package/dist/molecules/expand-table/index.js +5 -4
- package/dist/molecules/expand-table/row.cjs +13 -9
- package/dist/molecules/expand-table/row.cjs.map +1 -1
- package/dist/molecules/expand-table/row.js +5 -4
- package/dist/molecules/index.cjs +37 -33
- package/dist/molecules/index.cjs.map +1 -1
- package/dist/molecules/index.js +5 -4
- package/package.json +1 -1
- package/src/atoms/ellipsis-tooltip.tsx +57 -0
- package/src/atoms/index.ts +2 -0
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Tooltip
|
|
3
|
+
} from "./chunk-ACVANQJ4.js";
|
|
4
|
+
import {
|
|
5
|
+
Typo
|
|
6
|
+
} from "./chunk-O3XTRD7R.js";
|
|
7
|
+
import {
|
|
8
|
+
__objRest,
|
|
9
|
+
__spreadProps,
|
|
10
|
+
__spreadValues
|
|
11
|
+
} from "./chunk-N552FDTV.js";
|
|
12
|
+
|
|
13
|
+
// src/atoms/ellipsis-tooltip.tsx
|
|
14
|
+
import { useEffect, useRef, useState } from "react";
|
|
15
|
+
import { jsx } from "react/jsx-runtime";
|
|
16
|
+
function EllipsisTooltip(props) {
|
|
17
|
+
const _a = props, { children, style, lineClamp = 2 } = _a, rest = __objRest(_a, ["children", "style", "lineClamp"]);
|
|
18
|
+
const ref = useRef(null);
|
|
19
|
+
const [tooltipDisplay, setTooltipDisplay] = useState(
|
|
20
|
+
"none"
|
|
21
|
+
);
|
|
22
|
+
useEffect(() => {
|
|
23
|
+
var _a2;
|
|
24
|
+
const mouseOver = () => {
|
|
25
|
+
if (ref.current) {
|
|
26
|
+
const typo = ref.current;
|
|
27
|
+
if (typo.scrollWidth > typo.clientWidth) {
|
|
28
|
+
setTooltipDisplay("block");
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
const mouseOut = () => {
|
|
33
|
+
setTooltipDisplay("none");
|
|
34
|
+
};
|
|
35
|
+
(_a2 = ref.current) == null ? void 0 : _a2.addEventListener("mouseenter", () => {
|
|
36
|
+
});
|
|
37
|
+
}, [ref]);
|
|
38
|
+
return /* @__PURE__ */ jsx(Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ jsx(
|
|
39
|
+
Typo,
|
|
40
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
41
|
+
ref,
|
|
42
|
+
style: __spreadValues({
|
|
43
|
+
width: "100%",
|
|
44
|
+
textOverflow: "ellipsis",
|
|
45
|
+
overflow: "hidden",
|
|
46
|
+
WebkitLineClamp: lineClamp,
|
|
47
|
+
display: "-webkit-box",
|
|
48
|
+
WebkitBoxOrient: "vertical",
|
|
49
|
+
wordBreak: "break-word"
|
|
50
|
+
}, style),
|
|
51
|
+
children
|
|
52
|
+
})
|
|
53
|
+
) });
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
export {
|
|
57
|
+
EllipsisTooltip
|
|
58
|
+
};
|
|
59
|
+
//# sourceMappingURL=chunk-TBXRPM4O.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/atoms/ellipsis-tooltip.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { Tooltip } from './tooltip';\nimport { Typo, type TypoProps } from './typo';\n\nexport type EllipsisTooltipProps = TypoProps & {\n lineClamp?: number;\n};\n\nexport function EllipsisTooltip(props: EllipsisTooltipProps): React.ReactNode {\n const { children, style, lineClamp = 2, ...rest } = props;\n const ref = useRef<HTMLSpanElement>(null);\n \n const [tooltipDisplay, setTooltipDisplay] = useState<'none' | 'block'>(\n 'none'\n );\n\n useEffect(() => {\n const mouseOver = ()=>{\n if (ref.current) {\n const typo = ref.current;\n if (typo.scrollWidth > typo.clientWidth) {\n setTooltipDisplay('block');\n } \n }\n }\n\n const mouseOut = ()=>{\n setTooltipDisplay('none');\n }\n\n ref.current?.addEventListener(('mouseenter'),()=>{});\n }, [ref]);\n\n return (\n <Tooltip content={children} style={{ display: tooltipDisplay }}>\n <Typo\n {...rest}\n ref={ref}\n style={{\n width: '100%',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n WebkitLineClamp: lineClamp,\n\n display:'-webkit-box',\n WebkitBoxOrient: 'vertical',\n wordBreak: 'break-word',\n ...style,\n }}\n >\n {children}\n </Typo>\n </Tooltip>\n );\n} "],"mappings":";;;;;;;;;;;;;AAAA,SAA4B,WAAW,QAAQ,gBAAgB;AAmCzD;AA3BC,SAAS,gBAAgB,OAA8C;AAC5E,QAAoD,YAA5C,YAAU,OAAO,YAAY,EATvC,IASsD,IAAT,iBAAS,IAAT,CAAnC,YAAU,SAAO;AACzB,QAAM,MAAM,OAAwB,IAAI;AAExC,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EACF;AAEA,YAAU,MAAM;AAhBlB,QAAAA;AAiBI,UAAM,YAAY,MAAI;AACpB,UAAI,IAAI,SAAS;AACf,cAAM,OAAO,IAAI;AACjB,YAAI,KAAK,cAAc,KAAK,aAAa;AACvC,4BAAkB,OAAO;AAAA,QAC3B;AAAA,MACF;AAAA,IACF;AAEA,UAAM,WAAW,MAAI;AACnB,wBAAkB,MAAM;AAAA,IAC1B;AAED,KAAAA,MAAA,IAAI,YAAJ,gBAAAA,IAAa,iBAAkB,cAAc,MAAI;AAAA,IAAC;AAAA,EACnD,GAAG,CAAC,GAAG,CAAC;AAER,SACE,oBAAC,WAAQ,SAAS,UAAU,OAAO,EAAE,SAAS,eAAe,GAC3D;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC;AAAA,MACA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,UAAU;AAAA,QACV,iBAAiB;AAAA,QAEjB,SAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,WAAW;AAAA,SACR;AAAA,MAGJ;AAAA;AAAA,EACH,GACF;AAEJ;","names":["_a"]}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Tooltip
|
|
3
|
+
} from "./chunk-ACVANQJ4.js";
|
|
4
|
+
import {
|
|
5
|
+
Typo
|
|
6
|
+
} from "./chunk-O3XTRD7R.js";
|
|
7
|
+
import {
|
|
8
|
+
__objRest,
|
|
9
|
+
__spreadProps,
|
|
10
|
+
__spreadValues
|
|
11
|
+
} from "./chunk-N552FDTV.js";
|
|
12
|
+
|
|
13
|
+
// src/atoms/ellipsis-tooltip.tsx
|
|
14
|
+
import { forwardRef, useEffect, useRef, useState } from "react";
|
|
15
|
+
import { jsx } from "react/jsx-runtime";
|
|
16
|
+
var EllipsisTooltip = forwardRef((props, maybeRef) => {
|
|
17
|
+
const _a = props, { children, style } = _a, rest = __objRest(_a, ["children", "style"]);
|
|
18
|
+
const ref = useRef(null);
|
|
19
|
+
const typoRef = maybeRef || ref;
|
|
20
|
+
const [tooltipDisplay, setTooltipDisplay] = useState(
|
|
21
|
+
"none"
|
|
22
|
+
);
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
if (typoRef.current) {
|
|
25
|
+
const typo = typoRef.current;
|
|
26
|
+
if (typo.scrollWidth > typo.clientWidth) {
|
|
27
|
+
setTooltipDisplay("block");
|
|
28
|
+
} else {
|
|
29
|
+
setTooltipDisplay("none");
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}, []);
|
|
33
|
+
return /* @__PURE__ */ jsx(Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ jsx(
|
|
34
|
+
Typo,
|
|
35
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
36
|
+
ref: typoRef,
|
|
37
|
+
style: __spreadValues({
|
|
38
|
+
width: "100%",
|
|
39
|
+
textOverflow: "ellipsis",
|
|
40
|
+
overflow: "hidden",
|
|
41
|
+
wordBreak: "break-word",
|
|
42
|
+
WebkitLineClamp: 2
|
|
43
|
+
}, style),
|
|
44
|
+
children
|
|
45
|
+
})
|
|
46
|
+
) });
|
|
47
|
+
});
|
|
48
|
+
EllipsisTooltip.displayName = "EllipsisTooltip";
|
|
49
|
+
|
|
50
|
+
export {
|
|
51
|
+
EllipsisTooltip
|
|
52
|
+
};
|
|
53
|
+
//# sourceMappingURL=chunk-TJGELI4L.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/atoms/ellipsis-tooltip.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { Tooltip } from './tooltip';\nimport { Typo, type TypoProps } from './typo';\n\nexport type EllipsisTooltipProps = TypoProps & {\n lineClamp?: number;\n};\n\nexport const EllipsisTooltip = forwardRef<\n HTMLSpanElement,\n EllipsisTooltipProps\n>((props: EllipsisTooltipProps, maybeRef): React.ReactNode => {\n const { children, style, ...rest } = props;\n const ref = useRef<HTMLSpanElement>(null);\n const typoRef = maybeRef || ref;\n const [tooltipDisplay, setTooltipDisplay] = useState<'none' | 'block'>(\n 'none'\n );\n\n useEffect(() => {\n if (typoRef.current) {\n const typo = typoRef.current;\n if (typo.scrollWidth > typo.clientWidth) {\n setTooltipDisplay('block');\n } else {\n setTooltipDisplay('none');\n }\n }\n }, []);\n\n return (\n <Tooltip content={children} style={{ display: tooltipDisplay }}>\n <Typo\n {...rest}\n ref={typoRef}\n style={{\n width: '100%',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n wordBreak: 'break-word',\n WebkitLineClamp: 2,\n ...style,\n }}\n >\n {children}\n </Typo>\n </Tooltip>\n );\n});\n\nEllipsisTooltip.displayName = 'EllipsisTooltip';\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAgB,YAAY,WAAW,QAAQ,gBAAgB;AAgCzD;AAxBC,IAAM,kBAAkB,WAG7B,CAAC,OAA6B,aAA8B;AAC5D,QAAqC,YAA7B,YAAU,MAZpB,IAYuC,IAAT,iBAAS,IAAT,CAApB,YAAU;AAClB,QAAM,MAAM,OAAwB,IAAI;AACxC,QAAM,UAAU,YAAY;AAC5B,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EACF;AAEA,YAAU,MAAM;AACd,QAAI,QAAQ,SAAS;AACnB,YAAM,OAAO,QAAQ;AACrB,UAAI,KAAK,cAAc,KAAK,aAAa;AACvC,0BAAkB,OAAO;AAAA,MAC3B,OAAO;AACL,0BAAkB,MAAM;AAAA,MAC1B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,WAAQ,SAAS,UAAU,OAAO,EAAE,SAAS,eAAe,GAC3D;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,KAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,UAAU;AAAA,QACV,WAAW;AAAA,QACX,iBAAiB;AAAA,SACd;AAAA,MAGJ;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAED,gBAAgB,cAAc;","names":[]}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Tooltip
|
|
3
|
+
} from "./chunk-ACVANQJ4.js";
|
|
4
|
+
import {
|
|
5
|
+
Typo
|
|
6
|
+
} from "./chunk-O3XTRD7R.js";
|
|
7
|
+
import {
|
|
8
|
+
__objRest,
|
|
9
|
+
__spreadProps,
|
|
10
|
+
__spreadValues
|
|
11
|
+
} from "./chunk-N552FDTV.js";
|
|
12
|
+
|
|
13
|
+
// src/atoms/ellipsis-tooltip.tsx
|
|
14
|
+
import { forwardRef, useEffect, useRef, useState } from "react";
|
|
15
|
+
import { jsx } from "react/jsx-runtime";
|
|
16
|
+
var EllipsisTooltip = forwardRef((props, maybeRef) => {
|
|
17
|
+
const _a = props, { children, style, lineClamp } = _a, rest = __objRest(_a, ["children", "style", "lineClamp"]);
|
|
18
|
+
const ref = useRef(null);
|
|
19
|
+
const typoRef = maybeRef || ref;
|
|
20
|
+
const [tooltipDisplay, setTooltipDisplay] = useState(
|
|
21
|
+
"none"
|
|
22
|
+
);
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
}, []);
|
|
25
|
+
return /* @__PURE__ */ jsx(Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ jsx(
|
|
26
|
+
Typo,
|
|
27
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
28
|
+
ref: typoRef,
|
|
29
|
+
style: __spreadValues({
|
|
30
|
+
width: "100%",
|
|
31
|
+
textOverflow: "ellipsis",
|
|
32
|
+
overflow: "hidden",
|
|
33
|
+
wordBreak: "break-word",
|
|
34
|
+
WebkitLineClamp: lineClamp,
|
|
35
|
+
WebkitBoxOrient: "vertical"
|
|
36
|
+
}, style),
|
|
37
|
+
children
|
|
38
|
+
})
|
|
39
|
+
) });
|
|
40
|
+
});
|
|
41
|
+
EllipsisTooltip.displayName = "EllipsisTooltip";
|
|
42
|
+
|
|
43
|
+
export {
|
|
44
|
+
EllipsisTooltip
|
|
45
|
+
};
|
|
46
|
+
//# sourceMappingURL=chunk-TVJ4Z7MD.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/atoms/ellipsis-tooltip.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { Tooltip } from './tooltip';\nimport { Typo, type TypoProps } from './typo';\n\nexport type EllipsisTooltipProps = TypoProps & {\n lineClamp?: number;\n};\n\nexport const EllipsisTooltip = forwardRef<\n HTMLSpanElement,\n EllipsisTooltipProps\n>((props: EllipsisTooltipProps, maybeRef): React.ReactNode => {\n const { children, style, lineClamp, ...rest } = props;\n const ref = useRef<HTMLSpanElement>(null);\n const typoRef = maybeRef || ref;\n const [tooltipDisplay, setTooltipDisplay] = useState<'none' | 'block'>(\n 'none'\n );\n\n useEffect(() => {\n // if (maybeRef) {\n // const typo = typoRef;\n // if (typo.scrollWidth > typo.clientWidth) {\n // setTooltipDisplay('block');\n // } else {\n // setTooltipDisplay('none');\n // }\n // }\n }, []);\n\n return (\n <Tooltip content={children} style={{ display: tooltipDisplay }}>\n <Typo\n {...rest}\n ref={typoRef}\n style={{\n width: '100%',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n wordBreak: 'break-word',\n WebkitLineClamp: lineClamp,\n WebkitBoxOrient: 'vertical',\n ...style,\n }}\n >\n {children}\n </Typo>\n </Tooltip>\n );\n});\n\nEllipsisTooltip.displayName = 'EllipsisTooltip';\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAgB,YAAY,WAAW,QAAQ,gBAAgB;AAgCzD;AAxBC,IAAM,kBAAkB,WAG7B,CAAC,OAA6B,aAA8B;AAC5D,QAAgD,YAAxC,YAAU,OAAO,UAZ3B,IAYkD,IAAT,iBAAS,IAAT,CAA/B,YAAU,SAAO;AACzB,QAAM,MAAM,OAAwB,IAAI;AACxC,QAAM,UAAU,YAAY;AAC5B,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EACF;AAEA,YAAU,MAAM;AAAA,EAShB,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,WAAQ,SAAS,UAAU,OAAO,EAAE,SAAS,eAAe,GAC3D;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,KAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,UAAU;AAAA,QACV,WAAW;AAAA,QACX,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,SACd;AAAA,MAGJ;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAED,gBAAgB,cAAc;","names":[]}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Tooltip
|
|
3
|
+
} from "./chunk-ACVANQJ4.js";
|
|
4
|
+
import {
|
|
5
|
+
Typo
|
|
6
|
+
} from "./chunk-O3XTRD7R.js";
|
|
7
|
+
import {
|
|
8
|
+
__objRest,
|
|
9
|
+
__spreadProps,
|
|
10
|
+
__spreadValues
|
|
11
|
+
} from "./chunk-N552FDTV.js";
|
|
12
|
+
|
|
13
|
+
// src/atoms/ellipsis-tooltip.tsx
|
|
14
|
+
import { forwardRef, useEffect, useRef, useState } from "react";
|
|
15
|
+
import { jsx } from "react/jsx-runtime";
|
|
16
|
+
var EllipsisTooltip = forwardRef((props, maybeRef) => {
|
|
17
|
+
const _a = props, { children, style, lineClamp = 2 } = _a, rest = __objRest(_a, ["children", "style", "lineClamp"]);
|
|
18
|
+
const ref = useRef(null);
|
|
19
|
+
const typoRef = maybeRef || ref;
|
|
20
|
+
const [tooltipDisplay, setTooltipDisplay] = useState(
|
|
21
|
+
"none"
|
|
22
|
+
);
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
}, []);
|
|
25
|
+
return /* @__PURE__ */ jsx(Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ jsx(
|
|
26
|
+
Typo,
|
|
27
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
28
|
+
ref: typoRef,
|
|
29
|
+
style: __spreadValues({
|
|
30
|
+
width: "100%",
|
|
31
|
+
textOverflow: "ellipsis",
|
|
32
|
+
overflow: "hidden",
|
|
33
|
+
WebkitLineClamp: lineClamp,
|
|
34
|
+
display: "-webkit-box",
|
|
35
|
+
WebkitBoxOrient: "vertical",
|
|
36
|
+
wordBreak: "break-word"
|
|
37
|
+
}, style),
|
|
38
|
+
children
|
|
39
|
+
})
|
|
40
|
+
) });
|
|
41
|
+
});
|
|
42
|
+
EllipsisTooltip.displayName = "EllipsisTooltip";
|
|
43
|
+
|
|
44
|
+
export {
|
|
45
|
+
EllipsisTooltip
|
|
46
|
+
};
|
|
47
|
+
//# sourceMappingURL=chunk-UCEASXHW.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/atoms/ellipsis-tooltip.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { Tooltip } from './tooltip';\nimport { Typo, type TypoProps } from './typo';\n\nexport type EllipsisTooltipProps = TypoProps & {\n lineClamp?: number;\n};\n\nexport const EllipsisTooltip = forwardRef<\n HTMLSpanElement,\n EllipsisTooltipProps\n>((props: EllipsisTooltipProps, maybeRef): React.ReactNode => {\n const { children, style, lineClamp = 2, ...rest } = props;\n const ref = useRef<HTMLSpanElement>(null);\n const typoRef = maybeRef || ref;\n const [tooltipDisplay, setTooltipDisplay] = useState<'none' | 'block'>(\n 'none'\n );\n\n useEffect(() => {\n // if (maybeRef) {\n // const typo = typoRef;\n // if (typo.scrollWidth > typo.clientWidth) {\n // setTooltipDisplay('block');\n // } else {\n // setTooltipDisplay('none');\n // }\n // }\n }, []);\n\n return (\n <Tooltip content={children} style={{ display: tooltipDisplay }}>\n <Typo\n {...rest}\n ref={typoRef}\n style={{\n width: '100%',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n WebkitLineClamp: lineClamp,\n\n display:'-webkit-box',\n\n WebkitBoxOrient: 'vertical',\n wordBreak: 'break-word',\n ...style,\n }}\n >\n {children}\n </Typo>\n </Tooltip>\n );\n});\n\nEllipsisTooltip.displayName = 'EllipsisTooltip';\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAgB,YAAY,WAAW,QAAQ,gBAAgB;AAgCzD;AAxBC,IAAM,kBAAkB,WAG7B,CAAC,OAA6B,aAA8B;AAC5D,QAAoD,YAA5C,YAAU,OAAO,YAAY,EAZvC,IAYsD,IAAT,iBAAS,IAAT,CAAnC,YAAU,SAAO;AACzB,QAAM,MAAM,OAAwB,IAAI;AACxC,QAAM,UAAU,YAAY;AAC5B,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EACF;AAEA,YAAU,MAAM;AAAA,EAShB,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,WAAQ,SAAS,UAAU,OAAO,EAAE,SAAS,eAAe,GAC3D;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,KAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,UAAU;AAAA,QACV,iBAAiB;AAAA,QAEjB,SAAQ;AAAA,QAER,iBAAiB;AAAA,QACjB,WAAW;AAAA,SACR;AAAA,MAGJ;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAED,gBAAgB,cAAc;","names":[]}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Tooltip
|
|
3
|
+
} from "./chunk-ACVANQJ4.js";
|
|
4
|
+
import {
|
|
5
|
+
Typo
|
|
6
|
+
} from "./chunk-O3XTRD7R.js";
|
|
7
|
+
import {
|
|
8
|
+
__objRest,
|
|
9
|
+
__spreadProps,
|
|
10
|
+
__spreadValues
|
|
11
|
+
} from "./chunk-N552FDTV.js";
|
|
12
|
+
|
|
13
|
+
// src/atoms/ellipsis-tooltip.tsx
|
|
14
|
+
import { forwardRef, useEffect, useRef, useState } from "react";
|
|
15
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
16
|
+
var EllipsisTooltip = forwardRef((props, maybeRef) => {
|
|
17
|
+
const _a = props, { children, style, lineClamp } = _a, rest = __objRest(_a, ["children", "style", "lineClamp"]);
|
|
18
|
+
const ref = useRef(null);
|
|
19
|
+
const typoRef = maybeRef || ref;
|
|
20
|
+
const [tooltipDisplay, setTooltipDisplay] = useState(
|
|
21
|
+
"none"
|
|
22
|
+
);
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
}, []);
|
|
25
|
+
return /* @__PURE__ */ jsx(Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ jsxs(
|
|
26
|
+
Typo,
|
|
27
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
28
|
+
ref: typoRef,
|
|
29
|
+
style: __spreadValues({
|
|
30
|
+
width: "100%",
|
|
31
|
+
textOverflow: "ellipsis",
|
|
32
|
+
overflow: "hidden",
|
|
33
|
+
wordBreak: "break-word",
|
|
34
|
+
WebkitLineClamp: lineClamp
|
|
35
|
+
}, style),
|
|
36
|
+
children: [
|
|
37
|
+
children,
|
|
38
|
+
"\uC544\uC544\uC544\uC559 \uC65C\uC774\uB7EC\uC2DC\uB294\uAC70\uC5D0\uC694"
|
|
39
|
+
]
|
|
40
|
+
})
|
|
41
|
+
) });
|
|
42
|
+
});
|
|
43
|
+
EllipsisTooltip.displayName = "EllipsisTooltip";
|
|
44
|
+
|
|
45
|
+
export {
|
|
46
|
+
EllipsisTooltip
|
|
47
|
+
};
|
|
48
|
+
//# sourceMappingURL=chunk-UGSJR77F.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/atoms/ellipsis-tooltip.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { Tooltip } from './tooltip';\nimport { Typo, type TypoProps } from './typo';\n\nexport type EllipsisTooltipProps = TypoProps & {\n lineClamp?: number;\n};\n\nexport const EllipsisTooltip = forwardRef<\n HTMLSpanElement,\n EllipsisTooltipProps\n>((props: EllipsisTooltipProps, maybeRef): React.ReactNode => {\n const { children, style, lineClamp, ...rest } = props;\n const ref = useRef<HTMLSpanElement>(null);\n const typoRef = maybeRef || ref;\n const [tooltipDisplay, setTooltipDisplay] = useState<'none' | 'block'>(\n 'none'\n );\n\n useEffect(() => {\n // if (maybeRef) {\n // const typo = typoRef;\n // if (typo.scrollWidth > typo.clientWidth) {\n // setTooltipDisplay('block');\n // } else {\n // setTooltipDisplay('none');\n // }\n // }\n }, []);\n\n return (\n <Tooltip content={children} style={{ display: tooltipDisplay }}>\n <Typo\n {...rest}\n ref={typoRef}\n style={{\n width: '100%',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n wordBreak: 'break-word',\n WebkitLineClamp: lineClamp,\n ...style,\n }}\n >\n {children}\n 아아아앙 왜이러시는거에요\n </Typo>\n </Tooltip>\n );\n});\n\nEllipsisTooltip.displayName = 'EllipsisTooltip';\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAgB,YAAY,WAAW,QAAQ,gBAAgB;AA+B3D,cACE,YADF;AAvBG,IAAM,kBAAkB,WAG7B,CAAC,OAA6B,aAA8B;AAC5D,QAAgD,YAAxC,YAAU,OAAO,UAZ3B,IAYkD,IAAT,iBAAS,IAAT,CAA/B,YAAU,SAAO;AACzB,QAAM,MAAM,OAAwB,IAAI;AACxC,QAAM,UAAU,YAAY;AAC5B,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EACF;AAEA,YAAU,MAAM;AAAA,EAShB,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,WAAQ,SAAS,UAAU,OAAO,EAAE,SAAS,eAAe,GAC3D;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,KAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,UAAU;AAAA,QACV,WAAW;AAAA,QACX,iBAAiB;AAAA,SACd;AAAA,MAGJ;AAAA;AAAA,QAAS;AAAA;AAAA;AAAA,EAEZ,GACF;AAEJ,CAAC;AAED,gBAAgB,cAAc;","names":[]}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Tooltip
|
|
3
|
+
} from "./chunk-ACVANQJ4.js";
|
|
4
|
+
import {
|
|
5
|
+
Typo
|
|
6
|
+
} from "./chunk-O3XTRD7R.js";
|
|
7
|
+
import {
|
|
8
|
+
__objRest,
|
|
9
|
+
__spreadProps,
|
|
10
|
+
__spreadValues
|
|
11
|
+
} from "./chunk-N552FDTV.js";
|
|
12
|
+
|
|
13
|
+
// src/atoms/ellipsis-tooltip.tsx
|
|
14
|
+
import { forwardRef, useEffect, useRef, useState } from "react";
|
|
15
|
+
import { jsx } from "react/jsx-runtime";
|
|
16
|
+
var EllipsisTooltip = forwardRef((props, maybeRef) => {
|
|
17
|
+
const _a = props, { children, style } = _a, rest = __objRest(_a, ["children", "style"]);
|
|
18
|
+
const ref = useRef(null);
|
|
19
|
+
const typoRef = maybeRef || ref;
|
|
20
|
+
const [tooltipDisplay, setTooltipDisplay] = useState(
|
|
21
|
+
"none"
|
|
22
|
+
);
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
}, []);
|
|
25
|
+
return /* @__PURE__ */ jsx(Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ jsx(
|
|
26
|
+
Typo,
|
|
27
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
28
|
+
ref: typoRef,
|
|
29
|
+
style: __spreadValues({
|
|
30
|
+
width: "100%",
|
|
31
|
+
textOverflow: "ellipsis",
|
|
32
|
+
overflow: "hidden",
|
|
33
|
+
wordBreak: "break-word",
|
|
34
|
+
WebkitLineClamp: 2
|
|
35
|
+
}, style),
|
|
36
|
+
children
|
|
37
|
+
})
|
|
38
|
+
) });
|
|
39
|
+
});
|
|
40
|
+
EllipsisTooltip.displayName = "EllipsisTooltip";
|
|
41
|
+
|
|
42
|
+
export {
|
|
43
|
+
EllipsisTooltip
|
|
44
|
+
};
|
|
45
|
+
//# sourceMappingURL=chunk-UQPA2QGC.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/atoms/ellipsis-tooltip.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { Tooltip } from './tooltip';\nimport { Typo, type TypoProps } from './typo';\n\nexport type EllipsisTooltipProps = TypoProps & {\n lineClamp?: number;\n};\n\nexport const EllipsisTooltip = forwardRef<\n HTMLSpanElement,\n EllipsisTooltipProps\n>((props: EllipsisTooltipProps, maybeRef): React.ReactNode => {\n const { children, style, ...rest } = props;\n const ref = useRef<HTMLSpanElement>(null);\n const typoRef = maybeRef || ref;\n const [tooltipDisplay, setTooltipDisplay] = useState<'none' | 'block'>(\n 'none'\n );\n\n useEffect(() => {\n // if (maybeRef) {\n // const typo = typoRef;\n // if (typo.scrollWidth > typo.clientWidth) {\n // setTooltipDisplay('block');\n // } else {\n // setTooltipDisplay('none');\n // }\n // }\n }, []);\n\n return (\n <Tooltip content={children} style={{ display: tooltipDisplay }}>\n <Typo\n {...rest}\n ref={typoRef}\n style={{\n width: '100%',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n wordBreak: 'break-word',\n WebkitLineClamp: 2,\n ...style,\n }}\n >\n {children}\n </Typo>\n </Tooltip>\n );\n});\n\nEllipsisTooltip.displayName = 'EllipsisTooltip';\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAgB,YAAY,WAAW,QAAQ,gBAAgB;AAgCzD;AAxBC,IAAM,kBAAkB,WAG7B,CAAC,OAA6B,aAA8B;AAC5D,QAAqC,YAA7B,YAAU,MAZpB,IAYuC,IAAT,iBAAS,IAAT,CAApB,YAAU;AAClB,QAAM,MAAM,OAAwB,IAAI;AACxC,QAAM,UAAU,YAAY;AAC5B,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EACF;AAEA,YAAU,MAAM;AAAA,EAShB,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,WAAQ,SAAS,UAAU,OAAO,EAAE,SAAS,eAAe,GAC3D;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,KAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,UAAU;AAAA,QACV,WAAW;AAAA,QACX,iBAAiB;AAAA,SACd;AAAA,MAGJ;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAED,gBAAgB,cAAc;","names":[]}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Tooltip
|
|
3
|
+
} from "./chunk-ACVANQJ4.js";
|
|
4
|
+
import {
|
|
5
|
+
Typo
|
|
6
|
+
} from "./chunk-O3XTRD7R.js";
|
|
7
|
+
import {
|
|
8
|
+
__objRest,
|
|
9
|
+
__spreadProps,
|
|
10
|
+
__spreadValues
|
|
11
|
+
} from "./chunk-N552FDTV.js";
|
|
12
|
+
|
|
13
|
+
// src/atoms/ellipsis-tooltip.tsx
|
|
14
|
+
import { forwardRef, useEffect, useRef, useState } from "react";
|
|
15
|
+
import { jsx } from "react/jsx-runtime";
|
|
16
|
+
var EllipsisTooltip = forwardRef((props, maybeRef) => {
|
|
17
|
+
const _a = props, { children, style, lineClamp = 2 } = _a, rest = __objRest(_a, ["children", "style", "lineClamp"]);
|
|
18
|
+
const ref = useRef(null);
|
|
19
|
+
const typoRef = maybeRef || ref;
|
|
20
|
+
const [tooltipDisplay, setTooltipDisplay] = useState(
|
|
21
|
+
"none"
|
|
22
|
+
);
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
}, []);
|
|
25
|
+
return /* @__PURE__ */ jsx(Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ jsx(
|
|
26
|
+
Typo,
|
|
27
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
28
|
+
ref: typoRef,
|
|
29
|
+
style: __spreadValues({
|
|
30
|
+
width: "100%",
|
|
31
|
+
textOverflow: "ellipsis",
|
|
32
|
+
overflow: "hidden",
|
|
33
|
+
wordBreak: "break-word",
|
|
34
|
+
WebkitLineClamp: lineClamp,
|
|
35
|
+
display: "-webkit-box"
|
|
36
|
+
}, style),
|
|
37
|
+
children
|
|
38
|
+
})
|
|
39
|
+
) });
|
|
40
|
+
});
|
|
41
|
+
EllipsisTooltip.displayName = "EllipsisTooltip";
|
|
42
|
+
|
|
43
|
+
export {
|
|
44
|
+
EllipsisTooltip
|
|
45
|
+
};
|
|
46
|
+
//# sourceMappingURL=chunk-V2AYMNSS.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/atoms/ellipsis-tooltip.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { Tooltip } from './tooltip';\nimport { Typo, type TypoProps } from './typo';\n\nexport type EllipsisTooltipProps = TypoProps & {\n lineClamp?: number;\n};\n\nexport const EllipsisTooltip = forwardRef<\n HTMLSpanElement,\n EllipsisTooltipProps\n>((props: EllipsisTooltipProps, maybeRef): React.ReactNode => {\n const { children, style, lineClamp = 2, ...rest } = props;\n const ref = useRef<HTMLSpanElement>(null);\n const typoRef = maybeRef || ref;\n const [tooltipDisplay, setTooltipDisplay] = useState<'none' | 'block'>(\n 'none'\n );\n\n useEffect(() => {\n // if (maybeRef) {\n // const typo = typoRef;\n // if (typo.scrollWidth > typo.clientWidth) {\n // setTooltipDisplay('block');\n // } else {\n // setTooltipDisplay('none');\n // }\n // }\n }, []);\n\n return (\n <Tooltip content={children} style={{ display: tooltipDisplay }}>\n <Typo\n {...rest}\n ref={typoRef}\n style={{\n width: '100%',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n wordBreak: 'break-word',\n WebkitLineClamp: lineClamp ,\n display:'-webkit-box',\n ...style,\n }}\n >\n {children}\n </Typo>\n </Tooltip>\n );\n});\n\nEllipsisTooltip.displayName = 'EllipsisTooltip';\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAgB,YAAY,WAAW,QAAQ,gBAAgB;AAgCzD;AAxBC,IAAM,kBAAkB,WAG7B,CAAC,OAA6B,aAA8B;AAC5D,QAAoD,YAA5C,YAAU,OAAO,YAAY,EAZvC,IAYsD,IAAT,iBAAS,IAAT,CAAnC,YAAU,SAAO;AACzB,QAAM,MAAM,OAAwB,IAAI;AACxC,QAAM,UAAU,YAAY;AAC5B,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EACF;AAEA,YAAU,MAAM;AAAA,EAShB,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,WAAQ,SAAS,UAAU,OAAO,EAAE,SAAS,eAAe,GAC3D;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,KAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,UAAU;AAAA,QACV,WAAW;AAAA,QACX,iBAAiB;AAAA,QACjB,SAAQ;AAAA,SACL;AAAA,MAGJ;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAED,gBAAgB,cAAc;","names":[]}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Tooltip
|
|
3
|
+
} from "./chunk-ACVANQJ4.js";
|
|
4
|
+
import {
|
|
5
|
+
Typo
|
|
6
|
+
} from "./chunk-O3XTRD7R.js";
|
|
7
|
+
import {
|
|
8
|
+
__objRest,
|
|
9
|
+
__spreadProps,
|
|
10
|
+
__spreadValues
|
|
11
|
+
} from "./chunk-N552FDTV.js";
|
|
12
|
+
|
|
13
|
+
// src/atoms/ellipsis-tooltip.tsx
|
|
14
|
+
import { forwardRef, useEffect, useRef, useState } from "react";
|
|
15
|
+
import { jsx } from "react/jsx-runtime";
|
|
16
|
+
var EllipsisTooltip = forwardRef((props, maybeRef) => {
|
|
17
|
+
const _a = props, { children, style, lineClamp = 2 } = _a, rest = __objRest(_a, ["children", "style", "lineClamp"]);
|
|
18
|
+
const ref = useRef(null);
|
|
19
|
+
const typoRef = maybeRef || ref;
|
|
20
|
+
const [tooltipDisplay, setTooltipDisplay] = useState(
|
|
21
|
+
"none"
|
|
22
|
+
);
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
}, []);
|
|
25
|
+
return /* @__PURE__ */ jsx(Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ jsx(
|
|
26
|
+
Typo,
|
|
27
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
28
|
+
ref: typoRef,
|
|
29
|
+
style: __spreadValues({
|
|
30
|
+
width: "100%",
|
|
31
|
+
textOverflow: "ellipsis",
|
|
32
|
+
overflow: "hidden",
|
|
33
|
+
wordBreak: "break-word",
|
|
34
|
+
WebkitLineClamp: lineClamp,
|
|
35
|
+
display: "-webkit-box"
|
|
36
|
+
}, style),
|
|
37
|
+
children
|
|
38
|
+
})
|
|
39
|
+
) });
|
|
40
|
+
});
|
|
41
|
+
EllipsisTooltip.displayName = "EllipsisTooltip";
|
|
42
|
+
|
|
43
|
+
export {
|
|
44
|
+
EllipsisTooltip
|
|
45
|
+
};
|
|
46
|
+
//# sourceMappingURL=chunk-VC2TT56B.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/atoms/ellipsis-tooltip.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { Tooltip } from './tooltip';\nimport { Typo, type TypoProps } from './typo';\n\nexport type EllipsisTooltipProps = TypoProps & {\n lineClamp?: number;\n};\n\nexport const EllipsisTooltip = forwardRef<\n HTMLSpanElement,\n EllipsisTooltipProps\n>((props: EllipsisTooltipProps, maybeRef): React.ReactNode => {\n const { children, style, lineClamp = 2, ...rest } = props;\n const ref = useRef<HTMLSpanElement>(null);\n const typoRef = maybeRef || ref;\n const [tooltipDisplay, setTooltipDisplay] = useState<'none' | 'block'>(\n 'none'\n );\n\n useEffect(() => {\n // if (maybeRef) {\n // const typo = typoRef;\n // if (typo.scrollWidth > typo.clientWidth) {\n // setTooltipDisplay('block');\n // } else {\n // setTooltipDisplay('none');\n // }\n // }\n }, []);\n\n return (\n <Tooltip content={children} style={{ display: tooltipDisplay }}>\n <Typo\n {...rest}\n ref={typoRef}\n style={{\n width: '100%',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n wordBreak: 'break-word',\n WebkitLineClamp: lineClamp,\n display:'-webkit-box',\n ...style,\n }}\n >\n {children}\n </Typo>\n </Tooltip>\n );\n});\n\nEllipsisTooltip.displayName = 'EllipsisTooltip';\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAgB,YAAY,WAAW,QAAQ,gBAAgB;AAgCzD;AAxBC,IAAM,kBAAkB,WAG7B,CAAC,OAA6B,aAA8B;AAC5D,QAAoD,YAA5C,YAAU,OAAO,YAAY,EAZvC,IAYsD,IAAT,iBAAS,IAAT,CAAnC,YAAU,SAAO;AACzB,QAAM,MAAM,OAAwB,IAAI;AACxC,QAAM,UAAU,YAAY;AAC5B,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EACF;AAEA,YAAU,MAAM;AAAA,EAShB,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,WAAQ,SAAS,UAAU,OAAO,EAAE,SAAS,eAAe,GAC3D;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,KAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,UAAU;AAAA,QACV,WAAW;AAAA,QACX,iBAAiB;AAAA,QACjB,SAAQ;AAAA,SACL;AAAA,MAGJ;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAED,gBAAgB,cAAc;","names":[]}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Row
|
|
3
|
+
} from "./chunk-PBPRWY2V.js";
|
|
4
|
+
import {
|
|
5
|
+
Typo
|
|
6
|
+
} from "./chunk-O3XTRD7R.js";
|
|
7
|
+
import {
|
|
8
|
+
Flex
|
|
9
|
+
} from "./chunk-25HMMI7R.js";
|
|
10
|
+
import {
|
|
11
|
+
TriangleArrowUpIcon
|
|
12
|
+
} from "./chunk-NDUKDKGB.js";
|
|
13
|
+
import {
|
|
14
|
+
TriangleArrowDownIcon
|
|
15
|
+
} from "./chunk-BSTJBBEX.js";
|
|
16
|
+
|
|
17
|
+
// src/molecules/expand-table/index.tsx
|
|
18
|
+
import {
|
|
19
|
+
flexRender,
|
|
20
|
+
getCoreRowModel,
|
|
21
|
+
useReactTable,
|
|
22
|
+
getSortedRowModel,
|
|
23
|
+
createColumnHelper
|
|
24
|
+
} from "@tanstack/react-table";
|
|
25
|
+
import { useMemo, useState } from "react";
|
|
26
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
27
|
+
function ExpandTable(props) {
|
|
28
|
+
const { data, columns, ExpandComp, placeholder, onRowClick } = props;
|
|
29
|
+
const [sorting, setSorting] = useState([]);
|
|
30
|
+
const { getRowModel, getHeaderGroups } = useReactTable({
|
|
31
|
+
data: data || [],
|
|
32
|
+
columns,
|
|
33
|
+
getCoreRowModel: getCoreRowModel(),
|
|
34
|
+
getSortedRowModel: getSortedRowModel(),
|
|
35
|
+
state: {
|
|
36
|
+
sorting
|
|
37
|
+
},
|
|
38
|
+
onSortingChange: setSorting
|
|
39
|
+
});
|
|
40
|
+
const gridColTemp = useMemo(() => {
|
|
41
|
+
return columns.map((col) => {
|
|
42
|
+
var _a;
|
|
43
|
+
if ((_a = col.meta) == null ? void 0 : _a.autoSize)
|
|
44
|
+
return "1fr";
|
|
45
|
+
return `${col.size || 150}px`;
|
|
46
|
+
}).join(" ");
|
|
47
|
+
}, [columns]);
|
|
48
|
+
const rowModels = getRowModel();
|
|
49
|
+
return /* @__PURE__ */ jsxs("div", { className: "expand-table", children: [
|
|
50
|
+
/* @__PURE__ */ jsx("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(
|
|
51
|
+
"div",
|
|
52
|
+
{
|
|
53
|
+
className: "tr",
|
|
54
|
+
style: { gridTemplateColumns: gridColTemp },
|
|
55
|
+
children: headerGroup.headers.map((header) => {
|
|
56
|
+
const sortable = header.column.getCanSort();
|
|
57
|
+
const sortedState = header.column.getIsSorted();
|
|
58
|
+
return /* @__PURE__ */ jsx("div", { className: "th", children: /* @__PURE__ */ jsxs(
|
|
59
|
+
"button",
|
|
60
|
+
{
|
|
61
|
+
onClick: header.column.getToggleSortingHandler(),
|
|
62
|
+
style: sortable ? { cursor: "pointer" } : void 0,
|
|
63
|
+
type: "button",
|
|
64
|
+
children: [
|
|
65
|
+
/* @__PURE__ */ jsx(Typo, { variant: "body", children: flexRender(
|
|
66
|
+
header.column.columnDef.header,
|
|
67
|
+
header.getContext()
|
|
68
|
+
) }),
|
|
69
|
+
sortable ? /* @__PURE__ */ jsxs(
|
|
70
|
+
Flex,
|
|
71
|
+
{
|
|
72
|
+
direction: "column",
|
|
73
|
+
style: { marginLeft: "var(--space-2)" },
|
|
74
|
+
children: [
|
|
75
|
+
/* @__PURE__ */ jsx(
|
|
76
|
+
TriangleArrowUpIcon,
|
|
77
|
+
{
|
|
78
|
+
color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
|
|
79
|
+
}
|
|
80
|
+
),
|
|
81
|
+
/* @__PURE__ */ jsx(
|
|
82
|
+
TriangleArrowDownIcon,
|
|
83
|
+
{
|
|
84
|
+
color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
|
|
85
|
+
}
|
|
86
|
+
)
|
|
87
|
+
]
|
|
88
|
+
}
|
|
89
|
+
) : null
|
|
90
|
+
]
|
|
91
|
+
}
|
|
92
|
+
) }, header.id);
|
|
93
|
+
})
|
|
94
|
+
},
|
|
95
|
+
headerGroup.id
|
|
96
|
+
)) }),
|
|
97
|
+
/* @__PURE__ */ jsxs("div", { className: "tbody", children: [
|
|
98
|
+
rowModels.rows.length === 0 && /* @__PURE__ */ jsx("div", { className: "tr", children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ jsx(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder"),
|
|
99
|
+
rowModels.rows.map((row) => {
|
|
100
|
+
return /* @__PURE__ */ jsx(
|
|
101
|
+
Row,
|
|
102
|
+
{
|
|
103
|
+
ExpandComp,
|
|
104
|
+
gridColTemp,
|
|
105
|
+
onRowClick,
|
|
106
|
+
row
|
|
107
|
+
},
|
|
108
|
+
`row_${row.id}`
|
|
109
|
+
);
|
|
110
|
+
})
|
|
111
|
+
] })
|
|
112
|
+
] });
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
export {
|
|
116
|
+
createColumnHelper,
|
|
117
|
+
ExpandTable
|
|
118
|
+
};
|
|
119
|
+
//# sourceMappingURL=chunk-VCOQG6JF.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/expand-table/index.tsx"],"sourcesContent":["import type { ColumnDef, SortingState, RowData } from '@tanstack/react-table';\nimport type { CSSProperties } from 'react';\nimport {\n flexRender,\n getCoreRowModel,\n useReactTable,\n getSortedRowModel,\n createColumnHelper,\n} from '@tanstack/react-table';\nimport React, { useMemo, useState } from 'react';\nimport { Flex, Typo } from '../../atoms';\nimport { TriangleArrowDownIcon } from '../../icons/down';\nimport { TriangleArrowUpIcon } from '../../icons/up';\nimport { Row, type ExpandComp, type OnRowClick } from './row';\n\nexport type { ExpandComp, OnRowClick, ColumnDef };\nexport { createColumnHelper };\n\nexport interface ExpandTableProps<Datum extends RowData> {\n /** 렌더할 데이터 배열 */\n data?: Datum[];\n /** 테이블 컬럼의 메타 데이터 */\n columns: ColumnDef<Datum>[];\n /** Row의 open이 true인 경우 하단의 collapse에 렌더할 컴포넌트 */\n ExpandComp?: ExpandComp<Datum>;\n /** 데이테가 없을 시 화면에 표시할 컴포넌트 */\n placeholder?: React.ReactNode;\n /** 행 클릭 시 실행할 콜백 */\n onRowClick?: OnRowClick<Datum>;\n rowStyle?: CSSProperties;\n}\n\nexport function ExpandTable<Datum extends RowData>(\n props: ExpandTableProps<Datum>\n): React.ReactNode {\n const { data, columns, ExpandComp, placeholder, onRowClick } = props;\n\n const [sorting, setSorting] = useState<SortingState>([]);\n const { getRowModel, getHeaderGroups } = useReactTable({\n data: data || [],\n columns,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n state: {\n sorting,\n },\n onSortingChange: setSorting,\n });\n\n const gridColTemp = useMemo<string>(() => {\n return columns\n .map((col) => {\n if (col.meta?.autoSize) return '1fr';\n return `${col.size || 150}px`;\n })\n .join(' ');\n }, [columns]);\n\n const rowModels = getRowModel();\n\n return (\n <div className=\"expand-table\">\n <div className=\"thead\">\n {getHeaderGroups().map((headerGroup) => (\n <div\n className=\"tr\"\n key={headerGroup.id}\n style={{ gridTemplateColumns: gridColTemp }}\n >\n {headerGroup.headers.map((header) => {\n const sortable = header.column.getCanSort();\n const sortedState = header.column.getIsSorted();\n\n return (\n <div className=\"th\" key={header.id}>\n <button\n onClick={header.column.getToggleSortingHandler()}\n style={sortable ? { cursor: 'pointer' } : undefined}\n type=\"button\"\n >\n <Typo variant=\"body\">\n {flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n </Typo>\n {sortable ? (\n <Flex\n direction=\"column\"\n style={{ marginLeft: 'var(--space-2)' }}\n >\n <TriangleArrowUpIcon\n color={\n sortedState === 'asc'\n ? 'var(--iris-10)'\n : 'var(--iris-6)'\n }\n />\n <TriangleArrowDownIcon\n color={\n sortedState === 'desc'\n ? 'var(--iris-10)'\n : 'var(--iris-6)'\n }\n />\n </Flex>\n ) : null}\n </button>\n </div>\n );\n })}\n </div>\n ))}\n </div>\n <div className=\"tbody\">\n {/* 데이터가 없을 시 표시되는 노드 */}\n {rowModels.rows.length === 0 && (\n <div className=\"tr\" key=\"expand_placeholder\">\n <Flex align=\"center\" justify=\"center\">\n {placeholder || (\n <Typo color=\"gray\" mb=\"6\" mt=\"6\" variant=\"body\">\n 데이터가 없습니다\n </Typo>\n )}\n </Flex>\n </div>\n )}\n\n {/* 행을 렌더하는 로직 */}\n {rowModels.rows.map((row) => {\n return (\n <Row\n ExpandComp={ExpandComp}\n gridColTemp={gridColTemp}\n key={`row_${row.id}`}\n onRowClick={onRowClick}\n row={row}\n />\n );\n })}\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAgB,SAAS,gBAAgB;AAuErB,cAOE,YAPF;AAhDb,SAAS,YACd,OACiB;AACjB,QAAM,EAAE,MAAM,SAAS,YAAY,aAAa,WAAW,IAAI;AAE/D,QAAM,CAAC,SAAS,UAAU,IAAI,SAAuB,CAAC,CAAC;AACvD,QAAM,EAAE,aAAa,gBAAgB,IAAI,cAAc;AAAA,IACrD,MAAM,QAAQ,CAAC;AAAA,IACf;AAAA,IACA,iBAAiB,gBAAgB;AAAA,IACjC,mBAAmB,kBAAkB;AAAA,IACrC,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,EACnB,CAAC;AAED,QAAM,cAAc,QAAgB,MAAM;AACxC,WAAO,QACJ,IAAI,CAAC,QAAQ;AAnDpB;AAoDQ,WAAI,SAAI,SAAJ,mBAAU;AAAU,eAAO;AAC/B,aAAO,GAAG,IAAI,QAAQ,GAAG;AAAA,IAC3B,CAAC,EACA,KAAK,GAAG;AAAA,EACb,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,YAAY,YAAY;AAE9B,SACE,qBAAC,SAAI,WAAU,gBACb;AAAA,wBAAC,SAAI,WAAU,SACZ,0BAAgB,EAAE,IAAI,CAAC,gBACtB;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QAEV,OAAO,EAAE,qBAAqB,YAAY;AAAA,QAEzC,sBAAY,QAAQ,IAAI,CAAC,WAAW;AACnC,gBAAM,WAAW,OAAO,OAAO,WAAW;AAC1C,gBAAM,cAAc,OAAO,OAAO,YAAY;AAE9C,iBACE,oBAAC,SAAI,WAAU,MACb;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,OAAO,OAAO,wBAAwB;AAAA,cAC/C,OAAO,WAAW,EAAE,QAAQ,UAAU,IAAI;AAAA,cAC1C,MAAK;AAAA,cAEL;AAAA,oCAAC,QAAK,SAAQ,QACX;AAAA,kBACC,OAAO,OAAO,UAAU;AAAA,kBACxB,OAAO,WAAW;AAAA,gBACpB,GACF;AAAA,gBACC,WACC;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO,EAAE,YAAY,iBAAiB;AAAA,oBAEtC;AAAA;AAAA,wBAAC;AAAA;AAAA,0BACC,OACE,gBAAgB,QACZ,mBACA;AAAA;AAAA,sBAER;AAAA,sBACA;AAAA,wBAAC;AAAA;AAAA,0BACC,OACE,gBAAgB,SACZ,mBACA;AAAA;AAAA,sBAER;AAAA;AAAA;AAAA,gBACF,IACE;AAAA;AAAA;AAAA,UACN,KAjCuB,OAAO,EAkChC;AAAA,QAEJ,CAAC;AAAA;AAAA,MA5CI,YAAY;AAAA,IA6CnB,CACD,GACH;AAAA,IACA,qBAAC,SAAI,WAAU,SAEZ;AAAA,gBAAU,KAAK,WAAW,KACzB,oBAAC,SAAI,WAAU,MACb,8BAAC,QAAK,OAAM,UAAS,SAAQ,UAC1B,yBACC,oBAAC,QAAK,OAAM,QAAO,IAAG,KAAI,IAAG,KAAI,SAAQ,QAAO,+DAEhD,GAEJ,KAPsB,oBAQxB;AAAA,MAID,UAAU,KAAK,IAAI,CAAC,QAAQ;AAC3B,eACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YAEA;AAAA,YACA;AAAA;AAAA,UAFK,OAAO,IAAI,EAAE;AAAA,QAGpB;AAAA,MAEJ,CAAC;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Tooltip
|
|
3
|
+
} from "./chunk-ACVANQJ4.js";
|
|
4
|
+
import {
|
|
5
|
+
Typo
|
|
6
|
+
} from "./chunk-O3XTRD7R.js";
|
|
7
|
+
import {
|
|
8
|
+
__objRest,
|
|
9
|
+
__spreadProps,
|
|
10
|
+
__spreadValues
|
|
11
|
+
} from "./chunk-N552FDTV.js";
|
|
12
|
+
|
|
13
|
+
// src/atoms/ellipsis-tooltip.tsx
|
|
14
|
+
import { useEffect, useRef, useState } from "react";
|
|
15
|
+
import { jsx } from "react/jsx-runtime";
|
|
16
|
+
function EllipsisTooltip(props) {
|
|
17
|
+
const _a = props, { children, style, lineClamp = 2 } = _a, rest = __objRest(_a, ["children", "style", "lineClamp"]);
|
|
18
|
+
const ref = useRef(null);
|
|
19
|
+
const [tooltipDisplay, setTooltipDisplay] = useState(
|
|
20
|
+
"none"
|
|
21
|
+
);
|
|
22
|
+
useEffect(() => {
|
|
23
|
+
var _a2, _b;
|
|
24
|
+
const mouseOver = () => {
|
|
25
|
+
if (ref.current) {
|
|
26
|
+
const typo = ref.current;
|
|
27
|
+
if (typo.scrollWidth > typo.clientWidth) {
|
|
28
|
+
setTooltipDisplay("block");
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
const mouseOut = () => {
|
|
33
|
+
setTooltipDisplay("none");
|
|
34
|
+
};
|
|
35
|
+
(_a2 = ref.current) == null ? void 0 : _a2.addEventListener("mouseenter", mouseOver);
|
|
36
|
+
(_b = ref.current) == null ? void 0 : _b.addEventListener("mouseleave", mouseOut);
|
|
37
|
+
}, [ref]);
|
|
38
|
+
return /* @__PURE__ */ jsx(Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ jsx(
|
|
39
|
+
Typo,
|
|
40
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
41
|
+
ref,
|
|
42
|
+
style: __spreadValues({
|
|
43
|
+
width: "100%",
|
|
44
|
+
textOverflow: "ellipsis",
|
|
45
|
+
overflow: "hidden",
|
|
46
|
+
WebkitLineClamp: lineClamp,
|
|
47
|
+
display: "-webkit-box",
|
|
48
|
+
WebkitBoxOrient: "vertical",
|
|
49
|
+
wordBreak: "break-word"
|
|
50
|
+
}, style),
|
|
51
|
+
children
|
|
52
|
+
})
|
|
53
|
+
) });
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
export {
|
|
57
|
+
EllipsisTooltip
|
|
58
|
+
};
|
|
59
|
+
//# sourceMappingURL=chunk-VOR32EFU.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/atoms/ellipsis-tooltip.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { Tooltip } from './tooltip';\nimport { Typo, type TypoProps } from './typo';\n\nexport type EllipsisTooltipProps = TypoProps & {\n lineClamp?: number;\n};\n\nexport function EllipsisTooltip(props: EllipsisTooltipProps): React.ReactNode {\n const { children, style, lineClamp = 2, ...rest } = props;\n const ref = useRef<HTMLSpanElement>(null);\n \n const [tooltipDisplay, setTooltipDisplay] = useState<'none' | 'block'>(\n 'none'\n );\n\n useEffect(() => {\n const mouseOver = ():void=>{\n if (ref.current) {\n const typo = ref.current;\n if (typo.scrollWidth > typo.clientWidth) {\n setTooltipDisplay('block');\n }\n }\n }\n\n const mouseOut = ():void=>{\n setTooltipDisplay('none');\n }\n\n ref.current?.addEventListener('mouseenter',mouseOver);\n ref.current?.addEventListener('mouseleave',mouseOut);\n }, [ref]);\n\n return (\n <Tooltip content={children} style={{ display: tooltipDisplay }}>\n <Typo\n {...rest}\n ref={ref}\n style={{\n width: '100%',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n WebkitLineClamp: lineClamp,\n\n display:'-webkit-box',\n WebkitBoxOrient: 'vertical',\n wordBreak: 'break-word',\n ...style,\n }}\n >\n {children}\n </Typo>\n </Tooltip>\n );\n}"],"mappings":";;;;;;;;;;;;;AAAA,SAA4B,WAAW,QAAQ,gBAAgB;AAoCzD;AA5BC,SAAS,gBAAgB,OAA8C;AAC5E,QAAoD,YAA5C,YAAU,OAAO,YAAY,EATvC,IASsD,IAAT,iBAAS,IAAT,CAAnC,YAAU,SAAO;AACzB,QAAM,MAAM,OAAwB,IAAI;AAExC,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EACF;AAEA,YAAU,MAAM;AAhBlB,QAAAA,KAAA;AAiBI,UAAM,YAAY,MAAS;AACzB,UAAI,IAAI,SAAS;AACf,cAAM,OAAO,IAAI;AACjB,YAAI,KAAK,cAAc,KAAK,aAAa;AACvC,4BAAkB,OAAO;AAAA,QAC3B;AAAA,MACF;AAAA,IACF;AAEA,UAAM,WAAW,MAAS;AACxB,wBAAkB,MAAM;AAAA,IAC1B;AAED,KAAAA,MAAA,IAAI,YAAJ,gBAAAA,IAAa,iBAAiB,cAAa;AAC3C,cAAI,YAAJ,mBAAa,iBAAiB,cAAa;AAAA,EAC5C,GAAG,CAAC,GAAG,CAAC;AAER,SACE,oBAAC,WAAQ,SAAS,UAAU,OAAO,EAAE,SAAS,eAAe,GAC3D;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC;AAAA,MACA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,UAAU;AAAA,QACV,iBAAiB;AAAA,QAEjB,SAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,WAAW;AAAA,SACR;AAAA,MAGJ;AAAA;AAAA,EACH,GACF;AAEJ;","names":["_a"]}
|