@startlibs/form 1.0.4 → 1.0.6

package/lib/index.js

@@ -37,6 +37,7 @@ import _possibleConstructorReturn from '@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
 import _inherits from '@babel/runtime/helpers/inherits';
 import _concat from 'lodash/fp/concat';
+import _last from 'lodash/fp/last';
 import _without from 'lodash/fp/without';
 import _isEqual from 'lodash/fp/isEqual';
 import ContentEditable from 'react-contenteditable';
@@ -51,7 +52,6 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _isBoolean from 'lodash/fp/isBoolean';
 import _negate from 'lodash/fp/negate';
 import _zipObject from 'lodash/fp/zipObject';
-import _last from 'lodash/fp/last';
 import _flatten from 'lodash/fp/flatten';
 import _fromPairs from 'lodash/fp/fromPairs';
 import _pick from 'lodash/fp/pick';
@@ -650,8 +650,9 @@ var formInput = function formInput(_ref) {
       return;
     }
 
-    setFormValue(transform(value, opts));
-    callIfFunction(onChange, callIfFunction(value, formValue), opts);
+    var transformedValue = transform(callIfFunction(value, formValue), opts);
+    setFormValue(transformedValue);
+    callIfFunction(onChange, transformedValue, opts);
   };
 
   var setValueFromEventTarget = function setValueFromEventTarget(e) {
@@ -1136,6 +1137,7 @@ var useTextInput = function useTextInput(_ref, ref) {
   var onFocus = _ref.onFocus,
       onBlur = _ref.onBlur,
       autoResize = _ref.autoResize,
+      autoSelectOnFocus = _ref.autoSelectOnFocus,
       constraint = _ref.constraint,
       pattern = _ref.pattern,
       path = _ref.path,
@@ -1146,7 +1148,7 @@ var useTextInput = function useTextInput(_ref, ref) {
       raw = _ref.raw,
       showValue = _ref.showValue,
       deleteTrailing = _ref.deleteTrailing,
-      rest = _objectWithoutProperties(_ref, ["onFocus", "onBlur", "autoResize", "constraint", "pattern", "path", "rawValue", "rawSetValue", "rawHasErrors", "transformOnBlur", "raw", "showValue", "deleteTrailing"]);
+      rest = _objectWithoutProperties(_ref, ["onFocus", "onBlur", "autoResize", "autoSelectOnFocus", "constraint", "pattern", "path", "rawValue", "rawSetValue", "rawHasErrors", "transformOnBlur", "raw", "showValue", "deleteTrailing"]);
 
   var _useInput = useInput$1(_objectSpread({
     path: path,
@@ -1168,6 +1170,15 @@ var useTextInput = function useTextInput(_ref, ref) {
 
   var handleOnFocus = function handleOnFocus(e) {
     setFocused(true);
+
+    if (!!autoSelectOnFocus && !!ref.current) {
+      setTimeout(function () {
+        var _ref$current;
+
+        return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.select();
+      }, 0);
+    }
+
     callIfFunction(onFocus, e);
   };
 
@@ -1190,6 +1201,15 @@ var useTextInput = function useTextInput(_ref, ref) {
       doAutoResize(ref.current);
     }
   }, []);
+  useEffect(function () {
+    if (!!autoSelectOnFocus && !!ref.current && document.activeElement === ref.current) {
+      setTimeout(function () {
+        var _ref$current2;
+
+        return (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.select();
+      }, 0);
+    }
+  }, [autoSelectOnFocus]);
 
   var handleChange = function handleChange(e) {
     if (autoResize) {
@@ -1312,6 +1332,7 @@ var TextInput = styled(forwardRef(function (_ref2, forwardedRef) {
       onImage = _ref2$onImage === void 0 ? false : _ref2$onImage,
       autoFocus = _ref2.autoFocus,
       noFocus = _ref2.noFocus,
+      autoSelectOnFocus = _ref2.autoSelectOnFocus,
       onFocus = _ref2.onFocus,
       onBlur = _ref2.onBlur,
       pattern = _ref2.pattern,
@@ -1321,7 +1342,7 @@ var TextInput = styled(forwardRef(function (_ref2, forwardedRef) {
       raw = _ref2.raw,
       _ref2$tabIndex = _ref2.tabIndex,
       tabIndex = _ref2$tabIndex === void 0 ? 1 : _ref2$tabIndex,
-      rest = _objectWithoutProperties(_ref2, ["showValue", "label", "type", "helpText", "descText", "bellowDescText", "mandatory", "isLoading", "locked", "textBoxBefore", "textBoxAfter", "className", "fieldClassName", "FieldType", "margin", "value", "setValue", "hasErrors", "textarea", "onImage", "autoFocus", "noFocus", "onFocus", "onBlur", "pattern", "autoResize", "constraint", "path", "raw", "tabIndex"]);
+      rest = _objectWithoutProperties(_ref2, ["showValue", "label", "type", "helpText", "descText", "bellowDescText", "mandatory", "isLoading", "locked", "textBoxBefore", "textBoxAfter", "className", "fieldClassName", "FieldType", "margin", "value", "setValue", "hasErrors", "textarea", "onImage", "autoFocus", "noFocus", "autoSelectOnFocus", "onFocus", "onBlur", "pattern", "autoResize", "constraint", "path", "raw", "tabIndex"]);
 
   var ref = useEnsureRef(forwardedRef);
 
@@ -1330,6 +1351,7 @@ var TextInput = styled(forwardRef(function (_ref2, forwardedRef) {
     onFocus: onFocus,
     onBlur: onBlur,
     autoResize: autoResize,
+    autoSelectOnFocus: autoSelectOnFocus,
     constraint: constraint,
     pattern: pattern,
     rawValue: rawValue,
@@ -2948,6 +2970,7 @@ var DropdownIconContainer = styled(Icon).withConfig({
 var focusBeforeLast = function focusBeforeLast(e) {
   if (e.target && e.target !== e.currentTarget) return;
   var el = [].slice.call(e.currentTarget.querySelectorAll('div[contenteditable]')).slice(-1)[0];
+  if (!el) return;
   el.focus();
 
   if (!el.firstChild) {
@@ -3089,7 +3112,7 @@ var AutoComplete = React.forwardRef(function (_ref, outerRef) {
   };
 
   var shouldFocusInput = useToggle();
-  var recentlyAdded = useRefState();
+  var recentlyAdded = useRefState(false);
   useEffect(function () {
     if (autoFocus) {
       focusInput();
@@ -3196,7 +3219,12 @@ var AutoComplete = React.forwardRef(function (_ref, outerRef) {
 
   useEffect(function () {
     if (!lastIsEditable) {
-      setFormValue(_without([_cancelEditable.current], formValue).concat(""));
+      if (recentlyAdded.get() !== _cancelEditable.current) {
+        setFormValue(_without([_cancelEditable.current], formValue).concat(""));
+      } else {
+        setLocalFormValue(_last(formValue) === "" ? formValue : formValue.concat(""));
+      }
+
       _cancelEditable.current = null;
     }
   }, [lastIsEditable]);
@@ -3259,8 +3287,8 @@ var AutoComplete = React.forwardRef(function (_ref, outerRef) {
 
   var addValue = function addValue(value, fromBlur) {
     var index = Math.max(lastIsEditable ? getValue().length - 1 : getValue().length, 0);
+    recentlyAdded.set((formValue === null || formValue === void 0 ? void 0 : formValue[index]) || "");
     setFormValue(_flow(_set([index], value), _concat(_concat.placeholder, "")));
-    recentlyAdded.set(true);
 
     if (!fromBlur) {
       focusInput();
@@ -3537,7 +3565,6 @@ 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.props.onChange(this.props.index, '');
@@ -4211,7 +4238,7 @@ var EditableBox = function EditableBox(_ref17) {
   var internalBox = React.useRef();
 
   var resetField = function resetField() {
-    return path ? form.resetField([].concat(path)) : form.resetForm();
+    return path ? form.resetField(_s.toPath(path)) : form.resetForm();
   };
 
   var _onClose = function _onClose(skipReset) {
@@ -4586,6 +4613,16 @@ CheckboxGroup.createCheckManager = function () {
   };
 };
 
+function _templateObject3$3() {
+  var data = _taggedTemplateLiteral(["\n      font-size: 13px;  \n    "]);
+
+  _templateObject3$3 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject2$3() {
   var data = _taggedTemplateLiteral(["\n    line-height: 42px;\n    width: 2.25rem;\n  "]);
 
@@ -4671,6 +4708,14 @@ var ClearButton = styled(Icon).withConfig({
   displayName: "DatePicker__ClearButton",
   componentId: "sc-1wo8j4d-12"
 })(["color:", ";font-size:12px;position:absolute;right:40px;bottom:0;transform:translateY(-50%);cursor:pointer;width:1.5rem;line-height:1.5rem;text-align:center;border-radius:50%;background:rgba(0,0,0,0.1);:hover{background:#f7d3d4;color:", ";}"], getColor('gray90'), getColor('alert'));
+var InputAndIconWrapper = styled.div.withConfig({
+  displayName: "DatePicker__InputAndIconWrapper",
+  componentId: "sc-1wo8j4d-13"
+})(["position:relative;"]);
+var ShortcutsWrapper = styled.div.withConfig({
+  displayName: "DatePicker__ShortcutsWrapper",
+  componentId: "sc-1wo8j4d-14"
+})(["display:flex;flex-wrap:wrap;gap:0.5rem;padding:0.5rem 0.25rem 0;color:", ";.link{cursor:pointer;font-weight:600;text-decoration:underline;", ":hover{color:", ";}", "}"], getColor('gray150'), media.mobile(_templateObject3$3()), getColor('main'), ifProp('disabled', css$1(["pointer-events:none;opacity:0.5;"])));
 
 var KeyMapper = function KeyMapper(level) {
   var upDownSpacing = level === CALENDAR_LEVEL_DAY ? 7 : 3;
@@ -4723,7 +4768,9 @@ var DatePicker = forwardRef(function (_ref, maybeInputRef) {
       raw = _ref.raw,
       disabled = _ref.disabled,
       level = _ref.level,
-      rest = _objectWithoutProperties(_ref, ["format", "min", "max", "weekStartsMonday", "label", "mandatory", "tabIndex", "helpText", "path", "timezoneOffset", "placeholder", "onBlur", "raw", "disabled", "level"]);
+      daysFromNowShortcuts = _ref.daysFromNowShortcuts,
+      monthsFromNowShortcuts = _ref.monthsFromNowShortcuts,
+      rest = _objectWithoutProperties(_ref, ["format", "min", "max", "weekStartsMonday", "label", "mandatory", "tabIndex", "helpText", "path", "timezoneOffset", "placeholder", "onBlur", "raw", "disabled", "level", "daysFromNowShortcuts", "monthsFromNowShortcuts"]);
 
   var inputRef = useEnsureRef(maybeInputRef);
 
@@ -4764,6 +4811,21 @@ var DatePicker = forwardRef(function (_ref, maybeInputRef) {
       }, 1);
     }
   }, [textValue]);
+  var isShortcutsEnabled = !!daysFromNowShortcuts && daysFromNowShortcuts.length > 0 || !!monthsFromNowShortcuts && monthsFromNowShortcuts.length > 0;
+
+  var setDateToNDaysFromNow = function setDateToNDaysFromNow(daysFromNow) {
+    var date = new Date(now());
+    date.setUTCDate(date.getUTCDate() + daysFromNow);
+    setFormValue(date.getTime());
+    updateText(date);
+  };
+
+  var setDateToNMonthsFromNow = function setDateToNMonthsFromNow(monthsFromNow) {
+    var date = new Date(now());
+    date.setUTCMonth(date.getUTCMonth() + monthsFromNow);
+    setFormValue(date.getTime());
+    updateText(date);
+  };
 
   var setTextValue = function setTextValue(textValue) {
     var value = formValue === -1 || isNaN(formValue) ? now() : new Date(Number(formValue));
@@ -4884,7 +4946,7 @@ var DatePicker = forwardRef(function (_ref, maybeInputRef) {
     onClick: onClick,
     onFocus: popup.open,
     onBlur: _onBlur
-  }, React.createElement(TextInput$1, {
+  }, React.createElement(InputAndIconWrapper, null, React.createElement(TextInput$1, {
     raw: true,
     disabled: disabled,
     type: getNumberInputType(),
@@ -4901,8 +4963,27 @@ var DatePicker = forwardRef(function (_ref, maybeInputRef) {
     onFocus: stopFocusPropagation,
     disabled: disabled,
     onClick: iconClick,
-    icon: "calendar"
-  }), popup.isOpen && React.createElement(DatePickerCalendar, {
+    icon: "calendar",
+    className: isShortcutsEnabled ? "hasShortcuts" : ""
+  })), (daysFromNowShortcuts === null || daysFromNowShortcuts === void 0 ? void 0 : daysFromNowShortcuts.length) > 0 || (monthsFromNowShortcuts === null || monthsFromNowShortcuts === void 0 ? void 0 : monthsFromNowShortcuts.length) > 0 ? React.createElement(ShortcutsWrapper, null, React.createElement("span", null, "Em:"), daysFromNowShortcuts === null || daysFromNowShortcuts === void 0 ? void 0 : daysFromNowShortcuts.map(function (daysFromNow) {
+    return React.createElement("span", {
+      class: "link",
+      key: "days-from-now-".concat(daysFromNow),
+      onClick: function onClick() {
+        return setDateToNDaysFromNow(daysFromNow);
+      },
+      disabled: disabled
+    }, daysFromNow, " dia", daysFromNow > 1 ? 's' : '');
+  }), monthsFromNowShortcuts === null || monthsFromNowShortcuts === void 0 ? void 0 : monthsFromNowShortcuts.map(function (monthsFromNow) {
+    return React.createElement("span", {
+      class: "link",
+      key: "months-from-now".concat(monthsFromNow),
+      onClick: function onClick() {
+        return setDateToNMonthsFromNow(monthsFromNow);
+      },
+      disabled: disabled
+    }, monthsFromNow, " ", monthsFromNow > 1 ? 'meses' : 'mês');
+  })) : null, popup.isOpen && React.createElement(DatePickerCalendar, {
     raw: true,
     min: min,
     max: max,
@@ -5656,7 +5737,7 @@ var RichTextContainer = styled.div.withConfig({
 var RichTextInput = styled.div.withConfig({
   displayName: "RichText__RichTextInput",
   componentId: "x8c1ig-2"
-})(["width:100%;font-size:14px;outline:0;outline:none;color:", ";background:white;min-height:", "px;outline:0;padding:0.7rem;overflow:auto;border-radius:5px;b,strong{font-weight:600;}&[contenteditable=true]:empty:before{content:attr(placeholder);color:rgba(0,0,0,0.3);}", ""], getColor('gray60'), function (props) {
+})(["font-size:14px;color:", ";background:white;border-radius:5px;> div{overflow:auto;width:100%;outline:none;min-height:", "px;padding:0.7rem;}b,strong{font-weight:600;}&[contenteditable=true]:empty:before{content:attr(placeholder);color:rgba(0,0,0,0.3);}", ""], getColor('gray60'), function (props) {
   return props.minHeight || 78;
 }, function (props) {
   return props.disabled && "\n    &[disabled] {\n      background: rgba(0, 0, 0, 0.075) !important;\n      opacity: 0.75 !important;\n    }\n  ";
@@ -5696,14 +5777,6 @@ var addHttp = function addHttp(s) {
   }
 };
 
-var getRightMostElement = function getRightMostElement(node) {
-  if (node.childNodes.length) {
-    return getRightMostElement(node.childNodes[node.childNodes.length - 1]);
-  } else {
-    return node;
-  }
-};
-
 var setSelectionRange$1 = function setSelectionRange(input, selectionStart) {
   var selectionEnd = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   if (!input) return;
@@ -5902,14 +5975,17 @@ var RichText = function RichText(_ref5) {
   }, raw),
       _useInput2 = _slicedToArray(_useInput, 3),
       formValue = _useInput2[0],
-      setFormValue = _useInput2[1],
+      _setFormValue = _useInput2[1],
       hasErrors = _useInput2[2].hasErrors; // const tempValue = useConstant(formValue)
 
 
-  var _useState = useState(formValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      tempValue = _useState2[0],
-      setTempValue = _useState2[1];
+  var tempValue = useRef(formValue);
+
+  var setFormValue = function setFormValue(v) {
+    tempValue.current = v;
+
+    _setFormValue(v);
+  };
 
   useEffect(function () {
     if (value === formValue && formValue !== tempValue) {
@@ -5917,10 +5993,10 @@ var RichText = function RichText(_ref5) {
     }
   }, [path]);
 
-  var _useState3 = useState({}),
-      _useState4 = _slicedToArray(_useState3, 2),
-      activatedTools = _useState4[0],
-      setActivatedTools = _useState4[1];
+  var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      activatedTools = _useState2[0],
+      setActivatedTools = _useState2[1];
 
   var validElements = useLazyConstant(function () {
     return ['br', 'div', 'p', 'span'].concat(_flatten(formatTools.map(function (tool) {
@@ -6044,6 +6120,7 @@ var RichText = function RichText(_ref5) {
         }
       }
 
+      tempValue.current = input.current.innerHTML;
       openDialog(nodeEl);
     } else {
       if (!isSelectionInsideRichTextEditor()) {
@@ -6177,67 +6254,24 @@ var RichText = function RichText(_ref5) {
   };
 
   var handleKeyDown = function handleKeyDown(e) {
-    if (linkJustCreated.current && e.which === 8) {
-      linkJustCreated.current.outerHTML = linkJustCreated.current.innerHTML;
-      input.current.normalize();
-      return;
-    }
-
-    commands.set([]);
-    linkJustCreated.set(null);
-    var selectedRange = window.getSelection().getRangeAt(0);
-    if (!selectedRange) return;
-    var possibleTextNode = selectedRange.startContainer;
-    var node = possibleTextNode.nodeType === Node.TEXT_NODE ? possibleTextNode.parentNode : possibleTextNode;
-    var parent = node.closest('a,.' + JS_CLASS);
-
-    if ((e.key === 'Enter' || e.which === 32) && parent && parent.matches('.' + JS_CLASS)) {
-      var range = document.createRange();
-      range.setEnd(selectedRange.startContainer, selectedRange.startOffset);
-      range.setStart(selectedRange.startContainer, 0);
-      traverseAndAddLink(range);
-    }
-  };
-
-  var traverseAndAddLink = function traverseAndAddLink(range) {
-    var match = range.toString().match(/[\s\t\n\r]([^\s\t\n\r]*)$/);
-
-    if (match) {
-      if (/^(https?:\/\/|www\.)/.test(match[1]) && linkRegex.test(match[1])) {
-        range.setStart(range.startContainer, match.index + 1);
-        range.endContainer.splitText(range.endContainer.textContent.length - 1);
-        var newNode = document.createElement('a');
-        newNode.href = match[1];
-        newNode.appendChild(range.extractContents());
-        range.insertNode(newNode);
-        window.getSelection().getRangeAt(0).setEndAfter(newNode);
-        window.getSelection().getRangeAt(0).setStartAfter(newNode);
-        linkJustCreated.set(newNode);
-      }
-    } else {
-      var previous = getPreviousElement(range.startContainer);
-
-      if (previous) {
-        range.setStart(previous, 0);
-        traverseAndAddLink(range);
-      }
-    }
-  };
-
-  var getPreviousElement = function getPreviousElement(node) {
-    if (node.previousSibling) {
-      var rightMost = getRightMostElement(node.previousSibling);
-
-      if (rightMost.nodeType === Node.TEXT_NODE) {
-        return rightMost;
-      } else {
-        return getPreviousElement(rightMost);
-      }
-    } else if (node.parentNode && node !== input.current) {
-      return getPreviousElement(node.parentNode);
-    } else {
-      return null;
-    }
+    /*if (linkJustCreated.current && e.which === 8) {
+       linkJustCreated.current.outerHTML = linkJustCreated.current.innerHTML
+       input.current.normalize()
+       return
+     }
+    commands.set([])
+     linkJustCreated.set(null)
+     const selectedRange = window.getSelection().getRangeAt(0)
+     if (!selectedRange) return
+     const possibleTextNode = selectedRange.startContainer
+     const node = possibleTextNode.nodeType === Node.TEXT_NODE ? possibleTextNode.parentNode : possibleTextNode
+    const parent = node.closest('a,.'+JS_CLASS)
+    if ((e.key === 'Enter' || e.which === 32) && parent && parent.matches('.'+JS_CLASS)) {
+       const range = document.createRange()
+       range.setEnd(selectedRange.startContainer, selectedRange.startOffset)
+       range.setStart(selectedRange.startContainer, 0)
+       traverseAndAddLink(range)
+    }*/
   };
 
   var handlePasteDrop = function handlePasteDrop(e) {
@@ -6324,8 +6358,10 @@ var RichText = function RichText(_ref5) {
       key: "separator-" + i
     }) : toolButton(t);
   })), React.createElement(RichTextInput, {
-    contentEditable: !disabled,
-    ref: input,
+    className: JS_CLASS
+  }, React.createElement(ContentEditable, {
+    innerRef: input,
+    html: tempValue.current,
     onBlur: onBlur,
     onClick: handleClick,
     onKeyUp: handleKeyUp,
@@ -6333,14 +6369,10 @@ var RichText = function RichText(_ref5) {
     onPaste: handlePasteDrop,
     onDrop: handlePasteDrop,
     tabIndex: tabIndex,
-    dangerouslySetInnerHTML: {
-      __html: tempValue
-    },
     disabled: disabled,
-    className: JS_CLASS,
     minHeight: minHeight,
     placeholder: placeholder
-  }), locked && React.createElement(InputIcon, {
+  })), locked && React.createElement(InputIcon, {
     icon: "lock"
   }), linkPopup.isOpen && React.createElement(EditLinkPopup, {
     input: input,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startlibs/form",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Startlibs Form",
   "main": "lib/index.js",
   "sideEffects": false,