From 484b0dbb39263686fec525acd3644960458bebd9 Mon Sep 17 00:00:00 2001
From: Roland Bernard <rolbernard@unibz.it>
Date: Sun, 6 Jun 2021 21:12:20 +0200
Subject: [PATCH] Replaced the emoji picker
---
client/package.json | 3 ++-
.../src/components/forms/TaskForm/index.tsx | 6 +++--
.../components/forms/TaskForm/task-form.scss | 17 ++++++++++--
client/yarn.lock | 27 +++++++++++++++----
4 files changed, 43 insertions(+), 10 deletions(-)
diff --git a/client/package.json b/client/package.json
index 4ed0e7c..2c8bfe3 100644
--- a/client/package.json
+++ b/client/package.json
@@ -10,12 +10,13 @@
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
+ "@types/emoji-mart": "^3.0.4",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^16.9.53",
"@types/react-dom": "^16.9.8",
"@types/react-router-dom": "^5.1.7",
- "emoji-picker-react": "^3.4.4",
+ "emoji-mart": "^3.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
diff --git a/client/src/components/forms/TaskForm/index.tsx b/client/src/components/forms/TaskForm/index.tsx
index 0a7908b..f962428 100644
--- a/client/src/components/forms/TaskForm/index.tsx
+++ b/client/src/components/forms/TaskForm/index.tsx
@@ -1,6 +1,7 @@
import { FormEvent, useCallback, useEffect, useState } from 'react';
-import Picker from 'emoji-picker-react';
+import { Picker, BaseEmoji } from 'emoji-mart';
+import 'emoji-mart/css/emoji-mart.css';
import { getProjectTasks, Project } from 'adapters/project';
import { getTeam, getTeamMembers, getTeamRoles } from 'adapters/team';
@@ -70,6 +71,7 @@ export interface PossibleRole {
id: string;
label: string;
}
+
export interface PossibleMember {
id: string;
label: string;
@@ -170,7 +172,7 @@ export default function TaskForm({ task, onSubmit, project }: Props) {
<div className="current-icon">
Current icon: {icon}
</div>
- <Picker disableSkinTonePicker onEmojiClick={(_e, emoji) => setIcon(emoji.emoji)} />
+ <Picker native={true} showPreview={false} onSelect={emoji => setIcon((emoji as BaseEmoji).native)} />
<div className="note">
<span className="material-icons">
help_outline
diff --git a/client/src/components/forms/TaskForm/task-form.scss b/client/src/components/forms/TaskForm/task-form.scss
index a5ba8ad..e464d10 100644
--- a/client/src/components/forms/TaskForm/task-form.scss
+++ b/client/src/components/forms/TaskForm/task-form.scss
@@ -1,9 +1,22 @@
.task-form {
- .emoji-picker-react {
- width: 100%;
+ .emoji-mart {
+ width: 100% !important;
height: 340px;
border-radius: 15px;
+ overflow: hidden;
+
+ .emoji-mart-scroll {
+ height: 247.5px;
+ }
+
+ .emoji-mart-preview {
+ display: none;
+ }
+
+ .emoji-mart-emoji span {
+ cursor: pointer;
+ }
}
.current-icon {
diff --git a/client/yarn.lock b/client/yarn.lock
index e8e63f2..29a0e61 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1120,6 +1120,13 @@
dependencies:
regenerator-runtime "^0.13.4"
+"@babel/runtime@^7.0.0":
+ version "7.14.0"
+ resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
+ integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
+ dependencies:
+ regenerator-runtime "^0.13.4"
+
"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
version "7.13.10"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
@@ -1696,6 +1703,13 @@
dependencies:
"@babel/types" "^7.3.0"
+"@types/emoji-mart@^3.0.4":
+ version "3.0.4"
+ resolved "https://registry.yarnpkg.com/@types/emoji-mart/-/emoji-mart-3.0.4.tgz#418868330c13b510a7b4b86b1ee9904291daeec1"
+ integrity sha512-Uqegqi54lXzz1qlDnLYEbFlUXY46auTVwbeOO8mj+9maGu2WBx/lGnmLKg7WS4CC5lB8Q6ch8K5VPBR9bDjWgg==
+ dependencies:
+ "@types/react" "*"
+
"@types/eslint@^7.2.6":
version "7.2.8"
resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-7.2.8.tgz#45cd802380fcc352e5680e1781d43c50916f12ee"
@@ -4316,10 +4330,13 @@ emittery@^0.7.1:
resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.7.2.tgz#25595908e13af0f5674ab419396e2fb394cdfa82"
integrity sha512-A8OG5SR/ij3SsJdWDJdkkSYUjQdCUx6APQXem0SaEePBSRg4eymGYwBkKo1Y6DU+af/Jn2dBQqDBvjnr9Vi8nQ==
-emoji-picker-react@^3.4.4:
- version "3.4.4"
- resolved "https://registry.yarnpkg.com/emoji-picker-react/-/emoji-picker-react-3.4.4.tgz#027786af60d4b7ebe04338c5456ae7ae4b3d3eb6"
- integrity sha512-j5atTz5Uawt926Bc37MG5S0MwfIa9Gh4CVDGhnMSBhKZkDmgd5Q0QtQgcv+baLGdByYBsYx1OyQHORc6o8Ce5Q==
+emoji-mart@^3.0.1:
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-3.0.1.tgz#9ce86706e02aea0506345f98464814a662ca54c6"
+ integrity sha512-sxpmMKxqLvcscu6mFn9ITHeZNkGzIvD0BSNFE/LJESPbCA8s1jM6bCDPjWbV31xHq7JXaxgpHxLB54RCbBZSlg==
+ dependencies:
+ "@babel/runtime" "^7.0.0"
+ prop-types "^15.6.0"
emoji-regex@^7.0.1:
version "7.0.3"
@@ -8916,7 +8933,7 @@ prompts@^2.0.1:
kleur "^3.0.3"
sisteransi "^1.0.5"
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
--
GitLab