react-polymorph - npm Package Compare versions

Comparing version 0.9.8-rc.19 to 0.9.8-rc.20

lib/components/FormField.js

@@ -166,4 +166,2 @@ "use strict";
   context: (0, _withTheme.createEmptyContext)(),
-  isShowingErrorOnFocus: true,
-  isShowingErrorOnHover: true,
   theme: null,
@@ -170,0 +168,0 @@ themeId: _.IDENTIFIERS.FORM_FIELD,

lib/components/Input.js

@@ -230,4 +230,2 @@ "use strict";
   error: '',
-  isShowingErrorOnFocus: true,
-  isShowingErrorOnHover: true,
   readOnly: false,
@@ -234,0 +232,0 @@ theme: null,

lib/skins/simple/FormFieldSkin.js

@@ -26,18 +26,17 @@ "use strict";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function FormFieldSkin(props) {
-  var updateOnRefChanges = (0, _hooks.manageRef)(props.formFieldRef);
-  var isFormFieldFocused = (0, _hooks.handleRefState)(props.formFieldRef, {
-    on: 'focus',
-    off: 'blur'
-  });
-  var isFormFieldHovered = (0, _hooks.handleRefState)(props.formFieldRef, {
-    on: 'mouseenter',
-    off: 'mouseleave'
-  });
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isFormFieldFocused = _useState2[0],
+      setIsFormFieldFocused = _useState2[1];
+
+  var setFormFieldRef = (0, _hooks.handleRefFocusState)(props.formFieldRef, setIsFormFieldFocused);
   var hasError = props.error != null;
@@ -47,4 +46,3 @@ return (
     _react["default"].createElement("div", {
-      className: (0, _classnames["default"])([props.className, props.theme[props.themeId].root, props.disabled ? props.theme[props.themeId].disabled : null, props.error ? props.theme[props.themeId].errored : null]),
-      style: props.themeVariables
+      className: (0, _classnames["default"])([props.className, props.theme[props.themeId].root, props.disabled ? props.theme[props.themeId].disabled : null, props.error ? props.theme[props.themeId].errored : null])
     }, props.label &&
@@ -60,7 +58,7 @@ /*#__PURE__*/
     _react["default"].createElement(_PopOver.PopOver, {
-      visible: props.isErrorShown === true || props.isErrorHidden !== true && hasError && (props.isShowingErrorOnFocus && isFormFieldFocused || props.isShowingErrorOnHover && isFormFieldHovered),
+      visible: props.isErrorShown || hasError && isFormFieldFocused && !props.isErrorHidden,
       content: props.error,
-      themeVariables: _objectSpread({
+      themeVariables: {
         '--rp-pop-over-bg-color': "var(".concat(_SimpleFormField.SimpleFormFieldVariables.errorColor)
-      }, props.themeVariables),
+      },
       placement: "bottom",
@@ -78,5 +76,5 @@ popperOptions: {
       className: props.theme[props.themeId].inputWrapper
-    }, props.render(updateOnRefChanges))))
+    }, props.render(setFormFieldRef))))
   );
 }
 //# sourceMappingURL=FormFieldSkin.js.map

lib/skins/simple/InputSkin.js

 "use strict";
 
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
@@ -10,3 +12,3 @@ value: true
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
@@ -19,2 +21,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -31,3 +37,3 @@
       }, (0, _props.pickDOMProps)(props), {
-        className: (0, _classnames["default"])([props.theme[props.themeId].input, props.disabled ? props.theme[props.themeId].disabled : null, !props.hideErrorState && (props.error || props.showErrorState) ? props.theme[props.themeId].errored : null])
+        className: (0, _classnames["default"])([props.theme[props.themeId].input, props.disabled ? props.theme[props.themeId].disabled : null, props.error || props.showErrorState ? props.theme[props.themeId].errored : null])
       }))
@@ -68,8 +74,5 @@ );
       error: props.error,
-      isShowingErrorOnHover: props.isShowingErrorOnHover,
-      isShowingErrorOnFocus: props.isShowingErrorOnFocus,
       formFieldRef: props.inputRef,
       theme: props.theme,
-      render: render,
-      themeVariables: props.themeVariables
+      render: render
     })
@@ -76,0 +79,0 @@ );

lib/skins/simple/PasswordInputSkin.js

 "use strict";
 
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
@@ -10,3 +12,3 @@ value: true
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
@@ -17,2 +19,4 @@ var _Input = require("../../components/Input");
 
+var _PopOver = require("../../components/PopOver");
+
 var _SimplePasswordInput = require("../../themes/simple/SimplePasswordInput");
