MARKET-1671 Emoji component #771

Saharij · 2023-09-18T22:16:08Z

Link to preview - https://earlywrench.backendless.app/api/files/ui-builder/containers/default/index.html?page=emoji
Link to UI Builder - https://develop.backendless.com/app/zahar_mychka_components/ui-builder/default/pages/emoji

StasivPavlo · 2023-09-26T12:48:20Z

components/bl-emoji/src/index.js

+          { pickerVisibility ? (
+            <svg width={ validButtonSize } height={ validButtonSize } viewBox="0 0 512 512" fill={ buttonColor }>
+              <path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm349.5 52.4c18.7-4.4 35.9 12 25.5 28.1C350.4 374.6 306.3 400 255.9 400s-94.5-25.4-119.1-63.5c-10.4-16.1 6.8-32.5 25.5-28.1c28.9 6.8 60.5 10.5 93.6 10.5s64.7-3.7 93.6-10.5zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm165.8 21.7c-7.6 8.1-20.2 8.5-28.3 .9s-8.5-20.2-.9-28.3c14.5-15.5 35.2-22.3 54.6-22.3s40.1 6.8 54.6 22.3c7.6 8.1 7.1 20.7-.9 28.3s-20.7 7.1-28.3-.9c-5.5-5.8-14.8-9.7-25.4-9.7s-19.9 3.8-25.4 9.7z" />
+            </svg>
+          ) : (
+            <svg width={ validButtonSize } height={ validButtonSize } viewBox="0 0 512 512" fill={ buttonColor }>
+              <path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm177.6 62.1C192.8 334.5 218.8 352 256 352s63.2-17.5 78.4-33.9c9-9.7 24.2-10.4 33.9-1.4s10.4 24.2 1.4 33.9c-22 23.8-60 49.4-113.6 49.4s-91.7-25.5-113.6-49.4c-9-9.7-8.4-24.9 1.4-33.9s24.9-8.4 33.9 1.4zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/>
+            </svg>
+          ) }


It will be better to make this more readable.

You can make for SVG separable components. Also, you can move the condition from return

StasivPavlo · 2023-09-26T12:50:56Z

components/bl-emoji/styles/index.less

+        transform: scale(1.2);
+        transition: transform .3s;


can be variables

StasivPavlo · 2023-09-26T12:51:06Z

components/bl-emoji/styles/index.less

