[sourcery] Choose Emojis, as a browser-rendered block

modules/setting/setting.go

@@ -222,7 +222,7 @@ var (
 		MaxDisplayFileSize:  8388608,
 		DefaultTheme:        `gitea`,
 		Themes:              []string{`gitea`, `arc-green`},
-		Reactions:           []string{`+1`, `-1`, `laugh`, `hooray`, `confused`, `heart`, `rocket`, `eyes`},
+		Reactions:           []string{`+1`, `-1`, `laughing`, `tada`, `confused`, `heart`, `rocket`, `eyes`},
 		Notification: struct {
 			MinTimeout            time.Duration
 			TimeoutStep           time.Duration

package.json

@@ -11,6 +11,7 @@
     "@babel/runtime": "7.12.5",
     "@claviska/jquery-minicolors": "2.3.5",
     "@primer/octicons": "11.2.0",
+    "@primer/octicons-react": "12.0.0",
     "add-asset-webpack-plugin": "2.0.0",
     "babel-loader": "8.2.2",
     "clipboard": "2.0.6",
@@ -36,7 +37,11 @@
     "postcss": "8.2.1",
     "pretty-ms": "7.0.1",
     "raw-loader": "4.0.2",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-emoji": "0.5.0",
     "sortablejs": "1.12.0",
+    "styled-components": "5.2.1",
     "swagger-ui-dist": "3.38.0",
     "terser-webpack-plugin": "5.0.3",
     "tributejs": "5.1.3",
@@ -53,6 +58,7 @@
     "wrap-ansi": "7.0.0"
   },
   "devDependencies": {
+    "@babel/preset-react": "7.12.13",
     "eslint": "7.16.0",
     "eslint-plugin-html": "6.1.1",
     "eslint-plugin-import": "2.22.1",

templates/repo/issue/view_content/add_reaction.tmpl

@@ -1,14 +1,14 @@
 {{if .ctx.IsSigned}}
-<div class="item action ui pointing select-reaction dropdown top right" data-action-url="{{ .ActionURL }}">
-	<a class="add-reaction">
-		{{svg "octicon-smiley"}}
-	</a>
-	<div class="menu">
-		<div class="header">{{ .ctx.i18n.Tr "repo.pick_reaction"}}</div>
-		<div class="divider"></div>
-		{{range $value := AllowedReactions}}
-			<div class="item reaction" data-content="{{$value}}">{{ReactionToEmoji $value}}</div>
-		{{end}}
-	</div>
-</div>
+  <div
+    class="block"
+    data-block="add_reaction"
+    type="application/json"
+  >
+  {
+    "address": "{{ .ActionURL }}",
+    "phrases": {
+      "pick": "{{ .ctx.i18n.Tr "repo.pick_reaction"}}"
+    }
+  }
+  </div>
 {{end}}

web_src/js/components/add_reaction.js

@@ -0,0 +1,127 @@
+import React from "react"
+
+import { emojify } from "react-emoji"
+import { SmileyIcon } from "@primer/octicons-react"
+
+const {csrf} = window.config;
+
+class AddReaction extends React.Component {
+  state = { choices: [] }
+
+  constructor(p) {
+    super(p)
+
+    fetch("/api/v1/settings/ui", { headers: {"accept": "application/json"}})
+    .then(response => response.json())
+    .then(response => {
+      this.setState({ choices: response.allowed_reactions })
+    })
+  }
+
+  render = () => (
+    <div
+      className="item action ui pointing select-reaction dropdown top right"
+      data-action-url={this.props.address}
+    >
+      <a className="add-reaction" >
+        <SmileyIcon />
+      </a>
+
+      <div className="menu">
+        <div className="header">
+          {this.props.phrases.pick}
+        </div>
+
+        <div className="divider"></div>
+
+        {this.state.choices.map(r => (
+          <div key={r} className="item reaction" data-content={r} >
+            {emojify(`:${r}:`, { emojiType: 'emojione' })}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+
+  componentDidMount() {
+    initReactionSelector(null, this.props.rerender)
+  }
+
+  /*
+    choices={response.allowed_reactions}
+    actionURL={p.dataset['actionUrl']}
+    pick={p.dataset['i18nPick']}
+
+        initReactionSelector($(p))
+   */
+}
+
+function initReactionSelector(parent, callback) {
+  let reactions = '';
+  if (!parent) {
+    parent = $(document);
+    reactions = '.reactions > ';
+  }
+
+  parent
+    .find(`${reactions}a.label`)
+    .popup({
+      position: 'bottom left',
+      metadata: {content: 'title', title: 'none'}
+    });
+
+  parent
+    .find(`.select-reaction > .menu > .item, ${reactions}a.label`)
+    .on('click', function (e) {
+      const vm = this;
+      e.preventDefault();
+
+      if ($(this).hasClass('disabled')) return;
+
+      const actionURL = $(this).hasClass('item')
+          ? $(this).closest('.select-reaction').data('action-url')
+          : $(this).data('action-url');
+
+      const url = `${actionURL}/${$(this).hasClass('blue')
+          ? 'unreact'
+          : 'react'}`;
+
+      $.ajax({
+        type: 'POST',
+        url,
+        data: {
+          _csrf: csrf,
+          content: $(this).data('content')
+        }
+      }).done((resp) => {
+
+        if (resp && (resp.html || resp.empty)) {
+          const content = $(vm).closest('.content');
+          let react = content.find('.segment.reactions');
+
+          if ((!resp.empty || resp.html === '') && react.length > 0) {
+            react.remove();
+          }
+
+          if (!resp.empty) {
+            react = $('<div class="ui attached segment reactions"></div>');
+            const attachments = content.find('.segment.bottom:first');
+
+            if (attachments.length > 0) {
+              react.insertBefore(attachments);
+            } else {
+              react.appendTo(content);
+            }
+
+            react.html(resp.html);
+            react.find('.dropdown').dropdown();
+
+            callback(react, callback);
+          }
+        }
+      });
+    });
+}
+
+export { initReactionSelector }
+export default AddReaction

web_src/js/index.js

@@ -27,8 +27,32 @@ import {createCodeEditor, createMonaco} from './features/codeeditor.js';
 import {svg, svgs} from './svg.js';
 import {stripTags} from './utils.js';
 
+import React from "react"
+import ReactDOM from "react-dom"
+
+import AddReaction, { initReactionSelector } from "./components/add_reaction"
+
 const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;
 
+var blocks = {
+  add_reaction: AddReaction,
+}
+
+const render_blocks = () => {
+  var block_places = [...document.querySelectorAll(".block")]
+  block_places = block_places.filter(x => x.dataset['rendered'] !== 'yes')
+
+  block_places.forEach(p => {
+    const Block = blocks[p.dataset['block']]
+    var props = JSON.parse(p.innerHTML)
+
+    ReactDOM.render(<Block {...props} rerender={render_blocks} />, p)
+    p.dataset['rendered'] = 'yes'
+  })
+}
+
+render_blocks()
+
 let previewFileModes;
 const commentMDEditors = {};
 
@@ -236,54 +260,6 @@ function initRepoStatusChecker() {
   }
 }
 
-function initReactionSelector(parent) {
-  let reactions = '';
-  if (!parent) {
-    parent = $(document);
-    reactions = '.reactions > ';
-  }
-
-  parent.find(`${reactions}a.label`).popup({position: 'bottom left', metadata: {content: 'title', title: 'none'}});
-
-  parent.find(`.select-reaction > .menu > .item, ${reactions}a.label`).on('click', function (e) {
-    const vm = this;
-    e.preventDefault();
-
-    if ($(this).hasClass('disabled')) return;
-
-    const actionURL = $(this).hasClass('item') ? $(this).closest('.select-reaction').data('action-url') : $(this).data('action-url');
-    const url = `${actionURL}/${$(this).hasClass('blue') ? 'unreact' : 'react'}`;
-    $.ajax({
-      type: 'POST',
-      url,
-      data: {
-        _csrf: csrf,
-        content: $(this).data('content')
-      }
-    }).done((resp) => {
-      if (resp && (resp.html || resp.empty)) {
-        const content = $(vm).closest('.content');
-        let react = content.find('.segment.reactions');
-        if ((!resp.empty || resp.html === '') && react.length > 0) {
-          react.remove();
-        }
-        if (!resp.empty) {
-          react = $('<div class="ui attached segment reactions"></div>');
-          const attachments = content.find('.segment.bottom:first');
-          if (attachments.length > 0) {
-            react.insertBefore(attachments);
-          } else {
-            react.appendTo(content);
-          }
-          react.html(resp.html);
-          react.find('.dropdown').dropdown();
-          initReactionSelector(react);
-        }
-      }
-    });
-  });
-}
-
 function insertAtCursor(field, value) {
   if (field.selectionStart || field.selectionStart === 0) {
     const startPos = field.selectionStart;
@@ -1180,7 +1156,7 @@ async function initRepository() {
       $mergeButton.parent().show();
       $('.instruct-toggle').show();
     });
-    initReactionSelector();
+    initReactionSelector(null, render_blocks);
   }
 
   // Quick start and repository home
@@ -2567,7 +2543,7 @@ $(document).ready(async () => {
       const conversation = $(data);
       $(this).closest('.conversation-holder').replaceWith(conversation);
       conversation.find('.dropdown').dropdown();
-      initReactionSelector(conversation);
+      initReactionSelector(conversation, render_blocks);
       initClipboard();
     } else {
       reload();
@@ -3710,7 +3686,7 @@ $(document).on('submit', '.conversation-holder form', async (e) => {
     $(`a.add-code-comment[data-path="${path}"][data-side="${side}"][data-idx="${idx}"]`).addClass('invisible');
   }
   newConversationHolder.find('.dropdown').dropdown();
-  initReactionSelector(newConversationHolder);
+  initReactionSelector(newConversationHolder, render_blocks);
   initClipboard();
 });
 

web_src/less/_blocks.less

@@ -0,0 +1,9 @@
+.block {
+  display: flex;
+  visibility: hidden;
+
+  &[data-rendered='yes'] {
+    visibility: visible;
+  }
+}
+

web_src/less/index.less

@@ -13,6 +13,7 @@
 @import "_svg";
 @import "_tribute";
 @import "_base";
+@import "_blocks";
 @import "_markdown";
 @import "_home";
 @import "_install";

webpack.config.js

@@ -143,7 +143,7 @@ module.exports = {
               ].map((path) => statSync(path).mtime.getTime()).join(':'),
               presets: [
                 [
-                  '@babel/preset-env',
+                  '@babel/preset-react',
                   {
                     useBuiltIns: 'usage',
                     corejs: 3,
@@ -157,6 +157,7 @@ module.exports = {
                     regenerator: true,
                   }
                 ],
+                ['@babel/plugin-proposal-class-properties'],
               ],
               generatorOpts: {
                 compact: false,