@focuson/form_components
Version:
Components that can be used by @focuson/forms
83 lines (82 loc) • 5.13 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.BooleanYNInput = exports.BooleanInput = exports.NumberInput = exports.StringInput = exports.NonCheckboxInput = exports.CheckboxInput = exports.Input = exports.cleanInputProps = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const transformers_1 = require("./transformers");
const utils_1 = require("@focuson/utils");
const CustomError_1 = require("./CustomError");
const cleanInputProps = (p) => {
const result = Object.assign(Object.assign({}, p), { 'data-validationmessage': p.label });
delete result.allButtons;
delete result.errorMessage;
delete result.state;
delete result.label;
delete result.parentState;
delete result.readonly;
delete result.ariaLabel;
delete result.noLabel;
delete result.scrollAfter;
delete result.enabledBy;
delete result.regexForChange;
delete result.className;
return result;
};
exports.cleanInputProps = cleanInputProps;
const Input = (tProps) => (0, transformers_1.isCheckboxProps)(tProps) ? (0, exports.CheckboxInput)(tProps) : (0, exports.NonCheckboxInput)(tProps);
exports.Input = Input;
const CheckboxInput = (tProps) => {
const { transformer, checkbox, selectFn } = tProps;
return (props) => {
const { state, mode, id, parentState, onChange, readonly, enabledBy, onBlur } = props;
const onChangeEventHandler = (e) => {
var _a, _b, _c;
(0, CustomError_1.setEdited)(e === null || e === void 0 ? void 0 : e.target, (_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.checked) === null || _b === void 0 ? void 0 : _b.toString());
selectFn(state, id, transformer((_c = e === null || e === void 0 ? void 0 : e.target) === null || _c === void 0 ? void 0 : _c.checked), parentState, onChange, true);
};
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ type: 'checkbox' }, (0, exports.cleanInputProps)(props), { className: 'input', checked: checkbox(state.optJson()), disabled: (0, utils_1.disabledFrom)(enabledBy) || mode === 'view' || readonly, onBlur: onBlur, onChange: (e) => onChangeEventHandler(e) })), (0, jsx_runtime_1.jsx)("span", { className: "checkmark" })] });
};
};
exports.CheckboxInput = CheckboxInput;
function findNextTabStop() {
var el = document.activeElement;
var universe = document.querySelectorAll('input, button, select, textarea, a[href]');
var list = Array.prototype.filter.call(universe, function (item) { return item.tabIndex >= "0"; });
var index = list.indexOf(el);
// console.log('findNextTabstop - el',el)
// console.log('findNextTabstop - list',list)
// console.log('findNextTabstop - index',index)
const result = list[index + 1] || list[0];
// console.log('findNextTabstop - result',result)
return result;
}
const NonCheckboxInput = (tProps) => {
const { transformer, type, selectFn } = tProps;
if (typeof selectFn !== 'function') {
console.error('selectFn', selectFn);
throw new Error(`selectFn must be a function it is ${selectFn}`);
}
return (props) => {
const { state, mode, id, parentState, onChange, readonly, enabledBy, onBlur, regexForChange, errorMessage, tabWhenLengthExceeds } = props;
const onChangeEventHandler = (transformer, e) => {
var _a;
const value = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value;
(0, CustomError_1.setEdited)(e === null || e === void 0 ? void 0 : e.target, value);
if (tabWhenLengthExceeds && value.toString().length >= tabWhenLengthExceeds) {
// console.log('focus on next')
findNextTabStop().focus();
}
return selectFn(state, id, transformer(value), parentState, onChange, regexForChange === undefined || value.match(regexForChange) !== null);
};
const value = tProps.default === undefined ? state.optJson() : state.optJsonOr(tProps.default);
return (0, jsx_runtime_1.jsx)("input", Object.assign({ className: "input", type: type }, (0, exports.cleanInputProps)(props), { disabled: (0, utils_1.disabledFrom)(enabledBy), onBlur: onBlur, "data-errormessage": errorMessage, value: value === undefined || value === null ? '' : `${value}`, readOnly: mode === 'view' || readonly, onChange: (e) => onChangeEventHandler(transformer, e) }));
};
};
exports.NonCheckboxInput = NonCheckboxInput;
const StringInput = (props) => (0, exports.Input)(transformers_1.StringTransformer)(props);
exports.StringInput = StringInput;
const NumberInput = (props) => (0, exports.Input)(transformers_1.NumberTransformer)(props);
exports.NumberInput = NumberInput;
const BooleanInput = (props) => (0, exports.Input)(transformers_1.BooleanTransformer)(props);
exports.BooleanInput = BooleanInput;
const BooleanYNInput = (props) => (0, exports.Input)(transformers_1.BooleanYNTransformer)(props);
exports.BooleanYNInput = BooleanYNInput;