+
+    &__dropdown {
+      position: absolute;
+      z-index: 100;


can be variable

StasivPavlo · 2023-09-26T12:51:13Z

components/bl-emoji/styles/index.less

+  width: auto;
+
+  &--disabled {
+    opacity: 0.38;


can be variable

v-excelsior · 2023-10-09T08:05:41Z

components/bl-emoji/README.md

+| Theme<br/>`theme`                             | Select [Light:`light`<br/>Dark:`dark`<br/>Auto:`auto`]             | Light:`light`   | Theme Logic                  | YES          | YES        | This handler allows you to select a theme for the emoji dropdown list. |
+| Emoji Style<br/>`emojiStyle`                  | Select [Apple:`apple`<br/>Google:`google`<br/>Facebook:`facebook`] | Apple:`apple`   | Emoji Style Logic            | YES          | YES        | This handler allows you to select an emoji style.                      |
+| Search Disabled<br/>`searchDisabled`          | Checkbox                                                           | `true`          | Search Disabled Logic        | YES          | YES        | This handler allows you to disable the emoji search field.             |
+


Is it easy and obvious to implement binding emojis with default input? If no - need an instruction how to do it.

v-excelsior · 2023-10-09T08:06:42Z

components/bl-emoji/README.md

+
+| Name                  | Triggers                  | Context Blocks                                     |
+|-----------------------|---------------------------|----------------------------------------------------|
+| On Emoji Select Event | when an emoji is selected | Emoji: `String`, Emoji Names: [`String`, `String`] |


Could you provide example values that returns from context blocks?

v-excelsior · 2023-10-09T08:13:34Z

components/bl-emoji/src/index.js

+        <div onClick={ handleEmojiButtonClick } className="emoji-picker__button">
+          <svg width={ validButtonSize } height={ validButtonSize } viewBox="0 0 512 512" fill={ buttonColor }>
+            <path d={ getIconPath(pickerVisibility) } />
+          </svg>
+        </div>


v-excelsior · 2023-10-09T08:16:00Z

components/bl-emoji/src/index.js

+        { pickerVisibility &&
+          <div className={ cn("emoji-picker__dropdown", `emoji-picker__dropdown-position--${ dropdownPosition }`) }>
+            <EmojiPicker
+              theme={ theme }
+              emojiStyle={ emojiStyle }
+              width={ validDropdownWidth }
+              height={ validDropdownHeight }
+              searchDisabled={ searchDisabled }
+              onEmojiClick={ handleEmojiClick }
+            />
+          </div>
+        }


Suggested change

{ pickerVisibility &&

<div className={ cn("emoji-picker__dropdown", `emoji-picker__dropdown-position--${ dropdownPosition }`) }>

<EmojiPicker

theme={ theme }

emojiStyle={ emojiStyle }

width={ validDropdownWidth }

height={ validDropdownHeight }

searchDisabled={ searchDisabled }

onEmojiClick={ handleEmojiClick }

/>

</div>

}

<PickerLayoutManager dropdownPosition={dropdownPosition} pickerVisibility={pickerVisibility}>

<EmojiPicker

theme={ theme }

emojiStyle={ emojiStyle }

width={ validDropdownWidth }

height={ validDropdownHeight }

searchDisabled={ searchDisabled }

onEmojiClick={ handleEmojiClick }

/>

</PickerLayoutManager>

v-excelsior · 2023-10-09T08:22:13Z

components/bl-emoji/src/index.js

+  if (!display) {
+    return null;
+  }


For now it's impossible to always show it? It could be shown only after some trigger?
If yes need to add this possibility

v-excelsior · 2023-10-09T08:25:16Z

components/bl-emoji/src/index.js

+  const validDropdownWidth = useMemo(() => normalizeDimensionValue(dropdownWidth), [dropdownWidth]);
+  const validDropdownHeight = useMemo(() => normalizeDimensionValue(dropdownHeight), [dropdownHeight]);
+
+  const handleEmojiButtonClick = () => {


togglePickerVisibility

v-excelsior · 2023-10-09T08:25:39Z

components/bl-emoji/src/index.js

+    setPickerVisibility(prevState => !prevState);
+  };
+
+  const handleEmojiClick = event => {


onEmojiClick

v-excelsior · 2023-10-09T08:26:14Z

components/bl-emoji/src/index.js

+  };
+
+  const handleEmojiClick = event => {
+    const { emoji, names } = event;


Could be destructed at arguments

v-excelsior · 2023-10-09T08:30:01Z

components/bl-emoji/component.json

+  "type": "custom",
+  "category": "Custom Components",
+  "properties": [
+    {


Need actions and property that could control picker visibility

v-excelsior · 2023-10-09T08:33:18Z

components/bl-emoji/src/index.js

+  const handleEmojiClick = event => {
+    const { emoji, names } = event;
+
+    navigator.clipboard.writeText(emoji);


But how it will be inserted into text fields? Pasting? It may not be convenient.
We should try to find a way to link it with input and write an emoji directly into it, without a clipboard.

Zakhar Mychka added 2 commits September 19, 2023 01:13

MARKET-1671 Emoji component

439da6b

added readme file and thumbnail

f909887

StasivPavlo reviewed Sep 26, 2023

View reviewed changes

added getIconPath function and new styles variables

a9f0994

v-excelsior requested changes Oct 9, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MARKET-1671 Emoji component #771

MARKET-1671 Emoji component #771

Saharij commented Sep 18, 2023 •

edited

Loading

StasivPavlo Sep 26, 2023

StasivPavlo Sep 26, 2023

StasivPavlo Sep 26, 2023

StasivPavlo Sep 26, 2023

v-excelsior Oct 9, 2023

v-excelsior Oct 9, 2023

v-excelsior Oct 9, 2023

v-excelsior Oct 9, 2023

v-excelsior Oct 9, 2023

v-excelsior Oct 9, 2023

v-excelsior Oct 9, 2023

v-excelsior Oct 9, 2023

v-excelsior Oct 9, 2023

v-excelsior Oct 9, 2023

MARKET-1671 Emoji component #771

Are you sure you want to change the base?

MARKET-1671 Emoji component #771

Conversation

Saharij commented Sep 18, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Saharij commented Sep 18, 2023 •

edited

Loading