ywana-core8 0.2.19 → 0.2.21

package/src/html/menu.js

@@ -28,34 +28,54 @@ export const Menu = (props) => {
 
 /**
  * Menu Icon
+ * @param {string} icon - Icon name (default: "more_vert")
+ * @param {string} position - Menu position relative to icon:
+ *   "bottom-left" (default), "bottom-right", "top-left", "top-right",
+ *   "left", "right", "top", "bottom"
+ * @param {string} align - Deprecated, use position instead
+ * @param {string} size - Icon size
+ * @param {string} menuSize - Menu size: "normal" (default), "compact"
  */
 export const MenuIcon = (props) => {
 
-    const { icon = "more_vert", children, align = "left", size="normal" } = props
+    const {
+        icon = "more_vert",
+        children,
+        align, // Deprecated, kept for backwards compatibility
+        position = align === "right" ? "bottom-right" : "bottom-left",
+        size = "normal",
+        menuSize = "normal"
+    } = props
     const [open, setOpen] = useState(false)
 
     function toggle() {
         setOpen(!open)
     }
 
-    // Convertir valores de align a clases CSS
-    const getAlignClass = (alignment) => {
-        switch (alignment) {
-            case 'right':
-                return 'alignRight'
-            case 'left':
-                return 'alignLeft'
-            default:
-                return 'alignLeft' // Por defecto a la izquierda
-        }
+    // Convertir position a clase CSS
+    const getPositionClass = (pos) => {
+        const validPositions = [
+            'bottom-left', 'bottom-right',
+            'top-left', 'top-right',
+            'left', 'right',
+            'top', 'bottom'
+        ]
+
+        return validPositions.includes(pos) ? `position-${pos}` : 'position-bottom-left'
     }
 
+    // Construir clases del menú
+    const menuClasses = [
+        getPositionClass(position),
+        menuSize === "compact" ? "menu-compact" : ""
+    ].filter(Boolean).join(' ')
+
     return (
-        <MenuContext.Provider value={[open, setOpen]}>
+        <MenuContext.Provider value={[open, setOpen, menuSize]}>
             <div className="menu-icon">
                 <Icon icon={icon} size={size} clickable action={toggle} />
                 {open ? (
-                    <menu className={getAlignClass(align)}>
+                    <menu className={menuClasses}>
                         {children}
                     </menu>
                 ) : null}
@@ -70,8 +90,12 @@ export const MenuIcon = (props) => {
  */
 export const MenuItem = (props) => {
 
-    const { id, icon, label, meta, disabled=false, size="normal", onSelect } = props
-    const [open, setOpen] = useContext(MenuContext)
+    const { id, icon, label, meta, disabled=false, size, onSelect } = props
+    const context = useContext(MenuContext)
+    const [open, setOpen, menuSize] = Array.isArray(context) ? context : [context, null, "normal"]
+
+    // Use menuSize from context if size prop is not provided
+    const iconSize = size || (menuSize === "compact" ? "small" : "normal")
 
     function select() {
         if (!disabled) {
@@ -85,7 +109,7 @@ export const MenuItem = (props) => {
 
     return (
         <li className={`menu-item ${style}`} onClick={select}>
-            {icon ? <Icon icon={icon} size={size} /> : null}
+            {icon ? <Icon icon={icon} size={iconSize} /> : null}
             <label>{labelTxt}</label>
             {meta ? <div className="meta">{meta}</div> : null}
         </li>