@lumx/core 3.10.1-alpha.7 → 3.10.1-alpha.8

package/js/utils.ts

@@ -1,11 +1,25 @@
 import classNames from 'classnames';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import React from 'react';
 
-import type React from 'react';
+import isBoolean from 'lodash/isBoolean';
+import isEmpty from 'lodash/isEmpty';
+import kebabCase from 'lodash/kebabCase';
+import noop from 'lodash/noop';
 
-/** Transform camelCase to kebab-case */
-function camelToKebabCase(str: string): string {
-    return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-}
+/**
+ * Enhance isEmpty method to also works with numbers.
+ *
+ * @param  value The value to check.
+ * @return Whether the input value is empty or != 0.
+ */
+const _isEmpty = (value: any) => {
+    if (typeof value === 'number') {
+        return value === 0;
+    }
+
+    return isEmpty(value);
+};
 
 /**
  * Get the basic CSS class for the given type.
@@ -22,9 +36,9 @@ export function getBasicClass({
 }: {
     prefix: string;
     type: string;
-    value: string | number | boolean | undefined | null;
+    value: string | number | boolean | undefined;
 }): string {
-    if (typeof value === 'boolean') {
+    if (isBoolean(value)) {
         if (!value) {
             // False value should not return a class.
             return '';
@@ -32,13 +46,13 @@ export function getBasicClass({
         const booleanPrefixes = ['has', 'is'];
 
         if (booleanPrefixes.some((booleanPrefix) => type.toString().startsWith(booleanPrefix))) {
-            return `${prefix}--${camelToKebabCase(type)}`;
+            return `${prefix}--${kebabCase(type)}`;
         }
 
-        return `${prefix}--is-${camelToKebabCase(type)}`;
+        return `${prefix}--is-${kebabCase(type)}`;
     }
 
-    return `${prefix}--${camelToKebabCase(type)}-${value}`;
+    return `${prefix}--${kebabCase(type)}-${value}`;
 }
 
 /**
@@ -52,22 +66,14 @@ export function getBasicClass({
  *                be used in the classname to represent the value of the given prop.
  * @return All LumX basic CSS classes.
  */
-export function handleBasicClasses({
-    prefix,
-    ...props
-}: {
-    prefix: string;
-    [prop: string]: string | number | boolean | null | undefined;
-}): string {
+export function handleBasicClasses({ prefix, ...props }: { prefix: string; [prop: string]: any }): string {
     const otherClasses: any = {};
-    const propKeys = Object.keys(props);
-    if (propKeys.length > 1) {
-        for (const prop of propKeys) {
-            if (props[prop]) {
-                const className = getBasicClass({ prefix, type: prop, value: props[prop] });
-                otherClasses[className] = true;
-            }
-        }
+    if (!isEmpty(props)) {
+        Object.keys(props).forEach((prop) => {
+            otherClasses[getBasicClass({ prefix, type: prop, value: props[prop] })] = isBoolean(props[prop])
+                ? props[prop]
+                : !_isEmpty(props[prop]);
+        });
     }
 
     return classNames(prefix, otherClasses);
@@ -84,7 +90,7 @@ declare type SwipeDirection = 'none' | 'up' | 'down' | 'left' | 'right';
  * @param  handleSwipe Callback function.
  * @return Function to remove listeners.
  */
-export function detectSwipe(touchSurface: Element, handleSwipe?: (direction: SwipeDirection) => void) {
+export function detectSwipe(touchSurface: Element, handleSwipe: (direction: SwipeDirection) => void = noop) {
     let distX: number;
     let distY: number;
     let startX: number;
@@ -135,7 +141,7 @@ export function detectSwipe(touchSurface: Element, handleSwipe?: (direction: Swi
                 direction = distY < 0 ? 'up' : 'down';
             }
         }
-        handleSwipe?.(direction);
+        handleSwipe(direction);
         evt.preventDefault();
     };
 
@@ -162,8 +168,8 @@ function isPassiveEventAvailable() {
                 supportsPassiveOption = true;
             },
         });
-        window.addEventListener('testPassiveEventSupport', () => {}, opts);
-        window.removeEventListener('testPassiveEventSupport', () => {}, opts);
+        window.addEventListener('testPassiveEventSupport', noop, opts);
+        window.removeEventListener('testPassiveEventSupport', noop, opts);
     } catch (e) {
         // ignored
     }