@knovator/pagecreator-admin 0.8.1 → 0.8.3

package/README.md

@@ -91,7 +91,7 @@
 
 ### Prerequisites
 
-We can use `@knovator/pagecreator-admin` in React/Next application, we can create one using following commands
+Create one reactjs/nextjs application if you don't have one,
 * Project
   ```sh
   npx create-react-app my-app
@@ -104,8 +104,7 @@ We can use `@knovator/pagecreator-admin` in React/Next application, we can creat
 
 ### Installation
 
-
-1. Install NPM packages
+1. Add pagecreator package
    ```sh
    npm install @knovator/pagecreator-admin
    # or
@@ -121,7 +120,7 @@ We can use `@knovator/pagecreator-admin` in React/Next application, we can creat
 
 ### Provider
 
-`@knovator/pagecreator-admin` uses **Context API**, to support communication between components. So, `Widget`/`Page` components should be wrapped by Provider.
+In order to support communication between components `@knovator/pagecreator-admin` uses **Context API**. So, `Widget`/`Page` components should be wrapped by Provider.
 ```jsx
 import { Provider } from '@knovator/pagecreator-admin';
 

package/index.cjs

@@ -2879,6 +2879,11 @@ const usePage = ({
     }
   }), [baseUrl, currentPageRef, limitRef, offsetRef, handleError, pageRoutesPrefix, routes, token]);
   const onPageFormSubmit = data => __awaiter(void 0, void 0, void 0, function* () {
+    if (selectedWidgets.length) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      data.widgets = selectedWidgets.map(item => item.value);
+    }
     setLoading(true);
     const code = formState === 'ADD' ? CALLBACK_CODES.CREATE : CALLBACK_CODES.UPDATE;
     try {
@@ -2969,6 +2974,7 @@ const usePage = ({
     }
   };
   const onChangeWidgetSequence = (sourceIndex, destinationIndex) => {
+    console.log(sourceIndex, destinationIndex);
     setSelectedWidgets(listData => {
       const temporaryData = [...listData];
       const [selectedRow] = temporaryData.splice(sourceIndex, 1);
@@ -6015,6 +6021,7 @@ const WidgetContextProvider = ({
   loader: _loader = /*#__PURE__*/React__default["default"].createElement("span", null),
   onPartialUpdateWidget: _onPartialUpdateWidget = () => Promise.resolve(),
   reactSelectStyles: _reactSelectStyles = {},
+  imageMaxSize: _imageMaxSize = 10485760,
   // other
   children
 }) => {
@@ -6061,7 +6068,8 @@ const WidgetContextProvider = ({
       columns: _columns,
       data: _data,
       canDelete: _canDelete,
-      loader: _loader
+      loader: _loader,
+      imageMaxSize: _imageMaxSize
     }
   }, children);
 };
@@ -6306,7 +6314,7 @@ const ImageUpload = ({
       try {
         if (typeof clearError === 'function') clearError();
         if ((acceptedFiles === null || acceptedFiles === void 0 ? void 0 : acceptedFiles.length) > 0) {
-          const regex = /\.(png|jpeg|jpg|webp|svg)$/gi;
+          const regex = /\.(png|jpeg|jpg|webp|svg|gif)$/gi;
           const files = acceptedFiles.filter(file => regex.test(file.name));
           if (files[0]) {
             const response = yield onImageUpload(files[0]);
@@ -6433,7 +6441,8 @@ const ItemsAccordian = ({
     onImageUpload,
     onImageRemove,
     t,
-    imageBaseUrl
+    imageBaseUrl,
+    imageMaxSize
   } = useWidgetState();
   const [itemsShow, setItemsShow] = React.useState([]);
   const {
@@ -6555,7 +6564,7 @@ const ItemsAccordian = ({
         return /*#__PURE__*/React__default["default"].createElement(ImageUpload$1, {
           imgId: field.value,
           clearError: () => clearError(`${name}.${index}.img`),
-          maxSize: 10485760,
+          maxSize: imageMaxSize,
           onError: msg => setError(`${name}.${index}.img`, {
             type: 'custom',
             message: msg
@@ -7299,6 +7308,7 @@ const Widget = ({
   preConfirmDelete,
   formatListItem,
   formatOptionLabel,
+  imageMaxSize,
   children
 }) => {
   const derivedPermissions = Object.assign(DEFAULT_PERMISSIONS, _permissions);
@@ -7372,7 +7382,8 @@ const Widget = ({
     canUpdate: derivedPermissions.update,
     canPartialUpdate: derivedPermissions.partialUpdate,
     formState: formState,
-    closeForm: onCloseForm
+    closeForm: onCloseForm,
+    imageMaxSize: imageMaxSize
   }, children ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(AddButton, null), /*#__PURE__*/React__default["default"].createElement(WidgetSearch, null), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "khb_table-wrapper"
   }, /*#__PURE__*/React__default["default"].createElement(WidgetTable, null), /*#__PURE__*/React__default["default"].createElement(WidgetPagination, null))), !_explicitForm && /*#__PURE__*/React__default["default"].createElement(Drawer, {

package/index.js

@@ -2867,6 +2867,11 @@ const usePage = ({
     }
   }), [baseUrl, currentPageRef, limitRef, offsetRef, handleError, pageRoutesPrefix, routes, token]);
   const onPageFormSubmit = data => __awaiter(void 0, void 0, void 0, function* () {
+    if (selectedWidgets.length) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      data.widgets = selectedWidgets.map(item => item.value);
+    }
     setLoading(true);
     const code = formState === 'ADD' ? CALLBACK_CODES.CREATE : CALLBACK_CODES.UPDATE;
     try {
@@ -2957,6 +2962,7 @@ const usePage = ({
     }
   };
   const onChangeWidgetSequence = (sourceIndex, destinationIndex) => {
+    console.log(sourceIndex, destinationIndex);
     setSelectedWidgets(listData => {
       const temporaryData = [...listData];
       const [selectedRow] = temporaryData.splice(sourceIndex, 1);
@@ -6003,6 +6009,7 @@ const WidgetContextProvider = ({
   loader: _loader = /*#__PURE__*/React.createElement("span", null),
   onPartialUpdateWidget: _onPartialUpdateWidget = () => Promise.resolve(),
   reactSelectStyles: _reactSelectStyles = {},
+  imageMaxSize: _imageMaxSize = 10485760,
   // other
   children
 }) => {
@@ -6049,7 +6056,8 @@ const WidgetContextProvider = ({
       columns: _columns,
       data: _data,
       canDelete: _canDelete,
-      loader: _loader
+      loader: _loader,
+      imageMaxSize: _imageMaxSize
     }
   }, children);
 };
@@ -6294,7 +6302,7 @@ const ImageUpload = ({
       try {
         if (typeof clearError === 'function') clearError();
         if ((acceptedFiles === null || acceptedFiles === void 0 ? void 0 : acceptedFiles.length) > 0) {
-          const regex = /\.(png|jpeg|jpg|webp|svg)$/gi;
+          const regex = /\.(png|jpeg|jpg|webp|svg|gif)$/gi;
           const files = acceptedFiles.filter(file => regex.test(file.name));
           if (files[0]) {
             const response = yield onImageUpload(files[0]);
@@ -6421,7 +6429,8 @@ const ItemsAccordian = ({
     onImageUpload,
     onImageRemove,
     t,
-    imageBaseUrl
+    imageBaseUrl,
+    imageMaxSize
   } = useWidgetState();
   const [itemsShow, setItemsShow] = useState([]);
   const {
@@ -6543,7 +6552,7 @@ const ItemsAccordian = ({
         return /*#__PURE__*/React.createElement(ImageUpload$1, {
           imgId: field.value,
           clearError: () => clearError(`${name}.${index}.img`),
-          maxSize: 10485760,
+          maxSize: imageMaxSize,
           onError: msg => setError(`${name}.${index}.img`, {
             type: 'custom',
             message: msg
@@ -7287,6 +7296,7 @@ const Widget = ({
   preConfirmDelete,
   formatListItem,
   formatOptionLabel,
+  imageMaxSize,
   children
 }) => {
   const derivedPermissions = Object.assign(DEFAULT_PERMISSIONS, _permissions);
@@ -7360,7 +7370,8 @@ const Widget = ({
     canUpdate: derivedPermissions.update,
     canPartialUpdate: derivedPermissions.partialUpdate,
     formState: formState,
-    closeForm: onCloseForm
+    closeForm: onCloseForm,
+    imageMaxSize: imageMaxSize
   }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AddButton, null), /*#__PURE__*/React.createElement(WidgetSearch, null), /*#__PURE__*/React.createElement("div", {
     className: "khb_table-wrapper"
   }, /*#__PURE__*/React.createElement(WidgetTable, null), /*#__PURE__*/React.createElement(WidgetPagination, null))), !_explicitForm && /*#__PURE__*/React.createElement(Drawer, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knovator/pagecreator-admin",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "dependencies": {
     "classnames": "^2.3.1",
     "react-beautiful-dnd": "^13.1.0",

package/src/lib/components/Widget/Widget/Widget.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { WidgetProps } from '../../../types';
 declare const Widget: {
-    ({ t, routes, loader, explicitForm, imageBaseUrl, permissions, preConfirmDelete, formatListItem, formatOptionLabel, children, }: WidgetProps): JSX.Element;
+    ({ t, routes, loader, explicitForm, imageBaseUrl, permissions, preConfirmDelete, formatListItem, formatOptionLabel, imageMaxSize, children, }: WidgetProps): JSX.Element;
     Table: ({ extraActions, extraColumns }: import("../../../types").DerivedTableProps) => JSX.Element;
     Form: ({ formRef, customInputs }: import("../../../types").FormProps) => JSX.Element | null;
     AddButton: () => JSX.Element;

package/src/lib/context/WidgetContext.d.ts

@@ -2,6 +2,6 @@ import React from 'react';
 import { WidgetContextType } from '../types';
 interface WidgetContextProviderProps extends React.PropsWithChildren, Partial<WidgetContextType> {
 }
-declare const WidgetContextProvider: ({ t, list, imageBaseUrl, searchText, changeSearch, formState, closeForm, loading, onChangeFormState, onWidgetFormSubmit, updateData, canAdd, canUpdate, onDeleteItem, getWidgets, onImageUpload, onImageRemove, itemsTypes, widgetTypes, getCollectionData, collectionDataLoading, collectionData, formatListItem, formatOptionLabel, currentPage, limits, pageSize, setCurrentPage, setPageSize, totalPages, totalRecords, canList, canPartialUpdate, columns, data, canDelete, loader, onPartialUpdateWidget, reactSelectStyles, children, }: WidgetContextProviderProps) => JSX.Element;
+declare const WidgetContextProvider: ({ t, list, imageBaseUrl, searchText, changeSearch, formState, closeForm, loading, onChangeFormState, onWidgetFormSubmit, updateData, canAdd, canUpdate, onDeleteItem, getWidgets, onImageUpload, onImageRemove, itemsTypes, widgetTypes, getCollectionData, collectionDataLoading, collectionData, formatListItem, formatOptionLabel, currentPage, limits, pageSize, setCurrentPage, setPageSize, totalPages, totalRecords, canList, canPartialUpdate, columns, data, canDelete, loader, onPartialUpdateWidget, reactSelectStyles, imageMaxSize, children, }: WidgetContextProviderProps) => JSX.Element;
 export declare function useWidgetState(): WidgetContextType;
 export default WidgetContextProvider;

package/src/lib/types/components.d.ts

@@ -149,6 +149,7 @@ export interface WidgetProps {
     children?: JSX.Element;
     reactSelectStyles?: any;
     imageBaseUrl?: string;
+    imageMaxSize?: number;
 }
 export interface DerivedTableProps {
     extraActions?: (item: any) => JSX.Element;

package/src/lib/types/context.d.ts

@@ -64,6 +64,7 @@ export interface WidgetContextType {
     onPartialUpdateWidget: (data: any, id: string) => Promise<void>;
     reactSelectStyles?: any;
     imageBaseUrl?: string;
+    imageMaxSize: number;
 }
 export interface PageContextType {
     t: (key: string) => string;