ealush / emoji-picker-react

The most popular React Emoji Picker
https://ealush.com/emoji-picker-react/
MIT License
991 stars 166 forks source link

Type '"dark"' is not assignable to type 'Theme | undefined' #420

Closed bimoware closed 4 weeks ago

bimoware commented 1 month ago

Full ts warning:

Type '"dark"' is not assignable to type 'Theme | undefined'.ts(2322)
config.d.ts(22, 5): The expected type comes from property 'theme' which is declared here on type 'IntrinsicAttributes & PickerProps'
(property) theme?: Theme | undefined

image My component:

import { Dispatch, KeyboardEvent, useState } from "react";
import EmojiPicker from "emoji-picker-react";
import emoji from "/assets/star.svg";
import "./MessageInput.css";

type msgGroups = string[][];
type msgGroupsSetter = Dispatch<msgGroups>;
interface Props {
  setMsgGroups: msgGroupsSetter;
  msgGroups: msgGroups;
}

function handleKeyDown(
  ev: KeyboardEvent<HTMLInputElement>,
  setMsgGroups: msgGroupsSetter,
  setInputText: Dispatch<string>,
  msgGroups: msgGroups
) {
  let text = ev.currentTarget.value;
  if (ev.key === "Enter") {
      let newMsgGroups = [...msgGroups];
      newMsgGroups[newMsgGroups.length - 1] = [
          ...newMsgGroups[newMsgGroups.length - 1],
          text,
      ];
      setMsgGroups(newMsgGroups);
      setInputText("");
  } else {
      return setInputText(text);
  }
}
export default function MessageInput({ setMsgGroups, msgGroups }: Props) {
  const [inputText, setInputText] = useState("");
  const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false);
  return (
      <div className="msg-input-container">
          <img
              style={{ width: "2em" }}
              src={emoji}
              onClick={() => setIsEmojiPickerOpen(!isEmojiPickerOpen)}
          />
          <input
              className="msg-input"
              onKeyDown={(ev) =>
                  handleKeyDown(ev, setMsgGroups, setInputText, msgGroups)
              }
              type="text"
              onChange={(e) => setInputText(e.target.value)}
              value={inputText}
          />
          <div className="emoji-panel">
              <EmojiPicker
                  lazyLoadEmojis={true}
                                    theme={"dark"}
                  onEmojiClick={(e) => setInputText(inputText + e.emoji)}
                  open={isEmojiPickerOpen}
              />
          </div>
      </div>
  );
}

My code runs fine even with this warning so this is nowhere near an urgent issue or anything. I still find this extremely weird since by looking at the .d.ts file, everything seems fine:

image

image

bimoware commented 4 weeks ago

My bad, i was using '"dark"' instead of "dark", the quotes were included in the string. Problem solved!