react-align 2.0.2 → 2.0.5

package/src/GridItem.tsx

@@ -18,11 +18,6 @@ export type ItemProps = {
   extendable?: boolean;
   extended?: boolean;
   disabled?: boolean;
-  /** Extra customizable parts only for the really picky */
-  style?: CSSProperties;
-  editorStyle?: CSSProperties;
-  iconSize?: number;
-  iconColor?: string;
   onExtend?: (extended: boolean) => void;
   children?:
     | ReactNode
@@ -36,6 +31,10 @@ export type ItemProps = {
         disabled: boolean;
         index: number;
       }) => ReactNode);
+  /** Extra customizable parts only for the really picky */
+  style?: CSSProperties;
+  editorStyle?: CSSProperties;
+  iconColor?: string;
 };
 
 export default function GridItem({
@@ -46,33 +45,31 @@ export default function GridItem({
   extendable = false,
   extended = false,
   disabled = false,
-  onExtend,
   // Picky stuff.
   style,
   editorStyle,
-  iconSize,
   iconColor = 'rgb(255, 255, 255)',
   ...props
 }: ItemProps) {
-  const { end, vertical } = props as {
+  const { vertical } = props as {
     end?: boolean;
     vertical?: boolean;
   };
-  const { editing, isDragging, onExtend: onExtend2 } = useAlignContext();
+  const { editing, isDragging, onExtend } = useAlignContext();
   const [isHovered, setHovered] = useState(false);
   const handleExtend = useCallback(() => {
     if (!extendable) return;
     setHovered(false);
-    onExtend?.(!extended);
-    onExtend2?.(id, !extended);
-  }, [extendable, onExtend, extended, onExtend2, id]);
+    onExtend?.(id, !extended);
+  }, [extendable, onExtend, extended, id]);
 
   const buttonStyles: CSSProperties = useMemo(
     () => ({
-      alignItems: end ? 'end' : 'start',
-      float: end ? 'right' : 'left',
+      alignItems: 'start',
+      float: 'left',
+      color: iconColor,
     }),
-    [end]
+    [iconColor]
   );
 
   const ctx = useMemo(
@@ -102,50 +99,52 @@ export default function GridItem({
             ...(editing ? editorStyle : style),
             ...provided.draggableProps.style,
           }}
-          onMouseEnter={() => setHovered(true)}
-          onMouseLeave={() => setHovered(false)}
         >
           <div
             style={{
-              width: '100%',
-              height: '100%',
-              pointerEvents: editing ? 'none' : undefined,
+              display: 'inline-block',
+              position: 'relative',
+              minHeight: isHovered && !disabled ? '35px' : undefined,
+              width: !vertical && extended ? '100%' : undefined,
+              minWidth:
+                isHovered && !disabled
+                  ? extendable
+                    ? '70px'
+                    : '35px'
+                  : undefined,
+              height: vertical && extended ? '100%' : undefined,
             }}
+            onMouseEnter={() => setHovered(true)}
+            onMouseLeave={() => setHovered(false)}
           >
             {typeof children === 'function' ? children(ctx) : children}
-          </div>
-          <div
-            className="overlay"
-            style={{
-              display:
-                !disabled &&
-                editing &&
-                isHovered &&
-                (snapshot.isDragging || !isDragging)
-                  ? 'block'
-                  : 'none',
-            }}
-          >
-            <div className="overlay-buttons" style={buttonStyles}>
-              <div {...provided.dragHandleProps}>
-                <Icon
-                  name="moveArrows"
-                  size={iconSize}
-                  style={{ color: iconColor }}
-                />
-              </div>
-              {extendable && (
-                <div
-                  style={{ cursor: 'pointer', marginLeft: '8px' }}
-                  onClick={handleExtend}
-                >
-                  <Icon
-                    name={vertical ? 'verticalExtend' : 'horizontalExtend'}
-                    size={iconSize}
-                    style={{ color: iconColor }}
-                  />
+            <div
+              className="overlay"
+              style={{
+                display:
+                  !disabled &&
+                  editing &&
+                  isHovered &&
+                  (snapshot.isDragging || !isDragging)
+                    ? 'block'
+                    : 'none',
+              }}
+            >
+              <div className="overlay-buttons" style={buttonStyles}>
+                <div {...provided.dragHandleProps}>
+                  <Icon name="moveArrows" />
                 </div>
-              )}
+                {extendable && (
+                  <div
+                    style={{ cursor: 'pointer', marginLeft: '8px' }}
+                    onClick={handleExtend}
+                  >
+                    <Icon
+                      name={vertical ? 'verticalExtend' : 'horizontalExtend'}
+                    />
+                  </div>
+                )}
+              </div>
             </div>
           </div>
         </div>

package/src/GridSection.tsx

@@ -1,10 +1,11 @@
-import React, { CSSProperties } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 
 import { useAlignContext } from './context';
 import './grid.css';
 
 export type GridSectionProps = {
   className?: string;
+  children?: ReactNode;
   horizontal?: boolean;
   stretch?: boolean;
   fixedWidth?: number;
@@ -16,13 +17,13 @@ export type GridSectionProps = {
 
 const GridSection: React.FC<GridSectionProps> = ({
   className,
+  children,
   horizontal,
   stretch,
   fixedWidth,
   fixedHeight,
   style,
   editorStyle,
-  children,
 }) => {
   const { editing: enabled } = useAlignContext();
 

package/src/GridWrapper.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useCallback, useState } from 'react';
+import React, { CSSProperties, ReactNode, useCallback, useState } from 'react';
 import {
   DragDropContext,
   DropResult,
@@ -11,6 +11,7 @@ import './grid.css';
 
 export type GridWrapperProps = {
   className?: string;
+  children?: ReactNode;
   editing?: boolean;
   vertical?: boolean;
   stretch?: boolean;
@@ -19,25 +20,25 @@ export type GridWrapperProps = {
   editorStyle?: CSSProperties;
   onMove?: (
     id: string,
-    destLocation: string,
-    destIndedx: number,
-    originalLocation: string,
-    originalIndex: number
+    destAreaId: string,
+    destIndex: number,
+    prevAreaId: string,
+    prevIndex: number
   ) => void;
-  onAlignmentChange?: (location: string, align: Alignment) => void;
-  onExtend?: (location: string, extended: boolean) => void;
+  onAlignChange?: (areaId: string, align: Alignment) => void;
+  onExtend?: (id: string, extended: boolean) => void;
 };
 
 const GridWrapper: React.FC<GridWrapperProps> = ({
   className,
+  children,
   editing,
   vertical,
   stretch,
   style,
   editorStyle,
-  children,
   onMove,
-  onAlignmentChange: onAlignChange,
+  onAlignChange,
   onExtend,
 }) => {
   const [isDragging, setDragging] = useState(false);

package/src/Icon/index.tsx

@@ -1,5 +1,4 @@
-import React, { CSSProperties } from 'react';
-import { css } from 'glamor';
+import React from 'react';
 
 import Icons from './icons';
 
@@ -8,38 +7,12 @@ export type Icons = keyof typeof Icons;
 export type IconProps = {
   className?: string;
   name: string | Icons;
-  size?: number;
-  style?: CSSProperties;
   onClick?: () => void;
 };
 
-const IconStyles = (size?: number) =>
-  css({
-    cursor: 'pointer',
-    width: size || 24 + 'px',
-    height: size || 24 + 'px',
-    ' svg': {
-      height: size || 24 + 'px',
-      width: size || 24 + 'px',
-    },
-  });
-
-const Icon: React.FC<IconProps> = ({
-  className,
-  name,
-  size,
-  style,
-  onClick,
-}) => {
+const Icon: React.FC<IconProps> = ({ className, name, onClick }) => {
   const LocalIconComponent = Icons[name as Icons];
-  return (
-    <LocalIconComponent
-      className={className}
-      {...IconStyles(size)}
-      style={style}
-      onClick={onClick}
-    />
-  );
+  return <LocalIconComponent className={className} onClick={onClick} />;
 };
 
 export default Icon;

package/src/context.tsx

@@ -4,7 +4,7 @@ import { Alignment } from '.';
 export const Context = createContext<{
   editing: boolean;
   isDragging: boolean;
-  onAlignChange?: (location: string, align: Alignment) => void;
-  onExtend?: (location: string, extended: boolean) => void;
+  onAlignChange?: (areaId: string, align: Alignment) => void;
+  onExtend?: (id: string, extended: boolean) => void;
 }>({ editing: false, isDragging: false });
 export const useAlignContext = () => useContext(Context);

package/src/grid.css

@@ -13,7 +13,7 @@
 
 .area {
   display: flex;
-  border: 1px solid transparent;
+  border: 0 solid transparent;
   box-sizing: border-box;
   border-radius: 8px;
   position: relative;
@@ -29,12 +29,9 @@
 
 .item {
   position: relative;
-  border: 1px solid transparent;
-  box-sizing: border-box;
+  border: 0 solid transparent;
   margin: 6px;
   border-radius: 6px;
-  min-width: 70px;
-  min-height: 40px;
 }
 
 .stretch {
@@ -66,8 +63,8 @@
   position: absolute;
   top: 0;
   left: 0;
-  bottom: 0;
-  right: 0;
+  width: 100%;
+  height: 100%;
   box-sizing: border-box;
   background: rgba(0,0,0,0.6);
 }