dmn-js-shared - npm Package Compare versions

Comparing version 2.1.0 to 3.0.0

lib/components/ContentEditable.js

@@ -137,8 +137,7 @@ import { Component } from 'inferno';
 
+      // prevent default action (<br/> insert)
       event.preventDefault();
+      event.stopPropagation();
 
       if (this.props.ctrlForNewline && !isCmd(event)) {
-        // prevent default action (<br/> insert)
-        event.preventDefault();
-
         return;
@@ -145,0 +144,0 @@ }

lib/components/Input.js

@@ -56,3 +56,3 @@ import { Component } from 'inferno';
         spellcheck="false"
-        type={ type }
+        type={ type || 'text' }
         value={ value } />
@@ -59,0 +59,0 @@ );

lib/components/InputSelect.js

@@ -32,4 +32,5 @@ import { Component, createPortal } from 'inferno';
 
-  componentWillMount() {
-    document.addEventListener('click', this.onClick);
+  componentDidMount() {
+    document.addEventListener('click', this.onGlobalClick);
+    document.addEventListener('focusin', this.onFocusChanged);
 
@@ -40,3 +41,4 @@ this.keyboard.addListener(this.onKeyboard);
   componentWillUnmount() {
-    document.removeEventListener('click', this.onClick);
+    document.removeEventListener('focusin', this.onFocusChanged);
+    document.removeEventListener('click', this.onGlobalClick);
 
@@ -120,5 +122,5 @@ this.keyboard.removeListener(this.onKeyboard);
 
-    this.setState({
-      optionsVisible: true
-    });
+    this.setOptionsVisible(!this.state.optionsVisible);
+
+    this.focusInput();
   }
@@ -136,21 +138,114 @@
 
-    this.setState({
-      optionsVisible: false
-    });
+    this.setOptionsVisible(false);
 
     this.onChange(value);
+
+    this.focusInput();
   }
 
-  onClick = ({ target }) => {
+  /**
+   * Focus input node
+   */
+  focusInput() {
+    const node = this.inputNode;
+
+    node.focus();
+
+    // move cursor to end of input
+    if ('selectionStart' in node) {
+      node.selectionStart = 100000;
+    }
+  }
+
+  checkClose(focusTarget) {
+
     if (this._portalEl
-      && !this._portalEl.contains(target)
-      && !this.inputNode.contains(target)) {
-      this.setState({
-        optionsVisible: false
-      });
+      && !this._portalEl.contains(focusTarget)
+      && !this.parentNode.contains(focusTarget)) {
+      this.setOptionsVisible(false);
+    }
+  }
 
-      this.removePortalEl();
+  onFocusChanged = (evt) => {
+    this.checkClose(evt.target);
+  }
+
+  onGlobalClick = (evt) => {
+    this.checkClose(evt.target);
+  }
+
+  select(direction) {
+
+    const {
+      options
+    } = this.props;
+
+    const {
+      value
+    } = this.state;
+
+    if (!options) {
+      return;
     }
+
+    const option = options.filter(o => o.value === value)[0];
+
+    const idx = option
+      ? options.indexOf(option)
+      : -1;
+
+    const nextIdx = (
+      idx === -1
+        ? (
+          direction === 1
+            ? 0
+            : options.length - 1)
+        : ((idx + direction) % options.length)
+    );
+
+    const nextOption = options[nextIdx < 0 ? options.length + nextIdx : nextIdx];
+
+    this.onChange(nextOption.value);
   }
 
+  setOptionsVisible(optionsVisible) {
+    this.setState({
+      optionsVisible
+    });
+  }
+
+  onKeyDown = (evt) => {
+
+    const {
+      optionsVisible
+    } = this.state;
+
+    var code = evt.which;
+
+    // DOWN or UP
+    if (code === 40 || code === 38) {
+
+      evt.stopPropagation();
+      evt.preventDefault();
+
+      if (!optionsVisible) {
+        this.setOptionsVisible(true);
+      } else {
+        this.select(code === 40 ? 1 : -1);
+      }
+    }
+
+    if (optionsVisible) {
+
+      // ENTER
+      // ESC
+      if (code === 13 || code === 27) {
+        evt.stopPropagation();
+        evt.preventDefault();
+
+        this.setOptionsVisible(false);
+      }
+    }
+  }
+
   onKeyboard = (keycode) => {
@@ -165,5 +260,3 @@ const { optionsVisible } = this.state;
     if (keycode === 27) {
-      this.setState({
-        optionsVisible: false
-      });
+      this.setOptionsVisible(false);
 
@@ -174,3 +267,3 @@ return true;
 
-  renderOptions(options) {
+  renderOptions(options, activeOption) {
     return (
@@ -182,3 +275,5 @@ <div className="options">
               <div
-                className="option"
+                className={
+                  [ 'option', activeOption === option ? 'active' : '' ].join(' ')
+                }
                 data-value={ option.value }
@@ -220,2 +315,4 @@ onClick={ e => this.onOptionClick(option.value, e) }>
               className="dms-input"
+              tabindex="0"
+              onKeyDown={ this.onKeyDown }
               ref={ node => this.inputNode = node }>{ label }</div>
@@ -225,2 +322,3 @@ : <input
               onInput={ this.onInput }
+              onKeyDown={ this.onKeyDown }
               spellcheck="false"
@@ -231,11 +329,12 @@ ref={ node => this.inputNode = node }
         }
+        <span
+          className={ [
+            'dms-input-select-icon',
+            optionsVisible ? 'dmn-icon-up' : 'dmn-icon-down'
+          ].join(' ') }>
+        </span>
         {
           optionsVisible
-            ? <span className="dms-input-select-icon dmn-icon-up"></span>
-            : <span className="dms-input-select-icon dmn-icon-down"></span>
+            && createPortal(this.renderOptions(options, option), this._portalEl)
         }
-        {
-          optionsVisible
-            && createPortal(this.renderOptions(options), this._portalEl)
-        }
       </div>
@@ -242,0 +341,0 @@ );

lib/components/List.js

@@ -8,3 +8,3 @@ import { Component } from 'inferno';
 const REMOVE_BTN_CLS =
-  'remove dmn-icon-clear float-right cursor-pointer';
+  'remove dmn-icon-clear';
 
@@ -137,3 +137,3 @@ /**
                                 checked={ item.isChecked }
-                                className="item-toggle cursor-pointer"
+                                className="item-toggle"
                                 onClick={ this.getToggleClickHandler(item) } />
@@ -140,0 +140,0 @@ }

lib/util/ModelUtil.js

@@ -1,3 +0,1 @@
-'use strict';
-
 import { some } from 'min-dash';
@@ -30,9 +28,7 @@
 
-function isRule(element) {
+export function isRule(element) {
   return is(element, 'dmn:DecisionRule');
 }
 
-module.exports.isRule = isRule;
 
-
 /**
@@ -39,0 +35,0 @@ * Return the business object for a given element.

package.json

 {
   "name": "dmn-js-shared",
   "description": "Shared components used by dmn-js",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "scripts": {
@@ -11,14 +11,14 @@ "test": "karma start",
   "devDependencies": {
-    "didi": "^3.0.0",
-    "inferno-test-utils": "^4.0.0",
+    "didi": "^4.0.0",
+    "inferno-test-utils": "^5.0.0",
     "stringify": "^5.1.0"
   },
   "dependencies": {
-    "diagram-js": "^0.29.0",
-    "dmn-moddle": "^3.0.1",
+    "diagram-js": "^1.1.0",
+    "dmn-moddle": "^5.0.0",
     "ids": "^0.2.0",
-    "inferno": "^4.0.0",
-    "min-dash": "^2.2.0",
-    "min-dom": "^2.0.0",
-    "selection-ranges": "^1.2.3",
+    "inferno": "^5.0.0",
+    "min-dash": "^3.0.0",
+    "min-dom": "^3.0.0",
+    "selection-ranges": "^3.0.0",
     "selection-update": "^0.1.2"
@@ -25,0 +25,0 @@ },

test/util/EventUtil.js

@@ -36,18 +36,24 @@ import { query as domQuery } from 'min-dom';
 
-export function triggerChangeEvent(element, value) {
-  element.value = value;
+export function triggerEvent(element, name, eventType, bubbles=false) {
+  const event = document.createEvent(eventType);
 
-  const event = document.createEvent('HTMLEvents');
+  event.initEvent(name, bubbles, true);
 
-  event.initEvent('change', false, true);
+  return element.dispatchEvent(event);
+}
 
-  element.dispatchEvent(event);
+export function triggerFocusIn(element) {
+  return triggerEvent(element, 'focusin', 'UIEvents', true);
 }
 
+export function triggerChangeEvent(element, value) {
+  element.value = value;
+
+  return triggerEvent(element, 'change', 'HTMLEvents');
+}
+
 export function triggerKeyEvent(element, event, code) {
   const e = document.createEvent('Events');
 
-  if (e.initEvent) {
-    e.initEvent(event, true, true);
-  }
+  e.initEvent(event, true, true);
 
@@ -54,0 +60,0 @@ e.keyCode = code;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

61531

increased by2.16%

Lines of code

2190

increased by1.91%

Worsened metrics

Number of package files

33

decreased by-5.71%

Dependency changes

• + Addedcss.escape@1.5.1(transitive)

• + Addeddiagram-js@1.4.0(transitive)

• + Addeddidi@4.0.0(transitive)

• + Addeddmn-moddle@5.0.0(transitive)

• + Addedinferno@5.6.3(transitive)

• + Addedinferno-shared@5.6.3(transitive)

• + Addedinferno-vnode-flags@5.6.3(transitive)

• + Addedmin-dash@3.8.1(transitive)

• + Addedmin-dom@3.2.1(transitive)

• + Addedmoddle@4.1.0(transitive)

• + Addedmoddle-xml@7.5.0(transitive)

• + Addedobject-refs@0.3.0(transitive)

• + Addedopencollective-postinstall@2.0.3(transitive)

• + Addedsaxen@8.1.2(transitive)

• + Addedselection-ranges@3.0.3(transitive)

• + Addedtiny-svg@2.2.4(transitive)

• - Removedansi-escapes@1.4.0(transitive)

• - Removedansi-regex@2.1.13.0.1(transitive)

• - Removedansi-styles@2.2.1(transitive)

• - Removedbabel-polyfill@6.23.0(transitive)

• - Removedbabel-runtime@6.26.0(transitive)

• - Removedchalk@1.1.3(transitive)

• - Removedchardet@0.4.2(transitive)

• - Removedcli-cursor@2.1.0(transitive)

• - Removedcli-width@2.2.1(transitive)

• - Removedclosest@0.0.1(transitive)

• - Removedcore-js@2.6.12(transitive)

• - Removeddelegate-events@1.1.1(transitive)

• - Removeddiagram-js@0.29.2(transitive)

• - Removeddidi@3.2.0(transitive)

• - Removeddmn-moddle@3.0.1(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedescape-string-regexp@1.0.5(transitive)

• - Removedexternal-editor@2.2.0(transitive)

• - Removedfigures@2.0.0(transitive)

• - Removedhas-ansi@2.0.0(transitive)

• - Removediconv-lite@0.4.240.6.3(transitive)

• - Removedinferno@4.0.8(transitive)

• - Removedinferno-shared@4.0.8(transitive)

• - Removedinferno-vnode-flags@4.0.8(transitive)

• - Removedinquirer@3.0.6(transitive)

• - Removedis-fullwidth-code-point@2.0.0(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedlodash@4.17.21(transitive)

• - Removedmatches-selector@0.0.1(transitive)

• - Removedmimic-fn@1.2.0(transitive)

• - Removedmin-dash@2.4.0(transitive)

• - Removedmin-dom@2.2.0(transitive)

• - Removedminimist@1.2.0(transitive)

• - Removedmoddle@3.0.0(transitive)

• - Removedmoddle-xml@5.0.2(transitive)

• - Removedmute-stream@0.0.7(transitive)

• - Removednode-fetch@1.6.3(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedobject-refs@0.1.1(transitive)

• - Removedonetime@2.0.1(transitive)

• - Removedopencollective@1.0.3(transitive)

• - Removedopn@4.0.2(transitive)

• - Removedos-tmpdir@1.0.2(transitive)

• - Removedpinkie@2.0.4(transitive)

• - Removedpinkie-promise@2.0.1(transitive)

• - Removedregenerator-runtime@0.10.50.11.1(transitive)

• - Removedrestore-cursor@2.0.0(transitive)

• - Removedrun-async@2.4.1(transitive)

• - Removedrx@4.1.0(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsaxen@7.0.1(transitive)

• - Removedselection-ranges@1.2.3(transitive)

• - Removedsignal-exit@3.0.7(transitive)

• - Removedstring-width@2.1.1(transitive)

• - Removedstrip-ansi@3.0.14.0.0(transitive)

• - Removedsupports-color@2.0.0(transitive)

• - Removedthrough@2.3.8(transitive)

• - Removedtiny-stack@0.1.0(transitive)

• - Removedtiny-svg@0.1.3(transitive)

• - Removedtmp@0.0.33(transitive)

• Updateddiagram-js@^1.1.0

• Updateddmn-moddle@^5.0.0

• Updatedinferno@^5.0.0

• Updatedmin-dash@^3.0.0

• Updatedmin-dom@^3.0.0

• Updatedselection-ranges@^3.0.0