refactor: split formFields into separate files in common/components/f…

…orms/

src/common/components/forms/booleanField.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { FormSelectField } from './selectField';
+
+export const FormBooleanField = ({
+    label,
+    onSelect,
+    items = { true: 'On', false: 'Off' },
+    activeItem,
+    disabled,
+}: {
+    label: string;
+    onSelect: (value: boolean) => void;
+    items?: Record<string, string>;
+    activeItem?: boolean;
+    disabled?: boolean;
+}) => {
+    const onSelectHandler = (value: string | null) => {
+        onSelect(value === 'true');
+    };
+    return (
+        <FormSelectField
+            label={label}
+            activeItem={activeItem ? 'true' : 'false'}
+            items={items}
+            onSelect={onSelectHandler}
+            disabled={disabled}
+        />
+    );
+};

src/common/components/forms/buttonField.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Form, Row, Col, Button } from 'react-bootstrap';
+
+export const FormButtonField = ({
+    disabled,
+    text,
+    icon,
+    onClick,
+    style = 'success',
+}: {
+    disabled?: boolean;
+    text: string;
+    icon?: string;
+    onClick: () => void;
+    style?: 'success' | 'danger';
+}) => {
+    return (
+        <>
+            <Form.Group>
+                <Row className="text-center">
+                    <Col />
+                    <Col sm="auto">
+                        <Button onClick={onClick} variant={style} disabled={disabled}>
+                            {icon && <i className={`fa fa-${icon}`}></i>} {text}
+                        </Button>
+                    </Col>
+                    <Col />
+                </Row>
+            </Form.Group>
+        </>
+    );
+};

src/common/components/forms/field.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Col, Form, Row } from 'react-bootstrap';
+
+export const FormField = ({
+    children,
+    label,
+    disabled,
+}: {
+    children: React.JSX.Element;
+    label: string;
+    disabled?: boolean;
+}) => {
+    return (
+        <Form.Group as={Row} className={`mb-1 ${disabled ? 'text-muted' : ''}`}>
+            <Form.Label column sm="7">
+                {label}
+            </Form.Label>
+            <Col sm="5">{children}</Col>
+        </Form.Group>
+    );
+};

src/common/components/forms/index.tsx

@@ -0,0 +1,13 @@
+import { FormBooleanField } from './booleanField';
+import { FormButtonField } from './buttonField';
+import { FormInputField } from './inputField';
+import { FormNumberField } from './numberField';
+import { FormSelectField } from './selectField';
+
+export {
+    FormSelectField,
+    FormNumberField,
+    FormBooleanField,
+    FormInputField,
+    FormButtonField,
+};

src/common/components/forms/inputField.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Form, InputGroup } from 'react-bootstrap';
+
+export const FormInputField = ({
+    disabled,
+    text,
+    icon,
+    onChange,
+    placeholder,
+    type = 'text',
+}: {
+    disabled?: boolean;
+    text: string;
+    icon?: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    type: 'text' | 'url' | 'password';
+}) => {
+    return (
+        <>
+            <Form.Group>
+                <InputGroup className="mb-3">
+                    {icon && (
+                        <InputGroup.Text>
+                            <i className={`fa fa-${icon}`}></i>
+                        </InputGroup.Text>
+                    )}
+                    <Form.Control
+                        disabled={disabled}
+                        type={type}
+                        defaultValue={text}
+                        onChange={e => {
+                            onChange(e.target.value);
+                        }}
+                        placeholder={placeholder}
+                    />
+                </InputGroup>
+            </Form.Group>
+        </>
+    );
+};

src/common/components/forms/numberField.tsx

@@ -0,0 +1,35 @@
+import React, { useContext } from 'react';
+import { Form } from 'react-bootstrap';
+import { FormField } from './field';
+import { ViewConfigContext } from '../react-types';
+
+export const FormNumberField = ({
+    label,
+    onChange,
+    min,
+    max,
+    disabled,
+}: {
+    label: string;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    disabled?: boolean;
+}) => {
+    const viewConfig = useContext(ViewConfigContext);
+    const onChangeHandler = e => {
+        let value = e.target.value;
+        if (min && value < min) value = min;
+        if (max && value > max) value = max;
+        onChange(parseInt(value));
+    };
+    return (
+        <FormField label={label} disabled={disabled}>
+            <Form.Control
+                type="number"
+                defaultValue={viewConfig.columns}
+                onChange={onChangeHandler}
+            />
+        </FormField>
+    );
+};

src/common/components/forms/selectField.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Nav } from 'react-bootstrap';
+import { FormField } from './field';
+
+export const FormSelectField = ({
+    label,
+    onSelect,
+    items,
+    activeItem,
+    disabled,
+}: {
+    label: string;
+    onSelect: (value: string | null) => void;
+    items: Record<string, string>;
+    activeItem?: string;
+    disabled?: boolean;
+}) => {
+    return (
+        <FormField label={label} disabled={disabled}>
+            <Nav justify variant="pills" activeKey={activeItem} onSelect={onSelect}>
+                {Object.entries(items).map(([key, value]) => (
+                    <Nav.Item key={key} className="me-1">
+                        <Nav.Link eventKey={key} disabled={disabled}>
+                            {value}
+                        </Nav.Link>
+                    </Nav.Item>
+                ))}
+            </Nav>
+        </FormField>
+    );
+};

src/options/pages/configuration/components/jsonEditor.tsx

@@ -1,4 +1,4 @@
-import { FormButtonField } from 'common/components/formFields';
+import { FormButtonField } from 'common/components/forms';
 import React, { useState } from 'react';
 import { Col, Form, Row } from 'react-bootstrap';
 import './jsonEditor.css';