feat: add components prop

+ Add new prop for injecting custom loading component
+ Update stories

Author: breadadams

packages/react/src/components/Card/CardEmpty.js

@@ -7,13 +7,13 @@ import { emptyStateAnimation, emptyStateImageAnimation } from './CardAnimation'
 import CardImage from './CardMedia/Image'
 import { Content } from './CardContent'
 import { GlobalContext } from '../../context/GlobalState'
-import { isLarge, isSmall } from '../../utils'
+import { classNames, isLarge, isSmall } from '../../utils'
 
 const Placeholder = styled.span.attrs({
-  className: 'microlink_card_placeholder'
+  className: classNames.placeholderContent
 })``
 
-const MediaEmpty = styled(CardImage)`
+const MediaEmpty = styled(CardImage).attrs({ className: classNames.placeholderMedia })`
   ${emptyStateImageAnimation};
 `
 

packages/react/src/index.js

@@ -32,14 +32,14 @@ import { useIntersectionObserver } from './utils/hooks'
 const Card = props => {
   const {
     className,
+    components,
     fetchData,
     lazy,
     loading,
     media: mediaProp,
     setData,
     url,
     apiKey, // destructuring to avoid pass it
-    placeholderComponent: CardEmpty,
     ...restProps
   } = props
 
@@ -54,6 +54,10 @@ const Card = props => {
     [mediaProps, props]
   )
 
+  const { PlaceholderComponent = CardEmpty } = components
+
+  const isLoading = isLoadingUndefined ? loadingState : loading
+
   const isLazyEnabled = useMemo(
     () => isLazySupported && (lazy === true || isObject(lazy)),
     [lazy]
@@ -69,6 +73,12 @@ const Card = props => {
     [isLazyEnabled, hasIntersected]
   )
 
+  const cardWrapClassName = useMemo(() => {
+    const base = `${classNames.main} ${isLoading ? classNames.placeholder : ''}`.trim()
+
+    return `${base} ${className}`.trim()
+  }, [className, isLoading])
+
   const toFetchData = useCallback(() => {
     if (canFetchData) {
       setLoading(true)
@@ -167,8 +177,6 @@ microlink.io/${error.code.toLowerCase()}
 
   useEffect(toFetchData, [url, setData, hasIntersected])
 
-  const isLoading = isLoadingUndefined ? loadingState : loading
-
   if (isError) {
     return (
       <a href={url} {...restProps}>
@@ -200,14 +208,14 @@ microlink.io/${error.code.toLowerCase()}
 
   return (
     <CardWrap
-      className={`${classNames.main} ${className}`.trim()}
+      className={cardWrapClassName}
       href={url}
       isLoading={isLoading}
       ref={cardRef}
       {...restProps}
     >
       {isLoading ? (
-        <CardEmpty />
+        <PlaceholderComponent />
       ) : (
         <>
           <CardMedia />
@@ -225,8 +233,8 @@ const Microlink = props => (
 Microlink.defaultProps = {
   className: '',
   apiKey: undefined,
-  placeholderComponent: CardEmpty,
   autoPlay: true,
+  components: { PlaceholderComponent: CardEmpty },
   controls: true,
   direction: 'ltr',
   lazy: true,
@@ -241,6 +249,7 @@ Microlink.defaultProps = {
 Microlink.propTypes = {
   apiKey: PropTypes.string,
   autoPlay: PropTypes.bool,
+  components: PropTypes.shape({ PlaceholderComponent: PropTypes.elementType }),
   contrast: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   controls: PropTypes.bool,
   direction: PropTypes.string,

packages/react/src/utils/index.js

@@ -114,6 +114,7 @@ const BASE_CLASSNAME = 'microlink_card'
 const CONTENT_BASE_CLASSNAME = `${BASE_CLASSNAME}__content`
 const MEDIA_BASE_CLASSNAME = `${BASE_CLASSNAME}__media`
 const CONTROLS_BASE_CLASSNAME = `${MEDIA_BASE_CLASSNAME}__controls`
+const PLACEHOLDER_BASE_CLASSNAME = `${BASE_CLASSNAME}__placeholder`
 
 export const classNames = {
   main: BASE_CLASSNAME,
@@ -137,5 +138,8 @@ export const classNames = {
   progressBar: `${CONTROLS_BASE_CLASSNAME}_progress_bar`,
   progressTime: `${CONTROLS_BASE_CLASSNAME}_progress_time`,
   spinner: `${CONTROLS_BASE_CLASSNAME}_spinner`,
-  iframe: `${BASE_CLASSNAME}__iframe`
+  iframe: `${BASE_CLASSNAME}__iframe`,
+  placeholder: PLACEHOLDER_BASE_CLASSNAME,
+  placeholderMedia: `${PLACEHOLDER_BASE_CLASSNAME}_media`,
+  placeholderContent: `${PLACEHOLDER_BASE_CLASSNAME}_content`
 }

packages/react/stories/index.js

@@ -1,5 +1,6 @@
 import 'unfetch/polyfill'
 
+import React from 'react'
 import { storiesOf } from '@storybook/react'
 
 import { urls, urlsVideo, urlsAudio, urlsIframe } from './data'
@@ -207,3 +208,13 @@ storiesOf('style', module)
       })
     )
   )
+
+const PlaceholderComponent = () => <strong style={{ height: '100%', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>loading...</strong>
+
+storiesOf('components', module)
+  .add('PlaceholderComponent', () =>
+    createStoryEntry({
+      loading: true,
+      fetchData: false,
+      components: { PlaceholderComponent }
+    }))