@onereach/ui-components 4.6.0 → 4.6.1-beta.2762.0

package/src/utils/functions/dom.ts

@@ -1,4 +1,5 @@
-import _ from 'lodash';
+import isElement from 'lodash/isElement';
+import get from 'lodash/get';
 
 const WINDOW = typeof window !== 'undefined' ? window : null;
 
@@ -16,9 +17,10 @@ export const requestAF = (
   (WINDOW as any)?.oRequestAnimationFrame ||
   // Fallback, but not a true polyfill
   // Only needed for Opera Mini
-  ((cb: ()=> void) => setTimeout(cb, 16))
+  ((cb: () => void) => setTimeout(cb, 16))
 ).bind(WINDOW);
 
+// eslint-disable-next-line no-unsafe-optional-chaining
 export const cancelAF = (WINDOW?.cancelAnimationFrame || (WINDOW as any)?.mozCancelAnimationFrame).bind(WINDOW);
 
 // Remove a node from DOM
@@ -26,7 +28,7 @@ export const removeNode = (el: HTMLElement): void => { el && el.parentNode && el
 
 // Determine if an HTML element is visible - Faster than CSS check
 export const isVisible = (el: HTMLElement): boolean => {
-  if (!_.isElement(el) || !el.parentNode || !contains(document.body, el)) {
+  if (!isElement(el) || !el.parentNode || !contains(document.body, el)) {
     // Note this can fail for shadow dom elements since they
     // are not a direct descendant of document.body
     return false;
@@ -47,20 +49,20 @@ export const isVisible = (el: HTMLElement): boolean => {
 // Cause/wait-for an element to reflow its content (adjusting its height/width)
 export const reflow = (el: HTMLElement): number | null => {
   // Requesting an elements offsetHeight will trigger a reflow of the element content
-  return _.get(el, ['offsetHeight'], null);
+  return get(el, ['offsetHeight'], null);
 };
 
 // Select all elements matching selector. Returns `[]` if none found
 export const selectAll = (selector: string, root?: HTMLElement | undefined): Element[] =>
-  [...(root && _.isElement(root) ? root : document).querySelectorAll(selector)];
+  [...(root && isElement(root) ? root : document).querySelectorAll(selector)];
 
 // Select a single element, returns `null` if not found
 export const select = (selector: string, root?: HTMLElement | undefined): Element | null =>
-  (root && _.isElement(root) ? root : document).querySelector(selector) || null;
+  (root && isElement(root) ? root : document).querySelector(selector) || null;
 
 // Returns true if the parent element contains the child element
 export const contains = (parent: HTMLElement, child: HTMLElement): boolean =>
-  parent && _.isFunction(parent.contains) ? parent.contains(child) : false;
+  parent && typeof parent.contains === 'function' ? parent.contains(child) : false;
 
 // Get an element given an ID
 export const getById = (id: string): HTMLElement | null =>
@@ -70,7 +72,7 @@ export const getById = (id: string): HTMLElement | null =>
 export const addClass = (el: HTMLElement, className: string): void => {
   // We are checking for `el.classList` existence here since IE 11
   // returns `undefined` for some elements (e.g. SVG elements)
-  if (className && _.isElement(el) && el.classList) {
+  if (className && isElement(el) && el.classList) {
     el.classList.add(className);
   }
 };
@@ -79,51 +81,51 @@ export const addClass = (el: HTMLElement, className: string): void => {
 export const removeClass = (el: HTMLElement, className: string): void => {
   // We are checking for `el.classList` existence here since IE 11
   // returns `undefined` for some elements (e.g. SVG elements)
-  if (className && _.isElement(el) && el.classList) el.classList.remove(className);
+  if (className && isElement(el) && el.classList) el.classList.remove(className);
 };
 
 // Test if an element has a class
 export const hasClass = (el: HTMLElement, className: string): boolean => {
   // We are checking for `el.classList` existence here since IE 11
   // returns `undefined` for some elements (e.g. SVG elements)
-  if (className && _.isElement(el) && el.classList) return el.classList.contains(className);
+  if (className && isElement(el) && el.classList) return el.classList.contains(className);
 
   return false;
 };
 
 // Set an attribute on an element
 export const setAttr = (el: HTMLElement, attr: string, value: any): void => {
-  if (attr && _.isElement(el)) {
+  if (attr && isElement(el)) {
     el.setAttribute(attr, value);
   }
 };
 
 // Remove an attribute from an element
 export const removeAttr = (el: HTMLElement, attr: string): void => {
-  if (attr && _.isElement(el)) {
+  if (attr && isElement(el)) {
     el.removeAttribute(attr);
   }
 };
 
 // Get an attribute value from an element
 export const getAttr = (el: HTMLElement, attr: string): string | null =>
-  (attr && _.isElement(el) ? el.getAttribute(attr) : null);
+  (attr && isElement(el) ? el.getAttribute(attr) : null);
 
 // Determine if an attribute exists on an element
 // Returns `true` or `false`, or `null` if element not found
 export const hasAttr = (el: HTMLElement, attr: string): boolean | null =>
-  (attr && _.isElement(el) ? el.hasAttribute(attr) : null);
+  (attr && isElement(el) ? el.hasAttribute(attr) : null);
 
 // Set an style property on an element
 export const setStyle = (el: HTMLElement, prop: any, value: any): void => {
-  if (prop && _.isElement(el)) {
+  if (prop && isElement(el)) {
     el.style[prop] = value;
   }
 };
 
 // Remove an style property from an element
 export const removeStyle = (el: HTMLElement, prop: any): void => {
-  if (prop && _.isElement(el)) {
+  if (prop && isElement(el)) {
     el.style[prop] = '';
   }
 };
@@ -131,14 +133,14 @@ export const removeStyle = (el: HTMLElement, prop: any): void => {
 // Get an style property value from an element
 // Returns `null` if not found
 export const getStyle = (el: HTMLElement, prop: any): string | null =>
-  (prop && _.isElement(el) ? el.style[prop] || null : null);
+  (prop && isElement(el) ? el.style[prop] || null : null);
 
 // Return the Bounding Client Rect of an element
-export const getBCR = (el: HTMLElement): DOMRect | null => (_.isElement(el) ? el.getBoundingClientRect() : null);
+export const getBCR = (el: HTMLElement): DOMRect | null => (isElement(el) ? el.getBoundingClientRect() : null);
 
 // Get computed style object for an element
 export const getCS = (el: HTMLElement): CSSStyleDeclaration | Record<string, string> =>
-  _.get(WINDOW, 'getComputedStyle', null) && _.isElement(el)
+  get(WINDOW, 'getComputedStyle', null) && isElement(el)
     ? getComputedStyle(el)
     : {};
 
@@ -149,7 +151,7 @@ export const offset = (el: HTMLElement): { top: number; left: number; } => {
     left: 0,
   };
 
-  if (!_.isElement(el) || el.getClientRects().length === 0) {
+  if (!isElement(el) || el.getClientRects().length === 0) {
     return _offset;
   }
 
@@ -157,8 +159,8 @@ export const offset = (el: HTMLElement): { top: number; left: number; } => {
   if (bcr) {
     const win = el.ownerDocument.defaultView;
 
-    _offset.top = bcr.top + _.get(win, 'pageYOffset', 0);
-    _offset.left = bcr.left + _.get(win, 'pageXOffset', 0);
+    _offset.top = bcr.top + get(win, 'pageYOffset', 0);
+    _offset.left = bcr.left + get(win, 'pageXOffset', 0);
   }
 
   return _offset;
@@ -171,7 +173,7 @@ export const position = (el: HTMLElement): { top: number; left: number; } => {
     left: 0,
   };
 
-  if (!_.isElement(el)) {
+  if (!isElement(el)) {
     return _offset;
   }
 

package/src/utils/isEmpty.ts

@@ -0,0 +1 @@
+export const isEmpty = (val: any) => val == null || !(Object.keys(val) || val).length;