Add .jsx filename extension

(This is also required for Vite later)
2023-05-24 09:02:33 +02:00
parent d7eb1206fe
commit f558b4dbe9
25 changed files with 0 additions and 0 deletions
--- a/web/src/components/EmojiPicker.jsx
+++ b/web/src/components/EmojiPicker.jsx
@@ -0,0 +1,173 @@
+import * as React from "react";
+import { useRef, useState } from "react";
+import Typography from "@mui/material/Typography";
+import { rawEmojis } from "../app/emojis";
+import Box from "@mui/material/Box";
+import TextField from "@mui/material/TextField";
+import { ClickAwayListener, Fade, InputAdornment, styled } from "@mui/material";
+import IconButton from "@mui/material/IconButton";
+import { Close } from "@mui/icons-material";
+import Popper from "@mui/material/Popper";
+import { splitNoEmpty } from "../app/utils";
+import { useTranslation } from "react-i18next";
+
+// Create emoji list by category and create a search base (string with all search words)
+//
+// This also filters emojis that are not supported by Desktop Chrome.
+// This is a hack, but on Ubuntu 18.04, with Chrome 99, only Emoji <= 11 are supported.
+
+const emojisByCategory = {};
+const isDesktopChrome = /Chrome/.test(navigator.userAgent) && !/Mobile/.test(navigator.userAgent);
+const maxSupportedVersionForDesktopChrome = 11;
+rawEmojis.forEach((emoji) => {
+  if (!emojisByCategory[emoji.category]) {
+    emojisByCategory[emoji.category] = [];
+  }
+  try {
+    const unicodeVersion = parseFloat(emoji.unicode_version);
+    const supportedEmoji = unicodeVersion <= maxSupportedVersionForDesktopChrome || !isDesktopChrome;
+    if (supportedEmoji) {
+      const searchBase = `${emoji.description.toLowerCase()} ${emoji.aliases.join(" ")} ${emoji.tags.join(" ")}`;
+      const emojiWithSearchBase = { ...emoji, searchBase: searchBase };
+      emojisByCategory[emoji.category].push(emojiWithSearchBase);
+    }
+  } catch (e) {
+    // Nothing. Ignore.
+  }
+});
+
+const EmojiPicker = (props) => {
+  const { t } = useTranslation();
+  const open = Boolean(props.anchorEl);
+  const [search, setSearch] = useState("");
+  const searchRef = useRef(null);
+  const searchFields = splitNoEmpty(search.toLowerCase(), " ");
+
+  const handleSearchClear = () => {
+    setSearch("");
+    searchRef.current?.focus();
+  };
+
+  return (
+    <Popper open={open} anchorEl={props.anchorEl} placement="bottom-start" sx={{ zIndex: 10005 }} transition>
+      {({ TransitionProps }) => (
+        <ClickAwayListener onClickAway={props.onClose}>
+          <Fade {...TransitionProps} timeout={350}>
+            <Box
+              sx={{
+                boxShadow: 3,
+                padding: 2,
+                paddingRight: 0,
+                paddingBottom: 1,
+                width: "380px",
+                maxHeight: "300px",
+                backgroundColor: "background.paper",
+                overflowY: "scroll",
+              }}
+            >
+              <TextField
+                inputRef={searchRef}
+                margin="dense"
+                size="small"
+                placeholder={t("emoji_picker_search_placeholder")}
+                value={search}
+                onChange={(ev) => setSearch(ev.target.value)}
+                type="text"
+                variant="standard"
+                fullWidth
+                sx={{ marginTop: 0, marginBottom: "12px", paddingRight: 2 }}
+                inputProps={{
+                  role: "searchbox",
+                  "aria-label": t("emoji_picker_search_placeholder"),
+                }}
+                InputProps={{
+                  endAdornment: (
+                    <InputAdornment position="end" sx={{ display: search ? "" : "none" }}>
+                      <IconButton size="small" onClick={handleSearchClear} edge="end" aria-label={t("emoji_picker_search_clear")}>
+                        <Close />
+                      </IconButton>
+                    </InputAdornment>
+                  ),
+                }}
+              />
+              <Box
+                sx={{
+                  display: "flex",
+                  flexWrap: "wrap",
+                  paddingRight: 0,
+                  marginTop: 1,
+                }}
+              >
+                {Object.keys(emojisByCategory).map((category) => (
+                  <Category
+                    key={category}
+                    title={category}
+                    emojis={emojisByCategory[category]}
+                    search={searchFields}
+                    onPick={props.onEmojiPick}
+                  />
+                ))}
+              </Box>
+            </Box>
+          </Fade>
+        </ClickAwayListener>
+      )}
+    </Popper>
+  );
+};
+
+const Category = (props) => {
+  const showTitle = props.search.length === 0;
+  return (
+    <>
+      {showTitle && (
+        <Typography variant="body1" sx={{ width: "100%", marginBottom: 1 }}>
+          {props.title}
+        </Typography>
+      )}
+      {props.emojis.map((emoji) => (
+        <Emoji key={emoji.aliases[0]} emoji={emoji} search={props.search} onClick={() => props.onPick(emoji.aliases[0])} />
+      ))}
+    </>
+  );
+};
+
+const Emoji = (props) => {
+  const emoji = props.emoji;
+  const matches = emojiMatches(emoji, props.search);
+  const title = `${emoji.description} (${emoji.aliases[0]})`;
+  return (
+    <EmojiDiv onClick={props.onClick} title={title} aria-label={title} style={{ display: matches ? "" : "none" }}>
+      {props.emoji.emoji}
+    </EmojiDiv>
+  );
+};
+
+const EmojiDiv = styled("div")({
+  fontSize: "30px",
+  width: "30px",
+  height: "30px",
+  marginTop: "8px",
+  marginBottom: "8px",
+  marginRight: "8px",
+  lineHeight: "30px",
+  cursor: "pointer",
+  opacity: 0.85,
+  "&:hover": {
+    opacity: 1,
+  },
+});
+
+const emojiMatches = (emoji, words) => {
+  if (words.length === 0) {
+    return true;
+  }
+  for (const word of words) {
+    if (emoji.searchBase.indexOf(word) === -1) {
+      return false;
+    }
+  }
+  return true;
+};
+
+export default EmojiPicker;