goblin-gadgets 2.0.5 → 2.0.9

package/builders/gadget.js

@@ -2,7 +2,6 @@
 //T:2019-02-27
 
 const Goblin = require('xcraft-core-goblin');
-const common = require('goblin-workshop').common;
 
 module.exports = (config) => {
   const {name, initialState, actions, events, gadgets} = config;
@@ -30,6 +29,7 @@ module.exports = (config) => {
   ) {
     const childrenGadgets = {};
     if (gadgets) {
+      const {common} = require('goblin-workshop');
       yield common.createGadgets(quest, goblinName, gadgets, childrenGadgets);
     }
 
@@ -66,13 +66,13 @@ module.exports = (config) => {
       //Register gagdet quest handlers
       if (gadgets[key].onActions) {
         for (const handler of Object.keys(gadgets[key].onActions)) {
-          logicHandlers[`${key}-${handler}`] = gadgets[key].onActions[handler];
+          const {jsify} = require('xcraft-core-utils/lib/string.js');
+          const questName = jsify(`${key}-${handler}`);
+          logicHandlers[questName] = gadgets[key].onActions[handler];
 
-          Goblin.registerQuest(goblinName, `${key}-${handler}`, function (
-            quest
-          ) {
+          Goblin.registerQuest(goblinName, questName, function* (quest) {
             quest.do();
-            quest.me.update();
+            yield quest.me.update();
           });
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goblin-gadgets",
-  "version": "2.0.5",
+  "version": "2.0.9",
   "description": "Gadgets library",
   "main": "./builders/builders.js",
   "scripts": {

package/table-gadget.js

@@ -73,6 +73,26 @@ exports.xcraftCommands = function () {
             }
         }
       },
+      deselect: (state, action) => {
+        const id = action.rowId;
+        const selectedIds = state.get('selectedIds', []);
+        if (selectedIds.includes(id)) {
+          state = state.unpush('selectedIds', id);
+        }
+
+        return state;
+      },
+      deselectAll: (state) => {
+        return state.set('selectedIds', []);
+      },
+      selectAll: (state) => {
+        const rowIds = state
+          .get('sortedRows')
+          .map((row) => row.get('row').get('id'))
+          .valueSeq()
+          .toArray();
+        return state.set('selectedIds', rowIds);
+      },
       doubleClick: (state) => {
         // NOP, see doubleClick in events ---^
         return state;

package/widgets/button/styles.js

@@ -545,6 +545,7 @@ export default function styles(theme, props) {
     const w = Unit.multiply(to(theme.shapes.lineHeight, cssUnit), 0.8);
     boxWidth = w;
     boxMinWidth = w;
+    boxSizing = 'content-box';
     activeColor = theme.palette.comboActiveBackground;
     borderActiveColor = theme.palette.comboActiveBackground;
     if (disabled) {
@@ -1070,7 +1071,7 @@ export default function styles(theme, props) {
   };
 
   return {
-    box: boxStyle,
+    button: boxStyle,
     triangle: triangleStyle,
     busyBox: busyBoxStyle,
     busyGlyph: busyGlyphStyle,

package/widgets/button/widget.js

@@ -258,7 +258,7 @@ export default class Button extends Widget {
       return null;
     }
     const result = [];
-    const boxStyle = Object.assign({}, this.styles.props.box);
+    const boxStyle = Object.assign({}, this.styles.props.button);
     result.push(this.renderLabel(boxStyle));
     result.push(this.renderShortcut(boxStyle));
     result.push(this.renderFocusedForeground());
@@ -342,7 +342,7 @@ export default class Button extends Widget {
       propsTabIndex.tabIndex = 0;
     }
 
-    const boxClass = this.styles.classNames.box;
+    const boxClass = this.styles.classNames.button;
 
     if (this.props.kind === 'container' || this.props.kind === 'box') {
       return (

package/widgets/button-combo/styles.js

@@ -1,5 +1,4 @@
 import * as SpacingHelpers from 'goblin-gadgets/widgets/helpers/spacing-helpers';
-import {Unit} from 'goblin-theme';
 
 /******************************************************************************/
 
@@ -9,18 +8,10 @@ export const propNames = [
   'horizontalSpacing',
   'shape',
   'width',
-  'comboDirection',
 ];
 
 export default function styles(theme, props) {
-  const {
-    grow,
-    visibility,
-    horizontalSpacing,
-    shape,
-    width,
-    comboDirection,
-  } = props;
+  const {grow, visibility, horizontalSpacing, shape, width} = props;
 
   let flexGrow = grow;
   let flexShrink = null;
@@ -43,7 +34,7 @@ export default function styles(theme, props) {
     borderRadius = theme.shapes.actionRadius;
   }
 
-  const box = {
+  const buttonCombo = {
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'flex-start',
@@ -61,36 +52,21 @@ export default function styles(theme, props) {
     opacity: opacity,
   };
 
-  const shadowBox = {...box};
-  shadowBox.boxShadow = theme.shapes.comboShadow;
-  shadowBox.borderRadius = borderRadius;
+  const buttonComboShadow = {...buttonCombo};
+  buttonComboShadow.boxShadow = theme.shapes.comboShadow;
+  buttonComboShadow.borderRadius = borderRadius;
 
-  const focusedBox = {...box};
-  focusedBox.boxShadow = theme.shapes.focusedShadow + theme.palette.focused;
-  focusedBox.borderRadius = borderRadius;
+  const buttonComboFocused = {...buttonCombo};
+  buttonComboFocused.boxShadow =
+    theme.shapes.focusedShadow + theme.palette.focused;
+  buttonComboFocused.borderRadius = borderRadius;
 
-  const comboBox = {
-    position: 'absolute',
-    right: comboDirection === 'right' ? null : '0px',
-    left: comboDirection === 'right' ? '0px' : null,
-    top: Unit.add(theme.shapes.lineHeight, '1px'),
-    marginTop: theme.shapes.lineSpacing,
-    zIndex: 1,
-    display: 'flex',
-    flexDirection: 'column',
-    boxShadow: theme.shapes.calendarShadow,
-  };
-
-  const emptyCombo = {
-    margin: theme.shapes.containerMargin,
-  };
+  /******************************************************************************/
 
   return {
-    box,
-    shadowBox,
-    focusedBox,
-    comboBox,
-    emptyCombo,
+    buttonCombo,
+    buttonComboShadow,
+    buttonComboFocused,
   };
 }
 

package/widgets/button-combo/widget.js

@@ -262,10 +262,10 @@ export default class ButtonCombo extends Widget {
     }
 
     const boxClass = this.state.showCombo
-      ? this.styles.classNames.shadowBox
+      ? this.styles.classNames.buttonComboShadow
       : this.props.focus
-      ? this.styles.classNames.focusedBox
-      : this.styles.classNames.box;
+      ? this.styles.classNames.buttonComboFocused
+      : this.styles.classNames.buttonCombo;
 
     return (
       <span

package/widgets/color-picker/widget.js

@@ -258,6 +258,7 @@ class ColorPicker extends Widget {
           onBlur={this.onTextChanged}
         />
         <Button
+          kind="combo"
           glyph="solid/eye-dropper"
           tooltip={T('Colle la couleur contenue dans le bloc-notes')}
           onClick={this.onPaste}

package/widgets/field/widget.js

@@ -31,7 +31,6 @@ import FileInput from 'goblin-gadgets/widgets/file-input/widget';
 import DirectoryInput from 'goblin-gadgets/widgets/directory-input/widget';
 import StateBrowser from 'goblin-gadgets/widgets/state-browser/widget';
 
-import Plugin from 'goblin-desktop/widgets/plugin/widget';
 import SchemaHelpers from 'goblin-toolbox/lib/schema-helpers';
 
 import importer from 'goblin_importer';
@@ -604,7 +603,7 @@ class Field extends Form {
         );
         FinalPlugin = this.mapWidget(WiredPlugin, 'entityIds', this.fullPath);
       } else {
-        FinalPlugin = Plugin;
+        FinalPlugin = widgetImporter('plugin');
       }
 
       const FinalContainer = this.mapWidget(
@@ -1238,7 +1237,7 @@ class Field extends Form {
         WiredPlugin = Widget.Wired(CustomPlugin)(pluginId);
         FinalPlugin = this.mapWidget(WiredPlugin, 'entityIds', this.fullPath);
       } else {
-        FinalPlugin = Plugin;
+        FinalPlugin = widgetImporter('plugin');
       }
 
       return (

package/widgets/guild-user-logo/guild-helpers.js

@@ -38,7 +38,7 @@ function getLogoInitials(initials, pseudo, firstName, lastName) {
   }
 
   // The content of the logo is always in capitals.
-  return text.toUpperCase();
+  return text.substring(0, 3).toUpperCase();
 }
 
 //-----------------------------------------------------------------------------

package/widgets/guild-user-logo/styles.js

@@ -4,11 +4,35 @@ import GuildHelpers from '../guild-user-logo/guild-helpers';
 
 /******************************************************************************/
 
-export const propNames = ['size', 'color', 'shape', 'initials', 'onClick'];
+export const propNames = [
+  'size',
+  'color',
+  'shape',
+  'initials',
+  'pseudo',
+  'firstName',
+  'lastName',
+  'onClick',
+];
 
 export default function styles(theme, props) {
-  let {size = '50px', color, shape, initials = '?', onClick} = props;
+  let {
+    size = '50px',
+    color,
+    shape,
+    initials,
+    pseudo,
+    firstName,
+    lastName,
+    onClick,
+  } = props;
 
+  initials = GuildHelpers.getLogoInitials(
+    initials,
+    pseudo,
+    firstName,
+    lastName
+  );
   color = GuildHelpers.getLogoColor(color);
   shape = GuildHelpers.getLogoShape(shape);
 
@@ -20,6 +44,7 @@ export default function styles(theme, props) {
     'flexDirection': 'column',
     'justifyContent': 'center',
     'alignItems': 'center',
+    'cursor': onClick ? 'pointer' : null,
     'transition': theme.transitions.hover,
     ':hover': {
       transform: onClick ? 'scale(1.1)' : null,

package/widgets/guild-user-logo/widget.js

@@ -26,11 +26,14 @@ export default class GuildUserLogo extends Widget {
   }
 
   renderInitials() {
-    const text = this.props.initials
-      ? this.props.initials.substring(0, 3)
-      : '?';
+    const i = GuildHelpers.getLogoInitials(
+      this.props.initials,
+      this.props.pseudo,
+      this.props.firstName,
+      this.props.lastName
+    );
 
-    return <div className={this.styles.classNames.text}>{text}</div>;
+    return <div className={this.styles.classNames.text}>{i}</div>;
   }
 
   renderLogo() {

package/widgets/guild-user-profile/widget.js

@@ -132,7 +132,7 @@ export default class GuildUserProfile extends Widget {
       {id: 'triangle', glyph: 'solid/triangle', text: T('Triangle')},
       {id: 'certificate', glyph: 'solid/certificate', text: T('Fleur')},
       {id: 'star', glyph: 'solid/star', text: T('Etoile')},
-      {id: 'heart', glyph: 'solid/heart', text: T('Coeur')},
+      {id: 'heart', glyph: 'solid/heart', text: T('Cœur')},
     ];
 
     return (

package/widgets/input-wrapper/widget.js

@@ -8,6 +8,9 @@ import throttle from 'lodash/throttle';
  * @param {Component} Component - The raw input to wrap
  * @param {string} valueName - (optional) Can be used to rename the 'value' prop
  * @returns {Component} A new component
+ *
+ * To make the wrapper work, the raw input must accept the following props:
+ * onChange, onFocus, onBlur and optionally onValidate
  */
 export default function wrapRawInput(Component, valueName = 'value') {
   /**

package/widgets/table/reducer.js

@@ -78,13 +78,14 @@ const initialState = new Shredder({
 export default (state = initialState, action = {}) => {
   switch (action.type) {
     case 'INITIALISE': {
-      let {data, selectedIds} = action;
+      let {data, selectedIds, id} = action;
 
       if (!Shredder.isShredder(data)) {
         data = new Shredder(data);
       }
 
       state = state.set('data', data);
+      state = state.set('id', id);
 
       const defaultSortingColumns = data.get('defaultSortingColumns');
       if (defaultSortingColumns) {
@@ -150,6 +151,11 @@ export default (state = initialState, action = {}) => {
     }
 
     case 'MOVE_SELECTION': {
+      const mode = action.mode;
+      if (mode === 'multi') {
+        return state;
+      }
+
       const {direction} = action;
 
       const sortedRows = state.get('sortedRows');
@@ -170,6 +176,17 @@ export default (state = initialState, action = {}) => {
       state = updateAfterChangingSelection(state);
       return state;
     }
+
+    case 'DESELECT': {
+      const id = action.rowId;
+      const selectedIds = state.get('selectedIds', []);
+      if (selectedIds.includes(id)) {
+        state = state.unpush('selectedIds', id);
+      }
+
+      state = updateAfterChangingSelection(state);
+      return state;
+    }
   }
   return state;
 };

package/widgets/table/widget.js

@@ -72,6 +72,7 @@ class Table extends Widget {
         data: this.props.data,
         sortingColumns: this.props.selectedIds,
         selectedIds,
+        id: this.props.id,
       });
     }
   }
@@ -120,6 +121,7 @@ class Table extends Widget {
     this.dispatch({
       type: 'MOVE_SELECTION',
       direction,
+      mode: this.props.selectionMode,
     });
   }
 

package/widgets/text-field-typed-nc/widget.js

@@ -366,6 +366,9 @@ export default class TextFieldTypedNC extends Widget {
 
   handleDateClicked(date) {
     if (this.props.onChange) {
+      if (this.props.shift) {
+        date = DateConverters.addDays(date, -this.props.shift);
+      }
       this.props.onChange(date);
     }
   }

package/widgets/well-done/widget.js

@@ -62,8 +62,8 @@ class WellDone extends Widget {
 
     return {
       position: 'absolute',
-      left: '40%',
-      top: '50%',
+      left: 'calc(50% - 150px)',
+      bottom: '160px',
       transform,
       animation,
       animationDelay,
@@ -114,8 +114,8 @@ class WellDone extends Widget {
   renderBoxBack(hidden) {
     const style = {
       position: 'absolute',
-      left: '40%',
-      top: '50%',
+      bottom: '0px',
+      left: 'calc(50% - 150px)',
       width: '300px',
       visibility: hidden ? 'hidden' : 'visible',
     };
@@ -126,8 +126,8 @@ class WellDone extends Widget {
   renderBoxFront(hidden) {
     const style = {
       position: 'absolute',
-      left: '40%',
-      top: '50%',
+      bottom: '0px',
+      left: 'calc(50% - 150px)',
       width: '300px',
       visibility: hidden ? 'hidden' : 'visible',
     };