docs changes

silevis · Oct 24, 2024 · 3ba8486 · 3ba8486
1 parent 048d113
commit 3ba8486
Show file tree

Hide file tree

Showing 20 changed files with 243 additions and 162 deletions.
diff --git a/reactgrid/lib/cellTemplates/NumberCell.tsx b/reactgrid/lib/cellTemplates/NumberCell.tsx
@@ -69,7 +69,7 @@ export const NumberCell: FC<NumberCellProps> = ({
         if ((!isEditMode && numberKeys.includes(e.key)) || (allowSeparators && numberSeparators.includes(e.key))) {
           setCurrentValue("");
           setEditMode(true);
-        } else if (!isEditMode && !ctx.isCellSelected && (e.key === "Enter" || e.key === "F2")) {
+        } else if (!isEditMode && !ctx.isSelected && (e.key === "Enter" || e.key === "F2")) {
           e.stopPropagation();
           setCurrentValue(initialValueStr || "0");
           setEditMode(true);

diff --git a/reactgrid/lib/cellTemplates/TextCell.tsx b/reactgrid/lib/cellTemplates/TextCell.tsx
@@ -38,7 +38,7 @@ export const TextCell: FC<TextCellProps> = ({ text: initialText, onTextChanged,
           e.stopPropagation();
           setCurrentValue("");
           setEditMode(true);
-        } else if (!isEditMode && !ctx.isCellSelected && (e.key === "Enter" || e.key === "F2")) {
+        } else if (!isEditMode && !ctx.isSelected && (e.key === "Enter" || e.key === "F2")) {
           e.stopPropagation();
           setCurrentValue(initialText || "");
           setEditMode(true);

diff --git a/reactgrid/lib/components/CellContext.tsx b/reactgrid/lib/components/CellContext.tsx
@@ -9,7 +9,7 @@ interface CellContextProviderProps {
   realRowIndex: number;
   realColumnIndex: number;
   cell: Cell;
-  isCellSelected: boolean;
+  isSelected: boolean;
   isFocused: boolean;
   rowSpan?: number;
   colSpan?: number;
@@ -22,7 +22,7 @@ interface CellContextProviderProps {
 export const CellContext = createContext<CellContextType>({
   realRowIndex: -1,
   realColumnIndex: -1,
-  isCellSelected: false,
+  isSelected: false,
   isFocused: false,
   containerStyle: {},
 });
@@ -47,7 +47,7 @@ export const CellContextProvider = memo(
     colSpan,
     getCellOffset = () => ({}),
     cell,
-    isCellSelected,
+    isSelected,
     isFocused,
   }: CellContextProviderProps) => {
     const { Template, props } = cell;
@@ -57,7 +57,7 @@ export const CellContextProvider = memo(
         value={{
           realRowIndex,
           realColumnIndex,
-          isCellSelected,
+          isSelected,
           isFocused,
           containerStyle: {
             ...(rowSpan && {
@@ -80,7 +80,7 @@ export const CellContextProvider = memo(
     return (
       !next.shouldRenderReorderedCells &&
       deepCompare(prev.cell, next.cell) &&
-      prev.isCellSelected === next.isCellSelected &&
+      prev.isSelected === next.isSelected &&
       prev.isFocused === next.isFocused &&
       prev.getCellOffset === next.getCellOffset
     );

diff --git a/reactgrid/lib/components/Pane.tsx b/reactgrid/lib/components/Pane.tsx
@@ -120,7 +120,7 @@ export const PaneGridContent: React.FC<PaneGridContentProps> = React.memo(
             realColumnIndex={realColumnIndex}
             getCellOffset={memoizedGetCellOffset}
             shouldRenderReorderedCells={shouldRenderReorderedCells}
-            isCellSelected={isCellSelected}
+            isSelected={isCellSelected}
             isFocused={isFocused}
           />
         );

diff --git a/reactgrid/lib/types/PublicModel.ts b/reactgrid/lib/types/PublicModel.ts
@@ -68,7 +68,7 @@ export type CellContextType = {
   containerStyle: React.CSSProperties;
 
   /** Checks if the cell is selected */
-  isCellSelected: boolean;
+  isSelected: boolean;
 
   /** Checks if the cell is focused */
   isFocused: boolean;

diff --git a/reactgrid/lib/types/RGTheme.ts b/reactgrid/lib/types/RGTheme.ts
@@ -18,7 +18,6 @@ type Padding = {
 export interface RGTheme {
   gap: {
     width: React.CSSProperties["width"];
-    /** Changes grid's background color for the gap to appear colored */
     color: React.CSSProperties["color"];
   };
   paneContainer: {

diff --git a/website/app/globals.css b/website/app/globals.css
@@ -31,7 +31,7 @@ body {
 }
 
 .react-grid-sample2 {
-  background: linear-gradient(to bottom, #ffffff 80%, transparent 80%),  url(../public/static/noise-texture-2.webp);
+  background: linear-gradient(to bottom, #ffffff 80%, transparent 80%), url(../public/static/noise-texture-2.webp);
 }
 
 /* override daisyui theme */
@@ -50,10 +50,7 @@ body {
 }
 
 /* override nextra banner background on dark mode */
-:is(
-    html[class~="dark"]
-      .dark\:nx-bg-\[linear-gradient\(1deg\,\#383838\,\#212121\)\]
-  ) {
+:is(html[class~="dark"] .dark\:nx-bg-\[linear-gradient\(1deg\,\#383838\,\#212121\)\]) {
   background-image: none !important;
 }
 
@@ -74,10 +71,6 @@ body {
   background-image: url(../public/static/noise-texture-2.webp);
 }
 
-.LiveCode input[type="date"]::-webkit-calendar-picker-indicator {
-  filter: invert(1);
-}
-
 #cc-main {
   /** Change font **/
   --cc-font-family: Roboto;
@@ -166,4 +159,4 @@ body {
   body {
     @apply bg-background text-foreground;
   }
-}
+}
diff --git a/website/app/layout.tsx b/website/app/layout.tsx
@@ -6,6 +6,7 @@ import { Footer } from "@/components/footer";
 import "vanilla-cookieconsent/dist/cookieconsent.css";
 import CookieConsentComponent from "../components/cookie-consent";
 import GoogleAnalytics from "@/components/google-analytics";
+import Script from "next/script";
 
 const dm_sans = DM_Sans({
   subsets: ["latin"],
@@ -44,6 +45,16 @@ export default function RootLayout({
   return (
     <html lang="en" className={`${dm_mono.variable} ${dm_sans.variable}`}>
       <body>
+        <Script id="">
+          {`
+              if (!window.localStorage.getItem("theme_default")) {
+                window.localStorage.setItem("theme", "light");
+                window.localStorage.setItem("theme_default", "light");
+                document.documentElement.classList.add("light");
+                document.documentElement.classList.remove("dark");
+              }
+          `}
+        </Script>
         <GoogleAnalytics />
         <Header>
           {children}

diff --git a/website/pages/docs/5.0/2-implementing-core-features/10-copy-cut-paste.mdx b/website/pages/docs/5.0/2-implementing-core-features/10-copy-cut-paste.mdx
@@ -205,7 +205,7 @@ const ReactGridExample = () => {
 
   const updatePerson = (id, key, newValue) => {
     setPeople((prev) => {
-      return prev.map((p) => (p.id !== id ? p : { ...p, [key]: newValue }));
+      return prev.map((p) => (p.id === id ? { ...p, [key]: newValue } : p));
     });
   };
 

diff --git a/website/pages/docs/5.0/2-implementing-core-features/2-handling-changes.mdx b/website/pages/docs/5.0/2-implementing-core-features/2-handling-changes.mdx
@@ -82,7 +82,7 @@ const ReactGridExample = () => {
 
   const updatePerson = (id, key, newValue) => {
     setPeople((prev) => {
-      return prev.map((p) => (p._id !== id ? p : { ...p, [key]: newValue }));
+      return prev.map((p) => (p.id === id ? { ...p, [key]: newValue } : p));
     });
   };
 

diff --git a/website/pages/docs/5.0/2-implementing-core-features/3-column-resizing.mdx b/website/pages/docs/5.0/2-implementing-core-features/3-column-resizing.mdx
@@ -183,7 +183,7 @@ const ReactGridExample = () => {
 
   const updatePerson = (id, key, newValue) => {
     setPeople((prev) => {
-      return prev.map((p) => (p.id !== id ? p : { ...p, [key]: newValue }));
+      return prev.map((p) => (p.id === id ? { ...p, [key]: newValue } : p));
     });
   };
 

diff --git a/website/pages/docs/5.0/2-implementing-core-features/4-sticky.mdx b/website/pages/docs/5.0/2-implementing-core-features/4-sticky.mdx
@@ -189,7 +189,7 @@ const ReactGridExample = () => {
 
   const updatePerson = (id, key, newValue) => {
     setPeople((prev) => {
-      return prev.map((p) => (p.id !== id ? p : { ...p, [key]: newValue }));
+      return prev.map((p) => (p.id === id ? { ...p, [key]: newValue } : p));
     });
   };
 

diff --git a/website/pages/docs/5.0/2-implementing-core-features/5-fill-handle.mdx b/website/pages/docs/5.0/2-implementing-core-features/5-fill-handle.mdx
@@ -201,7 +201,7 @@ const ReactGridExample = () => {
 
   const updatePerson = (id, key, newValue) => {
     setPeople((prev) => {
-      return prev.map((p) => (p.id !== id ? p : { ...p, [key]: newValue }));
+      return prev.map((p) => (p.id === id ? { ...p, [key]: newValue } : p));
     });
   };
 

diff --git a/website/pages/docs/5.0/2-implementing-core-features/6-styled-ranges.mdx b/website/pages/docs/5.0/2-implementing-core-features/6-styled-ranges.mdx
@@ -193,7 +193,7 @@ const ReactGridExample = () => {
 
   const updatePerson = (id, key, newValue) => {
     setPeople((prev) => {
-      return prev.map((p) => (p.id !== id ? p : { ...p, [key]: newValue }));
+      return prev.map((p) => (p.id === id ? { ...p, [key]: newValue } : p));
     });
   };
 

diff --git a/website/pages/docs/5.0/2-implementing-core-features/8-cell-span.mdx b/website/pages/docs/5.0/2-implementing-core-features/8-cell-span.mdx
@@ -91,7 +91,6 @@ const generateCells = (categories: Category[], updateCategories: UpdateCategoryF
     }));
   };
 
-  // Spanned cells index
   const spannedCellsIdx = [
     { rowIndex: 2, colIndex: 1, rowSpan: 2 },
     { rowIndex: 2, colIndex: 2, rowSpan: 2 },
@@ -107,7 +106,8 @@ const generateCells = (categories: Category[], updateCategories: UpdateCategoryF
 
   const getSpan = (rowIndex: number, colIndex: number) => {
     const spannedCell = spannedCellsIdx.find((cell) => cell.rowIndex === rowIndex && cell.colIndex === colIndex);
-    return spannedCell ? { rowSpan: spannedCell.rowSpan } : {};
+    if(!spannedCell) return null;
+    return { rowSpan: spannedCell.rowSpan };
   };
 
   const generateRowCells = (rowIndex: number, category: Category): Cell[] => {

diff --git a/...ite/pages/docs/5.0/2-implementing-core-features/9-column-and-row-reordering.mdx b/...ite/pages/docs/5.0/2-implementing-core-features/9-column-and-row-reordering.mdx
@@ -129,6 +129,65 @@ const getColumns = (): ColumnDef[] => [
   { colIndex: 3, width: 220, title: "Company" },
 ];
 
+const handleRowReorder = (
+  peopleData: Person[],
+  selectedRowIndexes: number[],
+  destinationRowIdx: number,
+  updatePerson: (id: string, key: string, newValue: number) => void
+) => {
+  const prevPeopleData = [...peopleData].sort((a, b) => a.position - b.position);
+
+  // Adjust the destination index to account for the header row
+  const adjustedDestinationIdx = destinationRowIdx - 1;
+  const adjustedSelectedRowIdxs = selectedRowIndexes.map((rowIdx) => rowIdx - 1);
+
+  const isReorderingUpwards = adjustedSelectedRowIdxs.some((rowIdx) => rowIdx > adjustedDestinationIdx);
+
+  adjustedSelectedRowIdxs.forEach((rowIdx, index) => {
+    if (adjustedDestinationIdx === 0) {
+      prevPeopleData[rowIdx].position = prevPeopleData[adjustedDestinationIdx].position / 2 + index * 0.0001;
+    } else if (adjustedDestinationIdx === peopleData.length - 1) {
+      prevPeopleData[rowIdx].position = prevPeopleData[adjustedDestinationIdx].position + 1 + index * 0.0001;
+    } else if (isReorderingUpwards) {
+      prevPeopleData[rowIdx].position =
+        (prevPeopleData[adjustedDestinationIdx].position + prevPeopleData[adjustedDestinationIdx - 1].position) / 2 +
+        index * 0.0001;
+    } else {
+      prevPeopleData[rowIdx].position =
+        (prevPeopleData[adjustedDestinationIdx].position + prevPeopleData[adjustedDestinationIdx + 1].position) / 2 +
+        index * 0.0001;
+    }
+  });
+
+  prevPeopleData.forEach((row) => {
+    updatePerson(row.id, "position", row.position);
+  });
+};
+
+const handleColumnReorder = (
+  selectedColIndexes: number[],
+  destinationColIdx: number,
+  setColumns: React.Dispatch<React.SetStateAction<ColumnDef[]>>
+) => {
+  setColumns((prevColumns) => {
+    // Filter out the selected columns and unselected columns
+    const selectedColumns = prevColumns.filter((_, index) => selectedColIndexes.includes(index));
+    const unselectedColumns = prevColumns.filter((_, index) => !selectedColIndexes.includes(index));
+
+    // Adjust the destination index based on the direction of the reorder
+    const adjustedDestinationColIdx =
+      selectedColIndexes[0] > destinationColIdx ? destinationColIdx : destinationColIdx - selectedColumns.length + 1;
+
+    // Create the new columns array with reordered columns
+    const newColumns = [
+      ...unselectedColumns.slice(0, adjustedDestinationColIdx),
+      ...selectedColumns,
+      ...unselectedColumns.slice(adjustedDestinationColIdx),
+    ];
+
+    return newColumns;
+  });
+};
 
 type UpdatePerson = <T>(id: string, key: string, newValue: T) => void;
 
@@ -204,7 +263,7 @@ const ReactGridExample = () => {
 
   const updatePerson = (id, key, newValue) => {
     setPeople((prev) => {
-      return prev.map((p) => (p.id !== id ? p : { ...p, [key]: newValue }));
+      return prev.map((p) => (p.id === id ? { ...p, [key]: newValue } : p));
     });
   };
 
@@ -231,66 +290,6 @@ const ReactGridExample = () => {
   );
 };
 
-const handleRowReorder = (
-  peopleData: Person[],
-  selectedRowIndexes: number[],
-  destinationRowIdx: number,
-  updatePerson: (id: string, key: string, newValue: number) => void
-) => {
-  const prevPeopleData = [...peopleData].sort((a, b) => a.position - b.position);
-
-  // Adjust the destination index to account for the header row
-  const adjustedDestinationIdx = destinationRowIdx - 1;
-  const adjustedSelectedRowIdxs = selectedRowIndexes.map((rowIdx) => rowIdx - 1);
-
-  const isReorderingUpwards = adjustedSelectedRowIdxs.some((rowIdx) => rowIdx > adjustedDestinationIdx);
-
-  adjustedSelectedRowIdxs.forEach((rowIdx, index) => {
-    if (adjustedDestinationIdx === 0) {
-      prevPeopleData[rowIdx].position = prevPeopleData[adjustedDestinationIdx].position / 2 + index * 0.0001;
-    } else if (adjustedDestinationIdx === peopleData.length - 1) {
-      prevPeopleData[rowIdx].position = prevPeopleData[adjustedDestinationIdx].position + 1 + index * 0.0001;
-    } else if (isReorderingUpwards) {
-      prevPeopleData[rowIdx].position =
-        (prevPeopleData[adjustedDestinationIdx].position + prevPeopleData[adjustedDestinationIdx - 1].position) / 2 +
-        index * 0.0001;
-    } else {
-      prevPeopleData[rowIdx].position =
-        (prevPeopleData[adjustedDestinationIdx].position + prevPeopleData[adjustedDestinationIdx + 1].position) / 2 +
-        index * 0.0001;
-    }
-  });
-
-  prevPeopleData.forEach((row) => {
-    updatePerson(row.id, "position", row.position);
-  });
-};
-
-const handleColumnReorder = (
-  selectedColIndexes: number[],
-  destinationColIdx: number,
-  setColumns: React.Dispatch<React.SetStateAction<ColumnDef[]>>
-) => {
-  setColumns((prevColumns) => {
-    // Filter out the selected columns and unselected columns
-    const selectedColumns = prevColumns.filter((_, index) => selectedColIndexes.includes(index));
-    const unselectedColumns = prevColumns.filter((_, index) => !selectedColIndexes.includes(index));
-
-    // Adjust the destination index based on the direction of the reorder
-    const adjustedDestinationColIdx =
-      selectedColIndexes[0] > destinationColIdx ? destinationColIdx : destinationColIdx - selectedColumns.length + 1;
-
-    // Create the new columns array with reordered columns
-    const newColumns = [
-      ...unselectedColumns.slice(0, adjustedDestinationColIdx),
-      ...selectedColumns,
-      ...unselectedColumns.slice(adjustedDestinationColIdx),
-    ];
-
-    return newColumns;
-  });
-};
-
 render(<ReactGridExample />, document.getElementById("root"));
 `}
 />