react-align 1.1.7 → 2.0.3

package/README.md

@@ -7,65 +7,54 @@ A highly customizable and powerful drag 'n drop align system for React.
 - Customizable features and styles to integrate into your app effectively
 - Fully written in TypeScript
 
-### **Drag 'n drop**
+### Drag 'n drop
 
 <img width="638" alt="Screen Shot 2021-06-24 at 18 19 33" src="https://user-images.githubusercontent.com/34051327/123242363-ed2ecd00-d51c-11eb-8f59-b7a74a39e942.png">
 
-### **Alignment**
+### Alignment
 
 <img width="1278" alt="Screen Shot 2021-06-24 at 18 46 47" src="https://user-images.githubusercontent.com/34051327/123242051-9e813300-d51c-11eb-88e4-0620db121148.png">
 
+### Getting started
+
+```
+npm install react-align
+yarn add react-align
+```
+
 ## Basic use
+
 ```tsx
-<div style={{ width: "100vw", height: "100vh" }}> 
-// element containing GridWrapper needs to set the width and height
-    <GridWrapper>
-        <GridSection>
-            <GridArea location={{ section: "left", area: "top" }}>
-                <GridItem
-                    id="1234"
-                    index={1}
-                    minH={100}
-                    maxH={150}
-                    minW={100}
-                    maxW={150}
-                    onReorder={YourReorderCallbackFunction}
-                    onMoveArea={YourMoveAreaCallback}>
-                ...your component
-                </GridItem>
-            </GridArea>
-        </GridSection>
-    </GridWrapper>
+<div style={{ width: "100vw", height: "100vh" }}>
+  {/* element containing GridWrapper needs to set the width and height */}
+  <GridWrapper
+    onMove={(id: string, destAreaId: string, destIndex: number, prevAreaId: string, prevIndex: number) => { /* ... */ }}
+    onExtend={(id: string, extended: boolean) => { /* ... */ }}
+    onAlignmentChange={(areaId: string, alignment: Alignment) => { /* ... */ }>
+    <GridSection>
+      <GridArea id="area1">
+        <GridItem id="1234" index={1}>
+          ...your component
+        </GridItem>
+      </GridArea>
+    </GridSection>
+  </GridWrapper>
 </div>
 ```
-All props used in the example above are **mandatory**. 
 
-Location is based on a section/area combo that allows for unique grid layouts. The drag n drop will recognize the GridAreas based on your own desired naming convention that makes sense with your layout.
+All props used in the example above are **mandatory** for full functionality.
 
-GridItem's id, index, onReorder and onMoveArea are necessary for the drag n drop as well. The id and index are presumed to be needed in your onMoveArea and OnReorder callback functions, respectively, as a way to manipulate your unique data. Types necessary for the callbacks are:
+To make sure the drag 'n drop works correctly all GridArea ids **inside a GridWrapper** must be unique. The drag n drop will recognize the GridAreas based on your own desired naming convention that makes sense with your layout.
 
-```tsx
-    type onReorder: (
-        id?: string,
-        originalLocation?: { section: string, area: string },
-        currentIndex?: number,
-        hoverIndex?: number
-    ) => void;
-    onMoveArea: (
-        currentItem?: string,
-        dropLocation?: { section: string, area: string},
-        originalLocation?: { section: string, area: string}
-    ) => void;
-```
-
-Finally, the min/max for width and height is expected to set the GridItem container that will dynamically shrink when space is limited or if you choose to allow your GridItems to extend.
+There are many other fields for each component, so please take a look at the source code to better customize react-align to your needs and look at the example for a simple example.
 
 ## Editor mode
-Re:Align's editor mode is easily toggleable by passing an *enabled* prop to the GridWrapper. 
+
+Re:Align's editor mode is easily toggleable by passing an *editing* prop to the GridWrapper.
 
 <img width="854" alt="Screen Shot 2021-06-24 at 18 15 51" src="https://user-images.githubusercontent.com/34051327/123240889-ad1b1a80-d51b-11eb-9a7d-8f9e75a9b9e0.png">
 
-(If you want to use your own method and/or avoid style changes between editor mode and non-editor mode, pass *draggable* into GridItem and *droppable* into GridArea to enable drag 'n drop functionality directly)
+If you find any bugs or would like to suggest any changes feel free to open an issue!
 
 Enjoy!
 

package/dist/GridArea.d.ts

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,27 @@
+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;
+    iconSize?: number;
+    iconColor?: string;
+};
+export default function GridItem({ className, children, id, index, extendable, extended, disabled, style, editorStyle, iconSize, iconColor, ...props }: ItemProps): JSX.Element;

package/dist/{Grid/GridSection/index.d.ts → GridSection.d.ts}

@@ -1,13 +1,14 @@
 import React, { CSSProperties } from 'react';
-import '../grid.css';
+import './grid.css';
 export declare type GridSectionProps = {
     className?: string;
     horizontal?: boolean;
     stretch?: boolean;
     fixedWidth?: number;
     fixedHeight?: number;
-    styles?: CSSProperties;
-    editorStyles?: CSSProperties;
+    /** 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

@@ -0,0 +1,17 @@
+import React, { CSSProperties } from 'react';
+import { Alignment } from './GridArea';
+import './grid.css';
+export declare type GridWrapperProps = {
+    className?: string;
+    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/index.d.ts

@@ -5,8 +5,8 @@ export declare type IconProps = {
     className?: string;
     name: string | Icons;
     size?: number;
+    style?: CSSProperties;
     onClick?: () => void;
-    styles?: CSSProperties;
 };
 declare const Icon: React.FC<IconProps>;
 export default Icon;

package/dist/context.d.ts

@@ -1,7 +1,14 @@
 /// <reference types="react" />
-export declare const EditorModeContext: import("react").Context<{
-    enabled: boolean | undefined;
+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 useEditorMode: () => {
-    enabled: boolean | 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.d.ts

@@ -1,6 +1,6 @@
-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";
-export type { Alignment } from "./Grid/GridArea";
+export type { Alignment } from "./GridArea";