goblin-magic 1.6.1 → 1.8.0

package/package.json

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

package/test/navigation.spec.js

@@ -44,37 +44,31 @@ describe('goblin.magic.navigation', function () {
 
     /* 1,2,3 → 2,3,1 */
     restore(navLogic);
-    navLogic.moveTab('panel@1', 'tab@1', 'panel@1', 'tab@3', 'right');
+    navLogic.moveTab('tab@1', 'panel@1', 'panel@1', 2);
     expect(navLogic.state.panels['panel@1'].tabIds.toJS()) //
       .to.be.eql(['tab@2', 'tab@3', 'tab@1']);
 
     /* 1,2,3 → 2,1,3 */
     restore(navLogic);
-    navLogic.moveTab('panel@1', 'tab@1', 'panel@1', 'tab@3', 'left');
-    expect(navLogic.state.panels['panel@1'].tabIds.toJS()) //
-      .to.be.eql(['tab@2', 'tab@1', 'tab@3']);
-
-    /* 1,2,3 → 2,1,3 */
-    restore(navLogic);
-    navLogic.moveTab('panel@1', 'tab@1', 'panel@1', 'tab@2', 'right');
+    navLogic.moveTab('tab@1', 'panel@1', 'panel@1', 1);
     expect(navLogic.state.panels['panel@1'].tabIds.toJS()) //
       .to.be.eql(['tab@2', 'tab@1', 'tab@3']);
 
     /* 1,2,3 → 1,2,3 */
     restore(navLogic);
-    navLogic.moveTab('panel@1', 'tab@1', 'panel@1', 'tab@2', 'left');
+    navLogic.moveTab('tab@1', 'panel@1', 'panel@1', 0);
     expect(navLogic.state.panels['panel@1'].tabIds.toJS()) //
       .to.be.eql(['tab@1', 'tab@2', 'tab@3']);
 
     /* 1,2,3 → 3,1,2 */
     restore(navLogic);
-    navLogic.moveTab('panel@1', 'tab@3', 'panel@1', 'tab@1', 'left');
+    navLogic.moveTab('tab@3', 'panel@1', 'panel@1', 0);
     expect(navLogic.state.panels['panel@1'].tabIds.toJS()) //
       .to.be.eql(['tab@3', 'tab@1', 'tab@2']);
 
     /* 1,2,3 → 1,3,2 */
     restore(navLogic);
-    navLogic.moveTab('panel@1', 'tab@3', 'panel@1', 'tab@1', 'right');
+    navLogic.moveTab('tab@3', 'panel@1', 'panel@1', 1);
     expect(navLogic.state.panels['panel@1'].tabIds.toJS()) //
       .to.be.eql(['tab@1', 'tab@3', 'tab@2']);
 
@@ -82,7 +76,7 @@ describe('goblin.magic.navigation', function () {
 
     /* 2,3 → 4,5,6,1 */
     restore(navLogic);
-    navLogic.moveTab('panel@1', 'tab@1', 'panel@2', 'tab@6', 'right');
+    navLogic.moveTab('tab@1', 'panel@1', 'panel@2', 3);
     expect(navLogic.state.panels['panel@1'].tabIds.toJS()) //
       .to.be.eql(['tab@2', 'tab@3']);
     expect(navLogic.state.panels['panel@2'].tabIds.toJS()) //
@@ -90,7 +84,7 @@ describe('goblin.magic.navigation', function () {
 
     /* 1,3 → 2,4,5,6 */
     restore(navLogic);
-    navLogic.moveTab('panel@1', 'tab@2', 'panel@2', 'tab@4', 'left');
+    navLogic.moveTab('tab@2', 'panel@1', 'panel@2', 0);
     expect(navLogic.state.panels['panel@1'].tabIds.toJS()) //
       .to.be.eql(['tab@1', 'tab@3']);
     expect(navLogic.state.panels['panel@2'].tabIds.toJS()) //
@@ -98,7 +92,7 @@ describe('goblin.magic.navigation', function () {
 
     /* 1,2 → 4,5,3,6 */
     restore(navLogic);
-    navLogic.moveTab('panel@1', 'tab@3', 'panel@2', 'tab@5', 'right');
+    navLogic.moveTab('tab@3', 'panel@1', 'panel@2', 2);
     expect(navLogic.state.panels['panel@1'].tabIds.toJS()) //
       .to.be.eql(['tab@1', 'tab@2']);
     expect(navLogic.state.panels['panel@2'].tabIds.toJS()) //
@@ -106,9 +100,9 @@ describe('goblin.magic.navigation', function () {
 
     /* . → 2,4,1,5,6,3 */
     restore(navLogic);
-    navLogic.moveTab('panel@1', 'tab@2', 'panel@2', 'tab@4', 'left');
-    navLogic.moveTab('panel@1', 'tab@1', 'panel@2', 'tab@5', 'left');
-    navLogic.moveTab('panel@1', 'tab@3', 'panel@2', 'tab@6', 'right');
+    navLogic.moveTab('tab@2', 'panel@1', 'panel@2', 0);
+    navLogic.moveTab('tab@1', 'panel@1', 'panel@2', 2);
+    navLogic.moveTab('tab@3', 'panel@1', 'panel@2', 5);
     expect(navLogic.state.panels['panel@1'].tabIds.toJS()) //
       .to.be.eql([]);
     expect(navLogic.state.panels['panel@2'].tabIds.toJS()) //

package/widgets/calendar-menu/styles.js

@@ -0,0 +1,3 @@
+export default function styles() {
+  return {};
+}

package/widgets/calendar-menu/widget.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import * as styles from './styles.js';
+import Menu from '../menu/widget.js';
+import CalendarMenuContent from '../calendar-menu-content/widget.js';
+import {date as DateConverters} from 'xcraft-core-converters';
+
+class CalendarMenu extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  handleCalendarChange = (date, menu) => {
+    menu.close();
+    this.props.onChange(date);
+  };
+
+  render() {
+    const {allowEmpty, selectWeek, value, onChange, children} = this.props;
+    return (
+      <Menu>
+        {children}
+        <Menu.Content position="bottom center" addTabIndex={false}>
+          <Menu.Context.Consumer>
+            {(menu) => (
+              <CalendarMenuContent
+                allowEmpty={allowEmpty}
+                selectWeek={selectWeek}
+                value={value || DateConverters.getNowCanonical()}
+                onChange={(date) => this.handleCalendarChange(date, menu)}
+                onCancel={menu.close}
+              />
+            )}
+          </Menu.Context.Consumer>
+        </Menu.Content>
+      </Menu>
+    );
+  }
+}
+
+export default CalendarMenu;

package/widgets/calendar-menu-content/widget.js

@@ -52,6 +52,7 @@ class CalendarMenuContent extends Widget {
       >
         <SmallCalendar
           ref={this.calendarRef}
+          selectWeek={this.props.selectWeek}
           date={this.state.date}
           onDateChange={this.handleDateChange}
           onDayClick={this.handleDayClick}

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

@@ -0,0 +1,28 @@
+export default function styles() {
+  const items = {
+    padding: '3px 3px 2px 3px',
+  };
+
+  const item = {
+    display: 'flex',
+    flexDirection: 'row',
+  };
+
+  const hr = {
+    width: '100%',
+    margin: 0,
+  };
+
+  const buttons = {
+    display: 'flex',
+    flexDirection: 'row',
+    padding: '1px',
+  };
+
+  return {
+    items,
+    item,
+    hr,
+    buttons,
+  };
+}

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

@@ -0,0 +1,122 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import * as styles from './styles.js';
+import MagicButton from '../magic-button/widget.js';
+import Icon from '@mdi/react';
+import {
+  mdiCheckboxBlankOutline,
+  mdiCheckboxIntermediateVariant,
+  mdiCheckboxMarked,
+} from '@mdi/js';
+import MagicCheckbox from '../magic-checkbox/widget.js';
+import Menu from '../menu/widget.js';
+import withC from 'goblin-laboratory/widgets/connect-helpers/with-c.js';
+
+class CheckboxMenuItemsNC extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  toggle = (value) => {
+    const {checkedValues} = this.props;
+    if (!checkedValues) {
+      this.props.onChange(this.values.filter((v) => v !== value));
+    } else if (checkedValues.includes(value)) {
+      this.props.onChange([...checkedValues].filter((v) => v !== value));
+    } else {
+      this.props.onChange([...checkedValues, value]);
+    }
+  };
+
+  set = (value, event) => {
+    const {checkedValues} = this.props;
+    if (event.ctrlKey) {
+      this.toggle(value);
+    } else if (checkedValues?.length === 1 && checkedValues.includes(value)) {
+      this.all();
+    } else {
+      this.props.onChange([value]);
+    }
+    event.preventDefault();
+  };
+
+  all = () => {
+    this.props.onChange(null);
+  };
+
+  empty = () => {
+    this.props.onChange([]);
+  };
+
+  invert = () => {
+    const {checkedValues} = this.props;
+    if (checkedValues) {
+      if (checkedValues.length === 0) {
+        this.all();
+      } else {
+        this.props.onChange(
+          this.values.filter((value) => !checkedValues.includes(value))
+        );
+      }
+    } else {
+      this.empty();
+    }
+  };
+
+  renderItem(value, text) {
+    const {checkedValues} = this.props;
+    return (
+      <div key={value} className={this.styles.classNames.item}>
+        <MagicCheckbox
+          value={!checkedValues || checkedValues.includes(value)}
+          onChange={() => this.toggle(value)}
+          // disabled
+        />
+        <Menu.Item onPointerUp={(event) => this.set(value, event)}>
+          {typeof text === 'string' ? <span>{text}</span> : text}
+        </Menu.Item>
+      </div>
+    );
+  }
+
+  render() {
+    const {values, checkedValues, renderValue, children} = this.props;
+    this.values = values ? [...values] : [];
+    const renderedChildren = React.Children.map(children, (child) => {
+      if (React.isValidElement(child) && child.type === 'option') {
+        const {value, children} = child.props;
+        this.values.push(value);
+        return this.renderItem(value, children);
+      }
+      return child;
+    });
+    return (
+      <>
+        <div className={this.styles.classNames.items}>
+          {values?.map((value) => this.renderItem(value, renderValue(value)))}
+          {renderedChildren}
+        </div>
+        <Menu.Hr className={this.styles.classNames.hr} />
+        <div className={this.styles.classNames.buttons}>
+          <MagicButton simple onPointerUp={this.all}>
+            <Icon path={mdiCheckboxMarked} size="1.2em" />
+            Tout
+          </MagicButton>
+          <MagicButton simple onPointerUp={this.empty}>
+            <Icon path={mdiCheckboxBlankOutline} size="1.2em" />
+            Aucun
+          </MagicButton>
+          <MagicButton simple onPointerUp={this.invert}>
+            <Icon path={mdiCheckboxIntermediateVariant} size="1.2em" />
+            Inverser
+          </MagicButton>
+        </div>
+      </>
+    );
+  }
+}
+
+const CheckboxMenuItems = withC(CheckboxMenuItemsNC);
+
+export default CheckboxMenuItems;

package/widgets/listener-stack/listener-stack.js

@@ -51,7 +51,7 @@ export default class ListenerStack {
     const stack = this.getStack(type);
     const index = stack.indexOf(listener);
     if (index === -1) {
-      console.error(`Unknown listener for type ${type}`);
+      // console.error(`Unknown listener for type ${type}`);
       return;
     }
     stack.splice(index, 1);

package/widgets/magic-button/widget.js

@@ -2,7 +2,6 @@ import * as styles from './styles.js';
 import React from 'react';
 import Widget from 'goblin-laboratory/widgets/widget';
 import withC from 'goblin-laboratory/widgets/connect-helpers/with-c';
-import {TranslatableButton} from 'goblin-nabu/widgets/helpers/element-helpers.js';
 
 class MagicButtonNC extends Widget {
   constructor() {
@@ -56,21 +55,7 @@ class MagicButtonNC extends Widget {
       typeof this.props.children === 'string' &&
       this.props.children.length === 1;
 
-    return title ? (
-      <TranslatableButton
-        {...props}
-        className={this.styles.classNames.button + ' button ' + className}
-        data-enabled={enabled}
-        data-underlined={underlined}
-        data-big={big}
-        data-simple={simple}
-        data-len1={len1}
-        onPointerDown={onPointerDown && this.handlePointerDown}
-        title={title}
-      >
-        {this.renderChildren(spinner, len1)}
-      </TranslatableButton>
-    ) : (
+    return (
       <button
         {...props}
         className={this.styles.classNames.button + ' button ' + className}
@@ -80,6 +65,7 @@ class MagicButtonNC extends Widget {
         data-simple={simple}
         data-len1={len1}
         onPointerDown={onPointerDown && this.handlePointerDown}
+        title={title}
       >
         {this.renderChildren(spinner, len1)}
       </button>

package/widgets/magic-date-field/widget.js

@@ -10,6 +10,7 @@ import {mdiCalendarMonth} from '@mdi/js';
 import Menu from '../menu/widget.js';
 import CalendarMenuContent from '../calendar-menu-content/widget.js';
 import CalendarHelpers from '../calendar-helpers.js';
+import CalendarMenu from '../calendar-menu/widget.js';
 
 class MagicDateFieldNC extends Widget {
   constructor() {
@@ -150,41 +151,34 @@ class MagicDateFieldNC extends Widget {
     this.dateBeforeMonthChange = null;
   };
 
-  handleCalendarChange = (date, menu) => {
-    menu.close();
-    this.props.onChange(date);
-  };
-
   render() {
-    const {className = '', required, ...props} = this.props;
+    const {
+      value,
+      onChange,
+      className = '',
+      required,
+      disabled,
+      ...props
+    } = this.props;
     return (
       <InputGroup>
         <MagicTextField
           inputRef={this.inputRef}
+          value={value}
+          onChange={onChange}
           format={this.format}
           parse={this.parse}
+          disabled={disabled}
           {...props}
           onKeyDown={this.handleKeyDown}
           onBlur={this.handleBlur}
           className={this.styles.classNames.dateField + ' ' + className}
         />
-        <Menu>
-          <Menu.Button>
+        <CalendarMenu allowEmpty={!required} value={value} onChange={onChange}>
+          <Menu.Button disabled={disabled}>
             <Icon path={mdiCalendarMonth} size={0.8} />
           </Menu.Button>
-          <Menu.Content position="bottom center" addTabIndex={false}>
-            <Menu.Context.Consumer>
-              {(menu) => (
-                <CalendarMenuContent
-                  allowEmpty={!required}
-                  value={this.props.value || DateConverters.getNowCanonical()}
-                  onChange={(date) => this.handleCalendarChange(date, menu)}
-                  onCancel={menu.close}
-                />
-              )}
-            </Menu.Context.Consumer>
-          </Menu.Content>
-        </Menu>
+        </CalendarMenu>
       </InputGroup>
     );
   }

package/widgets/magic-datetime-field/widget.js

@@ -68,7 +68,6 @@ class MagicDatetimeFieldNC extends Widget {
       requiredDate,
       requiredTime,
       isEndTime,
-      dispatch,
       ...props
     } = this.props;
     const {date, time} = value ? parseZonedDateTime(value) : {};

package/widgets/magic-div/styles.js

@@ -12,6 +12,14 @@ export default function styles() {
     '@media (prefers-color-scheme: light)': {
       background: 'rgba(248, 241, 248, 0.85)',
     },
+
+    '.prefers-reduced-transparency &': {
+      'background': 'rgba(41, 51, 77, 1)',
+      'backdropFilter': 'none',
+      '@media (prefers-color-scheme: light)': {
+        background: 'rgba(241, 237, 244, 1)',
+      },
+    },
   };
 
   return {