Add PowerLevelSelector component

Signed-off-by: Ajay Bura <ajbura@gmail.com>

diff --git a/public/res/ic/outlined/check.svg b/public/res/ic/outlined/check.svg
new file mode 100644 (file)
index 0000000..72a1832
--- /dev/null
+++ b/public/res/ic/outlined/check.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<polygon points="9.5,14.1 6,10.6 4.6,12 8.1,15.5 9.5,16.9 19.4,7 18,5.6 "/>
+</svg>

diff --git a/src/app/molecules/power-level-selector/PowerLevelSelector.jsx b/src/app/molecules/power-level-selector/PowerLevelSelector.jsx
new file mode 100644 (file)
index 0000000..7d531bf
--- /dev/null
+++ b/src/app/molecules/power-level-selector/PowerLevelSelector.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './PowerLevelSelector.scss';
+
+import IconButton from '../../atoms/button/IconButton';
+import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
+
+import CheckIC from '../../../../public/res/ic/outlined/check.svg';
+
+function PowerLevelSelector({
+  value, max, onSelect,
+}) {
+  const handleSubmit = (e) => {
+    const powerLevel = e.target.elements['power-level'];
+    if (!powerLevel) return;
+    onSelect(Number(powerLevel));
+  };
+
+  return (
+    <div className="power-level-selector">
+      <MenuHeader>Power level selector</MenuHeader>
+      <form onSubmit={(e) => { e.preventDefault(); handleSubmit(e); }}>
+        <input
+          className="input"
+          defaultValue={value}
+          type="number"
+          name="power-level"
+          placeholder="Power level"
+          max={max}
+          autoComplete="off"
+          required
+        />
+        <IconButton variant="primary" src={CheckIC} type="submit" />
+      </form>
+      {max >= 0 && <MenuHeader>Presets</MenuHeader>}
+      {max >= 100 && <MenuItem variant={value === 100 ? 'positive' : 'surface'} onClick={() => onSelect(100)}>Admin - 100</MenuItem>}
+      {max >= 50 && <MenuItem variant={value === 50 ? 'positive' : 'surface'} onClick={() => onSelect(50)}>Mod - 50</MenuItem>}
+      {max >= 0 && <MenuItem variant={value === 0 ? 'positive' : 'surface'} onClick={() => onSelect(0)}>Member - 0</MenuItem>}
+    </div>
+  );
+}
+
+PowerLevelSelector.propTypes = {
+  value: PropTypes.number.isRequired,
+  max: PropTypes.number.isRequired,
+  onSelect: PropTypes.func.isRequired,
+};
+
+export default PowerLevelSelector;

diff --git a/src/app/molecules/power-level-selector/PowerLevelSelector.scss b/src/app/molecules/power-level-selector/PowerLevelSelector.scss
new file mode 100644 (file)
index 0000000..14a151d
--- /dev/null
+++ b/src/app/molecules/power-level-selector/PowerLevelSelector.scss
@@ -0,0 +1,20 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
+.power-level-selector {
+  & .context-menu__item .text {
+    margin: 0 !important;
+  }
+
+  & form {
+    margin: var(--sp-normal);
+    display: flex;
+      
+    & input {
+      @extend .cp-fx__item-one;
+      @include dir.side(margin, 0, var(--sp-tight));
+      width: 148px;
+      padding: 9px var(--sp-tight);
+    }
+  }
+}
\ No newline at end of file