@kaushverse/pickify 1.1.10 → 1.1.12

package/dist/index.js

@@ -291,30 +291,46 @@ function MultiPickerGroup({
   renderGroupIcon,
   defaultOpen = false
 }) {
-  const [open, setOpen] = (0, import_react2.useState)(false);
+  const [open, setOpen] = (0, import_react2.useState)(defaultOpen);
   const [contentHeight, setContentHeight] = (0, import_react2.useState)(0);
-  const [isMeasured, setIsMeasured] = (0, import_react2.useState)(false);
+  const [isInitialized, setIsInitialized] = (0, import_react2.useState)(false);
   const animatedHeight = (0, import_react2.useRef)(new import_react_native2.Animated.Value(0)).current;
+  const animationRef = (0, import_react2.useRef)(null);
   (0, import_react2.useEffect)(() => {
-    if (defaultOpen && contentHeight > 0 && !isMeasured) {
-      setIsMeasured(true);
-      animatedHeight.setValue(contentHeight);
-      setOpen(true);
+    if (contentHeight > 0 && !isInitialized) {
+      setIsInitialized(true);
+      if (defaultOpen) {
+        animatedHeight.setValue(contentHeight);
+        setOpen(true);
+      }
+    }
+  }, [contentHeight, defaultOpen, animatedHeight, isInitialized]);
+  const toggle = (0, import_react2.useCallback)(() => {
+    if (animationRef.current) {
+      animationRef.current.stop();
     }
-  }, [contentHeight, defaultOpen, isMeasured]);
-  const toggle = () => {
-    if (contentHeight === 0) return;
     const newOpenState = !open;
     const toValue = newOpenState ? contentHeight : 0;
-    import_react_native2.Animated.timing(animatedHeight, {
+    animationRef.current = import_react_native2.Animated.timing(animatedHeight, {
       toValue,
       duration: 250,
       useNativeDriver: false
-    }).start(() => {
+    });
+    animationRef.current.start(() => {
       setOpen(newOpenState);
+      animationRef.current = null;
     });
     setOpen(newOpenState);
-  };
+  }, [open, contentHeight, animatedHeight]);
+  const handleLayout = (0, import_react2.useCallback)(
+    (event) => {
+      const height = event.nativeEvent.layout.height;
+      if (height > 0 && height !== contentHeight) {
+        setContentHeight(height);
+      }
+    },
+    [contentHeight]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.group, children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       import_react_native2.TouchableOpacity,
@@ -335,14 +351,9 @@ function MultiPickerGroup({
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       import_react_native2.View,
       {
-        style: styles.hidden,
+        style: styles.measureContainer,
+        onLayout: handleLayout,
         pointerEvents: "none",
-        onLayout: (e) => {
-          const height = e.nativeEvent.layout.height;
-          if (height > 0 && height !== contentHeight) {
-            setContentHeight(height);
-          }
-        },
         children
       }
     ),
@@ -371,8 +382,8 @@ var styles = import_react_native2.StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    paddingVertical: 12,
-    paddingHorizontal: 8,
+    paddingVertical: 14,
+    paddingHorizontal: 12,
     backgroundColor: "#F9FAFB",
     borderRadius: 8
   },
@@ -385,11 +396,11 @@ var styles = import_react_native2.StyleSheet.create({
     overflow: "hidden"
   },
   content: {
-    marginTop: 6,
-    paddingHorizontal: 8,
-    paddingBottom: 4
+    paddingTop: 8,
+    paddingBottom: 4,
+    paddingHorizontal: 12
   },
-  hidden: {
+  measureContainer: {
     position: "absolute",
     opacity: 0,
     zIndex: -1,
@@ -535,7 +546,7 @@ function MultiPickerModal({
         {
           label: group.label,
           renderGroupIcon,
-          defaultOpen: false,
+          defaultOpen: index === 0,
           children: group.data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             MultiPickerItem,
             {
@@ -684,7 +695,7 @@ var defaultStyles3 = import_react_native4.StyleSheet.create({
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
     maxHeight: "70%",
-    minHeight: "40%"
+    minHeight: "20%"
   },
   scrollContent: {
     paddingBottom: 20

package/dist/index.mjs

@@ -255,7 +255,7 @@ var toggleValue = (arr, value) => {
 };
 
 // src/components/MultiPickerGroup.tsx
-import { useRef, useState as useState2, useEffect as useEffect2 } from "react";
+import { useRef, useState as useState2, useEffect as useEffect2, useCallback } from "react";
 import {
   View as View2,
   Text as Text2,
@@ -270,30 +270,46 @@ function MultiPickerGroup({
   renderGroupIcon,
   defaultOpen = false
 }) {
-  const [open, setOpen] = useState2(false);
+  const [open, setOpen] = useState2(defaultOpen);
   const [contentHeight, setContentHeight] = useState2(0);
-  const [isMeasured, setIsMeasured] = useState2(false);
+  const [isInitialized, setIsInitialized] = useState2(false);
   const animatedHeight = useRef(new Animated.Value(0)).current;
+  const animationRef = useRef(null);
   useEffect2(() => {
-    if (defaultOpen && contentHeight > 0 && !isMeasured) {
-      setIsMeasured(true);
-      animatedHeight.setValue(contentHeight);
-      setOpen(true);
+    if (contentHeight > 0 && !isInitialized) {
+      setIsInitialized(true);
+      if (defaultOpen) {
+        animatedHeight.setValue(contentHeight);
+        setOpen(true);
+      }
+    }
+  }, [contentHeight, defaultOpen, animatedHeight, isInitialized]);
+  const toggle = useCallback(() => {
+    if (animationRef.current) {
+      animationRef.current.stop();
     }
-  }, [contentHeight, defaultOpen, isMeasured]);
-  const toggle = () => {
-    if (contentHeight === 0) return;
     const newOpenState = !open;
     const toValue = newOpenState ? contentHeight : 0;
-    Animated.timing(animatedHeight, {
+    animationRef.current = Animated.timing(animatedHeight, {
       toValue,
       duration: 250,
       useNativeDriver: false
-    }).start(() => {
+    });
+    animationRef.current.start(() => {
       setOpen(newOpenState);
+      animationRef.current = null;
     });
     setOpen(newOpenState);
-  };
+  }, [open, contentHeight, animatedHeight]);
+  const handleLayout = useCallback(
+    (event) => {
+      const height = event.nativeEvent.layout.height;
+      if (height > 0 && height !== contentHeight) {
+        setContentHeight(height);
+      }
+    },
+    [contentHeight]
+  );
   return /* @__PURE__ */ jsxs2(View2, { style: styles.group, children: [
     /* @__PURE__ */ jsxs2(
       TouchableOpacity2,
@@ -314,14 +330,9 @@ function MultiPickerGroup({
     /* @__PURE__ */ jsx2(
       View2,
       {
-        style: styles.hidden,
+        style: styles.measureContainer,
+        onLayout: handleLayout,
         pointerEvents: "none",
-        onLayout: (e) => {
-          const height = e.nativeEvent.layout.height;
-          if (height > 0 && height !== contentHeight) {
-            setContentHeight(height);
-          }
-        },
         children
       }
     ),
@@ -350,8 +361,8 @@ var styles = StyleSheet2.create({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    paddingVertical: 12,
-    paddingHorizontal: 8,
+    paddingVertical: 14,
+    paddingHorizontal: 12,
     backgroundColor: "#F9FAFB",
     borderRadius: 8
   },
@@ -364,11 +375,11 @@ var styles = StyleSheet2.create({
     overflow: "hidden"
   },
   content: {
-    marginTop: 6,
-    paddingHorizontal: 8,
-    paddingBottom: 4
+    paddingTop: 8,
+    paddingBottom: 4,
+    paddingHorizontal: 12
   },
-  hidden: {
+  measureContainer: {
     position: "absolute",
     opacity: 0,
     zIndex: -1,
@@ -514,7 +525,7 @@ function MultiPickerModal({
         {
           label: group.label,
           renderGroupIcon,
-          defaultOpen: false,
+          defaultOpen: index === 0,
           children: group.data.map((item) => /* @__PURE__ */ jsx4(
             MultiPickerItem,
             {
@@ -663,7 +674,7 @@ var defaultStyles3 = StyleSheet4.create({
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
     maxHeight: "70%",
-    minHeight: "40%"
+    minHeight: "20%"
   },
   scrollContent: {
     paddingBottom: 20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaushverse/pickify",
-  "version": "1.1.10",
+  "version": "1.1.12",
   "description": "A fully customizable React Native picker with search, multi-select, grouping, and async support.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",