From 894db4a1506e9a776884f5fb9b8e0c5cb7785bf0 Mon Sep 17 00:00:00 2001 From: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com> Date: Mon, 19 Aug 2024 14:02:30 +0200 Subject: [PATCH] feat(dashboard): Hitting escape restores previous value (#8654) * feat(dashboard): Hitting escape restores previous value * update lock --- .../data-grid-readonly-cell.tsx | 6 +- .../data-grid/data-grid-cells/index.ts | 6 + .../create-data-grid-price-columns.tsx} | 12 +- .../data-grid-column-helpers/index.ts | 1 + .../{data-grid-root => }/data-grid-root.tsx | 79 ++- .../data-grid/data-grid-root/index.ts | 1 - .../data-grid-skeleton.tsx | 14 +- .../src/components/data-grid/data-grid.tsx | 35 + .../src/components/data-grid/index.ts | 3 + .../src/components/data-grid/types.ts | 6 + .../src/components/grid/constants.ts | 11 - .../data-grid-root/data-grid-root.tsx | 653 ------------------ .../grid/data-grid/data-grid-root/index.ts | 1 - .../data-grid/data-grid-skeleton/index.ts | 1 - .../components/grid/data-grid/data-grid.tsx | 19 - .../src/components/grid/data-grid/index.ts | 1 - .../common/boolean-cell/boolean-cell.tsx | 23 - .../grid-cells/common/boolean-cell/index.ts | 1 - .../common/currency-cell/currency-cell.tsx | 57 -- .../grid-cells/common/currency-cell/index.ts | 1 - .../grid-cells/common/readonly-cell/index.ts | 1 - .../common/readonly-cell/readonly-cell.tsx | 14 - .../grid/grid-cells/common/text-cell/index.ts | 1 - .../grid-cells/common/text-cell/text-cell.tsx | 24 - .../grid/grid-cells/common/void-cell/index.ts | 1 - .../grid-cells/common/void-cell/void-cell.tsx | 14 - .../dashboard/src/components/grid/types.ts | 11 - .../create-inventory-availability-form.tsx | 26 +- .../use-shipping-option-price-columns.tsx | 4 +- .../create-shipping-options-prices-form.tsx | 7 +- .../edit-shipping-options-pricing-form.tsx | 38 +- .../hooks/use-price-list-grid-columns.tsx | 14 +- .../price-list-prices-form.tsx | 4 +- .../price-list-prices-add-prices-form.tsx | 4 +- .../price-list-prices-edit-form.tsx | 4 +- .../products/common/variant-pricing-form.tsx | 21 +- .../product-create-variants-form.tsx | 43 +- packages/design-system/ui/package.json | 3 +- yarn.lock | 11 - 39 files changed, 203 insertions(+), 973 deletions(-) create mode 100644 packages/admin-next/dashboard/src/components/data-grid/data-grid-cells/index.ts rename packages/admin-next/dashboard/src/components/data-grid/{data-grid-columns/price-columns.tsx => data-grid-column-helpers/create-data-grid-price-columns.tsx} (89%) create mode 100644 packages/admin-next/dashboard/src/components/data-grid/data-grid-column-helpers/index.ts rename packages/admin-next/dashboard/src/components/data-grid/{data-grid-root => }/data-grid-root.tsx (96%) delete mode 100644 packages/admin-next/dashboard/src/components/data-grid/data-grid-root/index.ts rename packages/admin-next/dashboard/src/components/{grid/data-grid/data-grid-skeleton => data-grid}/data-grid-skeleton.tsx (81%) create mode 100644 packages/admin-next/dashboard/src/components/data-grid/data-grid.tsx create mode 100644 packages/admin-next/dashboard/src/components/data-grid/index.ts delete mode 100644 packages/admin-next/dashboard/src/components/grid/constants.ts delete mode 100644 packages/admin-next/dashboard/src/components/grid/data-grid/data-grid-root/data-grid-root.tsx delete mode 100644 packages/admin-next/dashboard/src/components/grid/data-grid/data-grid-root/index.ts delete mode 100644 packages/admin-next/dashboard/src/components/grid/data-grid/data-grid-skeleton/index.ts delete mode 100644 packages/admin-next/dashboard/src/components/grid/data-grid/data-grid.tsx delete mode 100644 packages/admin-next/dashboard/src/components/grid/data-grid/index.ts delete mode 100644 packages/admin-next/dashboard/src/components/grid/grid-cells/common/boolean-cell/boolean-cell.tsx delete mode 100644 packages/admin-next/dashboard/src/components/grid/grid-cells/common/boolean-cell/index.ts delete mode 100644 packages/admin-next/dashboard/src/components/grid/grid-cells/common/currency-cell/currency-cell.tsx delete mode 100644 packages/admin-next/dashboard/src/components/grid/grid-cells/common/currency-cell/index.ts delete mode 100644 packages/admin-next/dashboard/src/components/grid/grid-cells/common/readonly-cell/index.ts delete mode 100644 packages/admin-next/dashboard/src/components/grid/grid-cells/common/readonly-cell/readonly-cell.tsx delete mode 100644 packages/admin-next/dashboard/src/components/grid/grid-cells/common/text-cell/index.ts delete mode 100644 packages/admin-next/dashboard/src/components/grid/grid-cells/common/text-cell/text-cell.tsx delete mode 100644 packages/admin-next/dashboard/src/components/grid/grid-cells/common/void-cell/index.ts delete mode 100644 packages/admin-next/dashboard/src/components/grid/grid-cells/common/void-cell/void-cell.tsx delete mode 100644 packages/admin-next/dashboard/src/components/grid/types.ts diff --git a/packages/admin-next/dashboard/src/components/data-grid/data-grid-cells/data-grid-readonly-cell.tsx b/packages/admin-next/dashboard/src/components/data-grid/data-grid-cells/data-grid-readonly-cell.tsx index 2cee1fa3bd..f8f6c6d9b6 100644 --- a/packages/admin-next/dashboard/src/components/data-grid/data-grid-cells/data-grid-readonly-cell.tsx +++ b/packages/admin-next/dashboard/src/components/data-grid/data-grid-cells/data-grid-readonly-cell.tsx @@ -1,10 +1,10 @@ import { PropsWithChildren } from "react" -type DataGridReadOnlyCellProps = PropsWithChildren +type DataGridReadonlyCellProps = PropsWithChildren -export const DataGridReadOnlyCell = ({ +export const DataGridReadonlyCell = ({ children, -}: DataGridReadOnlyCellProps) => { +}: DataGridReadonlyCellProps) => { return (
{children} diff --git a/packages/admin-next/dashboard/src/components/data-grid/data-grid-cells/index.ts b/packages/admin-next/dashboard/src/components/data-grid/data-grid-cells/index.ts new file mode 100644 index 0000000000..f7a8f7af0c --- /dev/null +++ b/packages/admin-next/dashboard/src/components/data-grid/data-grid-cells/index.ts @@ -0,0 +1,6 @@ +export { DataGridBooleanCell } from "./data-grid-boolean-cell" +export { DataGridCurrencyCell } from "./data-grid-currency-cell" +export { DataGridNumberCell } from "./data-grid-number-cell" +export { DataGridReadonlyCell as DataGridReadOnlyCell } from "./data-grid-readonly-cell" +export { DataGridTextCell } from "./data-grid-text-cell" + diff --git a/packages/admin-next/dashboard/src/components/data-grid/data-grid-columns/price-columns.tsx b/packages/admin-next/dashboard/src/components/data-grid/data-grid-column-helpers/create-data-grid-price-columns.tsx similarity index 89% rename from packages/admin-next/dashboard/src/components/data-grid/data-grid-columns/price-columns.tsx rename to packages/admin-next/dashboard/src/components/data-grid/data-grid-column-helpers/create-data-grid-price-columns.tsx index 764132b0b3..4decd71b79 100644 --- a/packages/admin-next/dashboard/src/components/data-grid/data-grid-columns/price-columns.tsx +++ b/packages/admin-next/dashboard/src/components/data-grid/data-grid-column-helpers/create-data-grid-price-columns.tsx @@ -1,12 +1,12 @@ import { HttpTypes } from "@medusajs/types" import { CellContext, ColumnDef } from "@tanstack/react-table" import { TFunction } from "i18next" -import { IncludesTaxTooltip } from "../../../components/common/tax-badge/tax-badge" +import { IncludesTaxTooltip } from "../../common/tax-badge/tax-badge" import { DataGridCurrencyCell } from "../data-grid-cells/data-grid-currency-cell" -import { DataGridReadOnlyCell } from "../data-grid-cells/data-grid-readonly-cell" +import { DataGridReadonlyCell } from "../data-grid-cells/data-grid-readonly-cell" import { createDataGridHelper } from "../utils" -export const getPriceColumns = ({ +export const createDataGridPriceColumns = ({ currencies, regions, pricePreferences, @@ -44,7 +44,7 @@ export const getPriceColumns = ({ ), cell: (context) => { if (isReadyOnly?.(context)) { - return + return } return ( @@ -55,7 +55,6 @@ export const getPriceColumns = ({ /> ) }, - type: "string", }) }) ?? []), ...(regions?.map((region) => { @@ -78,7 +77,7 @@ export const getPriceColumns = ({ ), cell: (context) => { if (isReadyOnly?.(context)) { - return + return } const currency = currencies?.find((c) => c === region.currency_code) @@ -94,7 +93,6 @@ export const getPriceColumns = ({ /> ) }, - type: "string", }) }) ?? []), ] diff --git a/packages/admin-next/dashboard/src/components/data-grid/data-grid-column-helpers/index.ts b/packages/admin-next/dashboard/src/components/data-grid/data-grid-column-helpers/index.ts new file mode 100644 index 0000000000..37651147d6 --- /dev/null +++ b/packages/admin-next/dashboard/src/components/data-grid/data-grid-column-helpers/index.ts @@ -0,0 +1 @@ +export * from "./create-data-grid-price-columns" diff --git a/packages/admin-next/dashboard/src/components/data-grid/data-grid-root/data-grid-root.tsx b/packages/admin-next/dashboard/src/components/data-grid/data-grid-root.tsx similarity index 96% rename from packages/admin-next/dashboard/src/components/data-grid/data-grid-root/data-grid-root.tsx rename to packages/admin-next/dashboard/src/components/data-grid/data-grid-root.tsx index 997cbf6d56..75a0427c71 100644 --- a/packages/admin-next/dashboard/src/components/data-grid/data-grid-root/data-grid-root.tsx +++ b/packages/admin-next/dashboard/src/components/data-grid/data-grid-root.tsx @@ -29,19 +29,19 @@ import { } from "react" import { FieldValues, Path, PathValue, UseFormReturn } from "react-hook-form" import { useTranslation } from "react-i18next" -import { useCommandHistory } from "../../../hooks/use-command-history" -import { DataGridContext } from "../context" -import { useGridQueryTool } from "../hooks" -import { BulkUpdateCommand, Matrix, UpdateCommand } from "../models" -import { CellCoords, CellType } from "../types" +import { useCommandHistory } from "../../hooks/use-command-history" +import { DataGridContext } from "./context" +import { useGridQueryTool } from "./hooks" +import { BulkUpdateCommand, Matrix, UpdateCommand } from "./models" +import { CellCoords, CellSnapshot, CellType } from "./types" import { convertArrayToPrimitive, generateCellId, getColumnName, isCellMatch, -} from "../utils" +} from "./utils" -interface DataGridRootProps< +export interface DataGridRootProps< TData, TFieldValues extends FieldValues = FieldValues > { @@ -91,17 +91,8 @@ export const DataGridRoot = < const [isDragging, setIsDragging] = useState(false) const [isEditing, setIsEditing] = useState(false) - - const onEditingChangeHandler = useCallback( - (value: boolean) => { - if (onEditingChange) { - onEditingChange(value) - } - - setIsEditing(value) - }, - [onEditingChange] - ) + const [cellValueSnapshot, setCellValueSnapshot] = + useState | null>(null) const [columnVisibility, setColumnVisibility] = useState({}) @@ -233,6 +224,53 @@ export const DataGridRoot = < const queryTool = useGridQueryTool(containerRef) + const createCellSnapshot = + useCallback((): CellSnapshot | null => { + if (!anchor) { + return null + } + + const field = matrix.getCellField(anchor) + + if (!field) { + return null + } + + const value = getValues(field as Path) + + return { + field, + value, + } + }, [getValues, matrix, anchor]) + + const restoreSnapshot = useCallback(() => { + if (!cellValueSnapshot) { + return + } + + const { field, value } = cellValueSnapshot + + requestAnimationFrame(() => { + setValue(field as Path, value) + }) + }, [setValue, cellValueSnapshot]) + + const onEditingChangeHandler = useCallback( + (value: boolean) => { + if (onEditingChange) { + onEditingChange(value) + } + + if (value) { + setCellValueSnapshot(createCellSnapshot()) + } + + setIsEditing(value) + }, + [createCellSnapshot, onEditingChange] + ) + const registerCell = useCallback( (coords: CellCoords, field: string, type: CellType) => { matrix.registerField(coords.row, coords.col, field, type) @@ -694,11 +732,14 @@ export const DataGridRoot = < e.preventDefault() e.stopPropagation() + // try to restore the previous value + restoreSnapshot() + // Restore focus to the container element const container = queryTool?.getContainer(anchor) container?.focus() }, - [queryTool, isEditing, anchor] + [queryTool, isEditing, anchor, restoreSnapshot] ) const handleTabKey = useCallback( diff --git a/packages/admin-next/dashboard/src/components/data-grid/data-grid-root/index.ts b/packages/admin-next/dashboard/src/components/data-grid/data-grid-root/index.ts deleted file mode 100644 index 43300ce3be..0000000000 --- a/packages/admin-next/dashboard/src/components/data-grid/data-grid-root/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./data-grid-root" diff --git a/packages/admin-next/dashboard/src/components/grid/data-grid/data-grid-skeleton/data-grid-skeleton.tsx b/packages/admin-next/dashboard/src/components/data-grid/data-grid-skeleton.tsx similarity index 81% rename from packages/admin-next/dashboard/src/components/grid/data-grid/data-grid-skeleton/data-grid-skeleton.tsx rename to packages/admin-next/dashboard/src/components/data-grid/data-grid-skeleton.tsx index ecd5d7dd2d..2a046687c2 100644 --- a/packages/admin-next/dashboard/src/components/grid/data-grid/data-grid-skeleton/data-grid-skeleton.tsx +++ b/packages/admin-next/dashboard/src/components/data-grid/data-grid-skeleton.tsx @@ -1,16 +1,16 @@ import { Table } from "@medusajs/ui" import { ColumnDef } from "@tanstack/react-table" -import { Skeleton } from "../../../common/skeleton" +import { Skeleton } from "../common/skeleton" -type DataTableSkeletonProps = { - columns: ColumnDef[] - rowCount: number +type DataGridSkeletonProps = { + columns: ColumnDef[] + rows?: number } -export const DataGridSkeleton = ({ +export const DataGridSkeleton = ({ columns, - rowCount, -}: DataTableSkeletonProps) => { + rows: rowCount = 10, +}: DataGridSkeletonProps) => { const rows = Array.from({ length: rowCount }, (_, i) => i) const colCount = columns.length diff --git a/packages/admin-next/dashboard/src/components/data-grid/data-grid.tsx b/packages/admin-next/dashboard/src/components/data-grid/data-grid.tsx new file mode 100644 index 0000000000..66f6cae1a4 --- /dev/null +++ b/packages/admin-next/dashboard/src/components/data-grid/data-grid.tsx @@ -0,0 +1,35 @@ +import { FieldValues } from "react-hook-form" + +import { + DataGridBooleanCell, + DataGridCurrencyCell, + DataGridNumberCell, + DataGridReadOnlyCell, + DataGridTextCell, +} from "./data-grid-cells" +import { DataGridRoot, DataGridRootProps } from "./data-grid-root" +import { DataGridSkeleton } from "./data-grid-skeleton" + +interface DataGridProps + extends DataGridRootProps { + isLoading?: boolean +} + +const _DataGrid = ({ + isLoading, + ...props +}: DataGridProps) => { + return isLoading ? ( + + ) : ( + + ) +} + +export const DataGrid = Object.assign(_DataGrid, { + BooleanCell: DataGridBooleanCell, + TextCell: DataGridTextCell, + NumberCell: DataGridNumberCell, + CurrencyCell: DataGridCurrencyCell, + ReadonlyCell: DataGridReadOnlyCell, +}) diff --git a/packages/admin-next/dashboard/src/components/data-grid/index.ts b/packages/admin-next/dashboard/src/components/data-grid/index.ts new file mode 100644 index 0000000000..b8fc66a775 --- /dev/null +++ b/packages/admin-next/dashboard/src/components/data-grid/index.ts @@ -0,0 +1,3 @@ +export * from "./data-grid" +export * from "./data-grid-column-helpers" +export { createDataGridHelper } from "./utils" diff --git a/packages/admin-next/dashboard/src/components/data-grid/types.ts b/packages/admin-next/dashboard/src/components/data-grid/types.ts index 1d77adc568..16a8ab352e 100644 --- a/packages/admin-next/dashboard/src/components/data-grid/types.ts +++ b/packages/admin-next/dashboard/src/components/data-grid/types.ts @@ -1,5 +1,6 @@ import { CellContext } from "@tanstack/react-table" import React, { PropsWithChildren, ReactNode, RefObject } from "react" +import { FieldValues, Path, PathValue } from "react-hook-form" export type CellType = "text" | "number" | "select" | "boolean" @@ -70,3 +71,8 @@ export interface DataGridCellContainerProps extends PropsWithChildren<{}> { } export type DataGridColumnType = "string" | "number" | "boolean" + +export type CellSnapshot = { + field: string + value: PathValue> +} diff --git a/packages/admin-next/dashboard/src/components/grid/constants.ts b/packages/admin-next/dashboard/src/components/grid/constants.ts deleted file mode 100644 index 333c81a870..0000000000 --- a/packages/admin-next/dashboard/src/components/grid/constants.ts +++ /dev/null @@ -1,11 +0,0 @@ -export enum GridCellType { - VOID = "void", - READONLY = "readonly", - EDITABLE = "editable", - OVERLAY = "overlay", -} - -export const NON_INTERACTIVE_CELL_TYPES = [ - GridCellType.VOID, - GridCellType.READONLY, -] diff --git a/packages/admin-next/dashboard/src/components/grid/data-grid/data-grid-root/data-grid-root.tsx b/packages/admin-next/dashboard/src/components/grid/data-grid/data-grid-root/data-grid-root.tsx deleted file mode 100644 index a0363412dc..0000000000 --- a/packages/admin-next/dashboard/src/components/grid/data-grid/data-grid-root/data-grid-root.tsx +++ /dev/null @@ -1,653 +0,0 @@ -import { clx } from "@medusajs/ui" -import { - ColumnDef, - Row, - flexRender, - getCoreRowModel, - useReactTable, -} from "@tanstack/react-table" -import { useVirtualizer } from "@tanstack/react-virtual" -import { - MouseEvent as ReactMouseEvent, - useCallback, - useEffect, - useRef, - useState, -} from "react" -import { FieldValues, Path, UseFormReturn } from "react-hook-form" - -import { - Command, - useCommandHistory, -} from "../../../../hooks/use-command-history" -import { GridCellType, NON_INTERACTIVE_CELL_TYPES } from "../../constants" - -type FieldCoordinates = { - column: number - row: number -} - -export interface DataGridRootProps< - TData, - TFieldValues extends FieldValues = FieldValues -> { - data?: TData[] - columns: ColumnDef[] - state: UseFormReturn - getSubRows?: (row: TData) => TData[] -} - -const ROW_HEIGHT = 40 - -/** - * TODO: THIS IS OLD DATAGRID COMPONENT - REMOVE THIS AFTER ALL TABLE HAVE BEEN MIGRATED TO THE NEW DATAGRIDROOT FROM ../../data-grid - */ - -export const DataGridRoot = < - TData, - TFieldValues extends FieldValues = FieldValues ->({ - data = [], - columns, - state, - getSubRows, -}: DataGridRootProps) => { - const tableContainerRef = useRef(null) - - const { execute, undo, redo, canRedo, canUndo } = useCommandHistory() - const { register, control, getValues, setValue } = state - - const grid = useReactTable({ - data: data, - columns, - getSubRows, - getCoreRowModel: getCoreRowModel(), - meta: { - register: register, - control: control, - }, - }) - - const { flatRows } = grid.getRowModel() - - const rowVirtualizer = useVirtualizer({ - count: flatRows.length, - estimateSize: () => ROW_HEIGHT, - getScrollElement: () => tableContainerRef.current, - measureElement: - typeof window !== "undefined" && - navigator.userAgent.indexOf("Firefox") === -1 - ? (element) => element?.getBoundingClientRect().height - : undefined, - overscan: 5, - }) - - const [anchor, setAnchor] = useState(null) - - const [isSelecting, setIsSelecting] = useState(false) - const [selection, setSelection] = useState([]) - - const [isDragging, setIsDragging] = useState(false) - const [dragSelection, setDragSelection] = useState([]) - - const handleFocusInner = (target: HTMLElement) => { - const editableField = target.querySelector("[data-field-id]") - - if (editableField instanceof HTMLInputElement) { - requestAnimationFrame(() => { - editableField.focus() - editableField.setSelectionRange( - editableField.value.length, - editableField.value.length - ) - }) - } - } - - const handleBlurAnchor = () => { - const activeElement = document.activeElement - - if (anchor && activeElement instanceof HTMLElement) { - activeElement.blur() - } - } - - const isNonInteractive = (element: HTMLElement) => { - const type = element.getAttribute("data-cell-type") - - if (!type) { - return true - } - - return NON_INTERACTIVE_CELL_TYPES.includes(type as GridCellType) - } - - const handleMouseDown = (e: ReactMouseEvent) => { - e.stopPropagation() - e.preventDefault() - - const target = e.target - - /** - * Check if the click was on a presentation element. - * If so, we don't want to set the anchor. - */ - if (target instanceof HTMLElement && isNonInteractive(target)) { - return - } - - const rowIndex = parseInt(e.currentTarget.dataset.rowIndex!) - const columnIndex = parseInt(e.currentTarget.dataset.columnIndex!) - - const isAnchor = getIsAnchor(rowIndex, columnIndex) - - if (e.detail === 2 || isAnchor) { - handleFocusInner(e.currentTarget) - return - } else { - // reset focus so the previous cell doesn't keep the focus - handleBlurAnchor() - } - - const coordinates: FieldCoordinates = { - row: rowIndex, - column: columnIndex, - } - - setSelection([coordinates]) - setAnchor(coordinates) - setIsSelecting(true) - } - - const handleDragDown = (e: ReactMouseEvent) => { - e.stopPropagation() - setIsDragging(true) - } - - const getIsAnchor = (rowIndex: number, columnIndex: number) => { - return anchor?.row === rowIndex && anchor?.column === columnIndex - } - - const handleMouseOver = (e: ReactMouseEvent) => { - /** - * If we're not dragging and not selecting or there is no anchor, - * then we don't want to do anything. - */ - if ((!isSelecting && !isDragging) || !anchor) { - return - } - - const target = e.target - - /** - * Check if the click was on a presentation element. - * If so, we don't want to add it to the selection. - */ - if (target instanceof HTMLElement && isNonInteractive(target)) { - return - } - - const rowIndex = parseInt(e.currentTarget.dataset.rowIndex!) - const columnIndex = parseInt(e.currentTarget.dataset.columnIndex!) - - /** - * If the target column is not the same as the anchor column, - * we don't want to add it to the selection. - */ - if (anchor?.column !== columnIndex) { - return - } - - const direction = - rowIndex > anchor.row ? "down" : rowIndex < anchor.row ? "up" : "none" - - const last = selection[selection.length - 1] ?? anchor - - /** - * Check if the current cell is a direct neighbour of the last cell - * in the selection. - */ - const isNeighbour = Math.abs(rowIndex - last.row) === 1 - - /** - * If the current cell is a neighbour, we can simply update - * the selection based on the direction. - */ - if (isNeighbour) { - if (isSelecting) { - setSelection((prev) => { - return prev - .filter((cell) => { - if (direction === "down") { - return ( - (cell.row <= rowIndex && cell.row >= anchor.row) || - cell.row === anchor.row - ) - } - - if (direction === "up") { - return ( - (cell.row >= rowIndex && cell.row <= anchor.row) || - cell.row === anchor.row - ) - } - - return cell.row === anchor.row - }) - .concat({ row: rowIndex, column: columnIndex }) - }) - - return - } - - if (isDragging) { - if (anchor.row === rowIndex) { - return - } - - setDragSelection((prev) => { - return prev - .filter((cell) => { - if (direction === "down") { - return ( - (cell.row <= rowIndex && cell.row >= anchor.row) || - cell.row === anchor.row - ) - } - - if (direction === "up") { - return ( - (cell.row >= rowIndex && cell.row <= anchor.row) || - cell.row === anchor.row - ) - } - - return cell.row === anchor.row - }) - .concat({ row: rowIndex, column: columnIndex }) - }) - - return - } - } - - /** - * If the current cell is not a neighbour, we instead - * need to calculate all the valid cells between the - * anchor and the current cell. - */ - let cells: FieldCoordinates[] = [] - - function selectCell(i: number, columnIndex: number) { - const possibleCell = tableContainerRef.current?.querySelector( - `[data-row-index="${i}"][data-column-index="${columnIndex}"]` - ) - - if (!possibleCell) { - return - } - - const isPresentation = possibleCell.querySelector( - "[data-role=presentation]" - ) - - if (isPresentation) { - return - } - - cells.push({ row: i, column: columnIndex }) - } - - if (direction === "down") { - for (let i = anchor.row; i <= rowIndex; i++) { - selectCell(i, columnIndex) - } - } - - if (direction === "up") { - for (let i = anchor.row; i >= rowIndex; i--) { - selectCell(i, columnIndex) - } - } - - if (isSelecting) { - setSelection(cells) - return - } - - if (isDragging) { - cells = cells.filter((cell) => cell.row !== anchor.row) - - setDragSelection(cells) - return - } - } - - const getIsDragTarget = (rowIndex: number, columnIndex: number) => { - return dragSelection.some( - (cell) => cell.row === rowIndex && cell.column === columnIndex - ) - } - - const getIsSelected = (rowIndex: number, columnIndex: number) => { - return selection.some( - (cell) => cell.row === rowIndex && cell.column === columnIndex - ) - } - - const getSelectionIds = useCallback((fields: FieldCoordinates[]) => { - return fields - .map((field) => { - const element = document.querySelector( - `[data-row-index="${field.row}"][data-column-index="${field.column}"]` - ) as HTMLTableCellElement - - return element - ?.querySelector("[data-field-id]") - ?.getAttribute("data-field-id") - }) - .filter(Boolean) as string[] - }, []) - - const getSelectionValues = useCallback( - (ids: string[]): string[] => { - const rawValues = ids.map((id) => { - return getValues(id as Path) - }) - - return rawValues.map((v) => JSON.stringify(v)) - }, - [getValues] - ) - - const setSelectionValues = useCallback( - (ids: string[], values: string[]) => { - ids.forEach((id, i) => { - const value = values[i] - - if (!value) { - return - } - - setValue(id as Path, JSON.parse(value), { - shouldDirty: true, - shouldTouch: true, - }) - }) - }, - [setValue] - ) - - const handleCopy = useCallback( - (e: ClipboardEvent) => { - if (selection.length === 0) { - return - } - - const fieldIds = getSelectionIds(selection) - const values = getSelectionValues(fieldIds) - - const clipboardData = values.join("\n") - - e.clipboardData?.setData("text/plain", clipboardData) - e.preventDefault() - }, - [selection, getSelectionIds, getSelectionValues] - ) - - const handlePaste = useCallback( - (e: ClipboardEvent) => { - const data = e.clipboardData?.getData("text/plain") - - if (!data) { - return - } - - const fieldIds = getSelectionIds(selection) - - const prev = getSelectionValues(fieldIds) - const next = data.split("\n") - - const command = new GridCommand({ - next, - prev, - selection: fieldIds, - setter: setSelectionValues, - }) - - execute(command) - }, - [ - selection, - execute, - getSelectionValues, - setSelectionValues, - getSelectionIds, - ] - ) - - const handleCommandHistory = useCallback( - (e: KeyboardEvent) => { - if (!canRedo && !canUndo) { - return - } - - if (e.key.toLowerCase() === "z" && e.metaKey && !e.shiftKey) { - console.log(canUndo) - e.preventDefault() - undo() - } - - if (e.key.toLowerCase() === "z" && e.metaKey && e.shiftKey) { - e.preventDefault() - redo() - } - }, - [undo, redo, canRedo, canUndo] - ) - - const handleEndDrag = useCallback(() => { - if (!anchor) { - return - } - - const fieldIds = getSelectionIds(dragSelection) - const anchorId = getSelectionIds([anchor]) - - const anchorValue = getSelectionValues(anchorId)?.[0] - - const prev = getSelectionValues(fieldIds) - const next = prev.map(() => anchorValue) - - const command = new GridCommand({ - next, - prev, - selection: fieldIds, - setter: setSelectionValues, - }) - - execute(command) - - setSelection(dragSelection) - setDragSelection([]) - setIsDragging(false) - }, [ - anchor, - getSelectionIds, - dragSelection, - getSelectionValues, - setSelectionValues, - execute, - ]) - - const handleMouseUp = useCallback( - (_e: MouseEvent) => { - if (isSelecting) { - setIsSelecting(false) - return - } - - if (isDragging) { - handleEndDrag() - return - } - }, - [isDragging, isSelecting, handleEndDrag] - ) - - useEffect(() => { - document.addEventListener("mouseup", handleMouseUp) - document.addEventListener("copy", handleCopy) - document.addEventListener("paste", handlePaste) - document.addEventListener("keydown", handleCommandHistory) - - return () => { - document.removeEventListener("mouseup", handleMouseUp) - document.removeEventListener("copy", handleCopy) - document.removeEventListener("paste", handlePaste) - document.removeEventListener("keydown", handleCommandHistory) - } - }, [handleMouseUp, handleCopy, handlePaste, handleCommandHistory]) - - return ( -
-
- - - {grid.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - ) - })} - - ))} - - - {rowVirtualizer.getVirtualItems().map((virtualRow) => { - const row = flatRows[virtualRow.index] as Row - - return ( - rowVirtualizer.measureElement(node)} - key={row.id} - style={{ - transform: `translateY(${virtualRow.start}px)`, - }} - className="bg-ui-bg-subtle txt-compact-small absolute flex h-10 w-full" - > - {row.getVisibleCells().map((cell, index) => { - const isAnchor = getIsAnchor(virtualRow.index, index) - const isSelected = getIsSelected(virtualRow.index, index) - const isDragTarget = getIsDragTarget( - virtualRow.index, - index - ) - - return ( - - ) - })} - - ) - })} - -
- {flexRender( - header.column.columnDef.header, - header.getContext() - )} -
-
- {flexRender( - cell.column.columnDef.cell, - cell.getContext() - )} - {isAnchor && ( -
- )} -
-
-
-
- ) -} - -type GridCommandArgs = { - selection: string[] - setter: (selection: string[], values: string[]) => void - prev: string[] - next: string[] -} - -class GridCommand implements Command { - private _selection: string[] - - private _prev: string[] - private _next: string[] - - private _setter: (selection: string[], values: string[]) => void - - constructor({ selection, setter, prev, next }: GridCommandArgs) { - this._selection = selection - this._setter = setter - this._prev = prev - this._next = next - } - - execute() { - this._setter(this._selection, this._next) - } - - undo() { - this._setter(this._selection, this._prev) - } - - redo() { - this.execute() - } -} diff --git a/packages/admin-next/dashboard/src/components/grid/data-grid/data-grid-root/index.ts b/packages/admin-next/dashboard/src/components/grid/data-grid/data-grid-root/index.ts deleted file mode 100644 index 43300ce3be..0000000000 --- a/packages/admin-next/dashboard/src/components/grid/data-grid/data-grid-root/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./data-grid-root" diff --git a/packages/admin-next/dashboard/src/components/grid/data-grid/data-grid-skeleton/index.ts b/packages/admin-next/dashboard/src/components/grid/data-grid/data-grid-skeleton/index.ts deleted file mode 100644 index 7aca5e5068..0000000000 --- a/packages/admin-next/dashboard/src/components/grid/data-grid/data-grid-skeleton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./data-grid-skeleton" diff --git a/packages/admin-next/dashboard/src/components/grid/data-grid/data-grid.tsx b/packages/admin-next/dashboard/src/components/grid/data-grid/data-grid.tsx deleted file mode 100644 index 54445c2d58..0000000000 --- a/packages/admin-next/dashboard/src/components/grid/data-grid/data-grid.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { FieldValues } from "react-hook-form" -import { DataGridRoot, DataGridRootProps } from "./data-grid-root" -import { DataGridSkeleton } from "./data-grid-skeleton" - -interface DataGridProps - extends DataGridRootProps { - isLoading?: boolean -} - -export const DataGrid = ({ - isLoading, - ...props -}: DataGridProps) => { - return isLoading ? ( - - ) : ( - - ) -} diff --git a/packages/admin-next/dashboard/src/components/grid/data-grid/index.ts b/packages/admin-next/dashboard/src/components/grid/data-grid/index.ts deleted file mode 100644 index db8b5896fe..0000000000 --- a/packages/admin-next/dashboard/src/components/grid/data-grid/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./data-grid" diff --git a/packages/admin-next/dashboard/src/components/grid/grid-cells/common/boolean-cell/boolean-cell.tsx b/packages/admin-next/dashboard/src/components/grid/grid-cells/common/boolean-cell/boolean-cell.tsx deleted file mode 100644 index bcd84ca4cd..0000000000 --- a/packages/admin-next/dashboard/src/components/grid/grid-cells/common/boolean-cell/boolean-cell.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Select } from "@medusajs/ui" -import { Controller, FieldValues } from "react-hook-form" -import { CellProps } from "../../../types" - -interface BooleanCellProps - extends CellProps {} - -export const BooleanCell = ({ - field, - meta, -}: BooleanCellProps) => { - const { control } = meta - - return ( - { - return - }} - /> - ) -} diff --git a/packages/admin-next/dashboard/src/components/grid/grid-cells/common/boolean-cell/index.ts b/packages/admin-next/dashboard/src/components/grid/grid-cells/common/boolean-cell/index.ts deleted file mode 100644 index cda2339be4..0000000000 --- a/packages/admin-next/dashboard/src/components/grid/grid-cells/common/boolean-cell/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./boolean-cell" diff --git a/packages/admin-next/dashboard/src/components/grid/grid-cells/common/currency-cell/currency-cell.tsx b/packages/admin-next/dashboard/src/components/grid/grid-cells/common/currency-cell/currency-cell.tsx deleted file mode 100644 index a42b6cbcfc..0000000000 --- a/packages/admin-next/dashboard/src/components/grid/grid-cells/common/currency-cell/currency-cell.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { CurrencyDTO } from "@medusajs/types" -import { useRef } from "react" -import Primitive from "react-currency-input-field" -import { Controller, FieldValues } from "react-hook-form" - -import { GridCellType } from "../../../constants" -import { CellProps } from "../../../types" - -interface CurrencyCellProps - extends CellProps { - currency: CurrencyDTO -} - -export const CurrencyCell = ({ currency, field, meta }: CurrencyCellProps) => { - const symbolRef = useRef(null) - // @ts-ignore - Type is wrong - const decimalScale = currency.decimal_digits - - const { control } = meta - - return ( - { - return ( -
- - {currency.symbol_native} - - 0} - onValueChange={(_value, _name, values) => { - onChange(values?.value) - }} - {...rest} - /> -
- ) - }} - /> - ) -} diff --git a/packages/admin-next/dashboard/src/components/grid/grid-cells/common/currency-cell/index.ts b/packages/admin-next/dashboard/src/components/grid/grid-cells/common/currency-cell/index.ts deleted file mode 100644 index 58a099a5f8..0000000000 --- a/packages/admin-next/dashboard/src/components/grid/grid-cells/common/currency-cell/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./currency-cell" diff --git a/packages/admin-next/dashboard/src/components/grid/grid-cells/common/readonly-cell/index.ts b/packages/admin-next/dashboard/src/components/grid/grid-cells/common/readonly-cell/index.ts deleted file mode 100644 index 367aa8b805..0000000000 --- a/packages/admin-next/dashboard/src/components/grid/grid-cells/common/readonly-cell/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./readonly-cell" diff --git a/packages/admin-next/dashboard/src/components/grid/grid-cells/common/readonly-cell/readonly-cell.tsx b/packages/admin-next/dashboard/src/components/grid/grid-cells/common/readonly-cell/readonly-cell.tsx deleted file mode 100644 index 0f524bc2a3..0000000000 --- a/packages/admin-next/dashboard/src/components/grid/grid-cells/common/readonly-cell/readonly-cell.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { PropsWithChildren } from "react" -import { GridCellType } from "../../../constants" - -export const ReadonlyCell = ({ children }: PropsWithChildren) => { - return ( -
- {children} -
- ) -} diff --git a/packages/admin-next/dashboard/src/components/grid/grid-cells/common/text-cell/index.ts b/packages/admin-next/dashboard/src/components/grid/grid-cells/common/text-cell/index.ts deleted file mode 100644 index 22f7bca960..0000000000 --- a/packages/admin-next/dashboard/src/components/grid/grid-cells/common/text-cell/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./text-cell" diff --git a/packages/admin-next/dashboard/src/components/grid/grid-cells/common/text-cell/text-cell.tsx b/packages/admin-next/dashboard/src/components/grid/grid-cells/common/text-cell/text-cell.tsx deleted file mode 100644 index c4d1a9ee57..0000000000 --- a/packages/admin-next/dashboard/src/components/grid/grid-cells/common/text-cell/text-cell.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { FieldValues } from "react-hook-form" -import { CellProps } from "../../../types" - -interface TextCellProps - extends CellProps {} - -export const TextCell = ({ - field, - meta, -}: TextCellProps) => { - const { register } = meta - - return ( -
- -
- ) -} diff --git a/packages/admin-next/dashboard/src/components/grid/grid-cells/common/void-cell/index.ts b/packages/admin-next/dashboard/src/components/grid/grid-cells/common/void-cell/index.ts deleted file mode 100644 index 1015024549..0000000000 --- a/packages/admin-next/dashboard/src/components/grid/grid-cells/common/void-cell/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./void-cell" diff --git a/packages/admin-next/dashboard/src/components/grid/grid-cells/common/void-cell/void-cell.tsx b/packages/admin-next/dashboard/src/components/grid/grid-cells/common/void-cell/void-cell.tsx deleted file mode 100644 index 11dd3ab6e2..0000000000 --- a/packages/admin-next/dashboard/src/components/grid/grid-cells/common/void-cell/void-cell.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { PropsWithChildren } from "react" -import { GridCellType } from "../../../constants" - -export const VoidCell = ({ children }: PropsWithChildren) => { - return ( -
- {children} -
- ) -} diff --git a/packages/admin-next/dashboard/src/components/grid/types.ts b/packages/admin-next/dashboard/src/components/grid/types.ts deleted file mode 100644 index b0a10b5d7e..0000000000 --- a/packages/admin-next/dashboard/src/components/grid/types.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Control, FieldValues, Path, UseFormRegister } from "react-hook-form" - -export type DataGridMeta = { - register: UseFormRegister - control: Control -} - -export interface CellProps { - field: Path - meta: DataGridMeta -} diff --git a/packages/admin-next/dashboard/src/routes/inventory/inventory-create/components/create-inventory-item-form/create-inventory-availability-form.tsx b/packages/admin-next/dashboard/src/routes/inventory/inventory-create/components/create-inventory-item-form/create-inventory-availability-form.tsx index 61d9ff6761..af06445ea2 100644 --- a/packages/admin-next/dashboard/src/routes/inventory/inventory-create/components/create-inventory-item-form/create-inventory-availability-form.tsx +++ b/packages/admin-next/dashboard/src/routes/inventory/inventory-create/components/create-inventory-item-form/create-inventory-availability-form.tsx @@ -3,9 +3,7 @@ import { useMemo } from "react" import { HttpTypes } from "@medusajs/types" import { UseFormReturn } from "react-hook-form" import { useTranslation } from "react-i18next" -import { DataGridNumberCell } from "../../../../../components/data-grid/data-grid-cells/data-grid-number-cell" -import { DataGridReadOnlyCell } from "../../../../../components/data-grid/data-grid-cells/data-grid-readonly-cell" -import { DataGridRoot } from "../../../../../components/data-grid/data-grid-root" +import { DataGrid } from "../../../../../components/data-grid" import { createDataGridHelper } from "../../../../../components/data-grid/utils" import { useRouteModal } from "../../../../../components/modals" import { useStockLocations } from "../../../../../hooks/api/stock-locations" @@ -22,16 +20,13 @@ export const CreateInventoryAvailabilityForm = ({ form }: Props) => { return (
- {isPending ? ( -
Loading...
- ) : ( - setCloseOnEscape(!editing)} - /> - )} + setCloseOnEscape(!editing)} + />
) } @@ -52,7 +47,7 @@ const useColumns = () => { ), cell: ({ row }) => { return ( - {row.original.name} + {row.original.name} ) }, disableHiding: true, @@ -63,7 +58,7 @@ const useColumns = () => { header: t("fields.inStock"), cell: (context) => { return ( - { ) }, disableHiding: true, - type: "number", }), ], [t] diff --git a/packages/admin-next/dashboard/src/routes/locations/common/hooks/use-shipping-option-price-columns.tsx b/packages/admin-next/dashboard/src/routes/locations/common/hooks/use-shipping-option-price-columns.tsx index e0611504b8..1deab2a9ab 100644 --- a/packages/admin-next/dashboard/src/routes/locations/common/hooks/use-shipping-option-price-columns.tsx +++ b/packages/admin-next/dashboard/src/routes/locations/common/hooks/use-shipping-option-price-columns.tsx @@ -1,7 +1,7 @@ import { HttpTypes } from "@medusajs/types" import { useMemo } from "react" import { useTranslation } from "react-i18next" -import { getPriceColumns } from "../../../../components/data-grid/data-grid-columns/price-columns" +import { createDataGridPriceColumns } from "../../../../components/data-grid/data-grid-column-helpers/create-data-grid-price-columns" export const useShippingOptionPriceColumns = ({ currencies = [], @@ -15,7 +15,7 @@ export const useShippingOptionPriceColumns = ({ const { t } = useTranslation() return useMemo(() => { - return getPriceColumns({ + return createDataGridPriceColumns({ currencies, regions, pricePreferences, diff --git a/packages/admin-next/dashboard/src/routes/locations/location-service-zone-shipping-option-create/components/create-shipping-options-form/create-shipping-options-prices-form.tsx b/packages/admin-next/dashboard/src/routes/locations/location-service-zone-shipping-option-create/components/create-shipping-options-form/create-shipping-options-prices-form.tsx index 806211a27c..f004853844 100644 --- a/packages/admin-next/dashboard/src/routes/locations/location-service-zone-shipping-option-create/components/create-shipping-options-form/create-shipping-options-prices-form.tsx +++ b/packages/admin-next/dashboard/src/routes/locations/location-service-zone-shipping-option-create/components/create-shipping-options-form/create-shipping-options-prices-form.tsx @@ -1,7 +1,7 @@ import { useMemo } from "react" import { UseFormReturn } from "react-hook-form" -import { DataGridRoot } from "../../../../../components/data-grid/data-grid-root" +import { DataGrid } from "../../../../../components/data-grid" import { useRouteModal } from "../../../../../components/modals" import { usePricePreferences } from "../../../../../hooks/api/price-preferences" import { useRegions } from "../../../../../hooks/api/regions" @@ -48,7 +48,7 @@ export const CreateShippingOptionsPricesForm = ({ pricePreferences, }) - const initializing = isStoreLoading || !store || isRegionsLoading || !regions + const isLoading = isStoreLoading || !store || isRegionsLoading || !regions const data = useMemo( () => [[...(currencies || []), ...(regions || [])]], @@ -65,7 +65,8 @@ export const CreateShippingOptionsPricesForm = ({ return (
- - + + + +
+ setCloseOnEscape(!editing)} + /> +
+ +
- - - -
- setCloseOnEscape(!editing)} - /> -
- + ) diff --git a/packages/admin-next/dashboard/src/routes/price-lists/common/hooks/use-price-list-grid-columns.tsx b/packages/admin-next/dashboard/src/routes/price-lists/common/hooks/use-price-list-grid-columns.tsx index cc73b030a4..9ed20e7847 100644 --- a/packages/admin-next/dashboard/src/routes/price-lists/common/hooks/use-price-list-grid-columns.tsx +++ b/packages/admin-next/dashboard/src/routes/price-lists/common/hooks/use-price-list-grid-columns.tsx @@ -4,8 +4,8 @@ import { useMemo } from "react" import { useTranslation } from "react-i18next" import { Thumbnail } from "../../../../components/common/thumbnail" -import { DataGridReadOnlyCell } from "../../../../components/data-grid/data-grid-cells/data-grid-readonly-cell" -import { getPriceColumns } from "../../../../components/data-grid/data-grid-columns/price-columns" +import { DataGrid } from "../../../../components/data-grid" +import { createDataGridPriceColumns } from "../../../../components/data-grid/data-grid-column-helpers/create-data-grid-price-columns" import { createDataGridHelper } from "../../../../components/data-grid/utils" import { isProductRow } from "../utils" @@ -35,26 +35,26 @@ export const usePriceListGridColumns = ({ const entity = row.original if (isProductRow(entity)) { return ( - +
{entity.title}
- + ) } return ( - +
{entity.title}
- + ) }, disableHiding: true, }), - ...getPriceColumns< + ...createDataGridPriceColumns< HttpTypes.AdminProduct | HttpTypes.AdminProductVariant >({ currencies: currencies.map((c) => c.currency_code), diff --git a/packages/admin-next/dashboard/src/routes/price-lists/price-list-create/components/price-list-create-form/price-list-prices-form.tsx b/packages/admin-next/dashboard/src/routes/price-lists/price-list-create/components/price-list-create-form/price-list-prices-form.tsx index ad6afcbf11..bb075fddcb 100644 --- a/packages/admin-next/dashboard/src/routes/price-lists/price-list-create/components/price-list-create-form/price-list-prices-form.tsx +++ b/packages/admin-next/dashboard/src/routes/price-lists/price-list-create/components/price-list-create-form/price-list-prices-form.tsx @@ -1,7 +1,7 @@ import { HttpTypes } from "@medusajs/types" import { useEffect } from "react" import { UseFormReturn, useWatch } from "react-hook-form" -import { DataGridRoot } from "../../../../../components/data-grid/data-grid-root" +import { DataGrid } from "../../../../../components/data-grid" import { useRouteModal } from "../../../../../components/modals" import { useProducts } from "../../../../../hooks/api/products" import { usePriceListGridColumns } from "../../../common/hooks/use-price-list-grid-columns" @@ -77,7 +77,7 @@ export const PriceListPricesForm = ({ return (
- { diff --git a/packages/admin-next/dashboard/src/routes/price-lists/price-list-prices-add/components/price-list-prices-add-form/price-list-prices-add-prices-form.tsx b/packages/admin-next/dashboard/src/routes/price-lists/price-list-prices-add/components/price-list-prices-add-form/price-list-prices-add-prices-form.tsx index 202de2631d..cd54f505e1 100644 --- a/packages/admin-next/dashboard/src/routes/price-lists/price-list-prices-add/components/price-list-prices-add-form/price-list-prices-add-prices-form.tsx +++ b/packages/admin-next/dashboard/src/routes/price-lists/price-list-prices-add/components/price-list-prices-add-form/price-list-prices-add-prices-form.tsx @@ -2,7 +2,7 @@ import { HttpTypes } from "@medusajs/types" import { useEffect } from "react" import { UseFormReturn, useWatch } from "react-hook-form" -import { DataGridRoot } from "../../../../../components/data-grid/data-grid-root" +import { DataGrid } from "../../../../../components/data-grid" import { useRouteModal } from "../../../../../components/modals" import { useProducts } from "../../../../../hooks/api/products" import { usePriceListGridColumns } from "../../../common/hooks/use-price-list-grid-columns" @@ -78,7 +78,7 @@ export const PriceListPricesAddPricesForm = ({ return (
- { diff --git a/packages/admin-next/dashboard/src/routes/price-lists/price-list-prices-edit/components/price-list-prices-edit-form/price-list-prices-edit-form.tsx b/packages/admin-next/dashboard/src/routes/price-lists/price-list-prices-edit/components/price-list-prices-edit-form/price-list-prices-edit-form.tsx index 3b5880ef43..1d71d3df79 100644 --- a/packages/admin-next/dashboard/src/routes/price-lists/price-list-prices-edit/components/price-list-prices-edit-form/price-list-prices-edit-form.tsx +++ b/packages/admin-next/dashboard/src/routes/price-lists/price-list-prices-edit/components/price-list-prices-edit-form/price-list-prices-edit-form.tsx @@ -6,7 +6,7 @@ import { useForm } from "react-hook-form" import { useTranslation } from "react-i18next" import { z } from "zod" -import { DataGridRoot } from "../../../../../components/data-grid/data-grid-root" +import { DataGrid } from "../../../../../components/data-grid" import { RouteFocusModal, useRouteModal, @@ -92,7 +92,7 @@ export const PriceListPricesEditForm = ({
- { diff --git a/packages/admin-next/dashboard/src/routes/products/common/variant-pricing-form.tsx b/packages/admin-next/dashboard/src/routes/products/common/variant-pricing-form.tsx index a7f31959b7..2b88e5a244 100644 --- a/packages/admin-next/dashboard/src/routes/products/common/variant-pricing-form.tsx +++ b/packages/admin-next/dashboard/src/routes/products/common/variant-pricing-form.tsx @@ -3,15 +3,16 @@ import { useMemo } from "react" import { UseFormReturn, useWatch } from "react-hook-form" import { useTranslation } from "react-i18next" -import { getPriceColumns } from "../../../components/data-grid/data-grid-columns/price-columns" -import { DataGridRoot } from "../../../components/data-grid/data-grid-root/data-grid-root" -import { createDataGridHelper } from "../../../components/data-grid/utils.ts" -import { ReadonlyCell } from "../../../components/grid/grid-cells/common/readonly-cell" -import { useRouteModal } from "../../../components/modals/index.ts" +import { + DataGrid, + createDataGridHelper, + createDataGridPriceColumns, +} from "../../../components/data-grid" +import { useRouteModal } from "../../../components/modals/index" import { usePricePreferences } from "../../../hooks/api/price-preferences" import { useRegions } from "../../../hooks/api/regions.tsx" import { useStore } from "../../../hooks/api/store" -import { ProductCreateSchemaType } from "../product-create/types.ts" +import { ProductCreateSchemaType } from "../product-create/types" type VariantPricingFormProps = { form: UseFormReturn @@ -36,7 +37,7 @@ export const VariantPricingForm = ({ form }: VariantPricingFormProps) => { }) as any return ( - { const entity = row.original return ( - +
{entity.title}
- + ) }, disableHiding: true, }), - ...getPriceColumns({ + ...createDataGridPriceColumns({ currencies: currencies.map((c) => c.currency_code), regions, pricePreferences, diff --git a/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-variants-form/product-create-variants-form.tsx b/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-variants-form/product-create-variants-form.tsx index 16bbf2f039..af3404c507 100644 --- a/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-variants-form/product-create-variants-form.tsx +++ b/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-variants-form/product-create-variants-form.tsx @@ -3,11 +3,8 @@ import { useMemo } from "react" import { UseFormReturn, useWatch } from "react-hook-form" import { useTranslation } from "react-i18next" -import { DataGridBooleanCell } from "../../../../../components/data-grid/data-grid-cells/data-grid-boolean-cell" -import { DataGridReadOnlyCell } from "../../../../../components/data-grid/data-grid-cells/data-grid-readonly-cell" -import { DataGridTextCell } from "../../../../../components/data-grid/data-grid-cells/data-grid-text-cell" -import { getPriceColumns } from "../../../../../components/data-grid/data-grid-columns/price-columns" -import { DataGridRoot } from "../../../../../components/data-grid/data-grid-root" +import { DataGrid } from "../../../../../components/data-grid" +import { createDataGridPriceColumns } from "../../../../../components/data-grid/data-grid-column-helpers/create-data-grid-price-columns" import { createDataGridHelper } from "../../../../../components/data-grid/utils" import { useRouteModal } from "../../../../../components/modals" import { usePricePreferences } from "../../../../../hooks/api/price-preferences" @@ -103,16 +100,13 @@ export const ProductCreateVariantsForm = ({ return (
- {isPending ? ( -
Loading...
- ) : ( - setCloseOnEscape(!editing)} - /> - )} + setCloseOnEscape(!editing)} + />
) } @@ -145,9 +139,9 @@ const useColumns = ({ ), cell: ({ row }) => { return ( - + {options.map((o) => row.original.options[o.title]).join(" / ")} - + ) }, disableHiding: true, @@ -158,7 +152,7 @@ const useColumns = ({ header: t("fields.title"), cell: (context) => { return ( - @@ -171,7 +165,7 @@ const useColumns = ({ header: t("fields.sku"), cell: (context) => { return ( - @@ -184,13 +178,12 @@ const useColumns = ({ header: t("fields.managedInventory"), cell: (context) => { return ( - ) }, - type: "boolean", }), columnHelper.column({ id: "allow_backorder", @@ -198,13 +191,12 @@ const useColumns = ({ header: t("fields.allowBackorder"), cell: (context) => { return ( - ) }, - type: "boolean", }), columnHelper.column({ @@ -213,17 +205,16 @@ const useColumns = ({ header: t("fields.inventoryKit"), cell: (context) => { return ( - ) }, - type: "boolean", }), - ...getPriceColumns({ + ...createDataGridPriceColumns({ currencies, regions, pricePreferences, diff --git a/packages/design-system/ui/package.json b/packages/design-system/ui/package.json index fecc9a4c8b..839fa659cd 100644 --- a/packages/design-system/ui/package.json +++ b/packages/design-system/ui/package.json @@ -106,8 +106,7 @@ "react-stately": "^3.31.1", "sonner": "^1.5.0", "tailwind-merge": "^2.2.1", - "upgrade": "^1.1.0", - "yarn": "^1.22.22" + "upgrade": "^1.1.0" }, "peerDependencies": { "react": "^18.0.0", diff --git a/yarn.lock b/yarn.lock index 90916961f2..359b23938d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5372,7 +5372,6 @@ __metadata: vite: ^4.3.9 vite-plugin-turbosnap: ^1.0.2 vitest: ^0.32.2 - yarn: ^1.22.22 peerDependencies: react: ^18.0.0 react-dom: ^18.0.0 @@ -31549,16 +31548,6 @@ __metadata: languageName: node linkType: hard -"yarn@npm:^1.22.22": - version: 1.22.22 - resolution: "yarn@npm:1.22.22" - bin: - yarn: bin/yarn.js - yarnpkg: bin/yarn.js - checksum: 8c77198c93d7542e7f4e131c63b66de357b7076ecfbcfe709ec0d674115c2dd9edaa45196e5510e6e9366d368707a802579e3402071002e1c9d9a99d491478de - languageName: node - linkType: hard - "yauzl@npm:^2.10.0": version: 2.10.0 resolution: "yauzl@npm:2.10.0"