@applicaster/zapp-react-native-ui-components 16.0.0-alpha.3255644194 → 16.0.0-alpha.3439504142

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import { View, ScrollView } from "react-native";
+import Sortable from "react-native-sortables";
+import { StyleSheet, View, Text } from "react-native";
 import { Button } from "./Button";
 import { ItemIconProps } from "./Button/ItemIcon";
 import { ItemProps } from "./Button/Item";
@@ -12,6 +13,33 @@ import type { PluginConfiguration } from "./";
 import { ModalHeader as DefaultModalHeader } from "./Header";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
+const styles = StyleSheet.create({
+  alphaItem: {
+    backgroundColor: "#aaaaff",
+    borderRadius: 8,
+    height: 80,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+  },
+  alphaText: {
+    fontSize: 28,
+  },
+  handle: {
+    backgroundColor: "rgba(0,0,0,0.2)",
+    borderRadius: 5,
+    padding: 10,
+  },
+  handleText: {
+    color: "white",
+    fontWeight: "bold",
+  },
+  sortableGrid: {
+    padding: 8,
+  },
+});
+
 type ModalComponentProps = {
   items: any[];
   current_selection?: any;
@@ -38,6 +66,7 @@ type ModalComponentProps = {
     theme: PluginConfiguration
   ) => ItemIconProps["asset"] | null;
   iconPlacement?: "left" | "right";
+  sortable?: boolean;
 };
 
 export function BottomSheetModalContent(props: ModalComponentProps) {
@@ -51,6 +80,7 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     title,
     headerComponent: ModalHeader = DefaultModalHeader,
     buttonComponent: ButtonComponent = Button,
+    sortable = true,
     getSelectedItemIcon = ({
       modal_bottom_sheet_item_selected_icon,
     }: BaseThemePropertiesMobile) => modal_bottom_sheet_item_selected_icon,
@@ -91,6 +121,12 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
 
   const bottomInset = useSafeAreaInsets().bottom;
 
+  const [sortableItems, setSortableItems] = React.useState(
+    new Array(items.length)
+      .fill(null)
+      .map((_, index) => items[index]?.name ?? "unknown")
+  );
+
   return (
     <View
       style={{
@@ -104,30 +140,50 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
         summary={summary}
         title={title}
       />
-      <ScrollView
-        contentContainerStyle={{
+
+      <View
+        style={{
           paddingBottom: paddingBottom + bottomInset,
         }}
       >
-        {items.map((item, index) =>
-          item ? (
-            <ButtonComponent
-              key={index}
-              configuration={theme}
-              selectedItem={current_selection}
-              item={item}
-              onPress={handlePress}
-              label={theme[item?.label] ?? item?.label}
-              iconBaseProps={iconBaseProps}
-              itemBaseProps={itemBaseProps}
-              labelBaseProps={labelBaseProps}
-              selectedItemIcon={getSelectedItemIcon(theme)}
-              defaultItemIcon={getDefaultItemIcon(theme)}
-              iconPlacement={iconPlacement}
-            />
-          ) : null
-        )}
-      </ScrollView>
+        {sortable ? (
+          <Sortable.Grid
+            customHandle
+            columns={1}
+            rowGap={8}
+            columnGap={8}
+            data={sortableItems}
+            keyExtractor={(item) => item}
+            onDragEnd={({ data }) => {
+              console.log("Sortable new order", { data });
+              setSortableItems(data);
+            }}
+            renderItem={({ item, index }) => (
+              <View style={styles.alphaItem}>
+                <ButtonComponent
+                  key={index}
+                  configuration={theme}
+                  selectedItem={current_selection}
+                  item={items[index]}
+                  onPress={handlePress}
+                  label={theme[item?.label] ?? item?.label}
+                  iconBaseProps={iconBaseProps}
+                  itemBaseProps={itemBaseProps}
+                  labelBaseProps={labelBaseProps}
+                  selectedItemIcon={getSelectedItemIcon(theme)}
+                  defaultItemIcon={getDefaultItemIcon(theme)}
+                  iconPlacement={iconPlacement}
+                />
+                <Sortable.Handle>
+                  <View pointerEvents="none" style={styles.handle}>
+                    <Text style={styles.handleText}>⋮{index}:</Text>
+                  </View>
+                </Sortable.Handle>
+              </View>
+            )}
+          />
+        ) : null}
+      </View>
     </View>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-alpha.3255644194",
+  "version": "16.0.0-alpha.3439504142",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-alpha.3255644194",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.3255644194",
-    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.3255644194",
-    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.3255644194",
+    "@applicaster/applicaster-types": "16.0.0-alpha.3439504142",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.3439504142",
+    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.3439504142",
+    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.3439504142",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",