logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe git clone https://hacktivis.me/git/mastofe.git

emoji_picker_dropdown.js (11343B)


  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. import { defineMessages, injectIntl } from 'react-intl';
  4. import { EmojiPicker as EmojiPickerAsync } from '../../ui/util/async-components';
  5. import Overlay from 'react-overlays/lib/Overlay';
  6. import classNames from 'classnames';
  7. import ImmutablePropTypes from 'react-immutable-proptypes';
  8. import detectPassiveEvents from 'detect-passive-events';
  9. import { buildCustomEmojis } from '../../emoji/emoji';
  10. const messages = defineMessages({
  11. emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
  12. emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search...' },
  13. emoji_not_found: { id: 'emoji_button.not_found', defaultMessage: 'No emojos!! (╯°□°)╯︵ ┻━┻' },
  14. custom: { id: 'emoji_button.custom', defaultMessage: 'Custom' },
  15. recent: { id: 'emoji_button.recent', defaultMessage: 'Frequently used' },
  16. search_results: { id: 'emoji_button.search_results', defaultMessage: 'Search results' },
  17. people: { id: 'emoji_button.people', defaultMessage: 'People' },
  18. nature: { id: 'emoji_button.nature', defaultMessage: 'Nature' },
  19. food: { id: 'emoji_button.food', defaultMessage: 'Food & Drink' },
  20. activity: { id: 'emoji_button.activity', defaultMessage: 'Activity' },
  21. travel: { id: 'emoji_button.travel', defaultMessage: 'Travel & Places' },
  22. objects: { id: 'emoji_button.objects', defaultMessage: 'Objects' },
  23. symbols: { id: 'emoji_button.symbols', defaultMessage: 'Symbols' },
  24. flags: { id: 'emoji_button.flags', defaultMessage: 'Flags' },
  25. });
  26. const assetHost = process.env.CDN_HOST || '';
  27. let EmojiPicker, Emoji; // load asynchronously
  28. const backgroundImageFn = () => `${assetHost}/emoji/sheet.png`;
  29. const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false;
  30. const categoriesSort = [
  31. 'recent',
  32. 'custom',
  33. 'people',
  34. 'nature',
  35. 'foods',
  36. 'activity',
  37. 'places',
  38. 'objects',
  39. 'symbols',
  40. 'flags',
  41. ];
  42. class ModifierPickerMenu extends React.PureComponent {
  43. static propTypes = {
  44. active: PropTypes.bool,
  45. onSelect: PropTypes.func.isRequired,
  46. onClose: PropTypes.func.isRequired,
  47. };
  48. handleClick = e => {
  49. this.props.onSelect(e.currentTarget.getAttribute('data-index') * 1);
  50. }
  51. componentWillReceiveProps (nextProps) {
  52. if (nextProps.active) {
  53. this.attachListeners();
  54. } else {
  55. this.removeListeners();
  56. }
  57. }
  58. componentWillUnmount () {
  59. this.removeListeners();
  60. }
  61. handleDocumentClick = e => {
  62. if (this.node && !this.node.contains(e.target)) {
  63. this.props.onClose();
  64. }
  65. }
  66. attachListeners () {
  67. document.addEventListener('click', this.handleDocumentClick, false);
  68. document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
  69. }
  70. removeListeners () {
  71. document.removeEventListener('click', this.handleDocumentClick, false);
  72. document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
  73. }
  74. setRef = c => {
  75. this.node = c;
  76. }
  77. render () {
  78. const { active } = this.props;
  79. return (
  80. <div className='emoji-picker-dropdown__modifiers__menu' style={{ display: active ? 'block' : 'none' }} ref={this.setRef}>
  81. <button onClick={this.handleClick} data-index={1}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={1} backgroundImageFn={backgroundImageFn} /></button>
  82. <button onClick={this.handleClick} data-index={2}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={2} backgroundImageFn={backgroundImageFn} /></button>
  83. <button onClick={this.handleClick} data-index={3}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={3} backgroundImageFn={backgroundImageFn} /></button>
  84. <button onClick={this.handleClick} data-index={4}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={4} backgroundImageFn={backgroundImageFn} /></button>
  85. <button onClick={this.handleClick} data-index={5}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={5} backgroundImageFn={backgroundImageFn} /></button>
  86. <button onClick={this.handleClick} data-index={6}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={6} backgroundImageFn={backgroundImageFn} /></button>
  87. </div>
  88. );
  89. }
  90. }
  91. class ModifierPicker extends React.PureComponent {
  92. static propTypes = {
  93. active: PropTypes.bool,
  94. modifier: PropTypes.number,
  95. onChange: PropTypes.func,
  96. onClose: PropTypes.func,
  97. onOpen: PropTypes.func,
  98. };
  99. handleClick = () => {
  100. if (this.props.active) {
  101. this.props.onClose();
  102. } else {
  103. this.props.onOpen();
  104. }
  105. }
  106. handleSelect = modifier => {
  107. this.props.onChange(modifier);
  108. this.props.onClose();
  109. }
  110. render () {
  111. const { active, modifier } = this.props;
  112. return (
  113. <div className='emoji-picker-dropdown__modifiers'>
  114. <Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={modifier} onClick={this.handleClick} backgroundImageFn={backgroundImageFn} />
  115. <ModifierPickerMenu active={active} onSelect={this.handleSelect} onClose={this.props.onClose} />
  116. </div>
  117. );
  118. }
  119. }
  120. @injectIntl
  121. class EmojiPickerMenu extends React.PureComponent {
  122. static propTypes = {
  123. custom_emojis: ImmutablePropTypes.list,
  124. frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.string),
  125. loading: PropTypes.bool,
  126. onClose: PropTypes.func.isRequired,
  127. onPick: PropTypes.func.isRequired,
  128. style: PropTypes.object,
  129. placement: PropTypes.string,
  130. arrowOffsetLeft: PropTypes.string,
  131. arrowOffsetTop: PropTypes.string,
  132. intl: PropTypes.object.isRequired,
  133. skinTone: PropTypes.number.isRequired,
  134. onSkinTone: PropTypes.func.isRequired,
  135. };
  136. static defaultProps = {
  137. style: {},
  138. loading: true,
  139. placement: 'bottom',
  140. frequentlyUsedEmojis: [],
  141. };
  142. state = {
  143. modifierOpen: false,
  144. };
  145. handleDocumentClick = e => {
  146. if (this.node && !this.node.contains(e.target)) {
  147. this.props.onClose();
  148. }
  149. }
  150. componentDidMount () {
  151. document.addEventListener('click', this.handleDocumentClick, false);
  152. document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
  153. }
  154. componentWillUnmount () {
  155. document.removeEventListener('click', this.handleDocumentClick, false);
  156. document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
  157. }
  158. setRef = c => {
  159. this.node = c;
  160. }
  161. getI18n = () => {
  162. const { intl } = this.props;
  163. return {
  164. search: intl.formatMessage(messages.emoji_search),
  165. notfound: intl.formatMessage(messages.emoji_not_found),
  166. categories: {
  167. search: intl.formatMessage(messages.search_results),
  168. recent: intl.formatMessage(messages.recent),
  169. people: intl.formatMessage(messages.people),
  170. nature: intl.formatMessage(messages.nature),
  171. foods: intl.formatMessage(messages.food),
  172. activity: intl.formatMessage(messages.activity),
  173. places: intl.formatMessage(messages.travel),
  174. objects: intl.formatMessage(messages.objects),
  175. symbols: intl.formatMessage(messages.symbols),
  176. flags: intl.formatMessage(messages.flags),
  177. custom: intl.formatMessage(messages.custom),
  178. },
  179. };
  180. }
  181. handleClick = emoji => {
  182. if (!emoji.native) {
  183. emoji.native = emoji.colons;
  184. }
  185. this.props.onClose();
  186. this.props.onPick(emoji);
  187. }
  188. handleModifierOpen = () => {
  189. this.setState({ modifierOpen: true });
  190. }
  191. handleModifierClose = () => {
  192. this.setState({ modifierOpen: false });
  193. }
  194. handleModifierChange = modifier => {
  195. this.props.onSkinTone(modifier);
  196. }
  197. render () {
  198. const { loading, style, intl, custom_emojis, skinTone, frequentlyUsedEmojis } = this.props;
  199. if (loading) {
  200. return <div style={{ width: 299 }} />;
  201. }
  202. const title = intl.formatMessage(messages.emoji);
  203. const { modifierOpen } = this.state;
  204. return (
  205. <div className={classNames('emoji-picker-dropdown__menu', { selecting: modifierOpen })} style={style} ref={this.setRef}>
  206. <EmojiPicker
  207. perLine={8}
  208. emojiSize={22}
  209. sheetSize={32}
  210. custom={buildCustomEmojis(custom_emojis)}
  211. color=''
  212. emoji=''
  213. set='twitter'
  214. title={title}
  215. i18n={this.getI18n()}
  216. onClick={this.handleClick}
  217. include={categoriesSort}
  218. recent={frequentlyUsedEmojis}
  219. skin={skinTone}
  220. showPreview={false}
  221. backgroundImageFn={backgroundImageFn}
  222. emojiTooltip
  223. />
  224. <ModifierPicker
  225. active={modifierOpen}
  226. modifier={skinTone}
  227. onOpen={this.handleModifierOpen}
  228. onClose={this.handleModifierClose}
  229. onChange={this.handleModifierChange}
  230. />
  231. </div>
  232. );
  233. }
  234. }
  235. @injectIntl
  236. export default class EmojiPickerDropdown extends React.PureComponent {
  237. static propTypes = {
  238. custom_emojis: ImmutablePropTypes.list,
  239. frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.string),
  240. intl: PropTypes.object.isRequired,
  241. onPickEmoji: PropTypes.func.isRequired,
  242. onSkinTone: PropTypes.func.isRequired,
  243. skinTone: PropTypes.number.isRequired,
  244. };
  245. state = {
  246. active: false,
  247. loading: false,
  248. };
  249. setRef = (c) => {
  250. this.dropdown = c;
  251. }
  252. onShowDropdown = () => {
  253. this.setState({ active: true });
  254. if (!EmojiPicker) {
  255. this.setState({ loading: true });
  256. EmojiPickerAsync().then(EmojiMart => {
  257. EmojiPicker = EmojiMart.Picker;
  258. Emoji = EmojiMart.Emoji;
  259. this.setState({ loading: false });
  260. }).catch(() => {
  261. this.setState({ loading: false });
  262. });
  263. }
  264. }
  265. onHideDropdown = () => {
  266. this.setState({ active: false });
  267. }
  268. onToggle = (e) => {
  269. if (!this.state.loading && (!e.key || e.key === 'Enter')) {
  270. if (this.state.active) {
  271. this.onHideDropdown();
  272. } else {
  273. this.onShowDropdown();
  274. }
  275. }
  276. }
  277. handleKeyDown = e => {
  278. if (e.key === 'Escape') {
  279. this.onHideDropdown();
  280. }
  281. }
  282. setTargetRef = c => {
  283. this.target = c;
  284. }
  285. findTarget = () => {
  286. return this.target;
  287. }
  288. render () {
  289. const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props;
  290. const title = intl.formatMessage(messages.emoji);
  291. const { active, loading } = this.state;
  292. return (
  293. <div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown}>
  294. <div ref={this.setTargetRef} className='emoji-button' title={title} aria-label={title} aria-expanded={active} role='button' onClick={this.onToggle} onKeyDown={this.onToggle} tabIndex={0}>
  295. <img
  296. className={classNames('emojione', { 'pulse-loading': active && loading })}
  297. alt='🙂'
  298. src={`${assetHost}/emoji/1f602.svg`}
  299. />
  300. </div>
  301. <Overlay show={active} placement='bottom' target={this.findTarget}>
  302. <EmojiPickerMenu
  303. custom_emojis={this.props.custom_emojis}
  304. loading={loading}
  305. onClose={this.onHideDropdown}
  306. onPick={onPickEmoji}
  307. onSkinTone={onSkinTone}
  308. skinTone={skinTone}
  309. frequentlyUsedEmojis={frequentlyUsedEmojis}
  310. />
  311. </Overlay>
  312. </div>
  313. );
  314. }
  315. }