@knovator/pagecreator-admin 1.2.1 → 1.2.3

package/src/lib/components/Widget/Form/ItemsAccordian.tsx

@@ -0,0 +1,354 @@
+import React, { useEffect, useState } from 'react';
+import { Controller, useFieldArray } from 'react-hook-form';
+
+import Input from '../../common/Input';
+import Button from '../../common/Button';
+import Accordian from '../../common/Accordian';
+import ImageUpload from '../../common/ImageUpload';
+import { ItemsAccordianProps } from '../../../types';
+import ConfirmPopover from '../../common/ConfirmPopover';
+import { useWidgetState } from '../../../context/WidgetContext';
+import { useProviderState } from '../../../context/ProviderContext';
+
+interface ImageInputProps {
+  label: string;
+  control: any;
+  name: string;
+  error: any;
+  baseUrl: string;
+  imageMaxSize: number;
+  onImageUpload: (file: File) => Promise<void | {
+    fileUrl: string;
+    fileId: string;
+    fileUri: string;
+  }>;
+  text: string | JSX.Element;
+  onImageRemove: (fileId: string) => Promise<void>;
+  setError: (name: string, error: any) => void;
+  clearError: (name: string) => void;
+}
+
+const ImageInput = ({
+  label,
+  control,
+  name,
+  text,
+  error,
+  baseUrl,
+  setError,
+  clearError,
+  onImageRemove,
+  imageMaxSize,
+  onImageUpload,
+}: ImageInputProps) => {
+  return (
+    <div className="kms_input-wrapper">
+      <label className="kms_input-label">{label}</label>
+      <Controller
+        control={control}
+        name={name}
+        render={({ field }) => (
+          <ImageUpload
+            imgId={field.value}
+            clearError={() => clearError(name)}
+            maxSize={imageMaxSize}
+            onError={(msg) =>
+              setError(name, {
+                type: 'custom',
+                message: msg,
+              })
+            }
+            error={error}
+            setImgId={(value) => {
+              field.onChange(value);
+            }}
+            baseUrl={baseUrl}
+            text={text}
+            onImageUpload={onImageUpload}
+            onImageRemove={onImageRemove}
+            className="khb_img-upload-wrapper-3"
+          />
+        )}
+      />
+    </div>
+  );
+};
+
+const ItemsAccordian = ({
+  show,
+  title,
+  id,
+  collapseId,
+  toggleShow,
+  loading,
+  name,
+  errors,
+  control,
+  register,
+  setError,
+  itemType,
+  languages,
+  clearError,
+  addText = 'Add',
+  deleteText = 'Delete',
+}: ItemsAccordianProps) => {
+  const { baseUrl, commonTranslations } = useProviderState();
+  const {
+    onImageUpload,
+    onImageRemove,
+    imageBaseUrl,
+    imageMaxSize,
+    widgetTranslations,
+  } = useWidgetState();
+  const [itemsShow, setItemsShow] = useState<boolean[]>([]);
+  const {
+    fields: items,
+    append: appendItem,
+    remove: removeItem,
+  } = useFieldArray({ name, control });
+
+  const onItemsToggleClick = (index: number, status?: boolean) => {
+    const newItemsShow: boolean[] = [...itemsShow];
+    const newStatus = errors?.[name]?.[index]
+      ? true
+      : typeof status === 'undefined'
+      ? !newItemsShow[index]
+      : status;
+    newItemsShow[index] = newStatus;
+    setItemsShow(newItemsShow);
+  };
+
+  useEffect(() => {
+    if (errors && errors?.[name]?.length > 0) {
+      errors?.[name]?.forEach((errorItem: any, index: number) => {
+        if (errorItem) onItemsToggleClick(index, true);
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [errors, name, errors?.[name]]);
+
+  const addTab = (index: number) => {
+    appendItem({
+      altText: '',
+      link: '',
+      img: '',
+      srcset: [],
+      itemType,
+      sequence: index,
+    });
+  };
+
+  return (
+    <Accordian
+      open={show}
+      onToggle={() => toggleShow(!show)}
+      title={title}
+      collapseId={collapseId}
+      id={id}
+      footerContent={
+        <Button
+          size="sm"
+          disabled={loading}
+          onClick={() => addTab(items.length)}
+        >
+          {addText}
+        </Button>
+      }
+    >
+      <div className="khb_item-items">
+        {items?.map((field, index) => (
+          <Accordian
+            key={index}
+            open={itemsShow[index]}
+            onToggle={() => onItemsToggleClick(index)}
+            title={`Item ${index + 1}`}
+            collapseId={`${id}-item-content-${index}`}
+            id={`${id}-item-${index}`}
+            footerContent={
+              <ConfirmPopover
+                onConfirm={() => removeItem(index)}
+                title={widgetTranslations.deleteTitle}
+                confirmText={commonTranslations.yes}
+                cancelText={commonTranslations.cancel}
+              >
+                <Button type="danger" size="sm" disabled={loading}>
+                  {deleteText}
+                </Button>
+              </ConfirmPopover>
+            }
+          >
+            <div className="khb-form-items">
+              {Array.isArray(languages) && languages.length > 0 ? (
+                <>
+                  {languages.map((lang) => (
+                    <Input
+                      rest={register(`${name}.${index}.titles.${lang.code}`)}
+                      label={commonTranslations.title + ` (${lang.name})`}
+                      error={
+                        errors[name]?.[index]?.['titles']?.[lang.code]
+                          ? errors[name]?.[index]?.['titles']?.[
+                              lang.code
+                            ]?.message?.toString() + ` (${lang.name})`
+                          : ''
+                      }
+                      type="text"
+                      className="w-full p-2"
+                      placeholder={
+                        commonTranslations.titlePlaceholder + ` (${lang.name})`
+                      }
+                     
+                    />
+                  ))}
+                </>
+              ) : (
+                <Input
+                  rest={register(`${name}.${index}.title`)}
+                  label={commonTranslations.title}
+                  error={errors[name]?.[index]?.['title']?.message?.toString()}
+                  type="text"
+                  className="w-full p-2"
+                  placeholder={commonTranslations.titlePlaceholder}
+                
+                />
+              )}
+              {Array.isArray(languages) && languages.length > 0 ? (
+                <>
+                  {languages.map((lang) => (
+                    <Input
+                      rest={register(`${name}.${index}.subtitles.${lang.code}`)}
+                      label={widgetTranslations.subtitle + ` (${lang.name})`}
+                      type="text"
+                      className="w-full p-2"
+                      placeholder={
+                        widgetTranslations.subTitlePlaceholder +
+                        ` (${lang.name})`
+                      }
+                    />
+                  ))}
+                </>
+              ) : (
+                <Input
+                  rest={register(`${name}.${index}.subtitle`)}
+                  label={widgetTranslations.subtitle}
+                  type="text"
+                  className="w-full p-2"
+                  placeholder={widgetTranslations.subTitlePlaceholder}
+                />
+              )}
+              {Array.isArray(languages) && languages.length > 0 ? (
+                <>
+                  {languages.map((lang) => (
+                    <Input
+                      rest={register(`${name}.${index}.altTexts.${lang.code}`)}
+                      label={widgetTranslations.altText + ` (${lang.name})`}
+                      type="text"
+                      className="w-full p-2"
+                      placeholder={
+                        widgetTranslations.altTextPlaceholder +
+                        ` (${lang.name})`
+                      }
+                    />
+                  ))}
+                </>
+              ) : (
+                <Input
+                  rest={register(`${name}.${index}.altText`)}
+                  label={widgetTranslations.altText}
+                  type="text"
+                  className="w-full p-2"
+                  placeholder={widgetTranslations.altTextPlaceholder}
+                />
+              )}
+              <Input
+                rest={register(`${name}.${index}.link`)}
+                label={widgetTranslations.link}
+                type="url"
+                className="w-full p-2"
+                placeholder={widgetTranslations.linkPlaceholder}
+              />
+              <Input.SrcSet
+                control={control}
+                register={register}
+                label={widgetTranslations.srcset}
+                name={`${name}.${index}.srcset`}
+                errors={errors[name]?.[index]?.['srcset']}
+                screenSizeRequired={widgetTranslations.screenSizeRequired}
+                heightRequired={widgetTranslations.heightRequired}
+                minHeight={widgetTranslations.minHeight}
+                minScreenSize={widgetTranslations.minScreenSize}
+                minWidth={widgetTranslations.minWidth}
+                widthRequired={widgetTranslations.widthRequired}
+              />
+              {Array.isArray(languages) && languages.length > 0 ? (
+                <>
+                  {languages.map((lang) => (
+                    <ImageInput
+                      key={lang.code}
+                      label={widgetTranslations.image + ` (${lang.name})`}
+                      control={control}
+                      name={`${name}.${index}.imgs.${lang.code}`}
+                      error={errors[name]?.[index]?.['imgs']?.[
+                        lang.code
+                      ]?.message?.toString()}
+                      baseUrl={imageBaseUrl ? imageBaseUrl : baseUrl}
+                      setError={setError}
+                      clearError={clearError}
+                      onImageRemove={onImageRemove}
+                      imageMaxSize={imageMaxSize}
+                      onImageUpload={onImageUpload}
+                      text={
+                        <>
+                          <div className="khb_img-text-wrapper">
+                            <div className="khb_img-text-label">
+                              <span>{widgetTranslations.uploadFile}</span>
+                            </div>
+                            <p className="khb_img-text-1">
+                              {widgetTranslations.dragDrop}
+                            </p>
+                          </div>
+                          <p className="khb_img-text-2">
+                            {widgetTranslations.allowedFormat}
+                          </p>
+                        </>
+                      }
+                    />
+                  ))}
+                </>
+              ) : (
+                <ImageInput
+                  label={widgetTranslations.image}
+                  control={control}
+                  name={`${name}.${index}.img`}
+                  error={errors[name]?.[index]?.['img']?.message?.toString()}
+                  baseUrl={imageBaseUrl ? imageBaseUrl : baseUrl}
+                  setError={setError}
+                  clearError={clearError}
+                  onImageRemove={onImageRemove}
+                  imageMaxSize={imageMaxSize}
+                  onImageUpload={onImageUpload}
+                  text={
+                    <>
+                      <div className="khb_img-text-wrapper">
+                        <div className="khb_img-text-label">
+                          <span>{widgetTranslations.uploadFile}</span>
+                        </div>
+                        <p className="khb_img-text-1">
+                          {widgetTranslations.dragDrop}
+                        </p>
+                      </div>
+                      <p className="khb_img-text-2">
+                        {widgetTranslations.allowedFormat}
+                      </p>
+                    </>
+                  }
+                />
+              )}
+            </div>
+          </Accordian>
+        ))}
+      </div>
+    </Accordian>
+  );
+};
+
+export default ItemsAccordian;

package/src/lib/components/Widget/Form/Tabs/TabItem.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import Trash from '../../../../icons/trash';
+import { TabItemProps } from '../../../../types';
+import ConfirmPopover from '../../../common/ConfirmPopover';
+
+const TabItem = ({
+  showDelete,
+  isDisabled,
+  deleteTitle,
+  onRemoveTab,
+  register,
+  error,
+  noButtonText,
+  yesButtonText,
+}: TabItemProps) => {
+  return (
+    <>
+      <input
+        type="text"
+        className="khb_tabs-input"
+        autoFocus
+        style={{ display: 'block' }}
+        disabled={isDisabled}
+        {...(register || {})}
+      />
+      {error && <p className="khb_input-error ">{error}</p>}
+      {showDelete ? (
+        <ConfirmPopover
+          onConfirm={onRemoveTab}
+          title={deleteTitle}
+          confirmText={yesButtonText}
+          cancelText={noButtonText}
+        >
+          <Trash className="khb_tabs-remove" />
+        </ConfirmPopover>
+      ) : (
+        ''
+      )}
+    </>
+  );
+};
+
+export default TabItem;

package/src/lib/components/Widget/Form/Tabs/Tabs.tsx

@@ -0,0 +1,190 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import {
+  TabList,
+  Tabs as PkgTabs,
+  Tab as PkgTab,
+  TabPanel as PkgTabPanel,
+} from 'react-tabs';
+import { useFieldArray, Controller } from 'react-hook-form';
+import { OptionType, TabsProps } from '../../../../types';
+
+import Plus from '../../../../icons/plus';
+import Button from '../../../common/Button';
+import TabItem from './TabItem';
+import CustomReactSelect from '../../../common/Input/ReactSelect';
+import DNDItemsList from '../../../common/DNDItemsList';
+
+const Tabs = ({
+  errors,
+  activeTab,
+  setActiveTab,
+  options,
+  control,
+  listCode,
+  setValue,
+  getValues,
+  languages,
+  formatItem,
+  deleteTitle,
+  clearErrors,
+  loadOptions,
+  customStyles,
+  noButtonText,
+  yesButtonText,
+  isItemsLoading,
+  itemsPlaceholder,
+  formatOptionLabel,
+  tabCollectionItems,
+  onCollectionItemsIndexChange,
+}: TabsProps) => {
+  const [selectedLanguage, setSelectedLanguage] = useState<string | undefined>(
+    languages?.[0]?.code
+  );
+  const {
+    fields: tabFields,
+    append: appendField,
+    remove: removeField,
+  } = useFieldArray({ name: 'tabs', control });
+
+  const addTab = () => {
+    appendField({
+      ...(selectedLanguage
+        ? {
+            names: languages?.reduce((acc, lng) => {
+              acc[lng.code] = '';
+              return acc;
+            }, {} as any),
+          }
+        : {
+            name: '',
+          }),
+      collectionItems: [],
+    });
+    setActiveTab(tabFields.length);
+  };
+  const onTabnameChange = (index: number, value: string) => {
+    if (selectedLanguage) {
+      clearErrors(`tabs.${index}.names.${selectedLanguage}`);
+      setValue(`tabs.${index}.names.${selectedLanguage}`, value);
+    } else {
+      clearErrors(`tabs.${index}.name`);
+      setValue(`tabs.${index}.name`, value);
+    }
+  };
+
+  return (
+    <div className="khb_tabs-container">
+      <PkgTabs
+        selectedIndex={activeTab}
+        onSelect={setActiveTab}
+        className="khb-tabs"
+      >
+        <TabList className="khb_tabs-list">
+          {Array.isArray(languages) && languages.length > 0 && (
+            <div className="khb_input-wrapper">
+              <select
+                title="Change Language"
+                value={selectedLanguage}
+                className="khb_input khb_input-sm h-full"
+                onChange={(e) => setSelectedLanguage(e.target.value)}
+              >
+                {languages.map((lng) => (
+                  <option value={lng.code} key={lng.code}>
+                    {lng.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+          {tabFields?.map((field, index) => {
+            return (
+              <PkgTab
+                key={field.id}
+                className={classNames('khb_tabs-item', {
+                  'khb_tabs-item-selected': activeTab === index,
+                })}
+              >
+                <TabItem
+                  key={field.id}
+                  deleteTitle={deleteTitle}
+                  register={{
+                    value: getValues(`tabs.${index}.names.${selectedLanguage}`),
+                    onChange: (e: any) =>
+                      onTabnameChange(index, e.target.value || ''),
+                  }}
+                  onRemoveTab={() => {
+                    removeField(index);
+                    setActiveTab(index === 0 ? 0 : index - 1);
+                  }}
+                  error={
+                    selectedLanguage
+                      ? errors?.['tabs']?.[index]?.names
+                        ? Object.keys(errors?.['tabs']?.[index]?.names)
+                            .map(
+                              (key) =>
+                                errors?.['tabs']?.[index]?.names?.[key]?.message
+                            )
+                            .join(', ')
+                        : ''
+                      : errors?.['tabs']?.[index]?.name?.message
+                  }
+                  noButtonText={noButtonText}
+                  yesButtonText={yesButtonText}
+                  showDelete={tabFields?.length > 1}
+                />
+              </PkgTab>
+            );
+          })}
+          <Button className="khb_tabs-add" onClick={addTab}>
+            <Plus />
+          </Button>
+        </TabList>
+        <div className="khb_tabs-body">
+          {tabFields?.map((field, index) => (
+            <PkgTabPanel key={field.id}>
+              <Controller
+                control={control}
+                name={`tabs.${index}.collectionItems`}
+                render={({ field: { value, onChange } }) => (
+                  <CustomReactSelect
+                    options={options || []}
+                    onChange={(value: OptionType | OptionType[] | null) => {
+                      if (value) {
+                        if (Array.isArray(value)) onChange(value);
+                        else onChange([value]);
+                      }
+                    }}
+                    selectKey={`tabs.${index}.collectionItems-${JSON.stringify(
+                      Array.isArray(value) && value.length > 0
+                        ? value[0] || ''
+                        : listCode
+                    )}`}
+                    selectedOptions={value}
+                    isMulti={true}
+                    isSearchable={true}
+                    loadOptions={loadOptions}
+                    isLoading={isItemsLoading}
+                    placeholder={itemsPlaceholder}
+                    listCode={listCode}
+                    customStyles={customStyles}
+                    // wrapperClassName={schema.wrapperClassName}
+                    formatOptionLabel={formatOptionLabel}
+                  />
+                )}
+              />
+            </PkgTabPanel>
+          ))}
+        </div>
+      </PkgTabs>
+      <DNDItemsList
+        items={tabCollectionItems[activeTab]}
+        onDragEnd={(result) => onCollectionItemsIndexChange(activeTab, result)}
+        formatItem={formatItem}
+        listCode={listCode}
+      />
+    </div>
+  );
+};
+
+export default Tabs;

package/src/lib/components/Widget/Form/Tabs/{index.d.ts → index.ts}

@@ -1,2 +1,3 @@
 import Tabs from './Tabs';
+
 export default Tabs;