Merge b569edc into ff9a044

glideapps · Jan 12, 2024 · 5228e4f · 5228e4f
2 parents ff9a044 + b569edc
commit 5228e4f
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 14 deletions.
diff --git a/packages/cells/src/cells/date-picker-cell.tsx b/packages/cells/src/cells/date-picker-cell.tsx
@@ -140,9 +140,9 @@ const renderer: CustomRenderer<DatePickerCell> = {
         drawTextCell(args, displayDate, cell.contentAlign);
         return true;
     },
-    measure: (ctx, cell) => {
+    measure: (ctx, cell, theme) => {
         const { displayDate } = cell.data;
-        return ctx.measureText(displayDate).width + 16;
+        return ctx.measureText(displayDate).width + theme.cellHorizontalPadding * 2;
     },
     provideEditor: () => ({
         editor: Editor,

diff --git a/packages/cells/src/cells/dropdown-cell.tsx b/packages/cells/src/cells/dropdown-cell.tsx
@@ -1,3 +1,8 @@
+import * as React from "react";
+
+import { styled } from "@linaria/react";
+import Select, { type MenuProps, components } from "react-select";
+
 import {
     type CustomCell,
     type ProvideEditorCallback,
@@ -7,9 +12,6 @@ import {
     GridCellKind,
     TextCellEntry,
 } from "@glideapps/glide-data-grid";
-import { styled } from "@linaria/react";
-import * as React from "react";
-import Select, { type MenuProps, components } from "react-select";
 
 interface CustomMenuProps extends MenuProps<any> {}
 
@@ -105,10 +107,17 @@ const Editor: ReturnType<ProvideEditorCallback<DropdownCell>> = p => {
                         border: 0,
                         boxShadow: "none",
                     }),
-                    option: base => ({
+                    option: (base, { isFocused }) => ({
                         ...base,
                         fontSize: theme.editorFontSize,
                         fontFamily: theme.fontFamily,
+                        cursor: isFocused ? "pointer" : undefined,
+                        paddingLeft: theme.cellHorizontalPadding,
+                        paddingRight: theme.cellHorizontalPadding,
+                        ":active": {
+                            ...base[":active"],
+                            color: theme.accentFg,
+                        },
                         // Add some content in case the option is empty
                         // so that the option height can be calculated correctly
                         ":empty::after": {
@@ -196,13 +205,9 @@ const renderer: CustomRenderer<DropdownCell> = {
         }
         return true;
     },
-    measure: (ctx, cell) => {
+    measure: (ctx, cell, theme) => {
         const { value } = cell.data;
-        if (value) {
-            return ctx.measureText(value).width + 16;
-        } else {
-            return 16;
-        }
+        return (value ? ctx.measureText(value).width : 0) + theme.cellHorizontalPadding * 2;
     },
     provideEditor: () => ({
         editor: Editor,

diff --git a/packages/core/src/cells/number-cell.tsx b/packages/core/src/cells/number-cell.tsx
@@ -16,7 +16,7 @@ export const numberCellRenderer: InternalCellRenderer<NumberCell> = {
     useLabel: true,
     drawPrep: prepTextCell,
     draw: a => drawTextCell(a, a.cell.displayData, a.cell.contentAlign),
-    measure: (ctx, cell) => ctx.measureText(cell.displayData).width + 16,
+    measure: (ctx, cell, theme) => ctx.measureText(cell.displayData).width + theme.cellHorizontalPadding * 2,
     onDelete: c => ({
         ...c,
         data: undefined,

diff --git a/packages/core/src/cells/row-id-cell.tsx b/packages/core/src/cells/row-id-cell.tsx
@@ -11,7 +11,7 @@ export const rowIDCellRenderer: InternalCellRenderer<RowIDCell> = {
     needsHoverPosition: false,
     drawPrep: (a, b) => prepTextCell(a, b, a.theme.textLight),
     draw: a => drawTextCell(a, a.cell.data, a.cell.contentAlign),
-    measure: (ctx, cell) => ctx.measureText(cell.data).width + 16,
+    measure: (ctx, cell, theme) => ctx.measureText(cell.data).width + theme.cellHorizontalPadding * 2,
     // eslint-disable-next-line react/display-name
     provideEditor: () => p => {
         const { isHighlighted, onChange, value, validatedSelection } = p;