@planningcenter/doxy-web - npm Package Compare versions

Comparing version 2.2.0-rc.2 to 2.2.0-rc.3

dist/components/NumberSpinner/NumberSpinner.d.ts

@@ -7,6 +7,6 @@ import React from "react";
     name?: string;
-    onChange: (arg0: number) => void;
+    onChange: (newValue: number) => void;
     size?: "sm" | "md";
     value: number;
 }
-export declare const NumberSpinner: ({ disabled, min, max, name, onChange, size, value, }: NumberSpinnerProps) => React.JSX.Element;
+export declare const NumberSpinner: ({ disabled, min, max, name, onChange, size, value: originalValue, }: NumberSpinnerProps) => React.JSX.Element;

dist/index.es.js

@@ -1,2 +0,2 @@
-import React, { useState, forwardRef } from 'react';
+import React, { useRef, useEffect, useState, forwardRef } from 'react';
 import classnames from 'classnames';
@@ -281,2 +281,16 @@
 
+const useOutsideClick = callback => {
+  const ref = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [callback]);
+  return ref;
+};
+
 const NumberSpinner = _ref => {
@@ -290,3 +304,3 @@ let {
     size = "md",
-    value
+    value: originalValue
   } = _ref;
@@ -298,10 +312,13 @@ const [focus, setFocus] = useState(false);
   };
-  const handleDecrement = () => {
-    const newValue = value === min ? value : value - 1;
-    if (!!onChange) onChange(newValue);
+  const clampValue = newValue => {
+    if (newValue > max) return max;
+    if (newValue < min) return min;
+    return newValue;
   };
-  const handleIncrement = () => {
-    const newValue = value === max ? value : value + 1;
-    if (!!onChange) onChange(newValue);
-  };
+  let value = clampValue(originalValue);
+  const handleDecrement = () => onChange(clampValue(value - 1));
+  const handleIncrement = () => onChange(clampValue(value + 1));
+  const handleClickOutside = useOutsideClick(() => {
+    focus && setFocus(false);
+  });
   return /*#__PURE__*/React.createElement("div", {
@@ -312,3 +329,4 @@ "data-testid": "numberSpinner",
       focused: focus
-    })
+    }),
+    ref: handleClickOutside
   }, /*#__PURE__*/React.createElement("button", {
@@ -315,0 +333,0 @@ disabled: disabled || value === min,

dist/index.js

@@ -290,2 +290,16 @@ 'use strict';
 
+const useOutsideClick = callback => {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const handleClickOutside = event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [callback]);
+  return ref;
+};
+
 const NumberSpinner = _ref => {
@@ -299,3 +313,3 @@ let {
     size = "md",
-    value
+    value: originalValue
   } = _ref;
@@ -307,10 +321,13 @@ const [focus, setFocus] = React.useState(false);
   };
-  const handleDecrement = () => {
-    const newValue = value === min ? value : value - 1;
-    if (!!onChange) onChange(newValue);
+  const clampValue = newValue => {
+    if (newValue > max) return max;
+    if (newValue < min) return min;
+    return newValue;
   };
-  const handleIncrement = () => {
-    const newValue = value === max ? value : value + 1;
-    if (!!onChange) onChange(newValue);
-  };
+  let value = clampValue(originalValue);
+  const handleDecrement = () => onChange(clampValue(value - 1));
+  const handleIncrement = () => onChange(clampValue(value + 1));
+  const handleClickOutside = useOutsideClick(() => {
+    focus && setFocus(false);
+  });
   return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -321,3 +338,4 @@ "data-testid": "numberSpinner",
       focused: focus
-    })
+    }),
+    ref: handleClickOutside
   }, /*#__PURE__*/React__default["default"].createElement("button", {
@@ -324,0 +342,0 @@ disabled: disabled || value === min,

package.json

 {
   "name": "@planningcenter/doxy-web",
-  "version": "2.2.0-rc.2",
+  "version": "2.2.0-rc.3",
   "description": "Doxy for Church Center Web",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

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

590431

increased by0.79%

Lines of code

11700

increased by0.29%

No dependency changes