@headless-adminapp/fluent 0.0.17-alpha.15 → 0.0.17-alpha.18
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.
|
@@ -6,6 +6,7 @@ const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
|
|
|
6
6
|
const locale_1 = require("@headless-adminapp/app/locale");
|
|
7
7
|
const utils_1 = require("@headless-adminapp/app/locale/utils");
|
|
8
8
|
const react_hook_form_1 = require("react-hook-form");
|
|
9
|
+
const componentStore_1 = require("../componentStore");
|
|
9
10
|
const SectionControl_1 = require("../DataForm/SectionControl");
|
|
10
11
|
const layout_1 = require("../form/layout");
|
|
11
12
|
const StandardControl_1 = require("./StandardControl");
|
|
@@ -19,8 +20,15 @@ function SectionContainer({ section }) {
|
|
|
19
20
|
return ((0, jsx_runtime_1.jsx)(layout_1.FormSection, { title: (0, utils_1.localizedLabel)(language, section), columnCount: section.columnCount, labelPosition: section.labelPosition, noPadding: section.noPadding, hideLabel: section.hideLabel, children: section.controls.map((control, index) => {
|
|
20
21
|
var _a;
|
|
21
22
|
switch (control.type) {
|
|
22
|
-
case 'standard':
|
|
23
|
+
case 'standard': {
|
|
23
24
|
const attribute = schema.attributes[control.attributeName];
|
|
25
|
+
let Control = StandardControl_1.StandardControl;
|
|
26
|
+
if (control.component) {
|
|
27
|
+
const OverrideControl = componentStore_1.componentStore.getComponent(control.component);
|
|
28
|
+
if (OverrideControl) {
|
|
29
|
+
Control = OverrideControl;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
24
32
|
return ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
25
33
|
gridColumn: control.span
|
|
26
34
|
? `var(--section-item-span-${control.span})`
|
|
@@ -33,8 +41,9 @@ function SectionContainer({ section }) {
|
|
|
33
41
|
? (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message
|
|
34
42
|
: '';
|
|
35
43
|
const label = (_g = (_f = (_d = (_c = control.localizedLabels) === null || _c === void 0 ? void 0 : _c[language]) !== null && _d !== void 0 ? _d : (_e = attribute.localizedLabels) === null || _e === void 0 ? void 0 : _e[language]) !== null && _f !== void 0 ? _f : control.label) !== null && _g !== void 0 ? _g : attribute.label;
|
|
36
|
-
return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: label, labelPosition: section.labelPosition, required: attribute.required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(
|
|
44
|
+
return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: label, labelPosition: section.labelPosition, required: attribute.required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(Control, { attribute: attribute, name: control.attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError, disabled: readonly, label: label, placeholder: label, allowNavigation: true, allowNewRecord: true }) }));
|
|
37
45
|
} }, control.attributeName) }, control.attributeName));
|
|
46
|
+
}
|
|
38
47
|
case 'editablegrid': {
|
|
39
48
|
return null;
|
|
40
49
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { Attribute } from '@headless-adminapp/core/attributes';
|
|
2
2
|
import { FC } from 'react';
|
|
3
|
-
interface StandardControlProps {
|
|
3
|
+
export interface StandardControlProps {
|
|
4
4
|
attribute: Attribute;
|
|
5
5
|
label?: string;
|
|
6
6
|
isError: boolean;
|
|
@@ -21,4 +21,3 @@ interface StandardControlProps {
|
|
|
21
21
|
allowNewRecord?: boolean;
|
|
22
22
|
}
|
|
23
23
|
export declare const StandardControl: FC<StandardControlProps>;
|
|
24
|
-
export {};
|
|
@@ -8,6 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
8
8
|
const hooks_1 = require("@headless-adminapp/app/metadata/hooks");
|
|
9
9
|
const transport_1 = require("@headless-adminapp/app/transport");
|
|
10
10
|
const react_1 = require("react");
|
|
11
|
+
const componentStore_1 = require("../componentStore");
|
|
11
12
|
const CurrencyControl_1 = require("../form/controls/CurrencyControl");
|
|
12
13
|
const DateControl_1 = require("../form/controls/DateControl");
|
|
13
14
|
const DateRangeControl_1 = require("../form/controls/DateRangeControl");
|
|
@@ -22,17 +23,18 @@ const SwitchControl_1 = require("../form/controls/SwitchControl");
|
|
|
22
23
|
const TelephoneControl_1 = require("../form/controls/TelephoneControl");
|
|
23
24
|
const TextAreaControl_1 = require("../form/controls/TextAreaControl");
|
|
24
25
|
const TextControl_1 = require("../form/controls/TextControl");
|
|
25
|
-
const StandardControl = (
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
//
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
//
|
|
32
|
-
|
|
33
|
-
//
|
|
34
|
-
|
|
35
|
-
|
|
26
|
+
const StandardControl = (props) => {
|
|
27
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
28
|
+
const { attribute, label: _label, isError,
|
|
29
|
+
// errorMessage,
|
|
30
|
+
name, value, onBlur, onChange,
|
|
31
|
+
// dataService,
|
|
32
|
+
// fileService,
|
|
33
|
+
disabled, borderOnFocusOnly, placeholder: _placeholder,
|
|
34
|
+
// hideLabel,
|
|
35
|
+
hidePlaceholder, readOnly,
|
|
36
|
+
// quickViewControl,
|
|
37
|
+
allowNavigation, allowNewRecord, } = props;
|
|
36
38
|
const isDisabled = attribute.readonly || disabled;
|
|
37
39
|
// const label = hideLabel ? undefined : _label ?? attribute.label;
|
|
38
40
|
const placeholder = hidePlaceholder
|
|
@@ -55,21 +57,33 @@ allowNavigation, allowNewRecord, }) => {
|
|
|
55
57
|
readOnly,
|
|
56
58
|
};
|
|
57
59
|
switch (attribute.format) {
|
|
58
|
-
case 'text':
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
case '
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
case '
|
|
67
|
-
|
|
60
|
+
case 'text': {
|
|
61
|
+
const Control = (_b = componentStore_1.componentStore.getComponent('Form.TextControl')) !== null && _b !== void 0 ? _b : TextControl_1.TextControl;
|
|
62
|
+
return ((0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps, { textTransform: attribute.textTransform })));
|
|
63
|
+
}
|
|
64
|
+
case 'email': {
|
|
65
|
+
const Control = (_c = componentStore_1.componentStore.getComponent('Form.EmailControl')) !== null && _c !== void 0 ? _c : EmailControl_1.EmailControl;
|
|
66
|
+
return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
|
|
67
|
+
}
|
|
68
|
+
case 'phone': {
|
|
69
|
+
const Control = (_d = componentStore_1.componentStore.getComponent('Form.TelephoneControl')) !== null && _d !== void 0 ? _d : TelephoneControl_1.TelephoneControl;
|
|
70
|
+
return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
|
|
71
|
+
}
|
|
72
|
+
case 'url': {
|
|
73
|
+
const Control = (_e = componentStore_1.componentStore.getComponent('Form.UrlControl')) !== null && _e !== void 0 ? _e : TextControl_1.TextControl;
|
|
74
|
+
return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
|
|
75
|
+
}
|
|
76
|
+
case 'textarea': {
|
|
77
|
+
const Control = (_f = componentStore_1.componentStore.getComponent('Form.TextAreaControl')) !== null && _f !== void 0 ? _f : TextAreaControl_1.TextAreaControl;
|
|
78
|
+
return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
|
|
79
|
+
}
|
|
68
80
|
default:
|
|
69
81
|
return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
|
|
70
82
|
}
|
|
71
|
-
case 'number':
|
|
72
|
-
|
|
83
|
+
case 'number': {
|
|
84
|
+
const Control = (_g = componentStore_1.componentStore.getComponent('Form.NumberControl')) !== null && _g !== void 0 ? _g : NumberControl_1.NumberControl;
|
|
85
|
+
return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
|
|
86
|
+
}
|
|
73
87
|
case 'date': {
|
|
74
88
|
const controlProps = {
|
|
75
89
|
name,
|
|
@@ -82,10 +96,12 @@ allowNavigation, allowNewRecord, }) => {
|
|
|
82
96
|
readOnly,
|
|
83
97
|
};
|
|
84
98
|
if (attribute.format === 'datetime') {
|
|
85
|
-
|
|
99
|
+
const Control = (_h = componentStore_1.componentStore.getComponent('Form.DateTimeControl')) !== null && _h !== void 0 ? _h : DateTimeControl_1.DateTimeControl;
|
|
100
|
+
return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
|
|
86
101
|
}
|
|
87
102
|
else {
|
|
88
|
-
|
|
103
|
+
const Control = (_j = componentStore_1.componentStore.getComponent('Form.DateControl')) !== null && _j !== void 0 ? _j : DateControl_1.DateControl;
|
|
104
|
+
return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
|
|
89
105
|
}
|
|
90
106
|
}
|
|
91
107
|
case 'daterange': {
|
|
@@ -99,105 +115,32 @@ allowNavigation, allowNewRecord, }) => {
|
|
|
99
115
|
disabled: isDisabled,
|
|
100
116
|
readOnly,
|
|
101
117
|
};
|
|
102
|
-
|
|
118
|
+
const Control = (_k = componentStore_1.componentStore.getComponent('Form.DateRangeControl')) !== null && _k !== void 0 ? _k : DateRangeControl_1.DateRangeControl;
|
|
119
|
+
return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
|
|
103
120
|
}
|
|
104
121
|
case 'money': {
|
|
105
|
-
|
|
122
|
+
const Control = (_l = componentStore_1.componentStore.getComponent('Form.CurrencyControl')) !== null && _l !== void 0 ? _l : CurrencyControl_1.CurrencyControl;
|
|
123
|
+
return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
|
|
106
124
|
}
|
|
107
125
|
case 'lookup': {
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
// const path = routes?.create?.();
|
|
111
|
-
// let createButtonProps:
|
|
112
|
-
// | {
|
|
113
|
-
// label: string;
|
|
114
|
-
// onClick: () => void;
|
|
115
|
-
// }
|
|
116
|
-
// | undefined;
|
|
117
|
-
// if (allowQuickCreate && experienceSchema.defaultQuickCreateForm) {
|
|
118
|
-
// createButtonProps = {
|
|
119
|
-
// label: 'New record',
|
|
120
|
-
// onClick: async () => {
|
|
121
|
-
// try {
|
|
122
|
-
// const result = await openQuickCreate({
|
|
123
|
-
// logicalName: attribute.entity,
|
|
124
|
-
// });
|
|
125
|
-
// if (result) {
|
|
126
|
-
// onChange(result);
|
|
127
|
-
// }
|
|
128
|
-
// } catch (error) {
|
|
129
|
-
// console.error(error);
|
|
130
|
-
// }
|
|
131
|
-
// },
|
|
132
|
-
// };
|
|
133
|
-
// } else if (path) {
|
|
134
|
-
// createButtonProps = {
|
|
135
|
-
// label: 'New record',
|
|
136
|
-
// onClick: () => {
|
|
137
|
-
// router.push(path);
|
|
138
|
-
// },
|
|
139
|
-
// };
|
|
140
|
-
// }
|
|
141
|
-
// return (
|
|
142
|
-
// <FormControl
|
|
143
|
-
// type="lookup"
|
|
144
|
-
// name={name}
|
|
145
|
-
// label={label}
|
|
146
|
-
// placeholder={placeholder}
|
|
147
|
-
// required={required}
|
|
148
|
-
// value={value}
|
|
149
|
-
// onChange={onChange}
|
|
150
|
-
// onBlur={onBlur}
|
|
151
|
-
// error={isError}
|
|
152
|
-
// helperText={errorMessage}
|
|
153
|
-
// disabled={isDisabled}
|
|
154
|
-
// borderOnFocusOnly={borderOnFocusOnly}
|
|
155
|
-
// readOnly={readOnly}
|
|
156
|
-
// createButton={createButtonProps}
|
|
157
|
-
// openRecord={
|
|
158
|
-
// routes?.edit
|
|
159
|
-
// ? (id) => {
|
|
160
|
-
// router.push(routes.edit!(id));
|
|
161
|
-
// }
|
|
162
|
-
// : undefined
|
|
163
|
-
// }
|
|
164
|
-
// async
|
|
165
|
-
// dataResolver={async (options) => {
|
|
166
|
-
// const lookupSchema = getSchema(attribute.entity);
|
|
167
|
-
// const data = await dataService.retriveRecords({
|
|
168
|
-
// logicalName: attribute.entity,
|
|
169
|
-
// search: options?.search ?? '',
|
|
170
|
-
// columnFilters: {},
|
|
171
|
-
// pagination: {
|
|
172
|
-
// pageIndex: 0,
|
|
173
|
-
// rowsPerPage: 10,
|
|
174
|
-
// sortBy: 'createdAt',
|
|
175
|
-
// sortOrder: 'desc',
|
|
176
|
-
// },
|
|
177
|
-
// viewFilter: null,
|
|
178
|
-
// columns: ['_id', lookupSchema.primaryAttribute ?? 'name'],
|
|
179
|
-
// limit: options?.limit ?? 10,
|
|
180
|
-
// });
|
|
181
|
-
// return data.records.map((x: any) => ({
|
|
182
|
-
// _id: x._id,
|
|
183
|
-
// name: x[lookupSchema.primaryAttribute ?? 'name'],
|
|
184
|
-
// }));
|
|
185
|
-
// }}
|
|
186
|
-
// />
|
|
187
|
-
// );
|
|
188
|
-
return ((0, jsx_runtime_1.jsx)(LookupControl_1.LookupControl, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord }));
|
|
126
|
+
const Control = (_m = componentStore_1.componentStore.getComponent('Form.LookupControl')) !== null && _m !== void 0 ? _m : LookupControl_1.LookupControl;
|
|
127
|
+
return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord }));
|
|
189
128
|
}
|
|
190
129
|
case 'lookups': {
|
|
191
|
-
|
|
130
|
+
const Control = (_o = componentStore_1.componentStore.getComponent('Form.MultiSelectLookupControl')) !== null && _o !== void 0 ? _o : MultiSelectLookupControl_1.MultiSelectLookupControl;
|
|
131
|
+
return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord }));
|
|
192
132
|
}
|
|
193
133
|
case 'boolean': {
|
|
194
|
-
|
|
134
|
+
const Control = (_p = componentStore_1.componentStore.getComponent('Form.SwitchControl')) !== null && _p !== void 0 ? _p : SwitchControl_1.SwitchControl;
|
|
135
|
+
return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
|
|
195
136
|
}
|
|
196
137
|
case 'choice': {
|
|
197
|
-
|
|
138
|
+
const Control = (_q = componentStore_1.componentStore.getComponent('Form.SelectControl')) !== null && _q !== void 0 ? _q : SelectControl_1.default;
|
|
139
|
+
return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
|
|
198
140
|
}
|
|
199
141
|
case 'choices': {
|
|
200
|
-
|
|
142
|
+
const Control = (_r = componentStore_1.componentStore.getComponent('Form.MultiSelectControl')) !== null && _r !== void 0 ? _r : MultiSelectControl_1.default;
|
|
143
|
+
return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
|
|
201
144
|
}
|
|
202
145
|
// case 'attachment': {
|
|
203
146
|
// return (
|
|
@@ -222,6 +165,10 @@ allowNavigation, allowNewRecord, }) => {
|
|
|
222
165
|
// );
|
|
223
166
|
// }
|
|
224
167
|
}
|
|
168
|
+
const FallBackControl = componentStore_1.componentStore.getComponent('StandardControl.FallBack');
|
|
169
|
+
if (FallBackControl) {
|
|
170
|
+
return (0, jsx_runtime_1.jsx)(FallBackControl, Object.assign({}, props));
|
|
171
|
+
}
|
|
225
172
|
return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
|
|
226
173
|
};
|
|
227
174
|
exports.StandardControl = StandardControl;
|
|
@@ -3,17 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.CurrencyControl = CurrencyControl;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_components_1 = require("@fluentui/react-components");
|
|
6
|
+
const locale_1 = require("@headless-adminapp/app/locale");
|
|
6
7
|
function CurrencyControl({ value, onChange, id, name, onBlur, onFocus,
|
|
7
8
|
// error,
|
|
8
9
|
disabled, placeholder, autoFocus,
|
|
9
10
|
// borderOnFocusOnly,
|
|
10
11
|
readOnly, }) {
|
|
11
12
|
var _a;
|
|
13
|
+
const symbol = (0, locale_1.useCurrencySymbol)();
|
|
12
14
|
return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, autoFocus: autoFocus, name: name, value: (_a = value === null || value === void 0 ? void 0 : value.toString()) !== null && _a !== void 0 ? _a : '', onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value ? Number(e.target.value) : null), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), appearance: "filled-darker", onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(),
|
|
13
15
|
// invalid={error}
|
|
14
16
|
// icon={<div>₹</div>}
|
|
15
17
|
// startDecorator={<div>₹</div>}
|
|
16
|
-
contentBefore: (0, jsx_runtime_1.jsx)("div", { children:
|
|
18
|
+
contentBefore: (0, jsx_runtime_1.jsx)("div", { children: symbol }), disabled: disabled, readOnly: readOnly, style: {
|
|
17
19
|
width: '100%',
|
|
18
20
|
} }));
|
|
19
21
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@headless-adminapp/fluent",
|
|
3
|
-
"version": "0.0.17-alpha.
|
|
3
|
+
"version": "0.0.17-alpha.18",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"types": "index.d.ts",
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
"react-hook-form": "7.52.2",
|
|
45
45
|
"yup": "^1.4.0"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "d49e654cade6f418c799a34fa0dcadb05b663d88"
|
|
48
48
|
}
|