feat: add individualGroupableProps props #848

packages/react-moveable/src/MoveableIndividualGroup.tsx

@@ -1,14 +1,14 @@
 import { ref, refs } from "framework-utils";
 import * as React from "react";
 import MoveableManager from "./MoveableManager";
-import { GroupableProps, RectInfo } from "./types";
+import { GroupableProps, IndividualGroupableProps, RectInfo } from "./types";
 import { prefix } from "./utils";
 
 /**
  * @namespace Moveable.IndividualGroup
  * @description Create targets individually, not as a group.Create targets individually, not as a group.
  */
-class MoveableIndividualGroup extends MoveableManager<GroupableProps> {
+class MoveableIndividualGroup extends MoveableManager<GroupableProps & IndividualGroupableProps> {
     public moveables: MoveableManager[] = [];
     public render() {
         const props = this.props;
@@ -22,6 +22,7 @@ class MoveableIndividualGroup extends MoveableManager<GroupableProps> {
         const length = targets.length;
         const canPersist = this.isUnmounted || !length;
         let persistDatChildren = persistData?.children ?? [];
+
         if (canPersist && !length && persistDatChildren.length) {
             targets = persistDatChildren.map(() => null);
         } else if (!canPersist) {
@@ -33,10 +34,12 @@ class MoveableIndividualGroup extends MoveableManager<GroupableProps> {
             ref={ref(this, "controlBox")}
             className={prefix("control-box")}>
             {targets!.map((target, i) => {
+                const individualProps = props.individualGroupableProps?.(target, i) ?? {};
                 return <MoveableManager
                     key={"moveable" + i}
                     ref={refs(this, "moveables", i)}
-                    {...this.props}
+                    {...props}
+                    {...individualProps}
                     target={target}
                     wrapperMoveable={this}
                     isWrapperMounted={this.isMoveableMounted}

packages/react-moveable/src/ables/IndividualGroupable.tsx

@@ -2,6 +2,7 @@ export default {
     name: "individualGroupable",
     props: {
         individualGroupable: Boolean,
+        individualGroupableProps: Function,
     } as const,
     events: {} as const,
 } as const;

packages/react-moveable/src/types.ts

@@ -2431,8 +2431,18 @@ export type MoveableTargetGroupsType = Array<HTMLElement | SVGElement | Moveable
 export interface IndividualGroupableOptions {
     /**
      * Create targets individually, not as a group.
+     * @story individual-group--draggable-scalable-rotatable
      */
     individualGroupable?: boolean;
+    /**
+     * When using individualGroupable you can pass props to child moveable.
+     * @story individual-group--use-individual-groupable-props
+     * @since 0.44.0
+     */
+    individualGroupableProps?: (
+        element: HTMLElement | SVGElement | null | undefined,
+        index: number,
+    ) => Record<string, any> | undefined | null | void;
 }
 
 export interface IndividualGroupableProps extends IndividualGroupableOptions {

packages/react-moveable/stories/3-IndiviualGroup/0-Default.stories.tsx

@@ -1,7 +1,25 @@
+import {
+    DEFAULT_ROTATABLE_CONTROLS,
+    DEFAULT_DRAGGABLE_CONTROLS,
+    DEFAULT_SCALABLE_CONTROLS,
+} from "../controls/default";
+import { makeStoryGroup } from "../utils/story";
 
 
-export default {
-    title: "Individual Group",
-};
+const group = makeStoryGroup("Individual Group", module);
 
-export * from "./1-DraggableScalableRotatable.stories";
+
+group.add("Draggable & Scalable & Rotatable", {
+    app: require("./ReactDraggableScalableRotatableApp").default,
+    path: require.resolve("./ReactDraggableScalableRotatableApp"),
+    argsTypes: {
+        ...DEFAULT_SCALABLE_CONTROLS,
+        ...DEFAULT_ROTATABLE_CONTROLS,
+        ...DEFAULT_DRAGGABLE_CONTROLS,
+    },
+});
+
+group.add("Use Individual Groupable Props", {
+    app: require("./ReactIndividualGroupablePropsApp").default,
+    path: require.resolve("./ReactIndividualGroupablePropsApp"),
+});

packages/react-moveable/stories/3-IndiviualGroup/ReactIndividualGroupablePropsApp.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import Moveable from "@/react-moveable";
+
+export default function App() {
+    return (
+        <div className="root">
+            <div className="container">
+                <div className="target target1">Target1</div>
+                <div className="target target2">Target2</div>
+                <div className="target target3">Target3</div>
+                <Moveable
+                    target={".target"}
+                    individualGroupable={true}
+                    draggable={true}
+                    resizable={true}
+                    rotatable={true}
+                    individualGroupableProps={element => {
+                        if (element!.classList.contains("target2")) {
+                            return {
+                                resizable: false,
+                            };
+                        }
+                    }}
+                    onRender={e => {
+                        e.target.style.cssText += e.cssText;
+                    }}
+                />
+            </div>
+        </div>
+    );
+}