@knovator/pagecreator-admin 0.0.3 → 0.0.6
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 +255 -110
- 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/components.d.ts +19 -1
- package/lib/types/context.d.ts +3 -1
- package/package.json +1 -1
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
|
|
@@ -3270,7 +3272,8 @@ const Checkbox = ({
|
|
|
3270
3272
|
label,
|
|
3271
3273
|
error,
|
|
3272
3274
|
wrapperClassName,
|
|
3273
|
-
disabled
|
|
3275
|
+
disabled,
|
|
3276
|
+
switchClass
|
|
3274
3277
|
}) => {
|
|
3275
3278
|
return jsxs("div", Object.assign({
|
|
3276
3279
|
className: classNames('khb_input-wrapper', wrapperClassName)
|
|
@@ -3280,7 +3283,7 @@ const Checkbox = ({
|
|
|
3280
3283
|
}, {
|
|
3281
3284
|
children: label
|
|
3282
3285
|
})), jsxs("label", Object.assign({
|
|
3283
|
-
className:
|
|
3286
|
+
className: switchClass || 'khb_switch',
|
|
3284
3287
|
"data-testid": "khb_switch"
|
|
3285
3288
|
}, {
|
|
3286
3289
|
children: [jsx("input", Object.assign({
|
|
@@ -3686,6 +3689,7 @@ const Form = /*#__PURE__*/forwardRef(({
|
|
|
3686
3689
|
case 'checkbox':
|
|
3687
3690
|
input = jsx(Input.Checkbox, {
|
|
3688
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,
|
|
3689
3693
|
label: schema.label,
|
|
3690
3694
|
rest: register(schema.accessor, schema.validations || {}),
|
|
3691
3695
|
className: "block",
|
|
@@ -3932,10 +3936,75 @@ const DNDItemsList = ({
|
|
|
3932
3936
|
}));
|
|
3933
3937
|
};
|
|
3934
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
|
+
|
|
3935
4003
|
const PageForm = ({
|
|
3936
4004
|
onClose,
|
|
3937
4005
|
open,
|
|
3938
|
-
formState
|
|
4006
|
+
formState,
|
|
4007
|
+
formRef
|
|
3939
4008
|
}) => {
|
|
3940
4009
|
const {
|
|
3941
4010
|
t,
|
|
@@ -3947,8 +4016,7 @@ const PageForm = ({
|
|
|
3947
4016
|
onChangeWidgetSequence,
|
|
3948
4017
|
canAdd,
|
|
3949
4018
|
canUpdate
|
|
3950
|
-
} = usePageState();
|
|
3951
|
-
const pageFormRef = useRef(null); // Form Utility Functions
|
|
4019
|
+
} = usePageState(); // Form Utility Functions
|
|
3952
4020
|
|
|
3953
4021
|
function handleCapitalize(event) {
|
|
3954
4022
|
event.target.value = capitalizeFirstLetter(event.target.value);
|
|
@@ -3961,15 +4029,6 @@ const PageForm = ({
|
|
|
3961
4029
|
} // Widget Form Functions
|
|
3962
4030
|
|
|
3963
4031
|
|
|
3964
|
-
const onPageFormSubmitClick = () => {
|
|
3965
|
-
var _a;
|
|
3966
|
-
|
|
3967
|
-
(_a = pageFormRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('submit', {
|
|
3968
|
-
cancelable: true,
|
|
3969
|
-
bubbles: true
|
|
3970
|
-
}));
|
|
3971
|
-
};
|
|
3972
|
-
|
|
3973
4032
|
const onDragEnd = result => {
|
|
3974
4033
|
const {
|
|
3975
4034
|
destination,
|
|
@@ -4014,17 +4073,8 @@ const PageForm = ({
|
|
|
4014
4073
|
open: open,
|
|
4015
4074
|
onClose: onClose,
|
|
4016
4075
|
title: formState === 'ADD' ? t('page.addPageTitle') : formState === 'UPDATE' ? t('page.updatePageTitle') : '',
|
|
4017
|
-
footerContent:
|
|
4018
|
-
|
|
4019
|
-
type: "secondary",
|
|
4020
|
-
onClick: onClose
|
|
4021
|
-
}, {
|
|
4022
|
-
children: t('cancelButtonText')
|
|
4023
|
-
})), jsx(Button, Object.assign({
|
|
4024
|
-
onClick: onPageFormSubmitClick
|
|
4025
|
-
}, {
|
|
4026
|
-
children: t('saveButtonText')
|
|
4027
|
-
}))]
|
|
4076
|
+
footerContent: jsx(PageFormActions, {
|
|
4077
|
+
formRef: formRef
|
|
4028
4078
|
})
|
|
4029
4079
|
}, {
|
|
4030
4080
|
children: jsxs("div", Object.assign({
|
|
@@ -4033,7 +4083,7 @@ const PageForm = ({
|
|
|
4033
4083
|
children: [jsx(Form, {
|
|
4034
4084
|
schema: pageFormSchema,
|
|
4035
4085
|
onSubmit: onPageFormSubmit,
|
|
4036
|
-
ref:
|
|
4086
|
+
ref: formRef,
|
|
4037
4087
|
data: data,
|
|
4038
4088
|
isUpdating: formState === 'UPDATE',
|
|
4039
4089
|
updates: {
|
|
@@ -4349,11 +4399,28 @@ const DeleteModal = ({
|
|
|
4349
4399
|
})) : null;
|
|
4350
4400
|
};
|
|
4351
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
|
+
|
|
4352
4416
|
const Page = ({
|
|
4353
4417
|
t,
|
|
4354
4418
|
loader,
|
|
4419
|
+
explicitForm: _explicitForm = false,
|
|
4420
|
+
children,
|
|
4355
4421
|
permissions: _permissions = DEFAULT_PERMISSIONS
|
|
4356
4422
|
}) => {
|
|
4423
|
+
const formRef = useRef(null);
|
|
4357
4424
|
const derivedT = createTranslation(t, Object.assign(Object.assign({}, TRANSLATION_PAIRS_COMMON), TRANSLATION_PAIRS_PAGE));
|
|
4358
4425
|
const {
|
|
4359
4426
|
list,
|
|
@@ -4395,21 +4462,35 @@ const Page = ({
|
|
|
4395
4462
|
setSelectedWidgets: setSelectedWidgets,
|
|
4396
4463
|
onChangeWidgetSequence: onChangeWidgetSequence,
|
|
4397
4464
|
getPages: getPages,
|
|
4465
|
+
formState: formState,
|
|
4466
|
+
closeForm: onCloseForm,
|
|
4398
4467
|
// permissions
|
|
4399
4468
|
canAdd: _permissions === null || _permissions === void 0 ? void 0 : _permissions.add,
|
|
4400
4469
|
canDelete: _permissions === null || _permissions === void 0 ? void 0 : _permissions.delete,
|
|
4401
4470
|
canUpdate: _permissions === null || _permissions === void 0 ? void 0 : _permissions.update,
|
|
4402
4471
|
canList: _permissions === null || _permissions === void 0 ? void 0 : _permissions.list
|
|
4403
4472
|
}, {
|
|
4404
|
-
children: [
|
|
4405
|
-
|
|
4406
|
-
|
|
4407
|
-
|
|
4408
|
-
|
|
4473
|
+
children: [children ? children : jsxs(Fragment, {
|
|
4474
|
+
children: [jsx(AddButton$1, {}), jsx(PageSearch, {}), jsxs("div", Object.assign({
|
|
4475
|
+
className: "khb_table-wrapper"
|
|
4476
|
+
}, {
|
|
4477
|
+
children: [jsx(PageTable, {}), jsx(PagePagination, {})]
|
|
4478
|
+
}))]
|
|
4479
|
+
}), !_explicitForm && jsx(Drawer, Object.assign({
|
|
4409
4480
|
open: formState === 'ADD' || formState === 'UPDATE',
|
|
4410
4481
|
onClose: onCloseForm,
|
|
4411
|
-
formState: formState
|
|
4412
|
-
|
|
4482
|
+
title: formState === 'ADD' ? derivedT('page.addPageTitle') : formState === 'UPDATE' ? derivedT('page.updatePageTitle') : '',
|
|
4483
|
+
footerContent: jsx(PageFormActions, {
|
|
4484
|
+
formRef: formRef
|
|
4485
|
+
})
|
|
4486
|
+
}, {
|
|
4487
|
+
children: jsx(PageForm, {
|
|
4488
|
+
open: formState === 'ADD' || formState === 'UPDATE',
|
|
4489
|
+
onClose: onCloseForm,
|
|
4490
|
+
formState: formState,
|
|
4491
|
+
formRef: formRef
|
|
4492
|
+
})
|
|
4493
|
+
})), itemData && jsx(DeleteModal, {
|
|
4413
4494
|
formState: formState,
|
|
4414
4495
|
itemData: itemData,
|
|
4415
4496
|
onClose: onCloseForm,
|
|
@@ -4418,6 +4499,14 @@ const Page = ({
|
|
|
4418
4499
|
}));
|
|
4419
4500
|
};
|
|
4420
4501
|
|
|
4502
|
+
Page.Table = PageTable;
|
|
4503
|
+
Page.Search = PageSearch;
|
|
4504
|
+
Page.Form = PageForm;
|
|
4505
|
+
Page.AddButton = AddButton$1;
|
|
4506
|
+
Page.Pagination = PagePagination;
|
|
4507
|
+
Page.FormActions = PageFormActions;
|
|
4508
|
+
Page.FormWrapper = PageFormWrapper;
|
|
4509
|
+
|
|
4421
4510
|
const useWidget = ({
|
|
4422
4511
|
defaultLimit,
|
|
4423
4512
|
routes,
|
|
@@ -6075,10 +6164,11 @@ function useWidgetState() {
|
|
|
6075
6164
|
const Toggle = ({
|
|
6076
6165
|
isChecked,
|
|
6077
6166
|
disabled,
|
|
6078
|
-
onChange
|
|
6167
|
+
onChange,
|
|
6168
|
+
switchClass
|
|
6079
6169
|
}) => {
|
|
6080
6170
|
return jsxs("label", Object.assign({
|
|
6081
|
-
className:
|
|
6171
|
+
className: switchClass || 'khb_switch',
|
|
6082
6172
|
"data-testid": "khb_switch"
|
|
6083
6173
|
}, {
|
|
6084
6174
|
children: [jsx("input", {
|
|
@@ -6093,6 +6183,9 @@ const Toggle = ({
|
|
|
6093
6183
|
};
|
|
6094
6184
|
|
|
6095
6185
|
const WidgetTable = () => {
|
|
6186
|
+
const {
|
|
6187
|
+
switchClass
|
|
6188
|
+
} = useProviderState();
|
|
6096
6189
|
const {
|
|
6097
6190
|
list,
|
|
6098
6191
|
canList,
|
|
@@ -6130,6 +6223,7 @@ const WidgetTable = () => {
|
|
|
6130
6223
|
Cell: ({
|
|
6131
6224
|
row
|
|
6132
6225
|
}) => jsx(Toggle, {
|
|
6226
|
+
switchClass: switchClass,
|
|
6133
6227
|
isChecked: row === null || row === void 0 ? void 0 : row.isActive,
|
|
6134
6228
|
onChange: status => updateClosure(row, 'isActive', status)
|
|
6135
6229
|
})
|
|
@@ -6514,12 +6608,12 @@ const TileItemsAccordian = ({
|
|
|
6514
6608
|
};
|
|
6515
6609
|
|
|
6516
6610
|
const WidgetForm = ({
|
|
6517
|
-
|
|
6518
|
-
|
|
6519
|
-
formState
|
|
6611
|
+
formState,
|
|
6612
|
+
formRef
|
|
6520
6613
|
}) => {
|
|
6521
6614
|
const {
|
|
6522
|
-
baseUrl
|
|
6615
|
+
baseUrl,
|
|
6616
|
+
switchClass
|
|
6523
6617
|
} = useProviderState();
|
|
6524
6618
|
const {
|
|
6525
6619
|
t,
|
|
@@ -6541,7 +6635,6 @@ const WidgetForm = ({
|
|
|
6541
6635
|
formatOptionLabel
|
|
6542
6636
|
} = useWidgetState();
|
|
6543
6637
|
const callerRef = useRef(null);
|
|
6544
|
-
const widgetFormRef = useRef(null);
|
|
6545
6638
|
const [tilesVisible, setTilesVisible] = useState(false);
|
|
6546
6639
|
const [tilesEnabled, setTilesEnabled] = useState(true);
|
|
6547
6640
|
const [showAutoPlay, setShowAutoPlay] = useState(false);
|
|
@@ -6607,15 +6700,6 @@ const WidgetForm = ({
|
|
|
6607
6700
|
} // Widget Form Functions
|
|
6608
6701
|
|
|
6609
6702
|
|
|
6610
|
-
const onWidgetFormSubmitClick = () => {
|
|
6611
|
-
var _a;
|
|
6612
|
-
|
|
6613
|
-
(_a = widgetFormRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('submit', {
|
|
6614
|
-
cancelable: true,
|
|
6615
|
-
bubbles: true
|
|
6616
|
-
}));
|
|
6617
|
-
};
|
|
6618
|
-
|
|
6619
6703
|
const onWidgetFormInputChange = useCallback((value, name) => {
|
|
6620
6704
|
if (name === 'selectionType') {
|
|
6621
6705
|
if (value['selectionType'] === 'Carousel') setShowAutoPlay(true);else setShowAutoPlay(false);
|
|
@@ -6719,7 +6803,8 @@ const WidgetForm = ({
|
|
|
6719
6803
|
label: t('widget.autoPlay'),
|
|
6720
6804
|
accessor: 'autoPlay',
|
|
6721
6805
|
type: 'checkbox',
|
|
6722
|
-
show: showAutoPlay
|
|
6806
|
+
show: showAutoPlay,
|
|
6807
|
+
switchClass: switchClass
|
|
6723
6808
|
}, {
|
|
6724
6809
|
label: t('widget.webPerRow'),
|
|
6725
6810
|
accessor: 'webPerRow',
|
|
@@ -6820,58 +6905,40 @@ const WidgetForm = ({
|
|
|
6820
6905
|
})
|
|
6821
6906
|
}];
|
|
6822
6907
|
if (!canAdd || !canUpdate) return null;
|
|
6823
|
-
return
|
|
6824
|
-
|
|
6825
|
-
onClose: onClose,
|
|
6826
|
-
title: formState === 'ADD' ? t('widget.addWidgetTitle') : formState === 'UPDATE' ? t('widget.updateWidgetTitle') : '',
|
|
6827
|
-
footerContent: jsxs(Fragment, {
|
|
6828
|
-
children: [jsx(Button, Object.assign({
|
|
6829
|
-
type: "secondary",
|
|
6830
|
-
onClick: onClose
|
|
6831
|
-
}, {
|
|
6832
|
-
children: t('cancelButtonText')
|
|
6833
|
-
})), jsx(Button, Object.assign({
|
|
6834
|
-
onClick: onWidgetFormSubmitClick
|
|
6835
|
-
}, {
|
|
6836
|
-
children: t('saveButtonText')
|
|
6837
|
-
}))]
|
|
6838
|
-
})
|
|
6908
|
+
return jsxs("div", Object.assign({
|
|
6909
|
+
className: "khb_form"
|
|
6839
6910
|
}, {
|
|
6840
|
-
children:
|
|
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
|
-
|
|
6869
|
-
|
|
6870
|
-
|
|
6871
|
-
deleteText: t('deleteButtonText')
|
|
6872
|
-
})
|
|
6873
|
-
})]
|
|
6874
|
-
}))
|
|
6911
|
+
children: [jsx(Form, {
|
|
6912
|
+
schema: widgetFormSchema,
|
|
6913
|
+
onSubmit: onFormSubmit,
|
|
6914
|
+
ref: formRef,
|
|
6915
|
+
data: data,
|
|
6916
|
+
isUpdating: formState === 'UPDATE',
|
|
6917
|
+
watcher: onWidgetFormInputChange
|
|
6918
|
+
}), !tilesEnabled && jsx(DNDItemsList, {
|
|
6919
|
+
items: selectedCollectionItems,
|
|
6920
|
+
onDragEnd: onCollectionIndexChange,
|
|
6921
|
+
formatItem: formatListItem
|
|
6922
|
+
}), tilesEnabled && jsx(Fragment, {
|
|
6923
|
+
children: jsx(TileItemsAccordian, {
|
|
6924
|
+
collapseId: "imageItems",
|
|
6925
|
+
title: t('widget.imageItems'),
|
|
6926
|
+
id: "items",
|
|
6927
|
+
schema: tileFormSchema,
|
|
6928
|
+
show: tilesVisible,
|
|
6929
|
+
tilesData: tilesList,
|
|
6930
|
+
toggleShow: setTilesVisible,
|
|
6931
|
+
onDataSubmit: onTileFormSubmit,
|
|
6932
|
+
tileType: "Web",
|
|
6933
|
+
widgetId: data === null || data === void 0 ? void 0 : data._id,
|
|
6934
|
+
onDelete: onDeleteTile,
|
|
6935
|
+
addText: t('addButtonText'),
|
|
6936
|
+
cancelText: t('cancelButtonText'),
|
|
6937
|
+
saveText: t('saveButtonText'),
|
|
6938
|
+
editText: t('editButtonText'),
|
|
6939
|
+
deleteText: t('deleteButtonText')
|
|
6940
|
+
})
|
|
6941
|
+
})]
|
|
6875
6942
|
}));
|
|
6876
6943
|
};
|
|
6877
6944
|
|
|
@@ -6934,13 +7001,71 @@ const WidgetSearch = () => {
|
|
|
6934
7001
|
});
|
|
6935
7002
|
};
|
|
6936
7003
|
|
|
7004
|
+
const WidgetFormActions = ({
|
|
7005
|
+
formRef
|
|
7006
|
+
}) => {
|
|
7007
|
+
const {
|
|
7008
|
+
onError
|
|
7009
|
+
} = useProviderState();
|
|
7010
|
+
const {
|
|
7011
|
+
closeForm,
|
|
7012
|
+
loading,
|
|
7013
|
+
canAdd,
|
|
7014
|
+
canUpdate,
|
|
7015
|
+
t
|
|
7016
|
+
} = useWidgetState();
|
|
7017
|
+
|
|
7018
|
+
const onSubmitClick = e => {
|
|
7019
|
+
var _a;
|
|
7020
|
+
|
|
7021
|
+
if (!formRef) {
|
|
7022
|
+
return onError(CALLBACK_CODES.INTERNAL, 'error', `formRef is required to submit the form!`);
|
|
7023
|
+
} else if (!formRef.current) {
|
|
7024
|
+
return onError(CALLBACK_CODES.INTERNAL, 'error', `formRef is empty, make sure it's passed as 'ref' prop to the form!`);
|
|
7025
|
+
} // formRef is provided
|
|
7026
|
+
|
|
7027
|
+
|
|
7028
|
+
e === null || e === void 0 ? void 0 : e.preventDefault();
|
|
7029
|
+
(_a = formRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('submit', {
|
|
7030
|
+
cancelable: true,
|
|
7031
|
+
bubbles: true
|
|
7032
|
+
}));
|
|
7033
|
+
};
|
|
7034
|
+
|
|
7035
|
+
if (!canAdd && !canUpdate) return null;
|
|
7036
|
+
return jsx(FormActions, {
|
|
7037
|
+
loading: loading,
|
|
7038
|
+
primaryLabel: t('saveButtonText'),
|
|
7039
|
+
onPrimaryButtonClick: onSubmitClick,
|
|
7040
|
+
onSecondaryButtonClick: closeForm,
|
|
7041
|
+
secondaryLabel: t('cancelButtonText')
|
|
7042
|
+
});
|
|
7043
|
+
};
|
|
7044
|
+
|
|
7045
|
+
const WiddgetFormWrapper = ({
|
|
7046
|
+
children
|
|
7047
|
+
}) => {
|
|
7048
|
+
const {
|
|
7049
|
+
formState,
|
|
7050
|
+
closeForm
|
|
7051
|
+
} = useWidgetState();
|
|
7052
|
+
return typeof children === 'function' ? children({
|
|
7053
|
+
formState,
|
|
7054
|
+
onClose: closeForm,
|
|
7055
|
+
open: formState === 'ADD' || formState === 'UPDATE'
|
|
7056
|
+
}) : null;
|
|
7057
|
+
};
|
|
7058
|
+
|
|
6937
7059
|
const Widget = ({
|
|
6938
7060
|
t,
|
|
6939
7061
|
loader,
|
|
7062
|
+
explicitForm: _explicitForm = false,
|
|
6940
7063
|
permissions: _permissions = DEFAULT_PERMISSIONS,
|
|
6941
7064
|
formatListItem,
|
|
6942
|
-
formatOptionLabel
|
|
7065
|
+
formatOptionLabel,
|
|
7066
|
+
children
|
|
6943
7067
|
}) => {
|
|
7068
|
+
const widgetFormRef = useRef(null);
|
|
6944
7069
|
const derivedT = createTranslation(t, Object.assign(Object.assign(Object.assign({}, TRANSLATION_PAIRS_COMMON), TRANSLATION_PAIRS_WIDGET), TRANSLATION_PAIRS_TILES));
|
|
6945
7070
|
const {
|
|
6946
7071
|
list,
|
|
@@ -7009,17 +7134,31 @@ const Widget = ({
|
|
|
7009
7134
|
canDelete: _permissions.delete,
|
|
7010
7135
|
canList: _permissions.list,
|
|
7011
7136
|
canUpdate: _permissions.update,
|
|
7012
|
-
canPartialUpdate: _permissions.partialUpdate
|
|
7137
|
+
canPartialUpdate: _permissions.partialUpdate,
|
|
7138
|
+
formState: formState,
|
|
7139
|
+
closeForm: onCloseForm
|
|
7013
7140
|
}, {
|
|
7014
|
-
children: [
|
|
7015
|
-
|
|
7016
|
-
|
|
7017
|
-
|
|
7018
|
-
|
|
7141
|
+
children: [children ? children : jsxs(Fragment, {
|
|
7142
|
+
children: [jsx(AddButton, {}), jsx(WidgetSearch, {}), jsxs("div", Object.assign({
|
|
7143
|
+
className: "khb_table-wrapper"
|
|
7144
|
+
}, {
|
|
7145
|
+
children: [jsx(WidgetTable, {}), jsx(WidgetPagination, {})]
|
|
7146
|
+
}))]
|
|
7147
|
+
}), !_explicitForm && jsx(Drawer, Object.assign({
|
|
7019
7148
|
open: formState === 'ADD' || formState === 'UPDATE',
|
|
7020
7149
|
onClose: onCloseForm,
|
|
7021
|
-
formState: formState
|
|
7022
|
-
|
|
7150
|
+
title: formState === 'ADD' ? derivedT('widget.addWidgetTitle') : formState === 'UPDATE' ? derivedT('widget.updateWidgetTitle') : '',
|
|
7151
|
+
footerContent: jsx(WidgetFormActions, {
|
|
7152
|
+
formRef: widgetFormRef
|
|
7153
|
+
})
|
|
7154
|
+
}, {
|
|
7155
|
+
children: jsx(WidgetForm, {
|
|
7156
|
+
open: formState === 'ADD' || formState === 'UPDATE',
|
|
7157
|
+
onClose: onCloseForm,
|
|
7158
|
+
formState: formState,
|
|
7159
|
+
formRef: widgetFormRef
|
|
7160
|
+
})
|
|
7161
|
+
})), itemData && jsx(DeleteModal, {
|
|
7023
7162
|
formState: formState,
|
|
7024
7163
|
itemData: itemData,
|
|
7025
7164
|
onClose: onCloseForm,
|
|
@@ -7029,5 +7168,11 @@ const Widget = ({
|
|
|
7029
7168
|
};
|
|
7030
7169
|
|
|
7031
7170
|
Widget.Table = WidgetTable;
|
|
7171
|
+
Widget.Form = WidgetForm;
|
|
7172
|
+
Widget.AddButton = AddButton;
|
|
7173
|
+
Widget.Search = WidgetSearch;
|
|
7174
|
+
Widget.Pagination = WidgetPagination;
|
|
7175
|
+
Widget.FormWrapper = WiddgetFormWrapper;
|
|
7176
|
+
Widget.FormActions = WidgetFormActions;
|
|
7032
7177
|
|
|
7033
7178
|
export { Page, Provider, Widget };
|
|
@@ -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;
|
|
@@ -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;
|