refactor: break down logic

js/src/forum/components/Poll/PollOption.tsx

@@ -2,19 +2,13 @@ import * as Mithril from 'mithril';
 import Component from 'flarum/common/Component';
 import PollOptionLabel from './PollOptionLabel';
 import PollOptionDescription from './PollOptionDescription';
+import PollOptionInput from './PollOptionInput';
 
 export default class PollOption extends Component {
   view(): Mithril.Children {
     return (
       <label className="PollOption-tmp">
-        <input
-          type="radio"
-          name="privacy-setting"
-          value="Private to Project Members"
-          className="PollOption-input"
-          aria-labelledby="privacy-setting-1-label"
-          aria-describedby="privacy-setting-1-description"
-        />
+        <PollOptionInput id={1} isResult={false} name="privacy-setting" value="Private to Project Members Nice" />
         <span className="PollOption-information">
           <PollOptionLabel text="Poll Option Label" />
           <PollOptionDescription text="Poll Option Description" />

js/src/forum/components/Poll/PollOptionInput.tsx

@@ -0,0 +1,26 @@
+import * as Mithril from 'mithril';
+import Component, { ComponentAttrs } from 'flarum/common/Component';
+
+interface PollOptionInputAttrs extends ComponentAttrs {
+  id: Number; // for example 1
+  name: String; // for example privacy-setting
+  value: String; // for example Private to Project Members
+  isResult?: Boolean;
+}
+
+export default class PollOptionInput extends Component<PollOptionInputAttrs> {
+  view(): Mithril.Children {
+    const { isResult } = this.attrs;
+    return (
+      <input
+        type="radio"
+        name={this.attrs.name}
+        value={this.attrs.value}
+        style={{ opacity: isResult ? 0 : 1 }}
+        className="PollOption-input"
+        aria-labelledby={`${this.attrs.name}-${this.attrs.id}-label`}
+        aria-describedby={`${this.attrs.name}-${this.attrs.id}-description`}
+      />
+    );
+  }
+}

js/src/forum/components/Poll/PollResult.tsx

@@ -1,27 +1,21 @@
 import * as Mithril from 'mithril';
 import Component from 'flarum/common/Component';
 import PollOptionLabel from './PollOptionLabel';
+import PollResultsNumber from './PollResultNumber';
+import PollOptionInput from './PollOptionInput';
 
 export default class PollResults extends Component {
   view(): Mithril.Children {
     return (
       <label className="PollResult">
-        <input
-          type="radio"
-          name="privacy-setting"
-          value="Private to Project Members"
-          className="PollOption-input"
-          style="opacity: 0;"
-          aria-labelledby="privacy-setting-1-label"
-          aria-describedby="privacy-setting-1-description"
-        />
+        <PollOptionInput id={1} isResult={true} name="privacy-setting" value="Private to Project Members Nice" />
         <span className="PollResult-information">
           <div className="PollResults-row">
             <PollOptionLabel text="Poll Option Label" />
-            <span className="PollResult-number">76 %</span>
+            <PollResultsNumber number={64} />
           </div>
 
-          <input type="range" min="0" max="100" value="76" step="1" className="PollResult-input" />
+          <input type="range" min="0" max="100" value="64" step="1" className="PollResult-input" />
         </span>
       </label>
     );

js/src/forum/components/Poll/PollResultNumber.tsx

@@ -0,0 +1,12 @@
+import * as Mithril from 'mithril';
+import Component, { ComponentAttrs } from 'flarum/common/Component';
+
+interface PollResultsNumberAttrs extends ComponentAttrs {
+  number: Number;
+}
+
+export default class PollResultsNumber extends Component<PollResultsNumberAttrs> {
+  view(): Mithril.Children {
+    return <span className="PollResult-number">{this.attrs.number} %</span>;
+  }
+}

resources/less/forum.less

@@ -451,6 +451,9 @@
   accent-color: var(--poll-option-accent-color);
 }
 
+.PollResults-input {
+  pointer-events: none;
+}
 .PollOption-information {
   display: flex;
   margin-left: 10px;