@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
- getWidgets(widgetsData => {
4087
- if (callback) callback(widgetsData);
4088
- if (formState === 'UPDATE' && data) setSelectedWidgets(data.widgets.map(widgetId => widgetsData.find(widget => widget['value'] === widgetId)).filter(widget => widget));
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(Form, {
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
- updates: {
4152
- widgets: selectedWidgets.map(widget => widget.value)
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, useForm, Controller } from 'react-hook-form';
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
- getWidgets(widgetsData => {
4075
- if (callback) callback(widgetsData);
4076
- if (formState === 'UPDATE' && data) setSelectedWidgets(data.widgets.map(widgetId => widgetsData.find(widget => widget['value'] === widgetId)).filter(widget => widget));
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(Form, {
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
- updates: {
4140
- widgets: selectedWidgets.map(widget => widget.value)
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@knovator/pagecreator-admin",
3
- "version": "0.7.1",
3
+ "version": "0.7.3",
4
4
  "dependencies": {
5
5
  "classnames": "^2.3.1",
6
6
  "react-beautiful-dnd": "^13.1.0",
@@ -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;