react-align 1.1.6 → 2.0.2

package/src/Icon/index.tsx

@@ -9,8 +9,8 @@ export type IconProps = {
   className?: string;
   name: string | Icons;
   size?: number;
+  style?: CSSProperties;
   onClick?: () => void;
-  styles?: CSSProperties;
 };
 
 const IconStyles = (size?: number) =>
@@ -28,15 +28,15 @@ const Icon: React.FC<IconProps> = ({
   className,
   name,
   size,
+  style,
   onClick,
-  styles,
 }) => {
   const LocalIconComponent = Icons[name as Icons];
   return (
     <LocalIconComponent
       className={className}
       {...IconStyles(size)}
-      style={styles}
+      style={style}
       onClick={onClick}
     />
   );

package/src/context.tsx

@@ -1,6 +1,10 @@
 import { createContext, useContext } from 'react';
+import { Alignment } from '.';
 
-export const EditorModeContext = createContext<{
-  enabled: boolean | undefined;
-}>({ enabled: undefined });
-export const useEditorMode = () => useContext(EditorModeContext);
+export const Context = createContext<{
+  editing: boolean;
+  isDragging: boolean;
+  onAlignChange?: (location: string, align: Alignment) => void;
+  onExtend?: (location: string, extended: boolean) => void;
+}>({ editing: false, isDragging: false });
+export const useAlignContext = () => useContext(Context);

package/src/grid.css

@@ -0,0 +1,80 @@
+/* Default component styles */
+.wrapper {
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.area {
+  display: flex;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  border-radius: 8px;
+  position: relative;
+}
+
+.area-transition-in {
+  transition: all 0.3s ease-in-out, min-height 0.5s ease-in-out 0.2s, min-width 0.5s ease-in-out 0.2s;
+}
+
+.area-transition-out {
+  transition: all 0.3s ease-in-out 0.4s, min-height 0.5s ease-in-out 0.2s, min-width 0.5s ease-in-out 0.2s;
+}
+
+.item {
+  position: relative;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  margin: 6px;
+  border-radius: 6px;
+  min-width: 70px;
+  min-height: 40px;
+}
+
+.stretch {
+  flex: auto;
+}
+
+.middle {
+  flex-grow: 0;
+  flex: auto;
+}
+
+.just-centered {
+  justify-content: center;
+}
+
+.just-end {
+  justify-content: flex-end;
+}
+
+.end {
+  align-items:flex-end;
+}
+
+.hide {
+  display: none;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  box-sizing: border-box;
+  background: rgba(0,0,0,0.6);
+}
+
+.overlay-buttons {
+  display: flex;
+  padding: 6px;
+  box-sizing: border-box;
+  justify-content: space-between;
+}

package/src/index.tsx

@@ -1,8 +1,8 @@
-export { default as GridWrapper } from "./Grid/GridWrapper";
-export { default as GridSection } from "./Grid/GridSection";
-export { default as GridArea } from "./Grid/GridArea";
-export { default as GridItem } from "./Grid/GridItem";
+export { default as GridWrapper } from "./GridWrapper";
+export { default as GridSection } from "./GridSection";
+export { default as GridArea } from "./GridArea";
+export { default as GridItem } from "./GridItem";
 export { default as Icon } from "./Icon";
 
 // eslint-disable-next-line prettier/prettier
-export type { Alignment } from "./Grid/GridArea";
+export type { Alignment } from "./GridArea";

package/dist/Grid/GridArea/index.d.ts

@@ -1,18 +0,0 @@
-import { CSSProperties, PropsWithChildren } from 'react';
-import '../grid.css';
-export declare type Alignment = 'start' | 'end' | 'centered';
-export declare type AreaProps<T = unknown> = {
-    className?: string;
-    vertical?: boolean;
-    reverse?: boolean;
-    stretch?: boolean;
-    end?: boolean;
-    droppable?: boolean;
-    align?: Alignment;
-    location: T;
-    styles?: CSSProperties;
-    editorStyles?: CSSProperties;
-    iconColor?: string;
-    onAlignChange?: (a: Alignment) => void;
-};
-export default function GridArea<T = unknown>({ className, vertical, reverse, stretch, end, droppable, align, onAlignChange, location, children, styles, editorStyles, iconColor, }: PropsWithChildren<AreaProps<T>>): JSX.Element;

package/dist/Grid/GridItem/index.d.ts

@@ -1,25 +0,0 @@
-import { CSSProperties, PropsWithChildren } from 'react';
-import '../grid.css';
-export declare type ItemProps<T = unknown> = {
-    className?: string;
-    id: string;
-    index: number;
-    extendable?: boolean;
-    extended?: boolean;
-    draggable?: boolean;
-    onReorder: (id: string, originalLocation: T, currentIndex: number, hoverIndex: number) => void;
-    onMoveArea: (currentItem: string, dropLocation: T, originalLocation: T) => void;
-    onExtend?: (id: string, extended: boolean) => void;
-    location: T;
-    end?: boolean;
-    vertical?: boolean;
-    styles?: CSSProperties;
-    editorStyles?: CSSProperties;
-    iconSize?: number;
-    iconColor?: string;
-};
-export declare const ItemType: {
-    ITEM: string;
-    GROUP: string;
-};
-export default function GridItem<T = unknown>({ className, children, id, index, extendable, extended, draggable, onReorder, onMoveArea, onExtend, location, end, vertical, styles, editorStyles, iconSize, iconColor, }: PropsWithChildren<ItemProps<T>>): JSX.Element;

package/dist/Grid/GridWrapper/index.d.ts

@@ -1,12 +0,0 @@
-import React, { CSSProperties } from 'react';
-import '../grid.css';
-export declare type GridWrapperProps = {
-    className?: string;
-    enabled?: boolean;
-    vertical?: boolean;
-    stretch?: boolean;
-    styles?: CSSProperties;
-    editorStyles?: CSSProperties;
-};
-declare const GridWrapper: React.FC<GridWrapperProps>;
-export default GridWrapper;

package/src/Grid/GridArea/index.tsx

@@ -1,180 +0,0 @@
-import React, {
-  CSSProperties,
-  PropsWithChildren,
-  useCallback,
-  useMemo,
-} from 'react';
-import { useDrop, DropTargetMonitor } from 'react-dnd';
-import { ItemProps } from '../GridItem';
-import { useEditorMode } from '../../context';
-import Icon from '../../Icon';
-import '../grid.css';
-
-import { ItemType } from '../GridItem';
-
-export type Alignment = 'start' | 'end' | 'centered';
-
-export type AreaProps<T = unknown> = {
-  className?: string;
-  vertical?: boolean;
-  reverse?: boolean;
-  stretch?: boolean;
-  end?: boolean;
-  droppable?: boolean; // optional to override editorMode context (enabled param passed to GridWrapper) **Needs to be accompanied with GridItems draggable prop**
-  align?: Alignment;
-  location: T;
-  // Extra customizable parts only for the really picky
-  styles?: CSSProperties;
-  editorStyles?: CSSProperties;
-  iconColor?: string;
-  onAlignChange?: (a: Alignment) => void;
-};
-
-export default function GridArea<T = unknown>({
-  className,
-  vertical,
-  reverse,
-  stretch,
-  end,
-  droppable,
-  align,
-  onAlignChange,
-  location,
-  children,
-  // Picky stuff
-  styles,
-  editorStyles,
-  iconColor = '#FFFFFF',
-}: PropsWithChildren<AreaProps<T>>) {
-  const { enabled } = useEditorMode();
-
-  const handleAlignChange = useCallback(
-    (align: Alignment) => {
-      switch (align) {
-        case 'start':
-          onAlignChange?.('centered');
-          break;
-        case 'centered':
-          onAlignChange?.('end');
-          break;
-        default:
-          onAlignChange?.('start');
-          break;
-      }
-    },
-    [onAlignChange]
-  );
-
-  // ***************************************
-  // Drop logic
-  const [{ isOver }, drop] = useDrop(() => ({
-    accept: [ItemType.ITEM, ItemType.GROUP],
-    drop: () => ({ location: location }),
-    collect: (monitor: DropTargetMonitor) => ({
-      isOver: monitor.isOver(),
-    }),
-  }));
-  // ***************************************
-
-  // ***************************************
-  // Internal styles used
-  const buttonStyle: CSSProperties = useMemo(
-    () => ({
-      position: 'absolute',
-      left: vertical ? (end ? 0 : undefined) : '50%',
-      right: vertical ? (!end ? 0 : undefined) : '50%',
-      bottom: !vertical && !end ? 0 : vertical ? '50%' : undefined,
-      top: vertical ? '50%' : end ? 0 : undefined,
-      opacity: (droppable ?? enabled) && align ? 1 : 0,
-      transition: 'all 0.5s ease-in-out',
-    }),
-    [vertical, end, droppable, enabled, align]
-  );
-
-  const mainStyles: CSSProperties = useMemo(
-    () => ({
-      opacity: isOver ? 0.8 : 1,
-      minHeight: !React.Children.count(children) && !enabled ? '0px' : '26px',
-      minWidth: !React.Children.count(children) && !enabled ? '0px' : '46px',
-    }),
-    [isOver, children, enabled]
-  );
-
-  const stylesFromProps: CSSProperties | undefined = enabled
-    ? editorStyles
-    : styles;
-  // ***************************************
-
-  // Rebuilds the GridItem children to receive their parent GridArea's 'end' and 'vertical' values.
-  // Used to know where to align the overlay buttons (end) and how to extend the GridItems (vertical).
-  const childrenWithParentProps = React.Children.map(children, child =>
-    React.cloneElement(child as React.ReactElement<ItemProps<T>>, {
-      end,
-      vertical,
-      location,
-    })
-  );
-
-  return (
-    <div
-      ref={drop}
-      className={`
-      ${className}
-      area
-      ${stretch && 'stretch'}
-      ${end && 'end'}
-      ${
-        align === 'centered'
-          ? 'just-centered'
-          : align === 'end'
-          ? 'just-end'
-          : 'start'
-      }
-      ${
-        vertical
-          ? reverse
-            ? 'vertical-r'
-            : 'vertical'
-          : reverse
-          ? 'horizontal-r'
-          : 'horizontal'
-      }
-      ${enabled ? 'area-transition-in' : 'area-transition-out'}
-      `}
-      style={{ ...mainStyles, ...stylesFromProps }}
-    >
-      {childrenWithParentProps}
-      <div style={buttonStyle}>
-        <Icon
-          name={
-            align === 'centered'
-              ? vertical
-                ? 'alignCenterV'
-                : 'alignCenter'
-              : align === 'end'
-              ? vertical
-                ? 'alignEndV'
-                : 'alignEnd'
-              : vertical
-              ? 'alignStartV'
-              : 'alignStart'
-          }
-          styles={{
-            color: iconColor,
-            cursor:
-              (droppable ?? enabled) &&
-              align &&
-              !!React.Children.count(children)
-                ? 'pointer'
-                : 'default',
-          }}
-          onClick={
-            (droppable ?? enabled) && align && !!React.Children.count(children)
-              ? () => handleAlignChange(align)
-              : undefined
-          }
-        />
-      </div>
-    </div>
-  );
-}

package/src/Grid/GridItem/index.tsx

@@ -1,266 +0,0 @@
-import React, {
-  useMemo,
-  useRef,
-  CSSProperties,
-  useState,
-  PropsWithChildren,
-} from 'react';
-import { useDrag, useDrop, DragSourceMonitor } from 'react-dnd';
-import { useEditorMode } from '../../context';
-import { DragItem } from '../interfaces';
-
-import Icon from '../../Icon';
-
-import '../grid.css';
-
-export type ItemProps<T = unknown> = {
-  className?: string;
-  id: string;
-  index: number;
-  extendable?: boolean;
-  extended?: boolean;
-  draggable?: boolean; // Optional to override or not use editorMode context. **Needs to be accompanied with GridAreas droppable prop**
-  onReorder: (
-    id: string,
-    originalLocation: T,
-    currentIndex: number,
-    hoverIndex: number
-  ) => void;
-  onMoveArea: (
-    currentItem: string,
-    dropLocation: T,
-    originalLocation: T
-  ) => void;
-  onExtend?: (id: string, extended: boolean) => void;
-  // Props passed from parent.
-  location: T;
-  end?: boolean;
-  vertical?: boolean;
-  // Extra customizable parts only for the really picky.
-  styles?: CSSProperties;
-  editorStyles?: CSSProperties;
-  iconSize?: number;
-  iconColor?: string;
-};
-
-export const ItemType = {
-  ITEM: 'react-align_item',
-  GROUP: 'react-align_group',
-};
-
-export default function GridItem<T = unknown>({
-  className,
-  children,
-  id,
-  index,
-  extendable,
-  extended,
-  draggable,
-  onReorder,
-  onMoveArea,
-  onExtend,
-  // Passed from parent (aka GridArea).
-  location,
-  end,
-  vertical,
-  // Picky stuff.
-  styles,
-  editorStyles,
-  iconSize,
-  iconColor = 'rgb(255, 255, 255)',
-}: PropsWithChildren<ItemProps<T>>) {
-  const ref = useRef<HTMLDivElement>(null);
-  const { enabled } = useEditorMode();
-
-  const [isHovered, setHovered] = useState(false);
-  const dragIndexRef = useRef<number | undefined>();
-
-  const handleExtend = () => {
-    if (!extendable || !onExtend) return;
-    setHovered(false);
-    onExtend(id, !extended);
-  };
-
-  // ***************************************
-  // Drag n drop logic
-  const [{ handlerId }, drop] = useDrop({
-    accept: [ItemType.ITEM, ItemType.GROUP],
-    collect(monitor) {
-      return {
-        handlerId: monitor.getHandlerId(),
-      };
-    },
-    hover(item: DragItem, monitor) {
-      if (!ref.current || !enabled || draggable) {
-        return;
-      }
-
-      const dragIndex = item.index;
-      const hoverIndex = index;
-
-      if (dragIndex === hoverIndex) {
-        return;
-      }
-
-      const hoverBoundingRect = ref.current?.getBoundingClientRect();
-
-      const hoverMiddleY =
-        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-      const hoverMiddleX =
-        (hoverBoundingRect.right - hoverBoundingRect.left) / 2;
-
-      const clientOffset = monitor.getClientOffset();
-      if (!clientOffset) return;
-
-      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
-      const hoverClientX = clientOffset.x - hoverBoundingRect.left;
-
-      if (vertical) {
-        if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
-          return;
-        }
-
-        if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
-          return;
-        }
-      } else {
-        if (dragIndex < hoverIndex && hoverClientX < hoverMiddleX) {
-          return;
-        }
-
-        if (dragIndex > hoverIndex && hoverClientX > hoverMiddleX) {
-          return;
-        }
-      }
-
-      dragIndexRef.current = dragIndex;
-    },
-    drop(item) {
-      if (dragIndexRef.current !== undefined) {
-        onReorder(item.id, location, dragIndexRef.current, index);
-        dragIndexRef.current = undefined;
-      }
-    },
-  });
-
-  const [{ isDragging }, drag, preview] = useDrag(
-    {
-      type: ItemType.ITEM,
-      item: { id, index },
-      canDrag: draggable ?? enabled,
-      end: (item, monitor) => {
-        const dropResults: {
-          location: T;
-        } | null = monitor.getDropResult();
-
-        if (dropResults && dropResults.location !== location) {
-          onMoveArea(item.id, dropResults.location, location);
-        }
-      },
-      collect: (monitor: DragSourceMonitor) => ({
-        isDragging: monitor.isDragging(),
-      }),
-    },
-    [dragIndexRef]
-  );
-
-  preview(drop(ref));
-  // ***************************************
-
-  // ***************************************
-  // External styles for editorMode or the vanilla grid
-  const stylesFromProps: CSSProperties | undefined = enabled
-    ? editorStyles
-    : styles;
-
-  const itemStyles: CSSProperties = useMemo(
-    () => ({
-      opacity: isDragging ? 0.5 : 1,
-      minHeight: isHovered && enabled ? '40px' : undefined,
-      width: !vertical && extended ? '100%' : undefined,
-      minWidth:
-        isHovered && enabled ? (extendable ? '70px' : '30px') : undefined,
-      height: vertical && extended ? '100%' : undefined,
-    }),
-    [isDragging, isHovered, enabled, vertical, extended, extendable]
-  );
-
-  const containerStyle: CSSProperties = useMemo(
-    () => ({
-      position: 'relative',
-      display: 'inline-block',
-      minHeight: isHovered && enabled ? '40px' : undefined,
-      width: !vertical && extended ? '100%' : undefined,
-      minWidth:
-        isHovered && enabled ? (extendable ? '70px' : '30px') : undefined,
-      height: vertical && extended ? '100%' : undefined,
-    }),
-    [isHovered, enabled, vertical, extended, extendable]
-  );
-
-  const overlayStyles: CSSProperties = {
-    position: 'absolute',
-    top: '0',
-    left: '0',
-    width: '100%',
-    height: '100%',
-    boxSizing: 'border-box',
-    background: 'rgba(0,0,0,0.6)',
-    borderRadius: '6px',
-  };
-
-  const buttonStyles: CSSProperties = useMemo(
-    () => ({
-      display: 'flex',
-      alignItems: end ? 'end' : 'start',
-      justifyContent: 'space-between',
-      padding: '6px',
-      float: end ? 'right' : 'left',
-    }),
-    [end]
-  );
-  // ***************************************
-
-  const childrenWithParentProps = React.Children.map(children, child =>
-    React.cloneElement(child as React.ReactElement<{ extended: boolean }>, {
-      extended: extended,
-    })
-  );
-
-  return (
-    <div
-      id={id}
-      ref={ref}
-      data-handler-id={handlerId}
-      className={`${className} item`}
-      style={{ ...itemStyles, ...stylesFromProps }}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
-      <div style={containerStyle}>
-        {(draggable ?? enabled) && isHovered && (
-          <div style={overlayStyles}>
-            <div style={buttonStyles}>
-              <div ref={drag}>
-                <Icon
-                  name="moveArrows"
-                  size={iconSize}
-                  styles={{ color: iconColor }}
-                />
-              </div>
-              {extendable && (
-                <Icon
-                  name={vertical ? 'verticalExtend' : 'horizontalExtend'}
-                  size={iconSize}
-                  styles={{ color: iconColor, marginLeft: '8px' }}
-                  onClick={handleExtend}
-                />
-              )}
-            </div>
-          </div>
-        )}
-        {childrenWithParentProps}
-      </div>
-    </div>
-  );
-}

package/src/Grid/GridSection/index.tsx

@@ -1,46 +0,0 @@
-import React, { CSSProperties } from 'react';
-import { useEditorMode } from '../../context';
-import '../grid.css';
-
-export type GridSectionProps = {
-  className?: string;
-  horizontal?: boolean;
-  stretch?: boolean;
-  fixedWidth?: number;
-  fixedHeight?: number;
-  // Extra customizable parts only for the really picky
-  styles?: CSSProperties;
-  editorStyles?: CSSProperties;
-};
-
-const GridSection: React.FC<GridSectionProps> = ({
-  className,
-  horizontal,
-  stretch,
-  fixedWidth,
-  fixedHeight,
-  styles,
-  editorStyles,
-  children,
-}) => {
-  const { enabled } = useEditorMode();
-  const stylesFromProps: CSSProperties | undefined = enabled
-    ? editorStyles
-    : styles;
-
-  return (
-    <div
-      className={`section ${className} ${horizontal &&
-        'horizontal'} ${stretch && 'stretch'}`}
-      style={{
-        ...stylesFromProps,
-        height: fixedHeight + 'px',
-        width: fixedWidth + 'px',
-      }}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default GridSection;