@kaushverse/pickify 1.1.5 → 1.1.6

package/dist/index.js

@@ -291,17 +291,25 @@ function MultiPickerGroup({
   renderGroupIcon,
   defaultOpen = false
 }) {
-  const [open, setOpen] = (0, import_react2.useState)(defaultOpen);
+  const [open, setOpen] = (0, import_react2.useState)(false);
   const [contentHeight, setContentHeight] = (0, import_react2.useState)(0);
   const animatedHeight = (0, import_react2.useRef)(new import_react_native2.Animated.Value(0)).current;
+  (0, import_react2.useEffect)(() => {
+    if (defaultOpen && contentHeight > 0) {
+      animatedHeight.setValue(contentHeight);
+      setOpen(true);
+    }
+  }, [contentHeight, defaultOpen]);
   const toggle = () => {
+    if (contentHeight === 0) return;
     const toValue = open ? 0 : contentHeight;
     import_react_native2.Animated.timing(animatedHeight, {
       toValue,
       duration: 250,
       useNativeDriver: false
-    }).start();
-    setOpen(!open);
+    }).start(() => {
+      setOpen(!open);
+    });
   };
   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, { style: styles.header, onPress: toggle, children: [
@@ -316,8 +324,12 @@ function MultiPickerGroup({
       import_react_native2.View,
       {
         style: styles.hidden,
+        pointerEvents: "none",
         onLayout: (e) => {
-          setContentHeight(e.nativeEvent.layout.height);
+          const height = e.nativeEvent.layout.height;
+          if (height !== contentHeight) {
+            setContentHeight(height);
+          }
         },
         children
       }
@@ -354,7 +366,9 @@ var styles = import_react_native2.StyleSheet.create({
   hidden: {
     position: "absolute",
     opacity: 0,
-    zIndex: -1
+    zIndex: -1,
+    left: 0,
+    right: 0
   }
 });
 
@@ -596,8 +610,8 @@ var FloatingButton = class extends import_react4.default.Component {
   };
   renderAction = (action, index) => {
     const {
-      mode = "vertical",
-      radius = 100,
+      mode = "circle",
+      radius = 90,
       actions,
       renderItemIcon,
       styles: styles2
@@ -605,18 +619,17 @@ var FloatingButton = class extends import_react4.default.Component {
     let translateX = 0;
     let translateY = 0;
     if (mode === "vertical") {
-      translateY = -60 * (index + 1);
+      translateY = -55 * (index + 1);
     }
     if (mode === "horizontal") {
-      translateX = -60 * (index + 1);
+      translateX = -55 * (index + 1);
     }
     if (mode === "circle") {
-      const angleStep = Math.PI / 2;
-      const angle = index / (actions.length - 1 || 1) * angleStep;
-      const adjustedRadiusX = radius * 0.7;
-      const adjustedRadiusY = radius;
-      translateX = -adjustedRadiusX * Math.cos(angle);
-      translateY = -adjustedRadiusY * Math.sin(angle);
+      const startAngle = Math.PI * 1.1;
+      const endAngle = Math.PI * 1.9;
+      const angle = startAngle + index / (actions.length - 1 || 1) * (endAngle - startAngle);
+      translateX = radius * Math.cos(angle);
+      translateY = radius * Math.sin(angle);
     }
     const animStyle = {
       transform: [
@@ -701,7 +714,7 @@ var FloatingButton = class extends import_react4.default.Component {
 var defaultStyles4 = import_react_native5.StyleSheet.create({
   container: {
     position: "absolute",
-    bottom: 110,
+    bottom: 100,
     right: 20,
     alignItems: "center"
   },
@@ -715,9 +728,9 @@ var defaultStyles4 = import_react_native5.StyleSheet.create({
   },
   secondary: {
     position: "absolute",
-    width: 48,
-    height: 48,
-    borderRadius: 24,
+    width: 46,
+    height: 46,
+    borderRadius: 23,
     backgroundColor: "#F02A4B",
     alignItems: "center",
     justifyContent: "center"

package/dist/index.mjs

@@ -254,7 +254,7 @@ var toggleValue = (arr, value) => {
 };
 
 // src/components/MultiPickerGroup.tsx
-import { useRef, useState as useState2 } from "react";
+import { useRef, useState as useState2, useEffect as useEffect2 } from "react";
 import {
   View as View2,
   Text as Text2,
@@ -269,17 +269,25 @@ function MultiPickerGroup({
   renderGroupIcon,
   defaultOpen = false
 }) {
-  const [open, setOpen] = useState2(defaultOpen);
+  const [open, setOpen] = useState2(false);
   const [contentHeight, setContentHeight] = useState2(0);
   const animatedHeight = useRef(new Animated.Value(0)).current;
+  useEffect2(() => {
+    if (defaultOpen && contentHeight > 0) {
+      animatedHeight.setValue(contentHeight);
+      setOpen(true);
+    }
+  }, [contentHeight, defaultOpen]);
   const toggle = () => {
+    if (contentHeight === 0) return;
     const toValue = open ? 0 : contentHeight;
     Animated.timing(animatedHeight, {
       toValue,
       duration: 250,
       useNativeDriver: false
-    }).start();
-    setOpen(!open);
+    }).start(() => {
+      setOpen(!open);
+    });
   };
   return /* @__PURE__ */ jsxs2(View2, { style: styles.group, children: [
     /* @__PURE__ */ jsxs2(TouchableOpacity2, { style: styles.header, onPress: toggle, children: [
@@ -294,8 +302,12 @@ function MultiPickerGroup({
       View2,
       {
         style: styles.hidden,
+        pointerEvents: "none",
         onLayout: (e) => {
-          setContentHeight(e.nativeEvent.layout.height);
+          const height = e.nativeEvent.layout.height;
+          if (height !== contentHeight) {
+            setContentHeight(height);
+          }
         },
         children
       }
@@ -332,7 +344,9 @@ var styles = StyleSheet2.create({
   hidden: {
     position: "absolute",
     opacity: 0,
-    zIndex: -1
+    zIndex: -1,
+    left: 0,
+    right: 0
   }
 });
 
@@ -579,8 +593,8 @@ var FloatingButton = class extends React4.Component {
   };
   renderAction = (action, index) => {
     const {
-      mode = "vertical",
-      radius = 100,
+      mode = "circle",
+      radius = 90,
       actions,
       renderItemIcon,
       styles: styles2
@@ -588,18 +602,17 @@ var FloatingButton = class extends React4.Component {
     let translateX = 0;
     let translateY = 0;
     if (mode === "vertical") {
-      translateY = -60 * (index + 1);
+      translateY = -55 * (index + 1);
     }
     if (mode === "horizontal") {
-      translateX = -60 * (index + 1);
+      translateX = -55 * (index + 1);
     }
     if (mode === "circle") {
-      const angleStep = Math.PI / 2;
-      const angle = index / (actions.length - 1 || 1) * angleStep;
-      const adjustedRadiusX = radius * 0.7;
-      const adjustedRadiusY = radius;
-      translateX = -adjustedRadiusX * Math.cos(angle);
-      translateY = -adjustedRadiusY * Math.sin(angle);
+      const startAngle = Math.PI * 1.1;
+      const endAngle = Math.PI * 1.9;
+      const angle = startAngle + index / (actions.length - 1 || 1) * (endAngle - startAngle);
+      translateX = radius * Math.cos(angle);
+      translateY = radius * Math.sin(angle);
     }
     const animStyle = {
       transform: [
@@ -684,7 +697,7 @@ var FloatingButton = class extends React4.Component {
 var defaultStyles4 = StyleSheet5.create({
   container: {
     position: "absolute",
-    bottom: 110,
+    bottom: 100,
     right: 20,
     alignItems: "center"
   },
@@ -698,9 +711,9 @@ var defaultStyles4 = StyleSheet5.create({
   },
   secondary: {
     position: "absolute",
-    width: 48,
-    height: 48,
-    borderRadius: 24,
+    width: 46,
+    height: 46,
+    borderRadius: 23,
     backgroundColor: "#F02A4B",
     alignItems: "center",
     justifyContent: "center"

package/package.json

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