@@ -22,2 +26,6 @@
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -31,2 +39,10 @@
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function getPopOverBgColorForState(state) {
@@ -51,2 +67,12 @@ switch (state) {
 var PasswordInputSkin = function PasswordInputSkin(props) {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hasInputFocus = _useState2[0],
+      setHasInputFocus = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isInputHovered = _useState4[0],
+      setIsInputHovered = _useState4[1];
+
   var className = props.className,
@@ -69,4 +95,2 @@ error = props.error,
   var hasTooltip = hasInitialValueChanged && tooltip != null;
-  var stateColor = getPopOverBgColorForState(state);
-  var isErrorState = state === _PasswordInput.PasswordInput.STATE.ERROR;
   return (
@@ -78,12 +102,35 @@ /*#__PURE__*/
     /*#__PURE__*/
+    _react["default"].createElement(_PopOver.PopOver, {
+      visible: hasTooltip && (isTooltipOpen || isShowingTooltipOnHover && isInputHovered || isShowingTooltipOnFocus && hasInputFocus),
+      content: tooltip,
+      themeVariables: {
+        '--rp-pop-over-bg-color': getPopOverBgColorForState(state)
+      },
+      placement: "bottom",
+      popperOptions: {
+        modifiers: [{
+          name: 'flip',
+          enabled: false
+        }]
+      },
+      duration: [300, 0]
+    },
+    /*#__PURE__*/
     _react["default"].createElement(_Input.Input, _extends({}, inputProps, {
-      error: hasTooltip ? tooltip : null,
-      showErrorState: hasTooltip && isErrorState,
-      hideErrorState: !isErrorState,
+      showErrorState: hasInitialValueChanged && state === _PasswordInput.PasswordInput.STATE.ERROR,
       value: value,
       type: "password",
-      themeVariables: {
-        '--rp-pop-over-bg-color': stateColor
+      onBlur: function onBlur() {
+        return setHasInputFocus(false);
+      },
+      onFocus: function onFocus() {
+        return setHasInputFocus(true);
+      },
+      onMouseEnter: function onMouseEnter() {
+        return setIsInputHovered(true);
+      },
+      onMouseOut: function onMouseOut() {
+        return setIsInputHovered(false);
       }
-    })),
+    }))),
     /*#__PURE__*/
@@ -90,0 +137,0 @@ _react["default"].createElement("div", {

lib/utils/hooks.js

@@ -7,4 +7,3 @@ "use strict";
 exports.useDebouncedValueChangedIndicator = useDebouncedValueChangedIndicator;
-exports.manageRef = manageRef;
-exports.handleRefState = handleRefState;
+exports.handleRefFocusState = handleRefFocusState;
 
@@ -43,54 +42,29 @@ var _react = require("react");
   return isDirty;
-}
-/**
- * Hook for setting a ref and re-rendering when the value changes
- * Inspired by https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780
- */
+} // Inspired by https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780
 
 
-function manageRef(ref) {
-  return (0, _react.useCallback)(function (node) {
-    ref.current = node;
-  }, []);
-}
-/**
- * Hook for handling the on/off state of events that
- * are toggle-able like "hovered" or "focused"
- */
-
-
-function handleRefState(ref, events) {
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isOn = _useState4[0],
-      setIsOn = _useState4[1];
-
-  var onListener = function onListener() {
-    return setIsOn(true);
+function handleRefFocusState(ref, setIsFocused) {
+  var focusListener = function focusListener() {
+    return setIsFocused(true);
   };
 
-  var offListener = function offListener() {
-    return setIsOn(false);
+  var blurListener = function blurListener() {
+    return setIsFocused(false);
   };
 
-  (0, _react.useEffect)(function () {
+  return (0, _react.useCallback)(function (node) {
     if (ref.current) {
       var current = ref.current;
-      current.addEventListener(events.on, onListener);
-      current.addEventListener(events.off, offListener);
-    } // Remove event listeners on component unmount
+      current.removeEventListener('focus', focusListener);
+      current.removeEventListener('blur', blurListener);
+    }
 
+    if (node) {
+      node.addEventListener('focus', focusListener);
+      node.addEventListener('blur', blurListener);
+    }
 
-    return function () {
-      if (ref.current) {
-        var _current = ref.current;
-
-        _current.removeEventListener(events.on, onListener);
-
-        _current.removeEventListener(events.off, offListener);
-      }
-    };
-  });
-  return isOn;
+    ref.current = node;
+  }, []);
 }
 //# sourceMappingURL=hooks.js.map

package.json

 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.8-rc.19",
+  "version": "0.9.8-rc.20",
   "scripts": {
@@ -6,0 +6,0 @@ "build": "cross-env yarn clean && yarn sass && yarn js",

No alert changes

Improved metrics

Total package byte prevSize

1301920

increased by0.18%

Lines of code

7723

increased by0.18%

No dependency changes