default propss

src/SideBar/SideBar.tsx

@@ -4,9 +4,9 @@ import './SideBar.css'
 import classNames from 'classnames'
 import { ISideBarProps } from '../type'
 
-const SideBar: React.FC<ISideBarProps> = props => {
+const SideBar: React.FC<ISideBarProps> = ({ type = 'dark', ...props }) => {
   return (
-    <div className={classNames('rce-sbar', props.type, props.data.className)}>
+    <div className={classNames('rce-sbar', type, props.data.className)}>
       <div className='rce-sbar-item'>{props.data?.top}</div>
       <div className='rce-sbar-item rce-sbar-item__center'>{props.data?.center}</div>
       <div className='rce-sbar-item'>{props.data?.bottom}</div>

src/SpotifyMessage/SpotifyMessage.tsx

@@ -2,7 +2,13 @@ import React from 'react'
 import { ISpotifyMessageProps } from '../type'
 import './SpotifyMessage.css'
 
-const SpotifyMessage: React.FC<ISpotifyMessageProps> = props => {
+const SpotifyMessage: React.FC<ISpotifyMessageProps> = ({
+  theme = 'black',
+  view = 'list',
+  width = 300,
+  height = 380,
+  ...props
+}) => {
   const toUrl = (): string => {
     var formBody: string[] | string = []
     for (var property in props) {
@@ -15,13 +21,13 @@ const SpotifyMessage: React.FC<ISpotifyMessageProps> = props => {
     return formBody.join('&')
   }
 
-  if (!props.uri) return null
+  if (props.uri) return null
   return (
     <div className='rce-mbox-spotify'>
       <iframe
         src={'https://open.spotify.com/embed?' + toUrl()}
-        width={props.width}
-        height={props.height}
+        width={width}
+        height={height}
         frameBorder='0'
         allowTransparency={true}
       ></iframe>

src/type.d.ts

@@ -925,7 +925,7 @@ export interface IDropdownItemIcon {
  * @type type The Side Bar's type and optional.
  * @type data The Side Bar's data is ISideBar and optional.
  */
-export interface ISideBarProps {
+export interface ISideBarProps extends ISideBar {
   type?: string
   data: ISideBar
 }