Merge pull request #15 from Codebrahma/react-css-themr

React css themr - update components for applying custom themes.

package.json

@@ -50,6 +50,7 @@
     "file-loader": "^1.1.11",
     "prop-types": "^15.6.2",
     "react": "^16.3.2",
+    "react-css-themr": "^2.1.2",
     "react-dom": "^16.3.2"
   },
   "config": {

src/components/ChatList.js

@@ -1,12 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import ChatListItem from './ChatListItem'
+import defaultTheme from '../themes/_default_theme.scss'
+import { themr } from 'react-css-themr';
 
-const ChatList = (props) => (
-    <div className={props.chatListClass}>
+const ChatList = (props) => {
+    const { theme } = props;
+    return (
+    <div className={theme.userlist}>
       {
         props.userData.length === 0
-          ? <span className='no-user-found'>No User Found</span>
+          ? <span>No User Found</span>
           : props.userData.map(item => (
               <props.customChatListItem
                 key={item.id}
@@ -22,6 +26,7 @@ const ChatList = (props) => (
       }
     </div>
   )
+}
 
 ChatList.propTypes = {
   userData: PropTypes.array.isRequired,
@@ -35,4 +40,4 @@ ChatList.defaultProps = {
   chatListClass: "user-list",
 }
 
-export default ChatList
+export default themr('ThemedChatList', defaultTheme, { composeTheme : "softly" })(ChatList)

src/components/ChatListHeader.js

@@ -1,11 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { themr } from 'react-css-themr';
+import defaultTheme from '../themes/_default_theme.scss'
 
-const ChatListHeader = (props) => (
-  <div className={props.chatHeaderClass}>
-    <span>Active Users ({props.userData.filter(data => data.onlineStatus==="online").length})</span>
-  </div>
-)
+const ChatListHeader = (props) => {
+  const { theme } = props;
+  return (
+    <div className={theme.header}>
+      <span>Active Users ({props.userData.filter(data => data.onlineStatus === "online").length})</span>
+    </div>
+  )
+}
 
 ChatListHeader.propTypes = {
   userData: PropTypes.array.isRequired,
@@ -17,4 +22,4 @@ ChatListHeader.defaultProps = {
   chatHeaderClass: "chat-list-header",
 }
 
-export default ChatListHeader
+export default themr('ThemedChatListHeader', defaultTheme, { composeTheme : "softly" })(ChatListHeader)

src/components/ChatListItem.js

@@ -1,18 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import defaultTheme from '../themes/_default_theme.scss'
+import { themr } from 'react-css-themr';
 
 const ChatListItem = (props) => {
   const {lastSeen} = props
   const lastSeenTime = new Date() - lastSeen
   const lastSeenMinutes = Math.ceil(lastSeenTime / (1000*60))
   const lastSeenHours = Math.floor(lastSeenMinutes / 60)
   const lastSeenDays = Math.floor(lastSeenHours / 24)
-
+  const { theme } = props;
   return (
-    <div id={props.id} className="user-item" onClick={() => props.handleChatItemClick(props.id)}>
-      <img src={props.avatar} className="user-avatar" alt={props.name.slice(0,1).toUpperCase()}/>
-      <span className="user-name">{props.name}</span>
-      <span className={props.onlineStatus}>
+    <div id={props.id} className={theme.useritem} onClick={() => props.handleChatItemClick(props.id)}>
+      <img src={props.avatar} className={theme.useravatar} alt={props.name.slice(0,1).toUpperCase()}/>
+      <span className={theme.username}>{props.name}</span>
+      <span className={theme[props.onlineStatus]}>
         { props.onlineStatus === "offline" && (
             lastSeenDays > 0
               ? `${lastSeenDays}d`
@@ -36,4 +38,4 @@ ChatListItem.propTypes = {
   handleChatItemClick: PropTypes.func.isRequired
 }
 
-export default ChatListItem
+export default themr('ThemedChatListItem', defaultTheme, { composeTheme : "softly" })(ChatListItem)

src/components/ChatListProvider.js

@@ -1,15 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {
-    ChatListItem,
-  } from './index.js'
 import ChatListHeader from './ChatListHeader'
 import ChatList from './ChatList'
 import ChatListSearch from './ChatListSearch'
+import { themr } from 'react-css-themr';
+import defaultTheme from '../themes/_default_theme.scss'
 
 const ChatListProvider = (props) => {
+  const { theme } = props;
   return (
-    <div className={`${props.chatProviderClass} chat-list-wrapper`}>
+    <div className={theme.provider}>
       {
         props.children
           ? ( Array.isArray(props.children)
@@ -18,9 +18,9 @@ const ChatListProvider = (props) => {
             )
           : (
               <div>
-                <props.customHeader userData={props.userData} />
+                <props.customHeader userData={props.userData} {...props}/>
                 <props.customList userData={props.userData} {...props}/>
-                <props.customSearch handleSearchChange={props.handleSearchChange}/>
+                <props.customSearch handleSearchChange={props.handleSearchChange} />
               </div>
             )
       }
@@ -43,4 +43,4 @@ ChatListProvider.defaultProps = {
   customSearch: ChatListSearch,
 }
 
-export default ChatListProvider
+export default themr('ThemedChatListProvider',defaultTheme, { composeTheme : "softly" })(ChatListProvider)

src/components/ChatListSearch.js

@@ -1,16 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { themr } from 'react-css-themr';
+import defaultTheme from '../themes/_default_theme.scss'
 
-const ChatListSearch = (props) => (
-  <div className={props.chatSearchClass}>
+const ChatListSearch = (props) => {
+  const { theme } = props;
+  return (
+  <div className={theme.searchbox}>
     <input
-      className={`${props.chatSearchClass}-input`}
+      className={theme.input}
       type="text"
       placeholder="Search users..."
       onChange={props.handleSearchChange}
     />
   </div>
-)
+  )
+}
 
 ChatListSearch.propTypes = {
   handleSearchChange: PropTypes.func,
@@ -21,4 +26,4 @@ ChatListSearch.defaultProps = {
   chatSearchClass: "search-user",
 }
 
-export default ChatListSearch
+export default themr('ThemedChatSearch', defaultTheme, { composeTheme: "softly" })(ChatListSearch)

src/examples/chat-window/chat-window-styles.scss

@@ -1,9 +1,5 @@
-.chat-window-container {
-    max-width: 350px !important;
-    border-radius: 5px;
-    .animated {
-        animation-duration: 0.1s;
-    }
+
+
     .chat-window-header {
         background: $chat-header;
         padding: 5px 10px;
@@ -31,6 +27,9 @@
         height: 50vh;
         padding: 5px 10px;
         overflow-y: scroll;
+        .animated {
+            animation-duration: 0.1s;
+        }
         .message {
             margin: 4px;
             word-wrap: break-word;
@@ -90,5 +89,4 @@
                 }
             }
         }
-    }
-}
+    }

src/examples/chat-window/index.js

@@ -36,7 +36,6 @@ class WindowIndex extends Component {
       <ChatListProvider
         myData={this.props.myData}
         userData={this.props.userData}
-        chatProviderClass="chat-window-container animated fadeInUp"
         handleInputMessage={this.handleInputMessage}
         onSend={this.onSend}
         inputValue={this.state.inputMessage}

src/examples/demoPage/DemoChatListBox.js

@@ -23,8 +23,7 @@ class DemoChatList extends Component {
                 {
                     this.state.open &&
                     <div className="demo-chat-list animated slideInRight">
-                        <ChatListProvider
-                          userData={this.props.userData}
+                        <ChatListProvider userData={this.props.userData}
                           handleChatItemClick={(id) => this.props.updateChatWindow(id)}
                           handleSearchChange={this.props.handleSearchChange}
                         />

src/examples/demoPage/index.js

@@ -3,7 +3,7 @@ import styles from './demopageStyle.scss';
 import DemoPageNavbar from './DemoPageNavbar';
 import DemoChatListBox from './DemoChatListBox';
 import DemoChatWindowBox from './DemoChatWindowBox';
-import './resources/animate.css';
+import './resources/animate.scss';
 
 
 class DemoPage extends Component {