@canvas-components/react-list-table 0.2.6 → 0.3.1

package/dist/index.js

@@ -586,6 +586,14 @@ function DensityMenu(props) {
           onClick: () => {
             onChange("compact");
           }
+        },
+        {
+          key: "density-auto",
+          label: "\u81EA\u9002\u5E94",
+          selected: value === "auto",
+          onClick: () => {
+            onChange("auto");
+          }
         }
       ]
     }
@@ -3352,7 +3360,7 @@ function resolveSortableTransform(index, sourceIndex, targetIndex, height) {
 }
 
 // src/features/toolbar/style.css
-styleInject('.react-list-table-titlebar {\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 0;\n  box-sizing: border-box;\n  background: #fff;\n}\n.react-list-table-title {\n  min-width: 0;\n  color: #1f2937;\n  font-size: 14px;\n  font-weight: 600;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-tools {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  color: #475569;\n}\n.react-list-table-tool-wrap {\n  position: relative;\n  display: inline-flex;\n}\n.react-list-table-tool {\n  width: 20px;\n  height: 24px;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  background: transparent;\n  font: 16px/24px sans-serif;\n  cursor: pointer;\n}\n.react-list-table-tool:hover {\n  color: #1677ff;\n}\n.react-list-table-tool-menu,\n.react-list-table-column-setting {\n  position: absolute;\n  z-index: 120;\n  top: 28px;\n  right: 0;\n  min-width: 112px;\n  padding: 6px;\n  border: 1px solid #e5e7eb;\n  border-radius: 6px;\n  background: #fff;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, .14);\n}\n.react-list-table-tool-menu button {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 6px 10px;\n  border: 0;\n  border-radius: 4px;\n  background: transparent;\n  text-align: left;\n  cursor: pointer;\n}\n.react-list-table-tool-menu button.active::after {\n  content: "\\2713";\n  margin-left: 12px;\n  font-size: 12px;\n}\n.react-list-table-tool-menu button:hover,\n.react-list-table-tool-menu button.active {\n  color: #1677ff;\n  background: #e6f4ff;\n}\n.react-list-table-column-setting {\n  width: 328px;\n  max-height: 360px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n.react-list-table-column-setting-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 6px 8px;\n  border-bottom: 1px solid #f0f0f0;\n  flex: 0 0 auto;\n}\n.react-list-table-column-setting-head button {\n  border: 0;\n  color: #1677ff;\n  background: transparent;\n  cursor: pointer;\n}\n.react-list-table-column-setting-body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n}\n.react-list-table-column-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  justify-content: space-between;\n  padding: 7px 6px;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n.react-list-table-column-main,\n.react-list-table-column-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n.react-list-table-column-main {\n  min-width: 0;\n}\n.react-list-table-column-actions {\n  flex: 0 0 auto;\n}\n.react-list-table-column-actions > .canvas-react-select-wrap {\n  flex: 0 0 96px;\n  width: 96px;\n  height: 24px;\n}\n.react-list-table-column-label {\n  min-width: 64px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-column-width-input {\n  height: 22px;\n  padding-inline: 5px;\n}\n.react-list-table-column-fixed-input {\n  height: 22px;\n  padding-inline: 6px;\n  font-size: 12px;\n}\n.react-list-table-column-setting label.dragging {\n  opacity: 0.45;\n  background: #e6f4ff;\n}\n.react-list-table-column-setting [data-sortable-key].dragging {\n  opacity: 0.28;\n}\n.react-list-table-column-drag {\n  color: #94a3b8;\n  display: inline-flex;\n  font-size: 14px;\n  cursor: grab;\n  user-select: none;\n}\nbody.react-list-table-sorting,\nbody.react-list-table-sorting * {\n  cursor: grabbing !important;\n}\n.react-list-table-sort-overlay {\n  position: fixed;\n  z-index: 1400;\n  display: block;\n  padding: 0;\n  box-sizing: border-box;\n  color: #334155;\n  background: #fff;\n  border: 1px solid #91caff;\n  border-radius: 6px;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n  pointer-events: none;\n}\n.react-list-table-sort-overlay .react-list-table-column-item {\n  width: 100%;\n  height: 100%;\n}\n');
+styleInject('.react-list-table-shell {\n  background: #fff;\n}\n.react-list-table-titlebar {\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 0;\n  box-sizing: border-box;\n  background: #fff;\n}\n.react-list-table-shell-fullscreen {\n  width: 100% !important;\n  height: 100% !important;\n}\n.react-list-table-shell-fullscreen .canvas-list-table-root {\n  height: 100% !important;\n}\n.react-list-table-title {\n  min-width: 0;\n  color: #1f2937;\n  font-size: 14px;\n  font-weight: 600;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-tools {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  color: #475569;\n}\n.react-list-table-tool-wrap {\n  position: relative;\n  display: inline-flex;\n}\n.react-list-table-tool {\n  width: 20px;\n  height: 24px;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  background: transparent;\n  font: 16px/24px sans-serif;\n  cursor: pointer;\n}\n.react-list-table-tool:hover {\n  color: #1677ff;\n}\n.react-list-table-tool-menu,\n.react-list-table-column-setting {\n  position: absolute;\n  z-index: 120;\n  top: 28px;\n  right: 0;\n  min-width: 112px;\n  padding: 6px;\n  border: 1px solid #e5e7eb;\n  border-radius: 6px;\n  background: #fff;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, .14);\n}\n.react-list-table-tool-menu button {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 6px 10px;\n  border: 0;\n  border-radius: 4px;\n  background: transparent;\n  text-align: left;\n  cursor: pointer;\n}\n.react-list-table-tool-menu button.active::after {\n  content: "\\2713";\n  margin-left: 12px;\n  font-size: 12px;\n}\n.react-list-table-tool-menu button:hover,\n.react-list-table-tool-menu button.active {\n  color: #1677ff;\n  background: #e6f4ff;\n}\n.react-list-table-column-setting {\n  width: 328px;\n  max-height: 360px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n.react-list-table-column-setting-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 6px 8px;\n  border-bottom: 1px solid #f0f0f0;\n  flex: 0 0 auto;\n}\n.react-list-table-column-setting-head button {\n  border: 0;\n  color: #1677ff;\n  background: transparent;\n  cursor: pointer;\n}\n.react-list-table-column-setting-body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n}\n.react-list-table-column-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  justify-content: space-between;\n  padding: 7px 6px;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n.react-list-table-column-main,\n.react-list-table-column-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n.react-list-table-column-main {\n  min-width: 0;\n}\n.react-list-table-column-actions {\n  flex: 0 0 auto;\n}\n.react-list-table-column-actions > .canvas-react-select-wrap {\n  flex: 0 0 96px;\n  width: 96px;\n  height: 24px;\n}\n.react-list-table-column-label {\n  min-width: 64px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-column-width-input {\n  height: 22px;\n  padding-inline: 5px;\n}\n.react-list-table-column-fixed-input {\n  height: 22px;\n  padding-inline: 6px;\n  font-size: 12px;\n}\n.react-list-table-column-setting label.dragging {\n  opacity: 0.45;\n  background: #e6f4ff;\n}\n.react-list-table-column-setting [data-sortable-key].dragging {\n  opacity: 0.28;\n}\n.react-list-table-column-drag {\n  color: #94a3b8;\n  display: inline-flex;\n  font-size: 14px;\n  cursor: grab;\n  user-select: none;\n}\nbody.react-list-table-sorting,\nbody.react-list-table-sorting * {\n  cursor: grabbing !important;\n}\n.react-list-table-sort-overlay {\n  position: fixed;\n  z-index: 1400;\n  display: block;\n  padding: 0;\n  box-sizing: border-box;\n  color: #334155;\n  background: #fff;\n  border: 1px solid #91caff;\n  border-radius: 6px;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n  pointer-events: none;\n}\n.react-list-table-sort-overlay .react-list-table-column-item {\n  width: 100%;\n  height: 100%;\n}\n');
 function ReactTableToolbar(props) {
   const { toolbar, title } = props;
   const [densityOpen, setDensityOpen] = useState(false);
@@ -3376,11 +3384,14 @@ function ReactTableToolbar(props) {
   useEffect(() => {
     const handleFullscreenChange = () => {
       const fullscreenNode = (typeof toolbar === "object" ? toolbar.getFullscreenNode?.() : null) ?? props.hostRef.current;
-      setIsFullscreen(document.fullscreenElement === fullscreenNode);
+      const nextIsFullscreen = document.fullscreenElement === fullscreenNode;
+      setIsFullscreen(nextIsFullscreen);
+      props.onFullscreenChange?.(nextIsFullscreen);
     };
+    handleFullscreenChange();
     document.addEventListener("fullscreenchange", handleFullscreenChange);
     return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
-  }, [props.hostRef, toolbar]);
+  }, [props.hostRef, props.onFullscreenChange, toolbar]);
   if (!title && !hasToolbar) return null;
   const config = typeof toolbar === "object" ? toolbar : {};
   return /* @__PURE__ */ jsxs("div", { className: "react-list-table-titlebar", ref: rootRef, children: [
@@ -3712,6 +3723,12 @@ function useReactListTableState(options) {
 }
 
 // src/components/build-list-table-options.ts
+function resolveDensityLinkedHeight(densityOverride, configuredHeight) {
+  return typeof densityOverride === "number" ? densityOverride : configuredHeight;
+}
+function resolveFullscreenTableSize(width, height, isFullscreen) {
+  return isFullscreen ? { width: "100%", height: "100%" } : { width, height };
+}
 function buildListTableOptions(props) {
   const {
     width,
@@ -3726,6 +3743,7 @@ function buildListTableOptions(props) {
   return {
     type: "list",
     ...restProps,
+    rowHeight: restProps.rowHeight ?? 32,
     width: scroll?.x === true ? "100%" : scroll?.x ?? width,
     height: scroll?.y ?? height,
     emptyText: locale?.emptyText ?? emptyText,
@@ -3776,9 +3794,8 @@ function ReactListTableInner(props, ref) {
     toolbar
   } = props;
   const shellRef = useRef(null);
-  const [densityOverride, setDensityOverride] = useState(
-    null
-  );
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [densityOverride, setDensityOverride] = useState(null);
   const [columnVisibility, setColumnVisibility] = useState(() => /* @__PURE__ */ new Map());
   const [columnOrders, setColumnOrders] = useState(
     () => /* @__PURE__ */ new Map()
@@ -3794,8 +3811,14 @@ function ReactListTableInner(props, ref) {
     [columns, columnVisibility, columnOrders, columnConfig]
   );
   const resolvedRowHeight = densityOverride ?? rowHeight;
-  const resolvedHeaderRowHeight = densityOverride ?? headerRowHeight;
-  const resolvedSummaryRowHeight = densityOverride ?? summaryRowHeight;
+  const resolvedHeaderRowHeight = resolveDensityLinkedHeight(
+    densityOverride,
+    headerRowHeight
+  );
+  const resolvedSummaryRowHeight = resolveDensityLinkedHeight(
+    densityOverride,
+    summaryRowHeight
+  );
   const options = useMemo(() => {
     const nextOptions = buildListTableOptions({
       width,
@@ -3832,8 +3855,14 @@ function ReactListTableInner(props, ref) {
       rowDrag,
       debug
     });
+    const fullscreenSize = resolveFullscreenTableSize(
+      nextOptions.width,
+      nextOptions.height,
+      isFullscreen
+    );
     return {
       ...nextOptions,
+      ...fullscreenSize,
       ui: {
         ...nextOptions.ui,
         onDensityChange: setDensityOverride
@@ -3872,7 +3901,8 @@ function ReactListTableInner(props, ref) {
     draggable,
     tableId,
     rowDrag,
-    debug
+    debug,
+    isFullscreen
   ]);
   const {
     containerRef,
@@ -3915,7 +3945,11 @@ function ReactListTableInner(props, ref) {
       "div",
       {
         ref: shellRef,
-        className,
+        className: [
+          "react-list-table-shell",
+          isFullscreen ? "react-list-table-shell-fullscreen" : "",
+          className
+        ].filter(Boolean).join(" "),
         style: {
           position: "relative",
           display: "flex",
@@ -3930,8 +3964,9 @@ function ReactListTableInner(props, ref) {
               title,
               toolbar,
               columns: resolvedColumns,
-              density: resolvedRowHeight === "auto" ? 32 : resolvedRowHeight ?? 32,
+              density: resolvedRowHeight ?? 32,
               hostRef: shellRef,
+              onFullscreenChange: setIsFullscreen,
               onExport: (options2) => tableRef.current?.exportXlsx(options2),
               onDensityChange: (density) => {
                 tableRef.current?.changeDensity(density);
@@ -3985,6 +4020,7 @@ function ReactListTableInner(props, ref) {
             "div",
             {
               ref: containerRef,
+              className: "react-list-table-host",
               style: { flex: 1, minWidth: 0, width: "100%", minHeight: 0 },
               children: /* @__PURE__ */ jsx(ReactTablePaginationView, { config: paginationConfig })
             }