react-native-smart-grid 0.1.0

package/package.json

@@ -0,0 +1,161 @@
+{
+  "name": "react-native-smart-grid",
+  "version": "0.1.0",
+  "description": "Draggable variable-sized tile grid for React Native",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "import": {
+        "default": "./lib/module/index.js"
+      },
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-smart-grid-example",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest"
+  },
+  "keywords": [
+    "react-native",
+    "grid",
+    "drag",
+    "drag-and-drop",
+    "draggable",
+    "tile",
+    "masonry",
+    "dashboard",
+    "layout",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zabloona/react-native-smart-grid.git"
+  },
+  "author": "Admin <zabloona@gmail.com> (https://github.com/zabloona)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/zabloona/react-native-smart-grid/issues"
+  },
+  "homepage": "https://github.com/zabloona/react-native-smart-grid#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^2.1.0",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^10.0.1",
+    "@jest/globals": "^29.7.0",
+    "@react-native/babel-preset": "0.85.0",
+    "@react-native/eslint-config": "0.85.0",
+    "@react-native/jest-preset": "0.85.0",
+    "@types/react": "^19.2.0",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.5.6",
+    "jest": "^29.7.0",
+    "prettier": "^3.8.3",
+    "react": "19.2.0",
+    "react-native": "0.83.6",
+    "react-native-builder-bob": "^0.42.1",
+    "react-native-gesture-handler": "^3.0.1",
+    "react-native-reanimated": "^4.4.1",
+    "turbo": "^2.9.16",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-gesture-handler": {
+      "optional": false
+    },
+    "react-native-reanimated": {
+      "optional": false
+    }
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "@react-native/jest-preset",
+    "transformIgnorePatterns": [
+      "node_modules/(?!(react-native|@react-native)/)"
+    ],
+    "moduleNameMapper": {
+      "react-native-reanimated": "<rootDir>/src/__mocks__/reanimated.js",
+      "react-native-gesture-handler": "<rootDir>/src/__mocks__/gesture-handler.js"
+    },
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "eslint",
+      "jest"
+    ],
+    "version": "0.62.2"
+  }
+}

package/src/components/DragLayer.tsx

@@ -0,0 +1,71 @@
+import { memo, useEffect } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import { useGridDrag } from '../context/GridDragContext';
+import type { Tile } from '../types';
+import type { PixelRect } from '../layout/LayoutCalculator';
+
+const LIFT_SPRING = { damping: 15, stiffness: 300, mass: 0.4 };
+
+type Props<TData> = {
+  tile: Tile<TData>;
+  initialRect: PixelRect;
+  children: React.ReactNode;
+};
+
+function DragLayerInner<TData>({ tile: _tile, initialRect, children }: Props<TData>) {
+  const { dragAbsX, dragAbsY, containerPageX, containerPageY, scrollYRef } = useGridDrag();
+
+  const scale = useSharedValue(1);
+  const opacity = useSharedValue(0);
+
+  useEffect(() => {
+    scale.value = withSpring(1.06, LIFT_SPRING);
+    opacity.value = withSpring(1, LIFT_SPRING);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const animStyle = useAnimatedStyle(() => {
+    const x = dragAbsX.value - containerPageX.current - initialRect.width / 2;
+    const y =
+      dragAbsY.value -
+      containerPageY.current +
+      scrollYRef.current -
+      initialRect.height / 2;
+    return {
+      opacity: opacity.value,
+      transform: [{ translateX: x }, { translateY: y }, { scale: scale.value }],
+    };
+  });
+
+  return (
+    <Animated.View
+      style={[
+        styles.layer,
+        { width: initialRect.width, height: initialRect.height },
+        animStyle,
+      ]}
+    >
+      {children}
+    </Animated.View>
+  );
+}
+
+export const DragLayer = memo(DragLayerInner) as typeof DragLayerInner;
+
+const styles = StyleSheet.create({
+  layer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    zIndex: 999,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.4,
+    shadowRadius: 16,
+    elevation: 16,
+  },
+});

package/src/components/DraggableTile.tsx

@@ -0,0 +1,88 @@
+import React, { memo, useEffect } from 'react';
+import { StyleSheet } from 'react-native';
+import { GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+} from 'react-native-reanimated';
+import { useGridDrag } from '../context/GridDragContext';
+import { useTileGesture } from '../hooks/useTileGesture';
+import { ResizeHandle } from './ResizeHandle';
+import type { PlacedTile, GridConfig } from '../types';
+import type { PixelRect } from '../layout/LayoutCalculator';
+
+const SPRING = { damping: 20, stiffness: 220, mass: 0.5 };
+
+type Props<TData> = {
+  tile: PlacedTile<TData>;
+  rect: PixelRect;
+  config: GridConfig;
+  containerWidth: number;
+  children: React.ReactNode;
+};
+
+function DraggableTileInner<TData>({
+  tile,
+  rect,
+  config,
+  containerWidth,
+  children,
+}: Props<TData>) {
+  const { activeTile, isEditing } = useGridDrag();
+  const { gesture } = useTileGesture({ tile, rect, config, containerWidth });
+  const isActive = activeTile?.id === tile.id;
+
+  const animX = useSharedValue(rect.x);
+  const animY = useSharedValue(rect.y);
+  const animW = useSharedValue(rect.width);
+  const animH = useSharedValue(rect.height);
+
+  useEffect(() => {
+    animX.value = withSpring(rect.x, SPRING);
+    animY.value = withSpring(rect.y, SPRING);
+    animW.value = withSpring(rect.width, SPRING);
+    animH.value = withSpring(rect.height, SPRING);
+  }, [rect.x, rect.y, rect.width, rect.height]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const animStyle = useAnimatedStyle(() => ({
+    left: animX.value,
+    top: animY.value,
+    width: animW.value,
+    height: animH.value,
+  }));
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.View
+        style={[
+          styles.tile,
+          animStyle,
+          isActive && styles.tileActive,
+          isEditing && styles.tileEditing,
+        ]}
+      >
+        {children}
+        {isEditing && !tile.locked && (
+          <ResizeHandle tile={tile} config={config} containerWidth={containerWidth} />
+        )}
+      </Animated.View>
+    </GestureDetector>
+  );
+}
+
+export const DraggableTile = memo(DraggableTileInner) as typeof DraggableTileInner;
+
+const styles = StyleSheet.create({
+  tile: {
+    position: 'absolute',
+  },
+  tileActive: {
+    opacity: 0.3,
+  },
+  tileEditing: {
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.3)',
+    borderRadius: 12,
+  },
+});

