@knovator/pagecreator-admin 0.7.1 → 0.7.3
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.
package/index.cjs
CHANGED
|
@@ -2806,7 +2806,7 @@ const usePage = ({
|
|
|
2806
2806
|
}
|
|
2807
2807
|
onError(code, 'error', data === null || data === void 0 ? void 0 : data.message);
|
|
2808
2808
|
}, [onError, onLogout]);
|
|
2809
|
-
const getWidgets = React.useCallback(callback => __awaiter(void 0, void 0, void 0, function* () {
|
|
2809
|
+
const getWidgets = React.useCallback((search, collectionItems, callback) => __awaiter(void 0, void 0, void 0, function* () {
|
|
2810
2810
|
try {
|
|
2811
2811
|
setWidgetsLoading(true);
|
|
2812
2812
|
const api = getApiType({
|
|
@@ -2821,6 +2821,8 @@ const usePage = ({
|
|
|
2821
2821
|
url: api.url,
|
|
2822
2822
|
onError: handleError(CALLBACK_CODES.GET_ALL),
|
|
2823
2823
|
data: {
|
|
2824
|
+
collectionItems: collectionItems || [],
|
|
2825
|
+
search: search || '',
|
|
2824
2826
|
all: true,
|
|
2825
2827
|
isActive: true
|
|
2826
2828
|
}
|
|
@@ -3684,193 +3686,6 @@ $$7({ global: true, forced: parseInt != $parseInt }, {
|
|
|
3684
3686
|
parseInt: $parseInt
|
|
3685
3687
|
});
|
|
3686
3688
|
|
|
3687
|
-
const Form = /*#__PURE__*/React.forwardRef(({
|
|
3688
|
-
schema,
|
|
3689
|
-
onSubmit,
|
|
3690
|
-
data,
|
|
3691
|
-
isUpdating: _isUpdating = false,
|
|
3692
|
-
enable: _enable = true,
|
|
3693
|
-
updates,
|
|
3694
|
-
watcher
|
|
3695
|
-
}, ref) => {
|
|
3696
|
-
const {
|
|
3697
|
-
register,
|
|
3698
|
-
formState: {
|
|
3699
|
-
errors
|
|
3700
|
-
},
|
|
3701
|
-
handleSubmit,
|
|
3702
|
-
reset,
|
|
3703
|
-
setValue,
|
|
3704
|
-
control,
|
|
3705
|
-
setError,
|
|
3706
|
-
watch
|
|
3707
|
-
} = reactHookForm.useForm();
|
|
3708
|
-
// setting update data in form
|
|
3709
|
-
React.useEffect(() => {
|
|
3710
|
-
if (!isEmpty(data)) {
|
|
3711
|
-
reset(data);
|
|
3712
|
-
}
|
|
3713
|
-
}, [data, reset]);
|
|
3714
|
-
// setting subscriber if watcher is provided
|
|
3715
|
-
React.useEffect(() => {
|
|
3716
|
-
if (watcher) {
|
|
3717
|
-
const subscription = watch((value, {
|
|
3718
|
-
name,
|
|
3719
|
-
type
|
|
3720
|
-
}) => watcher(value, name, type));
|
|
3721
|
-
return () => subscription.unsubscribe();
|
|
3722
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
3723
|
-
} else return () => {};
|
|
3724
|
-
}, [watch, watcher]);
|
|
3725
|
-
// setting values if updates are provided
|
|
3726
|
-
React.useEffect(() => {
|
|
3727
|
-
if (updates) {
|
|
3728
|
-
Object.keys(updates).forEach(key => {
|
|
3729
|
-
setValue(key, updates[key]);
|
|
3730
|
-
});
|
|
3731
|
-
}
|
|
3732
|
-
}, [setValue, updates]);
|
|
3733
|
-
const inputRenderer = schema => {
|
|
3734
|
-
var _a, _b, _c, _d, _e, _f;
|
|
3735
|
-
let input;
|
|
3736
|
-
if (typeof schema.show !== 'undefined' && !schema.show) return null;
|
|
3737
|
-
if (schema.type) {
|
|
3738
|
-
switch (schema.type) {
|
|
3739
|
-
case 'ReactSelect':
|
|
3740
|
-
input = /*#__PURE__*/React__default["default"].createElement(CustomReactSelect, {
|
|
3741
|
-
disabled: !_enable,
|
|
3742
|
-
label: schema.label,
|
|
3743
|
-
error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
|
|
3744
|
-
onChange: value => {
|
|
3745
|
-
if (value) {
|
|
3746
|
-
setValue(schema.accessor, Array.isArray(value) ? value.map(item => item.value) : value.value);
|
|
3747
|
-
if (schema.onChange) schema.onChange(value);
|
|
3748
|
-
}
|
|
3749
|
-
},
|
|
3750
|
-
selectedOptions: schema.selectedOptions,
|
|
3751
|
-
required: schema.required,
|
|
3752
|
-
isMulti: schema.isMulti,
|
|
3753
|
-
isSearchable: schema.isSearchable,
|
|
3754
|
-
isLoading: schema.isLoading,
|
|
3755
|
-
placeholder: schema.placeholder,
|
|
3756
|
-
wrapperClassName: schema.wrapperClassName,
|
|
3757
|
-
formatOptionLabel: schema.formatOptionLabel,
|
|
3758
|
-
selectKey: schema.selectKey,
|
|
3759
|
-
loadOptions: schema.loadOptions
|
|
3760
|
-
});
|
|
3761
|
-
break;
|
|
3762
|
-
case 'checkbox':
|
|
3763
|
-
input = /*#__PURE__*/React__default["default"].createElement(Input.Checkbox, {
|
|
3764
|
-
error: (_d = (_c = errors[schema.accessor]) === null || _c === void 0 ? void 0 : _c.message) === null || _d === void 0 ? void 0 : _d.toString(),
|
|
3765
|
-
switchClass: schema.switchClass,
|
|
3766
|
-
label: schema.label,
|
|
3767
|
-
rest: register(schema.accessor, schema.validations || {}),
|
|
3768
|
-
className: "block",
|
|
3769
|
-
disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable,
|
|
3770
|
-
wrapperClassName: schema.wrapperClassName
|
|
3771
|
-
});
|
|
3772
|
-
break;
|
|
3773
|
-
case 'select':
|
|
3774
|
-
input = /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
|
|
3775
|
-
control: control,
|
|
3776
|
-
name: schema.accessor,
|
|
3777
|
-
render: ({
|
|
3778
|
-
field
|
|
3779
|
-
}) => {
|
|
3780
|
-
var _a, _b;
|
|
3781
|
-
return /*#__PURE__*/React__default["default"].createElement(Input.Select, {
|
|
3782
|
-
options: schema.options,
|
|
3783
|
-
label: schema.label,
|
|
3784
|
-
error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
|
|
3785
|
-
onChange: e => field.onChange(e.target.value),
|
|
3786
|
-
value: field.value,
|
|
3787
|
-
className: "w-full",
|
|
3788
|
-
disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
|
|
3789
|
-
required: schema.required,
|
|
3790
|
-
wrapperClassName: schema.wrapperClassName
|
|
3791
|
-
});
|
|
3792
|
-
}
|
|
3793
|
-
});
|
|
3794
|
-
break;
|
|
3795
|
-
case 'srcset':
|
|
3796
|
-
input = /*#__PURE__*/React__default["default"].createElement(Input.SrcSet, {
|
|
3797
|
-
control: control,
|
|
3798
|
-
register: register,
|
|
3799
|
-
label: schema.label,
|
|
3800
|
-
required: schema.required,
|
|
3801
|
-
errors: errors[schema.accessor],
|
|
3802
|
-
disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable
|
|
3803
|
-
});
|
|
3804
|
-
break;
|
|
3805
|
-
case 'text':
|
|
3806
|
-
case 'number':
|
|
3807
|
-
case 'url':
|
|
3808
|
-
default:
|
|
3809
|
-
input = /*#__PURE__*/React__default["default"].createElement(Input, {
|
|
3810
|
-
rest: register(schema.accessor, schema.validations || {}),
|
|
3811
|
-
label: schema.label,
|
|
3812
|
-
error: (_f = (_e = errors[schema.accessor]) === null || _e === void 0 ? void 0 : _e.message) === null || _f === void 0 ? void 0 : _f.toString(),
|
|
3813
|
-
type: schema.type,
|
|
3814
|
-
className: "w-full p-2",
|
|
3815
|
-
placeholder: schema.placeholder,
|
|
3816
|
-
disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
|
|
3817
|
-
required: schema.required,
|
|
3818
|
-
onInput: schema.onInput,
|
|
3819
|
-
wrapperClassName: schema.wrapperClassName
|
|
3820
|
-
});
|
|
3821
|
-
break;
|
|
3822
|
-
}
|
|
3823
|
-
} else if (schema.Input) {
|
|
3824
|
-
input = /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3825
|
-
className: "kms_input-wrapper"
|
|
3826
|
-
}, /*#__PURE__*/React__default["default"].createElement("label", {
|
|
3827
|
-
className: "kms_input-label"
|
|
3828
|
-
}, schema.label), /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
|
|
3829
|
-
control: control,
|
|
3830
|
-
name: schema.accessor,
|
|
3831
|
-
rules: schema.validations,
|
|
3832
|
-
render: ({
|
|
3833
|
-
field
|
|
3834
|
-
}) => {
|
|
3835
|
-
var _a, _b;
|
|
3836
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
3837
|
-
return schema.Input({
|
|
3838
|
-
field,
|
|
3839
|
-
error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
|
|
3840
|
-
disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
|
|
3841
|
-
setError: msg => setError.call(null, schema.accessor, {
|
|
3842
|
-
type: 'custom',
|
|
3843
|
-
message: msg
|
|
3844
|
-
})
|
|
3845
|
-
});
|
|
3846
|
-
}
|
|
3847
|
-
}));
|
|
3848
|
-
} else throw new Error(`Please provide Input or type prop to render input Labeled ${schema.label}`);
|
|
3849
|
-
return input;
|
|
3850
|
-
};
|
|
3851
|
-
const onFormSubmit = e => __awaiter(void 0, void 0, void 0, function* () {
|
|
3852
|
-
e.preventDefault();
|
|
3853
|
-
handleSubmit(data => {
|
|
3854
|
-
const formattedData = schema.reduce((values, schemaItem) => {
|
|
3855
|
-
// Do not add field if editing is disabled for it
|
|
3856
|
-
if (_isUpdating && typeof schemaItem.editable !== 'undefined' && !schemaItem.editable) return values;
|
|
3857
|
-
if (schemaItem.type === 'number') {
|
|
3858
|
-
values[schemaItem.accessor] = data[schemaItem.accessor] === '' ? null : parseInt(data[schemaItem.accessor]);
|
|
3859
|
-
} else values[schemaItem.accessor] = data[schemaItem.accessor];
|
|
3860
|
-
return values;
|
|
3861
|
-
}, {});
|
|
3862
|
-
onSubmit(formattedData);
|
|
3863
|
-
})();
|
|
3864
|
-
});
|
|
3865
|
-
return /*#__PURE__*/React__default["default"].createElement("form", {
|
|
3866
|
-
onSubmit: onFormSubmit,
|
|
3867
|
-
ref: ref,
|
|
3868
|
-
className: "khb-form-items"
|
|
3869
|
-
}, schema.map((schema, i) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
|
|
3870
|
-
key: i
|
|
3871
|
-
}, inputRenderer(schema))));
|
|
3872
|
-
});
|
|
3873
|
-
|
|
3874
3689
|
const SimpleForm = /*#__PURE__*/React.forwardRef(({
|
|
3875
3690
|
schema,
|
|
3876
3691
|
onSubmit,
|
|
@@ -4063,6 +3878,30 @@ const PageForm = ({
|
|
|
4063
3878
|
canAdd,
|
|
4064
3879
|
canUpdate
|
|
4065
3880
|
} = usePageState();
|
|
3881
|
+
const {
|
|
3882
|
+
register,
|
|
3883
|
+
formState: {
|
|
3884
|
+
errors
|
|
3885
|
+
},
|
|
3886
|
+
handleSubmit,
|
|
3887
|
+
reset,
|
|
3888
|
+
setValue,
|
|
3889
|
+
control,
|
|
3890
|
+
setError,
|
|
3891
|
+
getValues
|
|
3892
|
+
} = reactHookForm.useForm();
|
|
3893
|
+
const callerRef = React.useRef(null);
|
|
3894
|
+
React.useEffect(() => {
|
|
3895
|
+
if (!isEmpty(data)) {
|
|
3896
|
+
reset(data);
|
|
3897
|
+
}
|
|
3898
|
+
}, [data, reset]);
|
|
3899
|
+
React.useEffect(() => {
|
|
3900
|
+
if (formState === 'ADD') {
|
|
3901
|
+
setSelectedWidgets([]);
|
|
3902
|
+
}
|
|
3903
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3904
|
+
}, [formState]);
|
|
4066
3905
|
// Form Utility Functions
|
|
4067
3906
|
function handleCapitalize(event) {
|
|
4068
3907
|
event.target.value = capitalizeFirstLetter(event.target.value);
|
|
@@ -4083,10 +3922,20 @@ const PageForm = ({
|
|
|
4083
3922
|
return event;
|
|
4084
3923
|
}
|
|
4085
3924
|
function loadOptions(value, callback) {
|
|
4086
|
-
|
|
4087
|
-
|
|
4088
|
-
|
|
4089
|
-
}
|
|
3925
|
+
let widgetItems = [];
|
|
3926
|
+
if (formState === 'UPDATE') {
|
|
3927
|
+
widgetItems = getValues('widgets');
|
|
3928
|
+
}
|
|
3929
|
+
widgetItems = Array.isArray(widgetItems) ? widgetItems : (data === null || data === void 0 ? void 0 : data.widgets) ? data === null || data === void 0 ? void 0 : data.widgets : [];
|
|
3930
|
+
if (callerRef.current) clearTimeout(callerRef.current);
|
|
3931
|
+
callerRef.current = setTimeout(() => {
|
|
3932
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
3933
|
+
// @ts-ignore
|
|
3934
|
+
getWidgets(value || '', widgetItems, widgetsData => {
|
|
3935
|
+
if (callback) callback(widgetsData);
|
|
3936
|
+
if (formState === 'UPDATE' && data) setSelectedWidgets(widgetItems.map(widgetId => widgetsData.find(widget => widget['value'] === widgetId)).filter(widget => widget));
|
|
3937
|
+
});
|
|
3938
|
+
}, 300);
|
|
4090
3939
|
}
|
|
4091
3940
|
// Widget Form Functions
|
|
4092
3941
|
const onDragEnd = result => {
|
|
@@ -4142,15 +3991,17 @@ const PageForm = ({
|
|
|
4142
3991
|
if (!canAdd && !canUpdate) return null;
|
|
4143
3992
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
4144
3993
|
className: "khb_form"
|
|
4145
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
3994
|
+
}, /*#__PURE__*/React__default["default"].createElement(SimpleForm, {
|
|
4146
3995
|
schema: pageFormSchema,
|
|
4147
3996
|
onSubmit: onPageFormSubmit,
|
|
4148
3997
|
ref: formRef,
|
|
4149
|
-
data: data,
|
|
4150
3998
|
isUpdating: formState === 'UPDATE',
|
|
4151
|
-
|
|
4152
|
-
|
|
4153
|
-
|
|
3999
|
+
register: register,
|
|
4000
|
+
errors: errors,
|
|
4001
|
+
handleSubmit: handleSubmit,
|
|
4002
|
+
setValue: setValue,
|
|
4003
|
+
control: control,
|
|
4004
|
+
setError: setError
|
|
4154
4005
|
}), /*#__PURE__*/React__default["default"].createElement(DNDItemsList, {
|
|
4155
4006
|
onDragEnd: onDragEnd,
|
|
4156
4007
|
items: selectedWidgets
|
|
@@ -7213,7 +7064,6 @@ const WidgetForm = ({
|
|
|
7213
7064
|
}, {
|
|
7214
7065
|
label: selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.label,
|
|
7215
7066
|
placeholder: `Select ${selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.label}...`,
|
|
7216
|
-
required: true,
|
|
7217
7067
|
accessor: 'collectionItems',
|
|
7218
7068
|
type: 'ReactSelect',
|
|
7219
7069
|
options: collectionData,
|
package/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import React, { createContext, useContext, useRef, useState, useCallback, useEff
|
|
|
2
2
|
import fetchUrl, { setAPIConfig } from '@knovator/api';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import ReactSelect from 'react-select/async';
|
|
5
|
-
import { useFieldArray,
|
|
5
|
+
import { useFieldArray, Controller, useForm } from 'react-hook-form';
|
|
6
6
|
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
|
|
7
7
|
import CSSTransition from 'react-transition-group/CSSTransition';
|
|
8
8
|
import { useDropzone } from 'react-dropzone';
|
|
@@ -2794,7 +2794,7 @@ const usePage = ({
|
|
|
2794
2794
|
}
|
|
2795
2795
|
onError(code, 'error', data === null || data === void 0 ? void 0 : data.message);
|
|
2796
2796
|
}, [onError, onLogout]);
|
|
2797
|
-
const getWidgets = useCallback(callback => __awaiter(void 0, void 0, void 0, function* () {
|
|
2797
|
+
const getWidgets = useCallback((search, collectionItems, callback) => __awaiter(void 0, void 0, void 0, function* () {
|
|
2798
2798
|
try {
|
|
2799
2799
|
setWidgetsLoading(true);
|
|
2800
2800
|
const api = getApiType({
|
|
@@ -2809,6 +2809,8 @@ const usePage = ({
|
|
|
2809
2809
|
url: api.url,
|
|
2810
2810
|
onError: handleError(CALLBACK_CODES.GET_ALL),
|
|
2811
2811
|
data: {
|
|
2812
|
+
collectionItems: collectionItems || [],
|
|
2813
|
+
search: search || '',
|
|
2812
2814
|
all: true,
|
|
2813
2815
|
isActive: true
|
|
2814
2816
|
}
|
|
@@ -3672,193 +3674,6 @@ $$7({ global: true, forced: parseInt != $parseInt }, {
|
|
|
3672
3674
|
parseInt: $parseInt
|
|
3673
3675
|
});
|
|
3674
3676
|
|
|
3675
|
-
const Form = /*#__PURE__*/forwardRef(({
|
|
3676
|
-
schema,
|
|
3677
|
-
onSubmit,
|
|
3678
|
-
data,
|
|
3679
|
-
isUpdating: _isUpdating = false,
|
|
3680
|
-
enable: _enable = true,
|
|
3681
|
-
updates,
|
|
3682
|
-
watcher
|
|
3683
|
-
}, ref) => {
|
|
3684
|
-
const {
|
|
3685
|
-
register,
|
|
3686
|
-
formState: {
|
|
3687
|
-
errors
|
|
3688
|
-
},
|
|
3689
|
-
handleSubmit,
|
|
3690
|
-
reset,
|
|
3691
|
-
setValue,
|
|
3692
|
-
control,
|
|
3693
|
-
setError,
|
|
3694
|
-
watch
|
|
3695
|
-
} = useForm();
|
|
3696
|
-
// setting update data in form
|
|
3697
|
-
useEffect(() => {
|
|
3698
|
-
if (!isEmpty(data)) {
|
|
3699
|
-
reset(data);
|
|
3700
|
-
}
|
|
3701
|
-
}, [data, reset]);
|
|
3702
|
-
// setting subscriber if watcher is provided
|
|
3703
|
-
useEffect(() => {
|
|
3704
|
-
if (watcher) {
|
|
3705
|
-
const subscription = watch((value, {
|
|
3706
|
-
name,
|
|
3707
|
-
type
|
|
3708
|
-
}) => watcher(value, name, type));
|
|
3709
|
-
return () => subscription.unsubscribe();
|
|
3710
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
3711
|
-
} else return () => {};
|
|
3712
|
-
}, [watch, watcher]);
|
|
3713
|
-
// setting values if updates are provided
|
|
3714
|
-
useEffect(() => {
|
|
3715
|
-
if (updates) {
|
|
3716
|
-
Object.keys(updates).forEach(key => {
|
|
3717
|
-
setValue(key, updates[key]);
|
|
3718
|
-
});
|
|
3719
|
-
}
|
|
3720
|
-
}, [setValue, updates]);
|
|
3721
|
-
const inputRenderer = schema => {
|
|
3722
|
-
var _a, _b, _c, _d, _e, _f;
|
|
3723
|
-
let input;
|
|
3724
|
-
if (typeof schema.show !== 'undefined' && !schema.show) return null;
|
|
3725
|
-
if (schema.type) {
|
|
3726
|
-
switch (schema.type) {
|
|
3727
|
-
case 'ReactSelect':
|
|
3728
|
-
input = /*#__PURE__*/React.createElement(CustomReactSelect, {
|
|
3729
|
-
disabled: !_enable,
|
|
3730
|
-
label: schema.label,
|
|
3731
|
-
error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
|
|
3732
|
-
onChange: value => {
|
|
3733
|
-
if (value) {
|
|
3734
|
-
setValue(schema.accessor, Array.isArray(value) ? value.map(item => item.value) : value.value);
|
|
3735
|
-
if (schema.onChange) schema.onChange(value);
|
|
3736
|
-
}
|
|
3737
|
-
},
|
|
3738
|
-
selectedOptions: schema.selectedOptions,
|
|
3739
|
-
required: schema.required,
|
|
3740
|
-
isMulti: schema.isMulti,
|
|
3741
|
-
isSearchable: schema.isSearchable,
|
|
3742
|
-
isLoading: schema.isLoading,
|
|
3743
|
-
placeholder: schema.placeholder,
|
|
3744
|
-
wrapperClassName: schema.wrapperClassName,
|
|
3745
|
-
formatOptionLabel: schema.formatOptionLabel,
|
|
3746
|
-
selectKey: schema.selectKey,
|
|
3747
|
-
loadOptions: schema.loadOptions
|
|
3748
|
-
});
|
|
3749
|
-
break;
|
|
3750
|
-
case 'checkbox':
|
|
3751
|
-
input = /*#__PURE__*/React.createElement(Input.Checkbox, {
|
|
3752
|
-
error: (_d = (_c = errors[schema.accessor]) === null || _c === void 0 ? void 0 : _c.message) === null || _d === void 0 ? void 0 : _d.toString(),
|
|
3753
|
-
switchClass: schema.switchClass,
|
|
3754
|
-
label: schema.label,
|
|
3755
|
-
rest: register(schema.accessor, schema.validations || {}),
|
|
3756
|
-
className: "block",
|
|
3757
|
-
disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable,
|
|
3758
|
-
wrapperClassName: schema.wrapperClassName
|
|
3759
|
-
});
|
|
3760
|
-
break;
|
|
3761
|
-
case 'select':
|
|
3762
|
-
input = /*#__PURE__*/React.createElement(Controller, {
|
|
3763
|
-
control: control,
|
|
3764
|
-
name: schema.accessor,
|
|
3765
|
-
render: ({
|
|
3766
|
-
field
|
|
3767
|
-
}) => {
|
|
3768
|
-
var _a, _b;
|
|
3769
|
-
return /*#__PURE__*/React.createElement(Input.Select, {
|
|
3770
|
-
options: schema.options,
|
|
3771
|
-
label: schema.label,
|
|
3772
|
-
error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
|
|
3773
|
-
onChange: e => field.onChange(e.target.value),
|
|
3774
|
-
value: field.value,
|
|
3775
|
-
className: "w-full",
|
|
3776
|
-
disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
|
|
3777
|
-
required: schema.required,
|
|
3778
|
-
wrapperClassName: schema.wrapperClassName
|
|
3779
|
-
});
|
|
3780
|
-
}
|
|
3781
|
-
});
|
|
3782
|
-
break;
|
|
3783
|
-
case 'srcset':
|
|
3784
|
-
input = /*#__PURE__*/React.createElement(Input.SrcSet, {
|
|
3785
|
-
control: control,
|
|
3786
|
-
register: register,
|
|
3787
|
-
label: schema.label,
|
|
3788
|
-
required: schema.required,
|
|
3789
|
-
errors: errors[schema.accessor],
|
|
3790
|
-
disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable
|
|
3791
|
-
});
|
|
3792
|
-
break;
|
|
3793
|
-
case 'text':
|
|
3794
|
-
case 'number':
|
|
3795
|
-
case 'url':
|
|
3796
|
-
default:
|
|
3797
|
-
input = /*#__PURE__*/React.createElement(Input, {
|
|
3798
|
-
rest: register(schema.accessor, schema.validations || {}),
|
|
3799
|
-
label: schema.label,
|
|
3800
|
-
error: (_f = (_e = errors[schema.accessor]) === null || _e === void 0 ? void 0 : _e.message) === null || _f === void 0 ? void 0 : _f.toString(),
|
|
3801
|
-
type: schema.type,
|
|
3802
|
-
className: "w-full p-2",
|
|
3803
|
-
placeholder: schema.placeholder,
|
|
3804
|
-
disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
|
|
3805
|
-
required: schema.required,
|
|
3806
|
-
onInput: schema.onInput,
|
|
3807
|
-
wrapperClassName: schema.wrapperClassName
|
|
3808
|
-
});
|
|
3809
|
-
break;
|
|
3810
|
-
}
|
|
3811
|
-
} else if (schema.Input) {
|
|
3812
|
-
input = /*#__PURE__*/React.createElement("div", {
|
|
3813
|
-
className: "kms_input-wrapper"
|
|
3814
|
-
}, /*#__PURE__*/React.createElement("label", {
|
|
3815
|
-
className: "kms_input-label"
|
|
3816
|
-
}, schema.label), /*#__PURE__*/React.createElement(Controller, {
|
|
3817
|
-
control: control,
|
|
3818
|
-
name: schema.accessor,
|
|
3819
|
-
rules: schema.validations,
|
|
3820
|
-
render: ({
|
|
3821
|
-
field
|
|
3822
|
-
}) => {
|
|
3823
|
-
var _a, _b;
|
|
3824
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
3825
|
-
return schema.Input({
|
|
3826
|
-
field,
|
|
3827
|
-
error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
|
|
3828
|
-
disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
|
|
3829
|
-
setError: msg => setError.call(null, schema.accessor, {
|
|
3830
|
-
type: 'custom',
|
|
3831
|
-
message: msg
|
|
3832
|
-
})
|
|
3833
|
-
});
|
|
3834
|
-
}
|
|
3835
|
-
}));
|
|
3836
|
-
} else throw new Error(`Please provide Input or type prop to render input Labeled ${schema.label}`);
|
|
3837
|
-
return input;
|
|
3838
|
-
};
|
|
3839
|
-
const onFormSubmit = e => __awaiter(void 0, void 0, void 0, function* () {
|
|
3840
|
-
e.preventDefault();
|
|
3841
|
-
handleSubmit(data => {
|
|
3842
|
-
const formattedData = schema.reduce((values, schemaItem) => {
|
|
3843
|
-
// Do not add field if editing is disabled for it
|
|
3844
|
-
if (_isUpdating && typeof schemaItem.editable !== 'undefined' && !schemaItem.editable) return values;
|
|
3845
|
-
if (schemaItem.type === 'number') {
|
|
3846
|
-
values[schemaItem.accessor] = data[schemaItem.accessor] === '' ? null : parseInt(data[schemaItem.accessor]);
|
|
3847
|
-
} else values[schemaItem.accessor] = data[schemaItem.accessor];
|
|
3848
|
-
return values;
|
|
3849
|
-
}, {});
|
|
3850
|
-
onSubmit(formattedData);
|
|
3851
|
-
})();
|
|
3852
|
-
});
|
|
3853
|
-
return /*#__PURE__*/React.createElement("form", {
|
|
3854
|
-
onSubmit: onFormSubmit,
|
|
3855
|
-
ref: ref,
|
|
3856
|
-
className: "khb-form-items"
|
|
3857
|
-
}, schema.map((schema, i) => /*#__PURE__*/React.createElement(React.Fragment, {
|
|
3858
|
-
key: i
|
|
3859
|
-
}, inputRenderer(schema))));
|
|
3860
|
-
});
|
|
3861
|
-
|
|
3862
3677
|
const SimpleForm = /*#__PURE__*/forwardRef(({
|
|
3863
3678
|
schema,
|
|
3864
3679
|
onSubmit,
|
|
@@ -4051,6 +3866,30 @@ const PageForm = ({
|
|
|
4051
3866
|
canAdd,
|
|
4052
3867
|
canUpdate
|
|
4053
3868
|
} = usePageState();
|
|
3869
|
+
const {
|
|
3870
|
+
register,
|
|
3871
|
+
formState: {
|
|
3872
|
+
errors
|
|
3873
|
+
},
|
|
3874
|
+
handleSubmit,
|
|
3875
|
+
reset,
|
|
3876
|
+
setValue,
|
|
3877
|
+
control,
|
|
3878
|
+
setError,
|
|
3879
|
+
getValues
|
|
3880
|
+
} = useForm();
|
|
3881
|
+
const callerRef = useRef(null);
|
|
3882
|
+
useEffect(() => {
|
|
3883
|
+
if (!isEmpty(data)) {
|
|
3884
|
+
reset(data);
|
|
3885
|
+
}
|
|
3886
|
+
}, [data, reset]);
|
|
3887
|
+
useEffect(() => {
|
|
3888
|
+
if (formState === 'ADD') {
|
|
3889
|
+
setSelectedWidgets([]);
|
|
3890
|
+
}
|
|
3891
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3892
|
+
}, [formState]);
|
|
4054
3893
|
// Form Utility Functions
|
|
4055
3894
|
function handleCapitalize(event) {
|
|
4056
3895
|
event.target.value = capitalizeFirstLetter(event.target.value);
|
|
@@ -4071,10 +3910,20 @@ const PageForm = ({
|
|
|
4071
3910
|
return event;
|
|
4072
3911
|
}
|
|
4073
3912
|
function loadOptions(value, callback) {
|
|
4074
|
-
|
|
4075
|
-
|
|
4076
|
-
|
|
4077
|
-
}
|
|
3913
|
+
let widgetItems = [];
|
|
3914
|
+
if (formState === 'UPDATE') {
|
|
3915
|
+
widgetItems = getValues('widgets');
|
|
3916
|
+
}
|
|
3917
|
+
widgetItems = Array.isArray(widgetItems) ? widgetItems : (data === null || data === void 0 ? void 0 : data.widgets) ? data === null || data === void 0 ? void 0 : data.widgets : [];
|
|
3918
|
+
if (callerRef.current) clearTimeout(callerRef.current);
|
|
3919
|
+
callerRef.current = setTimeout(() => {
|
|
3920
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
3921
|
+
// @ts-ignore
|
|
3922
|
+
getWidgets(value || '', widgetItems, widgetsData => {
|
|
3923
|
+
if (callback) callback(widgetsData);
|
|
3924
|
+
if (formState === 'UPDATE' && data) setSelectedWidgets(widgetItems.map(widgetId => widgetsData.find(widget => widget['value'] === widgetId)).filter(widget => widget));
|
|
3925
|
+
});
|
|
3926
|
+
}, 300);
|
|
4078
3927
|
}
|
|
4079
3928
|
// Widget Form Functions
|
|
4080
3929
|
const onDragEnd = result => {
|
|
@@ -4130,15 +3979,17 @@ const PageForm = ({
|
|
|
4130
3979
|
if (!canAdd && !canUpdate) return null;
|
|
4131
3980
|
return /*#__PURE__*/React.createElement("div", {
|
|
4132
3981
|
className: "khb_form"
|
|
4133
|
-
}, /*#__PURE__*/React.createElement(
|
|
3982
|
+
}, /*#__PURE__*/React.createElement(SimpleForm, {
|
|
4134
3983
|
schema: pageFormSchema,
|
|
4135
3984
|
onSubmit: onPageFormSubmit,
|
|
4136
3985
|
ref: formRef,
|
|
4137
|
-
data: data,
|
|
4138
3986
|
isUpdating: formState === 'UPDATE',
|
|
4139
|
-
|
|
4140
|
-
|
|
4141
|
-
|
|
3987
|
+
register: register,
|
|
3988
|
+
errors: errors,
|
|
3989
|
+
handleSubmit: handleSubmit,
|
|
3990
|
+
setValue: setValue,
|
|
3991
|
+
control: control,
|
|
3992
|
+
setError: setError
|
|
4142
3993
|
}), /*#__PURE__*/React.createElement(DNDItemsList, {
|
|
4143
3994
|
onDragEnd: onDragEnd,
|
|
4144
3995
|
items: selectedWidgets
|
|
@@ -7201,7 +7052,6 @@ const WidgetForm = ({
|
|
|
7201
7052
|
}, {
|
|
7202
7053
|
label: selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.label,
|
|
7203
7054
|
placeholder: `Select ${selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.label}...`,
|
|
7204
|
-
required: true,
|
|
7205
7055
|
accessor: 'collectionItems',
|
|
7206
7056
|
type: 'ReactSelect',
|
|
7207
7057
|
options: collectionData,
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { PageProps } from '../../../types';
|
|
3
3
|
declare const Page: {
|
|
4
4
|
({ t, loader, explicitForm, children, permissions, preConfirmDelete, }: PageProps): JSX.Element;
|
|
5
|
-
Table: () => JSX.Element;
|
|
5
|
+
Table: ({ extraActions, extraColumns }: import("../../../types").DerivedTableProps) => JSX.Element;
|
|
6
6
|
Search: () => JSX.Element;
|
|
7
7
|
Form: ({ formRef }: import("../../../types").FormProps) => JSX.Element | null;
|
|
8
8
|
AddButton: () => JSX.Element;
|
|
@@ -3,7 +3,7 @@ import Checkbox from "./Checkbox";
|
|
|
3
3
|
import Select from "./Select";
|
|
4
4
|
import ReactSelect from "./ReactSelect";
|
|
5
5
|
import SrcSet from './SrcSet';
|
|
6
|
-
declare const _default: (({ label, id, placeholder, type, size, required, error, className, disabled, rest, onInput, onBlur, value, onChange, wrapperClassName, }: import("../../../types").InputProps) => JSX.Element) & {
|
|
6
|
+
declare const _default: (({ label, id, placeholder, type, size, required, error, className, disabled, rest, onInput, onBlur, value, info, onChange, wrapperClassName, }: import("../../../types").InputProps) => JSX.Element) & {
|
|
7
7
|
Select: typeof Select;
|
|
8
8
|
ReactSelect: typeof ReactSelect;
|
|
9
9
|
Checkbox: typeof Checkbox;
|
|
@@ -24,7 +24,7 @@ declare const usePage: ({ routes, defaultLimit, canList, preConfirmDelete, }: Us
|
|
|
24
24
|
widgets: ObjectType[];
|
|
25
25
|
itemData: any;
|
|
26
26
|
formState: FormActionTypes | undefined;
|
|
27
|
-
getWidgets: (callback?: ((data: any) => void) | undefined) => Promise<void>;
|
|
27
|
+
getWidgets: (search?: string, collectionItems?: string[], callback?: ((data: any) => void) | undefined) => Promise<void>;
|
|
28
28
|
onCloseForm: () => void;
|
|
29
29
|
widgetsLoading: boolean;
|
|
30
30
|
selectedWidgets: {
|
|
@@ -70,7 +70,7 @@ export interface PageContextType {
|
|
|
70
70
|
list: any[];
|
|
71
71
|
searchText: string;
|
|
72
72
|
changeSearch: (val: string) => void;
|
|
73
|
-
getWidgets: (callback?: (data: any) => void) => void;
|
|
73
|
+
getWidgets: (search: string, collectionItems: string[], callback?: (data: any) => void) => void;
|
|
74
74
|
formState: FormActionTypes | undefined;
|
|
75
75
|
closeForm: () => void;
|
|
76
76
|
onPageFormSubmit: (data: any) => void;
|