@kaushverse/pickify 1.1.4 → 1.1.6

package/dist/index.d.mts

@@ -97,6 +97,7 @@ type MultiPickerGroupProps = {
     children: React.ReactNode;
     renderGroupIcon?: IconRenderer;
     styles?: MultiPickerGroupStyles;
+    defaultOpen: boolean;
 };
 type MultiPickerStyles = {
     overlay?: ViewStyle;
@@ -160,7 +161,7 @@ declare class FloatingButton extends React$1.Component<Props> {
 
 declare function MultiPickerItem({ label, selected, onPress, renderItemIcon, styles: customStyles, }: MultiPickerItemProps): react_jsx_runtime.JSX.Element;
 
-declare function MultiPickerGroup({ label, children, renderGroupIcon, }: MultiPickerGroupProps): react_jsx_runtime.JSX.Element;
+declare function MultiPickerGroup({ label, children, renderGroupIcon, defaultOpen, }: MultiPickerGroupProps): react_jsx_runtime.JSX.Element;
 
 declare const toggleValue: (arr: string[], value: string) => string[];
 

package/dist/index.d.ts

@@ -97,6 +97,7 @@ type MultiPickerGroupProps = {
     children: React.ReactNode;
     renderGroupIcon?: IconRenderer;
     styles?: MultiPickerGroupStyles;
+    defaultOpen: boolean;
 };
 type MultiPickerStyles = {
     overlay?: ViewStyle;
@@ -160,7 +161,7 @@ declare class FloatingButton extends React$1.Component<Props> {
 
 declare function MultiPickerItem({ label, selected, onPress, renderItemIcon, styles: customStyles, }: MultiPickerItemProps): react_jsx_runtime.JSX.Element;
 
-declare function MultiPickerGroup({ label, children, renderGroupIcon, }: MultiPickerGroupProps): react_jsx_runtime.JSX.Element;
+declare function MultiPickerGroup({ label, children, renderGroupIcon, defaultOpen, }: MultiPickerGroupProps): react_jsx_runtime.JSX.Element;
 
 declare const toggleValue: (arr: string[], value: string) => string[];
 

package/dist/index.js

@@ -288,19 +288,28 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 function MultiPickerGroup({
   label,
   children,
-  renderGroupIcon
+  renderGroupIcon,
+  defaultOpen = false
 }) {
-  const [open, setOpen] = (0, import_react2.useState)(true);
+  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: [
@@ -315,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
       }
@@ -353,7 +366,9 @@ var styles = import_react_native2.StyleSheet.create({
   hidden: {
     position: "absolute",
     opacity: 0,
-    zIndex: -1
+    zIndex: -1,
+    left: 0,
+    right: 0
   }
 });
 
@@ -464,11 +479,12 @@ function MultiPickerModal({
   };
   const renderList = () => {
     if (groups.length > 0) {
-      return groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      return groups.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         MultiPickerGroup,
         {
           label: group.label,
           renderGroupIcon,
+          defaultOpen: index === 0,
           children: group.data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             MultiPickerItem,
             {
@@ -594,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
@@ -603,16 +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;
-      translateX = -radius * Math.cos(angle);
-      translateY = -radius * 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: [
@@ -697,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"
   },
@@ -711,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,
@@ -266,19 +266,28 @@ import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function MultiPickerGroup({
   label,
   children,
-  renderGroupIcon
+  renderGroupIcon,
+  defaultOpen = false
 }) {
-  const [open, setOpen] = useState2(true);
+  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: [
@@ -293,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
       }
@@ -331,7 +344,9 @@ var styles = StyleSheet2.create({
   hidden: {
     position: "absolute",
     opacity: 0,
-    zIndex: -1
+    zIndex: -1,
+    left: 0,
+    right: 0
   }
 });
 
@@ -442,11 +457,12 @@ function MultiPickerModal({
   };
   const renderList = () => {
     if (groups.length > 0) {
-      return groups.map((group) => /* @__PURE__ */ jsx4(
+      return groups.map((group, index) => /* @__PURE__ */ jsx4(
         MultiPickerGroup,
         {
           label: group.label,
           renderGroupIcon,
+          defaultOpen: index === 0,
           children: group.data.map((item) => /* @__PURE__ */ jsx4(
             MultiPickerItem,
             {
@@ -577,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
@@ -586,16 +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;
-      translateX = -radius * Math.cos(angle);
-      translateY = -radius * 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: [
@@ -680,7 +697,7 @@ var FloatingButton = class extends React4.Component {
 var defaultStyles4 = StyleSheet5.create({
   container: {
     position: "absolute",
-    bottom: 110,
+    bottom: 100,
     right: 20,
     alignItems: "center"
   },
@@ -694,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.4",
+  "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",