From 3ba8486b6fba826764cfbf049aef56f431b24561 Mon Sep 17 00:00:00 2001 From: Pawel Date: Thu, 24 Oct 2024 17:31:51 +0200 Subject: [PATCH] docs changes --- reactgrid/lib/cellTemplates/NumberCell.tsx | 2 +- reactgrid/lib/cellTemplates/TextCell.tsx | 2 +- reactgrid/lib/components/CellContext.tsx | 10 +- reactgrid/lib/components/Pane.tsx | 2 +- reactgrid/lib/types/PublicModel.ts | 2 +- reactgrid/lib/types/RGTheme.ts | 1 - website/app/globals.css | 13 +- website/app/layout.tsx | 11 ++ .../10-copy-cut-paste.mdx | 2 +- .../2-handling-changes.mdx | 2 +- .../3-column-resizing.mdx | 2 +- .../2-implementing-core-features/4-sticky.mdx | 2 +- .../5-fill-handle.mdx | 2 +- .../6-styled-ranges.mdx | 2 +- .../8-cell-span.mdx | 4 +- .../9-column-and-row-reordering.mdx | 121 ++++++++------- .../5.0/4-create-your-own-cell-template.mdx | 138 +++++++++--------- website/pages/docs/5.0/5-styling.mdx | 55 ++++++- .../5.0/6-api/2-hooks/1-usereactgridapi.mdx | 4 +- .../5.0/6-api/2-hooks/2-usecellcontext.mdx | 28 ++++ 20 files changed, 243 insertions(+), 162 deletions(-) create mode 100644 website/pages/docs/5.0/6-api/2-hooks/2-usecellcontext.mdx diff --git a/reactgrid/lib/cellTemplates/NumberCell.tsx b/reactgrid/lib/cellTemplates/NumberCell.tsx index aa9d5a57..b50383aa 100644 --- a/reactgrid/lib/cellTemplates/NumberCell.tsx +++ b/reactgrid/lib/cellTemplates/NumberCell.tsx @@ -69,7 +69,7 @@ export const NumberCell: FC = ({ 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 index f4554fdc..761c3335 100644 --- a/reactgrid/lib/cellTemplates/TextCell.tsx +++ b/reactgrid/lib/cellTemplates/TextCell.tsx @@ -38,7 +38,7 @@ export const TextCell: FC = ({ 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 index 20a36bf8..2efff140 100644 --- 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({ 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 index 36f6faad..55abb411 100644 --- a/reactgrid/lib/components/Pane.tsx +++ b/reactgrid/lib/components/Pane.tsx @@ -120,7 +120,7 @@ export const PaneGridContent: React.FC = 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 index a6b5cb8d..b813b61f 100644 --- 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 index e611d552..7d2f16a8 100644 --- 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 index 781bbe96..1372c365 100644 --- 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; } -} +} \ No newline at end of file diff --git a/website/app/layout.tsx b/website/app/layout.tsx index 05e40578..2cd00bdd 100644 --- 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 ( +
{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 index e226de59..c4be6a8d 100644 --- 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 index 4e333123..6f155852 100644 --- 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 index b450e079..3a885030 100644 --- 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 index ff742bd4..b9d40ee1 100644 --- 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 index f54f2150..bca5162f 100644 --- 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 index 2a9ebb7d..411130cd 100644 --- 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 index b9a22f7c..119cfcce 100644 --- 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/website/pages/docs/5.0/2-implementing-core-features/9-column-and-row-reordering.mdx b/website/pages/docs/5.0/2-implementing-core-features/9-column-and-row-reordering.mdx index 2d748d05..ba7f3b13 100644 --- a/website/pages/docs/5.0/2-implementing-core-features/9-column-and-row-reordering.mdx +++ b/website/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> +) => { + 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 = (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> -) => { - 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(, document.getElementById("root")); `} /> \ No newline at end of file diff --git a/website/pages/docs/5.0/4-create-your-own-cell-template.mdx b/website/pages/docs/5.0/4-create-your-own-cell-template.mdx index b5e46eb1..f19fe3c2 100644 --- a/website/pages/docs/5.0/4-create-your-own-cell-template.mdx +++ b/website/pages/docs/5.0/4-create-your-own-cell-template.mdx @@ -7,8 +7,8 @@ metaDescription: "ReactGrid docs" ## Custom cell templates -Creating a cell template is the best way to customize data visualization and behaviour in ReactGrid. -You can define your own one and then use it as other built-in cell types. For example if you want use custom text cell you can copy default [TextCell](/docs/5.0/3-cell-templates/1-text-cell) component and modify it as you want. +Creating a cell template is the best way to customize data visualization and behavior in ReactGrid. +You can define your own one and then use it as other built-in cell templates. For example if you want use custom text cell you can copy default [TextCell](/docs/5.0/3-cell-templates/1-text-cell) component and modify it as you want. The key to implementing a custom cell is integrating it with the `CellWrapper`, which handles communication between the cell and ReactGrid. @@ -16,7 +16,7 @@ The key to implementing a custom cell is integrating it with the `CellWrapper`, value?.toString() || ""} onStringValueReceived={() => { - // Logic to update the cell value + // Logic to update the cell value during operations like cut, copy, paste or fill }} > {/* Render cell content here */} @@ -33,11 +33,11 @@ type CellWrapperProps = React.HTMLAttributes & { }; ``` -#### Example +When creating your own cell template, you can also use the [useCellContext](/docs/5.0/6-api/2-hooks/2-usecellcontext) hook to get details about a specific cell. -Let's create a custom `DateCell` template: +#### Example -### Live example +
Let's create a custom `DateCell` template:
import LiveCode from "@/nextra/components/LiveCode.tsx"; import React, { useState, useRef } from "react"; @@ -106,6 +106,68 @@ const peopleData = [ }, ]; +interface DateCellProps { + value: Moment; + onValueChanged: (data: Moment) => void; +} + +const DateCell: FC = ({ value, onValueChanged }) => { + const ctx = useCellContext(); + const targetInputRef = useRef(null); + const [isEditMode, setEditMode] = useState(false); + + let formattedDate: string | undefined; + + if (!value) { + formattedDate = ""; + } else { + formattedDate = value.format("DD-MM-YYYY"); + } + + return ( + value.toDate().toDateString()} + onStringValueReceived={(v) => onValueChanged?.(moment(v))} + style={{ padding: ".2rem", textAlign: "center", outline: "none" }} + onDoubleClick={() => { + ctx.isFocused && setEditMode(true); + }} + onKeyDown={(e) => { + if (!isEditMode && e.key === "Enter") { + e.stopPropagation(); + setEditMode(true); + } + }} + > + {isEditMode ? ( + { + const changedDate = e.currentTarget.value; + changedDate && onValueChanged(moment(e.currentTarget.value)); + setEditMode(false); + }} + onPointerDown={(e) => e.stopPropagation()} + onKeyDown={(e) => { + if (e.key === "Escape") { + setEditMode(false); + } else if (e.key === "Enter") { + onValueChanged(moment(e.currentTarget.value)); + setEditMode(false); + } + }} + autoFocus + ref={targetInputRef} + /> + ) : ( + formattedDate + )} + + ); +}; + const cellStyles = { header: { backgroundColor: "#55bc71", @@ -206,7 +268,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)); }); }; @@ -225,68 +287,6 @@ const ReactGridExample = () => { ); }; -interface DateCellProps { - value: Moment; - onValueChanged: (data: Moment) => void; -} - -const DateCell: FC = ({ value, onValueChanged }) => { - const ctx = useCellContext(); - const targetInputRef = useRef(null); - const [isEditMode, setEditMode] = useState(false); - - let formattedDate: string | undefined; - - if (!value) { - formattedDate = ""; - } else { - formattedDate = value.format("DD-MM-YYYY"); - } - - return ( - value.toDate().toDateString()} - onStringValueReceived={(v) => onValueChanged?.(moment(v))} - style={{ padding: ".2rem", textAlign: "center", outline: "none" }} - onDoubleClick={() => { - ctx.isFocused && setEditMode(true); - }} - onKeyDown={(e) => { - if (!isEditMode && e.key === "Enter") { - e.stopPropagation(); - setEditMode(true); - } - }} - > - {isEditMode ? ( - { - const changedDate = e.currentTarget.value; - changedDate && onValueChanged(moment(e.currentTarget.value)); - setEditMode(false); - }} - onPointerDown={(e) => e.stopPropagation()} - onKeyDown={(e) => { - if (e.key === "Escape") { - setEditMode(false); - } else if (e.key === "Enter") { - onValueChanged(moment(e.currentTarget.value)); - setEditMode(false); - } - }} - autoFocus - ref={targetInputRef} - /> - ) : ( - formattedDate - )} - - ); -}; - render(, document.getElementById("root")); `} /> diff --git a/website/pages/docs/5.0/5-styling.mdx b/website/pages/docs/5.0/5-styling.mdx index c9fa32fe..70472c83 100644 --- a/website/pages/docs/5.0/5-styling.mdx +++ b/website/pages/docs/5.0/5-styling.mdx @@ -9,6 +9,59 @@ metaDescription: "ReactGrid docs" In version 5, ReactGrid introduces the `RGTheme` interface, allowing you to apply a theme directly to the grid. You can also customize styles by passing them through individual [cell](/docs/5.0/6-api/1-types/3-cell) properties or using standard CSS. +```ts +interface RGTheme { + gap: { + width: React.CSSProperties["width"]; + color: React.CSSProperties["color"]; + }; + paneContainer: { + top: { + background: React.CSSProperties["backgroundColor"]; + boxShadow: React.CSSProperties["boxShadow"]; + }; + right: { + background: React.CSSProperties["backgroundColor"]; + boxShadow: React.CSSProperties["boxShadow"]; + }; + bottom: { + background: React.CSSProperties["backgroundColor"]; + boxShadow: React.CSSProperties["boxShadow"]; + }; + left: { + background: React.CSSProperties["backgroundColor"]; + boxShadow: React.CSSProperties["boxShadow"]; + }; + }; + cellContainer: { + padding: Padding; + background: React.CSSProperties["backgroundColor"]; + }; + area: { + border: Border; + }; + focusIndicator: { + background: React.CSSProperties["backgroundColor"]; + border: Border; + }; + fillHandle: { + background: React.CSSProperties["backgroundColor"]; + border: Border; + }; + line: { backgroundColor: React.CSSProperties["backgroundColor"]; size: number | string }; + shadow: { backgroundColor: React.CSSProperties["backgroundColor"] }; + resizeColumn: { + default: React.CSSProperties; + hover: React.CSSProperties; + }; + selectionIndicator: { + background: React.CSSProperties["backgroundColor"]; + border: Border; + }; + gridWrapper: React.CSSProperties; +} +``` + #### Live example --- @@ -171,7 +224,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/6-api/2-hooks/1-usereactgridapi.mdx b/website/pages/docs/5.0/6-api/2-hooks/1-usereactgridapi.mdx index d473eebb..a24eb295 100644 --- a/website/pages/docs/5.0/6-api/2-hooks/1-usereactgridapi.mdx +++ b/website/pages/docs/5.0/6-api/2-hooks/1-usereactgridapi.mdx @@ -5,12 +5,10 @@ metaTitle: "useReactGridAPI hook" metaDescription: "ReactGrid docs" --- -## Introduction +## useReactGridAPI The `useReactGridAPI` hook provides a set of methods to interact with the ReactGrid component. It allows you to set and get various states of the grid, such as the selected area, focused cell, and selected rows or columns. This hook is essential for managing the grid's state programmatically. -#### Definition - ```ts function useReactGridAPI(id: string): ReactGridAPI | undefined { return useReactGridStoreApi(id, (store: ReactGridStore) => { diff --git a/website/pages/docs/5.0/6-api/2-hooks/2-usecellcontext.mdx b/website/pages/docs/5.0/6-api/2-hooks/2-usecellcontext.mdx new file mode 100644 index 00000000..cd4fbe36 --- /dev/null +++ b/website/pages/docs/5.0/6-api/2-hooks/2-usecellcontext.mdx @@ -0,0 +1,28 @@ +--- +posttype: "docs" +title: useCellContext +metaTitle: "useCellContext hook" +metaDescription: "ReactGrid docs" +--- + +## useCellContext +The `useCellContext` hook provides access to the context of a specific cell within the ReactGrid component. This hook is essential for obtaining detailed information about a cell's position, selection state, focus state, and styling. It allows you to interact with and manipulate individual cells programmatically. + +```ts +import { useCellContext } from '@silevis/reactgrid' + +const ctx = useCellContext(); +``` + +#### Properties + + +| Name | Type | Description | +|---------------------|---------------------------|--------------------------------------------------------------------| +| `realRowIndex` | `number` | Numerical cell's row index representation in relation to the whole grid. | +| `realColumnIndex` | `number` | Numerical cell's column index representation in relation to the whole grid. | +| `rowSpan` | `number \| undefined` | Represents how many rows the cell should occupy. | +| `colSpan` |` number \| undefined` | Represents how many columns the cell should occupy. | +| `containerStyle` | `React.CSSProperties` | Provides the cell container's style. | +| `isSelected` | `boolean` | Checks if the cell is selected. | +| `isFocused` | `boolean` | Checks if the cell is focused. |