v2.0.1 - disable pointer events during editing, support function as c…

…hildren
reearth · Sep 30, 2021 · 929356a · 929356a
1 parent 423db5f
commit 929356a
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-align",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "author": "KaWaite",
   "module": "dist/react-align.esm.js",
   "license": "MIT",

diff --git a/src/GridItem.tsx b/src/GridItem.tsx
@@ -2,8 +2,8 @@ import React, {
   useMemo,
   CSSProperties,
   useState,
-  PropsWithChildren,
   useCallback,
+  ReactNode,
 } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 
@@ -24,33 +24,41 @@ export type ItemProps = {
   iconSize?: number;
   iconColor?: string;
   onExtend?: (extended: boolean) => void;
+  children?:
+    | ReactNode
+    | ((context: {
+        id: string;
+        editing: boolean;
+        isDragging: boolean;
+        isHovered: boolean;
+        extended: boolean;
+        extendable: boolean;
+        disabled: boolean;
+        index: number;
+      }) => ReactNode);
 };
 
 export default function GridItem({
   className,
   children,
   id,
   index,
-  extendable,
-  extended,
-  disabled,
+  extendable = false,
+  extended = false,
+  disabled = false,
   onExtend,
   // Picky stuff.
   style,
   editorStyle,
   iconSize,
   iconColor = 'rgb(255, 255, 255)',
   ...props
-}: PropsWithChildren<ItemProps>) {
+}: ItemProps) {
   const { end, vertical } = props as {
     end?: boolean;
     vertical?: boolean;
   };
-  const {
-    editing: enabled,
-    isDragging,
-    onExtend: onExtend2,
-  } = useAlignContext();
+  const { editing, isDragging, onExtend: onExtend2 } = useAlignContext();
   const [isHovered, setHovered] = useState(false);
   const handleExtend = useCallback(() => {
     if (!extendable) return;
@@ -67,6 +75,20 @@ export default function GridItem({
     [end]
   );
 
+  const ctx = useMemo(
+    () => ({
+      id,
+      editing,
+      isDragging,
+      isHovered,
+      extended,
+      extendable,
+      disabled,
+      index,
+    }),
+    [disabled, editing, extendable, extended, id, index, isDragging, isHovered]
+  );
+
   return (
     <Draggable draggableId={id} index={index} isDragDisabled={disabled}>
       {(provided, snapshot) => (
@@ -77,18 +99,21 @@ export default function GridItem({
           style={{
             flex: extended && !snapshot.isDragging ? 'auto' : undefined,
             opacity: snapshot.isDragging ? 0.5 : 1,
-            ...(enabled ? editorStyle : style),
+            ...(editing ? editorStyle : style),
             ...provided.draggableProps.style,
           }}
           onMouseEnter={() => setHovered(true)}
           onMouseLeave={() => setHovered(false)}
         >
+          <div style={{ pointerEvents: editing ? 'none' : undefined }}>
+            {typeof children === 'function' ? children(ctx) : children}
+          </div>
           <div
             className="overlay"
             style={{
               display:
                 !disabled &&
-                enabled &&
+                editing &&
                 isHovered &&
                 (snapshot.isDragging || !isDragging)
                   ? 'block'
@@ -117,7 +142,6 @@ export default function GridItem({
               )}
             </div>
           </div>
-          {children}
         </div>
       )}
     </Draggable>