fix(admin-ui): Fix Y-axis scroll in bulk editor (#5726)

This commit is contained in:
Kasper Fabricius Kristensen
2023-11-27 11:13:11 +00:00
committed by GitHub
parent 18afe0b9ad
commit 5f6751a61f
4 changed files with 33 additions and 27 deletions
@@ -1,7 +1,7 @@
import React, { useMemo } from "react"
import { useMemo } from "react"
import { useAdminRegions, useAdminStore } from "medusa-react"
import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
import { useAdminRegions, useAdminStore } from "medusa-react"
import Button from "../../../fundamentals/button"
import AdjustmentsIcon from "../../../fundamentals/icons/adjustments-icon"
@@ -38,7 +38,7 @@ function EditPricesActions(props: EditPricesActionsProps) {
return (
<div
style={{ fontSize: 13 }}
className="flex items-center gap-2 border-t py-[12px] px-4"
className="border-ui-border-base flex items-center gap-2 border-b border-t px-4 py-[12px]"
>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild>
@@ -1,18 +1,18 @@
import React, { useEffect, useMemo, useRef, useState } from "react"
import { useAdminRegions, useAdminStore } from "medusa-react"
import { Product } from "@medusajs/client-types"
import { useAdminRegions, useAdminStore } from "medusa-react"
import React, { useEffect, useMemo, useRef, useState } from "react"
import useNotification from "../../../../hooks/use-notification"
import { currencies as CURRENCY_MAP } from "../../../../utils/currencies"
import Tooltip from "../../../atoms/tooltip"
import IconBuildingTax from "../../../fundamentals/icons/building-tax-icon"
import CurrencyCell from "./currency-cell"
import {
getCurrencyPricesOnly,
getRegionPricesOnly,
mod,
isText,
mod,
} from "./utils"
import IconBuildingTax from "../../../fundamentals/icons/building-tax-icon"
import { currencies as CURRENCY_MAP } from "../../../../utils/currencies"
import Tooltip from "../../../atoms/tooltip"
import CurrencyCell from "./currency-cell"
import useNotification from "../../../../hooks/use-notification"
enum ArrowMove {
UP,
@@ -669,21 +669,22 @@ function EditPricesTable(props: EditPricesTableProps) {
}
return (
<div className="h-full overflow-x-auto">
// 60px is the height of the subheader, 64px is the height of the header
<div className="h-[calc(100%-60px-64px)] overflow-auto">
<table
onMouseMove={
/** prevent default browser highlighting while dragging **/
(e) => e.preventDefault()
}
style={{ fontSize: 13, borderCollapse: "collapse" }}
className="w-full table-auto"
className="h-full w-full table-auto"
>
<thead>
<tr
style={{ height: 42 }}
className="tw-text-medusa-text-subtle h-2 text-left font-normal"
>
<th className="h-2 border pl-4 font-medium text-gray-400">
<th className="h-2 border border-t-0 pl-4 font-medium text-gray-400">
Product
</th>
{props.currencies.map((c) => {
@@ -691,7 +692,7 @@ function EditPricesTable(props: EditPricesTableProps) {
return (
<th
key={c}
className="min-w-[220px] border px-4 font-medium text-gray-400"
className="min-w-[220px] border border-t-0 px-4 font-medium text-gray-400"
>
<div className="flex items-center justify-between">
<span>Price {c.toUpperCase()}</span>
@@ -712,7 +713,7 @@ function EditPricesTable(props: EditPricesTableProps) {
return (
<th
key={r}
className="min-w-[220px] max-w-[220px] border px-4 font-medium text-gray-400"
className="min-w-[220px] max-w-[220px] border border-t-0 px-4 font-medium text-gray-400"
>
<div className="flex items-center justify-between gap-2">
<span className="flex overflow-hidden">
@@ -1,26 +1,26 @@
import { MoneyAmount, Product } from "@medusajs/client-types"
import { useAdminRegions, useAdminUpdateVariant } from "medusa-react"
import { useEffect, useMemo, useRef, useState } from "react"
import {
getAllProductPricesCurrencies,
getAllProductPricesRegions,
getCurrencyPricesOnly,
getRegionPricesOnly,
} from "./utils"
import { useAdminRegions, useAdminUpdateVariant } from "medusa-react"
import { useEffect, useMemo, useRef, useState } from "react"
import Button from "../../../fundamentals/button"
import { currencies as CURRENCY_MAP } from "../../../../utils/currencies"
import CrossIcon from "../../../fundamentals/icons/cross-icon"
import DeletePrompt from "../../delete-prompt"
import EditPricesActions from "./edit-prices-actions"
import EditPricesTable from "./edit-prices-table"
import Fade from "../../../atoms/fade-wrapper"
import Modal from "../../../molecules/modal"
import SavePrompt from "./save-prompt"
import mapKeys from "lodash/mapKeys"
import pick from "lodash/pick"
import pickBy from "lodash/pickBy"
import useNotification from "../../../../hooks/use-notification"
import { currencies as CURRENCY_MAP } from "../../../../utils/currencies"
import Fade from "../../../atoms/fade-wrapper"
import Button from "../../../fundamentals/button"
import CrossIcon from "../../../fundamentals/icons/cross-icon"
import Modal from "../../../molecules/modal"
import DeletePrompt from "../../delete-prompt"
import EditPricesActions from "./edit-prices-actions"
import EditPricesTable from "./edit-prices-table"
import SavePrompt from "./save-prompt"
type EditPricesModalProps = {
close: () => void