react-native-sortable-dynamic 0.1.1 → 0.2.1

package/lib/module/Tile.js

@@ -1,53 +0,0 @@
-"use strict";
-
-import React from 'react';
-import { TouchableOpacity } from 'react-native';
-import { useSortableConfig } from "./Config.js";
-
-/**
- * Tile Component
- *
- * This component represents a single tile in the sortable grid. It is designed to be flexible and
- * allows for user interactions such as press and long press. The size of each tile is dynamically
- * adjusted based on the configuration provided by `SortableListProvider`.
- *
- * Props:
- * @param {function} onPress - Callback function called when the tile is pressed.
- * @param {function} onLongPress - Callback function called when the tile is long-pressed.
- * @param {number} activeOpacity - The opacity of the tile when it is pressed. Default is 0.7.
- * @param {React.ReactNode} children - The content to render inside the tile.
- *
- * Usage:
- *
- * <Tile onPress={handlePress} onLongPress={handleLongPress}>
- *   <Text>Tile Content</Text>
- * </Tile>
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-const Tile = ({
-  onPress,
-  onLongPress,
-  activeOpacity = 0.7,
-  children
-}) => {
-  // Get the size of the tile from the sortable config context
-  const {
-    SIZE
-  } = useSortableConfig();
-
-  // Define the style for the tile, ensuring that its size is consistent across the grid
-  const containerStyle = {
-    width: SIZE,
-    height: SIZE
-  };
-  return /*#__PURE__*/_jsx(TouchableOpacity, {
-    style: containerStyle,
-    onPress: onPress,
-    onLongPress: onLongPress,
-    activeOpacity: activeOpacity // Control the opacity when the tile is pressed
-    ,
-    children: children
-  });
-};
-export default Tile;
-//# sourceMappingURL=Tile.js.map

package/lib/module/Tile.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","TouchableOpacity","useSortableConfig","jsx","_jsx","Tile","onPress","onLongPress","activeOpacity","children","SIZE","containerStyle","width","height","style"],"sourceRoot":"../../src","sources":["Tile.js"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,gBAAgB,QAAQ,cAAc;AAC/C,SAASC,iBAAiB,QAAQ,aAAU;;AAE5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAlBA,SAAAC,GAAA,IAAAC,IAAA;AAoBA,MAAMC,IAAI,GAAGA,CAAC;EAAEC,OAAO;EAAEC,WAAW;EAAEC,aAAa,GAAG,GAAG;EAAEC;AAAS,CAAC,KAAK;EACxE;EACA,MAAM;IAAEC;EAAK,CAAC,GAAGR,iBAAiB,CAAC,CAAC;;EAEpC;EACA,MAAMS,cAAc,GAAG;IACrBC,KAAK,EAAEF,IAAI;IACXG,MAAM,EAAEH;EACV,CAAC;EAED,oBACEN,IAAA,CAACH,gBAAgB;IACfa,KAAK,EAAEH,cAAe;IACtBL,OAAO,EAAEA,OAAQ;IACjBC,WAAW,EAAEA,WAAY;IACzBC,aAAa,EAAEA,aAAc,CAAC;IAAA;IAAAC,QAAA,EAE7BA;EAAQ,CACO,CAAC;AAEvB,CAAC;AAED,eAAeJ,IAAI","ignoreList":[]}

package/src/SortableList.js

