@knovator/pagecreator-admin 0.7.4 → 0.7.5

package/index.cjs

@@ -1757,7 +1757,8 @@ const TRANSLATION_PAIRS_WIDGET = {
   'widget.tabDeleteTitle': 'Are you sure you want to delete this tab?',
   'widget.widgetTitleInfo': 'HTML is supported',
   'widget.minPerRow': 'Value must be greater than zero',
-  'widget.actionsLabel': 'Actions'
+  'widget.actionsLabel': 'Actions',
+  'widget.tabNameRequired': 'Tab Name is required'
 };
 const TRANSLATION_PAIRS_ITEM = {
   'item.title': 'Title',
@@ -4230,6 +4231,7 @@ const DeleteModal = ({
   confirm,
   typeHerePlaceholder
 }) => {
+  var _a;
   const [userInput, setUserInput] = React.useState('');
   React.useEffect(() => {
     setUserInput('');
@@ -4250,13 +4252,14 @@ const DeleteModal = ({
     className: "khb_delete-actions"
   }, /*#__PURE__*/React__default["default"].createElement(Input, {
     placeholder: typeHerePlaceholder || TRANSLATION_PAIRS_COMMON.typeHerePlaceholder,
+    wrapperClassName: "w-full",
     className: "khb_delete-input",
     value: userInput,
     onChange: e => setUserInput(e.target.value)
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "khb_delete-buttons"
   }, /*#__PURE__*/React__default["default"].createElement(Button, {
-    disabled: userInput !== (itemData === null || itemData === void 0 ? void 0 : itemData['name']),
+    disabled: userInput.toString().trim() !== ((_a = itemData === null || itemData === void 0 ? void 0 : itemData['name']) === null || _a === void 0 ? void 0 : _a.trim()),
     onClick: onConfirmDelete
   }, confirm || TRANSLATION_PAIRS_COMMON.confirm)))) : null;
 };
@@ -6580,6 +6583,7 @@ const TabItem = ({
   deleteTitle,
   onRemoveTab,
   register,
+  error,
   noButtonText,
   yesButtonText
 }) => {
@@ -6587,8 +6591,13 @@ const TabItem = ({
     type: "text",
     className: "khb_tabs-input",
     autoFocus: true,
+    style: {
+      display: 'block'
+    },
     disabled: isDisabled
-  }, register || {})), showDelete ? /*#__PURE__*/React__default["default"].createElement(ConfirmPopOver, {
+  }, register || {})), error && /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "khb_input-error "
+  }, error), showDelete ? /*#__PURE__*/React__default["default"].createElement(ConfirmPopOver, {
     onConfirm: onRemoveTab,
     title: deleteTitle,
     confirmText: yesButtonText,
@@ -6599,6 +6608,7 @@ const TabItem = ({
 };
 
 const Tabs = ({
+  errors,
   activeTab,
   setActiveTab,
   options,
@@ -6615,6 +6625,7 @@ const Tabs = ({
   itemsPlaceholder,
   formatOptionLabel,
   tabCollectionItems,
+  tabNameRequiredText,
   onCollectionItemsIndexChange
 }) => {
   const {
@@ -6641,6 +6652,7 @@ const Tabs = ({
   }, /*#__PURE__*/React__default["default"].createElement(reactTabs.TabList, {
     className: "khb_tabs-list"
   }, tabFields === null || tabFields === void 0 ? void 0 : tabFields.map((field, index) => {
+    var _a, _b, _c;
     return /*#__PURE__*/React__default["default"].createElement(reactTabs.Tab, {
       key: field.id,
       className: classNames__default["default"]('khb_tabs-item', {
@@ -6649,11 +6661,14 @@ const Tabs = ({
     }, /*#__PURE__*/React__default["default"].createElement(TabItem, {
       key: field.id,
       deleteTitle: deleteTitle,
-      register: register(`tabs.${index}.name`),
+      register: register(`tabs.${index}.name`, {
+        required: tabNameRequiredText
+      }),
       onRemoveTab: () => {
         removeField(index);
         setActiveTab(index === 0 ? 0 : index - 1);
       },
+      error: (_c = (_b = (_a = errors === null || errors === void 0 ? void 0 : errors['tabs']) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.name) === null || _c === void 0 ? void 0 : _c.message,
       noButtonText: noButtonText,
       yesButtonText: yesButtonText,
       showDelete: (tabFields === null || tabFields === void 0 ? void 0 : tabFields.length) > 1
@@ -7099,6 +7114,8 @@ const WidgetForm = ({
     deleteTitle: t('widget.tabDeleteTitle'),
     yesButtonText: t('yesButtonText'),
     noButtonText: t('cancelButtonText'),
+    errors: errors,
+    tabNameRequiredText: t('widget.tabNameRequired'),
     itemsPlaceholder: `Select ${selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.label}...`,
     loadOptions: onChangeSearch,
     isItemsLoading: collectionDataLoading,

package/index.js

@@ -1745,7 +1745,8 @@ const TRANSLATION_PAIRS_WIDGET = {
   'widget.tabDeleteTitle': 'Are you sure you want to delete this tab?',
   'widget.widgetTitleInfo': 'HTML is supported',
   'widget.minPerRow': 'Value must be greater than zero',
-  'widget.actionsLabel': 'Actions'
+  'widget.actionsLabel': 'Actions',
+  'widget.tabNameRequired': 'Tab Name is required'
 };
 const TRANSLATION_PAIRS_ITEM = {
   'item.title': 'Title',
@@ -4218,6 +4219,7 @@ const DeleteModal = ({
   confirm,
   typeHerePlaceholder
 }) => {
+  var _a;
   const [userInput, setUserInput] = useState('');
   useEffect(() => {
     setUserInput('');
@@ -4238,13 +4240,14 @@ const DeleteModal = ({
     className: "khb_delete-actions"
   }, /*#__PURE__*/React.createElement(Input, {
     placeholder: typeHerePlaceholder || TRANSLATION_PAIRS_COMMON.typeHerePlaceholder,
+    wrapperClassName: "w-full",
     className: "khb_delete-input",
     value: userInput,
     onChange: e => setUserInput(e.target.value)
   }), /*#__PURE__*/React.createElement("div", {
     className: "khb_delete-buttons"
   }, /*#__PURE__*/React.createElement(Button, {
-    disabled: userInput !== (itemData === null || itemData === void 0 ? void 0 : itemData['name']),
+    disabled: userInput.toString().trim() !== ((_a = itemData === null || itemData === void 0 ? void 0 : itemData['name']) === null || _a === void 0 ? void 0 : _a.trim()),
     onClick: onConfirmDelete
   }, confirm || TRANSLATION_PAIRS_COMMON.confirm)))) : null;
 };
@@ -6568,6 +6571,7 @@ const TabItem = ({
   deleteTitle,
   onRemoveTab,
   register,
+  error,
   noButtonText,
   yesButtonText
 }) => {
@@ -6575,8 +6579,13 @@ const TabItem = ({
     type: "text",
     className: "khb_tabs-input",
     autoFocus: true,
+    style: {
+      display: 'block'
+    },
     disabled: isDisabled
-  }, register || {})), showDelete ? /*#__PURE__*/React.createElement(ConfirmPopOver, {
+  }, register || {})), error && /*#__PURE__*/React.createElement("p", {
+    className: "khb_input-error "
+  }, error), showDelete ? /*#__PURE__*/React.createElement(ConfirmPopOver, {
     onConfirm: onRemoveTab,
     title: deleteTitle,
     confirmText: yesButtonText,
@@ -6587,6 +6596,7 @@ const TabItem = ({
 };
 
 const Tabs = ({
+  errors,
   activeTab,
   setActiveTab,
   options,
@@ -6603,6 +6613,7 @@ const Tabs = ({
   itemsPlaceholder,
   formatOptionLabel,
   tabCollectionItems,
+  tabNameRequiredText,
   onCollectionItemsIndexChange
 }) => {
   const {
@@ -6629,6 +6640,7 @@ const Tabs = ({
   }, /*#__PURE__*/React.createElement(TabList, {
     className: "khb_tabs-list"
   }, tabFields === null || tabFields === void 0 ? void 0 : tabFields.map((field, index) => {
+    var _a, _b, _c;
     return /*#__PURE__*/React.createElement(Tab, {
       key: field.id,
       className: classNames('khb_tabs-item', {
@@ -6637,11 +6649,14 @@ const Tabs = ({
     }, /*#__PURE__*/React.createElement(TabItem, {
       key: field.id,
       deleteTitle: deleteTitle,
-      register: register(`tabs.${index}.name`),
+      register: register(`tabs.${index}.name`, {
+        required: tabNameRequiredText
+      }),
       onRemoveTab: () => {
         removeField(index);
         setActiveTab(index === 0 ? 0 : index - 1);
       },
+      error: (_c = (_b = (_a = errors === null || errors === void 0 ? void 0 : errors['tabs']) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.name) === null || _c === void 0 ? void 0 : _c.message,
       noButtonText: noButtonText,
       yesButtonText: yesButtonText,
       showDelete: (tabFields === null || tabFields === void 0 ? void 0 : tabFields.length) > 1
@@ -7087,6 +7102,8 @@ const WidgetForm = ({
     deleteTitle: t('widget.tabDeleteTitle'),
     yesButtonText: t('yesButtonText'),
     noButtonText: t('cancelButtonText'),
+    errors: errors,
+    tabNameRequiredText: t('widget.tabNameRequired'),
     itemsPlaceholder: `Select ${selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.label}...`,
     loadOptions: onChangeSearch,
     isItemsLoading: collectionDataLoading,

package/package.json

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

package/src/lib/components/Widget/Form/Tabs/TabItem.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { TabItemProps } from '../../../../types';
-declare const TabItem: ({ showDelete, isDisabled, deleteTitle, onRemoveTab, register, noButtonText, yesButtonText, }: TabItemProps) => JSX.Element;
+declare const TabItem: ({ showDelete, isDisabled, deleteTitle, onRemoveTab, register, error, noButtonText, yesButtonText, }: TabItemProps) => JSX.Element;
 export default TabItem;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { TabsProps } from '../../../../types';
-declare const Tabs: ({ activeTab, setActiveTab, options, control, register, listCode, formatItem, deleteTitle, loadOptions, customStyles, noButtonText, yesButtonText, isItemsLoading, itemsPlaceholder, formatOptionLabel, tabCollectionItems, onCollectionItemsIndexChange, }: TabsProps) => JSX.Element;
+declare const Tabs: ({ errors, activeTab, setActiveTab, options, control, register, listCode, formatItem, deleteTitle, loadOptions, customStyles, noButtonText, yesButtonText, isItemsLoading, itemsPlaceholder, formatOptionLabel, tabCollectionItems, tabNameRequiredText, onCollectionItemsIndexChange, }: TabsProps) => JSX.Element;
 export default Tabs;

package/src/lib/constants/common.d.ts

@@ -87,6 +87,7 @@ declare const TRANSLATION_PAIRS_WIDGET: {
     'widget.widgetTitleInfo': string;
     'widget.minPerRow': string;
     'widget.actionsLabel': string;
+    'widget.tabNameRequired': string;
 };
 declare const TRANSLATION_PAIRS_ITEM: {
     'item.title': string;

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

@@ -242,6 +242,7 @@ export interface TabItemProps {
     register?: any;
     noButtonText: string;
     yesButtonText: string;
+    error?: string;
 }
 export interface TabsProps {
     activeTab: number;
@@ -255,6 +256,7 @@ export interface TabsProps {
     }[];
     deleteTitle: string;
     listCode: string;
+    tabNameRequiredText: string;
     noButtonText: string;
     yesButtonText: string;
     itemsPlaceholder?: string;
@@ -263,6 +265,9 @@ export interface TabsProps {
     formatItem?: (code: string, data: any) => JSX.Element;
     onCollectionItemsIndexChange: (index: number, data: DropResult) => void;
     tabCollectionItems: any[];
+    errors?: {
+        [key: string]: any;
+    };
     customStyles?: any;
     loadOptions?: (value?: string, callback?: (options: OptionType[]) => void) => Promise<OptionType[]>;
 }