@visns-studio/visns-components 6.1.7 → 6.2.0

package/src/components/generic/reportSemanticSteps/SemanticValueInput.jsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { enumOptions } from '../reportSemantics';
+import styles from '../../styles/ReportSemantic.module.scss';
+
+const NUMERIC_TYPES = ['number', 'money', 'percent'];
+
+/**
+ * A single value input typed by the semantic field type.
+ *
+ * enum -> select of the declared values, date/datetime -> date input,
+ * boolean -> yes/no select, money/number/percent -> numeric input,
+ * everything else -> text.
+ */
+const SemanticValueInput = ({ type, field, value, onChange, ariaLabel }) => {
+    const commonProps = {
+        className: styles.input,
+        'aria-label': ariaLabel,
+        value: value ?? '',
+        onChange: (event) => onChange(event.target.value),
+    };
+
+    if (type === 'enum') {
+        const options = enumOptions(field);
+        return (
+            <select
+                className={styles.select}
+                aria-label={ariaLabel}
+                value={value ?? ''}
+                onChange={(event) => onChange(event.target.value)}
+            >
+                <option value="">Choose a value…</option>
+                {options.map((option) => (
+                    <option key={option.value} value={option.value}>
+                        {option.label}
+                    </option>
+                ))}
+            </select>
+        );
+    }
+
+    if (type === 'boolean') {
+        return (
+            <select
+                className={styles.select}
+                aria-label={ariaLabel}
+                value={value === '' || value == null ? '' : String(value)}
+                onChange={(event) => onChange(event.target.value)}
+            >
+                <option value="">Choose…</option>
+                <option value="1">Yes</option>
+                <option value="0">No</option>
+            </select>
+        );
+    }
+
+    if (type === 'date') {
+        return <input type="date" {...commonProps} />;
+    }
+
+    if (type === 'datetime') {
+        return <input type="datetime-local" {...commonProps} />;
+    }
+
+    if (NUMERIC_TYPES.includes(type)) {
+        return <input type="number" step="any" {...commonProps} />;
+    }
+
+    return <input type="text" {...commonProps} />;
+};
+
+SemanticValueInput.propTypes = {
+    type: PropTypes.string,
+    field: PropTypes.object,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    onChange: PropTypes.func.isRequired,
+    ariaLabel: PropTypes.string,
+};
+
+SemanticValueInput.defaultProps = {
+    type: 'text',
+    field: null,
+    value: '',
+    ariaLabel: 'Value',
+};
+
+/**
+ * Multi-value editor for the `in` / `not_in` operators. Enum fields get a
+ * checkbox list of declared values; everything else gets a comma-separated
+ * text box, which is the least surprising control for a free-text list.
+ */
+export const SemanticValueListInput = ({ type, field, values, onChange }) => {
+    const selected = Array.isArray(values) ? values : [];
+
+    if (type === 'enum') {
+        const options = enumOptions(field);
+        return (
+            <div className={styles.conditionValues}>
+                {options.map((option) => (
+                    <label key={option.value} className={styles.fieldCheckbox}>
+                        <input
+                            type="checkbox"
+                            checked={selected.includes(option.value)}
+                            onChange={(event) =>
+                                onChange(
+                                    event.target.checked
+                                        ? [...selected, option.value]
+                                        : selected.filter(
+                                              (entry) => entry !== option.value
+                                          )
+                                )
+                            }
+                        />
+                        <span>{option.label}</span>
+                    </label>
+                ))}
+            </div>
+        );
+    }
+
+    return (
+        <input
+            type="text"
+            className={styles.input}
+            aria-label="Values, separated by commas"
+            placeholder="Separate values with commas"
+            value={selected.join(', ')}
+            onChange={(event) =>
+                onChange(
+                    event.target.value
+                        .split(',')
+                        .map((entry) => entry.trim())
+                        .filter((entry) => entry !== '')
+                )
+            }
+        />
+    );
+};
+
+SemanticValueListInput.propTypes = {
+    type: PropTypes.string,
+    field: PropTypes.object,
+    values: PropTypes.array,
+    onChange: PropTypes.func.isRequired,
+};
+
+SemanticValueListInput.defaultProps = {
+    type: 'text',
+    field: null,
+    values: [],
+};
+
+export default SemanticValueInput;