From 470c0a80025f5d52bd66c16d1bfbccb1bfcaf6b0 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Wed, 23 Feb 2022 20:03:46 +0100
Subject: [Glitch] Change report modal to include category selection in web UI

Port a9a43de6d1502a6cbb388a5dbcd0e8532c236e64 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../glitch/features/report/components/option.js    | 60 ++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 app/javascript/flavours/glitch/features/report/components/option.js

(limited to 'app/javascript/flavours/glitch/features/report/components/option.js')

diff --git a/app/javascript/flavours/glitch/features/report/components/option.js b/app/javascript/flavours/glitch/features/report/components/option.js
new file mode 100644
index 000000000..7e94f0654
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/report/components/option.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Check from 'flavours/glitch/components/check';
+
+export default class Option extends React.PureComponent {
+
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    checked: PropTypes.bool,
+    label: PropTypes.node,
+    description: PropTypes.node,
+    onToggle: PropTypes.func,
+    multiple: PropTypes.bool,
+    labelComponent: PropTypes.node,
+  };
+
+  handleKeyPress = e => {
+    const { value, checked, onToggle } = this.props;
+
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.stopPropagation();
+      e.preventDefault();
+      onToggle(value, !checked);
+    }
+  }
+
+  handleChange = e => {
+    const { value, onToggle } = this.props;
+    onToggle(value, e.target.checked);
+  }
+
+  render () {
+    const { name, value, checked, label, labelComponent, description, multiple } = this.props;
+
+    return (
+      <label className='dialog-option poll__option selectable'>
+        <input type={multiple ? 'checkbox' : 'radio'} name={name} value={value} checked={checked} onChange={this.handleChange} />
+
+        <span
+          className={classNames('poll__input', { active: checked, checkbox: multiple })}
+          tabIndex='0'
+          role='radio'
+          onKeyPress={this.handleKeyPress}
+          aria-checked={checked}
+          aria-label={label}
+        >{checked && <Check />}</span>
+
+        {labelComponent ? labelComponent : (
+          <span className='poll__option__text'>
+            <strong>{label}</strong>
+            {description}
+          </span>
+        )}
+      </label>
+    );
+  }
+
+}
-- 
cgit