@kaushverse/pickify 1.1.3 → 1.1.5

package/dist/index.d.mts

@@ -97,6 +97,7 @@ type MultiPickerGroupProps = {
     children: React.ReactNode;
     renderGroupIcon?: IconRenderer;
     styles?: MultiPickerGroupStyles;
+    defaultOpen: boolean;
 };
 type MultiPickerStyles = {
     overlay?: ViewStyle;
@@ -130,22 +131,25 @@ declare function MultiPickerModal({ visible, setVisible, selectedValues, options
 
 type Action = {
     icon: string;
-    onPress: () => void;
+    onPress?: () => void;
+    navigateTo?: () => void;
+    color?: string;
+    iconColor?: string;
 };
 type FloatingButtonStyles = {
     container?: ViewStyle;
     mainButton?: ViewStyle;
     secondaryButton?: ViewStyle;
-    mainIcon?: TextStyle;
-    secondaryIcon?: TextStyle;
 };
 type Props = {
     actions: Action[];
     mode?: "vertical" | "horizontal" | "circle";
     radius?: number;
-    renderIcon?: IconRenderer;
+    renderMainIcon?: IconRenderer;
+    renderItemIcon?: IconRenderer;
     styles?: FloatingButtonStyles;
     style?: ViewStyle;
+    mainIconName?: string;
 };
 declare class FloatingButton extends React$1.Component<Props> {
     animation: Animated.Value;
@@ -157,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;
@@ -130,22 +131,25 @@ declare function MultiPickerModal({ visible, setVisible, selectedValues, options
 
 type Action = {
     icon: string;
-    onPress: () => void;
+    onPress?: () => void;
+    navigateTo?: () => void;
+    color?: string;
+    iconColor?: string;
 };
 type FloatingButtonStyles = {
     container?: ViewStyle;
     mainButton?: ViewStyle;
     secondaryButton?: ViewStyle;
-    mainIcon?: TextStyle;
-    secondaryIcon?: TextStyle;
 };
 type Props = {
     actions: Action[];
     mode?: "vertical" | "horizontal" | "circle";
     radius?: number;
-    renderIcon?: IconRenderer;
+    renderMainIcon?: IconRenderer;
+    renderItemIcon?: IconRenderer;
     styles?: FloatingButtonStyles;
     style?: ViewStyle;
+    mainIconName?: string;
 };
 declare class FloatingButton extends React$1.Component<Props> {
     animation: Animated.Value;
@@ -157,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,9 +288,10 @@ 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)(defaultOpen);
   const [contentHeight, setContentHeight] = (0, import_react2.useState)(0);
   const animatedHeight = (0, import_react2.useRef)(new import_react_native2.Animated.Value(0)).current;
   const toggle = () => {
@@ -464,11 +465,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,
             {
@@ -597,7 +599,7 @@ var FloatingButton = class extends import_react4.default.Component {
       mode = "vertical",
       radius = 100,
       actions,
-      renderIcon,
+      renderItemIcon,
       styles: styles2
     } = this.props;
     let translateX = 0;
@@ -609,9 +611,12 @@ var FloatingButton = class extends import_react4.default.Component {
       translateX = -60 * (index + 1);
     }
     if (mode === "circle") {
-      const angle = index / actions.length * Math.PI;
-      translateX = radius * Math.cos(angle);
-      translateY = -radius * Math.sin(angle);
+      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 animStyle = {
       transform: [
@@ -641,16 +646,22 @@ var FloatingButton = class extends import_react4.default.Component {
       {
         onPress: () => {
           this.toggleMenu();
-          action.onPress();
+          action.onPress?.();
+          action.navigateTo?.();
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           import_react_native5.Animated.View,
           {
-            style: [defaultStyles4.secondary, styles2?.secondaryButton, animStyle],
-            children: renderIcon?.({
+            style: [
+              defaultStyles4.secondary,
+              styles2?.secondaryButton,
+              { backgroundColor: action.color || "#F02A4B" },
+              animStyle
+            ],
+            children: renderItemIcon?.({
               name: action.icon,
               size: 20,
-              color: "#FFF"
+              color: action.iconColor || "#FFF"
             })
           }
         )
@@ -659,7 +670,7 @@ var FloatingButton = class extends import_react4.default.Component {
     );
   };
   render() {
-    const { actions, renderIcon, styles: styles2, style } = this.props;
+    const { actions, renderMainIcon, styles: styles2, style, mainIconName } = this.props;
     const rotation = {
       transform: [
         {
@@ -670,26 +681,21 @@ var FloatingButton = class extends import_react4.default.Component {
         }
       ]
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      import_react_native5.View,
-      {
-        style: [defaultStyles4.container, styles2?.container, this.props.style],
-        children: [
-          actions.map(this.renderAction),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.TouchableWithoutFeedback, { onPress: this.toggleMenu, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            import_react_native5.Animated.View,
-            {
-              style: [defaultStyles4.button, styles2?.mainButton, rotation],
-              children: renderIcon?.({
-                name: "plus",
-                size: 26,
-                color: "#FFF"
-              })
-            }
-          ) })
-        ]
-      }
-    );
+    const mainIcon = mainIconName || "add";
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { style: [defaultStyles4.container, styles2?.container, style], children: [
+      actions.map(this.renderAction),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.TouchableWithoutFeedback, { onPress: this.toggleMenu, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_react_native5.Animated.View,
+        {
+          style: [defaultStyles4.button, styles2?.mainButton, rotation],
+          children: renderMainIcon?.({
+            name: mainIcon,
+            size: 26,
+            color: "#FFF"
+          })
+        }
+      ) })
+    ] });
   }
 };
 var defaultStyles4 = import_react_native5.StyleSheet.create({

package/dist/index.mjs

@@ -266,9 +266,10 @@ 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(defaultOpen);
   const [contentHeight, setContentHeight] = useState2(0);
   const animatedHeight = useRef(new Animated.Value(0)).current;
   const toggle = () => {
@@ -442,11 +443,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,
             {
@@ -580,7 +582,7 @@ var FloatingButton = class extends React4.Component {
       mode = "vertical",
       radius = 100,
       actions,
-      renderIcon,
+      renderItemIcon,
       styles: styles2
     } = this.props;
     let translateX = 0;
@@ -592,9 +594,12 @@ var FloatingButton = class extends React4.Component {
       translateX = -60 * (index + 1);
     }
     if (mode === "circle") {
-      const angle = index / actions.length * Math.PI;
-      translateX = radius * Math.cos(angle);
-      translateY = -radius * Math.sin(angle);
+      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 animStyle = {
       transform: [
@@ -624,16 +629,22 @@ var FloatingButton = class extends React4.Component {
       {
         onPress: () => {
           this.toggleMenu();
-          action.onPress();
+          action.onPress?.();
+          action.navigateTo?.();
         },
         children: /* @__PURE__ */ jsx5(
           Animated2.View,
           {
-            style: [defaultStyles4.secondary, styles2?.secondaryButton, animStyle],
-            children: renderIcon?.({
+            style: [
+              defaultStyles4.secondary,
+              styles2?.secondaryButton,
+              { backgroundColor: action.color || "#F02A4B" },
+              animStyle
+            ],
+            children: renderItemIcon?.({
               name: action.icon,
               size: 20,
-              color: "#FFF"
+              color: action.iconColor || "#FFF"
             })
           }
         )
@@ -642,7 +653,7 @@ var FloatingButton = class extends React4.Component {
     );
   };
   render() {
-    const { actions, renderIcon, styles: styles2, style } = this.props;
+    const { actions, renderMainIcon, styles: styles2, style, mainIconName } = this.props;
     const rotation = {
       transform: [
         {
@@ -653,26 +664,21 @@ var FloatingButton = class extends React4.Component {
         }
       ]
     };
-    return /* @__PURE__ */ jsxs5(
-      View5,
-      {
-        style: [defaultStyles4.container, styles2?.container, this.props.style],
-        children: [
-          actions.map(this.renderAction),
-          /* @__PURE__ */ jsx5(TouchableWithoutFeedback, { onPress: this.toggleMenu, children: /* @__PURE__ */ jsx5(
-            Animated2.View,
-            {
-              style: [defaultStyles4.button, styles2?.mainButton, rotation],
-              children: renderIcon?.({
-                name: "plus",
-                size: 26,
-                color: "#FFF"
-              })
-            }
-          ) })
-        ]
-      }
-    );
+    const mainIcon = mainIconName || "add";
+    return /* @__PURE__ */ jsxs5(View5, { style: [defaultStyles4.container, styles2?.container, style], children: [
+      actions.map(this.renderAction),
+      /* @__PURE__ */ jsx5(TouchableWithoutFeedback, { onPress: this.toggleMenu, children: /* @__PURE__ */ jsx5(
+        Animated2.View,
+        {
+          style: [defaultStyles4.button, styles2?.mainButton, rotation],
+          children: renderMainIcon?.({
+            name: mainIcon,
+            size: 26,
+            color: "#FFF"
+          })
+        }
+      ) })
+    ] });
   }
 };
 var defaultStyles4 = StyleSheet5.create({

package/package.json

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