feat: add theme option (#18)

* add `theme` option * add actionColor
egoist · Jun 25, 2019 · f30e888 · f30e888
1 parent 934adeb
commit f30e888
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 2 deletions.
diff --git a/demo/Content.md b/demo/Content.md
@@ -88,6 +88,48 @@ createSnackbar('hello world', {
 
 <button @click="createConfirmSnackbar">Show message</button>
 
+Check out [the docs](/docs/interfaces/snackoptions.html#actions) for `actions` option.
+
+### Light theme
+
+```js
+import { createSnackbar } from '@egoist/snackbar'
+
+createSnackbar('light theme', {
+  theme: 'light'
+})
+```
+
+<button @click="createSnackbar('light theme', {
+theme: 'light'
+})">Show message</button>
+
+Check out [the docs](/docs/interfaces/snackoptions.html#theme) for `theme` option.
+
+### Custom theme
+
+```js
+import { createSnackbar } from '@egoist/snackbar'
+
+createSnackbar('light theme', {
+  theme: {
+    backgroundColor: 'magenta',
+    actionColor: 'cyan'
+  }
+})
+```
+
+<button @click="createSnackbar('light theme', {
+theme: {
+backgroundColor: 'magenta',
+actionColor: 'cyan'
+}
+})">Show message</button>
+
+Check out [all properties](/docs/interfaces/themerules.html) under the `theme` option.
+
+<!-- add content above -->
+
 <script>
 import { destroyAllSnackbars, createSnackbar } from '../src'
 

diff --git a/src/index.ts b/src/index.ts
@@ -46,20 +46,38 @@ export interface SnackOptions {
    * @default `center`
    */
   position?: Position
+  theme?: 'string' | ThemeRules
 }
 
 export interface SnackInstanceOptions {
   timeout: number
   actions: Action[]
   position: Position
+  theme: ThemeRules
 }
 
 export interface SnackResult {
   destroy: () => void
 }
 
+export interface ThemeRules {
+  backgroundColor?: string
+  textColor?: string
+  boxShadow?: string
+  actionColor?: string
+}
+
 let instances: Snackbar[] = []
 
+const themes: { [name: string]: ThemeRules } = {
+  light: {
+    backgroundColor: '#fff',
+    textColor: '#000',
+    actionColor: '#008000'
+  },
+  dark: {}
+}
+
 export class Snackbar {
   message: string
   options: SnackInstanceOptions
@@ -74,20 +92,26 @@ export class Snackbar {
     const {
       timeout = 0,
       actions = [{ text: 'dismiss', callback: () => this.destroy() }],
-      position = 'center'
+      position = 'center',
+      theme = 'dark'
     } = options
     this.message = message
     this.options = {
       timeout,
       actions,
-      position
+      position,
+      theme: typeof theme === 'string' ? themes[theme] : theme
     }
 
     this.wrapper = this.getWrapper(this.options.position)
     this.insert()
     instances.push(this)
   }
 
+  get theme() {
+    return this.options.theme
+  }
+
   getWrapper(position: Position): HTMLDivElement {
     let wrapper = document.querySelector(
       `.snackbars-${position}`
@@ -107,6 +131,17 @@ export class Snackbar {
     el.setAttribute('aria-atomic', 'true')
     el.setAttribute('aria-hidden', 'false')
 
+    const { backgroundColor, textColor, boxShadow, actionColor } = this.theme
+    if (backgroundColor) {
+      el.style.backgroundColor = backgroundColor
+    }
+    if (textColor) {
+      el.style.color = textColor
+    }
+    if (boxShadow) {
+      el.style.boxShadow = boxShadow
+    }
+
     const text = document.createElement('div')
     text.className = 'snackbar--text'
     text.textContent = this.message
@@ -119,6 +154,9 @@ export class Snackbar {
         const button = document.createElement('button')
         button.className = 'snackbar--button'
         button.innerHTML = text
+        if (actionColor) {
+          button.style.color = actionColor
+        }
         if (style) {
           Object.keys(style).forEach(key => {
             button.style[key as any] = style[key]