@deepnoid/ui 0.1.201 → 0.1.203
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/.turbo/turbo-build.log +147 -147
- package/dist/{chunk-YBXBTE5T.mjs → chunk-COGGK5Q6.mjs} +1 -1
- package/dist/{chunk-75ZDPLJ4.mjs → chunk-K2RW5KLO.mjs} +20 -0
- package/dist/{chunk-KYWCJIXI.mjs → chunk-W3V4SZV5.mjs} +24 -68
- package/dist/components/picker/index.js +17 -0
- package/dist/components/picker/index.mjs +2 -2
- package/dist/components/picker/timePicker.js +508 -60
- package/dist/components/picker/timePicker.mjs +10 -2
- package/dist/components/select/index.js +476 -28
- package/dist/components/select/index.mjs +9 -1
- package/dist/components/select/select.d.mts +1 -0
- package/dist/components/select/select.d.ts +1 -0
- package/dist/components/select/select.js +476 -28
- package/dist/components/select/select.mjs +9 -1
- package/dist/components/table/index.js +19 -63
- package/dist/components/table/index.mjs +1 -1
- package/dist/components/table/table-body.js +19 -63
- package/dist/components/table/table-body.mjs +1 -1
- package/dist/components/table/table-head.d.mts +1 -1
- package/dist/components/table/table-head.d.ts +1 -1
- package/dist/components/table/table-head.js +19 -63
- package/dist/components/table/table-head.mjs +1 -1
- package/dist/components/table/table.js +19 -63
- package/dist/components/table/table.mjs +1 -1
- package/dist/index.js +36 -63
- package/dist/index.mjs +3 -3
- package/package.json +1 -1
|
@@ -641,37 +641,13 @@ function TableHeaderCell({
|
|
|
641
641
|
}) {
|
|
642
642
|
const thRef = (0, import_react2.useRef)(null);
|
|
643
643
|
const [showTitle, setShowTitle] = (0, import_react2.useState)(false);
|
|
644
|
-
|
|
645
|
-
if (
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
const children = Array.from(el.children);
|
|
649
|
-
for (const child of children) {
|
|
650
|
-
if (child.scrollWidth > child.clientWidth) {
|
|
651
|
-
return true;
|
|
652
|
-
}
|
|
653
|
-
}
|
|
654
|
-
return false;
|
|
655
|
-
};
|
|
656
|
-
const extractTextFromContent = (node) => {
|
|
657
|
-
if (typeof node === "string" || typeof node === "number") {
|
|
658
|
-
return String(node);
|
|
659
|
-
}
|
|
660
|
-
if ((0, import_react2.isValidElement)(node)) {
|
|
661
|
-
return String(node.props.children || "");
|
|
662
|
-
}
|
|
663
|
-
return "";
|
|
664
|
-
};
|
|
665
|
-
(0, import_react2.useEffect)(() => {
|
|
666
|
-
if (thRef.current && !isCheckbox) {
|
|
667
|
-
setTimeout(() => {
|
|
668
|
-
if (thRef.current) {
|
|
669
|
-
setShowTitle(checkOverflow(thRef.current));
|
|
670
|
-
}
|
|
671
|
-
}, 0);
|
|
644
|
+
(0, import_react2.useLayoutEffect)(() => {
|
|
645
|
+
if (!isCheckbox && thRef.current) {
|
|
646
|
+
const el = thRef.current;
|
|
647
|
+
setShowTitle(el.scrollWidth > el.clientWidth);
|
|
672
648
|
}
|
|
673
649
|
}, [content, isCheckbox]);
|
|
674
|
-
const titleText = !isCheckbox && showTitle ?
|
|
650
|
+
const titleText = !isCheckbox && showTitle ? typeof content === "string" || typeof content === "number" ? String(content) : "" : void 0;
|
|
675
651
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
676
652
|
"th",
|
|
677
653
|
{
|
|
@@ -684,7 +660,10 @@ function TableHeaderCell({
|
|
|
684
660
|
flexShrink: 0,
|
|
685
661
|
flexGrow: 0,
|
|
686
662
|
boxSizing: "border-box"
|
|
687
|
-
} : column ? {
|
|
663
|
+
} : column ? {
|
|
664
|
+
...getCellStyle(column),
|
|
665
|
+
textAlign: "center"
|
|
666
|
+
} : void 0,
|
|
688
667
|
title: titleText,
|
|
689
668
|
children: content
|
|
690
669
|
}
|
|
@@ -693,7 +672,6 @@ function TableHeaderCell({
|
|
|
693
672
|
var TableHead = ({
|
|
694
673
|
slots,
|
|
695
674
|
columns,
|
|
696
|
-
color,
|
|
697
675
|
size,
|
|
698
676
|
rowCheckbox = false,
|
|
699
677
|
hasCheckedRows,
|
|
@@ -745,53 +723,31 @@ function TableCell({
|
|
|
745
723
|
}) {
|
|
746
724
|
var _a, _b;
|
|
747
725
|
const value = row[column.field];
|
|
748
|
-
const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field }))
|
|
726
|
+
const formattedValue = (_b = (_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) != null ? _b : value;
|
|
749
727
|
const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
|
|
728
|
+
const isTextContent = ["string", "number"].includes(typeof content) || content === null || content === void 0;
|
|
750
729
|
const tdRef = (0, import_react3.useRef)(null);
|
|
751
730
|
const [showTitle, setShowTitle] = (0, import_react3.useState)(false);
|
|
752
|
-
|
|
753
|
-
const checkOverflow = (el) => {
|
|
754
|
-
if (el.scrollWidth > el.clientWidth) {
|
|
755
|
-
return true;
|
|
756
|
-
}
|
|
757
|
-
const children = Array.from(el.children);
|
|
758
|
-
for (const child of children) {
|
|
759
|
-
if (child.scrollWidth > child.clientWidth) {
|
|
760
|
-
return true;
|
|
761
|
-
}
|
|
762
|
-
}
|
|
763
|
-
return false;
|
|
764
|
-
};
|
|
765
|
-
(0, import_react3.useEffect)(() => {
|
|
731
|
+
(0, import_react3.useLayoutEffect)(() => {
|
|
766
732
|
if (tdRef.current && isTextContent) {
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
setShowTitle(checkOverflow(tdRef.current));
|
|
770
|
-
}
|
|
771
|
-
}, 0);
|
|
733
|
+
const el = tdRef.current;
|
|
734
|
+
setShowTitle(el.scrollWidth > el.clientWidth);
|
|
772
735
|
}
|
|
773
736
|
}, [content, isTextContent]);
|
|
774
737
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
775
738
|
"td",
|
|
776
739
|
{
|
|
777
740
|
ref: tdRef,
|
|
778
|
-
className: clsx(
|
|
779
|
-
slots.td(),
|
|
780
|
-
classNames == null ? void 0 : classNames.td,
|
|
781
|
-
column.className,
|
|
782
|
-
isTextContent && "truncate",
|
|
783
|
-
isTextContent && "[&>*]:inline-block [&>*]:max-w-full [&>*]:truncate [&>*]:align-middle"
|
|
784
|
-
),
|
|
741
|
+
className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className, isTextContent && "truncate"),
|
|
785
742
|
style: {
|
|
786
743
|
...getCellStyle(column),
|
|
787
744
|
maxWidth: column.width || "150px",
|
|
788
745
|
textAlign: column.align || "center",
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
}
|
|
746
|
+
whiteSpace: isTextContent ? "nowrap" : "normal",
|
|
747
|
+
overflow: isTextContent ? "hidden" : "visible",
|
|
748
|
+
textOverflow: isTextContent ? "ellipsis" : void 0
|
|
793
749
|
},
|
|
794
|
-
title: showTitle ? String(
|
|
750
|
+
title: showTitle && isTextContent ? String(content != null ? content : "") : void 0,
|
|
795
751
|
children: content
|
|
796
752
|
},
|
|
797
753
|
`${row.id}-${column.field}-${colIdx}-${rowIndex}`
|
|
@@ -641,37 +641,13 @@ function TableHeaderCell({
|
|
|
641
641
|
}) {
|
|
642
642
|
const thRef = (0, import_react2.useRef)(null);
|
|
643
643
|
const [showTitle, setShowTitle] = (0, import_react2.useState)(false);
|
|
644
|
-
|
|
645
|
-
if (
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
const children = Array.from(el.children);
|
|
649
|
-
for (const child of children) {
|
|
650
|
-
if (child.scrollWidth > child.clientWidth) {
|
|
651
|
-
return true;
|
|
652
|
-
}
|
|
653
|
-
}
|
|
654
|
-
return false;
|
|
655
|
-
};
|
|
656
|
-
const extractTextFromContent = (node) => {
|
|
657
|
-
if (typeof node === "string" || typeof node === "number") {
|
|
658
|
-
return String(node);
|
|
659
|
-
}
|
|
660
|
-
if ((0, import_react2.isValidElement)(node)) {
|
|
661
|
-
return String(node.props.children || "");
|
|
662
|
-
}
|
|
663
|
-
return "";
|
|
664
|
-
};
|
|
665
|
-
(0, import_react2.useEffect)(() => {
|
|
666
|
-
if (thRef.current && !isCheckbox) {
|
|
667
|
-
setTimeout(() => {
|
|
668
|
-
if (thRef.current) {
|
|
669
|
-
setShowTitle(checkOverflow(thRef.current));
|
|
670
|
-
}
|
|
671
|
-
}, 0);
|
|
644
|
+
(0, import_react2.useLayoutEffect)(() => {
|
|
645
|
+
if (!isCheckbox && thRef.current) {
|
|
646
|
+
const el = thRef.current;
|
|
647
|
+
setShowTitle(el.scrollWidth > el.clientWidth);
|
|
672
648
|
}
|
|
673
649
|
}, [content, isCheckbox]);
|
|
674
|
-
const titleText = !isCheckbox && showTitle ?
|
|
650
|
+
const titleText = !isCheckbox && showTitle ? typeof content === "string" || typeof content === "number" ? String(content) : "" : void 0;
|
|
675
651
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
676
652
|
"th",
|
|
677
653
|
{
|
|
@@ -684,7 +660,10 @@ function TableHeaderCell({
|
|
|
684
660
|
flexShrink: 0,
|
|
685
661
|
flexGrow: 0,
|
|
686
662
|
boxSizing: "border-box"
|
|
687
|
-
} : column ? {
|
|
663
|
+
} : column ? {
|
|
664
|
+
...getCellStyle(column),
|
|
665
|
+
textAlign: "center"
|
|
666
|
+
} : void 0,
|
|
688
667
|
title: titleText,
|
|
689
668
|
children: content
|
|
690
669
|
}
|
|
@@ -693,7 +672,6 @@ function TableHeaderCell({
|
|
|
693
672
|
var TableHead = ({
|
|
694
673
|
slots,
|
|
695
674
|
columns,
|
|
696
|
-
color,
|
|
697
675
|
size,
|
|
698
676
|
rowCheckbox = false,
|
|
699
677
|
hasCheckedRows,
|
|
@@ -6719,53 +6697,31 @@ function TableCell({
|
|
|
6719
6697
|
}) {
|
|
6720
6698
|
var _a, _b;
|
|
6721
6699
|
const value = row[column.field];
|
|
6722
|
-
const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field }))
|
|
6700
|
+
const formattedValue = (_b = (_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) != null ? _b : value;
|
|
6723
6701
|
const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
|
|
6702
|
+
const isTextContent = ["string", "number"].includes(typeof content) || content === null || content === void 0;
|
|
6724
6703
|
const tdRef = (0, import_react7.useRef)(null);
|
|
6725
6704
|
const [showTitle, setShowTitle] = (0, import_react7.useState)(false);
|
|
6726
|
-
|
|
6727
|
-
const checkOverflow = (el) => {
|
|
6728
|
-
if (el.scrollWidth > el.clientWidth) {
|
|
6729
|
-
return true;
|
|
6730
|
-
}
|
|
6731
|
-
const children = Array.from(el.children);
|
|
6732
|
-
for (const child of children) {
|
|
6733
|
-
if (child.scrollWidth > child.clientWidth) {
|
|
6734
|
-
return true;
|
|
6735
|
-
}
|
|
6736
|
-
}
|
|
6737
|
-
return false;
|
|
6738
|
-
};
|
|
6739
|
-
(0, import_react7.useEffect)(() => {
|
|
6705
|
+
(0, import_react7.useLayoutEffect)(() => {
|
|
6740
6706
|
if (tdRef.current && isTextContent) {
|
|
6741
|
-
|
|
6742
|
-
|
|
6743
|
-
setShowTitle(checkOverflow(tdRef.current));
|
|
6744
|
-
}
|
|
6745
|
-
}, 0);
|
|
6707
|
+
const el = tdRef.current;
|
|
6708
|
+
setShowTitle(el.scrollWidth > el.clientWidth);
|
|
6746
6709
|
}
|
|
6747
6710
|
}, [content, isTextContent]);
|
|
6748
6711
|
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
6749
6712
|
"td",
|
|
6750
6713
|
{
|
|
6751
6714
|
ref: tdRef,
|
|
6752
|
-
className: clsx(
|
|
6753
|
-
slots.td(),
|
|
6754
|
-
classNames == null ? void 0 : classNames.td,
|
|
6755
|
-
column.className,
|
|
6756
|
-
isTextContent && "truncate",
|
|
6757
|
-
isTextContent && "[&>*]:inline-block [&>*]:max-w-full [&>*]:truncate [&>*]:align-middle"
|
|
6758
|
-
),
|
|
6715
|
+
className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className, isTextContent && "truncate"),
|
|
6759
6716
|
style: {
|
|
6760
6717
|
...getCellStyle(column),
|
|
6761
6718
|
maxWidth: column.width || "150px",
|
|
6762
6719
|
textAlign: column.align || "center",
|
|
6763
|
-
|
|
6764
|
-
|
|
6765
|
-
|
|
6766
|
-
}
|
|
6720
|
+
whiteSpace: isTextContent ? "nowrap" : "normal",
|
|
6721
|
+
overflow: isTextContent ? "hidden" : "visible",
|
|
6722
|
+
textOverflow: isTextContent ? "ellipsis" : void 0
|
|
6767
6723
|
},
|
|
6768
|
-
title: showTitle ? String(
|
|
6724
|
+
title: showTitle && isTextContent ? String(content != null ? content : "") : void 0,
|
|
6769
6725
|
children: content
|
|
6770
6726
|
},
|
|
6771
6727
|
`${row.id}-${column.field}-${colIdx}-${rowIndex}`
|
|
@@ -14,6 +14,6 @@ type TableHeadProps = {
|
|
|
14
14
|
classNames?: SlotsToClasses<TableSlots>;
|
|
15
15
|
onCheckAll: (isChecked: boolean) => void;
|
|
16
16
|
};
|
|
17
|
-
declare const TableHead: ({ slots, columns,
|
|
17
|
+
declare const TableHead: ({ slots, columns, size, rowCheckbox, hasCheckedRows, classNames, onCheckAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
|
|
18
18
|
|
|
19
19
|
export { TableHead as default };
|
|
@@ -14,6 +14,6 @@ type TableHeadProps = {
|
|
|
14
14
|
classNames?: SlotsToClasses<TableSlots>;
|
|
15
15
|
onCheckAll: (isChecked: boolean) => void;
|
|
16
16
|
};
|
|
17
|
-
declare const TableHead: ({ slots, columns,
|
|
17
|
+
declare const TableHead: ({ slots, columns, size, rowCheckbox, hasCheckedRows, classNames, onCheckAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
|
|
18
18
|
|
|
19
19
|
export { TableHead as default };
|
|
@@ -642,53 +642,31 @@ function TableCell({
|
|
|
642
642
|
}) {
|
|
643
643
|
var _a, _b;
|
|
644
644
|
const value = row[column.field];
|
|
645
|
-
const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field }))
|
|
645
|
+
const formattedValue = (_b = (_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) != null ? _b : value;
|
|
646
646
|
const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
|
|
647
|
+
const isTextContent = ["string", "number"].includes(typeof content) || content === null || content === void 0;
|
|
647
648
|
const tdRef = (0, import_react2.useRef)(null);
|
|
648
649
|
const [showTitle, setShowTitle] = (0, import_react2.useState)(false);
|
|
649
|
-
|
|
650
|
-
const checkOverflow = (el) => {
|
|
651
|
-
if (el.scrollWidth > el.clientWidth) {
|
|
652
|
-
return true;
|
|
653
|
-
}
|
|
654
|
-
const children = Array.from(el.children);
|
|
655
|
-
for (const child of children) {
|
|
656
|
-
if (child.scrollWidth > child.clientWidth) {
|
|
657
|
-
return true;
|
|
658
|
-
}
|
|
659
|
-
}
|
|
660
|
-
return false;
|
|
661
|
-
};
|
|
662
|
-
(0, import_react2.useEffect)(() => {
|
|
650
|
+
(0, import_react2.useLayoutEffect)(() => {
|
|
663
651
|
if (tdRef.current && isTextContent) {
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
setShowTitle(checkOverflow(tdRef.current));
|
|
667
|
-
}
|
|
668
|
-
}, 0);
|
|
652
|
+
const el = tdRef.current;
|
|
653
|
+
setShowTitle(el.scrollWidth > el.clientWidth);
|
|
669
654
|
}
|
|
670
655
|
}, [content, isTextContent]);
|
|
671
656
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
672
657
|
"td",
|
|
673
658
|
{
|
|
674
659
|
ref: tdRef,
|
|
675
|
-
className: clsx(
|
|
676
|
-
slots.td(),
|
|
677
|
-
classNames == null ? void 0 : classNames.td,
|
|
678
|
-
column.className,
|
|
679
|
-
isTextContent && "truncate",
|
|
680
|
-
isTextContent && "[&>*]:inline-block [&>*]:max-w-full [&>*]:truncate [&>*]:align-middle"
|
|
681
|
-
),
|
|
660
|
+
className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className, isTextContent && "truncate"),
|
|
682
661
|
style: {
|
|
683
662
|
...getCellStyle(column),
|
|
684
663
|
maxWidth: column.width || "150px",
|
|
685
664
|
textAlign: column.align || "center",
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
}
|
|
665
|
+
whiteSpace: isTextContent ? "nowrap" : "normal",
|
|
666
|
+
overflow: isTextContent ? "hidden" : "visible",
|
|
667
|
+
textOverflow: isTextContent ? "ellipsis" : void 0
|
|
690
668
|
},
|
|
691
|
-
title: showTitle ? String(
|
|
669
|
+
title: showTitle && isTextContent ? String(content != null ? content : "") : void 0,
|
|
692
670
|
children: content
|
|
693
671
|
},
|
|
694
672
|
`${row.id}-${column.field}-${colIdx}-${rowIndex}`
|
|
@@ -6744,37 +6722,13 @@ function TableHeaderCell({
|
|
|
6744
6722
|
}) {
|
|
6745
6723
|
const thRef = (0, import_react7.useRef)(null);
|
|
6746
6724
|
const [showTitle, setShowTitle] = (0, import_react7.useState)(false);
|
|
6747
|
-
|
|
6748
|
-
if (
|
|
6749
|
-
|
|
6750
|
-
|
|
6751
|
-
const children = Array.from(el.children);
|
|
6752
|
-
for (const child of children) {
|
|
6753
|
-
if (child.scrollWidth > child.clientWidth) {
|
|
6754
|
-
return true;
|
|
6755
|
-
}
|
|
6756
|
-
}
|
|
6757
|
-
return false;
|
|
6758
|
-
};
|
|
6759
|
-
const extractTextFromContent = (node) => {
|
|
6760
|
-
if (typeof node === "string" || typeof node === "number") {
|
|
6761
|
-
return String(node);
|
|
6762
|
-
}
|
|
6763
|
-
if ((0, import_react7.isValidElement)(node)) {
|
|
6764
|
-
return String(node.props.children || "");
|
|
6765
|
-
}
|
|
6766
|
-
return "";
|
|
6767
|
-
};
|
|
6768
|
-
(0, import_react7.useEffect)(() => {
|
|
6769
|
-
if (thRef.current && !isCheckbox) {
|
|
6770
|
-
setTimeout(() => {
|
|
6771
|
-
if (thRef.current) {
|
|
6772
|
-
setShowTitle(checkOverflow(thRef.current));
|
|
6773
|
-
}
|
|
6774
|
-
}, 0);
|
|
6725
|
+
(0, import_react7.useLayoutEffect)(() => {
|
|
6726
|
+
if (!isCheckbox && thRef.current) {
|
|
6727
|
+
const el = thRef.current;
|
|
6728
|
+
setShowTitle(el.scrollWidth > el.clientWidth);
|
|
6775
6729
|
}
|
|
6776
6730
|
}, [content, isCheckbox]);
|
|
6777
|
-
const titleText = !isCheckbox && showTitle ?
|
|
6731
|
+
const titleText = !isCheckbox && showTitle ? typeof content === "string" || typeof content === "number" ? String(content) : "" : void 0;
|
|
6778
6732
|
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
6779
6733
|
"th",
|
|
6780
6734
|
{
|
|
@@ -6787,7 +6741,10 @@ function TableHeaderCell({
|
|
|
6787
6741
|
flexShrink: 0,
|
|
6788
6742
|
flexGrow: 0,
|
|
6789
6743
|
boxSizing: "border-box"
|
|
6790
|
-
} : column ? {
|
|
6744
|
+
} : column ? {
|
|
6745
|
+
...getCellStyle(column),
|
|
6746
|
+
textAlign: "center"
|
|
6747
|
+
} : void 0,
|
|
6791
6748
|
title: titleText,
|
|
6792
6749
|
children: content
|
|
6793
6750
|
}
|
|
@@ -6796,7 +6753,6 @@ function TableHeaderCell({
|
|
|
6796
6753
|
var TableHead = ({
|
|
6797
6754
|
slots,
|
|
6798
6755
|
columns,
|
|
6799
|
-
color,
|
|
6800
6756
|
size,
|
|
6801
6757
|
rowCheckbox = false,
|
|
6802
6758
|
hasCheckedRows,
|
|
@@ -639,37 +639,13 @@ function TableHeaderCell({
|
|
|
639
639
|
}) {
|
|
640
640
|
const thRef = (0, import_react2.useRef)(null);
|
|
641
641
|
const [showTitle, setShowTitle] = (0, import_react2.useState)(false);
|
|
642
|
-
|
|
643
|
-
if (
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
const children = Array.from(el.children);
|
|
647
|
-
for (const child of children) {
|
|
648
|
-
if (child.scrollWidth > child.clientWidth) {
|
|
649
|
-
return true;
|
|
650
|
-
}
|
|
651
|
-
}
|
|
652
|
-
return false;
|
|
653
|
-
};
|
|
654
|
-
const extractTextFromContent = (node) => {
|
|
655
|
-
if (typeof node === "string" || typeof node === "number") {
|
|
656
|
-
return String(node);
|
|
657
|
-
}
|
|
658
|
-
if ((0, import_react2.isValidElement)(node)) {
|
|
659
|
-
return String(node.props.children || "");
|
|
660
|
-
}
|
|
661
|
-
return "";
|
|
662
|
-
};
|
|
663
|
-
(0, import_react2.useEffect)(() => {
|
|
664
|
-
if (thRef.current && !isCheckbox) {
|
|
665
|
-
setTimeout(() => {
|
|
666
|
-
if (thRef.current) {
|
|
667
|
-
setShowTitle(checkOverflow(thRef.current));
|
|
668
|
-
}
|
|
669
|
-
}, 0);
|
|
642
|
+
(0, import_react2.useLayoutEffect)(() => {
|
|
643
|
+
if (!isCheckbox && thRef.current) {
|
|
644
|
+
const el = thRef.current;
|
|
645
|
+
setShowTitle(el.scrollWidth > el.clientWidth);
|
|
670
646
|
}
|
|
671
647
|
}, [content, isCheckbox]);
|
|
672
|
-
const titleText = !isCheckbox && showTitle ?
|
|
648
|
+
const titleText = !isCheckbox && showTitle ? typeof content === "string" || typeof content === "number" ? String(content) : "" : void 0;
|
|
673
649
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
674
650
|
"th",
|
|
675
651
|
{
|
|
@@ -682,7 +658,10 @@ function TableHeaderCell({
|
|
|
682
658
|
flexShrink: 0,
|
|
683
659
|
flexGrow: 0,
|
|
684
660
|
boxSizing: "border-box"
|
|
685
|
-
} : column ? {
|
|
661
|
+
} : column ? {
|
|
662
|
+
...getCellStyle(column),
|
|
663
|
+
textAlign: "center"
|
|
664
|
+
} : void 0,
|
|
686
665
|
title: titleText,
|
|
687
666
|
children: content
|
|
688
667
|
}
|
|
@@ -691,7 +670,6 @@ function TableHeaderCell({
|
|
|
691
670
|
var TableHead = ({
|
|
692
671
|
slots,
|
|
693
672
|
columns,
|
|
694
|
-
color,
|
|
695
673
|
size,
|
|
696
674
|
rowCheckbox = false,
|
|
697
675
|
hasCheckedRows,
|
|
@@ -743,53 +721,31 @@ function TableCell({
|
|
|
743
721
|
}) {
|
|
744
722
|
var _a, _b;
|
|
745
723
|
const value = row[column.field];
|
|
746
|
-
const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field }))
|
|
724
|
+
const formattedValue = (_b = (_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) != null ? _b : value;
|
|
747
725
|
const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
|
|
726
|
+
const isTextContent = ["string", "number"].includes(typeof content) || content === null || content === void 0;
|
|
748
727
|
const tdRef = (0, import_react3.useRef)(null);
|
|
749
728
|
const [showTitle, setShowTitle] = (0, import_react3.useState)(false);
|
|
750
|
-
|
|
751
|
-
const checkOverflow = (el) => {
|
|
752
|
-
if (el.scrollWidth > el.clientWidth) {
|
|
753
|
-
return true;
|
|
754
|
-
}
|
|
755
|
-
const children = Array.from(el.children);
|
|
756
|
-
for (const child of children) {
|
|
757
|
-
if (child.scrollWidth > child.clientWidth) {
|
|
758
|
-
return true;
|
|
759
|
-
}
|
|
760
|
-
}
|
|
761
|
-
return false;
|
|
762
|
-
};
|
|
763
|
-
(0, import_react3.useEffect)(() => {
|
|
729
|
+
(0, import_react3.useLayoutEffect)(() => {
|
|
764
730
|
if (tdRef.current && isTextContent) {
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
setShowTitle(checkOverflow(tdRef.current));
|
|
768
|
-
}
|
|
769
|
-
}, 0);
|
|
731
|
+
const el = tdRef.current;
|
|
732
|
+
setShowTitle(el.scrollWidth > el.clientWidth);
|
|
770
733
|
}
|
|
771
734
|
}, [content, isTextContent]);
|
|
772
735
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
773
736
|
"td",
|
|
774
737
|
{
|
|
775
738
|
ref: tdRef,
|
|
776
|
-
className: clsx(
|
|
777
|
-
slots.td(),
|
|
778
|
-
classNames == null ? void 0 : classNames.td,
|
|
779
|
-
column.className,
|
|
780
|
-
isTextContent && "truncate",
|
|
781
|
-
isTextContent && "[&>*]:inline-block [&>*]:max-w-full [&>*]:truncate [&>*]:align-middle"
|
|
782
|
-
),
|
|
739
|
+
className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className, isTextContent && "truncate"),
|
|
783
740
|
style: {
|
|
784
741
|
...getCellStyle(column),
|
|
785
742
|
maxWidth: column.width || "150px",
|
|
786
743
|
textAlign: column.align || "center",
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
}
|
|
744
|
+
whiteSpace: isTextContent ? "nowrap" : "normal",
|
|
745
|
+
overflow: isTextContent ? "hidden" : "visible",
|
|
746
|
+
textOverflow: isTextContent ? "ellipsis" : void 0
|
|
791
747
|
},
|
|
792
|
-
title: showTitle ? String(
|
|
748
|
+
title: showTitle && isTextContent ? String(content != null ? content : "") : void 0,
|
|
793
749
|
children: content
|
|
794
750
|
},
|
|
795
751
|
`${row.id}-${column.field}-${colIdx}-${rowIndex}`
|