tycho-components 0.0.10-SNAPSHOT → 0.0.10-SNAPSHOT-2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import AppEditableField from './AppEditableField';
|
|
2
2
|
import FormField from './FormField';
|
|
3
3
|
import './style.scss';
|
|
4
|
+
type Item = {
|
|
5
|
+
uid?: string;
|
|
6
|
+
[key: string]: unknown;
|
|
7
|
+
};
|
|
4
8
|
type Props = {
|
|
5
9
|
translation: string;
|
|
6
|
-
item:
|
|
10
|
+
item: Item;
|
|
7
11
|
fields: FormField[];
|
|
8
12
|
save?: (field: AppEditableField) => void;
|
|
9
13
|
group?: string;
|
|
@@ -2,79 +2,94 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
2
2
|
import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
|
|
3
3
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
4
4
|
import { format } from 'date-fns-tz';
|
|
5
|
+
import { useCallback } from 'react';
|
|
5
6
|
import EasyEdit from 'react-easy-edit';
|
|
6
7
|
import { useTranslation } from 'react-i18next';
|
|
7
8
|
import Switch from 'react-switch';
|
|
8
9
|
import AppColorpicker from '../AppColorpicker';
|
|
9
10
|
import './style.scss';
|
|
11
|
+
// Utility to safely get nested values via a dotted path
|
|
12
|
+
const getNestedValue = (obj, path) => path.split('.').reduce((o, key) => (o && key in o ? o[key] : undefined), obj);
|
|
13
|
+
// Pure function — no need to inline this in the component
|
|
14
|
+
const formatDate = (date, fmt) => {
|
|
15
|
+
if (!date)
|
|
16
|
+
return '';
|
|
17
|
+
return format(date, fmt);
|
|
18
|
+
};
|
|
10
19
|
export default function AppEditable({ translation, fields, item, save, group, className, reference, }) {
|
|
11
20
|
const { t } = useTranslation([translation, 'common']);
|
|
12
|
-
const
|
|
13
|
-
if (!
|
|
14
|
-
return
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
21
|
+
const handleSave = useCallback((value, field) => {
|
|
22
|
+
if (!save)
|
|
23
|
+
return;
|
|
24
|
+
save({
|
|
25
|
+
uid: item.uid,
|
|
26
|
+
name: field.name,
|
|
27
|
+
type: field.type,
|
|
28
|
+
value,
|
|
29
|
+
ref: reference ? item[reference] : undefined,
|
|
30
|
+
});
|
|
31
|
+
}, [save, item, reference]);
|
|
32
|
+
const getValue = (field) => {
|
|
33
|
+
const value = getNestedValue(item, field.name);
|
|
34
|
+
return value !== undefined && value !== ''
|
|
35
|
+
? value
|
|
36
|
+
: (field.default ?? null);
|
|
26
37
|
};
|
|
27
38
|
const getDateValue = (field) => {
|
|
28
39
|
const v = getValue(field);
|
|
29
40
|
return !v ? null : formatDate(new Date(v), 'yyyy-MM-dd');
|
|
30
41
|
};
|
|
31
|
-
const getValue = (field) => {
|
|
32
|
-
if (field.name.indexOf('.') === -1) {
|
|
33
|
-
if (!isEmptyValue(item, field.name))
|
|
34
|
-
return item[field.name];
|
|
35
|
-
return field.default !== undefined ? field.default : null;
|
|
36
|
-
}
|
|
37
|
-
const splits = field.name.split('.');
|
|
38
|
-
let val = item;
|
|
39
|
-
for (const split of splits) {
|
|
40
|
-
if (typeof val === 'object' && val !== null && split in val) {
|
|
41
|
-
val = val[split];
|
|
42
|
-
}
|
|
43
|
-
else {
|
|
44
|
-
val = undefined;
|
|
45
|
-
break;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
if (val !== undefined && val !== '')
|
|
49
|
-
return val;
|
|
50
|
-
return field.default !== undefined ? field.default : null;
|
|
51
|
-
};
|
|
52
|
-
const isEmptyValue = (thisItem, thisName) => thisItem[thisName] === undefined || thisItem[thisName] === '';
|
|
53
42
|
const getValueToDisplay = (field) => {
|
|
54
43
|
const value = getValue(field);
|
|
55
|
-
if (field.options
|
|
44
|
+
if (field.options?.length) {
|
|
56
45
|
const option = field.options.find((op) => op.value === value);
|
|
57
46
|
if (option)
|
|
58
47
|
return option.label;
|
|
59
48
|
}
|
|
60
|
-
// Fallback — if value is a string, number, or boolean, display it.
|
|
61
49
|
if (typeof value === 'string' ||
|
|
62
50
|
typeof value === 'number' ||
|
|
63
|
-
typeof value === 'boolean')
|
|
51
|
+
typeof value === 'boolean')
|
|
64
52
|
return value;
|
|
65
|
-
}
|
|
66
53
|
return null;
|
|
67
54
|
};
|
|
68
|
-
const getLabelValueForList = (options) => {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
55
|
+
const getLabelValueForList = (options) => options.map((op) => ({ label: t(op.label), value: op.value }));
|
|
56
|
+
const sharedEditProps = {
|
|
57
|
+
saveButtonLabel: t('common:button.confirm'),
|
|
58
|
+
cancelButtonLabel: t('common:button.cancel'),
|
|
59
|
+
placeholder: t('common:placeholder.input'),
|
|
60
|
+
};
|
|
61
|
+
const renderField = (field) => {
|
|
62
|
+
const value = getValue(field);
|
|
63
|
+
switch (field.type) {
|
|
64
|
+
case 'display':
|
|
65
|
+
return _jsx("span", { children: getValueToDisplay(field) ?? '--' });
|
|
66
|
+
case 'code':
|
|
67
|
+
return (_jsx("div", { className: "textarea-code", children: _jsx(EasyEdit, { type: "textarea", onSave: (v) => handleSave(JSON.parse(v), field), value: JSON.stringify(value || {}, null, 2), ...sharedEditProps }) }));
|
|
68
|
+
case 'text':
|
|
69
|
+
case 'number':
|
|
70
|
+
case 'locale':
|
|
71
|
+
case 'year':
|
|
72
|
+
return (_jsx(EasyEdit, { type: "text", onSave: (v) => handleSave(v, field), value: value, ...sharedEditProps }));
|
|
73
|
+
case 'textarea':
|
|
74
|
+
return (_jsx(EasyEdit, { type: "textarea", onSave: (v) => handleSave(v, field), value: value, ...sharedEditProps }));
|
|
75
|
+
case 'select':
|
|
76
|
+
case 'list':
|
|
77
|
+
return (_jsx(EasyEdit, { type: "select", options: getLabelValueForList(field.options || []), onSave: (v) => handleSave(v, field), value: value, ...sharedEditProps }));
|
|
78
|
+
case 'range':
|
|
79
|
+
return (_jsx(EasyEdit, { type: "range", onSave: (v) => handleSave(v, field), attributes: { name: 'awesome-range', min: 0, max: 100, step: 1 }, value: value, ...sharedEditProps }));
|
|
80
|
+
case 'switch':
|
|
81
|
+
return (_jsx(Switch, { onChange: (checked) => handleSave(checked, field), checked: value || false }));
|
|
82
|
+
case 'date':
|
|
83
|
+
return (_jsx(EasyEdit, { type: "date", onSave: (v) => handleSave(new Date(v), field), value: getDateValue(field), ...sharedEditProps }));
|
|
84
|
+
case 'password':
|
|
85
|
+
return (_jsx(EasyEdit, { type: "password", onSave: (v) => handleSave(v, field), value: value, ...sharedEditProps }));
|
|
86
|
+
case 'color':
|
|
87
|
+
return (_jsx(AppColorpicker, { item: item, field: field, handleSave: handleSave }));
|
|
88
|
+
default:
|
|
89
|
+
return null;
|
|
90
|
+
}
|
|
73
91
|
};
|
|
74
92
|
return (_jsx(_Fragment, { children: fields.map((field, idx) => (_jsxs("div", { className: `editable-container ${className || ''}`, children: [_jsxs("div", { className: "title", children: [_jsxs("h6", { children: [field.title
|
|
75
93
|
? field.title
|
|
76
|
-
: t(`${translation}:${group || ''}.field.${field.name}`), field.required && _jsx("span", { children: "*" })] }), field.tooltip && (_jsx(FontAwesomeIcon, { icon: faQuestionCircle, className: "info", title: field.tooltip }))] }),
|
|
77
|
-
field.type === 'number' ||
|
|
78
|
-
field.type === 'locale' ||
|
|
79
|
-
field.type === 'year') && (_jsx(EasyEdit, { type: "text", onSave: (value) => handleSave(value, field), saveButtonLabel: t('common:button.confirm'), cancelButtonLabel: t('common:button.cancel'), value: getValue(field), placeholder: t('common:placeholder.input') })), field.type === 'textarea' ? (_jsx(EasyEdit, { type: "textarea", onSave: (value) => handleSave(value, field), saveButtonLabel: t('common:button.confirm'), cancelButtonLabel: t('common:button.cancel'), value: getValue(field), placeholder: t('common:placeholder.input') })) : null, field.type === 'select' || field.type === 'list' ? (_jsx(EasyEdit, { type: "select", options: getLabelValueForList(field.options || []), onSave: (value) => handleSave(value, field), saveButtonLabel: t('common:button.confirm'), cancelButtonLabel: t('common:button.cancel'), placeholder: t('common:placeholder.input'), value: getValue(field) })) : null, field.type === 'range' ? (_jsx(EasyEdit, { type: "range", onSave: (value) => handleSave(value, field), attributes: { name: 'awesome-range', min: 0, max: 100, step: 1 }, placeholder: t('common:placeholder.input'), value: getValue(field), saveButtonLabel: t('common:button.confirm'), cancelButtonLabel: t('common:button.cancel') })) : null, field.type === 'switch' ? (_jsx(Switch, { onChange: (checked) => handleSave(checked, field), checked: getValue(field) || false })) : null, field.type === 'date' && (_jsx(EasyEdit, { type: "date", onSave: (value) => handleSave(new Date(value), field), placeholder: t('common:placeholder.input'), value: getDateValue(field), saveButtonLabel: t('common:button.confirm'), cancelButtonLabel: t('common:button.cancel') })), field.type === 'password' && (_jsx(EasyEdit, { type: "password", onSave: (value) => handleSave(value, field), saveButtonLabel: t('common:button.confirm'), cancelButtonLabel: t('common:button.cancel'), value: getValue(field), placeholder: t('common:placeholder.input') })), field.type === 'color' ? (_jsx(AppColorpicker, { item: item, field: field, handleSave: handleSave })) : null] }, idx.valueOf()))) }));
|
|
94
|
+
: t(`${translation}:${group || ''}.field.${field.name}`), field.required && _jsx("span", { children: "*" })] }), field.tooltip && (_jsx(FontAwesomeIcon, { icon: faQuestionCircle, className: "info", title: field.tooltip }))] }), renderField(field)] }, idx))) }));
|
|
80
95
|
}
|