fix(Interface): extend svg attr (#172)

* fix(interface): extends from svg element

* fix(native interface): extend from svg native package

Author: danilowoz

README.md

@@ -115,11 +115,11 @@ const MyLoader = () => (
 
 Defaults to `true`. Opt-out of animations with `false`
 
-#### **`ariaLabel? string`** - _Web only_
+#### **`ariaLabel?: string`** - _Web only_
 
 Defaults to `Loading interface...`. It's used to describe what element it is. Use ''(empty string) to remove.
 
-#### **`baseUrl? string`** - _Web only_
+#### **`baseUrl?: string`** - _Web only_
 
 Required if you're using `<base url="/" />` document `<head/>`. 
 Defaults to an empty string. This prop is common used as: `<ContentLoader baseUrl={window.location.pathname} />` which will fill the SVG attribute with the relative path. Related [#93](https://github.com/danilowoz/react-content-loader/issues/93).
@@ -132,27 +132,27 @@ Defaults to `2`. Animation speed in seconds.
 
 Defaults to `0.25`. Interval of time between runs of the animation, as a fraction of the animation speed.
 
-#### **`className? string`**
+#### **`className?: string`**
 
 Defaults to an empty string. The classname will be set in the `<svg />` element.
 
-#### **`width? number`**
+#### **`width?: number`**
 
 Defaults to `400`. It will be set in the viewbox attr in the `<svg />`.
 
-#### **`height? number`**
+#### **`height?: number`**
 
 Defaults to `130`. It will be set in the viewbox attr in the `<svg />`.
 
 #### **`viewBox?: string`**
 
 Use viewBox props to set a custom viewBox value. Additionally, pass viewBox props as empty string to remove viewBox.
 
-#### **`gradientRatio? number`** - _Web only_
+#### **`gradientRatio?: number`** - _Web only_
 
 Defaults to `2`. Width of the animated gradient as a fraction of the viewbox width.
 
-#### **`rtl? boolean`**
+#### **`rtl?: boolean`**
 
 Defaults to `false`. Content right-to-left.
 

docs/index.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Facebook, Instagram } from '../src'
+import ContentLoader, { Facebook, Instagram } from '../src'
 
 export default {
   title: 'React Content Loader',
@@ -30,7 +30,7 @@ export const ariaLabel = () => {
 
 ariaLabel.story = {
   parameters: {
-    notes: `## \`ariaLabel? string | boolean\`
+    notes: `## \`ariaLabel?: string | boolean\`
 
     Defaults to \`Loading interface...\`. It's used to describe what element it is. Use \`false\` to remove.
     `,
@@ -46,13 +46,28 @@ export const baseURL = () => {
 
 baseURL.story = {
   parameters: {
-    notes: `## \`baseUrl? string\`
+    notes: `## \`baseUrl?: string\`
 
     Required if you're using \`<base url="/" />\` in the \`<head/>\`. Defaults to an empty string. This prop is common used as: \`<ContentLoader baseUrl={window.location.pathname} />\` which will fill the SVG attribute with the relative path. Related [#93](https://github.com/danilowoz/react-content-loader/issues/93).
     `,
   },
 }
 
+/**
+ * Children
+ */
+export const children = () => {
+  return (
+    <ContentLoader>
+      <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
+      <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
+      <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
+    </ContentLoader>
+  )
+}
+
+children.story = { parameters: { notes: `## \`children?: ReactNode\`` } }
+
 /**
  * Speed
  */
@@ -97,7 +112,7 @@ export const width = () => {
 
 width.story = {
   parameters: {
-    notes: `## \`width? number\`
+    notes: `## \`width?: number\`
 
     Defaults to \`400\`. It will be set in the viewbox attr in the \`<svg />\`.`,
   },
@@ -112,7 +127,7 @@ export const height = () => {
 
 height.story = {
   parameters: {
-    notes: `## \`height? number\`
+    notes: `## \`height?: number\`
 
     Defaults to \`130\`. It will be set in the viewbox attr in the \`<svg />\`.`,
   },
@@ -140,7 +155,7 @@ export const gradientRatio = () => {
 
 gradientRatio.story = {
   parameters: {
-    notes: `## \`gradientRatio? number\`
+    notes: `## \`gradientRatio?: number\`
 
     Defaults to \`2\`. Width of the animated gradient as a fraction of the viewbox width.`,
   },
@@ -155,7 +170,7 @@ export const RTL = () => {
 
 RTL.story = {
   parameters: {
-    notes: `## \`rtl? boolean\`
+    notes: `## \`rtl?: boolean\`
 
     Defaults to \`false\`. Content right-to-left.`,
   },
@@ -239,15 +254,15 @@ uniqueKey.story = {
 /**
  * View box
  */
-// export const viewBox = () => {
-//   return <Facebook viewBox="" />
-// }
+export const viewBox = () => {
+  return <Facebook viewBox="" />
+}
 
-// viewBox.story = {
-//   parameters: {
-//     notes: `## \`viewBox?: string\`
+viewBox.story = {
+  parameters: {
+    notes: `## \`viewBox?: string\`
 
-//     Use viewbox props to set viewbox value.
-//     Additionally, pass viewBox props as empty string to remove viewBox.`,
-//   },
-// }
+    Use viewbox props to set viewbox value.
+    Additionally, pass viewBox props as empty string to remove viewBox.`,
+  },
+}

package-lock.json

@@ -1,42 +1,19 @@
+import { SVGAttributes } from 'react'
+
 import ContentLoader from './Holder'
 
-export interface IContentLoaderProps {
+export interface IContentLoaderProps extends SVGAttributes<SVGElement> {
   animate?: boolean
   ariaLabel?: string
-  children?: React.ReactNode
   baseUrl?: string
-  className?: string
-  height?: number
-  preserveAspectRatio?:
-    | 'none'
-    | 'xMinYMin meet'
-    | 'xMidYMin meet'
-    | 'xMaxYMin meet'
-    | 'xMinYMid meet'
-    | 'xMidYMid meet'
-    | 'xMaxYMid meet'
-    | 'xMinYMax meet'
-    | 'xMidYMax meet'
-    | 'xMaxYMax meet'
-    | 'xMinYMin slice'
-    | 'xMidYMin slice'
-    | 'xMaxYMin slice'
-    | 'xMinYMid slice'
-    | 'xMidYMid slice'
-    | 'xMaxYMid slice'
-    | 'xMinYMax slice'
-    | 'xMidYMax slice'
-    | 'xMaxYMax slice'
   primaryColor?: string
   primaryOpacity?: number
   rtl?: boolean
   secondaryColor?: string
   secondaryOpacity?: number
   speed?: number
   interval?: number
-  style?: React.CSSProperties
   uniquekey?: string
-  width?: number
   gradientRatio?: number
 }
 

src/index.ts

@@ -90,7 +90,7 @@ class NativeSvg extends Component<RequiredIContentLoaderProps, State> {
     const offset3 = offsetValueBound(this.state.offset + 1)
 
     const rtlStyle = rtl ? { transform: [{ rotateY: '180deg' }] } : {}
-    const composedStyle = { ...style, ...rtlStyle }
+    const composedStyle = Object.assign(style, rtlStyle)
 
     // Remove unnecessary keys
     delete props.id

src/native/Svg.tsx

@@ -1,35 +1,11 @@
-import * as ReactNative from 'react-native'
+import { SvgProps } from 'react-native-svg'
 
-export interface IContentLoaderProps {
+export interface IContentLoaderProps extends SvgProps {
   animate?: boolean
   children?: React.ReactNode
-  className?: string
-  height?: number
-  preserveAspectRatio?:
-    | 'none'
-    | 'xMinYMin meet'
-    | 'xMidYMin meet'
-    | 'xMaxYMin meet'
-    | 'xMinYMid meet'
-    | 'xMidYMid meet'
-    | 'xMaxYMid meet'
-    | 'xMinYMax meet'
-    | 'xMidYMax meet'
-    | 'xMaxYMax meet'
-    | 'xMinYMin slice'
-    | 'xMidYMin slice'
-    | 'xMaxYMin slice'
-    | 'xMinYMid slice'
-    | 'xMidYMid slice'
-    | 'xMaxYMid slice'
-    | 'xMinYMax slice'
-    | 'xMidYMax slice'
-    | 'xMaxYMax slice'
   id?: string
   primaryColor?: string
   rtl?: boolean
   secondaryColor?: string
   speed?: number
-  style?: ReactNative.ViewStyle
-  width?: number
 }