Merge pull request #94 from jmlee2k/dynamic-theming

Add ability to switch the theme after construction

index.d.ts

@@ -12,6 +12,7 @@ declare namespace EmojiButton {
     showPicker(referenceEl: HTMLElement): void;
     togglePicker(referenceEl: HTMLElement): void;
     isPickerVisible(): boolean;
+    setTheme(theme:EmojiTheme): void;
   }
 
   export interface Options {

site/src/examples/themes/switch-theme.js

@@ -0,0 +1,7 @@
+import { EmojiButton } from '@joeattardi/emoji-button';
+
+const picker = new EmojiButton();
+
+document.querySelector('#set-theme-dark').addEventListener('click', () => picker.setTheme("dark"));
+document.querySelector('#set-theme-light').addEventListener('click', () => picker.setTheme("light"));
+document.querySelector('#set-theme-auto').addEventListener('click', () => picker.setTheme("auto"));

site/src/pages/docs/api.js

@@ -507,6 +507,14 @@ export default function ApiDocs() {
           visible.
         </p>
 
+        <h3>
+          Method: <code>setTheme(theme)</code>
+        </h3>
+        <p>
+          Sets the theme of the picker.  See{' '}
+          <Link to="/docs/themes">Themes</Link> for more details.
+        </p>
+
         <a name="categories" />
         <h2>Category IDs</h2>
         <p>The valid category IDs are as follows:</p>

site/src/pages/docs/themes.js

@@ -1,4 +1,6 @@
-import React from 'react';
+import React, { useRef, useState, useEffect } from 'react';
+
+import { EmojiButton } from '@joeattardi/emoji-button';
 
 import DocLayout from '../../components/DocLayout';
 import Example from '../../components/Example';
@@ -7,8 +9,38 @@ import SourceFile from '../../components/SourceFile';
 import lightExample from '!!raw-loader!../../examples/themes/light.js';
 import darkExample from '!!raw-loader!../../examples/themes/dark.js';
 import autoExample from '!!raw-loader!../../examples/themes/auto.js';
+import switchExample from '!!raw-loader!../../examples/themes/switch-theme.js';
+
+import styles from './plugins.module.css';
 
 export default function ThemesExample() {
+  
+  const buttonRef = useRef();
+  const [picker, setPicker] = useState(null);
+  const [emoji, setEmoji] = useState("😎");
+
+  useEffect(() => {
+    const pickerObj = new EmojiButton({});
+    pickerObj.on('emoji', selection => setEmoji(selection.emoji));
+    setPicker(pickerObj);
+  }, []);
+
+  function togglePicker() {
+    picker.togglePicker(buttonRef.current);
+  }
+
+  function setDark() {
+    picker.setTheme("dark");
+  }
+
+  function setLight() {
+    picker.setTheme("light");
+  }
+
+  function setAuto() {
+    picker.setTheme("auto");
+  }
+
   return (
     <DocLayout>
       <h1>Themes</h1>
@@ -42,6 +74,46 @@ export default function ThemesExample() {
       </p>
       <Example options={{ theme: 'auto' }} />
       <SourceFile src={autoExample} />
+
+      <h1>Switching the theme</h1>
+      <p>
+        To switch the theme after construction, call <code>setTheme</code>{' '}
+        on the <code>EmojiButton</code> instance, passing it a value 
+        of <code>light</code>,<code>dark</code>, or <code>auto</code>.
+      </p>
+
+      <div>
+        <button
+          className={styles.emojiButton}
+          ref={buttonRef}
+          onClick={togglePicker}
+        >
+          {emoji}
+        </button>
+
+        <button
+          id="set-theme-dark"
+          onClick={setDark}
+        >
+          dark
+        </button>
+
+        <button
+          id="set-theme-light"
+          onClick={setLight}
+        >
+          light
+        </button>
+
+        <button
+          id="set-theme-auto"
+          onClick={setAuto}
+        >
+          auto
+        </button>
+      </div>
+
+      <SourceFile src={switchExample} />
     </DocLayout>
   );
 }

src/index.ts

@@ -33,7 +33,7 @@ import {
   CLASS_PLUGIN_CONTAINER
 } from './classes';
 
-import { EmojiButtonOptions, I18NStrings, EmojiRecord } from './types';
+import { EmojiButtonOptions, I18NStrings, EmojiRecord, EmojiTheme } from './types';
 import { EmojiArea } from './emojiArea';
 
 const twemojiOptions = {
@@ -95,6 +95,8 @@ export class EmojiButton {
 
   private observer: IntersectionObserver;
 
+  private theme: EmojiTheme;
+
   constructor(options: EmojiButtonOptions = {}) {
     this.pickerVisible = false;
 
@@ -111,6 +113,8 @@ export class EmojiButton {
     this.onDocumentClick = this.onDocumentClick.bind(this);
     this.onDocumentKeydown = this.onDocumentKeydown.bind(this);
 
+    this.theme = this.options.theme!;
+
     this.buildPicker();
   }
 
@@ -124,7 +128,7 @@ export class EmojiButton {
 
   private buildPicker(): void {
     this.pickerEl = createElement('div', CLASS_PICKER);
-    this.pickerEl.classList.add(this.options.theme as string);
+    this.updateTheme(this.theme);
 
     if (!this.options.showAnimation) {
       this.pickerEl.style.setProperty('--animation-duration', '0s');
@@ -522,4 +526,17 @@ export class EmojiButton {
       searchField && searchField.focus();
     }
   }
+
+  setTheme(theme:EmojiTheme): void {
+    if (theme === this.theme)
+      return;
+
+    this.pickerEl.classList.remove(this.theme);
+    this.theme = theme;
+    this.updateTheme(this.theme);
+  }
+
+  private updateTheme(theme:EmojiTheme): void {
+    this.pickerEl.classList.add(theme);
+  }
 }