@scriptollc/enum-cell-editor - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/index.js

 "use strict";
+var __assign = (this && this.__assign) || Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+    }
+    return t;
+};
 const React = require('react');
+const react_dom_1 = require('react-dom');
 const classNames = require('classnames');
 const core_1 = require('@blueprintjs/core');
+const draggable_1 = require('@blueprintjs/table/dist/interactions/draggable');
+const auto_complete_options_1 = require('./auto-complete-options');
 const KeyCodes = {
-    13: 'ENTER',
-    27: 'ESC',
-    38: 'UP',
-    40: 'DOWN'
+    13: 'Enter',
+    27: 'Escape',
+    38: 'ArrowUp',
+    40: 'ArrowDown'
 };
@@ -17,5 +28,20 @@ class EditableEnumCell extends React.Component {
             displayOptions: this.props.options,
-            showOptions: false,
+            optionsDisplayed: false,
             selectedIndex: -1
         };
+        this.handleInputRef = (ref) => {
+            this.inputElement = ref;
+        };
+        this.handleCellRef = (ref) => {
+            this.cellElement = ref;
+        };
+        this.handleCellDoubleClick = (evt) => {
+            if (this.cellElement == null) {
+                return;
+            }
+            const focusable = this.cellElement.querySelector('.pt-editable-text');
+            if (focusable.focus != null) {
+                focusable.focus();
+            }
+        };
         this.onBlur = (evt) => {
@@ -30,63 +56,45 @@ let value = evt.currentTarget.value;
         };
