Allow for unstyled custom editors (#153)

* Allow for unstyled custom editors * Less conflicty class names
glideapps · Feb 3, 2022 · 51f5527 · 51f5527
1 parent 8f15aa9
commit 51f5527
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/packages/core/src/data-grid-overlay-editor/data-grid-overlay-editor-style.tsx b/packages/core/src/data-grid-overlay-editor/data-grid-overlay-editor-style.tsx
@@ -24,17 +24,9 @@ export const DataGridOverlayEditorStyle = styled.div<Props>`
     max-width: 400px;
     max-height: calc(100vh - ${p => p.targetRect.y + 10}px);
 
-    border-radius: 2px;
-    background-color: ${p => p.theme.bgCell};
-
-    box-shadow: 0 0 0 1px ${p => p.theme.accentColor}, 0px 0px 1px rgba(62, 65, 86, 0.4),
-        0px 6px 12px rgba(62, 65, 86, 0.15);
-
     font-family: ${p => p.theme.fontFamily};
     font-size: 13px;
 
-    ${p => p.pad && `padding: ${Math.max(0, (p.targetRect.height - 28) / 2)}px 8.5px 3px;`}
-
     @keyframes glide_fade_in {
         from {
             opacity: 0%;
@@ -45,7 +37,16 @@ export const DataGridOverlayEditorStyle = styled.div<Props>`
         }
     }
 
-    animation: glide_fade_in 60ms 1;
+    &.style {
+        border-radius: 2px;
+        background-color: ${p => p.theme.bgCell};
+        ${p => p.pad && `padding: ${Math.max(0, (p.targetRect.height - 28) / 2)}px 8.5px 3px;`}
+
+        box-shadow: 0 0 0 1px ${p => p.theme.accentColor}, 0px 0px 1px rgba(62, 65, 86, 0.4),
+            0px 6px 12px rgba(62, 65, 86, 0.15);
+
+        animation: glide_fade_in 60ms 1;
+    }
 
     .clip-region {
         display: flex;

diff --git a/packages/core/src/data-grid-overlay-editor/data-grid-overlay-editor.tsx b/packages/core/src/data-grid-overlay-editor/data-grid-overlay-editor.tsx
@@ -77,9 +77,11 @@ const DataGridOverlayEditor: React.FunctionComponent<DataGridOverlayEditorProps>
 
     let pad = true;
     let editor: React.ReactNode;
+    let style = true;
 
     if (CustomEditor !== undefined) {
         pad = CustomEditor.disablePadding !== true;
+        style = CustomEditor.disableStyling !== true;
         editor = (
             <CustomEditor
                 isHighlighted={highlight}
@@ -115,7 +117,11 @@ const DataGridOverlayEditor: React.FunctionComponent<DataGridOverlayEditorProps>
     }
     const portal = createPortal(
         <ClickOutsideContainer className={className} onClickOutside={onClickOutside}>
-            <DataGridOverlayEditorStyle as={useLabel === true ? "label" : undefined} targetRect={target} pad={pad}>
+            <DataGridOverlayEditorStyle
+                className={style ? "gdg-style" : "gdg-unstyle"}
+                as={useLabel === true ? "label" : undefined}
+                targetRect={target}
+                pad={pad}>
                 <div className="clip-region" onKeyDown={CustomEditor === undefined ? undefined : onKeyDown}>
                     {editor}
                 </div>

diff --git a/packages/core/src/data-grid/data-grid-types.ts b/packages/core/src/data-grid/data-grid-types.ts
@@ -289,6 +289,7 @@ export type ProvideEditorCallback<T extends GridCell> = (
           readonly value: T;
       }> & {
           disablePadding?: boolean;
+          disableStyling?: boolean;
       })
     | undefined;