Use Preact for settings and show validation

1 files changed, 50 insertions, 0 deletions

diff --git a/src/settings/components/ui/input.jsx b/src/settings/components/ui/input.jsx
new file mode 100644
index 0000000..9b6c229
--- /dev/null
+++ b/src/settings/components/ui/input.jsx
@@ -0,0 +1,50 @@
+import { h, Component } from 'preact';
+import './input.scss';
+
+class Input extends Component {
+
+  renderRadio(props) {
+    let inputClasses = 'form-field-input';
+    if (props.error) {
+      inputClasses += ' input-error';
+    }
+    return <div>
+      <label>
+        <input className={ inputClasses } type='radio' {...props} />
+        { props.label }
+      </label>
+    </div>;
+  }
+
+  renderTextArea(props) {
+    let inputClasses = 'form-field-input';
+    if (props.error) {
+      inputClasses += ' input-error';
+    }
+    return <div>
+      <label
+        className='form-field-label'
+        htmlFor={props.id}
+      >{ props.label }</label>
+      <textarea className={inputClasses} {...props} />
+
+      <p className='form-field-error'>{ this.props.error }</p>
+    </div>;
+  }
+
+  render() {
+    let { type } = this.props;
+
+    switch (this.props.type) {
+    case 'radio':
+      return this.renderRadio(this.props);
+    case 'textarea':
+      return this.renderTextArea(this.props);
+    default:
+      console.warn(`Unsupported input type ${type}`);
+    }
+    return null;
+  }
+}
+
+export default Input;