feat: improve extensibility of PostMeta component (#4196)

* refactor(core): create new method for selecting permalink

* refactor(core): improve extensibility of `PostMeta`

* chore: dummy commit

framework/core/js/src/forum/components/PostMeta.tsx

@@ -7,6 +7,8 @@ import Post from '../../common/models/Post';
 import type Model from '../../common/Model';
 import type User from '../../common/models/User';
 import classList from '../../common/utils/classList';
+import ItemList from '../../common/utils/ItemList';
+import type Mithril from 'mithril';
 
 type ModelType =
   | Post
@@ -25,49 +27,69 @@ export interface IPostMetaAttrs extends ComponentAttrs {
  */
 export default class PostMeta<CustomAttrs extends IPostMetaAttrs = IPostMetaAttrs> extends Component<CustomAttrs> {
   view() {
+    return <div className="Dropdown PostMeta">{this.viewItems().toArray()}</div>;
+  }
+
+  viewItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    const post = this.attrs.post;
+    const permalink = this.getPermalink(post);
+    const time = post.createdAt();
+
+    items.add(
+      'time',
+      <button
+        className={classList({
+          'Button Button--text': true,
+          'Dropdown-toggle Button--link': !!permalink,
+        })}
+        onclick={permalink ? this.selectPermalink.bind(this) : undefined}
+        data-toggle="dropdown"
+      >
+        {humanTime(time)}
+      </button>,
+      100
+    );
+
+    items.add('meta-dropdown', !!permalink && <div className="Dropdown-menu dropdown-menu">{this.metaItems().toArray()}</div>, 90);
+
+    return items;
+  }
+
+  metaItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
     const post = this.attrs.post;
     const time = post.createdAt();
     const permalink = this.getPermalink(post);
     const touch = 'ontouchstart' in document.documentElement;
 
-    // When the dropdown menu is shown, select the contents of the permalink
+    items.add('post-number', <span className="PostMeta-number">{this.postIdentifier(post)}</span>, 100);
-    // input so that the user can quickly copy the URL.
-    const selectPermalink = function (this: Element, e: MouseEvent) {
-      setTimeout(() => $(this).parent().find('.PostMeta-permalink').select());
 
-      e.redraw = false;
+    items.add('post-time', <span className="PostMeta-time">{fullTime(time)}</span>, 90);
-    };
 
-    return (
+    items.add(
-      <div className="Dropdown PostMeta">
+      'post-ip',
-        <button
+      <span className="PostMeta-ip">
-          className={classList({
+        <IPAddress ip={post.ipAddress?.()} />
-            'Button Button--text': true,
+      </span>,
-            'Dropdown-toggle Button--link': !!permalink,
+      80
-          })}
-          onclick={permalink ? selectPermalink : undefined}
-          data-toggle="dropdown"
-        >
-          {humanTime(time)}
-        </button>
-
-        {!!permalink && (
-          <div className="Dropdown-menu dropdown-menu">
-            <span className="PostMeta-number">{this.postIdentifier(post)}</span> <span className="PostMeta-time">{fullTime(time)}</span>{' '}
-            <span className="PostMeta-ip">
-              <IPAddress ip={post.ipAddress?.()} />
-            </span>
-            {touch ? (
-              <a className="Button PostMeta-permalink" href={permalink}>
-                {permalink}
-              </a>
-            ) : (
-              <input className="FormControl PostMeta-permalink" value={permalink} onclick={(e: MouseEvent) => e.stopPropagation()} />
-            )}
-          </div>
-        )}
-      </div>
     );
+
+    items.add(
+      'permalink',
+      touch ? (
+        <a className="Button PostMeta-permalink" href={permalink}>
+          {permalink}
+        </a>
+      ) : (
+        <input className="FormControl PostMeta-permalink" value={permalink} onclick={(e: MouseEvent) => e.stopPropagation()} />
+      ),
+      0
+    );
+
+    return items;
   }
 
   /**
@@ -81,6 +103,15 @@ export default class PostMeta<CustomAttrs extends IPostMetaAttrs = IPostMetaAttr
     return this.attrs.permalink?.() || null;
   }
 
+  /**
+   * Selects the permalink input when the dropdown is shown.
+   */
+  selectPermalink(e: MouseEvent) {
+    const $button = $(e.currentTarget as HTMLElement);
+    setTimeout(() => $button.parent().find('.PostMeta-permalink').select());
+    e.redraw = false;
+  }
+
   postIdentifier(post: ModelType): string | null {
     if (post instanceof Post) {
       return app.translator.trans('core.forum.post.number_tooltip', { number: post.number() }, true);