@startlibs/form 1.0.2 → 1.0.4

package/lib/index.js

@@ -36,7 +36,10 @@ import _createClass from '@babel/runtime/helpers/createClass';
 import _possibleConstructorReturn from '@babel/runtime/helpers/possibleConstructorReturn';
 import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
 import _inherits from '@babel/runtime/helpers/inherits';
-import _map from 'lodash/fp/map';
+import _concat from 'lodash/fp/concat';
+import _without from 'lodash/fp/without';
+import _isEqual from 'lodash/fp/isEqual';
+import ContentEditable from 'react-contenteditable';
 import _isObject from 'lodash/fp/isObject';
 import _unionBy from 'lodash/fp/unionBy';
 import _uniq from 'lodash/fp/uniq';
@@ -53,6 +56,7 @@ import _flatten from 'lodash/fp/flatten';
 import _fromPairs from 'lodash/fp/fromPairs';
 import _pick from 'lodash/fp/pick';
 import _toPairs from 'lodash/fp/toPairs';
+import _map from 'lodash/fp/map';
 import _entries from 'lodash/fp/entries';
 
 var getFormResponse = function getFormResponse(setter) {
@@ -2914,7 +2918,7 @@ var AutoCompletePlaceholder = styled.span.withConfig({
   displayName: "AutoComplete__AutoCompletePlaceholder",
   componentId: "g0526o-2"
 })(["position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;color:rgba(0,0,0,0.3);left:0.7rem;right:0.7rem;", ""], media.mobile(_templateObject3$2()));
-var AutoCompleteTextboxDiv = styled.div.withConfig({
+var AutoCompleteTextboxDiv = styled(ContentEditable).withConfig({
   displayName: "AutoComplete__AutoCompleteTextboxDiv",
   componentId: "g0526o-3"
 })(["display:inline-block;outline:0;outline:none;padding:0 1px;line-height:130%;"]);
@@ -2975,7 +2979,7 @@ var AutoComplete = React.forwardRef(function (_ref, outerRef) {
       title: label
     }, label, React.createElement(RemoveIcon, {
       icon: "x",
-      onClick: remove
+      onMouseUp: constrainEvent(remove)
     }));
   } : _ref$CompletedBox,
       _ref$EditableInput = _ref.EditableInput,
@@ -3037,6 +3041,8 @@ var AutoComplete = React.forwardRef(function (_ref, outerRef) {
   var hoverIndex = useToggle();
   var isLoading = useToggle();
 
+  var _cancelEditable = useRef();
+
   var _useInput = useInput$1({
     path: path,
     transform: transform,
@@ -3045,9 +3051,22 @@ var AutoComplete = React.forwardRef(function (_ref, outerRef) {
   }, raw),
       _useInput2 = _slicedToArray(_useInput, 3),
       formValue = _useInput2[0],
-      setFormValue = _useInput2[1],
+      _setFormValue = _useInput2[1],
       hasErrors = _useInput2[2].hasErrors;
 
+  var _useState = useState(Date.now()),
+      _useState2 = _slicedToArray(_useState, 2),
+      localFormValue = _useState2[0],
+      setLocalFormValue = _useState2[1];
+
+  var setFormValue = function setFormValue(updater) {
+    _setFormValue(updater);
+
+    setLocalFormValue(updater);
+  };
+
+  var lastIsEditable = _isEqual(localFormValue, formValue);
+
   var _useProvideErrors = useProvideErrors$1(),
       _useProvideErrors2 = _slicedToArray(_useProvideErrors, 2),
       ErrorProvider = _useProvideErrors2[0],
@@ -3056,16 +3075,14 @@ var AutoComplete = React.forwardRef(function (_ref, outerRef) {
   var hooksRef = useEnsureRef(outerRef);
   var ref = useRef();
   var queries = useRefState([]);
-  var editables = useRefState([(formValue || []).length]);
-  var listSize = useRefState(editables.get()[0]);
   var suggestionsFetchCache = useRefState({});
   var suggestionsLabelMapCache = useRefState({});
   var lastSuggestionQuery = useRefState('');
 
-  var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      autoCompleteList = _useState2[0],
-      setAutoCompleteList = _useState2[1];
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      autoCompleteList = _useState4[0],
+      setAutoCompleteList = _useState4[1];
 
   var getValue = function getValue() {
     return formValue || [];
@@ -3092,12 +3109,8 @@ var AutoComplete = React.forwardRef(function (_ref, outerRef) {
     });
   }, [shouldFocusInput.isOpen]);
 
-  var lastIsEditable = function lastIsEditable() {
-    return Math.max.apply(0, editables.get()) === (formValue || ['']).length - 1;
-  };
-
   var editableIsEmpty = function editableIsEmpty() {
-    return !lastIsEditable() || lastIsEditable() && !formValue[formValue.length - 1];
+    return !lastIsEditable || lastIsEditable && !formValue[formValue.length - 1];
   };
 
   var ignoreCaseIfNeeded = function ignoreCaseIfNeeded(s) {
@@ -3113,7 +3126,7 @@ var AutoComplete = React.forwardRef(function (_ref, outerRef) {
       queries.set([value]);
 
       var removeEditable = function removeEditable(list) {
-        return lastIsEditable() ? list.slice(0, -1) : list;
+        return lastIsEditable ? list.slice(0, -1) : list;
       };
 
       return isLoading.wait(Promise.resolve(fetchSuggestions(ignoreCaseIfNeeded(value))).then(function (list) {
@@ -3182,23 +3195,13 @@ var AutoComplete = React.forwardRef(function (_ref, outerRef) {
   };
 
   useEffect(function () {
-    var newValue = formValue || [];
-
-    if (newValue.length !== listSize.get()) {
-      editables.set(_flow(_map(function (i) {
-        return newValue.indexOf(getValue()[i]);
-      }), _filter(function (_) {
-        return _ >= 0;
-      })));
-
-      if (!editables.get().length) {
-        editables.set([newValue.length]);
-      }
-
-      focusInput();
+    if (!lastIsEditable) {
+      setFormValue(_without([_cancelEditable.current], formValue).concat(""));
+      _cancelEditable.current = null;
     }
-
-    refreshSuggestions(lastIsEditable() ? getValue().slice(-1)[0] : '');
+  }, [lastIsEditable]);
+  useEffect(function () {
+    refreshSuggestions(lastIsEditable ? getValue().slice(-1)[0] : '');
 
     if (recentlyAdded.get()) {
       recentlyAdded.set(false);
@@ -3251,20 +3254,12 @@ var AutoComplete = React.forwardRef(function (_ref, outerRef) {
 
   var onChange = function onChange(index, value) {
     errorUtils.clearErrors();
-
-    var newValue = _s.set([index], value, getValue());
-
-    listSize.set(newValue.length);
-    setFormValue(newValue);
+    setFormValue(_s.set([index], value));
   };
 
   var addValue = function addValue(value, fromBlur) {
-    var index = Math.max(lastIsEditable() ? getValue().length - 1 : getValue().length, 0);
-    editables.set(_flow(_filter(function (_) {
-      return _ !== index;
-    }), _s.concat([index + 1])));
-    setFormValue(_s.set(index, value, getValue()));
-    listSize.set(index);
+    var index = Math.max(lastIsEditable ? getValue().length - 1 : getValue().length, 0);
+    setFormValue(_flow(_set([index], value), _concat(_concat.placeholder, "")));
     recentlyAdded.set(true);
 
     if (!fromBlur) {
@@ -3272,17 +3267,10 @@ var AutoComplete = React.forwardRef(function (_ref, outerRef) {
     }
   };
 
-  var _remove = function remove(index) {
-    editables.set(_map(function (_) {
-      return _ >= index ? _ - 1 : 1;
-    }));
-
-    var newList = _s.unset(index, getValue()).filter(function (_) {
+  var remove = function remove(index) {
+    setFormValue(_flow(_s.unset(index), _filter(function (_) {
       return _ !== undefined;
-    });
-
-    listSize.set(newList.length);
-    setFormValue(newList);
+    })));
     focusInput();
   };
 
@@ -3290,7 +3278,7 @@ var AutoComplete = React.forwardRef(function (_ref, outerRef) {
     autoCompleteBox.close();
     var v = getValue().slice(-1)[0];
 
-    if (lastIsEditable()) {
+    if (lastIsEditable) {
       var _validation2 = validation(v),
           errors = _validation2.errors;
 
@@ -3314,7 +3302,7 @@ var AutoComplete = React.forwardRef(function (_ref, outerRef) {
     return {
       addValue: addValue,
       confirm: confirm,
-      remove: _remove
+      remove: remove
     };
   }, [formValue]);
   var validValue = formValue || [''];
@@ -3328,17 +3316,14 @@ var AutoComplete = React.forwardRef(function (_ref, outerRef) {
     var label = getLabel(value);
     var uid = uniqueKeyLabel[label] = (uniqueKeyLabel[label] || 0) + 1;
     return label + uid;
-  }; // console.log(formValue)
-
-
-  var valueWithEditable = lastIsEditable() ? validValue : validValue.concat('');
+  };
 
   var tryOpenSuggestions = function tryOpenSuggestions(e) {
     if (autoCompleteBox.get()) {
       stopPropagation(onBlur)(e);
     } else {
       errorUtils.clearErrors();
-      refreshSuggestions(lastIsEditable() ? getValue().slice(-1)[0] : '', false, true);
+      refreshSuggestions(lastIsEditable ? getValue().slice(-1)[0] : '', false, true);
       focusInput();
     }
   };
@@ -3358,28 +3343,27 @@ var AutoComplete = React.forwardRef(function (_ref, outerRef) {
     },
     focused: autoCompleteBox.isOpen,
     withDropdown: withDropdown
-  }, React.createElement("span", null, "\u200B"), valueWithEditable.map(function (v, i) {
-    return editables.get().indexOf(i) >= 0 ? React.createElement(AutoCompleteTextbox, {
+  }, React.createElement("span", null, "\u200B"), validValue.map(function (v, i) {
+    return React.createElement(ValueItem, {
       value: v,
       index: i,
+      cancelEditable: function cancelEditable(v) {
+        _cancelEditable.current = v;
+      },
+      isEditable: lastIsEditable && validValue.length === i + 1,
       confirmKeys: confirmKeys,
       confirmIfValueKeys: confirmIfValueKeys,
       deleteOnBackspace: deleteOnBackspace,
       EditableInput: EditableInput,
-      key: '$$editable$$' + i,
+      key: lastIsEditable && validValue.length === i + 1 ? '$$editable$$' : _getUniqueKey(v),
       onChange: onChange,
-      remove: _remove,
+      remove: remove,
       confirm: confirm,
+      getLabel: getLabel,
       tabIndex: tabIndex,
       confirmIfNew: confirmIfNew,
-      confirmIfNewKeys: confirmIfNewKeys
-    }) : React.createElement(CompletedBox, {
-      key: _getUniqueKey(v),
-      label: getLabel(v),
-      value: v,
-      remove: function remove() {
-        return _remove(i);
-      }
+      confirmIfNewKeys: confirmIfNewKeys,
+      CompletedBox: CompletedBox
     });
   }), React.createElement("span", null, "\u200B"), (!formValue || !formValue.join('')) && placeholder && React.createElement(AutoCompletePlaceholder, {
     onClick: function onClick(e) {
@@ -3389,12 +3373,10 @@ var AutoComplete = React.forwardRef(function (_ref, outerRef) {
     onClick: tryOpenSuggestions
   }, React.createElement(Icon, {
     icon: "arrow-down"
-  })), autoCompleteBox.isOpen !== false && !errorUtils.errors.length && autoCompleteList.length > 0 && React.createElement(AutoCompleteMenu, {
+  }))), autoCompleteBox.isOpen !== false && !errorUtils.errors.length && autoCompleteList.length > 0 && React.createElement(AutoCompleteMenu, {
     hoverIndex: hoverIndex.isOpen,
     autoHover: autoSelect,
-    onClick: function onClick(e) {
-      return e.preventDefault();
-    },
+    onClick: constrainEvent(),
     onHover: hoverIndex.openWith,
     my: "top left",
     at: "bottom left",
@@ -3411,7 +3393,7 @@ var AutoComplete = React.forwardRef(function (_ref, outerRef) {
         return addValue(value);
       }
     });
-  }))), React.createElement(ErrorProvider, {
+  })), React.createElement(ErrorProvider, {
     value: errorUtils
   }, React.createElement(AutoCompleteError, null)));
   return withoutField ? input : React.createElement(Field$1, {
@@ -3437,6 +3419,39 @@ var cleanText = function cleanText(text) {
   return clean.trim() ? clean : '';
 };
 
+var ValueItem = function ValueItem(_ref3) {
+  var CompletedBox = _ref3.CompletedBox,
+      isEditable = _ref3.isEditable,
+      getLabel = _ref3.getLabel,
+      cancelEditable = _ref3.cancelEditable,
+      value = _ref3.value,
+      _remove = _ref3.remove,
+      index = _ref3.index,
+      props = _objectWithoutProperties(_ref3, ["CompletedBox", "isEditable", "getLabel", "cancelEditable", "value", "remove", "index"]);
+
+  var isEditing = useToggle(isEditable);
+  var valueRef = useRef(value);
+  valueRef.current = value;
+  useEffect(function () {
+    return function () {
+      if (isEditing.isOpen) {
+        cancelEditable(valueRef.current);
+      }
+    };
+  }, []);
+  return isEditing.isOpen ? React.createElement(AutoCompleteTextbox, _extends({}, props, {
+    value: value,
+    index: index,
+    remove: _remove
+  })) : React.createElement(CompletedBox, {
+    label: getLabel(value),
+    value: value,
+    remove: function remove() {
+      return _remove(index);
+    }
+  });
+};
+
 var AutoCompleteTextbox =
 /*#__PURE__*/
 function (_React$Component) {
@@ -3483,7 +3498,17 @@ function (_React$Component) {
 
           _this.props.confirm(_this.props.index, _this.props.value);
         }
-      } else if (e.key === 'Backspace' && _this.props.deleteOnBackspace && (range.collapsed && range.startOffset === 0 || e.target.textContent === "\u200B")) {
+      } else if (e.key === 'Backspace' && _this.props.deleteOnBackspace) {
+        if (e.target.textContent !== "\u200B" || !range.collapsed) {
+          if (range.startContainer.previousSibling) {
+            if (range.startContainer.previousSibling.textContent.length) {
+              return;
+            }
+          } else if (range.startOffset > 0) {
+            return;
+          }
+        }
+
         e.preventDefault();
 
         _this.deletePrev();
@@ -3491,7 +3516,7 @@ function (_React$Component) {
     };
 
     _this.onChange = function (evt) {
-      _this.props.onChange(_this.props.index, cleanText(evt.target.innerText));
+      _this.props.onChange(_this.props.index, cleanText(evt.target.value));
     };
 
     _this.onPaste = function (ev) {
@@ -3512,9 +3537,10 @@ function (_React$Component) {
       setTimeout(function () {
         return window.dispatchEvent(event);
       }, 1);
+      console.log(this.el, this.el.innerHTML);
 
       if (this.el.innerHTML === '<br>' || !this.el.innerHTML) {
-        this.el.innerHTML = "\u200B";
+        this.props.onChange(this.props.index, '');
       }
 
       return nextProps.value !== cleanText(this.el.innerText) || !!Object.keys(nextProps).find(function (k) {
@@ -3533,16 +3559,6 @@ function (_React$Component) {
         setSelectionRange(this.el.firstChild || this.el, this.el.textContent.length + 1);
       }
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.el.addEventListener("textinput", this.onChange);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.el.removeEventListener("textinput", this.onChange);
-    }
   }, {
     key: "render",
     value: function render() {
@@ -3561,22 +3577,20 @@ function (_React$Component) {
 
       var valueOrBlank =
       /*android fix, not needed? value || */
-      "\u200B";
+      _isString(value) && value ? value : "\u200B";
 
       var props = _objectSpread({
-        ref: function ref(_ref3) {
-          return _this3.el = _ref3;
+        innerRef: function innerRef(ref) {
+          return _this3.el = ref;
         },
-        contentEditable: true,
-        onInput: this.onChange,
         onKeyDown: this.onKeyDown,
         onPaste: this.onPaste,
         value: value,
         index: index,
-        dangerouslySetInnerHTML: {
-          __html: valueOrBlank.replace(/\s/, '&nbsp;')
-        }
-      }, rest);
+        html: valueOrBlank.replace(/\s/, '&nbsp;')
+      }, rest, {
+        onChange: this.onChange
+      });
 
       return typeof EditableInput === 'function' ? EditableInput(props) : React.createElement(EditableInput, props);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startlibs/form",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Startlibs Form",
   "main": "lib/index.js",
   "sideEffects": false,
@@ -12,6 +12,7 @@
     "lodash": "*",
     "polished": "^1.1.3",
     "react": "*",
+    "react-contenteditable": "3.3.7",
     "react-dom": "*",
     "react-window": "*",
     "styled-components": "^5.2.0"