-        this.displayOptions = () => {
-            const ulStyle = {
-                listStyleType: 'none',
-                paddingLeft: 0,
-                marginTop: 0,
-                marginBottom: 0
-            };
-            const divStyle = {
-                border: '1px solid black',
-                position: 'relative',
-                zIndex: 1000
-            };
-            const spanStyle = {
-                display: 'inline-block',
-                paddingLeft: '10px'
-            };
-            const getRowStyle = (num) => {
-                const selected = '#ee5';
-                const odd = '#fff';
-                const even = '#eee';
-                if (this.state.selectedIndex === num) {
-                    return selected;
-                }
-                else if (num % 2 === 0) {
-                    return even;
-                }
-                else {
-                    return odd;
-                }
-            };
-            return React.createElement("div", {style: divStyle}, 
-                React.createElement("ul", {style: ulStyle}, this.state.displayOptions.map((opt, idx) => {
-                    return React.createElement("li", {onClick: (evt) => this.onClick(evt, idx), key: idx, style: { backgroundColor: getRowStyle(idx) }}, 
-                        React.createElement("span", {style: spanStyle}, opt)
-                    );
-                }))
-            );
+        this.getOffset = (el) => {
+            const rect = el.getBoundingClientRect();
+            return { top: rect.top + rect.height, left: rect.left, width: rect.width };
         };
-        this.onClick = (evt, idx) => {
-            const value = this.props.options[idx];
-            const state = Object.assign(this.state, { selectedIndex: idx, value, showOptions: false });
-            this.props.onConfirm(value);
+        this.setCurrentIndex = (idx) => {
+            const state = Object.assign({}, this.state, { selectedIndex: idx });
             this.setState(state);
         };
-        // private highlightRow = (evt: React.SyntheticEvent<HTMLLIElement>, idx: number): void => {
-        //   const el = evt.currentTarget
-        //   el.style.backgroundColor = '#ee5'
-        //   const state = Object.assign({selectedIndex: idx}, this.state)
-        //   this.setState(state)
-        // }
+        this.getAutoCompleteProps = () => {
+            const offsets = this.getOffset(this.inputElement);
+            const props = {
+                selectedIndex: this.state.selectedIndex,
+                top: `${offsets.top}px`,
+                left: `${offsets.left}px`,
+                width: `${offsets.width}px`,
+                options: this.state.displayOptions,
+                onConfirm: this.props.onConfirm,
+                setCurrentIndex: this.setCurrentIndex
+            };
+            return props;
+        };
+        this.showOptions = () => {
+            this.containerEl = document.createElement('div');
+            document.body.appendChild(this.containerEl);
+            const props = this.getAutoCompleteProps();
+            react_dom_1.render(React.createElement(auto_complete_options_1.AutoCompleteDialog, __assign({}, props)), this.containerEl);
+        };
+        this.hideOptions = () => {
+            document.body.removeChild(this.containerEl);
+            this.containerEl.innerHTML = '';
+        };
         this.handleCursor = (evt) => {
-            const key = KeyCodes[evt.keyCode];
+            const key = evt.key ? evt.key : KeyCodes[evt.keyCode];
             const state = Object.assign({}, this.state);
             let newIndex = 0;
+            console.log('in handle cursor', key);
             switch (key) {
-                case 'ESC':
-                    state.showOptions = false;
+                case 'Escape':
+                    state.optionsDisplayed = false;
                     state.selectedIndex = -1;
                     evt.preventDefault();
                     break;
-                case 'UP':
+                case 'ArrowUp':
                     newIndex = state.selectedIndex - 1;
@@ -99,3 +107,3 @@ if (newIndex < -1) {
                     break;
-                case 'DOWN':
+                case 'ArrowDown':
                     newIndex = state.selectedIndex + 1;
@@ -108,3 +116,3 @@ if (newIndex >= this.props.options.length) {
                     break;
-                case 'ENTER':
+                case 'Enter':
                     if (state.selectedIndex > -1) {
@@ -117,2 +125,3 @@ state.value = this.props.options[state.selectedIndex];
             }
+            console.log('setting new state', state.selectedIndex);
             this.setState(state);
@@ -126,3 +135,3 @@ };
         };
-        this.toggleOptions = (evt) => {
+        this.handleChange = (evt) => {
             const value = evt.currentTarget.value;
@@ -134,9 +143,13 @@ const state = Object.assign({}, this.state);
                 state.displayOptions = displayOptions;
-                if (!this.state.showOptions && displayOptions.length > 0) {
-                    state.showOptions = true;
+                if (!state.optionsDisplayed) {
+                    this.showOptions();
+                    state.optionsDisplayed = true;
                 }
             }
             else {
-                state.showOptions = false;
-                state.selectedIndex = -1;
+                state.displayOptions = [];
+                if (state.optionsDisplayed) {
+                    this.hideOptions();
+                    state.optionsDisplayed = false;
+                }
             }
@@ -152,5 +165,7 @@ this.setState(state);
         const { className, value, intent, onConfirm, style, tooltip, options } = this.props;
-        return React.createElement("div", {className: classNames(className, core_1.Classes.intentClass(intent), 'bp-table-cell'), style: style, title: tooltip, onKeyDown: this.handleCursor}, 
-            React.createElement("input", {type: 'text', className: 'pt-input', value: this.state.value, onBlur: this.onBlur, onChange: this.toggleOptions}), 
-            this.state.showOptions ? this.displayOptions() : '');
+        return React.createElement("div", {className: classNames(className, core_1.Classes.intentClass(intent), 'bp-table-cell'), style: style, title: tooltip, onKeyDown: this.handleCursor, ref: this.handleCellRef}, 
+            React.createElement(draggable_1.Draggable, {onDoubleClick: this.handleCellDoubleClick}, 
+                React.createElement("input", {type: 'text', className: 'pt-editable-text bt-table-editable-name', value: this.state.value, onBlur: this.onBlur, ref: this.handleInputRef, onChange: this.handleChange})
+            )
+        );
     }
@@ -157,0 +172,0 @@ }

package.json

 {
   "name": "@scriptollc/enum-cell-editor",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "An enum select editor for blueprintjs/table",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

tsconfig.json

@@ -8,7 +8,9 @@ {
     "experimentalDecorators": true,
-    "outDir": "dist"
+    "outDir": "dist",
+    "noImplicitAny": true
   },
   "files": [
-    "index.tsx"
+    "index.tsx",
+    "auto-complete-options.tsx"
   ]
-}
+}

No alert changes

Improved metrics

Total package byte prevSize

18726

increased by43.94%

Number of package files

12

increased by20%

Lines of code

513

increased by47.84%

No dependency changes