This repository has been archived by the owner on Nov 10, 2022. It is now read-only.
Hw emoji #11
Closed
Hw emoji #11
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
martinkomitsky
suggested changes
Mar 29, 2019
There was a problem hiding this comment.
Для начала надо докоммитить что то, чего не хватает для сборки.
- dangerouslySetInnerHTML - для решения задачи ДЗ подойдет
- у меня все CSS свойства находятся в :local(.....) -- а это значит, что они видны только в пределах одного React-компонента - используй
import styles from 'component.css';и далееclassName={styles.CLASSNAME}. Вообще, если один и тот же класс у тебя используется вне компонента, то это неправильно. - если этот пункт обязателен в задании - пункт про contenteditable - это бонус. Достаточно при клике на смайл вставлять в поле ввода его "код"
martinkomitsky
suggested changes
Mar 31, 2019
| } | ||
|
|
||
| .oh { | ||
| background: url('../../../sprites/emoji.png') no-repeat -54px -126px; |
There was a problem hiding this comment.
В условии дз есть ссылка на sprite-loader. Не понимаю, почему все это игнорируют. Вручную ничего прописывать не надо, надо добавить этот лоадер и собрать картинки из архива.
|
|
||
| const Emoji = ({emojiName, onClick }) => { | ||
| return <img | ||
| contentEditable={false} |
There was a problem hiding this comment.
не совсем понятно, зачем это для иконки :)
|
Очень жду спрайт лоадер и следующие дз! @alekseik1 |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Сделал форму из CSS-спрайта (действительно CSS спрайта: картинка одна, но нарезается внутри CSS через
widthиheight). Хотел сделать вставку смайлика в форму, но это оказалось весьма нетривиально.Нужно переписать
<input>на<div>+ аккуратно передавать смайл при сообщении. Если с первым я смог справиться, то второе никак не получается: у меня все CSS свойства находятся в :local(.....) -- а это значит, что они видны только в пределах одного React-компонента (возможно, я тут не прав и они видны всюду. Пни меня, если это так). Вдобавок, даже если я смогу передать CSS-свойства каждого смайла, все равно не знаю, как сделать отрисовку React-компонента внутриdiv. Нужно получить что-то вроде такого:<div class="input-form" contenteditable=1>Мое классное сообщение <a {сюда надо как-то прописать CSS-бэкграунд смайлика} /> </div>. Вот этот<a ... />надо передать внутрь, но решения в интернете говорят использоватьdangerouslySetInnerHTML, что намекает на плохой код.TL; DR я не знаю, как сделать адекватно вставку смайла при клике, поэтому пока этот пункт не сделан.
@martinkomitsky, можешь дать наводку, если этот пункт обязателен в задании, пожалуйста?