@@ -1,86 +0,0 @@
-import React, { memo } from 'react';
-import Animated, {
-  useAnimatedRef,
-  useAnimatedScrollHandler,
-  useSharedValue,
-} from 'react-native-reanimated';
-import Item from './Item';
-import { useSortableConfig } from './Config';
-
-/**
- * SortableList Component
- *
- * This component renders a scrollable list of items that can be reordered using drag-and-drop gestures.
- * It manages the overall layout of the items and provides the necessary props to each child `Item` component
- * to enable dragging, scrolling, and reordering functionality.
- *
- * Props:
- * @param {React.ReactNode[]} children - The list of items to render inside the sortable list.
- * @param {boolean} editing - Whether the list is in editing mode, enabling drag-and-drop.
- * @param {Array} tiles - Array of tile data to manage the reordering state.
- * @param {function} onDragEnd - Callback function called with the updated positions when the drag ends.
- *
- * Usage:
- *
- * <SortableList editing={isEditing} tiles={tiles} onDragEnd={handleDragEnd}>
- *   {tiles.map((tile) => (
- *     <YourTileComponent key={tile.id} id={tile.id} />
- *   ))}
- * </SortableList>
- */
-
-const SortableList = ({ children, editing, tiles, onDragEnd }) => {
-  // Get the configuration for columns and size from context
-  const { COL, SIZE } = useSortableConfig();
-
-  // Shared values to track scrolling and item positions
-  const scrollY = useSharedValue(0); // Current scroll position
-  const scrollView = useAnimatedRef(); // Reference to the scroll view
-  const positions = useSharedValue(
-    children.reduce(
-      (acc, child, index) => ({ ...acc, [child.props.id]: index }),
-      {}
-    )
-  );
-
-  // Scroll event handler to update scrollY shared value
-  const onScroll = useAnimatedScrollHandler({
-    onScroll: ({ contentOffset: { y } }) => {
-      scrollY.value = y;
-    },
-  });
-
-  return (
-    <Animated.ScrollView
-      onScroll={onScroll}
-      ref={scrollView}
-      contentContainerStyle={{
-        // Calculate the total height needed for the scroll view content
-        height: Math.ceil(children.length / COL) * SIZE,
-      }}
-      showsVerticalScrollIndicator={false}
-      bounces={false}
-      scrollEventThrottle={16} // Control scroll event frequency
-    >
-      {/* Render each child wrapped in an Item component */}
-      {children.map((child) => (
-        <Item
-          key={child.props.id}
-          id={child.props.id}
-          positions={positions}
-          editing={editing}
-          draggable={child.props.draggable}
-          reorderable={child.props.reorderable}
-          tiles={tiles}
-          onDragEnd={onDragEnd}
-          scrollView={scrollView}
-          scrollY={scrollY}
-        >
-          {child}
-        </Item>
-      ))}
-    </Animated.ScrollView>
-  );
-};
-
-export default memo(SortableList);

package/src/Tile.js

@@ -1,47 +0,0 @@
-import React from 'react';
-import { TouchableOpacity } from 'react-native';
-import { useSortableConfig } from './Config';
-
-/**
- * Tile Component
- *
- * This component represents a single tile in the sortable grid. It is designed to be flexible and
- * allows for user interactions such as press and long press. The size of each tile is dynamically
- * adjusted based on the configuration provided by `SortableListProvider`.
- *
- * Props:
- * @param {function} onPress - Callback function called when the tile is pressed.
- * @param {function} onLongPress - Callback function called when the tile is long-pressed.
- * @param {number} activeOpacity - The opacity of the tile when it is pressed. Default is 0.7.
- * @param {React.ReactNode} children - The content to render inside the tile.
- *
- * Usage:
- *
- * <Tile onPress={handlePress} onLongPress={handleLongPress}>
- *   <Text>Tile Content</Text>
- * </Tile>
- */
-
-const Tile = ({ onPress, onLongPress, activeOpacity = 0.7, children }) => {
-  // Get the size of the tile from the sortable config context
-  const { SIZE } = useSortableConfig();
-
-  // Define the style for the tile, ensuring that its size is consistent across the grid
-  const containerStyle = {
-    width: SIZE,
-    height: SIZE,
-  };
-
-  return (
-    <TouchableOpacity
-      style={containerStyle}
-      onPress={onPress}
-      onLongPress={onLongPress}
-      activeOpacity={activeOpacity} // Control the opacity when the tile is pressed
-    >
-      {children}
-    </TouchableOpacity>
-  );
-};
-
-export default Tile;