v2.0.3 - clean up, update README

README.md

@@ -28,11 +28,11 @@ yarn add react-align
 <div style={{ width: "100vw", height: "100vh" }}>
   {/* element containing GridWrapper needs to set the width and height */}
   <GridWrapper
-    onMove={(id: string, destAreaId: string, index: number, prevAreaId: string, prevIndex: number) => { /* ... */ }}
-    onExtend={(id: string, extebded: boolean) => { /* ... */ }}
+    onMove={(id: string, destAreaId: string, destIndex: number, prevAreaId: string, prevIndex: number) => { /* ... */ }}
+    onExtend={(id: string, extended: boolean) => { /* ... */ }}
     onAlignmentChange={(areaId: string, alignment: Alignment) => { /* ... */ }>
     <GridSection>
-      <GridArea location="location1">
+      <GridArea id="area1">
         <GridItem id="1234" index={1}>
           ...your component
         </GridItem>
@@ -42,29 +42,19 @@ yarn add react-align
 </div>
 ```
 
-All props used in the example above are **mandatory**.
+All props used in the example above are **mandatory** for full functionality.
 
-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.
+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.
 
-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:
-
-```tsx
-type Props = {
-  onMove: (id: string, destAreaId: string, index: number, prevAreaId: string, prevIndex: number) => { /* ... */ }
-  onExtend: (id: string, extebded: boolean) => { /* ... */ }
-  onAlignmentChange: (areaId: string, alignment: Alignment) => { /* ... */ }
-};
-```
-
-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!
 

example/src/App.tsx

@@ -4,10 +4,10 @@ import { GridWrapper, GridSection, GridArea, GridItem, Alignment } from "react-a
 type Item = { id: string, location: string, index: number, extended: boolean; extendable: boolean; };
 
 const initItems: Item[] = [
-  { id: "A", location: "1", index: 0, extended: false, extendable: false},
-  { id: "B", location: "1", index: 1, extended: false, extendable: false},
-  { id: "C", location: "2", index: 0, extended: true, extendable: true},
-  { id: "D", location: "2", index: 1, extended: false, extendable: false},
+  { id: "A", location: "1", index: 0, extended: false, extendable: false },
+  { id: "B", location: "1", index: 1, extended: false, extendable: false },
+  { id: "C", location: "2", index: 0, extended: true, extendable: true },
+  { id: "D", location: "2", index: 1, extended: false, extendable: false },
 ];
 
 const initAlignments: Record<string, Alignment> = {
@@ -62,7 +62,7 @@ function App() {
           return [...items];
         });
       }}
-      onAlignmentChange={(...args) => {
+      onAlignChange={(...args) => {
         console.log('alignmentChange', ...args);
         setAlignments(a => ({
           ...a,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-align",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "author": "KaWaite",
   "module": "dist/react-align.esm.js",
   "license": "MIT",
@@ -72,4 +72,4 @@
     "glamor": "^2.20.40",
     "react-beautiful-dnd": "^13.1.0"
   }
-}
+}

src/GridArea.tsx

@@ -10,7 +10,7 @@ import { useAlignContext } from './context';
 import Icon from './Icon';
 import './grid.css';
 
-export type Alignment = 'start' | 'end' | 'centered';
+export type Alignment = 'start' | 'centered' | 'end';
 
 export type AreaProps = {
   id: string;
@@ -24,7 +24,7 @@ export type AreaProps = {
   style?: CSSProperties;
   editorStyle?: CSSProperties;
   iconColor?: string;
-  onAlignmentChange?: (alignment: Alignment) => void;
+  onAlignChange?: (alignment: Alignment) => void;
 };
 
 const alignments = ['start', 'centered', 'end'] as const;
@@ -37,7 +37,7 @@ export default function GridArea({
   end,
   disabled,
   align,
-  onAlignmentChange,
+  onAlignChange,
   children,
   // Picky stuff
   style,
@@ -51,9 +51,9 @@ export default function GridArea({
       alignments[
         (align ? alignments.indexOf(align) + 1 : 0) % alignments.length
       ];
-    onAlignmentChange?.(a);
+    onAlignChange?.(a);
     onAlignChange2?.(id, a);
-  }, [align, onAlignmentChange, onAlignChange2, id]);
+  }, [align, onAlignChange, onAlignChange2, id]);
 
   const buttonStyle: CSSProperties = useMemo(
     () => ({

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,11 @@ export type ItemProps = {
         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({
@@ -46,7 +46,6 @@ export default function GridItem({
   extendable = false,
   extended = false,
   disabled = false,
-  onExtend,
   // Picky stuff.
   style,
   editorStyle,
@@ -58,14 +57,13 @@ export default function GridItem({
     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(
     () => ({

src/GridWrapper.tsx

@@ -19,13 +19,13 @@ 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> = ({
@@ -37,7 +37,7 @@ const GridWrapper: React.FC<GridWrapperProps> = ({
   editorStyle,
   children,
   onMove,
-  onAlignmentChange: onAlignChange,
+  onAlignChange,
   onExtend,
 }) => {
   const [isDragging, setDragging] = useState(false);

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);