@grandlinex/react-components
Version:
308 lines (307 loc) • 16.5 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.getFormInputs = getFormInputs;
exports.def = def;
exports.DefaultInput = DefaultInput;
exports.FormRow = FormRow;
const react_1 = __importDefault(require("react"));
const react_icons_1 = require("@grandlinex/react-icons");
const FormTypes_1 = require("./FormTypes");
const TagSelector_1 = require("../other/TagSelector/TagSelector");
const UserSelector_1 = __importDefault(require("../other/UserSelector/UserSelector"));
const CheckBox_1 = __importDefault(require("./inputs/CheckBox"));
const IconSel_1 = __importDefault(require("./inputs/IconSel"));
const IconTextSel_1 = __importDefault(require("./inputs/IconTextSel"));
const ContentSwitcher_1 = __importDefault(require("../controlls/ContentSwitch/ContentSwitcher"));
const util_1 = require("../../util");
const ImageSel_1 = __importDefault(require("./inputs/ImageSel"));
const FormDropdown_1 = __importDefault(require("./inputs/FormDropdown"));
const FormElement_1 = __importStar(require("./FormElement"));
const BadgeColorSelector_1 = __importDefault(require("./inputs/BadgeColorSelector"));
/**
* Get FormInputList
* @param options
*/
function getFormInputs(options) {
const out = [];
options.forEach((option) => {
option.forEach((el) => {
if (Array.isArray(el)) {
out.push(...el);
}
else if (el) {
out.push(el);
}
});
});
return out;
}
/**
* Define Default value for empty field
* @param options
*/
function def(options) {
const dd = {};
getFormInputs(options).forEach((sel) => {
const { key, type, value } = sel;
switch (type) {
case FormTypes_1.InputOptionType.TAG_SELECTOR:
dd[key] = value || [];
break;
case FormTypes_1.InputOptionType.CUSTOM:
dd[key] = value || sel.customElement?.init || null;
break;
case FormTypes_1.InputOptionType.TEXT:
case FormTypes_1.InputOptionType.TEXT_FIELD:
case FormTypes_1.InputOptionType.PASSWORD:
case FormTypes_1.InputOptionType.COLOR:
case FormTypes_1.InputOptionType.TIME:
case FormTypes_1.InputOptionType.DATE:
case FormTypes_1.InputOptionType.DATE_TIME:
case FormTypes_1.InputOptionType.USER_SELECTOR:
dd[key] = value || '';
break;
case FormTypes_1.InputOptionType.NUMBER:
case FormTypes_1.InputOptionType.RANGE:
case FormTypes_1.InputOptionType.CONTENT_SWITCH:
dd[key] = value || 0;
break;
case FormTypes_1.InputOptionType.DROPDOWN:
dd[key] = sel.items?.[0]?.key || '';
break;
case FormTypes_1.InputOptionType.CHECKBOX:
dd[key] = value || false;
break;
case FormTypes_1.InputOptionType.BADGE_COLOR_SELECTOR:
dd[key] = value || {
text: 'blue',
mode: 'blue',
color01: '#000000',
color02: '#ffffff',
};
break;
default:
break;
}
});
return dd;
}
function ClearContainer({ children, clear, show, }) {
return (react_1.default.createElement("span", { className: "glx-clear-container" },
children,
show ? (react_1.default.createElement("div", { className: "glx-clear-container-btn" },
react_1.default.createElement("button", { onClick: clear },
react_1.default.createElement(react_icons_1.IOCloseCircleOutline, null)))) : (react_1.default.createElement("div", { style: { width: 24, height: 32 } }))));
}
function DefaultInput({ inp, e, numeric = false, form, updateForm, enterHandler, clearContainer, }) {
const field = (0, FormElement_1.useFormElContext)();
const { key, submitOnEnter, restriction, placeholder, disabled, autoFocus, readOnly, autoComplete, onChange, required, } = inp;
const comp = (react_1.default.createElement("input", { type: e, required: required, onKeyUp: submitOnEnter ? enterHandler : undefined, value: form[key], onFocus: () => field.setFocus(true), onBlur: () => field.setFocus(false), min: restriction?.min, max: restriction?.max, autoFocus: autoFocus, placeholder: placeholder, readOnly: readOnly, pattern: restriction?.pattern, disabled: disabled, autoComplete: autoComplete ? 'on' : 'off', onChange: (event) => {
if (numeric) {
onChange?.(parseFloat(event.target.value));
updateForm(key, parseFloat(event.target.value));
}
else {
onChange?.(event.target.value);
updateForm(key, event.target.value);
}
} }));
if (clearContainer && !inp.disabled) {
return (react_1.default.createElement(ClearContainer, { show: !!form[key], clear: clearContainer }, comp));
}
return comp;
}
/**
* Define how to render the Element Row
*/
function FormRow({ option, form, updateForm, submitForm, error, }) {
const context = (0, util_1.useUIContext)();
const enterHandler = (e) => {
if (e.key === 'Enter' || e.code === 'Enter') {
submitForm();
}
return null;
};
return (react_1.default.createElement("div", { key: option.reduce((acc, cur) => {
return acc + cur && Array.isArray(cur)
? cur.reduce((a, c) => {
return a + c.key;
}, '')
: cur?.key || '';
}, ''), className: "glx-form--row" }, option.map((opt) => {
if (!opt) {
return null;
}
let doList;
if (Array.isArray(opt)) {
doList = opt;
}
else {
doList = [opt];
}
const input = doList.map((cur) => {
const { type, key, items, required, submitOnEnter, preload, onChange, disabled, autoFocus, accept, restriction, placeholder, help, } = cur;
let helpText;
let iType;
let noDecoration = false;
/**
* Define controlled input
* Important:
* set the current value prop to `form[key]` - bind the field to the tab data
* bind the change function to the tab data - calling `updateForm(key, $inputVal)`;
*/
switch (type) {
case FormTypes_1.InputOptionType.DROPDOWN:
iType = (react_1.default.createElement(FormDropdown_1.default, { key: key, className: "glx-input-dark glx-w-full glx-m-2", value: form[key], autoFocus: autoFocus, required: required, disabled: disabled, onChange: (ev) => {
onChange?.(ev.target.value);
updateForm(key, ev.target.value);
}, items: items ?? [] }));
break;
case FormTypes_1.InputOptionType.CUSTOM:
iType = cur.customElement?.render(key, form, updateForm, items);
break;
case FormTypes_1.InputOptionType.TEXT:
iType = (react_1.default.createElement(DefaultInput, { e: "text", form: form, inp: cur, clearContainer: () => updateForm(key, ''), updateForm: updateForm, enterHandler: enterHandler }));
break;
case FormTypes_1.InputOptionType.RANGE:
iType = (react_1.default.createElement(DefaultInput, { e: "range", form: form, inp: cur, updateForm: updateForm, enterHandler: enterHandler }));
break;
case FormTypes_1.InputOptionType.COLOR:
iType = (react_1.default.createElement(DefaultInput, { e: "color", form: form, inp: cur, updateForm: updateForm, enterHandler: enterHandler }));
break;
case FormTypes_1.InputOptionType.DATE:
iType = (react_1.default.createElement(DefaultInput, { e: "date", form: form, inp: cur, updateForm: updateForm, enterHandler: enterHandler, clearContainer: () => updateForm(key, '') }));
break;
case FormTypes_1.InputOptionType.TIME:
iType = (react_1.default.createElement(DefaultInput, { e: "time", form: form, inp: cur, updateForm: updateForm, enterHandler: enterHandler, clearContainer: () => updateForm(key, '') }));
break;
case FormTypes_1.InputOptionType.DATE_TIME:
iType = (react_1.default.createElement(DefaultInput, { e: "datetime-local", form: form, inp: cur, updateForm: updateForm, enterHandler: enterHandler, clearContainer: () => updateForm(key, '') }));
break;
case FormTypes_1.InputOptionType.NUMBER:
iType = (react_1.default.createElement(DefaultInput, { e: "number", form: form, inp: cur, updateForm: updateForm, enterHandler: enterHandler, numeric: true }));
break;
case FormTypes_1.InputOptionType.PASSWORD:
iType = (react_1.default.createElement(DefaultInput, { e: "password", form: form, inp: cur, updateForm: updateForm, enterHandler: enterHandler }));
break;
case FormTypes_1.InputOptionType.FILE:
iType = (react_1.default.createElement("input", { key: key, type: "file", required: required, onKeyUp: submitOnEnter ? enterHandler : undefined, placeholder: placeholder, accept: accept, autoFocus: autoFocus, disabled: disabled, onChange: (event) => {
onChange?.(event.target.files?.[0] || null, event.target.value);
updateForm(key, event.target.value);
} }));
break;
case FormTypes_1.InputOptionType.ICON_TEXT:
iType = (react_1.default.createElement(IconTextSel_1.default, { key: key, onChange: (d) => {
onChange?.(d);
updateForm(key, d);
}, disabled: disabled, placeholder: placeholder, sel: form[key] }));
break;
case FormTypes_1.InputOptionType.CHECKBOX:
iType = (react_1.default.createElement("div", null,
react_1.default.createElement(CheckBox_1.default, { key: key, disabled: disabled, checked: form[key], large: true, onChange: () => {
onChange?.(!form[key]);
updateForm(key, !form[key]);
} })));
noDecoration = true;
break;
case FormTypes_1.InputOptionType.ICON:
iType = (react_1.default.createElement("div", { className: "glx-pb-4" },
react_1.default.createElement(IconSel_1.default, { key: key, disabled: disabled, sel: form[key], onChange: (x) => {
onChange?.(x);
updateForm(key, x);
} })));
break;
case FormTypes_1.InputOptionType.CONTENT_SWITCH:
iType = (react_1.default.createElement("div", { key: key },
react_1.default.createElement(ContentSwitcher_1.default, { selectedIndex: form[key] ?? 0, onChange: (x) => {
onChange?.(x);
updateForm(key, x);
}, items: items ?? [] })));
noDecoration = true;
break;
case FormTypes_1.InputOptionType.TAG_SELECTOR:
helpText = context.translation.get('glx.form.tagSelector.helpText');
iType = (react_1.default.createElement(TagSelector_1.TagSelector, { key: key, placeholder: placeholder, disabled: disabled, value: form[key], autoFocus: autoFocus, items: items?.map((e) => ({
key: e.key,
text: e.name,
icon: e.icon ?? 'IOPricetagOutline',
color: e.meta,
})), maxOptions: restriction?.max, onChange: (els, dif) => {
onChange?.(els, dif);
updateForm(key, els);
} }));
break;
case FormTypes_1.InputOptionType.IMAGE_SELECT:
iType = (react_1.default.createElement(ImageSel_1.default, { items: items?.map((x) => ({
title: x.name,
...x,
...x.meta,
})) ?? [], extended: restriction?.extended, maxStep: restriction?.max, selected: form[key], onChange: (els) => {
onChange?.(els?.key);
updateForm(key, els?.key);
} }));
break;
case FormTypes_1.InputOptionType.USER_SELECTOR:
iType = (react_1.default.createElement(UserSelector_1.default, { key: key, placeholder: placeholder, disabled: disabled, value: form[key], onChange: (els) => {
onChange?.(els);
updateForm(key, els);
}, searchFC: preload, limit: restriction?.max || 20, list: items && items.length > 0
? items.map((e) => e.meta)
: undefined }));
break;
case FormTypes_1.InputOptionType.TEXT_FIELD:
iType = (react_1.default.createElement("textarea", { key: key, placeholder: placeholder, required: required, disabled: disabled, value: form[key], autoFocus: autoFocus, onChange: (event) => {
onChange?.(event.target.value);
updateForm(key, event.target.value);
}, rows: restriction?.rows ?? 5 }));
break;
case FormTypes_1.InputOptionType.BADGE_COLOR_SELECTOR:
iType = (react_1.default.createElement(BadgeColorSelector_1.default, { key: key, disabled: disabled, sel: form[key], onChange: (event) => {
onChange?.(event);
updateForm(key, event);
} }));
break;
default:
return null;
}
if (!helpText) {
helpText = help;
}
return {
...cur,
extension: {
iType,
noDecoration,
helpText,
},
};
});
return (react_1.default.createElement("div", { key: `container-${doList[0]?.key}`, className: `glx-form--input glx-form--sub-row glx-form--input--split-${option.length}` }, input.map((v) => v ? (react_1.default.createElement(FormElement_1.default, { element: v, error: error?.field?.find((e) => e.key === v?.key), split: doList.length }, v.extension.iType)) : null)));
})));
}