package/src/components/GhostTile.tsx

@@ -0,0 +1,42 @@
+import { memo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import type { PlacedTile, GridConfig } from '../types';
+import { tileToPixelRect } from '../layout/LayoutCalculator';
+import { useGridDrag } from '../context/GridDragContext';
+
+type Props = {
+  activeTile: PlacedTile;
+  config: GridConfig;
+  containerWidth: number;
+};
+
+export const GhostTile = memo(function GhostTile({
+  activeTile,
+  config,
+  containerWidth,
+}: Props) {
+  const { ghostPosition } = useGridDrag();
+  if (!ghostPosition) return null;
+
+  const rect = tileToPixelRect(ghostPosition, activeTile.size, config, containerWidth);
+
+  return (
+    <View
+      style={[
+        styles.ghost,
+        { left: rect.x, top: rect.y, width: rect.width, height: rect.height },
+      ]}
+    />
+  );
+});
+
+const styles = StyleSheet.create({
+  ghost: {
+    position: 'absolute',
+    borderRadius: 12,
+    borderWidth: 2,
+    borderColor: 'rgba(255,255,255,0.4)',
+    borderStyle: 'dashed',
+    backgroundColor: 'rgba(255,255,255,0.08)',
+  },
+});

package/src/components/GridTile.tsx

@@ -0,0 +1,27 @@
+import React, { memo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import type { PixelRect } from '../layout/LayoutCalculator';
+
+type Props = {
+  rect: PixelRect;
+  children: React.ReactNode;
+};
+
+export const GridTile = memo(function GridTile({ rect, children }: Props) {
+  return (
+    <View
+      style={[
+        styles.tile,
+        { left: rect.x, top: rect.y, width: rect.width, height: rect.height },
+      ]}
+    >
+      {children}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  tile: {
+    position: 'absolute',
+  },
+});

package/src/components/ResizeHandle.tsx

@@ -0,0 +1,74 @@
+import { useRef } from 'react';
+import { StyleSheet } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { useAnimatedStyle, useSharedValue, runOnJS } from 'react-native-reanimated';
+import type { PlacedTile, TileSize, GridConfig } from '../types';
+import { columnWidth } from '../layout/LayoutCalculator';
+import { useGridDrag } from '../context/GridDragContext';
+
+type Props = {
+  tile: PlacedTile;
+  config: GridConfig;
+  containerWidth: number;
+};
+
+export function ResizeHandle({ tile, config, containerWidth }: Props) {
+  const { commitResize } = useGridDrag();
+  const initSize = useRef<TileSize>(tile.size);
+  const deltaW = useSharedValue(0);
+  const deltaH = useSharedValue(0);
+
+  const colW = columnWidth(config, containerWidth);
+
+  function onCommit(w: number, h: number) {
+    const minW = tile.minSize?.w ?? 1;
+    const minH = tile.minSize?.h ?? 1;
+    const maxW = tile.maxSize?.w ?? config.columns;
+    const maxH = tile.maxSize?.h ?? 99;
+    const newSize: TileSize = {
+      w: Math.max(minW, Math.min(maxW, w)),
+      h: Math.max(minH, Math.min(maxH, h)),
+    };
+    commitResize(tile, newSize);
+  }
+
+  const gesture = Gesture.Pan()
+    .onBegin(() => {
+      initSize.current = tile.size;
+      deltaW.value = 0;
+      deltaH.value = 0;
+    })
+    .onUpdate((e) => {
+      deltaW.value = Math.round(e.translationX / (colW + config.gap));
+      deltaH.value = Math.round(e.translationY / (config.rowHeight + config.gap));
+    })
+    .onEnd(() => {
+      const newW = initSize.current.w + deltaW.value;
+      const newH = initSize.current.h + deltaH.value;
+      deltaW.value = 0;
+      deltaH.value = 0;
+      runOnJS(onCommit)(newW, newH);
+    });
+
+  const animStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: deltaW.value * (colW + config.gap) }, { translateY: deltaH.value * (config.rowHeight + config.gap) }],
+  }));
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.View style={[styles.handle, animStyle]} />
+    </GestureDetector>
+  );
+}
+
+const styles = StyleSheet.create({
+  handle: {
+    position: 'absolute',
+    bottom: 4,
+    right: 4,
+    width: 20,
+    height: 20,
+    borderRadius: 4,
+    backgroundColor: 'rgba(255,255,255,0.9)',
+  },
+});