goblin-magic 1.9.3 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goblin-magic",
-  "version": "1.9.3",
+  "version": "1.10.0",
   "description": "goblin-magic",
   "author": "Epsitec SA",
   "contributors": [

package/widgets/checkbox-menu-items/styles.js

@@ -13,16 +13,9 @@ export default function styles() {
     margin: 0,
   };
 
-  const buttons = {
-    display: 'flex',
-    flexDirection: 'row',
-    padding: '1px',
-  };
-
   return {
     items,
     item,
     hr,
-    buttons,
   };
 }

package/widgets/checkbox-menu-items/widget.js

@@ -81,7 +81,7 @@ class CheckboxMenuItemsNC extends Widget {
   }
 
   render() {
-    const {values, checkedValues, renderValue, children} = this.props;
+    const {values, checkedValues, renderValue, hr, children} = this.props;
     this.values = values ? [...values] : [];
     const renderedChildren = React.Children.map(children, (child) => {
       if (React.isValidElement(child) && child.type === 'option') {
@@ -97,8 +97,8 @@ class CheckboxMenuItemsNC extends Widget {
           {values?.map((value) => this.renderItem(value, renderValue(value)))}
           {renderedChildren}
         </div>
-        <Menu.Hr className={this.styles.classNames.hr} />
-        <div className={this.styles.classNames.buttons}>
+        {hr !== false && <Menu.Hr className={this.styles.classNames.hr} />}
+        <Menu.Row>
           <MagicButton simple onPointerUp={this.all}>
             <Icon path={mdiCheckboxMarked} size="1.2em" />
             Tout
@@ -111,12 +111,14 @@ class CheckboxMenuItemsNC extends Widget {
             <Icon path={mdiCheckboxIntermediateVariant} size="1.2em" />
             Inverser
           </MagicButton>
-        </div>
+        </Menu.Row>
       </>
     );
   }
 }
 
-const CheckboxMenuItems = withC(CheckboxMenuItemsNC);
+const CheckboxMenuItems = withC(CheckboxMenuItemsNC, {
+  checkedValues: 'onChange',
+});
 
 export default CheckboxMenuItems;

package/widgets/inline-icon/styles.js

@@ -0,0 +1,19 @@
+export default function styles() {
+  const inlineIcon = {
+    display: 'inline-block',
+  };
+
+  const icon = {
+    verticalAlign: 'middle',
+    position: 'relative',
+    top: '-1.6px',
+    boxSizing: 'content-box',
+    margin: '-15% 0',
+    paddingTop: '4%',
+  };
+
+  return {
+    inlineIcon,
+    icon,
+  };
+}

package/widgets/inline-icon/widget.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import * as styles from './styles.js';
+import Icon from '@mdi/react';
+
+class InlineIcon extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  render() {
+    const {className = '', ...props} = this.props;
+    return (
+      <span className={this.styles.classNames.inlineIcon + ' ' + className}>
+        <Icon {...props} className={this.styles.classNames.icon} />
+      </span>
+    );
+  }
+}
+
+export default InlineIcon;

package/widgets/magic-button/styles.js

@@ -11,7 +11,7 @@ export default function styles() {
     'border':
       '1px solid color-mix(in srgb, var(--text-color), transparent 50%)',
     'borderRadius': '5px',
-    'padding': '6px 8px',
+    'padding': '4px 8px',
     'color': 'inherit',
     'display': 'inline-flex',
     'flexDirection': 'row',

package/widgets/magic-input/widget.js

@@ -341,7 +341,7 @@ class MagicInputNC extends Widget {
       Component = EditableDiv;
     }
 
-    if (this.props.emojiPicker) {
+    if (this.props.emojiPicker && !this.props.disabled) {
       return (
         <>
           <div className={this.styles.classNames.withEmoji + ' ' + className}>

package/widgets/magic-navigation/service.js

@@ -661,12 +661,13 @@ class MagicNavigation extends Elf {
    * @param {string} [options.cancelLabel]
    * @param {string} [options.initialValue]
    * @param {boolean} [options.withTranscription]
+   * @param {string} [options.type] field type
    * @returns {Promise<string>}
    */
   async prompt(
     parentId,
     prompt,
-    {advice, okLabel, cancelLabel, initialValue, withTranscription} = {}
+    {advice, okLabel, cancelLabel, initialValue, withTranscription, type} = {}
   ) {
     const dialogId = await this.openDialog(
       {
@@ -678,6 +679,7 @@ class MagicNavigation extends Elf {
           cancelLabel,
           initialValue,
           withTranscription,
+          type,
         },
       },
       parentId
@@ -1332,7 +1334,7 @@ class MagicNavigation extends Elf {
    * @param {id} windowId
    * @param {id} dialogId
    */
-  _removeDialog(windowId, dialogId) {
+  async _removeDialog(windowId, dialogId) {
     this.logic._removeDialog(windowId, dialogId);
   }
 

package/widgets/menu/styles.js

@@ -8,7 +8,8 @@ export default function styles() {
     'flexDirection': 'row',
     'alignItems': 'center',
     'textAlign': 'left',
-    'padding': '6px 8px',
+    'padding': '4px 8px',
+    'minHeight': '31px',
     'color': 'var(--text-color)',
     'fontSize': '14px',
     'outline': '1px solid transparent',
@@ -33,6 +34,13 @@ export default function styles() {
       marginRight: '6px',
       minWidth: '18px',
     },
+
+    '&[data-enabled=true]:not(:hover)': {
+      backgroundColor: 'rgba(255,177,60,0.4)',
+      border: '1px solid rgba(255,153,0,0.5)',
+      boxShadow: '0px 0px 3px rgba(255,153,0,0.7)',
+      padding: '3px 7px',
+    },
   };
 
   const menuItemRight = {
@@ -156,6 +164,12 @@ export default function styles() {
     alignSelf: 'center',
   };
 
+  const menuRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    padding: '1px',
+  };
+
   return {
     submenu,
     menuItem,
@@ -166,6 +180,7 @@ export default function styles() {
     menuPosition,
     menuContent,
     menuHr,
+    menuRow,
   };
 }
 

package/widgets/menu/widget.js

@@ -6,6 +6,7 @@ import {faBars, faChevronRight} from '@fortawesome/free-solid-svg-icons';
 import MagicButton from 'goblin-magic/widgets/magic-button/widget.js';
 import WithComputedSize from '../with-computed-size/widget.js';
 import MenuDialog from '../menu-dialog/widget.js';
+import withC from 'goblin-laboratory/widgets/connect-helpers/with-c.js';
 
 const MenuContext = React.createContext();
 const MenuStateContext = React.createContext();
@@ -55,7 +56,7 @@ class MenuItem extends Widget {
   }
 
   render() {
-    const {className = '', rightIcon, children, ...props} = this.props;
+    const {className = '', rightIcon, enabled, children, ...props} = this.props;
     return (
       <MenuContext.Consumer>
         {(menu) => (
@@ -64,11 +65,14 @@ class MenuItem extends Widget {
             className={this.styles.classNames.menuItem + ' ' + className}
             onPointerUp={(event) => this.handlePointerUp(event, menu)}
             onClick={(event) => this.handleClick(event, menu)}
+            data-enabled={enabled}
           >
             {children}
-            <div className={this.styles.classNames.menuItemRight}>
-              {rightIcon}
-            </div>
+            {rightIcon !== null && (
+              <div className={this.styles.classNames.menuItemRight}>
+                {rightIcon}
+              </div>
+            )}
           </button>
         )}
       </MenuContext.Consumer>
@@ -186,6 +190,25 @@ class MenuHr extends Widget {
   }
 }
 
+class MenuRow extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  render() {
+    const {className = '', children, ...props} = this.props;
+    return (
+      <div
+        {...props}
+        className={this.styles.classNames.menuRow + ' ' + className}
+      >
+        {children}
+      </div>
+    );
+  }
+}
+
 class MenuButton extends Widget {
   constructor() {
     super(...arguments);
@@ -651,10 +674,11 @@ export default class Menu extends Widget {
 
   static Context = MenuContext;
   static Content = MenuContent;
-  static Item = MenuItem;
+  static Item = withC(MenuItem);
   static Title = MenuTitle;
   static Div = MenuDiv;
   static Submenu = Submenu;
   static Hr = MenuHr;
+  static Row = MenuRow;
   static Button = MenuButton;
 }