@focuson/form_components/dist/src/labelAndDropdown.js

Components that can be used by @focuson/forms

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Dropdown = exports.LabelAndDropdown = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const utils_1 = require("@focuson/utils");
const state_1 = require("@focuson/state");
const label_1 = require("./label");
const labelAndInput_1 = require("./labelAndInput");
const makeButtons_1 = require("./makeButtons");
function LabelAndDropdown(props) {
    const { id, state, label, } = props;
    const validationmessage = props.validationmessage ? props.validationmessage : label;
    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `dropdown-container ${props.labelPosition == 'Horizontal' ? 'd-flex-inline' : ''}` }, { children: [(0, jsx_runtime_1.jsx)(label_1.Label, { state: state, htmlFor: id, label: label }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `${props.buttons && props.buttons.length > 0 ? 'dropdownAndButtons' : ''}` }, { children: [(0, jsx_runtime_1.jsx)(Dropdown, Object.assign({}, props, { validationmessage: validationmessage })), (0, makeButtons_1.makeButtons)(props)] }))] })));
}
exports.LabelAndDropdown = LabelAndDropdown;
function Dropdown(props) {
    const { enums, parentState, state, ariaLabel, id, mode, onChange, specificOnChange, readonly, pleaseSelect, size, required, enabledBy, validationmessage, regexForChange } = props;
    let selected = state.optJson();
    const statementDefined = !(selected === undefined || selected === null);
    if (statementDefined && typeof selected !== 'string')
        throw new Error(`Component ${id} has a selected value which isn't a string. It is ${JSON.stringify(selected, null, 2)}`);
    const hasValid = selected && Object.keys((0, utils_1.safeObject)(enums)).includes(selected.toString());
    const value = hasValid ? selected.toString() : undefined;
    const cssValidInput = hasValid || required === false ? '' : ' invalid';
    const onChangeEventHandler = (e) => {
        const newValue = e.target.value;
        const changeTxs = regexForChange === undefined || newValue.match(regexForChange) !== null ? [
            ...(0, labelAndInput_1.makeInputChangeTxs)(id, parentState, (0, utils_1.toArray)(specificOnChange === null || specificOnChange === void 0 ? void 0 : specificOnChange[newValue])),
            ...(0, labelAndInput_1.makeInputChangeTxs)(id, parentState, onChange),
        ] : [];
        state.massTransform((0, state_1.reasonFor)('LabelAndDropdown', 'onChange', id))([state.optional, () => newValue], ...changeTxs);
    };
    return ((0, jsx_runtime_1.jsxs)("select", Object.assign({ className: `select ${cssValidInput}`, value: value, "data-validationmessage": validationmessage, disabled: mode === 'view' || readonly || (0, utils_1.disabledFrom)(enabledBy), id: id, required: required, size: size, "aria-label": ariaLabel, onChange: onChangeEventHandler }, { children: [pleaseSelect && !hasValid && (0, jsx_runtime_1.jsx)("option", Object.assign({ selected: true }, { children: pleaseSelect })), Object.entries((0, utils_1.safeObject)(enums)).map(([value, name], key) => ((0, jsx_runtime_1.jsx)("option", Object.assign({ value: value }, { children: name }), key)))] })));
}
exports.Dropdown = Dropdown;