@applicaster/zapp-react-native-ui-components 16.0.0-rc.60 → 16.0.0-rc.62

package/Components/ModalComponent/SortableList.web.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import { Text, View, ViewStyle, ScrollView } from "react-native";
+
+const DEFAULT_HEADERS: any[] = [];
+const DEFAULT_SORTABLE_DATA: any[] = [];
+
+const renderHeaderComponent = (component: any) => {
+  if (!component) return null;
+  if (React.isValidElement(component)) return component;
+
+  if (typeof component === "function") {
+    const HeaderComponent = component;
+
+    return <HeaderComponent />;
+  }
+
+  return null;
+};
+
+const SortableListHeader = ({
+  title,
+  style,
+}: {
+  title?: string;
+  style?: ViewStyle;
+}) => {
+  const displayTitle = typeof title === "string" ? title : String(title ?? "");
+
+  return (
+    <View style={style}>
+      {displayTitle ? <Text>{displayTitle}</Text> : null}
+    </View>
+  );
+};
+
+export type SortableListProps = {
+  scrollViewStyle?: ViewStyle;
+  contentContainerStyle?: ViewStyle;
+  itemStyle?: ViewStyle;
+  headerStyle?: ViewStyle;
+  columns?: number;
+  rowGap?: number;
+  columnGap?: number;
+  spacing?: number;
+  keyExtractor?: (item: any, index?: number) => string;
+  renderItem: ({
+    item,
+    index,
+    renderHandle,
+  }: {
+    item: any;
+    index: number;
+    renderHandle: (children: React.ReactElement) => React.ReactElement;
+  }) => React.ReactNode;
+  sortableData?: any[];
+  headers?: { index: number; title?: string; component: any }[];
+  onDragEnd?: (params: {
+    fromIndex?: number;
+    toIndex?: number;
+    from?: number;
+    to?: number;
+    data: any[];
+  }) => void;
+};
+
+export const SortableList = ({
+  scrollViewStyle,
+  contentContainerStyle,
+  itemStyle,
+  headerStyle,
+  keyExtractor = (item, index) =>
+    `sortable-item-${item?.id ?? item?.title ?? index}`,
+  renderItem,
+  sortableData = DEFAULT_SORTABLE_DATA,
+  headers = DEFAULT_HEADERS,
+}: SortableListProps) => {
+  return (
+    <ScrollView
+      style={scrollViewStyle}
+      contentContainerStyle={contentContainerStyle}
+    >
+      {(headers || []).map((header, idx) => (
+        <View key={`static-header-${idx}`} style={headerStyle}>
+          {header.title ? (
+            <SortableListHeader title={header.title} />
+          ) : (
+            renderHeaderComponent(header.component)
+          )}
+        </View>
+      ))}
+      {(sortableData || []).map((item, index) => (
+        <View key={keyExtractor(item, index)} style={itemStyle}>
+          {renderItem({
+            item,
+            index,
+            renderHandle: (children) => children,
+          })}
+        </View>
+      ))}
+    </ScrollView>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.60",
+  "version": "16.0.0-rc.62",
   "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-rc.60",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.60",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.60",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.60",
+    "@applicaster/applicaster-types": "16.0.0-rc.62",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.62",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.62",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.62",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",