Fix theme values being blocked by props set to undefined (#129)

* Fix theme values being blocked by props set to undefined

Closes #128.

* Remove an unnecessary type

Author: srmagura

CHANGELOG.md

@@ -1,3 +1,14 @@
+## 3.0.2
+
+### Bug Fixes
+
+-   Fix explicitly setting a `Skeleton` prop to undefined, like `<Skeleton highlightColor={undefined}>`, blocking style options from the `SkeletonTheme`
+    (#128)
+    -   If you were relying on this behavior to block values from the
+        `SkeletonTheme`, you can render a nested `SkeletonTheme` to override a
+        theme defined higher up in the component tree, OR explicitly set one or
+        more `Skeleton` props back to their default values e.g. `<Skeleton baseColor="#ebebeb" />`
+
 ## 3.0.1
 
 ### Bug Fixes

package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-loading-skeleton",
-    "version": "3.0.1",
+    "version": "3.0.2",
     "keywords": [
         "react",
         "loading",

src/Skeleton.tsx

@@ -62,10 +62,20 @@ export function Skeleton({
     circle = false,
 
     style: styleProp,
-    ...propsStyleOptions
+    ...originalPropsStyleOptions
 }: SkeletonProps): ReactElement {
     const contextStyleOptions = React.useContext(SkeletonThemeContext)
 
+    const propsStyleOptions = { ...originalPropsStyleOptions }
+
+    // DO NOT overwrite style options from the context if `propsStyleOptions`
+    // has properties explicity set to undefined
+    for (const [key, value] of Object.entries(originalPropsStyleOptions)) {
+        if (typeof value === 'undefined') {
+            delete propsStyleOptions[key as keyof typeof propsStyleOptions]
+        }
+    }
+
     // Props take priority over context
     const styleOptions = {
         ...contextStyleOptions,

src/__stories__/SkeletonTheme.stories.tsx

@@ -28,15 +28,13 @@ export const WithColors: React.VFC = () => (
 )
 
 export const NoBorderRadius: React.VFC = () => (
-    <div>
-        <SkeletonTheme
-            baseColor={blueBaseColor}
-            highlightColor={blueHighlightColor}
-            borderRadius="0"
-        >
-            <Post loading />
-        </SkeletonTheme>
-    </div>
+    <SkeletonTheme
+        baseColor={blueBaseColor}
+        highlightColor={blueHighlightColor}
+        borderRadius="0"
+    >
+        <Post loading />
+    </SkeletonTheme>
 )
 
 export const LightAndDarkThemes: React.VFC = () => {
@@ -75,3 +73,16 @@ export const LightAndDarkThemes: React.VFC = () => {
         </div>
     )
 }
+
+export const PropsExplicitlySetToUndefined: React.VFC = () => (
+    <div>
+        <p>
+            This is a test for{' '}
+            <a href="https://github.com/dvtng/react-loading-skeleton/issues/128">#128</a>.
+            The skeleton should have Christmas colors.
+        </p>
+        <SkeletonTheme baseColor="green" highlightColor="red">
+            <Skeleton baseColor={undefined} highlightColor={undefined} />
+        </SkeletonTheme>
+    </div>
+)

src/__tests__/SkeletonTheme.test.tsx

@@ -54,3 +54,16 @@ it('styles the skeleton through a portal', () => {
     expect(skeleton).toHaveStyle({ borderRadius: '1rem' })
     expect(skeleton.style.getPropertyValue('--base-color')).toBe('black')
 })
+
+// Regression test
+it('is not blocked by setting Skeleton props to undefined', () => {
+    render(
+        <SkeletonTheme baseColor="green" highlightColor="red">
+            <Skeleton baseColor={undefined} highlightColor={undefined} />
+        </SkeletonTheme>
+    )
+
+    const skeleton = getSkeleton()
+    expect(skeleton.style.getPropertyValue('--base-color')).toBe('green')
+    expect(skeleton.style.getPropertyValue('--highlight-color')).toBe('red')
+})