@knovator/pagecreator-admin 0.0.2 → 0.0.5
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.js +257 -111
- package/lib/api/index.d.ts +2 -2
- package/lib/components/Page/Form/PageForm.d.ts +1 -1
- package/lib/components/Page/Page/Page.d.ts +10 -1
- package/lib/components/Page/PageFormActions/PageFormActions.d.ts +4 -0
- package/lib/components/Page/PageFormActions/index.d.ts +2 -0
- package/lib/components/Page/PageFormWrapper/PageFormWrapper.d.ts +4 -0
- package/lib/components/Page/PageFormWrapper/index.d.ts +2 -0
- package/lib/components/Widget/Form/WidgetForm.d.ts +1 -1
- package/lib/components/Widget/Widget/Widget.d.ts +7 -1
- package/lib/components/Widget/WidgetFormActions/WidgetFormActions.d.ts +4 -0
- package/lib/components/Widget/WidgetFormActions/index.d.ts +2 -0
- package/lib/components/Widget/WidgetFormWrapper/WidgetFormWrapper.d.ts +4 -0
- package/lib/components/Widget/WidgetFormWrapper/index.d.ts +2 -0
- package/lib/components/common/FormActions/FormActions.d.ts +10 -0
- package/lib/components/common/FormActions/index.d.ts +2 -0
- package/lib/components/common/Input/Checkbox.d.ts +1 -1
- package/lib/components/common/Toggle/Toggle.d.ts +1 -1
- package/lib/context/ProviderContext.d.ts +1 -1
- package/lib/types/api.d.ts +5 -0
- package/lib/types/components.d.ts +19 -1
- package/lib/types/context.d.ts +3 -1
- package/package.json +2 -2
package/index.js
CHANGED
|
@@ -1736,6 +1736,7 @@ const Provider = ({
|
|
|
1736
1736
|
onError: _onError = () => {},
|
|
1737
1737
|
onSuccess: _onSuccess = () => {},
|
|
1738
1738
|
onLogout: _onLogout = () => {},
|
|
1739
|
+
switchClass: _switchClass = 'khb_switch',
|
|
1739
1740
|
tilesRoutesPrefix: _tilesRoutesPrefix = 'tiles',
|
|
1740
1741
|
widgetRoutesPrefix: _widgetRoutesPrefix = 'widgets',
|
|
1741
1742
|
pageRoutesPrefix: _pageRoutesPrefix = 'pages'
|
|
@@ -1747,6 +1748,7 @@ const Provider = ({
|
|
|
1747
1748
|
onError: _onError,
|
|
1748
1749
|
onSuccess: _onSuccess,
|
|
1749
1750
|
onLogout: _onLogout,
|
|
1751
|
+
switchClass: _switchClass,
|
|
1750
1752
|
tilesRoutesPrefix: _tilesRoutesPrefix,
|
|
1751
1753
|
widgetRoutesPrefix: _widgetRoutesPrefix,
|
|
1752
1754
|
pageRoutesPrefix: _pageRoutesPrefix
|
|
@@ -2705,12 +2707,15 @@ const commonApi = ({
|
|
|
2705
2707
|
getToken: apiToken,
|
|
2706
2708
|
onError: _onError
|
|
2707
2709
|
});
|
|
2708
|
-
|
|
2710
|
+
const response = yield fetchUrl({
|
|
2711
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
2712
|
+
// @ts-ignore
|
|
2709
2713
|
type: method,
|
|
2710
2714
|
url,
|
|
2711
2715
|
data,
|
|
2712
2716
|
config
|
|
2713
2717
|
});
|
|
2718
|
+
return response;
|
|
2714
2719
|
});
|
|
2715
2720
|
|
|
2716
2721
|
const getApiType = ({
|
|
@@ -3267,7 +3272,8 @@ const Checkbox = ({
|
|
|
3267
3272
|
label,
|
|
3268
3273
|
error,
|
|
3269
3274
|
wrapperClassName,
|
|
3270
|
-
disabled
|
|
3275
|
+
disabled,
|
|
3276
|
+
switchClass
|
|
3271
3277
|
}) => {
|
|
3272
3278
|
return jsxs("div", Object.assign({
|
|
3273
3279
|
className: classNames('khb_input-wrapper', wrapperClassName)
|
|
@@ -3277,7 +3283,7 @@ const Checkbox = ({
|
|
|
3277
3283
|
}, {
|
|
3278
3284
|
children: label
|
|
3279
3285
|
})), jsxs("label", Object.assign({
|
|
3280
|
-
className:
|
|
3286
|
+
className: switchClass || 'khb_switch',
|
|
3281
3287
|
"data-testid": "khb_switch"
|
|
3282
3288
|
}, {
|
|
3283
3289
|
children: [jsx("input", Object.assign({
|
|
@@ -3683,6 +3689,7 @@ const Form = /*#__PURE__*/forwardRef(({
|
|
|
3683
3689
|
case 'checkbox':
|
|
3684
3690
|
input = jsx(Input.Checkbox, {
|
|
3685
3691
|
error: (_d = (_c = errors[schema.accessor]) === null || _c === void 0 ? void 0 : _c.message) === null || _d === void 0 ? void 0 : _d.toString(),
|
|
3692
|
+
switchClass: schema.switchClass,
|
|
3686
3693
|
label: schema.label,
|
|
3687
3694
|
rest: register(schema.accessor, schema.validations || {}),
|
|
3688
3695
|
className: "block",
|
|
@@ -3929,10 +3936,75 @@ const DNDItemsList = ({
|
|
|
3929
3936
|
}));
|
|
3930
3937
|
};
|
|
3931
3938
|
|
|
3939
|
+
const FormActions = ({
|
|
3940
|
+
loading: _loading = false,
|
|
3941
|
+
primaryLabel: _primaryLabel = 'Submit',
|
|
3942
|
+
secondaryLabel: _secondaryLabel = 'Cancel',
|
|
3943
|
+
onPrimaryButtonClick,
|
|
3944
|
+
onSecondaryButtonClick
|
|
3945
|
+
}) => {
|
|
3946
|
+
return jsxs(Fragment, {
|
|
3947
|
+
children: [jsx(Button, Object.assign({
|
|
3948
|
+
type: "secondary",
|
|
3949
|
+
disabled: _loading,
|
|
3950
|
+
onClick: onSecondaryButtonClick
|
|
3951
|
+
}, {
|
|
3952
|
+
children: _secondaryLabel
|
|
3953
|
+
})), jsx(Button, Object.assign({
|
|
3954
|
+
onClick: onPrimaryButtonClick,
|
|
3955
|
+
disabled: _loading
|
|
3956
|
+
}, {
|
|
3957
|
+
children: _primaryLabel
|
|
3958
|
+
}))]
|
|
3959
|
+
});
|
|
3960
|
+
};
|
|
3961
|
+
|
|
3962
|
+
const PageFormActions = ({
|
|
3963
|
+
formRef
|
|
3964
|
+
}) => {
|
|
3965
|
+
const {
|
|
3966
|
+
onError
|
|
3967
|
+
} = useProviderState();
|
|
3968
|
+
const {
|
|
3969
|
+
closeForm,
|
|
3970
|
+
loading,
|
|
3971
|
+
canAdd,
|
|
3972
|
+
canUpdate,
|
|
3973
|
+
t
|
|
3974
|
+
} = usePageState();
|
|
3975
|
+
|
|
3976
|
+
const onSubmitClick = e => {
|
|
3977
|
+
var _a;
|
|
3978
|
+
|
|
3979
|
+
if (!formRef) {
|
|
3980
|
+
return onError(CALLBACK_CODES.INTERNAL, 'error', `formRef is required to submit the form!`);
|
|
3981
|
+
} else if (!formRef.current) {
|
|
3982
|
+
return onError(CALLBACK_CODES.INTERNAL, 'error', `formRef is empty, make sure it's passed as 'ref' prop to the form!`);
|
|
3983
|
+
} // formRef is provided
|
|
3984
|
+
|
|
3985
|
+
|
|
3986
|
+
e === null || e === void 0 ? void 0 : e.preventDefault();
|
|
3987
|
+
(_a = formRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('submit', {
|
|
3988
|
+
cancelable: true,
|
|
3989
|
+
bubbles: true
|
|
3990
|
+
}));
|
|
3991
|
+
};
|
|
3992
|
+
|
|
3993
|
+
if (!canAdd && !canUpdate) return null;
|
|
3994
|
+
return jsx(FormActions, {
|
|
3995
|
+
loading: loading,
|
|
3996
|
+
primaryLabel: t('saveButtonText'),
|
|
3997
|
+
onPrimaryButtonClick: onSubmitClick,
|
|
3998
|
+
onSecondaryButtonClick: closeForm,
|
|
3999
|
+
secondaryLabel: t('cancelButtonText')
|
|
4000
|
+
});
|
|
4001
|
+
};
|
|
4002
|
+
|
|
3932
4003
|
const PageForm = ({
|
|
3933
4004
|
onClose,
|
|
3934
4005
|
open,
|
|
3935
|
-
formState
|
|
4006
|
+
formState,
|
|
4007
|
+
formRef
|
|
3936
4008
|
}) => {
|
|
3937
4009
|
const {
|
|
3938
4010
|
t,
|
|
@@ -3944,8 +4016,7 @@ const PageForm = ({
|
|
|
3944
4016
|
onChangeWidgetSequence,
|
|
3945
4017
|
canAdd,
|
|
3946
4018
|
canUpdate
|
|
3947
|
-
} = usePageState();
|
|
3948
|
-
const pageFormRef = useRef(null); // Form Utility Functions
|
|
4019
|
+
} = usePageState(); // Form Utility Functions
|
|
3949
4020
|
|
|
3950
4021
|
function handleCapitalize(event) {
|
|
3951
4022
|
event.target.value = capitalizeFirstLetter(event.target.value);
|
|
@@ -3958,15 +4029,6 @@ const PageForm = ({
|
|
|
3958
4029
|
} // Widget Form Functions
|
|
3959
4030
|
|
|
3960
4031
|
|
|
3961
|
-
const onPageFormSubmitClick = () => {
|
|
3962
|
-
var _a;
|
|
3963
|
-
|
|
3964
|
-
(_a = pageFormRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('submit', {
|
|
3965
|
-
cancelable: true,
|
|
3966
|
-
bubbles: true
|
|
3967
|
-
}));
|
|
3968
|
-
};
|
|
3969
|
-
|
|
3970
4032
|
const onDragEnd = result => {
|
|
3971
4033
|
const {
|
|
3972
4034
|
destination,
|
|
@@ -4011,17 +4073,8 @@ const PageForm = ({
|
|
|
4011
4073
|
open: open,
|
|
4012
4074
|
onClose: onClose,
|
|
4013
4075
|
title: formState === 'ADD' ? t('page.addPageTitle') : formState === 'UPDATE' ? t('page.updatePageTitle') : '',
|
|
4014
|
-
footerContent:
|
|
4015
|
-
|
|
4016
|
-
type: "secondary",
|
|
4017
|
-
onClick: onClose
|
|
4018
|
-
}, {
|
|
4019
|
-
children: t('cancelButtonText')
|
|
4020
|
-
})), jsx(Button, Object.assign({
|
|
4021
|
-
onClick: onPageFormSubmitClick
|
|
4022
|
-
}, {
|
|
4023
|
-
children: t('saveButtonText')
|
|
4024
|
-
}))]
|
|
4076
|
+
footerContent: jsx(PageFormActions, {
|
|
4077
|
+
formRef: formRef
|
|
4025
4078
|
})
|
|
4026
4079
|
}, {
|
|
4027
4080
|
children: jsxs("div", Object.assign({
|
|
@@ -4030,7 +4083,7 @@ const PageForm = ({
|
|
|
4030
4083
|
children: [jsx(Form, {
|
|
4031
4084
|
schema: pageFormSchema,
|
|
4032
4085
|
onSubmit: onPageFormSubmit,
|
|
4033
|
-
ref:
|
|
4086
|
+
ref: formRef,
|
|
4034
4087
|
data: data,
|
|
4035
4088
|
isUpdating: formState === 'UPDATE',
|
|
4036
4089
|
updates: {
|
|
@@ -4346,11 +4399,28 @@ const DeleteModal = ({
|
|
|
4346
4399
|
})) : null;
|
|
4347
4400
|
};
|
|
4348
4401
|
|
|
4402
|
+
const PageFormWrapper = ({
|
|
4403
|
+
children
|
|
4404
|
+
}) => {
|
|
4405
|
+
const {
|
|
4406
|
+
formState,
|
|
4407
|
+
closeForm
|
|
4408
|
+
} = usePageState();
|
|
4409
|
+
return typeof children === 'function' ? children({
|
|
4410
|
+
formState,
|
|
4411
|
+
onClose: closeForm,
|
|
4412
|
+
open: formState === 'ADD' || formState === 'UPDATE'
|
|
4413
|
+
}) : null;
|
|
4414
|
+
};
|
|
4415
|
+
|
|
4349
4416
|
const Page = ({
|
|
4350
4417
|
t,
|
|
4351
4418
|
loader,
|
|
4419
|
+
explicitForm: _explicitForm = false,
|
|
4420
|
+
children,
|
|
4352
4421
|
permissions: _permissions = DEFAULT_PERMISSIONS
|
|
4353
4422
|
}) => {
|
|
4423
|
+
const formRef = useRef(null);
|
|
4354
4424
|
const derivedT = createTranslation(t, Object.assign(Object.assign({}, TRANSLATION_PAIRS_COMMON), TRANSLATION_PAIRS_PAGE));
|
|
4355
4425
|
const {
|
|
4356
4426
|
list,
|
|
@@ -4392,21 +4462,34 @@ const Page = ({
|
|
|
4392
4462
|
setSelectedWidgets: setSelectedWidgets,
|
|
4393
4463
|
onChangeWidgetSequence: onChangeWidgetSequence,
|
|
4394
4464
|
getPages: getPages,
|
|
4465
|
+
formState: formState,
|
|
4395
4466
|
// permissions
|
|
4396
4467
|
canAdd: _permissions === null || _permissions === void 0 ? void 0 : _permissions.add,
|
|
4397
4468
|
canDelete: _permissions === null || _permissions === void 0 ? void 0 : _permissions.delete,
|
|
4398
4469
|
canUpdate: _permissions === null || _permissions === void 0 ? void 0 : _permissions.update,
|
|
4399
4470
|
canList: _permissions === null || _permissions === void 0 ? void 0 : _permissions.list
|
|
4400
4471
|
}, {
|
|
4401
|
-
children: [
|
|
4402
|
-
|
|
4403
|
-
|
|
4404
|
-
|
|
4405
|
-
|
|
4472
|
+
children: [children ? children : jsxs(Fragment, {
|
|
4473
|
+
children: [jsx(AddButton$1, {}), jsx(PageSearch, {}), jsxs("div", Object.assign({
|
|
4474
|
+
className: "khb_table-wrapper"
|
|
4475
|
+
}, {
|
|
4476
|
+
children: [jsx(PageTable, {}), jsx(PagePagination, {})]
|
|
4477
|
+
}))]
|
|
4478
|
+
}), !_explicitForm && jsx(Drawer, Object.assign({
|
|
4406
4479
|
open: formState === 'ADD' || formState === 'UPDATE',
|
|
4407
4480
|
onClose: onCloseForm,
|
|
4408
|
-
formState: formState
|
|
4409
|
-
|
|
4481
|
+
title: formState === 'ADD' ? derivedT('page.addPageTitle') : formState === 'UPDATE' ? derivedT('page.updatePageTitle') : '',
|
|
4482
|
+
footerContent: jsx(PageFormActions, {
|
|
4483
|
+
formRef: formRef
|
|
4484
|
+
})
|
|
4485
|
+
}, {
|
|
4486
|
+
children: jsx(PageForm, {
|
|
4487
|
+
open: formState === 'ADD' || formState === 'UPDATE',
|
|
4488
|
+
onClose: onCloseForm,
|
|
4489
|
+
formState: formState,
|
|
4490
|
+
formRef: formRef
|
|
4491
|
+
})
|
|
4492
|
+
})), itemData && jsx(DeleteModal, {
|
|
4410
4493
|
formState: formState,
|
|
4411
4494
|
itemData: itemData,
|
|
4412
4495
|
onClose: onCloseForm,
|
|
@@ -4415,6 +4498,14 @@ const Page = ({
|
|
|
4415
4498
|
}));
|
|
4416
4499
|
};
|
|
4417
4500
|
|
|
4501
|
+
Page.Table = PageTable;
|
|
4502
|
+
Page.Search = PageSearch;
|
|
4503
|
+
Page.Form = PageForm;
|
|
4504
|
+
Page.AddButton = AddButton$1;
|
|
4505
|
+
Page.Pagination = PagePagination;
|
|
4506
|
+
Page.FormActions = PageFormActions;
|
|
4507
|
+
Page.FormWrapper = PageFormWrapper;
|
|
4508
|
+
|
|
4418
4509
|
const useWidget = ({
|
|
4419
4510
|
defaultLimit,
|
|
4420
4511
|
routes,
|
|
@@ -6072,10 +6163,11 @@ function useWidgetState() {
|
|
|
6072
6163
|
const Toggle = ({
|
|
6073
6164
|
isChecked,
|
|
6074
6165
|
disabled,
|
|
6075
|
-
onChange
|
|
6166
|
+
onChange,
|
|
6167
|
+
switchClass
|
|
6076
6168
|
}) => {
|
|
6077
6169
|
return jsxs("label", Object.assign({
|
|
6078
|
-
className:
|
|
6170
|
+
className: switchClass || 'khb_switch',
|
|
6079
6171
|
"data-testid": "khb_switch"
|
|
6080
6172
|
}, {
|
|
6081
6173
|
children: [jsx("input", {
|
|
@@ -6090,6 +6182,9 @@ const Toggle = ({
|
|
|
6090
6182
|
};
|
|
6091
6183
|
|
|
6092
6184
|
const WidgetTable = () => {
|
|
6185
|
+
const {
|
|
6186
|
+
switchClass
|
|
6187
|
+
} = useProviderState();
|
|
6093
6188
|
const {
|
|
6094
6189
|
list,
|
|
6095
6190
|
canList,
|
|
@@ -6127,6 +6222,7 @@ const WidgetTable = () => {
|
|
|
6127
6222
|
Cell: ({
|
|
6128
6223
|
row
|
|
6129
6224
|
}) => jsx(Toggle, {
|
|
6225
|
+
switchClass: switchClass,
|
|
6130
6226
|
isChecked: row === null || row === void 0 ? void 0 : row.isActive,
|
|
6131
6227
|
onChange: status => updateClosure(row, 'isActive', status)
|
|
6132
6228
|
})
|
|
@@ -6511,12 +6607,12 @@ const TileItemsAccordian = ({
|
|
|
6511
6607
|
};
|
|
6512
6608
|
|
|
6513
6609
|
const WidgetForm = ({
|
|
6514
|
-
|
|
6515
|
-
|
|
6516
|
-
formState
|
|
6610
|
+
formState,
|
|
6611
|
+
formRef
|
|
6517
6612
|
}) => {
|
|
6518
6613
|
const {
|
|
6519
|
-
baseUrl
|
|
6614
|
+
baseUrl,
|
|
6615
|
+
switchClass
|
|
6520
6616
|
} = useProviderState();
|
|
6521
6617
|
const {
|
|
6522
6618
|
t,
|
|
@@ -6538,7 +6634,6 @@ const WidgetForm = ({
|
|
|
6538
6634
|
formatOptionLabel
|
|
6539
6635
|
} = useWidgetState();
|
|
6540
6636
|
const callerRef = useRef(null);
|
|
6541
|
-
const widgetFormRef = useRef(null);
|
|
6542
6637
|
const [tilesVisible, setTilesVisible] = useState(false);
|
|
6543
6638
|
const [tilesEnabled, setTilesEnabled] = useState(true);
|
|
6544
6639
|
const [showAutoPlay, setShowAutoPlay] = useState(false);
|
|
@@ -6604,15 +6699,6 @@ const WidgetForm = ({
|
|
|
6604
6699
|
} // Widget Form Functions
|
|
6605
6700
|
|
|
6606
6701
|
|
|
6607
|
-
const onWidgetFormSubmitClick = () => {
|
|
6608
|
-
var _a;
|
|
6609
|
-
|
|
6610
|
-
(_a = widgetFormRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('submit', {
|
|
6611
|
-
cancelable: true,
|
|
6612
|
-
bubbles: true
|
|
6613
|
-
}));
|
|
6614
|
-
};
|
|
6615
|
-
|
|
6616
6702
|
const onWidgetFormInputChange = useCallback((value, name) => {
|
|
6617
6703
|
if (name === 'selectionType') {
|
|
6618
6704
|
if (value['selectionType'] === 'Carousel') setShowAutoPlay(true);else setShowAutoPlay(false);
|
|
@@ -6716,7 +6802,8 @@ const WidgetForm = ({
|
|
|
6716
6802
|
label: t('widget.autoPlay'),
|
|
6717
6803
|
accessor: 'autoPlay',
|
|
6718
6804
|
type: 'checkbox',
|
|
6719
|
-
show: showAutoPlay
|
|
6805
|
+
show: showAutoPlay,
|
|
6806
|
+
switchClass: switchClass
|
|
6720
6807
|
}, {
|
|
6721
6808
|
label: t('widget.webPerRow'),
|
|
6722
6809
|
accessor: 'webPerRow',
|
|
@@ -6817,58 +6904,40 @@ const WidgetForm = ({
|
|
|
6817
6904
|
})
|
|
6818
6905
|
}];
|
|
6819
6906
|
if (!canAdd || !canUpdate) return null;
|
|
6820
|
-
return
|
|
6821
|
-
|
|
6822
|
-
onClose: onClose,
|
|
6823
|
-
title: formState === 'ADD' ? t('widget.addWidgetTitle') : formState === 'UPDATE' ? t('widget.updateWidgetTitle') : '',
|
|
6824
|
-
footerContent: jsxs(Fragment, {
|
|
6825
|
-
children: [jsx(Button, Object.assign({
|
|
6826
|
-
type: "secondary",
|
|
6827
|
-
onClick: onClose
|
|
6828
|
-
}, {
|
|
6829
|
-
children: t('cancelButtonText')
|
|
6830
|
-
})), jsx(Button, Object.assign({
|
|
6831
|
-
onClick: onWidgetFormSubmitClick
|
|
6832
|
-
}, {
|
|
6833
|
-
children: t('saveButtonText')
|
|
6834
|
-
}))]
|
|
6835
|
-
})
|
|
6907
|
+
return jsxs("div", Object.assign({
|
|
6908
|
+
className: "khb_form"
|
|
6836
6909
|
}, {
|
|
6837
|
-
children:
|
|
6838
|
-
|
|
6839
|
-
|
|
6840
|
-
|
|
6841
|
-
|
|
6842
|
-
|
|
6843
|
-
|
|
6844
|
-
|
|
6845
|
-
|
|
6846
|
-
|
|
6847
|
-
|
|
6848
|
-
|
|
6849
|
-
|
|
6850
|
-
|
|
6851
|
-
|
|
6852
|
-
|
|
6853
|
-
|
|
6854
|
-
|
|
6855
|
-
|
|
6856
|
-
|
|
6857
|
-
|
|
6858
|
-
|
|
6859
|
-
|
|
6860
|
-
|
|
6861
|
-
|
|
6862
|
-
|
|
6863
|
-
|
|
6864
|
-
|
|
6865
|
-
|
|
6866
|
-
|
|
6867
|
-
|
|
6868
|
-
deleteText: t('deleteButtonText')
|
|
6869
|
-
})
|
|
6870
|
-
})]
|
|
6871
|
-
}))
|
|
6910
|
+
children: [jsx(Form, {
|
|
6911
|
+
schema: widgetFormSchema,
|
|
6912
|
+
onSubmit: onFormSubmit,
|
|
6913
|
+
ref: formRef,
|
|
6914
|
+
data: data,
|
|
6915
|
+
isUpdating: formState === 'UPDATE',
|
|
6916
|
+
watcher: onWidgetFormInputChange
|
|
6917
|
+
}), !tilesEnabled && jsx(DNDItemsList, {
|
|
6918
|
+
items: selectedCollectionItems,
|
|
6919
|
+
onDragEnd: onCollectionIndexChange,
|
|
6920
|
+
formatItem: formatListItem
|
|
6921
|
+
}), tilesEnabled && jsx(Fragment, {
|
|
6922
|
+
children: jsx(TileItemsAccordian, {
|
|
6923
|
+
collapseId: "imageItems",
|
|
6924
|
+
title: t('widget.imageItems'),
|
|
6925
|
+
id: "items",
|
|
6926
|
+
schema: tileFormSchema,
|
|
6927
|
+
show: tilesVisible,
|
|
6928
|
+
tilesData: tilesList,
|
|
6929
|
+
toggleShow: setTilesVisible,
|
|
6930
|
+
onDataSubmit: onTileFormSubmit,
|
|
6931
|
+
tileType: "Web",
|
|
6932
|
+
widgetId: data === null || data === void 0 ? void 0 : data._id,
|
|
6933
|
+
onDelete: onDeleteTile,
|
|
6934
|
+
addText: t('addButtonText'),
|
|
6935
|
+
cancelText: t('cancelButtonText'),
|
|
6936
|
+
saveText: t('saveButtonText'),
|
|
6937
|
+
editText: t('editButtonText'),
|
|
6938
|
+
deleteText: t('deleteButtonText')
|
|
6939
|
+
})
|
|
6940
|
+
})]
|
|
6872
6941
|
}));
|
|
6873
6942
|
};
|
|
6874
6943
|
|
|
@@ -6931,13 +7000,71 @@ const WidgetSearch = () => {
|
|
|
6931
7000
|
});
|
|
6932
7001
|
};
|
|
6933
7002
|
|
|
7003
|
+
const WidgetFormActions = ({
|
|
7004
|
+
formRef
|
|
7005
|
+
}) => {
|
|
7006
|
+
const {
|
|
7007
|
+
onError
|
|
7008
|
+
} = useProviderState();
|
|
7009
|
+
const {
|
|
7010
|
+
closeForm,
|
|
7011
|
+
loading,
|
|
7012
|
+
canAdd,
|
|
7013
|
+
canUpdate,
|
|
7014
|
+
t
|
|
7015
|
+
} = useWidgetState();
|
|
7016
|
+
|
|
7017
|
+
const onSubmitClick = e => {
|
|
7018
|
+
var _a;
|
|
7019
|
+
|
|
7020
|
+
if (!formRef) {
|
|
7021
|
+
return onError(CALLBACK_CODES.INTERNAL, 'error', `formRef is required to submit the form!`);
|
|
7022
|
+
} else if (!formRef.current) {
|
|
7023
|
+
return onError(CALLBACK_CODES.INTERNAL, 'error', `formRef is empty, make sure it's passed as 'ref' prop to the form!`);
|
|
7024
|
+
} // formRef is provided
|
|
7025
|
+
|
|
7026
|
+
|
|
7027
|
+
e === null || e === void 0 ? void 0 : e.preventDefault();
|
|
7028
|
+
(_a = formRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('submit', {
|
|
7029
|
+
cancelable: true,
|
|
7030
|
+
bubbles: true
|
|
7031
|
+
}));
|
|
7032
|
+
};
|
|
7033
|
+
|
|
7034
|
+
if (!canAdd && !canUpdate) return null;
|
|
7035
|
+
return jsx(FormActions, {
|
|
7036
|
+
loading: loading,
|
|
7037
|
+
primaryLabel: t('saveButtonText'),
|
|
7038
|
+
onPrimaryButtonClick: onSubmitClick,
|
|
7039
|
+
onSecondaryButtonClick: closeForm,
|
|
7040
|
+
secondaryLabel: t('cancelButtonText')
|
|
7041
|
+
});
|
|
7042
|
+
};
|
|
7043
|
+
|
|
7044
|
+
const WiddgetFormWrapper = ({
|
|
7045
|
+
children
|
|
7046
|
+
}) => {
|
|
7047
|
+
const {
|
|
7048
|
+
formState,
|
|
7049
|
+
closeForm
|
|
7050
|
+
} = useWidgetState();
|
|
7051
|
+
return typeof children === 'function' ? children({
|
|
7052
|
+
formState,
|
|
7053
|
+
onClose: closeForm,
|
|
7054
|
+
open: formState === 'ADD' || formState === 'UPDATE'
|
|
7055
|
+
}) : null;
|
|
7056
|
+
};
|
|
7057
|
+
|
|
6934
7058
|
const Widget = ({
|
|
6935
7059
|
t,
|
|
6936
7060
|
loader,
|
|
7061
|
+
explicitForm: _explicitForm = false,
|
|
6937
7062
|
permissions: _permissions = DEFAULT_PERMISSIONS,
|
|
6938
7063
|
formatListItem,
|
|
6939
|
-
formatOptionLabel
|
|
7064
|
+
formatOptionLabel,
|
|
7065
|
+
children
|
|
6940
7066
|
}) => {
|
|
7067
|
+
const widgetFormRef = useRef(null);
|
|
6941
7068
|
const derivedT = createTranslation(t, Object.assign(Object.assign(Object.assign({}, TRANSLATION_PAIRS_COMMON), TRANSLATION_PAIRS_WIDGET), TRANSLATION_PAIRS_TILES));
|
|
6942
7069
|
const {
|
|
6943
7070
|
list,
|
|
@@ -7006,17 +7133,30 @@ const Widget = ({
|
|
|
7006
7133
|
canDelete: _permissions.delete,
|
|
7007
7134
|
canList: _permissions.list,
|
|
7008
7135
|
canUpdate: _permissions.update,
|
|
7009
|
-
canPartialUpdate: _permissions.partialUpdate
|
|
7136
|
+
canPartialUpdate: _permissions.partialUpdate,
|
|
7137
|
+
formState: formState
|
|
7010
7138
|
}, {
|
|
7011
|
-
children: [
|
|
7012
|
-
|
|
7013
|
-
|
|
7014
|
-
|
|
7015
|
-
|
|
7139
|
+
children: [children ? children : jsxs(Fragment, {
|
|
7140
|
+
children: [jsx(AddButton, {}), jsx(WidgetSearch, {}), jsxs("div", Object.assign({
|
|
7141
|
+
className: "khb_table-wrapper"
|
|
7142
|
+
}, {
|
|
7143
|
+
children: [jsx(WidgetTable, {}), jsx(WidgetPagination, {})]
|
|
7144
|
+
}))]
|
|
7145
|
+
}), !_explicitForm && jsx(Drawer, Object.assign({
|
|
7016
7146
|
open: formState === 'ADD' || formState === 'UPDATE',
|
|
7017
7147
|
onClose: onCloseForm,
|
|
7018
|
-
formState: formState
|
|
7019
|
-
|
|
7148
|
+
title: formState === 'ADD' ? derivedT('widget.addWidgetTitle') : formState === 'UPDATE' ? derivedT('widget.updateWidgetTitle') : '',
|
|
7149
|
+
footerContent: jsx(WidgetFormActions, {
|
|
7150
|
+
formRef: widgetFormRef
|
|
7151
|
+
})
|
|
7152
|
+
}, {
|
|
7153
|
+
children: jsx(WidgetForm, {
|
|
7154
|
+
open: formState === 'ADD' || formState === 'UPDATE',
|
|
7155
|
+
onClose: onCloseForm,
|
|
7156
|
+
formState: formState,
|
|
7157
|
+
formRef: widgetFormRef
|
|
7158
|
+
})
|
|
7159
|
+
})), itemData && jsx(DeleteModal, {
|
|
7020
7160
|
formState: formState,
|
|
7021
7161
|
itemData: itemData,
|
|
7022
7162
|
onClose: onCloseForm,
|
|
@@ -7026,5 +7166,11 @@ const Widget = ({
|
|
|
7026
7166
|
};
|
|
7027
7167
|
|
|
7028
7168
|
Widget.Table = WidgetTable;
|
|
7169
|
+
Widget.Form = WidgetForm;
|
|
7170
|
+
Widget.AddButton = AddButton;
|
|
7171
|
+
Widget.Search = WidgetSearch;
|
|
7172
|
+
Widget.Pagination = WidgetPagination;
|
|
7173
|
+
Widget.FormWrapper = WiddgetFormWrapper;
|
|
7174
|
+
Widget.FormActions = WidgetFormActions;
|
|
7029
7175
|
|
|
7030
7176
|
export { Page, Provider, Widget };
|
package/lib/api/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ACTION_TYPES, API_TYPE, BaseAPIProps, Routes_Input } from '../types';
|
|
2
|
-
declare const commonApi: ({ data, config, baseUrl, token, url, method, onError, }: BaseAPIProps) => Promise<
|
|
1
|
+
import { ACTION_TYPES, API_TYPE, BaseAPIProps, Routes_Input, ResponseType } from '../types';
|
|
2
|
+
declare const commonApi: ({ data, config, baseUrl, token, url, method, onError, }: BaseAPIProps) => Promise<ResponseType>;
|
|
3
3
|
declare const getApiType: ({ routes, action, prefix, id, }: {
|
|
4
4
|
routes?: Routes_Input | undefined;
|
|
5
5
|
action: ACTION_TYPES;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { FormProps } from '../../../types';
|
|
3
|
-
declare const PageForm: ({ onClose, open, formState }: FormProps) => JSX.Element | null;
|
|
3
|
+
declare const PageForm: ({ onClose, open, formState, formRef }: FormProps) => JSX.Element | null;
|
|
4
4
|
export default PageForm;
|
|
@@ -1,4 +1,13 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { PageProps } from '../../../types';
|
|
3
|
-
declare const Page:
|
|
3
|
+
declare const Page: {
|
|
4
|
+
({ t, loader, explicitForm, children, permissions, }: PageProps): JSX.Element;
|
|
5
|
+
Table: () => JSX.Element | null;
|
|
6
|
+
Search: () => JSX.Element;
|
|
7
|
+
Form: ({ onClose, open, formState, formRef }: import("../../../types").FormProps) => JSX.Element | null;
|
|
8
|
+
AddButton: () => JSX.Element;
|
|
9
|
+
Pagination: () => JSX.Element;
|
|
10
|
+
FormActions: ({ formRef }: import("../../../types").FormActionWrapperProps) => JSX.Element | null;
|
|
11
|
+
FormWrapper: ({ children }: import("../../../types").FormWrapperProps) => JSX.Element | null;
|
|
12
|
+
};
|
|
4
13
|
export default Page;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { FormProps } from '../../../types';
|
|
3
|
-
declare const WidgetForm: ({
|
|
3
|
+
declare const WidgetForm: ({ formState, formRef }: FormProps) => JSX.Element | null;
|
|
4
4
|
export default WidgetForm;
|
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { WidgetProps } from '../../../types';
|
|
3
3
|
declare const Widget: {
|
|
4
|
-
({ t, loader, permissions, formatListItem, formatOptionLabel, }: WidgetProps): JSX.Element;
|
|
4
|
+
({ t, loader, explicitForm, permissions, formatListItem, formatOptionLabel, children, }: WidgetProps): JSX.Element;
|
|
5
5
|
Table: () => JSX.Element | null;
|
|
6
|
+
Form: ({ formState, formRef }: import("../../../types").FormProps) => JSX.Element | null;
|
|
7
|
+
AddButton: () => JSX.Element;
|
|
8
|
+
Search: () => JSX.Element;
|
|
9
|
+
Pagination: () => JSX.Element;
|
|
10
|
+
FormWrapper: ({ children }: import("../../../types").FormWrapperProps) => JSX.Element | null;
|
|
11
|
+
FormActions: ({ formRef }: import("../../../types").FormActionWrapperProps) => JSX.Element | null;
|
|
6
12
|
};
|
|
7
13
|
export default Widget;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface FormActionsProps {
|
|
3
|
+
loading?: boolean;
|
|
4
|
+
primaryLabel?: string;
|
|
5
|
+
secondaryLabel?: string;
|
|
6
|
+
onPrimaryButtonClick?: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
|
7
|
+
onSecondaryButtonClick?: () => void;
|
|
8
|
+
}
|
|
9
|
+
declare const FormActions: ({ loading, primaryLabel, secondaryLabel, onPrimaryButtonClick, onSecondaryButtonClick, }: FormActionsProps) => JSX.Element;
|
|
10
|
+
export default FormActions;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { CheckboxProps } from '../../../types';
|
|
3
|
-
declare const Checkbox: ({ rest, label, error, wrapperClassName, disabled, }: CheckboxProps) => JSX.Element;
|
|
3
|
+
declare const Checkbox: ({ rest, label, error, wrapperClassName, disabled, switchClass, }: CheckboxProps) => JSX.Element;
|
|
4
4
|
export default Checkbox;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ToggleProps } from '../../../types';
|
|
3
|
-
declare const Toggle: ({ isChecked, disabled, onChange }: ToggleProps) => JSX.Element;
|
|
3
|
+
declare const Toggle: ({ isChecked, disabled, onChange, switchClass, }: ToggleProps) => JSX.Element;
|
|
4
4
|
export default Toggle;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ProviderContextProviderProps, ProviderContextType } from '../types';
|
|
3
|
-
declare const Provider: ({ children, baseUrl, token, onError, onSuccess, onLogout, tilesRoutesPrefix, widgetRoutesPrefix, pageRoutesPrefix, }: ProviderContextProviderProps) => JSX.Element;
|
|
3
|
+
declare const Provider: ({ children, baseUrl, token, onError, onSuccess, onLogout, switchClass, tilesRoutesPrefix, widgetRoutesPrefix, pageRoutesPrefix, }: ProviderContextProviderProps) => JSX.Element;
|
|
4
4
|
export declare function useProviderState(): ProviderContextType;
|
|
5
5
|
export default Provider;
|
package/lib/types/api.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import React, { MutableRefObject } from 'react';
|
|
2
2
|
import { DropResult } from 'react-beautiful-dnd';
|
|
3
3
|
import { RegisterOptions } from 'react-hook-form';
|
|
4
4
|
import { OptionType, FormActionTypes, PermissionsObj, ObjectType } from './common';
|
|
@@ -55,6 +55,7 @@ export interface CheckboxProps {
|
|
|
55
55
|
className?: string;
|
|
56
56
|
disabled?: boolean;
|
|
57
57
|
wrapperClassName?: string;
|
|
58
|
+
switchClass?: string;
|
|
58
59
|
}
|
|
59
60
|
export interface SelectProps {
|
|
60
61
|
value?: string | number;
|
|
@@ -126,6 +127,7 @@ export interface FormProps {
|
|
|
126
127
|
open: boolean;
|
|
127
128
|
onClose: () => void;
|
|
128
129
|
formState: FormActionTypes | undefined;
|
|
130
|
+
formRef: MutableRefObject<HTMLFormElement | null>;
|
|
129
131
|
}
|
|
130
132
|
export interface InputRendererProps {
|
|
131
133
|
field: import('react-hook-form').ControllerRenderProps;
|
|
@@ -136,9 +138,21 @@ export interface InputRendererProps {
|
|
|
136
138
|
export interface WidgetProps {
|
|
137
139
|
t?: any;
|
|
138
140
|
loader?: any;
|
|
141
|
+
explicitForm?: boolean;
|
|
139
142
|
permissions?: PermissionsObj;
|
|
140
143
|
formatListItem?: (code: string, data: any) => JSX.Element;
|
|
141
144
|
formatOptionLabel?: (code: string, data: any) => JSX.Element;
|
|
145
|
+
children?: JSX.Element;
|
|
146
|
+
}
|
|
147
|
+
export interface FormWrapperProps {
|
|
148
|
+
children: (data: {
|
|
149
|
+
formState: FormActionTypes | undefined;
|
|
150
|
+
onClose: () => void;
|
|
151
|
+
open: boolean;
|
|
152
|
+
}) => JSX.Element | null;
|
|
153
|
+
}
|
|
154
|
+
export interface FormActionWrapperProps {
|
|
155
|
+
formRef: MutableRefObject<HTMLFormElement | null>;
|
|
142
156
|
}
|
|
143
157
|
export interface SchemaType extends ReactSelectProps {
|
|
144
158
|
label?: string;
|
|
@@ -163,11 +177,14 @@ export interface SchemaType extends ReactSelectProps {
|
|
|
163
177
|
onChange?: (e: any) => void;
|
|
164
178
|
show?: boolean;
|
|
165
179
|
wrapperClassName?: string;
|
|
180
|
+
switchClass?: string;
|
|
166
181
|
}
|
|
167
182
|
export interface PageProps {
|
|
168
183
|
t?: any;
|
|
169
184
|
loader?: any;
|
|
185
|
+
explicitForm?: boolean;
|
|
170
186
|
permissions?: PermissionsObj;
|
|
187
|
+
children?: JSX.Element;
|
|
171
188
|
}
|
|
172
189
|
export interface PaginationProps {
|
|
173
190
|
totalPages: number;
|
|
@@ -219,6 +236,7 @@ export interface ToggleProps {
|
|
|
219
236
|
isChecked?: boolean;
|
|
220
237
|
disabled?: boolean;
|
|
221
238
|
onChange?: (status: boolean) => void;
|
|
239
|
+
switchClass?: string;
|
|
222
240
|
}
|
|
223
241
|
export interface DeleteModalProps {
|
|
224
242
|
formState: FormActionTypes | undefined;
|
package/lib/types/context.d.ts
CHANGED
|
@@ -6,15 +6,17 @@ export interface ProviderContextType {
|
|
|
6
6
|
token: string | (() => Promise<string>);
|
|
7
7
|
onError: (callback_code: import('../constants/common').CALLBACK_CODES, code: string, message: string) => void;
|
|
8
8
|
onSuccess: (callback_code: import('../constants/common').CALLBACK_CODES, code: string, message: string) => void;
|
|
9
|
+
switchClass: string;
|
|
9
10
|
onLogout: () => void;
|
|
10
11
|
widgetRoutesPrefix: string;
|
|
11
12
|
tilesRoutesPrefix: string;
|
|
12
13
|
pageRoutesPrefix: string;
|
|
13
14
|
}
|
|
14
|
-
export interface ProviderContextProviderProps extends React.PropsWithChildren, Omit<ProviderContextType, 'onError' | 'onSuccess' | 'onLogout' | 'widgetRoutesPrefix' | 'tilesRoutesPrefix' | 'pageRoutesPrefix'> {
|
|
15
|
+
export interface ProviderContextProviderProps extends React.PropsWithChildren, Omit<ProviderContextType, 'onError' | 'onSuccess' | 'onLogout' | 'widgetRoutesPrefix' | 'tilesRoutesPrefix' | 'pageRoutesPrefix' | 'switchClass'> {
|
|
15
16
|
onError?: (callback_code: import('../constants/common').CALLBACK_CODES, code: string, message: string) => void;
|
|
16
17
|
onSuccess?: (callback_code: import('../constants/common').CALLBACK_CODES, code: string, message: string) => void;
|
|
17
18
|
onLogout?: () => void;
|
|
19
|
+
switchClass?: string;
|
|
18
20
|
widgetRoutesPrefix?: string;
|
|
19
21
|
tilesRoutesPrefix?: string;
|
|
20
22
|
pageRoutesPrefix?: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@knovator/pagecreator-admin",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.5",
|
|
4
4
|
"dependencies": {
|
|
5
5
|
"classnames": "^2.3.1",
|
|
6
6
|
"react-beautiful-dnd": "^13.1.0",
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"react-hook-form": "^7.34.2",
|
|
9
9
|
"react-dropzone": "^14.2.2",
|
|
10
10
|
"react-select": "^5.4.0",
|
|
11
|
-
"@knovator/api": "^
|
|
11
|
+
"@knovator/api": "^1.0.2"
|
|
12
12
|
},
|
|
13
13
|
"peerDependencies": {
|
|
14
14
|
"react": "^18"
|