react-align 2.0.5 → 2.2.0

package/src/GridWrapper.tsx

@@ -1,13 +1,9 @@
-import React, { CSSProperties, ReactNode, useCallback, useState } from 'react';
-import {
-  DragDropContext,
-  DropResult,
-  ResponderProvided,
-} from 'react-beautiful-dnd';
+import { CSSProperties, ReactNode, useCallback, useState } from "react";
+import { DragDropContext, DropResult, ResponderProvided } from "react-beautiful-dnd";
 
-import { Context } from './context';
-import { Alignment } from './GridArea';
-import './grid.css';
+import { Context } from "./context";
+import { Alignment } from "./GridArea";
+import "./grid.css";
 
 export type GridWrapperProps = {
   className?: string;
@@ -23,7 +19,7 @@ export type GridWrapperProps = {
     destAreaId: string,
     destIndex: number,
     prevAreaId: string,
-    prevIndex: number
+    prevIndex: number,
   ) => void;
   onAlignChange?: (areaId: string, align: Alignment) => void;
   onExtend?: (id: string, extended: boolean) => void;
@@ -52,7 +48,7 @@ const GridWrapper: React.FC<GridWrapperProps> = ({
       setDragging(false);
       if (
         !result.destination ||
-        result.reason !== 'DROP' ||
+        result.reason !== "DROP" ||
         (result.destination.droppableId === result.source.droppableId &&
           result.destination.index === result.source.index)
       )
@@ -62,22 +58,20 @@ const GridWrapper: React.FC<GridWrapperProps> = ({
         result.destination.droppableId,
         result.destination.index,
         result.source.droppableId,
-        result.source.index
+        result.source.index,
       );
     },
-    [onMove]
+    [onMove],
   );
 
   return (
     <div
-      className={`wrapper ${className} ${vertical && 'vertical'} ${stretch &&
-        'stretch'}`}
-      style={editing ? editorStyle : style}
-    >
+      className={["reactalign", "wrapper", className, vertical && "vertical", stretch && "stretch"]
+        .filter(Boolean)
+        .join(" ")}
+      style={editing ? editorStyle : style}>
       <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
-        <Context.Provider
-          value={{ editing: !!editing, onAlignChange, onExtend, isDragging }}
-        >
+        <Context.Provider value={{ editing: !!editing, onAlignChange, onExtend, isDragging }}>
           {children}
         </Context.Provider>
       </DragDropContext>

package/src/Icon/icons.ts

@@ -1,14 +1,14 @@
-import HorizontalExtend from './Icons/horizontalExtend.svg';
-import HorizontalNormal from './Icons/horizontalNormal.svg';
-import VerticalExtend from './Icons/verticalExtend.svg';
-import VerticalNormal from './Icons/verticalNormal.svg';
-import MoveArrows from './Icons/moveArrows.svg';
-import AlignStart from './Icons/alignStart.svg';
-import AlignCenter from './Icons/alignCenter.svg';
-import AlignEnd from './Icons/alignEnd.svg';
-import AlignStartV from './Icons/alignStartV.svg';
-import AlignCenterV from './Icons/alignCenterV.svg';
-import AlignEndV from './Icons/alignEndV.svg';
+import { ReactComponent as AlignCenter } from "./Icons/alignCenter.svg";
+import { ReactComponent as AlignCenterV } from "./Icons/alignCenterV.svg";
+import { ReactComponent as AlignEnd } from "./Icons/alignEnd.svg";
+import { ReactComponent as AlignEndV } from "./Icons/alignEndV.svg";
+import { ReactComponent as AlignStart } from "./Icons/alignStart.svg";
+import { ReactComponent as AlignStartV } from "./Icons/alignStartV.svg";
+import { ReactComponent as HorizontalExtend } from "./Icons/horizontalExtend.svg";
+import { ReactComponent as HorizontalNormal } from "./Icons/horizontalNormal.svg";
+import { ReactComponent as MoveArrows } from "./Icons/moveArrows.svg";
+import { ReactComponent as VerticalExtend } from "./Icons/verticalExtend.svg";
+import { ReactComponent as VerticalNormal } from "./Icons/verticalNormal.svg";
 
 export default {
   horizontalExtend: HorizontalExtend,

package/src/Icon/index.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
+import React from "react";
 
-import Icons from './icons';
+import Icons from "./icons";
 
-export type Icons = keyof typeof Icons;
+export type IconKeys = keyof typeof Icons;
 
 export type IconProps = {
   className?: string;
-  name: string | Icons;
+  name: string | IconKeys;
   onClick?: () => void;
 };
 
 const Icon: React.FC<IconProps> = ({ className, name, onClick }) => {
-  const LocalIconComponent = Icons[name as Icons];
+  const LocalIconComponent = Icons[name as IconKeys];
   return <LocalIconComponent className={className} onClick={onClick} />;
 };
 

package/src/context.tsx

@@ -1,5 +1,6 @@
-import { createContext, useContext } from 'react';
-import { Alignment } from '.';
+import { createContext, useContext } from "react";
+
+import { Alignment } from ".";
 
 export const Context = createContext<{
   editing: boolean;

package/src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

package/src/grid.css

@@ -1,17 +1,17 @@
 /* Default component styles */
-.wrapper {
+.reactalign.wrapper {
   height: 100%;
   display: flex;
   justify-content: space-between;
 }
 
-.section {
+.reactalign .section {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 
-.area {
+.reactalign .area {
   display: flex;
   border: 0 solid transparent;
   box-sizing: border-box;
@@ -19,47 +19,46 @@
   position: relative;
 }
 
-.area-transition-in {
+.reactalign .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 {
+.reactalign .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 {
+.reactalign .item {
   position: relative;
   border: 0 solid transparent;
   margin: 6px;
   border-radius: 6px;
 }
 
-.stretch {
+.reactalign .stretch {
   flex: auto;
 }
 
-.middle {
-  flex-grow: 0;
-  flex: auto;
-}
-
-.just-centered {
+.reactalign .just-centered {
   justify-content: center;
 }
 
-.just-end {
+.reactalign .just-end {
   justify-content: flex-end;
 }
 
-.end {
-  align-items:flex-end;
+.reactalign .middle {
+  align-items: center;
+}
+
+.reactalign .bottom {
+  align-items: flex-end;
 }
 
-.hide {
+.reactalign .hide {
   display: none;
 }
 
-.overlay {
+.reactalign .overlay {
   position: absolute;
   top: 0;
   left: 0;
@@ -69,7 +68,7 @@
   background: rgba(0,0,0,0.6);
 }
 
-.overlay-buttons {
+.reactalign .overlay-buttons {
   display: flex;
   padding: 6px;
   box-sizing: border-box;

package/src/{index.tsx → index.ts}

@@ -4,5 +4,4 @@ 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 "./GridArea";

package/dist/GridArea.d.ts

@@ -1,18 +0,0 @@
-import { CSSProperties, PropsWithChildren } from 'react';
-import './grid.css';
-export declare type Alignment = 'start' | 'centered' | 'end';
-export declare type AreaProps = {
-    id: string;
-    className?: string;
-    vertical?: boolean;
-    stretch?: boolean;
-    end?: boolean;
-    align?: Alignment;
-    disabled?: boolean;
-    /** Extra customizable parts only for the really picky */
-    style?: CSSProperties;
-    editorStyle?: CSSProperties;
-    iconColor?: string;
-    onAlignChange?: (alignment: Alignment) => void;
-};
-export default function GridArea({ id, className, vertical, stretch, end, disabled, align, onAlignChange, children, style, editorStyle, iconColor, }: PropsWithChildren<AreaProps>): JSX.Element;

package/dist/GridItem.d.ts

@@ -1,26 +0,0 @@
-import { CSSProperties, ReactNode } from 'react';
-import './grid.css';
-export declare type ItemProps = {
-    className?: string;
-    id: string;
-    index: number;
-    extendable?: boolean;
-    extended?: boolean;
-    disabled?: boolean;
-    onExtend?: (extended: boolean) => void;
-    children?: ReactNode | ((context: {
-        id: string;
-        editing: boolean;
-        isDragging: boolean;
-        isHovered: boolean;
-        extended: boolean;
-        extendable: boolean;
-        disabled: boolean;
-        index: number;
-    }) => ReactNode);
-    /** Extra customizable parts only for the really picky */
-    style?: CSSProperties;
-    editorStyle?: CSSProperties;
-    iconColor?: string;
-};
-export default function GridItem({ className, children, id, index, extendable, extended, disabled, style, editorStyle, iconColor, ...props }: ItemProps): JSX.Element;

package/dist/GridSection.d.ts

@@ -1,15 +0,0 @@
-import React, { CSSProperties, ReactNode } from 'react';
-import './grid.css';
-export declare type GridSectionProps = {
-    className?: string;
-    children?: ReactNode;
-    horizontal?: boolean;
-    stretch?: boolean;
-    fixedWidth?: number;
-    fixedHeight?: number;
-    /** Extra customizable parts only for the really picky */
-    style?: CSSProperties;
-    editorStyle?: CSSProperties;
-};
-declare const GridSection: React.FC<GridSectionProps>;
-export default GridSection;

package/dist/GridWrapper.d.ts

@@ -1,18 +0,0 @@
-import React, { CSSProperties, ReactNode } from 'react';
-import { Alignment } from './GridArea';
-import './grid.css';
-export declare type GridWrapperProps = {
-    className?: string;
-    children?: ReactNode;
-    editing?: boolean;
-    vertical?: boolean;
-    stretch?: boolean;
-    /** Extra customizable parts only for the really picky */
-    style?: CSSProperties;
-    editorStyle?: CSSProperties;
-    onMove?: (id: string, destAreaId: string, destIndex: number, prevAreaId: string, prevIndex: number) => void;
-    onAlignChange?: (areaId: string, align: Alignment) => void;
-    onExtend?: (id: string, extended: boolean) => void;
-};
-declare const GridWrapper: React.FC<GridWrapperProps>;
-export default GridWrapper;

package/dist/Icon/icons.d.ts

@@ -1,14 +0,0 @@
-declare const _default: {
-    horizontalExtend: any;
-    horizontalNormal: any;
-    verticalExtend: any;
-    verticalNormal: any;
-    moveArrows: any;
-    alignStart: any;
-    alignCenter: any;
-    alignEnd: any;
-    alignStartV: any;
-    alignCenterV: any;
-    alignEndV: any;
-};
-export default _default;

package/dist/Icon/index.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import Icons from './icons';
-export declare type Icons = keyof typeof Icons;
-export declare type IconProps = {
-    className?: string;
-    name: string | Icons;
-    onClick?: () => void;
-};
-declare const Icon: React.FC<IconProps>;
-export default Icon;

package/dist/context.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import { Alignment } from '.';
-export declare const Context: import("react").Context<{
-    editing: boolean;
-    isDragging: boolean;
-    onAlignChange?: ((areaId: string, align: Alignment) => void) | undefined;
-    onExtend?: ((id: string, extended: boolean) => void) | undefined;
-}>;
-export declare const useAlignContext: () => {
-    editing: boolean;
-    isDragging: boolean;
-    onAlignChange?: ((areaId: string, align: Alignment) => void) | undefined;
-    onExtend?: ((id: string, extended: boolean) => void) | undefined;
-};

package/dist/index.js

@@ -1,8 +0,0 @@
-
-'use strict'
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./react-align.cjs.production.min.js')
-} else {
-  module.exports = require('./react-align.cjs.development.js')
-}