react-native-molecules 0.5.0-beta.4 → 0.5.0-beta.5

package/hooks/useWhatHasUpdated.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useMemo } from 'react';
+
+import useLatest from './useLatest';
+
+const map = new Map();
+
+export const whatHasUpdatedFactory = <T extends Record<string, unknown>>(
+    name: string,
+    prevObject: T,
+    { debug = false, useCached = false } = {},
+) => {
+    const getPrev = () => {
+        if (!map.has(name)) map.set(name, prevObject);
+        return useCached ? map.get(name) : prevObject;
+    };
+
+    const setPrev = (value: T) => {
+        if (useCached) map.set(name, value);
+        else prevObject = value;
+    };
+
+    return (nextObject: T) => {
+        const old = getPrev();
+        const changes = Object.keys({ ...nextObject, ...old }).reduce((all, key) => {
+            const newValue = nextObject?.[key];
+            const oldValue = old[key];
+            if (oldValue === newValue) return all;
+            return { ...all, [key]: { newValue, oldValue } };
+        }, {});
+
+        setPrev(nextObject);
+
+        if (!debug && !Object.keys(changes).length) return;
+        // eslint-disable-next-line no-console
+        console.log('🚨🕵️ UPDATED', name, changes);
+    };
+};
+
+export const useWhatHasUpdated = (name: string, props: Record<string, any>) => {
+    const argRef = useLatest({ name, props });
+    const checkFunc = useMemo(
+        () => whatHasUpdatedFactory(argRef.current.name, argRef.current.props),
+        [argRef],
+    );
+    useEffect(() => {
+        checkFunc(props);
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-molecules",
-    "version": "0.5.0-beta.4",
+    "version": "0.5.0-beta.5",
     "author": "Thet Aung <thetaung.dev@gmail.com>",
     "license": "MIT",
     "main": "index.ts",

package/styles/shadow.ts

@@ -8,7 +8,8 @@ export const inputRange: MD3Elevation[] = [0, 1, 2, 3, 4, 5];
 export const shadowHeight = [0, 1, 2, 4, 6, 8];
 export const shadowRadius = [0, 3, 6, 8, 10, 12];
 
-export default function shadow(elevation: number) {
+export default function shadow(_elevation: number) {
+    const elevation = typeof _elevation === 'number' ? (_elevation > 5 ? 5 : _elevation) : 0;
     return {
         shadowColor: MD3_SHADOW_COLOR,
         shadowOpacity: elevation ? MD3_SHADOW_OPACITY : 0,